wcs-core 4.2.0 → 5.0.0

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

@@ -1,7 +1,8 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-dc4d96d4.js';
-import { S as SelectArrow } from './select-arrow-81d069f7.js';
-import { s as generateUniqueId, l as findItemLabel, a as isEnterKey, n as isDownArrowKey, i as isSpaceKey, q as isRightArrowKey, o as isUpArrowKey, p as isLeftArrowKey, t as isPageDownKey, u as isPageUpKey, e as isHomeKey, b as isEscapeKey, m as isTabKey, v as isElement } from './helpers-1d55b67f.js';
-import { w as isEqual } from './isEqual-20881bca.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-4f282598.js';
+import { S as SelectArrow } from './select-arrow-28e8687b.js';
+import { v as generateUniqueId, p as findItemLabel, w as isElement, a as isEnterKey, i as isSpaceKey } from './helpers-a21ae7d0.js';
+import { w as keyboardShortcutFromKeyboardEvent, x as isEqual } from './keyboard-event-ba3d20e7.js';
+import { a as isFocusable } from './accessibility-64feea8a.js';
 import { c as createPopper } from './popper-c7cca1bc.js';
 import { M as MDCRipple } from './component-5ce0752a.js';
 
@@ -4962,6 +4963,16 @@ function Machine(config, options, initialContext) {
   return new StateNode(config, options, initialContext);
 }
 
+/**
+ * Default filtering function. Compares the string start of wcs-select-option element's text content
+ * with your filter input.
+ * @param optionEl - wcs-select-option element
+ * @param filter - input filter field value
+ * @constructor
+ */
+const WcsDefaultSelectFilterFn = (optionEl, filter) => {
+  return optionEl.textContent.toLowerCase().startsWith(filter.toLowerCase());
+};
 const WcsSelectSizeValue = ['m', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
 function isWcsSelectSize(size) {
   // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues
@@ -4985,7 +4996,260 @@ const SelectChips = ({ disabled, option, onRemove }) => {
           h("path", { d: "M2,0 6,4 10,0 12,2 8,6 12,10 10,12 6,8 2,12 0,10 4,6 0,2 2,0", fill: option.chipColor, transform: "translate(8 0)" })))));
 };
 
-const selectCss = "@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{--wcs-select-ligther-percentage:40;--wcs-select-border-radius:var(--wcs-border-radius);--wcs-select-background-color:var(--wcs-light);--wcs-select-placeholder-color:var(--wcs-text-medium);--wcs-select-value-color:var(--wcs-primary);--wcs-select-border-color:transparent;--wcs-select-overlay-max-height:360px;--wcs-select-option-height:var(--wcs-size-m);--wcs-select-border-width:1px;display:block;position:relative;outline:none;user-select:none;box-sizing:border-box}:host svg{flex-shrink:0}:host .arrow{fill:var(--wcs-select-value-color)}:host .chip{fill:var(--wcs-contrast);opacity:calc((100 - var(--wcs-select-ligther-percentage)) / 100)}:host .chip:hover{opacity:100}:host(.expanded){--wcs-select-border-color:var(--wcs-text-light)}:host(.expanded) .wcs-select-options{display:block}:host(:not(.expanded):focus) .wcs-select-control{border:var(--wcs-primary) solid 1px}:host(:not(.expanded):focus-visible) .wcs-select-control{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:var(--wcs-select-border-radius)}:host([disabled]){cursor:not-allowed}:host([disabled]) .wcs-select-control,:host([disabled]) label{cursor:default;pointer-events:none}:host([disabled]) label{color:var(--wcs-text-disabled)}:host([disabled]) .arrow{fill:var(--wcs-text-medium)}label{padding-left:calc(var(--wcs-padding) - var(--wcs-select-border-width));padding-right:calc(var(--wcs-padding) - var(--wcs-select-border-width));font-weight:500;cursor:pointer;color:var(--wcs-select-color);transition:color 125ms ease-in;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size=m]){min-height:var(--wcs-size-m);--wcs-select-font-size:1rem}:host([size=m]) .wcs-select-control{min-height:var(--wcs-size-m)}:host([size=l]){min-height:var(--wcs-size-l);--wcs-select-font-size:1.0625rem}:host([size=l]) .wcs-select-control{min-height:var(--wcs-size-l)}:host([chips]) .wcs-select-control{flex-wrap:wrap}.wcs-select-control{box-sizing:border-box;--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;overflow:hidden;display:flex;align-items:center;padding-right:var(--wcs-text-padding);background-color:var(--wcs-select-background-color);border-radius:var(--wcs-select-border-radius);border:var(--wcs-select-border-color) solid var(--wcs-select-border-width);font-size:var(--wcs-select-font-size, 1rem);line-height:1.5;cursor:pointer}.wcs-select-control::before,.wcs-select-control::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.wcs-select-control::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.wcs-select-control::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.wcs-select-control.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.wcs-select-control.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.wcs-select-control.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.wcs-select-control.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.wcs-select-control.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-select-control::before,.wcs-select-control::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.wcs-select-control.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.wcs-select-control::before,.wcs-select-control::after{background-color:#999;background-color:var(--mdc-ripple-color, #999)}.wcs-select-control:hover::before,.wcs-select-control.mdc-ripple-surface--hover::before{opacity:0.1;opacity:var(--mdc-ripple-hover-opacity, 0.1)}.wcs-select-control.mdc-ripple-upgraded--background-focused::before,.wcs-select-control:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}.wcs-select-control:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.wcs-select-control:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.3;opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-select-control.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-select-placeholder{color:var(--wcs-select-placeholder-color);font-style:italic;font-weight:400}.wcs-select-value{color:var(--wcs-select-value-color);font-weight:var(--wcs-font-weight-form-value)}.wcs-select-value-container{margin-top:4px;margin-bottom:4px;margin-left:calc(var(--wcs-margin) / 2);max-width:calc(100% - (24px + var(--wcs-base-margin)));display:flex;flex-direction:row;gap:4px;align-items:center;flex-wrap:wrap}.wcs-select-chip{line-height:1.375;color:var(--wcs-contrast);background-color:var(--wcs-base);border-radius:0.75rem;display:flex;align-items:center;padding:calc((var(--wcs-padding) - 8px) / 2) var(--wcs-padding);overflow:initial}.wcs-select-options{display:none;position:absolute;z-index:999999999;border:solid var(--wcs-select-border-width) var(--wcs-select-border-color);border-radius:var(--wcs-select-border-radius);max-height:var(--wcs-select-overlay-max-height);overflow-y:auto;width:calc(100% - 2 * var(--wcs-select-border-width));background-color:var(--wcs-white);color:var(--wcs-text-medium)}";
+/**
+ * We follow this https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+ * @param event
+ * @param currentState
+ * @param type
+ */
+function getActionForKeyboardEvent(event, currentState, type) {
+  const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);
+  if (keyboardShortcut === 'UNKNOWN') {
+    return [];
+  }
+  switch (currentState) {
+    case "closed":
+      // We handle every available shortcut for the closed state
+      switch (keyboardShortcut) {
+        case "MAJ+TAB":
+          switch (type) {
+            case "unique":
+            case "multiple":
+              return [];
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              // We need to move focus to previous focusable element in order to ignore the wcs-select component
+              return [{ kind: 'MoveFocus', target: 'previous' }];
+          }
+          break;
+        case 'DOWN_ARROW':
+          switch (type) {
+            case "unique":
+              return [{ kind: 'SelectOption', target: 'next' }];
+            case "autocomplete_multiple":
+            case "autocomplete_unique":
+              return [{ kind: 'OpenSelect' }, { kind: 'HighlightOption', target: 'first' }];
+            case "multiple":
+              return [{ kind: 'OpenSelect' }, { kind: 'FocusOption', target: 'first' }];
+          }
+          break;
+        case 'RIGHT_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              // Do nothing, we navigate between characters inside input field
+              return [];
+            case "unique":
+              return [{ kind: 'SelectOption', target: 'next' }];
+            case "multiple":
+              return [{ kind: 'OpenSelect' }, { kind: 'FocusOption', target: 'first' }];
+          }
+          break;
+        case 'UP_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [{ kind: 'OpenSelect' }, { kind: 'HighlightOption', target: 'last' }];
+            case "multiple":
+              break;
+            case "unique":
+              return [{ kind: 'SelectOption', target: 'previous' }];
+          }
+          break;
+        case 'LEFT_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              // Do nothing, we navigate between characters inside input field
+              return [];
+            case "unique":
+              return [{ kind: 'SelectOption', target: 'previous' }];
+          }
+          break;
+        case 'ALT+DOWN_ARROW':
+        case 'ALT+UP_ARROW':
+          switch (type) {
+            case "unique":
+              return [{ kind: 'OpenSelect' }, { kind: 'FocusOption', target: 'first' }];
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+            case "multiple":
+              return [{ kind: 'OpenSelect' }];
+          }
+          break;
+        case 'SPACE':
+        case 'ENTER':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'OpenSelect' }, { kind: 'FocusOption', target: 'lastFocused' }];
+          }
+          break;
+        case 'ESCAPE':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [{ kind: 'ClearAutocompleteInput' }];
+            case 'unique':
+            case 'multiple':
+              return [];
+          }
+          break;
+        case 'PAGE_UP':
+          switch (type) {
+            case "autocomplete_unique":
+              return [];
+            case "autocomplete_multiple":
+              return [];
+            case "unique":
+              return [{ kind: 'SelectOption', target: 'first' }];
+            case "multiple":
+              return [];
+          }
+          break;
+        case 'PAGE_DOWN':
+          switch (type) {
+            case "autocomplete_unique":
+              return [];
+            case "autocomplete_multiple":
+              return [];
+            case "unique":
+              return [{ kind: 'SelectOption', target: 'last' }];
+            case "multiple":
+              return [];
+          }
+          break;
+      }
+      break;
+    case 'opened':
+      // We handle every available shortcut for the opened state
+      switch (keyboardShortcut) {
+        case 'ESCAPE':
+          switch (type) {
+            case 'unique':
+            case 'multiple':
+            case 'autocomplete_unique':
+            case 'autocomplete_multiple':
+              return [{ kind: 'CloseSelect', shouldBlur: false }];
+          }
+          break;
+        case 'ALT+UP_ARROW':
+          switch (type) {
+            case 'unique':
+            case 'multiple':
+              return [{ kind: 'CloseSelect', shouldBlur: false }];
+            case 'autocomplete_unique':
+            case 'autocomplete_multiple':
+              // We must keep select autocomplete opened
+              return [];
+          }
+          break;
+        case 'TAB':
+          switch (type) {
+            case "autocomplete_unique":
+              return [{ kind: 'SelectOption', target: 'lastHighlighted' }, { kind: 'CloseSelect', shouldBlur: false }];
+            case "autocomplete_multiple":
+              return [{ kind: 'CloseSelect', shouldBlur: false }];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'CloseSelect', shouldBlur: true }];
+          }
+          break;
+        case 'MAJ+TAB':
+          switch (type) {
+            case "autocomplete_unique":
+              // We don't blur the select when we close it because we move the focus manually just after closing it.
+              return [{ kind: 'SelectOption', target: 'lastHighlighted' }, { kind: 'CloseSelect', shouldBlur: false }, { kind: 'MoveFocus', target: 'previous' }];
+            case "autocomplete_multiple":
+              // We don't blur the select when we close it because we move the focus manually just after closing it.
+              return [{ kind: 'CloseSelect', shouldBlur: false }, { kind: 'MoveFocus', target: 'previous' }];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'CloseSelect', shouldBlur: true }];
+          }
+          break;
+        case 'UP_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [{ kind: 'HighlightOption', target: 'previous' }];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'FocusOption', target: 'previous' }];
+          }
+          break;
+        case 'LEFT_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              // We do nothing (navigate between characters in input field)
+              return [];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'FocusOption', target: 'previous' }];
+          }
+          break;
+        case 'DOWN_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [{ kind: 'HighlightOption', target: 'next' }];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'FocusOption', target: 'next' }];
+          }
+          break;
+        case 'RIGHT_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              // We do nothing (navigate between characters in input field)
+              return [];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'FocusOption', target: 'next' }];
+          }
+          break;
+        case "PAGE_UP":
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [{ kind: 'HighlightOption', target: 'first' }];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'FocusOption', target: 'first' }];
+          }
+          break;
+        case "PAGE_DOWN":
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [{ kind: 'HighlightOption', target: 'last' }];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'FocusOption', target: 'last' }];
+          }
+          break;
+        case "ENTER":
+          switch (type) {
+            case "autocomplete_unique":
+              return [{ kind: 'SelectOption', target: 'lastHighlighted' }];
+            case "autocomplete_multiple":
+              return [{ kind: 'SelectOption', target: 'lastHighlighted' }];
+          }
+          break;
+      }
+      break;
+    default:
+      throw Error('Unknown error');
+  }
+  return [];
+}
+
+const selectCss = "@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{--wcs-select-ligther-percentage:40;--wcs-select-border-radius:var(--wcs-border-radius);--wcs-select-background-color:var(--wcs-light);--wcs-select-placeholder-color:var(--wcs-text-medium);--wcs-select-value-color:var(--wcs-primary);--wcs-select-border-color:transparent;--wcs-select-overlay-max-height:360px;--wcs-select-option-height:var(--wcs-size-m);--wcs-select-border-width:1px;display:block;position:relative;outline:none;user-select:none;box-sizing:border-box}:host svg{flex-shrink:0}:host .arrow{fill:var(--wcs-select-value-color)}:host .chip{fill:var(--wcs-contrast);opacity:calc((100 - var(--wcs-select-ligther-percentage)) / 100)}:host .chip:hover{opacity:100}:host(.expanded){--wcs-select-border-color:var(--wcs-text-light)}:host(.expanded) .wcs-select-options{display:block}:host(:not(.expanded):focus-visible) .wcs-select-control{outline:2px dashed var(--wcs-primary);outline-offset:0;border-radius:var(--wcs-select-border-radius)}:host([disabled]){cursor:not-allowed}:host([disabled]) .wcs-select-control,:host([disabled]) label{cursor:default;pointer-events:none}:host([disabled]) label{color:var(--wcs-text-disabled)}:host([disabled]) .arrow{fill:var(--wcs-text-medium)}label{padding-left:calc(var(--wcs-padding) / 2 - var(--wcs-select-border-width));padding-right:calc(var(--wcs-padding) - var(--wcs-select-border-width));font-weight:500;cursor:pointer;color:var(--wcs-select-color);transition:color 125ms ease-in;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size=m]){min-height:var(--wcs-size-m);--wcs-select-font-size:1rem;--wcs-internal-select-chip-size:calc(var(--wcs-size-s) - 2px)}:host([size=m]) .wcs-select-control{min-height:var(--wcs-size-m)}:host([size=m]):host([autocomplete]) .autocomplete-field{height:calc(var(--wcs-size-s) - 2px)}:host([size=m]):host([autocomplete]) .wcs-select-value-container{padding-top:calc((var(--wcs-size-m) - var(--wcs-internal-select-chip-size)) / 2 - var(--wcs-select-border-width));padding-bottom:calc((var(--wcs-size-m) - var(--wcs-internal-select-chip-size)) / 2 - var(--wcs-select-border-width))}:host([size=l]){min-height:var(--wcs-size-l);--wcs-select-font-size:1.0625rem;--wcs-internal-select-chip-size:var(--wcs-size-s)}:host([size=l]) .wcs-select-control{min-height:var(--wcs-size-l)}:host([size=l]):host([autocomplete]) .autocomplete-field{height:var(--wcs-size-s)}:host([size=l]):host([autocomplete]) .wcs-select-value-container{padding-top:calc((var(--wcs-size-l) - var(--wcs-internal-select-chip-size)) / 2 - var(--wcs-select-border-width));padding-bottom:calc((var(--wcs-size-l) - var(--wcs-internal-select-chip-size)) / 2 - var(--wcs-select-border-width))}:host([chips]) .wcs-select-control{flex-wrap:wrap}.wcs-select-control{box-sizing:border-box;--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;overflow:hidden;display:flex;align-items:center;padding-right:var(--wcs-text-padding);background-color:var(--wcs-select-background-color);border-radius:var(--wcs-select-border-radius);border:var(--wcs-select-border-color) solid var(--wcs-select-border-width);font-size:var(--wcs-select-font-size, 1rem);line-height:1.5;cursor:pointer}.wcs-select-control::before,.wcs-select-control::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.wcs-select-control::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.wcs-select-control::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.wcs-select-control.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.wcs-select-control.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.wcs-select-control.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.wcs-select-control.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.wcs-select-control.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-select-control::before,.wcs-select-control::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.wcs-select-control.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.wcs-select-control::before,.wcs-select-control::after{background-color:#999;background-color:var(--mdc-ripple-color, #999)}.wcs-select-control:hover::before,.wcs-select-control.mdc-ripple-surface--hover::before{opacity:0.1;opacity:var(--mdc-ripple-hover-opacity, 0.1)}.wcs-select-control.mdc-ripple-upgraded--background-focused::before,.wcs-select-control:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}.wcs-select-control:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.wcs-select-control:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.3;opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-select-control.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-select-placeholder{color:var(--wcs-select-placeholder-color);font-style:italic;font-weight:400}.wcs-select-value{color:var(--wcs-select-value-color);font-weight:var(--wcs-font-weight-form-value)}.wcs-select-value-container{margin-top:4px;margin-bottom:4px;margin-left:calc(var(--wcs-margin) / 2);max-width:calc(100% - (24px + var(--wcs-base-margin)));display:flex;flex-direction:row;gap:4px;align-items:center;flex-wrap:wrap}.wcs-select-chip{box-sizing:border-box;height:var(--wcs-internal-select-chip-size);line-height:1.375;color:var(--wcs-contrast);background-color:var(--wcs-base);border-radius:0.75rem;display:flex;align-items:center;padding:calc((var(--wcs-padding) - 8px) / 2) var(--wcs-padding);overflow:initial;z-index:1}.wcs-select-options{display:none;position:absolute;z-index:999999999;border:solid var(--wcs-select-border-width) var(--wcs-select-border-color);border-radius:var(--wcs-select-border-radius);max-height:var(--wcs-select-overlay-max-height);overflow-y:auto;width:calc(100% - 2 * var(--wcs-select-border-width));background-color:var(--wcs-white);color:var(--wcs-text-medium)}:host([autocomplete]) .wcs-select-value-container{margin:0;width:100%;padding-left:var(--wcs-padding-m)}:host([autocomplete]) input{border-radius:var(--wcs-border-radius);font:unset;background-color:transparent;outline:none;border:none;padding:0 var(--wcs-margin);color:var(--wcs-primary);font-weight:var(--wcs-font-weight-form-value) !important;font-size:var(--wcs-select-font-size);line-height:1.5}:host([autocomplete]) input:focus-within{outline:2px dashed var(--wcs-primary);outline-offset:0;border-radius:var(--wcs-border-radius)}:host([autocomplete]) input::placeholder{font-style:italic;font-weight:400}.autocomplete-field{width:0;min-width:50px;border-radius:var(--wcs-border-radius);flex-grow:1}.noresult-container{margin:var(--wcs-margin)}";
 
 const SELECT_MACHINE_CONFIG = {
   key: 'select',
@@ -5015,20 +5279,24 @@ const Select = class {
     this.wcsChange = createEvent(this, "wcsChange", 7);
     this.wcsFocus = createEvent(this, "wcsFocus", 7);
     this.wcsBlur = createEvent(this, "wcsBlur", 7);
+    this.wcsFilterChange = createEvent(this, "wcsFilterChange", 7);
     this.selectId = `wcs-select-${selectIds++}`;
     this.optionsId = generateUniqueId("OPTIONS");
     this.expanded = false;
     this.size = 'm';
-    this.hasLoaded = false;
     this.displayText = undefined;
     this.focused = undefined;
     this.value = undefined;
     this.placeholder = undefined;
     this.disabled = false;
     this.multiple = false;
+    this.autocomplete = false;
+    this.filterFn = undefined;
     this.chips = false;
     this.name = undefined;
     this.compareWith = (optionValue, selectedValue) => isEqual(optionValue, selectedValue);
+    this.showNoResultFoundLabel = false;
+    this.autocompleteValue = undefined;
     this.overlayDirection = 'bottom';
   }
   /** Open the component. */
@@ -5041,7 +5309,6 @@ const Select = class {
   }
   onValueChangeHandler(newValue) {
     this.updateSelectedValue(newValue);
-    this.emitChange(this.value);
   }
   updateSelectedValue(value) {
     // If no value is passed, the select is reset.
@@ -5078,6 +5345,9 @@ const Select = class {
         const isSelected = this.compareWith(opt.value, value);
         if (isSelected) {
           this.displayText = opt.innerText;
+          if (this.autocomplete) {
+            this.autocompleteValue = opt.innerText;
+          }
         }
         opt.selected = isSelected;
       });
@@ -5090,6 +5360,9 @@ const Select = class {
   reset() {
     this.values = [];
     this.displayText = undefined;
+    if (this.autocomplete) {
+      this.autocompleteValue = undefined;
+    }
     this.options.forEach((opt) => {
       opt.selected = false;
     });
@@ -5120,8 +5393,6 @@ const Select = class {
     if (this.labelElement) {
       this.labelElement.id = this.selectId + "-lbl";
     }
-    // TODO: is this still usefull for anything ?
-    this.hasLoaded = true;
   }
   createPopperInstance() {
     return createPopper(this.controlEl, this.optionsEl, {
@@ -5160,16 +5431,24 @@ const Select = class {
     });
     observer.observe(this.el, { childList: true });
   }
+  componentWillRender() {
+    if (this.multiple) {
+      this.options
+        .forEach((opt) => opt.multiple = true);
+    }
+  }
   componentWillLoad() {
     if (!isWcsSelectSize(this.size)) {
       console.error(`Invalid size value for wcs-select : "${this.size}". Must be one of "${WcsSelectSizeValue.join(', ')}"`);
       this.size = "m"; // Default fallback value
     }
   }
-  componentWillUpdate() {
-    if (this.multiple) {
-      this.options
-        .forEach((opt) => opt.multiple = true);
+  async setAriaAttribute(attr, value) {
+    if (this.autocomplete === false) {
+      this.el.setAttribute(attr, value);
+    }
+    else {
+      this.autocompleteInput.setAttribute(attr, value);
     }
   }
   get options() {
@@ -5182,7 +5461,7 @@ const Select = class {
   }
   get notDisabledOptions() {
     var _a;
-    const opts = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('wcs-select-option:not([disabled])');
+    const opts = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('wcs-select-option:not([disabled]):not([aria-hidden])');
     if (opts && opts.length !== 0) {
       return opts;
     }
@@ -5192,15 +5471,25 @@ const Select = class {
     return {
       actions: {
         open: () => {
-          var _a;
+          var _a, _b;
           if (!this.disabled) {
             this.expanded = true;
             this.focused = false;
+            if (this.multiple === false && this.autocomplete && this.hasValue === false) {
+              // If we open the select in single autocomplete mode, we update the autocomplete value at 
+              // the blur event so that the displayed value reflect the current select value. 
+              // Indeed, we have to tell the component to take the current filter state manually at the 
+              // opening (because the input event of the autocomplete field is not fired at this point).
+              this.handleAutocompleteValueChange((_a = this.autocompleteValue) !== null && _a !== void 0 ? _a : '');
+            }
+            this.clearHighlightOnLastHighlightedOption();
             if (this.notDisabledOptions.length > 0) {
-              this.lastFocusedOptionElement = (_a = this.lastSelectedOptionElement) !== null && _a !== void 0 ? _a : this.notDisabledOptions[0];
+              this.lastFocusedOptionElement = (_b = this.lastModifiedOptionElement) !== null && _b !== void 0 ? _b : this.notDisabledOptions[0];
               requestAnimationFrame(() => {
-                var _a;
-                (_a = this.lastFocusedOptionElement) === null || _a === void 0 ? void 0 : _a.focus();
+                var _a, _b;
+                this.autocomplete
+                  ? (_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.focus()
+                  : (_b = this.lastFocusedOptionElement) === null || _b === void 0 ? void 0 : _b.focus();
               });
             }
           }
@@ -5208,12 +5497,21 @@ const Select = class {
         close: (_, event) => {
           var _a, _b;
           if (event.type === 'CLOSE') {
+            this.clearHighlightOnLastHighlightedOption();
             if ((_a = event.value) === null || _a === void 0 ? void 0 : _a.shouldBlur) {
-              (_b = this.el.closest("wcs-select")) === null || _b === void 0 ? void 0 : _b.focus();
               this.focused = false;
             }
             else {
-              this.el.focus();
+              if (this.autocomplete && ((_b = event.value) === null || _b === void 0 ? void 0 : _b.fromKeyboard)) {
+                // If we're in autocomplete mode, a keyboard event (e.g. escape) doesn't change the 
+                // focus (so this.el.focus() aren't called because the select was already focused)
+                // but you still have to go back to the autocomplete input.
+                this.focusAutocompleteInput();
+              }
+              else {
+                // Otherwise, we focus the select element
+                this.el.focus();
+              }
               this.focused = true;
             }
           }
@@ -5221,7 +5519,24 @@ const Select = class {
         },
         selectOption: (_, event) => {
           if (event.type === 'OPTION_SELECTED') {
-            this.handleClickEvent(event.value);
+            if (this.multiple) {
+              this.handleOptionSelectedOnMultiple(event.value.option);
+            }
+            else {
+              this.handleOptionSelectedOnSingle(event.value.option);
+              this.stateService.send('CLOSE', { value: { fromKeyboard: event.value.fromKeyboard } });
+            }
+            if (this.autocomplete) {
+              if (this.multiple) {
+                requestAnimationFrame(() => {
+                  this.autocompleteInput.focus();
+                });
+              }
+              else {
+                this.autocompleteValue = event.value.option.displayText;
+              }
+            }
+            this.emitChange(this.value);
           }
         }
       },
@@ -5230,28 +5545,18 @@ const Select = class {
       }
     };
   }
-  handleClickEvent(event) {
-    if (this.multiple) {
-      this.handleClickOnMultiple(event);
-    }
-    else {
-      this.handleNormalClick(event);
-    }
-  }
-  handleClickOnMultiple(event) {
+  handleOptionSelectedOnMultiple(event) {
     const index = this.values.findIndex(v => v.value === event.value);
     if (index === -1) {
       const { value, displayText, chipColor, chipBackgroundColor } = event;
       this.values.push({ value, displayText, chipColor, chipBackgroundColor });
       event.source.selected = true;
-      this.lastSelectedOptionElement = event.source;
     }
     else {
       event.source.selected = false;
       this.values.splice(index, 1);
-      if (this.lastSelectedOptionElement === event.source)
-        this.lastSelectedOptionElement = null;
     }
+    this.lastModifiedOptionElement = event.source;
     this.updateValueWithValues();
   }
   updateValueWithValues() {
@@ -5260,7 +5565,7 @@ const Select = class {
       ? this.values.map(v => v.displayText).join(', ')
       : undefined;
   }
-  handleNormalClick(event) {
+  handleOptionSelectedOnSingle(event) {
     // Reset other options to false if they were selected.
     this.options
       .forEach(option => {
@@ -5270,8 +5575,7 @@ const Select = class {
     event.source.selected = true;
     this.value = event.value;
     this.displayText = event.displayText;
-    this.lastSelectedOptionElement = event.source;
-    this.stateService.send('CLOSE');
+    this.lastModifiedOptionElement = event.source;
   }
   disconnectedCallback() {
     var _a;
@@ -5307,107 +5611,201 @@ const Select = class {
     // TODO: Move this logic in the state machine
     // FIXME: Doesnt work with single + disabled option
     if (this.expanded && !clickOnCurrentSelect) {
-      this.stateService.send('CLOSE');
+      this.stateService.send({ type: 'CLOSE', value: { shouldBlur: true, fromKeyboard: false } });
     }
   }
   onKeyDown(_event) {
-    // close
-    if (this.stateService.getSnapshot().matches("closed")) {
-      if (isEnterKey(_event) || (_event.altKey && isDownArrowKey(_event)) || isSpaceKey(_event)) {
-        _event.preventDefault();
-        _event.stopPropagation();
+    const currentState = this.stateService.getSnapshot().matches("closed") ? 'closed' : 'opened';
+    let type;
+    if (this.autocomplete) {
+      type = this.multiple ? 'autocomplete_multiple' : 'autocomplete_unique';
+    }
+    else {
+      type = this.multiple ? 'multiple' : 'unique';
+    }
+    const actionsFromKeyboardEvents = getActionForKeyboardEvent(_event, currentState, type);
+    // If we have at least one associated actions, we prevent the default behavior of the event. 
+    // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)
+    if (actionsFromKeyboardEvents.length != 0 && actionsFromKeyboardEvents.filter(a => a.kind === 'MoveFocus').length === 0) {
+      _event.preventDefault();
+    }
+    for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {
+      this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent, _event);
+    }
+  }
+  doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent, event) {
+    var _a, _b;
+    switch (actionFromKeyboardEvent.kind) {
+      case "CloseSelect":
+        this.stateService.send({
+          type: 'CLOSE',
+          value: { shouldBlur: actionFromKeyboardEvent.shouldBlur, fromKeyboard: true }
+        });
+        break;
+      case "OpenSelect":
         this.stateService.send('OPEN');
-        return;
-      }
-      if (this.multiple) {
-        if (isDownArrowKey(_event)) {
-          this.stateService.send('OPEN');
-        }
-      }
-      else {
-        if (isDownArrowKey(_event) || isRightArrowKey(_event)) {
-          _event.preventDefault();
-          this.selectClosestOption("next");
+        break;
+      case "SelectOption":
+        switch (actionFromKeyboardEvent.target) {
+          case "next":
+            this.selectClosestOption('next');
+            break;
+          case "previous":
+            this.selectClosestOption('previous');
+            break;
+          case "first":
+            this.selectFirstOption();
+            break;
+          case "last":
+            this.selectLastOption();
+            break;
+          case "lastHighlighted": {
+            // We have to handle enterKey here because with autocomplete mode, a wcs-select-option
+            // is only highlighted, therefore the event is not fired
+            const indexToSelect = Array.from(this.notDisabledOptions).indexOf(this.lastHighlightedOptionElement);
+            if (indexToSelect !== -1) {
+              this.lastModifiedOptionElement = this.lastHighlightedOptionElement;
+              this.selectOption(indexToSelect, true);
+            }
+            break;
+          }
         }
-        if (isUpArrowKey(_event) || isLeftArrowKey(_event)) {
-          _event.preventDefault();
-          this.selectClosestOption("previous");
+        break;
+      case "ClearAutocompleteInput":
+        this.autocompleteValue = '';
+        break;
+      case "ClearHighlight":
+        this.clearHighlightOnLastHighlightedOption();
+        break;
+      case "HighlightOption":
+        switch (actionFromKeyboardEvent.target) {
+          case "next":
+            this.highlightClosestOption('next');
+            break;
+          case "previous":
+            this.highlightClosestOption('previous');
+            break;
+          case "first":
+            this.highlightFirstOption();
+            break;
+          case "last":
+            this.highlightLastOption();
+            break;
         }
-        else if (isPageDownKey(_event)) {
-          _event.preventDefault();
-          this.selectLastOption();
+        break;
+      case "FocusOption":
+        switch (actionFromKeyboardEvent.target) {
+          case "next":
+            this.focusClosestOption('next');
+            break;
+          case "previous":
+            this.focusClosestOption('previous');
+            break;
+          case "first":
+            this.focusFirstOption();
+            break;
+          case "last":
+            this.focusLastOption();
+            break;
+          case "lastFocused":
+            if (this.lastFocusedOptionElement != null) {
+              this.focusOption(Array.from(this.notDisabledOptions).indexOf(this.lastFocusedOptionElement));
+            }
+            break;
         }
-        else if (isPageUpKey(_event) || isHomeKey(_event)) {
-          _event.preventDefault();
-          this.selectFirstOption();
+        break;
+      case "MoveFocus":
+        switch (actionFromKeyboardEvent.target) {
+          case "previous": {
+            let elementToFocus = (_a = this.el.previousElementSibling) !== null && _a !== void 0 ? _a : this.el.parentElement;
+            while (elementToFocus) {
+              if (isFocusable(elementToFocus))
+                break;
+              elementToFocus = (_b = elementToFocus.previousElementSibling) !== null && _b !== void 0 ? _b : elementToFocus.parentElement;
+            }
+            if (elementToFocus) {
+              event.preventDefault();
+              elementToFocus.focus();
+            }
+            break;
+          }
         }
-      }
-    }
-    // open
-    else if (this.stateService.getSnapshot().matches("opened")) {
-      if (isEscapeKey(_event) || (_event.altKey && isUpArrowKey(_event))) {
-        this.stateService.send({ type: "CLOSE", value: { shouldBlur: false } });
-      }
-      else if (isTabKey(_event) || (_event.shiftKey && isTabKey(_event))) {
-        this.stateService.send({ type: "CLOSE", value: { shouldBlur: true } });
-      }
-      else if (isDownArrowKey(_event)) {
-        _event.preventDefault();
-        this.focusClosestOption("next");
-      }
-      else if (isUpArrowKey(_event)) {
-        _event.preventDefault();
-        this.focusClosestOption("previous");
-      }
-      else if (isPageUpKey(_event) || isHomeKey(_event)) {
-        _event.preventDefault();
-        this.focusFirstOption();
-      }
-      else if (isPageDownKey(_event)) {
-        _event.preventDefault();
-        this.focusLastOption();
-      }
+        break;
+      default:
+        throw new Error("Internal error");
     }
   }
   getClosestActiveOptionIndexForState(direction, state) {
-    let currentIndex = Array.from(this.notDisabledOptions).indexOf(state === 'focused' ? this.lastFocusedOptionElement : this.lastSelectedOptionElement);
-    if (direction === 'next' && currentIndex < this.notDisabledOptions.length - 1) {
+    let concernedOption;
+    switch (state) {
+      case 'focused':
+        concernedOption = this.lastFocusedOptionElement;
+        break;
+      case 'modified':
+        concernedOption = this.lastModifiedOptionElement;
+        break;
+      case 'highlighted':
+        concernedOption = this.lastHighlightedOptionElement;
+        break;
+      default:
+        concernedOption = null;
+    }
+    let currentIndex = Array.from(this.notDisabledOptions).indexOf(concernedOption);
+    const MIN_INDEX = 0;
+    const MAX_INDEX = this.notDisabledOptions.length - 1;
+    if (direction === 'next' && currentIndex < MAX_INDEX) {
       currentIndex++;
     }
-    else if (direction === 'previous' && currentIndex > 0) {
+    else if (direction === 'previous' && currentIndex > MIN_INDEX) {
       currentIndex--;
     }
     else {
-      return 'nothing';
+      if (!this.autocomplete)
+        return 'nothing';
+      // Used to scroll options infinitely with keyboard (autocomplete mode only)
+      if (direction === 'next' && currentIndex >= MAX_INDEX) {
+        currentIndex = 0;
+      }
+      if (direction === 'previous' && currentIndex === MIN_INDEX) {
+        currentIndex = MAX_INDEX;
+      }
     }
     return currentIndex;
   }
-  selectOption(indexToSelect) {
-    this.lastSelectedOptionElement = this.notDisabledOptions[indexToSelect];
-    this.lastSelectedOptionElement.selected = true;
+  /**
+   * Selects the non-disabled option with the index passed as a parameter.
+   * The method sends an event to the state machine (the same as when clicking on an option with the mouse)
+   * @param indexToSelect Option index within non-deactivated options list
+   * @param fromKeyboard
+   * @private
+   */
+  selectOption(indexToSelect, fromKeyboard = false) {
+    const optionToSelect = this.notDisabledOptions[indexToSelect];
+    if (!optionToSelect)
+      return;
     this.sendOptionSelectedToStateMachine({
-      source: this.lastSelectedOptionElement,
-      value: this.value,
-      displayText: this.lastSelectedOptionElement.innerText
-    });
+      source: optionToSelect,
+      value: optionToSelect.value,
+      displayText: optionToSelect.innerText
+    }, fromKeyboard);
   }
   selectClosestOption(direction) {
-    const indexToSelect = this.getClosestActiveOptionIndexForState(direction, 'selected');
+    const indexToSelect = this.getClosestActiveOptionIndexForState(direction, 'modified');
     if (indexToSelect === 'nothing')
       return;
-    this.selectOption(indexToSelect);
+    this.selectOption(indexToSelect, true);
   }
   selectFirstOption() {
     if (this.notDisabledOptions.length < 1) {
       return;
     }
-    this.selectOption(0);
+    this.selectOption(0, true);
   }
   selectLastOption() {
     if (this.notDisabledOptions.length < 1) {
       return;
     }
-    this.selectOption(this.notDisabledOptions.length - 1);
+    this.selectOption(this.notDisabledOptions.length - 1, true);
   }
   focusOption(indexToFocus) {
     var _a;
@@ -5430,8 +5828,8 @@ const Select = class {
   selectedOptionChanged(event) {
     this.sendOptionSelectedToStateMachine(event.detail);
   }
-  sendOptionSelectedToStateMachine(event) {
-    this.stateService.send({ type: 'OPTION_SELECTED', value: event });
+  sendOptionSelectedToStateMachine(event, fromKeyboard = false) {
+    this.stateService.send({ type: 'OPTION_SELECTED', value: { option: event, fromKeyboard } });
   }
   onSlotchange() {
     this.updateSelectedValue(this.value);
@@ -5444,22 +5842,115 @@ const Select = class {
       }
     });
   }
+  //region Autocomplete mode
+  highlightOption(indexToHighlight) {
+    this.clearHighlightOnLastHighlightedOption();
+    this.lastHighlightedOptionElement = this.notDisabledOptions[indexToHighlight];
+    if (this.lastHighlightedOptionElement) {
+      this.lastHighlightedOptionElement.highlighted = true;
+      this.autocompleteInput.setAttribute("aria-activedescendant", this.lastHighlightedOptionElement.id);
+      requestAnimationFrame(() => {
+        this.lastHighlightedOptionElement.scrollIntoView({ block: "nearest", inline: "nearest" });
+      });
+    }
+  }
+  highlightFirstOption() {
+    this.highlightOption(0);
+  }
+  highlightLastOption() {
+    this.highlightOption(this.notDisabledOptions.length - 1);
+  }
+  highlightClosestOption(direction) {
+    const indexToHighlight = this.getClosestActiveOptionIndexForState(direction, 'highlighted');
+    if (indexToHighlight === 'nothing')
+      return;
+    this.highlightOption(indexToHighlight);
+  }
+  /**
+   * This method removes the highlight that applies to the last highlighted option if any.
+   * This is used only for accessibility of autocomplete mode.
+   * @private
+   */
+  clearHighlightOnLastHighlightedOption() {
+    if (this.lastHighlightedOptionElement) {
+      this.lastHighlightedOptionElement.highlighted = false;
+      this.lastHighlightedOptionElement = null;
+    }
+  }
+  onAutocompleteInputEvent(e) {
+    var _a;
+    const filter = (_a = this.autocompleteInput.value) !== null && _a !== void 0 ? _a : '';
+    this.handleAutocompleteValueChange(filter);
+    // Avoid the inputEvent event to bubble and be emitted, we rather use wcsFilterChange in this case :
+    e.stopPropagation();
+  }
+  handleAutocompleteValueChange(filter) {
+    var _a, _b;
+    this.clearHighlightOnLastHighlightedOption();
+    const newValueIsDifferentFromLastModifiedOption = this.lastModifiedOptionElement == null || ((_a = this.lastModifiedOptionElement) === null || _a === void 0 ? void 0 : _a.textContent) !== this.autocompleteValue;
+    if (!this.expanded && newValueIsDifferentFromLastModifiedOption) {
+      this.open();
+    }
+    if (filter.length) {
+      const [matchingOptions, optionsToHide] = [[], []];
+      const filteringFunction = (_b = this.filterFn) !== null && _b !== void 0 ? _b : WcsDefaultSelectFilterFn;
+      this.options.forEach((optionEl) => (filteringFunction(optionEl, filter) ? matchingOptions : optionsToHide).push(optionEl));
+      this.showNoResultFoundLabel = matchingOptions.length === 0;
+      matchingOptions.forEach(o => {
+        o.hidden = false;
+        o.removeAttribute("aria-hidden");
+      });
+      optionsToHide.forEach(o => {
+        o.hidden = true;
+        o.setAttribute("aria-hidden", "true");
+      });
+    }
+    else {
+      this.showNoResultFoundLabel = false;
+      this.options.forEach(o => {
+        o.hidden = false;
+        o.removeAttribute("aria-hidden");
+      });
+    }
+    this.autocompleteValue = filter;
+    this.wcsFilterChange.emit({
+      value: filter,
+    });
+  }
+  onFocus() {
+    if (this.autocomplete) {
+      this.focusAutocompleteInput();
+    }
+  }
+  focusAutocompleteInput() {
+    var _a;
+    (_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  //endregion
   componentDidRender() {
     var _a;
     (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
   }
   render() {
+    var _a;
     const ariaLabelValue = `${this.labelElement ? this.labelElement.innerText : ''} ${this.hasValue ? this.displayText : ''}`.trimEnd();
-    return (h(Host, Object.assign({ class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes(), { role: "combobox", "aria-haspopup": "listbox", "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": this.optionsId, "aria-owns": this.optionsId, "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-label": ariaLabelValue }), h("div", { class: "wcs-select-control" }, h("div", { class: "wcs-select-value-container" }, this.hasValue
+    return (h(Host, Object.assign({ class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes(), { role: !this.autocomplete ? "combobox" : null, "aria-haspopup": !this.autocomplete ? "listbox" : null, "aria-owns": !this.autocomplete ? this.optionsId : null, "aria-controls": !this.autocomplete ? this.optionsId : null, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-label": ariaLabelValue }), h("div", { class: "wcs-select-control" }, h("div", { class: "wcs-select-value-container" }, this.hasValue
       ?
         (this.chips ?
           this.values.map((option) => h(SelectChips, { disabled: this.disabled, option: option, onRemove: this.removeChip.bind(this) }))
-          : h("label", { class: "wcs-select-value" }, this.displayText))
-      : h("label", { class: "wcs-select-placeholder" }, this.placeholder)), h(SelectArrow, { up: this.expanded })), h("div", { class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { name: "wcs-select-option", onSlotchange: this.onSlotchange.bind(this) }))));
+          : (!this.autocomplete || this.autocomplete && this.multiple) &&
+            h("label", { class: "wcs-select-value" }, this.displayText))
+      : !this.autocomplete && h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && h("input", { class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabelValue, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": this.optionsId, "aria-owns": this.optionsId, "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-autocomplete": "list", onBlur: (e) => this.onAutocompleteFieldBlur(e), placeholder: ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) ? null : this.placeholder, onInput: (e) => this.onAutocompleteInputEvent(e), ref: el => this.autocompleteInput = el })), h(SelectArrow, { up: this.expanded })), h("div", { class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
+      h("div", { class: "noresult-container" }, h("slot", { name: "filter-no-result" }, h("span", null, "Aucun r\u00E9sultat"))))));
   }
   focusedAttributes() {
     return !this.disabled ? { tabIndex: 0 } : {};
   }
+  onAutocompleteFieldBlur(_e) {
+    if (this.multiple === false && this.autocomplete === true) {
+      this.autocompleteValue = this.displayText;
+    }
+  }
   get el() { return getElement(this); }
   static get watchers() { return {
     "value": ["onValueChangeHandler"]
@@ -5468,7 +5959,7 @@ const Select = class {
 let selectIds = 0;
 Select.style = selectCss;
 
-const selectOptionCss = "@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)}wcs-select-option{--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;overflow:hidden;display:flex;padding:0 var(--wcs-padding);height:var(--wcs-select-option-height);line-height:42px;cursor:pointer;user-select:none;font-weight:500;font-size:1rem;color:var(--wcs-black)}wcs-select-option::before,wcs-select-option::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}wcs-select-option::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}wcs-select-option::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}wcs-select-option.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}wcs-select-option.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}wcs-select-option.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}wcs-select-option.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}wcs-select-option.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-select-option::before,wcs-select-option::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}wcs-select-option.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}wcs-select-option::before,wcs-select-option::after{background-color:#999;background-color:var(--mdc-ripple-color, #999)}wcs-select-option:hover::before,wcs-select-option.mdc-ripple-surface--hover::before{opacity:0.1;opacity:var(--mdc-ripple-hover-opacity, 0.1)}wcs-select-option.mdc-ripple-upgraded--background-focused::before,wcs-select-option:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}wcs-select-option:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}wcs-select-option:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.3;opacity:var(--mdc-ripple-press-opacity, 0.3)}wcs-select-option.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.3)}wcs-select-option:hover{color:var(--wcs-primary);background-color:var(--wcs-light)}wcs-select-option:focus{outline:none}wcs-select-option[disabled]{cursor:not-allowed;pointer-events:none;color:var(--wcs-text-disabled)}wcs-select-option[selected]{color:var(--wcs-primary);background-color:var(--wcs-light)}wcs-select-option[multiple] wcs-checkbox{pointer-events:none;margin-right:10px}wcs-select-option[multiple]:hover wcs-checkbox{--wcs-checkbox-border-color:var(--wcs-primary)}";
+const selectOptionCss = "@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)}wcs-select-option{--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;overflow:hidden;display:flex;padding:0 var(--wcs-padding);height:var(--wcs-select-option-height);line-height:42px;cursor:pointer;user-select:none;font-weight:500;font-size:1rem;color:var(--wcs-black)}wcs-select-option::before,wcs-select-option::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}wcs-select-option::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}wcs-select-option::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}wcs-select-option.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}wcs-select-option.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}wcs-select-option.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}wcs-select-option.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}wcs-select-option.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-select-option::before,wcs-select-option::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}wcs-select-option.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}wcs-select-option::before,wcs-select-option::after{background-color:#999;background-color:var(--mdc-ripple-color, #999)}wcs-select-option:hover::before,wcs-select-option.mdc-ripple-surface--hover::before{opacity:0.1;opacity:var(--mdc-ripple-hover-opacity, 0.1)}wcs-select-option.mdc-ripple-upgraded--background-focused::before,wcs-select-option:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}wcs-select-option:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}wcs-select-option:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.3;opacity:var(--mdc-ripple-press-opacity, 0.3)}wcs-select-option.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.3)}wcs-select-option:hover{color:var(--wcs-primary);background-color:var(--wcs-light)}wcs-select-option:focus{outline:none}wcs-select-option[disabled]{cursor:not-allowed;pointer-events:none;color:var(--wcs-text-disabled)}wcs-select-option[hidden]{display:none}wcs-select-option[selected]{color:var(--wcs-primary);background-color:var(--wcs-light)}wcs-select-option[multiple] wcs-checkbox{pointer-events:none;margin-right:10px}wcs-select-option[multiple]:hover wcs-checkbox{--wcs-checkbox-border-color:var(--wcs-primary)}wcs-select-option[highlighted]{outline:solid 1px var(--wcs-primary);outline-offset:-1px;border-radius:var(--wcs-border-radius);color:var(--wcs-primary);background-color:var(--wcs-light)}wcs-select-option[highlighted] wcs-checkbox{--wcs-checkbox-border-color:var(--wcs-primary)}";
 
 const SelectOption = class {
   constructor(hostRef) {
@@ -5477,6 +5968,7 @@ const SelectOption = class {
     this.selectOptionId = generateUniqueId(this.el.tagName);
     this.disabled = false;
     this.selected = false;
+    this.highlighted = false;
     this.value = undefined;
     this.chipColor = undefined;
     this.chipBackgroundColor = undefined;
@@ -5518,7 +6010,7 @@ const SelectOption = class {
     }
   }
   render() {
-    return (h(Host, { id: this.selectOptionId, "aria-selected": this.selected ? 'true' : 'false', slot: "wcs-select-option", role: "option", tabindex: "-1" }, this.multiple &&
+    return (h(Host, { id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
       h("wcs-checkbox", { tabindex: "-1", checked: this.selected }), h("slot", null)));
   }
   get el() { return getElement(this); }