wcs-core 3.0.0 → 4.0.1

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

@@ -5,7 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ca67a6dc.js');
 const lodash = require('./lodash-776d6f03.js');
 const selectArrow = require('./select-arrow-c9583ea9.js');
-const helpers = require('./helpers-11518d4f.js');
+const helpers = require('./helpers-4a14051a.js');
+const popper = require('./popper-e3b74571.js');
 const component = require('./component-2a26e37d.js');
 
 /*! *****************************************************************************
@@ -4965,6 +4966,12 @@ function Machine(config, options, initialContext) {
   return new StateNode(config, options, initialContext);
 }
 
+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
+  return WcsSelectSizeValue.includes(size);
+}
+
 const SelectChips = ({ disabled, option, onRemove }) => {
   const style = {};
   if (option.chipColor) {
@@ -4982,7 +4989,7 @@ const SelectChips = ({ disabled, option, onRemove }) => {
           index.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:42px;display:block;position:relative;outline:none;user-select:none}: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([class~=expanded][overlaydirection=top]) .wcs-select-control{border:var(--wcs-select-border-color) solid 1px;border-top-left-radius:0;border-top-right-radius:0}:host([class~=expanded][overlaydirection=bottom]) .wcs-select-control{border:var(--wcs-select-border-color) solid 1px;border-bottom-left-radius:0;border-bottom-right-radius:0}: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:calc(var(--wcs-padding) / 2) var(--wcs-padding);font-weight:500;cursor:pointer;color:var(--wcs-select-color);transition:color 125ms ease-in;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([chips]) .wcs-select-control{flex-wrap:wrap}.wcs-select-control{--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 1px;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-chip{color:var(--wcs-contrast);background-color:var(--wcs-base);border-radius:0.75rem;display:flex;align-items:center;margin:calc(var(--wcs-base-margin) / 2);padding:calc((var(--wcs-padding) - 8px) / 2) var(--wcs-padding);overflow:initial}:host([overlaydirection=top]) .wcs-select-options{-webkit-transform:translateY(-100%);transform:translateY(-100%);border-left:var(--wcs-select-border-color) solid 1px;border-right:var(--wcs-select-border-color) solid 1px;border-top:var(--wcs-select-border-color) solid 1px;border-top-right-radius:var(--wcs-border-radius);border-top-left-radius:var(--wcs-border-radius)}:host([overlaydirection=bottom]) .wcs-select-options{border-left:var(--wcs-select-border-color) solid 1px;border-right:var(--wcs-select-border-color) solid 1px;border-bottom:var(--wcs-select-border-color) solid 1px;border-bottom-right-radius:var(--wcs-border-radius);border-bottom-left-radius:var(--wcs-border-radius)}.wcs-select-options{display:none;position:absolute;z-index:1;margin:0;max-height:var(--wcs-select-overlay-max-height);overflow-y:auto;background-color:var(--wcs-white);color:var(--wcs-text-medium)}";
+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)}";
 
 const SELECT_MACHINE_CONFIG = {
   key: 'select',
@@ -4993,7 +5000,7 @@ const SELECT_MACHINE_CONFIG = {
       on: {
         CLICK: 'opened',
         OPEN: 'opened',
-        OPTION_CLICKED: { actions: ['selectOption'] }
+        OPTION_SELECTED: { actions: ['selectOption'] }
       },
     },
     opened: {
@@ -5001,7 +5008,7 @@ const SELECT_MACHINE_CONFIG = {
       on: {
         CLICK: 'closed',
         CLOSE: 'closed',
-        OPTION_CLICKED: { actions: ['selectOption'] }
+        OPTION_SELECTED: { actions: ['selectOption'] }
       },
     },
   }
@@ -5012,7 +5019,10 @@ const Select = class {
     this.wcsChange = index.createEvent(this, "wcsChange", 7);
     this.wcsFocus = index.createEvent(this, "wcsFocus", 7);
     this.wcsBlur = index.createEvent(this, "wcsBlur", 7);
+    this.selectId = `wcs-select-${selectIds++}`;
+    this.optionsId = helpers.generateUniqueId("OPTIONS");
     this.expanded = false;
+    this.size = 'm';
     this.hasLoaded = false;
     this.displayText = undefined;
     this.focused = undefined;
@@ -5107,9 +5117,29 @@ const Select = class {
     if (this.value !== undefined) {
       this.updateSelectedValue(this.value);
     }
+    this.popper = this.createPopperInstance();
+    // if the select is inside a wcs-form-field, we set an id to the wcs-label if present
+    // the wcs-label element reference is kept to compute aria-label value during the rendering
+    this.labelElement = helpers.findItemLabel(this.el);
+    if (this.labelElement) {
+      this.labelElement.id = this.selectId + "-lbl";
+    }
     // TODO: is this still usefull for anything ?
     this.hasLoaded = true;
   }
+  createPopperInstance() {
+    return popper.createPopper(this.controlEl, this.optionsEl, {
+      placement: "bottom",
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 4] // we want 4px between select control and select options
+          }
+        }
+      ]
+    });
+  }
   emitChange(newValue) {
     this.wcsChange.emit({
       value: newValue
@@ -5134,6 +5164,12 @@ const Select = class {
     });
     observer.observe(this.el, { childList: 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
@@ -5148,22 +5184,47 @@ const Select = class {
     }
     return [];
   }
+  get notDisabledOptions() {
+    var _a;
+    const opts = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('wcs-select-option:not([disabled])');
+    if (opts && opts.length !== 0) {
+      return opts;
+    }
+    return [];
+  }
   initMachineOptions() {
     return {
       actions: {
         open: () => {
+          var _a;
           if (!this.disabled) {
-            this.updateOverlayDirection();
             this.expanded = true;
-            this.focused = true;
+            this.focused = false;
+            if (this.notDisabledOptions.length > 0) {
+              this.lastFocusedOptionElement = (_a = this.lastSelectedOptionElement) !== null && _a !== void 0 ? _a : this.notDisabledOptions[0];
+              requestAnimationFrame(() => {
+                var _a;
+                (_a = this.lastFocusedOptionElement) === null || _a === void 0 ? void 0 : _a.focus();
+              });
+            }
           }
         },
-        close: () => {
-          this.focused = true;
+        close: (_, event) => {
+          var _a, _b;
+          if (event.type === 'CLOSE') {
+            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();
+              this.focused = true;
+            }
+          }
           this.expanded = false;
         },
         selectOption: (_, event) => {
-          if (event.type === 'OPTION_CLICKED') {
+          if (event.type === 'OPTION_SELECTED') {
             this.handleClickEvent(event.value);
           }
         }
@@ -5173,41 +5234,6 @@ const Select = class {
       }
     };
   }
-  /**
-   * This method controls whether or not the overlay has enough space to be displayed
-   * at the bottom of the select component.
-   *
-   * It compute the size of the expended select by adding the theoretical dimensions of the
-   * overlay calculated from the number of options plus the initial select size.
-   * @private
-   */
-  updateOverlayDirection() {
-    // We retrieve values from CSS variables
-    const overlayMaxHeight = +getComputedStyle(this.el).getPropertyValue('--wcs-select-overlay-max-height').replace(/\D/g, '');
-    const optionSize = +getComputedStyle(this.el).getPropertyValue('--wcs-select-option-height').replace(/\D/g, '');
-    const selectBounding = this.el.getBoundingClientRect();
-    const maxOptionsCount = Math.floor(overlayMaxHeight / optionSize);
-    // Maximum size of the overlay is 360px, otherwise the size is calculated from the number of options
-    const optionsOverlaySize = this.options.length > maxOptionsCount ? overlayMaxHeight + 1 : this.options.length * optionSize + 1;
-    const remainingHeightAfterOpen = window.innerHeight - (selectBounding.y + selectBounding.height + optionsOverlaySize);
-    // There are not enough pixels to open the overlay below the component
-    if (remainingHeightAfterOpen < 0) {
-      this.overlayDirection = 'top';
-    }
-    else {
-      this.overlayDirection = 'bottom';
-    }
-  }
-  updateOverlayMargin() {
-    if (this.controlEl && this.optionsEl) {
-      if (this.overlayDirection === 'top') {
-        this.optionsEl.style.marginTop = '-' + this.controlEl.getBoundingClientRect().height + 'px';
-      }
-      else {
-        this.optionsEl.style.marginTop = '0';
-      }
-    }
-  }
   handleClickEvent(event) {
     if (this.multiple) {
       this.handleClickOnMultiple(event);
@@ -5222,10 +5248,13 @@ const Select = class {
       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.updateValueWithValues();
   }
@@ -5245,6 +5274,7 @@ const Select = class {
     event.source.selected = true;
     this.value = event.value;
     this.displayText = event.displayText;
+    this.lastSelectedOptionElement = event.source;
     this.stateService.send('CLOSE');
   }
   disconnectedCallback() {
@@ -5276,20 +5306,136 @@ const Select = class {
     }
   }
   onWindowClickEvent(event) {
-    // We search in the full path of the event, because if a select is used in another web component,
-    // the event captured by the windows will target the parent web component and not the select.
-    const clickedOnSelectOrChildren = event.composedPath().map(x => x.nodeName).indexOf('WCS-SELECT') !== -1;
+    const firstSelectInEventPath = event.composedPath().filter(x => x.nodeName === 'WCS-SELECT')[0];
+    const clickOnCurrentSelect = firstSelectInEventPath === this.el;
     // TODO: Move this logic in the state machine
     // FIXME: Doesnt work with single + disabled option
-    if (this.expanded && !clickedOnSelectOrChildren) {
+    if (this.expanded && !clickOnCurrentSelect) {
       this.stateService.send('CLOSE');
     }
   }
+  onKeyDown(_event) {
+    // close
+    if (this.stateService.getSnapshot().matches("closed")) {
+      if (helpers.isEnterKey(_event) || (_event.altKey && helpers.isDownArrowKey(_event)) || helpers.isSpaceKey(_event)) {
+        _event.preventDefault();
+        _event.stopPropagation();
+        this.stateService.send('OPEN');
+        return;
+      }
+      if (this.multiple) {
+        if (helpers.isDownArrowKey(_event)) {
+          this.stateService.send('OPEN');
+        }
+      }
+      else {
+        if (helpers.isDownArrowKey(_event) || helpers.isRightArrowKey(_event)) {
+          _event.preventDefault();
+          this.selectClosestOption("next");
+        }
+        if (helpers.isUpArrowKey(_event) || helpers.isLeftArrowKey(_event)) {
+          _event.preventDefault();
+          this.selectClosestOption("previous");
+        }
+        else if (helpers.isPageDownKey(_event)) {
+          _event.preventDefault();
+          this.selectLastOption();
+        }
+        else if (helpers.isPageUpKey(_event) || helpers.isHomeKey(_event)) {
+          _event.preventDefault();
+          this.selectFirstOption();
+        }
+      }
+    }
+    // open
+    else if (this.stateService.getSnapshot().matches("opened")) {
+      if (helpers.isEscapeKey(_event) || (_event.altKey && helpers.isUpArrowKey(_event))) {
+        this.stateService.send({ type: "CLOSE", value: { shouldBlur: false } });
+      }
+      else if (helpers.isTabKey(_event) || (_event.shiftKey && helpers.isTabKey(_event))) {
+        this.stateService.send({ type: "CLOSE", value: { shouldBlur: true } });
+      }
+      else if (helpers.isDownArrowKey(_event)) {
+        _event.preventDefault();
+        this.focusClosestOption("next");
+      }
+      else if (helpers.isUpArrowKey(_event)) {
+        _event.preventDefault();
+        this.focusClosestOption("previous");
+      }
+      else if (helpers.isPageUpKey(_event) || helpers.isHomeKey(_event)) {
+        _event.preventDefault();
+        this.focusFirstOption();
+      }
+      else if (helpers.isPageDownKey(_event)) {
+        _event.preventDefault();
+        this.focusLastOption();
+      }
+    }
+  }
+  getClosestActiveOptionIndexForState(direction, state) {
+    let currentIndex = Array.from(this.notDisabledOptions).indexOf(state === 'focused' ? this.lastFocusedOptionElement : this.lastSelectedOptionElement);
+    if (direction === 'next' && currentIndex < this.notDisabledOptions.length - 1) {
+      currentIndex++;
+    }
+    else if (direction === 'previous' && currentIndex > 0) {
+      currentIndex--;
+    }
+    else {
+      return 'nothing';
+    }
+    return currentIndex;
+  }
+  selectOption(indexToSelect) {
+    this.lastSelectedOptionElement = this.notDisabledOptions[indexToSelect];
+    this.lastSelectedOptionElement.selected = true;
+    this.sendOptionSelectedToStateMachine({
+      source: this.lastSelectedOptionElement,
+      value: this.value,
+      displayText: this.lastSelectedOptionElement.innerText
+    });
+  }
+  selectClosestOption(direction) {
+    const indexToSelect = this.getClosestActiveOptionIndexForState(direction, 'selected');
+    if (indexToSelect === 'nothing')
+      return;
+    this.selectOption(indexToSelect);
+  }
+  selectFirstOption() {
+    if (this.notDisabledOptions.length < 1) {
+      return;
+    }
+    this.selectOption(0);
+  }
+  selectLastOption() {
+    if (this.notDisabledOptions.length < 1) {
+      return;
+    }
+    this.selectOption(this.notDisabledOptions.length - 1);
+  }
+  focusOption(indexToFocus) {
+    var _a;
+    this.lastFocusedOptionElement = this.notDisabledOptions[indexToFocus];
+    (_a = this.lastFocusedOptionElement) === null || _a === void 0 ? void 0 : _a.focus();
+    this.el.setAttribute("aria-activedescendant", this.lastFocusedOptionElement.id);
+  }
+  focusClosestOption(direction) {
+    const indexToFocus = this.getClosestActiveOptionIndexForState(direction, 'focused');
+    if (indexToFocus === 'nothing')
+      return;
+    this.focusOption(indexToFocus);
+  }
+  focusFirstOption() {
+    this.focusOption(0);
+  }
+  focusLastOption() {
+    this.focusOption(this.notDisabledOptions.length - 1);
+  }
   selectedOptionChanged(event) {
-    this.sendOptionClickedToStateMachine(event.detail);
+    this.sendOptionSelectedToStateMachine(event.detail);
   }
-  sendOptionClickedToStateMachine(event) {
-    this.stateService.send({ type: 'OPTION_CLICKED', value: event });
+  sendOptionSelectedToStateMachine(event) {
+    this.stateService.send({ type: 'OPTION_SELECTED', value: event });
   }
   onSlotchange() {
     this.updateSelectedValue(this.value);
@@ -5298,27 +5444,22 @@ const Select = class {
     this.options
       .forEach(opt => {
       if (opt.value === v.value) {
-        this.sendOptionClickedToStateMachine(Object.assign(Object.assign({}, v), { source: opt }));
+        this.sendOptionSelectedToStateMachine(Object.assign(Object.assign({}, v), { source: opt }));
       }
     });
   }
-  render() {
-    if (this.hasLoaded) {
-      this.updateStyles();
-    }
-    this.updateOverlayMargin();
-    return (index.h(index.Host, Object.assign({ class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes()), index.h("div", { class: "wcs-select-control" }, this.hasValue
-      ? (this.chips ?
-        this.values.map((option) => index.h(SelectChips, { disabled: this.disabled, option: option, onRemove: this.removeChip.bind(this) }))
-        : index.h("label", { class: "wcs-select-value" }, this.displayText))
-      : index.h("label", { class: "wcs-select-placeholder" }, this.placeholder), index.h(selectArrow.SelectArrow, { up: this.expanded })), index.h("div", { class: "wcs-select-options" }, index.h("slot", { name: "wcs-select-option", onSlotchange: this.onSlotchange.bind(this) }))));
+  componentDidRender() {
+    var _a;
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
   }
-  updateStyles() {
-    // Make the options container width the same width as everything.
-    const borderSize = 1;
-    // TODO: Consider using a mutation observer to rerender the size each time ?
-    // Be cautious as it may cause infinite loop with render ?
-    this.optionsEl.setAttribute('style', `width: ${Math.ceil(this.el.offsetWidth - 2 * borderSize)}px;`);
+  render() {
+    const ariaLabelValue = `${this.labelElement ? this.labelElement.innerText : ''} ${this.hasValue ? this.displayText : ''}`.trimEnd();
+    return (index.h(index.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 }), index.h("div", { class: "wcs-select-control" }, index.h("div", { class: "wcs-select-value-container" }, this.hasValue
+      ?
+        (this.chips ?
+          this.values.map((option) => index.h(SelectChips, { disabled: this.disabled, option: option, onRemove: this.removeChip.bind(this) }))
+          : index.h("label", { class: "wcs-select-value" }, this.displayText))
+      : index.h("label", { class: "wcs-select-placeholder" }, this.placeholder)), index.h(selectArrow.SelectArrow, { up: this.expanded })), index.h("div", { class: "wcs-select-options", id: this.optionsId, role: "listbox" }, index.h("slot", { name: "wcs-select-option", onSlotchange: this.onSlotchange.bind(this) }))));
   }
   focusedAttributes() {
     return !this.disabled ? { tabIndex: 0 } : {};
@@ -5328,14 +5469,16 @@ const Select = class {
     "value": ["onValueChangeHandler"]
   }; }
 };
+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[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[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 SelectOption = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.wcsSelectOptionClick = index.createEvent(this, "wcsSelectOptionClick", 7);
+    this.selectOptionId = helpers.generateUniqueId(this.el.tagName);
     this.disabled = false;
     this.selected = false;
     this.value = undefined;
@@ -5352,7 +5495,7 @@ const SelectOption = class {
   componentDidLoad() {
     this.mdcRipple = new component.MDCRipple(this.el);
   }
-  onMouseDown(event) {
+  chooseOption(event) {
     if (!this.disabled) {
       event.stopPropagation();
       // We select inner HTML as it's what's passed into the slot.
@@ -5364,9 +5507,23 @@ const SelectOption = class {
       });
     }
   }
+  onMouseDown(event) {
+    this.chooseOption(event);
+  }
+  /**
+   * Handles the keydown event to update the selection.
+   * @param event keyboard event
+   */
+  handleKeydown(event) {
+    if (helpers.isEnterKey(event) || helpers.isSpaceKey(event)) {
+      this.chooseOption(event);
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
   render() {
-    return (index.h(index.Host, { slot: "wcs-select-option" }, this.multiple &&
-      index.h("wcs-checkbox", { checked: this.selected }), index.h("slot", null)));
+    return (index.h(index.Host, { id: this.selectOptionId, "aria-selected": this.selected ? 'true' : 'false', slot: "wcs-select-option", role: "option", tabindex: "-1" }, this.multiple &&
+      index.h("wcs-checkbox", { tabindex: "-1", checked: this.selected }), index.h("slot", null)));
   }
   get el() { return index.getElement(this); }
 };