wcs-core 2.14.0 → 2.16.0

package/dist/collection/components/accordion-panel/accordion-panel.css

@@ -14,6 +14,15 @@
   font-size: 16px;
   color: var(--wcs-primary);
   background-color: var(--wcs-light);
+  border: none;
+}
+@media (forced-colors: active) {
+  :host .header {
+    border: 1px solid ButtonBorder;
+  }
+}
+:host .header:focus-visible {
+  outline: 2px solid var(--wcs-primary);
 }
 :host .header-action {
   display: flex;

package/dist/collection/components/accordion-panel/accordion-panel.js

@@ -29,12 +29,12 @@ export class AccordionPanel {
   }
   render() {
     return (h(Host, null,
-      h("div", { class: "header", onClick: () => this.open = !this.open },
+      h("button", { "aria-expanded": this.open ? "true" : "false", "aria-controls": "content", class: "header", onClick: () => this.open = !this.open },
         h("slot", { name: "header" }),
-        h("div", { class: "header-action" },
+        h("span", { class: "header-action" },
           !this.hideActionText && (h("span", null, this.open ? 'Fermez' : 'Ouvrez')),
           h(SelectArrow, { up: this.open }))),
-      h("div", { class: "content" },
+      h("div", { class: "content", id: "content" },
         h("slot", { name: "content" }))));
   }
   static get is() { return "wcs-accordion-panel"; }

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

@@ -49,6 +49,7 @@ export class Button {
   }
   componentDidLoad() {
     this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));
+    this.el.focus = () => this.el.shadowRoot.querySelector(this.getTagName()).focus();
   }
   enabledRippleEffect() {
     this.mdcRipple.disabled = false;
@@ -56,6 +57,9 @@ export class Button {
   disabledRippleEffect() {
     this.mdcRipple.disabled = true;
   }
+  getTagName() {
+    return this.href !== undefined ? 'a' : 'button';
+  }
   onRippleChange() {
     if (this.ripple) {
       this.enabledRippleEffect();
@@ -65,7 +69,7 @@ export class Button {
     }
   }
   render() {
-    const TagType = this.href !== undefined ? 'a' : 'button';
+    const TagType = this.getTagName();
     const attrs = this.href !== undefined
       ? { href: this.href, role: 'button' }
       : { type: this.type };

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

@@ -2,6 +2,7 @@ import { Component, Host, h, Prop, Element, State, Listen } from '@stencil/core'
 export class ComNav {
   constructor() {
     this.mobileMenuOpen = false;
+    this.hasAlreadyRegisteredClickHandlerOnSlottedLink = false;
   }
   mobileMenuIconClick() {
     this.mobileMenuOpen = !this.mobileMenuOpen;
@@ -23,6 +24,23 @@ export class ComNav {
     });
     this.resizeObserver.observe(document.body);
   }
+  componentDidRender() {
+    this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag();
+  }
+  registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag() {
+    if (this.hasAlreadyRegisteredClickHandlerOnSlottedLink)
+      return;
+    const mainSlot = this.el.shadowRoot.querySelector('slot:not([name])');
+    if (mainSlot) {
+      this.hasAlreadyRegisteredClickHandlerOnSlottedLink = true;
+      // If the user click on a `a` tag, we close the mobile menu overlay.
+      mainSlot.assignedElements().filter(e => e.tagName === 'A').forEach(a => {
+        a.addEventListener('click', _ => {
+          this.mobileMenuOpen = false;
+        });
+      });
+    }
+  }
   //region Handlers for mobile menu overlay visibility
   //
   // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events

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

@@ -1,7 +1,8 @@
 import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
 import { SelectArrow } from '../select/select-arrow';
 import { createPopper } from '@popperjs/core';
-import { clickTargetIsElementOrChildren } from '../../utils/helpers';
+import { clickTargetIsElementOrChildren, isEscapeKey, isKeydown, isKeyup } from '../../utils/helpers';
+import { isElementFocused } from "../../utils/accessibility";
 export class Dropdown {
   constructor() {
     /** Hides the arrow in the button */
@@ -63,6 +64,38 @@ export class Dropdown {
   dropdownItemClick(_) {
     this.expanded = false;
   }
+  onKeyDown(evt) {
+    if (this.expanded && (isKeydown(evt) || isKeyup(evt))) {
+      const items = Array.from(this.el.querySelectorAll('wcs-dropdown-item'));
+      const currentFocusedItemIndex = items.findIndex(item => isElementFocused(item));
+      // If the dropdown is expended by the user, but no item is focused and the keydown is pressed
+      if (currentFocusedItemIndex === -1 && isKeydown(evt)) {
+        this.focusFirstItemIfPresent(items);
+      }
+      else {
+        this.moveFocusedItemByDirection(items, currentFocusedItemIndex, isKeydown(evt) ? 'down' : 'up');
+      }
+    }
+    if (this.expanded && isEscapeKey(evt)) {
+      this.closeOverlayAndFocusButton();
+    }
+  }
+  focusFirstItemIfPresent(items) {
+    if (items[0]) {
+      items[0].focus();
+    }
+  }
+  moveFocusedItemByDirection(items, currentFocusedItemIndex, direction) {
+    const itemToFocus = items[(currentFocusedItemIndex) + (direction === 'down' ? 1 : -1)];
+    if (itemToFocus) {
+      itemToFocus.focus();
+    }
+  }
+  closeOverlayAndFocusButton() {
+    this.expanded = !this.expanded;
+    const wcsButton = this.el.shadowRoot.querySelector('wcs-button');
+    wcsButton.focus();
+  }
   componentDidRender() {
     if (this.popper) {
       this.popper.update();
@@ -217,5 +250,11 @@ export class Dropdown {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "keydown",
+      "method": "onKeyDown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

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

@@ -7,7 +7,7 @@ wcs-dropdown-item {
   line-height: 42px;
 }
 
-wcs-dropdown-item:hover {
+wcs-dropdown-item:hover, wcs-dropdown-item:focus {
   color: var(--wcs-primary);
   background-color: var(--wcs-light);
 }

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

@@ -1,10 +1,16 @@
 import { Component, h, Event, Listen, Host } from '@stencil/core';
+import { isEnterKey, isSpaceKey } from "../../utils/helpers";
 export class DropdownItem {
   onMouseDown(_) {
     this.wcsDropdownItemClick.emit();
   }
+  onKeyDown(evt) {
+    if (isSpaceKey(evt) || isEnterKey(evt)) {
+      this.wcsDropdownItemClick.emit();
+    }
+  }
   render() {
-    return (h(Host, { slot: "item" },
+    return (h(Host, { slot: "item", tabindex: "0" },
       h("slot", null)));
   }
   static get is() { return "wcs-dropdown-item"; }
@@ -36,5 +42,11 @@ export class DropdownItem {
       "target": undefined,
       "capture": false,
       "passive": true
+    }, {
+      "name": "keydown",
+      "method": "onKeyDown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

package/dist/collection/components/grid/grid.js

@@ -19,6 +19,7 @@ export class Grid {
   }
   onDataChange(newValue) {
     this.updateGridRows(newValue);
+    this.refreshSort(false);
   }
   onSelectedItemsPropertyChange(newValue) {
     this.updateSelectionWithValues(newValue);
@@ -83,19 +84,21 @@ export class Grid {
     if (this.selectedItems) {
       this.updateSelectionWithValues(this.selectedItems);
     }
-    this.applyInitialSortConfig();
+    this.refreshSort(true);
   }
   /**
    * Handle existing column's filters (defined before the grid is instantiated)
    * @private
    */
-  applyInitialSortConfig() {
+  refreshSort(refreshOthersColmumnsSortOrderState) {
     const [first, ...other] = this.columns.filter(c => c.sortOrder !== 'none');
-    // We keep only one active sorted column
-    other === null || other === void 0 ? void 0 : other.forEach(o => o.sortOrder = 'none');
     if (first && !this.serverMode) {
       this.sortBy(first);
     }
+    refreshOthersColmumnsSortOrderState && this.disableSortOrderForColumns(other);
+  }
+  disableSortOrderForColumns(columns) {
+    columns === null || columns === void 0 ? void 0 : columns.forEach(c => c.sortOrder = 'none');
   }
   getGridColumnsFromTemplate() {
     const slotted = this.el.shadowRoot.querySelector('slot[name="grid-column"]');
@@ -109,7 +112,7 @@ export class Grid {
     if (event.detail.order === 'none')
       return;
     // We keep only one active sort column
-    this.columns.filter(c => c !== event.detail.column).forEach(c => c.sortOrder = 'none');
+    this.disableSortOrderForColumns(this.columns.filter(c => c !== event.detail.column));
     if (this.serverMode)
       return;
     this.sortBy(event.detail.column);
@@ -138,7 +141,7 @@ export class Grid {
    */
   updatePageIndex() {
     if (!this.serverMode && this.paginationEl) {
-      if (this.paginationEl.currentPage + 1 > this.paginationEl.pageCount) {
+      if (this.paginationEl.pageCount > 0 && this.paginationEl.currentPage + 1 > this.paginationEl.pageCount) {
         this.paginationEl.currentPage = this.paginationEl.pageCount - 1;
       }
       this.paginationEl.itemsCount = this.data.length;

package/dist/collection/components/input/input.js

@@ -214,11 +214,11 @@ export class Input {
       label.id = labelId;
     }
     return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel },
-      this.prefixLabel ? (h("span", { class: "prefix" }, this.prefixLabel)) : null,
+      this.prefixLabel ? (h("span", { class: "prefix", part: "prefix" }, this.prefixLabel)) : null,
       this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null,
       h("input", Object.assign({ class: "native-input", ref: input => this.nativeInput = input, "aria-labelledby": label ? labelId : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.passwordReveal ? 'text' : this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)),
       this.type === "password" ? (h("wcs-mat-icon", { class: "toggle_password", icon: this.iconPassword, size: "m", onClick: () => this.passwordRevealIconClick() })) : null,
-      this.suffixLabel ? (h("span", { class: "suffix" }, this.suffixLabel)) : null));
+      this.suffixLabel ? (h("span", { class: "suffix", part: "suffix" }, this.suffixLabel)) : null));
   }
   static get is() { return "wcs-input"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/label.css

@@ -6,7 +6,7 @@
 :host([required])::after {
   font-weight: 500;
   color: var(--wcs-red);
-  content: "*";
+  content: " *";
 }
 
 label {
@@ -14,5 +14,7 @@ label {
   align-items: center;
 }
 label ::slotted(wcs-mat-icon) {
+  display: inline;
+  vertical-align: middle;
   margin-left: calc(var(--wcs-base-margin) / 2);
 }

package/dist/collection/components/select/select-arrow.js

@@ -13,7 +13,7 @@ import { h } from '@stencil/core';
             from="20,35 50,65 80,35"></animate>
     </polyline>
 </svg> */
-export const SelectArrow = ({ up }) => (h("svg", { style: { marginLeft: 'auto' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
+export const SelectArrow = ({ up, ariaLabel }) => (h("svg", { "aria-hidden": ariaLabel ? false : "true", role: "img", "aria-label": ariaLabel ? ariaLabel : false, style: { marginLeft: 'auto' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
   h("style", { type: "text/css" }, `
             .arrow-group {
                 transform-origin: 50% 50%;

package/dist/collection/components/select/select.js

@@ -289,7 +289,8 @@ export class Select {
   onMouseDown(event) {
     const clickOnScroll = isElement(event.target)
       && (event.offsetX > event.target.clientWidth
-        || event.offsetY > event.target.clientHeight);
+        || event.offsetY > event.target.clientHeight // If the click il located bellow the component height the click happen in the overlay
+        || event.offsetY < 0); // If the click is made above the component
     const clickOnRemoveChip = event.composedPath()
       .filter(x => {
       const el = x;

package/dist/collection/components/tabs/tabs.js

@@ -79,6 +79,7 @@ export class Tabs {
     }
   }
   handleKeyDown(ev, tabIndex) {
+    var _a, _b;
     const target = ev.target;
     switch (ev.key) {
       case ' ':
@@ -89,16 +90,14 @@ export class Tabs {
         break;
       }
       case 'ArrowLeft': {
-        if (target.previousElementSibling
-          && target.previousElementSibling.classList.contains('wcs-tab-header')) {
+        if ((_a = target.previousElementSibling) === null || _a === void 0 ? void 0 : _a.classList.contains('wcs-tab-header')) {
           target.previousElementSibling.focus();
           ev.preventDefault();
         }
         break;
       }
       case 'ArrowRight': {
-        if (target.nextElementSibling
-          && target.nextElementSibling.classList.contains('wcs-tab-header')) {
+        if ((_b = target.nextElementSibling) === null || _b === void 0 ? void 0 : _b.classList.contains('wcs-tab-header')) {
           target.nextElementSibling.focus();
           ev.preventDefault();
         }
@@ -114,13 +113,14 @@ export class Tabs {
     });
   }
   get tabs() {
+    var _a;
     const tabsEl = this.el.shadowRoot.querySelector('.wcs-tabs');
     // FIXME: problem with this selector being too greedy in ff < 63
     const tabs = this.el.shadowRoot.querySelectorAll('.wcs-tabs > wcs-tab');
     return tabs.length !== 0
       ? tabs
-      : tabsEl.querySelector('slot')
-        ? tabsEl.querySelector('slot').assignedElements()
+      : (tabsEl === null || tabsEl === void 0 ? void 0 : tabsEl.querySelector('slot'))
+        ? (_a = tabsEl === null || tabsEl === void 0 ? void 0 : tabsEl.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedElements()
         : [];
   }
   selectTabAndEmitChangeEvent(index) {

package/dist/collection/utils/accessibility.js

@@ -0,0 +1,3 @@
+export function isElementFocused(element) {
+  return element === document.activeElement;
+}

package/dist/collection/utils/helpers.js

@@ -73,3 +73,18 @@ export const clickTargetIsElementOrChildren = (mouseEvent, element) => {
   return mouseEvent.target instanceof Node
     && element.contains(mouseEvent.target);
 };
+export function isKeyup(evt) {
+  return evt.code === 'ArrowUp';
+}
+export function isKeydown(evt) {
+  return evt.code === 'ArrowDown';
+}
+export function isEscapeKey(evt) {
+  return evt.code === 'Escape';
+}
+export function isSpaceKey(evt) {
+  return evt.code === 'Space';
+}
+export function isEnterKey(evt) {
+  return evt.code === 'Enter';
+}

package/dist/esm/{helpers-e2993152.js → helpers-374df0ea.js}

@@ -73,5 +73,20 @@ const clickTargetIsElementOrChildren = (mouseEvent, element) => {
   return mouseEvent.target instanceof Node
     && element.contains(mouseEvent.target);
 };
+function isKeyup(evt) {
+  return evt.code === 'ArrowUp';
+}
+function isKeydown(evt) {
+  return evt.code === 'ArrowDown';
+}
+function isEscapeKey(evt) {
+  return evt.code === 'Escape';
+}
+function isSpaceKey(evt) {
+  return evt.code === 'Space';
+}
+function isEnterKey(evt) {
+  return evt.code === 'Enter';
+}
 
-export { clickInsideElement as a, isElement as b, clickTargetIsElementOrChildren as c, debounceEvent as d, findItemLabel as f, hasShadowDom as h, inheritAttributes as i, raf as r };
+export { isKeyup as a, isEscapeKey as b, clickTargetIsElementOrChildren as c, isSpaceKey as d, isEnterKey as e, clickInsideElement as f, debounceEvent as g, inheritAttributes as h, isKeydown as i, findItemLabel as j, isElement as k, hasShadowDom as l, raf as r };

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["wcs-editable-field",[[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-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"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-horizontal-stepper",[[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-modal",[[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",[[1,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"]]]]],["wcs-galactic-menu",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input",[[1,"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",[[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",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["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"],"close":[64]}]]],["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]}]]],["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]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"]]]]],["wcs-com-nav-category",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu",[[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"],[0,"wcsCategoryItemClicked","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,"mousedown","onMouseDown"]]]]],["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]}]]],["wcs-grid-custom-cell",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header",[[1,"wcs-header"]]],["wcs-hint",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label",[[1,"wcs-label",{"required":[516]}]]],["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-nav",[[1,"wcs-nav"]]],["wcs-nav-item",[[4,"wcs-nav-item",{"text":[513],"href":[513]}]]],["wcs-progress-radial",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["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],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["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],"hide":[64],"show":[64],"disable":[64],"enable":[64]}]]],["wcs-progress-bar",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]}]]],["wcs-select_2",[[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",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-spinner",[[1,"wcs-spinner",{"mode":[513]}]]],["wcs-button",[[1,"wcs-button",{"type":[1025],"href":[1],"disabled":[516],"ripple":[4],"shape":[513],"mode":[513]},[[0,"click","onClick"]]]]],["wcs-checkbox",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-mat-icon",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"familyFile":[32],"familyClass":[32]}]]]], options);
+  return bootstrapLazy([["wcs-editable-field",[[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-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"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-horizontal-stepper",[[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-modal",[[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",[[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",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input",[[1,"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",[[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",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["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"],"close":[64]}]]],["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]}]]],["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]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"]]]]],["wcs-com-nav-category",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu",[[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"],[0,"wcsCategoryItemClicked","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,"mousedown","onMouseDown"],[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]}]]],["wcs-grid-custom-cell",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header",[[1,"wcs-header"]]],["wcs-hint",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label",[[1,"wcs-label",{"required":[516]}]]],["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-nav",[[1,"wcs-nav"]]],["wcs-nav-item",[[4,"wcs-nav-item",{"text":[513],"href":[513]}]]],["wcs-progress-radial",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["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],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["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],"hide":[64],"show":[64],"disable":[64],"enable":[64]}]]],["wcs-progress-bar",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]}]]],["wcs-select_2",[[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",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-spinner",[[1,"wcs-spinner",{"mode":[513]}]]],["wcs-button",[[1,"wcs-button",{"type":[1025],"href":[1],"disabled":[516],"ripple":[4],"shape":[513],"mode":[513]},[[0,"click","onClick"]]]]],["wcs-checkbox",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-mat-icon",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"familyFile":[32],"familyClass":[32]}]]]], options);
   });
 };
 

package/dist/esm/{select-arrow-66a47b7a.js → select-arrow-f24031e4.js}

@@ -14,7 +14,7 @@ import { h } from './index-2a90353f.js';
             from="20,35 50,65 80,35"></animate>
     </polyline>
 </svg> */
-const SelectArrow = ({ up }) => (h("svg", { style: { marginLeft: 'auto' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
+const SelectArrow = ({ up, ariaLabel }) => (h("svg", { "aria-hidden": ariaLabel ? false : "true", role: "img", "aria-label": ariaLabel ? ariaLabel : false, style: { marginLeft: 'auto' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
   h("style", { type: "text/css" }, `
             .arrow-group {
                 transform-origin: 50% 50%;

package/dist/esm/wcs-accordion-panel.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-2a90353f.js';
-import { S as SelectArrow } from './select-arrow-66a47b7a.js';
+import { S as SelectArrow } from './select-arrow-f24031e4.js';
 
-const accordionPanelCss = ":host{display:flex;flex-direction:column;cursor:pointer;margin-bottom:16px}:host .header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-radius:7px;font-weight:500;font-size:16px;color:var(--wcs-primary);background-color:var(--wcs-light)}:host .header-action{display:flex;align-items:center;user-select:none}:host .header-action .arrow{fill:var(--wcs-primary)}:host .content{display:none}:host([open]){margin-bottom:0}:host([open]) .content{display:block}:host([open]):host([group-content-with-header]) .header{border-radius:7px 7px 0 0;padding-bottom:0}:host([open]):host([group-content-with-header]) .content{border-radius:0 0 7px 7px;margin-bottom:14px;background-color:var(--wcs-light)}:host([open]):host([highlight]) .header{background-color:var(--wcs-primary);color:var(--wcs-light)}:host([open]):host([highlight]) .arrow{fill:var(--wcs-light)}:host([open]):host([highlight]):host([group-content-with-header]) .content{background-color:var(--wcs-primary);color:var(--wcs-light)}";
+const accordionPanelCss = ":host{display:flex;flex-direction:column;cursor:pointer;margin-bottom:16px}:host .header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-radius:7px;font-weight:500;font-size:16px;color:var(--wcs-primary);background-color:var(--wcs-light);border:none}@media (forced-colors: active){:host .header{border:1px solid ButtonBorder}}:host .header:focus-visible{outline:2px solid var(--wcs-primary)}:host .header-action{display:flex;align-items:center;user-select:none}:host .header-action .arrow{fill:var(--wcs-primary)}:host .content{display:none}:host([open]){margin-bottom:0}:host([open]) .content{display:block}:host([open]):host([group-content-with-header]) .header{border-radius:7px 7px 0 0;padding-bottom:0}:host([open]):host([group-content-with-header]) .content{border-radius:0 0 7px 7px;margin-bottom:14px;background-color:var(--wcs-light)}:host([open]):host([highlight]) .header{background-color:var(--wcs-primary);color:var(--wcs-light)}:host([open]):host([highlight]) .arrow{fill:var(--wcs-light)}:host([open]):host([highlight]):host([group-content-with-header]) .content{background-color:var(--wcs-primary);color:var(--wcs-light)}";
 
 let AccordionPanel = class {
   constructor(hostRef) {
@@ -33,7 +33,7 @@ let AccordionPanel = class {
     this.open = false;
   }
   render() {
-    return (h(Host, null, h("div", { class: "header", onClick: () => this.open = !this.open }, h("slot", { name: "header" }), h("div", { class: "header-action" }, !this.hideActionText && (h("span", null, this.open ? 'Fermez' : 'Ouvrez')), h(SelectArrow, { up: this.open }))), h("div", { class: "content" }, h("slot", { name: "content" }))));
+    return (h(Host, null, h("button", { "aria-expanded": this.open ? "true" : "false", "aria-controls": "content", class: "header", onClick: () => this.open = !this.open }, h("slot", { name: "header" }), h("span", { class: "header-action" }, !this.hideActionText && (h("span", null, this.open ? 'Fermez' : 'Ouvrez')), h(SelectArrow, { up: this.open }))), h("div", { class: "content", id: "content" }, h("slot", { name: "content" }))));
   }
   static get watchers() { return {
     "open": ["openChange"]

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-2a90353f.js';
-import { h as hasShadowDom } from './helpers-e2993152.js';
+import { l as hasShadowDom } from './helpers-374df0ea.js';
 import { M as MDCRipple } from './component-6b4d470f.js';
 
 const buttonCss = "@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;position:relative;outline:none;overflow:hidden}.mdc-ripple-surface::before,.mdc-ripple-surface::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface::before,.mdc-ripple-surface::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-upgraded--unbounded::before,.mdc-ripple-upgraded--unbounded::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface::before,.mdc-ripple-surface::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-ripple-surface:hover::before,.mdc-ripple-surface.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}: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));--wcs-button-border-radius:var(--wcs-border-radius);--wcs-button-border-color:var(--wcs-base)}:host([mode=clear]){--wcs-button-border-color:transparent}:host([mode=clear]) .wcs-inner-button{box-shadow:none}:host([mode=clear]),:host([mode=stroked]){--wcs-button-color:var(--wcs-base);--wcs-button-background-color:transparent}:host([mode=clear]) .wcs-inner-button::before,:host([mode=clear]) .wcs-inner-button::after,:host([mode=stroked]) .wcs-inner-button::before,:host([mode=stroked]) .wcs-inner-button::after{--wcs-button-ripple-color:var(--wcs-base)}:host([shape=small]){--wcs-button-padding:2px 16px}:host([shape=small]) .wcs-inner-button{min-width:var(--wcs-button-min-width, unset);min-height:var(--wcs-button-min-height, unset)}:host([shape=round]){--wcs-button-padding:0;--wcs-button-border-radius:50%}:host([shape=round]) .wcs-inner-button{min-width:var(--wcs-button-min-width, 42px);min-height:var(--wcs-button-min-height, 42px)}: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=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)}:host([mode=stroked]) .wcs-inner-button{box-shadow:inset 0 0 0 1px var(--wcs-button-border-color)}:host([disabled]){--wcs-button-color:var(--wcs-text-disabled);--wcs-button-background-color:var(--wcs-light)}:host([disabled]) .wcs-inner-button{--wcs-button-border-color:var(--wcs-light);opacity:1;cursor:default;pointer-events:none}:host([disabled]):host([mode=clear]),:host([disabled]):host([disabled]){--wcs-button-background-color:transparent}.wcs-inner-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--wcs-font-sans-serif);background-color:var(--wcs-button-background-color);color:var(--wcs-button-color);padding:var(--wcs-button-padding);border-radius:var(--wcs-button-border-radius);border:none;overflow:hidden;outline:0;text-transform:none;margin:0;cursor:pointer;font-weight:500;text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5;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{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.wcs-inner-button::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.wcs-inner-button::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.wcs-inner-button.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.wcs-inner-button.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.wcs-inner-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.wcs-inner-button.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.wcs-inner-button.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.wcs-inner-button::before,.wcs-inner-button::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.wcs-inner-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.wcs-inner-button:hover::before,.wcs-inner-button.mdc-ripple-surface--hover::before{opacity:0.1;opacity:var(--mdc-ripple-hover-opacity, 0.1)}.wcs-inner-button.mdc-ripple-upgraded--background-focused::before,.wcs-inner-button:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}.wcs-inner-button:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.wcs-inner-button:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.3;opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:white;background-color:var(--mdc-ripple-color, white)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:var(--wcs-button-ripple-color)}.wcs-inner-button:focus{box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2)}.wcs-inner-button:hover{box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}a{text-decoration:none;box-sizing:border-box}button::-moz-focus-inner,a::-moz-focus-inner{border:0}";
@@ -50,6 +50,7 @@ let Button = class {
   }
   componentDidLoad() {
     this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));
+    this.el.focus = () => this.el.shadowRoot.querySelector(this.getTagName()).focus();
   }
   enabledRippleEffect() {
     this.mdcRipple.disabled = false;
@@ -57,6 +58,9 @@ let Button = class {
   disabledRippleEffect() {
     this.mdcRipple.disabled = true;
   }
+  getTagName() {
+    return this.href !== undefined ? 'a' : 'button';
+  }
   onRippleChange() {
     if (this.ripple) {
       this.enabledRippleEffect();
@@ -66,7 +70,7 @@ let Button = class {
     }
   }
   render() {
-    const TagType = this.href !== undefined ? 'a' : 'button';
+    const TagType = this.getTagName();
     const attrs = this.href !== undefined
       ? { href: this.href, role: 'button' }
       : { type: this.type };

package/dist/esm/wcs-com-nav.entry.js

@@ -6,6 +6,7 @@ let ComNav = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.mobileMenuOpen = false;
+    this.hasAlreadyRegisteredClickHandlerOnSlottedLink = false;
   }
   mobileMenuIconClick() {
     this.mobileMenuOpen = !this.mobileMenuOpen;
@@ -27,6 +28,23 @@ let ComNav = class {
     });
     this.resizeObserver.observe(document.body);
   }
+  componentDidRender() {
+    this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag();
+  }
+  registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag() {
+    if (this.hasAlreadyRegisteredClickHandlerOnSlottedLink)
+      return;
+    const mainSlot = this.el.shadowRoot.querySelector('slot:not([name])');
+    if (mainSlot) {
+      this.hasAlreadyRegisteredClickHandlerOnSlottedLink = true;
+      // If the user click on a `a` tag, we close the mobile menu overlay.
+      mainSlot.assignedElements().filter(e => e.tagName === 'A').forEach(a => {
+        a.addEventListener('click', _ => {
+          this.mobileMenuOpen = false;
+        });
+      });
+    }
+  }
   //region Handlers for mobile menu overlay visibility
   //
   // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events

package/dist/esm/wcs-dropdown-item.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-2a90353f.js';
+import { d as isSpaceKey, e as isEnterKey } from './helpers-374df0ea.js';
 
-const dropdownItemCss = "wcs-dropdown-item{display:block;padding:0 var(--wcs-padding);font-weight:500;cursor:pointer;height:42px;line-height:42px}wcs-dropdown-item:hover{color:var(--wcs-primary);background-color:var(--wcs-light)}";
+const dropdownItemCss = "wcs-dropdown-item{display:block;padding:0 var(--wcs-padding);font-weight:500;cursor:pointer;height:42px;line-height:42px}wcs-dropdown-item:hover,wcs-dropdown-item:focus{color:var(--wcs-primary);background-color:var(--wcs-light)}";
 
 let DropdownItem = class {
   constructor(hostRef) {
@@ -10,8 +11,13 @@ let DropdownItem = class {
   onMouseDown(_) {
     this.wcsDropdownItemClick.emit();
   }
+  onKeyDown(evt) {
+    if (isSpaceKey(evt) || isEnterKey(evt)) {
+      this.wcsDropdownItemClick.emit();
+    }
+  }
   render() {
-    return (h(Host, { slot: "item" }, h("slot", null)));
+    return (h(Host, { slot: "item", tabindex: "0" }, h("slot", null)));
   }
 };
 DropdownItem.style = dropdownItemCss;