wcs-core 7.5.1 → 7.7.0

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

@@ -1,18 +1,27 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d9de61ce.js';
-import { s as setOrRemoveAttribute, i as inheritAriaAttributes, a as inheritAttributes } from './helpers-ece6a2d3.js';
+import { s as setOrRemoveAttribute } from './helpers-2d73ee7c.js';
 
-const radioCss = ":host{width:fit-content;--wcs-radio-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-radio-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-radio-text-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-radio-text-font-weight-selected:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-text-color-hover:var(--wcs-semantic-color-text-primary);--wcs-radio-checkmark-size:1rem;--wcs-radio-gap:var(--wcs-semantic-spacing-base);--wcs-radio-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-radio-checkmark-border-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-radio-checkmark-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-radio-checkmark-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-radio-checkmark-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-radio-checkmark-background-color-default:transparent;--wcs-radio-checkmark-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-radio-checkmark-background-color-selected-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-radio-checkmark-background-color-selected-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-radio-checkmark-outline-distance-with-checkmark-circle:var(--wcs-semantic-spacing-small);--wcs-radio-checkmark-outline-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-outline-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-radio-checkmark-border-radius:var(--wcs-semantic-border-radius-full);--wcs-radio-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-hover:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-press:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-disabled:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-selected-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-radio-option-background-color-selected-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-radio-option-background-color-selected-press:var(--wcs-semantic-color-background-action-primary-press);--wcs-radio-option-background-color-selected-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-radio-option-text-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-hover:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-radio-option-text-color-selected-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-radio-option-text-color-selected-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-radio-option-text-color-selected-press:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-radio-option-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-option-text-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-text-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-border-width:var(--wcs-semantic-border-width-default);--wcs-radio-option-border-color-hover:var(--wcs-semantic-color-border-action-secondary-hover);--wcs-radio-option-border-color-press:var(--wcs-semantic-color-border-action-secondary-press);--wcs-radio-option-padding-top:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-right:var(--wcs-semantic-spacing-large);--wcs-radio-option-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-left:var(--wcs-semantic-spacing-large)}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) label,:host([mode=horizontal]) label{margin-bottom:0;color:var(--wcs-radio-text-color-default);font-weight:var(--wcs-radio-text-font-weight-default) !important;display:inline-block}:host([mode=radio]) label:before,:host([mode=horizontal]) label:before{border-radius:var(--wcs-radio-checkmark-border-radius);border:var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);position:relative;width:var(--wcs-radio-checkmark-size);height:var(--wcs-radio-checkmark-size);pointer-events:none;content:\"\";background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) input:focus-visible+label,:host([mode=horizontal]) input:focus-visible+label{transition:none;outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-radio-border-radius)}:host([disabled]) label{color:var(--wcs-radio-text-color-disabled);cursor:not-allowed}:host([disabled]) label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled)}:host(:not([disabled])) label{cursor:pointer}:host([mode=radio].checked) label,:host([mode=horizontal].checked) label{color:var(--wcs-radio-text-color-selected);font-weight:var(--wcs-radio-text-font-weight-selected) !important}:host([mode=radio].checked) label:before,:host([mode=horizontal].checked) label:before{border-color:var(--wcs-radio-checkmark-border-color-selected);background-color:var(--wcs-radio-checkmark-background-color-selected);outline:solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);outline-offset:calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle))}:host([mode=radio][disabled].checked) label,:host([mode=horizontal][disabled].checked) label{color:var(--wcs-radio-text-color-disabled)}:host([mode=radio][disabled].checked) label:before,:host([mode=horizontal][disabled].checked) label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled);background-color:var(--wcs-radio-checkmark-background-color-selected-disabled)}:host([mode=radio]:hover:not([disabled])) label,:host([mode=horizontal]:hover:not([disabled])) label{color:var(--wcs-radio-text-color-hover)}:host([mode=radio]:hover:not([disabled])) label:before,:host([mode=horizontal]:hover:not([disabled])) label:before{border-color:var(--wcs-radio-checkmark-border-color-hover);background-color:var(--wcs-radio-checkmark-background-color-selected-hover)}:host([mode=radio]:hover:not([disabled]):not(.checked)) label:before,:host([mode=horizontal]:hover:not([disabled]):not(.checked)) label:before{background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) label{border:none}:host([mode=radio]) label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin-right:var(--wcs-radio-gap);display:inline-block;top:3px;box-sizing:border-box}:host([mode=radio]) label:empty::before{margin-right:0}:host([mode=horizontal]){height:fit-content}:host([mode=horizontal]) label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin:auto auto var(--wcs-radio-gap);display:block}:host([mode=horizontal]) label:empty::before{margin-bottom:0}:host([mode=option]){font-weight:var(--wcs-radio-option-text-font-weight-default) !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);margin-bottom:0;color:var(--wcs-radio-option-text-color-default);white-space:nowrap;border-radius:var(--wcs-radio-option-border-radius);transition:background-color var(--wcs-radio-transition-duration) ease-in-out;background-color:var(--wcs-radio-option-background-color-default)}:host([mode=option]) input:focus-visible+label{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:0;border-radius:var(--wcs-radio-border-radius)}:host([mode=option][disabled]) label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-disabled)}:host([mode=option][disabled].checked) label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-selected-disabled)}:host([mode=option].checked) label{font-weight:var(--wcs-radio-option-text-font-weight-selected) !important;color:var(--wcs-radio-option-text-color-selected-default);background-color:var(--wcs-radio-option-background-color-selected-default)}:host([mode=option]:hover.checked:not([disabled])) label{color:var(--wcs-radio-option-text-color-selected-hover);background-color:var(--wcs-radio-option-background-color-selected-hover)}:host([mode=option]:active.checked:not([disabled])) label{color:var(--wcs-radio-option-text-color-selected-press);background-color:var(--wcs-radio-option-background-color-selected-press)}:host([mode=option]:hover:not(.checked):not([disabled])) label{color:var(--wcs-radio-option-text-color-hover);background-color:var(--wcs-radio-option-background-color-hover);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover)}:host([mode=option]:active:not(.checked):not([disabled])) label{color:var(--wcs-radio-option-text-color-press);background-color:var(--wcs-radio-option-background-color-press);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press)}";
+const radioCss = ":host{width:fit-content;--wcs-radio-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-radio-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-radio-text-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-radio-text-font-weight-selected:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-text-color-hover:var(--wcs-semantic-color-text-primary);--wcs-radio-checkmark-size:1rem;--wcs-radio-gap:var(--wcs-semantic-spacing-base);--wcs-radio-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-radio-checkmark-border-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-radio-checkmark-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-radio-checkmark-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-radio-checkmark-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-radio-checkmark-background-color-default:transparent;--wcs-radio-checkmark-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-radio-checkmark-background-color-selected-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-radio-checkmark-background-color-selected-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-radio-checkmark-outline-distance-with-checkmark-circle:var(--wcs-semantic-spacing-small);--wcs-radio-checkmark-outline-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-outline-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-radio-checkmark-border-radius:var(--wcs-semantic-border-radius-full);--wcs-radio-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-hover:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-press:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-disabled:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-selected-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-radio-option-background-color-selected-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-radio-option-background-color-selected-press:var(--wcs-semantic-color-background-action-primary-press);--wcs-radio-option-background-color-selected-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-radio-option-text-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-hover:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-radio-option-text-color-selected-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-radio-option-text-color-selected-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-radio-option-text-color-selected-press:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-radio-option-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-option-text-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-text-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-border-width:var(--wcs-semantic-border-width-default);--wcs-radio-option-border-color-hover:var(--wcs-semantic-color-border-action-secondary-hover);--wcs-radio-option-border-color-press:var(--wcs-semantic-color-border-action-secondary-press);--wcs-radio-option-padding-top:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-right:var(--wcs-semantic-spacing-large);--wcs-radio-option-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-left:var(--wcs-semantic-spacing-large);position:relative}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) .label,:host([mode=horizontal]) .label{margin-bottom:0;color:var(--wcs-radio-text-color-default);font-weight:var(--wcs-radio-text-font-weight-default) !important;display:inline-block}:host([mode=radio]) .label:before,:host([mode=horizontal]) .label:before{border-radius:var(--wcs-radio-checkmark-border-radius);border:var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);position:relative;width:var(--wcs-radio-checkmark-size);height:var(--wcs-radio-checkmark-size);pointer-events:none;content:\"\";background-color:var(--wcs-radio-checkmark-background-color-default)}:host(:focus-visible){outline:none}:host(:focus-visible) .label{transition:none;outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-radio-border-radius)}:host([disabled]) .label{color:var(--wcs-radio-text-color-disabled);cursor:not-allowed}:host([disabled]) .label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled)}:host(:not([disabled])) .label{cursor:pointer}:host([mode=radio].checked) .label,:host([mode=horizontal].checked) .label{color:var(--wcs-radio-text-color-selected);font-weight:var(--wcs-radio-text-font-weight-selected) !important}:host([mode=radio].checked) .label:before,:host([mode=horizontal].checked) .label:before{border-color:var(--wcs-radio-checkmark-border-color-selected);background-color:var(--wcs-radio-checkmark-background-color-selected);outline:solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);outline-offset:calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle))}:host([mode=radio][disabled].checked) .label,:host([mode=horizontal][disabled].checked) .label{color:var(--wcs-radio-text-color-disabled)}:host([mode=radio][disabled].checked) .label:before,:host([mode=horizontal][disabled].checked) .label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled);background-color:var(--wcs-radio-checkmark-background-color-selected-disabled)}:host([mode=radio]:hover:not([disabled])) .label,:host([mode=horizontal]:hover:not([disabled])) .label{color:var(--wcs-radio-text-color-hover)}:host([mode=radio]:hover:not([disabled])) .label:before,:host([mode=horizontal]:hover:not([disabled])) .label:before{border-color:var(--wcs-radio-checkmark-border-color-hover);background-color:var(--wcs-radio-checkmark-background-color-selected-hover)}:host([mode=radio]:hover:not([disabled]):not(.checked)) .label:before,:host([mode=horizontal]:hover:not([disabled]):not(.checked)) .label:before{background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) .label{border:none}:host([mode=radio]) .label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin-right:var(--wcs-radio-gap);display:inline-block;top:3px;box-sizing:border-box}:host([mode=radio]) .label:empty::before{margin-right:0}:host([mode=horizontal]){height:fit-content}:host([mode=horizontal]) .label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin:auto auto var(--wcs-radio-gap);display:block}:host([mode=horizontal]) .label:empty::before{margin-bottom:0}:host([mode=option]){font-weight:var(--wcs-radio-option-text-font-weight-default) !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) .label{padding:var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);margin-bottom:0;color:var(--wcs-radio-option-text-color-default);white-space:nowrap;border-radius:var(--wcs-radio-option-border-radius);transition:background-color var(--wcs-radio-transition-duration) ease-in-out;background-color:var(--wcs-radio-option-background-color-default)}:host([mode=option]) input:focus-visible+.label{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:0;border-radius:var(--wcs-radio-border-radius)}:host([mode=option][disabled]) .label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-disabled)}:host([mode=option][disabled].checked) .label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-selected-disabled)}:host([mode=option].checked) .label{font-weight:var(--wcs-radio-option-text-font-weight-selected) !important;color:var(--wcs-radio-option-text-color-selected-default);background-color:var(--wcs-radio-option-background-color-selected-default)}:host([mode=option]:hover.checked:not([disabled])) .label{color:var(--wcs-radio-option-text-color-selected-hover);background-color:var(--wcs-radio-option-background-color-selected-hover)}:host([mode=option]:active.checked:not([disabled])) .label{color:var(--wcs-radio-option-text-color-selected-press);background-color:var(--wcs-radio-option-background-color-selected-press)}:host([mode=option]:hover:not(.checked):not([disabled])) .label{color:var(--wcs-radio-option-text-color-hover);background-color:var(--wcs-radio-option-background-color-hover);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover)}:host([mode=option]:active:not(.checked):not([disabled])) .label{color:var(--wcs-radio-option-text-color-press);background-color:var(--wcs-radio-option-background-color-press);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press)}";
 const WcsRadioStyle0 = radioCss;
 
-const RADIO_INHERITED_ATTRS = ['title'];
 const Radio = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.wcsRadioClick = createEvent(this, "wcsRadioClick", 7);
         this.wcsBlur = createEvent(this, "wcsBlur", 7);
         this.wcsFocus = createEvent(this, "wcsFocus", 7);
-        this.inputId = `wcs-rb-${radioButtonIds++}`;
-        this.inheritedAttributes = {};
+        this.handleClick = () => {
+            this.selectRadio();
+        };
+        this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.selectRadio();
+            }
+        };
         this.checked = false;
         this.radioTabIndex = -1;
         this.value = undefined;
@@ -36,7 +45,7 @@ const Radio = class {
         this.radioTabIndex = value;
     }
     async setAriaAttribute(attr, value) {
-        setOrRemoveAttribute(this.nativeRadio, attr, value);
+        setOrRemoveAttribute(this.el, attr, value);
     }
     onFocus(ev) {
         this.wcsFocus.emit(ev);
@@ -52,18 +61,6 @@ const Radio = class {
             // If no value was given we use the text content instead.
             this.value = this.el.innerText || '';
         }
-        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, RADIO_INHERITED_ATTRS));
-    }
-    onChange(_) {
-        if (this.disabled)
-            return;
-        // If the radio is unchecked, then the change represents its transition to the check state.
-        // Only emit the change event when going from unchecked to checked, like the native behavior.
-        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
-        if (!this.checked) {
-            this.checked = true;
-            this.emitRadioChangeEvent();
-        }
     }
     emitRadioChangeEvent() {
         this.wcsRadioClick.emit({
@@ -72,13 +69,20 @@ const Radio = class {
             value: this.value
         });
     }
+    selectRadio() {
+        if (this.disabled || this.checked) {
+            return;
+        }
+        this.checked = true;
+        // Only emit the change event when going from unchecked to checked, like the native behavior.
+        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
+        this.emitRadioChangeEvent();
+    }
     render() {
-        return (h(Host, { key: 'b753f4673fccbd2f0d7e1636be135da90e1850ef', slot: "option", tabIndex: this.disabled ? -1 : this.radioTabIndex, class: this.checked ? 'checked' : '' }, h("input", Object.assign({ key: '25ac2afe93bdde452db9226feb11587f76a4fd69', id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, ref: (el) => (this.nativeRadio = el) }, this.inheritedAttributes)), h("label", { key: '13b771ac257bcf81734cee12a85ffdf143e3c329', htmlFor: `${this.inputId}` }, this.label)));
+        return (h(Host, { key: '19c87ecc30754b5534fe6fd0c10540d1701d9742', slot: "option", role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : this.radioTabIndex, class: this.checked ? 'checked' : '', onClick: this.handleClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), onKeyDown: this.handleKeyDown.bind(this) }, h("span", { key: '4dcb066b114426a822fb46f225d96c499b24e628', class: "label" }, this.label)));
     }
-    static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
 };
-let radioButtonIds = 0;
 Radio.style = WcsRadioStyle0;
 
 export { Radio as wcs_radio };

package/dist/esm/wcs-radio.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-radio.entry.js","mappings":"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","names":[],"sources":["src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","src/components/radio/radio.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n\n    --wcs-radio-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    // region mode Radio\n    --wcs-radio-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-radio-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-radio-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-radio-text-color-hover: var(--wcs-semantic-color-text-primary);\n\n    --wcs-radio-checkmark-size: 1rem; // for now, we let raw value to let adjust the size based on base font size\n\n    --wcs-radio-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-radio-outline-color-focus: var(--wcs-semantic-color-border-focus-base); // outline color for focus ring\n\n    --wcs-radio-checkmark-border-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-radio-checkmark-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-radio-checkmark-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-radio-checkmark-border-color-disabled: var(--wcs-semantic-color-border-control-indicator-disabled);\n\n    --wcs-radio-checkmark-background-color-default: transparent;\n    --wcs-radio-checkmark-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-radio-checkmark-background-color-selected-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-radio-checkmark-background-color-selected-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-radio-checkmark-outline-distance-with-checkmark-circle: var(--wcs-semantic-spacing-small);\n    --wcs-radio-checkmark-outline-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-outline-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-radio-checkmark-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-radio-border-radius: var(--wcs-semantic-border-radius-base);\n    // endregion\n\n    // region mode Option\n    --wcs-radio-option-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-hover: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-press: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-default);\n\n    --wcs-radio-option-background-color-selected-default: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-radio-option-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-radio-option-background-color-selected-press: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-radio-option-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-radio-option-text-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-hover: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n\n    --wcs-radio-option-text-color-selected-default: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-radio-option-text-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-radio-option-text-color-selected-press: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-radio-option-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-radio-option-text-font-weight-default: var(--wcs-semantic-font-weight-roman);\n    --wcs-radio-option-text-font-weight-selected: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-radio-option-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-radio-option-border-width: var(--wcs-semantic-border-width-default);\n\n    --wcs-radio-option-border-color-hover: var(--wcs-semantic-color-border-action-secondary-hover);\n    --wcs-radio-option-border-color-press: var(--wcs-semantic-color-border-action-secondary-press);\n\n    --wcs-radio-option-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-right: var(--wcs-semantic-spacing-large);\n    --wcs-radio-option-padding-bottom: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-left: var(--wcs-semantic-spacing-large);\n    // endregion\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    input {\n        position: absolute;\n        opacity: 0;\n        height: 1px;\n        width: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n    }\n\n    label {\n        margin-bottom: 0;\n        color: var(--wcs-radio-text-color-default);\n        font-weight: var(--wcs-radio-text-font-weight-default) !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: var(--wcs-radio-checkmark-border-radius);\n            border: var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);\n            position: relative;\n            width: var(--wcs-radio-checkmark-size);\n            height: var(--wcs-radio-checkmark-size);\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-radio-checkmark-background-color-default);\n        }\n    }\n\n    input:focus-visible + label {\n        transition: none;\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius));\n    }\n}\n\n:host([disabled]) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n        cursor: not-allowed;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n        }\n    }\n}\n\n:host(:not([disabled])) {\n    label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio].checked),\n:host([mode=horizontal].checked) {\n    label {\n        color: var(--wcs-radio-text-color-selected);\n        font-weight: var(--wcs-radio-text-font-weight-selected) !important;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-selected);\n            background-color: var(--wcs-radio-checkmark-background-color-selected);\n            outline: solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);\n            outline-offset: calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle));\n        }\n    }\n}\n\n:host([mode=radio][disabled].checked),\n:host([mode=horizontal][disabled].checked) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-disabled);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled])),\n:host([mode=horizontal]:hover:not([disabled])) {\n    label {\n        color: var(--wcs-radio-text-color-hover);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-hover);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-hover);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled]):not(.checked)),\n:host([mode=horizontal]:hover:not([disabled]):not(.checked)) {\n    label:before {\n        background-color: var(--wcs-radio-checkmark-background-color-default);\n    }\n}\n\n:host([mode=radio]) {\n    label {\n        border: none;\n\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin-right: var(--wcs-radio-gap);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n\n        &:empty::before {\n            margin-right: 0;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    height: fit-content;\n\n    label {\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin: auto auto var(--wcs-radio-gap);\n            display: block;\n        }\n\n        &:empty::before {\n            margin-bottom: 0;\n        }\n    }\n}\n\n:host([mode=option]) {\n    font-weight: var(--wcs-radio-option-text-font-weight-default) !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    label {\n        padding: var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);\n        margin-bottom: 0;\n        color: var(--wcs-radio-option-text-color-default);\n        white-space: nowrap;\n        border-radius: var(--wcs-radio-option-border-radius);\n        transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n        background-color: var(--wcs-radio-option-background-color-default);\n    }\n\n    input:focus-visible + label {\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius), $outline-offset: 0);\n    }\n}\n\n:host([mode=option][disabled]) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-disabled);\n    }\n}\n\n:host([mode=option][disabled].checked) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-selected-disabled);\n    }\n}\n\n:host([mode=option].checked) {\n    label {\n        font-weight: var(--wcs-radio-option-text-font-weight-selected) !important;\n        color: var(--wcs-radio-option-text-color-selected-default);\n        background-color: var(--wcs-radio-option-background-color-selected-default);\n    }\n}\n\n:host([mode=option]:hover.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-hover);\n        background-color: var(--wcs-radio-option-background-color-selected-hover);\n    }\n}\n\n:host([mode=option]:active.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-press);\n        background-color: var(--wcs-radio-option-background-color-selected-press);\n    }\n}\n\n:host([mode=option]:hover:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-hover);\n        background-color: var(--wcs-radio-option-background-color-hover);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover);\n    }\n}\n\n:host([mode=option]:active:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-press);\n        background-color: var(--wcs-radio-option-background-color-press);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press);\n\n\n\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst RADIO_INHERITED_ATTRS = ['title'];\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    @Element() private el!: HTMLWcsRadioElement;\n    private nativeRadio!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked: boolean = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeRadio, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n        \n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, RADIO_INHERITED_ATTRS),\n        };\n    }\n    \n    private onChange(_: Event) {\n        if (this.disabled) return;\n\n        // If the radio is unchecked, then the change represents its transition to the check state.\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        if (!this.checked) {\n            this.checked = true;\n            this.emitRadioChangeEvent();\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}>\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked} // Initial checked state of native input\n                    disabled={this.disabled}\n                    onChange={this.onChange.bind(this)}\n                    onFocus={this.onFocus.bind(this)}\n                    onBlur={this.onBlur.bind(this)}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                    ref={(el) => (this.nativeRadio = el)}\n                    {...this.inheritedAttributes}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}
+{"file":"wcs-radio.entry.js","mappings":"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","names":[],"sources":["src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","src/components/radio/radio.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n\n    --wcs-radio-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    // region mode Radio\n    --wcs-radio-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-radio-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-radio-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-radio-text-color-hover: var(--wcs-semantic-color-text-primary);\n\n    --wcs-radio-checkmark-size: 1rem; // for now, we let raw value to let adjust the size based on base font size\n\n    --wcs-radio-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-radio-outline-color-focus: var(--wcs-semantic-color-border-focus-base); // outline color for focus ring\n\n    --wcs-radio-checkmark-border-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-radio-checkmark-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-radio-checkmark-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-radio-checkmark-border-color-disabled: var(--wcs-semantic-color-border-control-indicator-disabled);\n\n    --wcs-radio-checkmark-background-color-default: transparent;\n    --wcs-radio-checkmark-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-radio-checkmark-background-color-selected-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-radio-checkmark-background-color-selected-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-radio-checkmark-outline-distance-with-checkmark-circle: var(--wcs-semantic-spacing-small);\n    --wcs-radio-checkmark-outline-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-outline-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-radio-checkmark-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-radio-border-radius: var(--wcs-semantic-border-radius-base);\n    // endregion\n\n    // region mode Option\n    --wcs-radio-option-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-hover: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-press: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-default);\n\n    --wcs-radio-option-background-color-selected-default: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-radio-option-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-radio-option-background-color-selected-press: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-radio-option-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-radio-option-text-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-hover: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n\n    --wcs-radio-option-text-color-selected-default: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-radio-option-text-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-radio-option-text-color-selected-press: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-radio-option-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-radio-option-text-font-weight-default: var(--wcs-semantic-font-weight-roman);\n    --wcs-radio-option-text-font-weight-selected: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-radio-option-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-radio-option-border-width: var(--wcs-semantic-border-width-default);\n\n    --wcs-radio-option-border-color-hover: var(--wcs-semantic-color-border-action-secondary-hover);\n    --wcs-radio-option-border-color-press: var(--wcs-semantic-color-border-action-secondary-press);\n\n    --wcs-radio-option-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-right: var(--wcs-semantic-spacing-large);\n    --wcs-radio-option-padding-bottom: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-left: var(--wcs-semantic-spacing-large);\n    // endregion\n\n    /*\n    * DO NOT REMOVE:\n    * The native input is absolutely positioned.\n    * This `position: relative` makes `wcs-radio` its containing block.\n    * Without it, the input can be laid out relative to another ancestor higher in the DOM,\n    * so when the browser focuses the native control it may scroll the window unexpectedly.\n    */\n    position: relative;\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    input {\n        position: absolute;\n        opacity: 0;\n        height: 1px;\n        width: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n    }\n\n    .label {\n        margin-bottom: 0;\n        color: var(--wcs-radio-text-color-default);\n        font-weight: var(--wcs-radio-text-font-weight-default) !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: var(--wcs-radio-checkmark-border-radius);\n            border: var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);\n            position: relative;\n            width: var(--wcs-radio-checkmark-size);\n            height: var(--wcs-radio-checkmark-size);\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-radio-checkmark-background-color-default);\n        }\n    }\n}\n\n:host(:focus-visible) {\n    outline: none;\n\n    .label {\n        transition: none;\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius));\n    }\n}\n\n:host([disabled]) {\n    .label {\n        color: var(--wcs-radio-text-color-disabled);\n        cursor: not-allowed;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n        }\n    }\n}\n\n:host(:not([disabled])) {\n    .label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio].checked),\n:host([mode=horizontal].checked) {\n    .label {\n        color: var(--wcs-radio-text-color-selected);\n        font-weight: var(--wcs-radio-text-font-weight-selected) !important;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-selected);\n            background-color: var(--wcs-radio-checkmark-background-color-selected);\n            outline: solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);\n            outline-offset: calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle));\n        }\n    }\n}\n\n:host([mode=radio][disabled].checked),\n:host([mode=horizontal][disabled].checked) {\n    .label {\n        color: var(--wcs-radio-text-color-disabled);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-disabled);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled])),\n:host([mode=horizontal]:hover:not([disabled])) {\n    .label {\n        color: var(--wcs-radio-text-color-hover);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-hover);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-hover);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled]):not(.checked)),\n:host([mode=horizontal]:hover:not([disabled]):not(.checked)) {\n    .label:before {\n        background-color: var(--wcs-radio-checkmark-background-color-default);\n    }\n}\n\n:host([mode=radio]) {\n    .label {\n        border: none;\n\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin-right: var(--wcs-radio-gap);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n\n        &:empty::before {\n            margin-right: 0;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    height: fit-content;\n\n    .label {\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin: auto auto var(--wcs-radio-gap);\n            display: block;\n        }\n\n        &:empty::before {\n            margin-bottom: 0;\n        }\n    }\n}\n\n:host([mode=option]) {\n    font-weight: var(--wcs-radio-option-text-font-weight-default) !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    .label {\n        padding: var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);\n        margin-bottom: 0;\n        color: var(--wcs-radio-option-text-color-default);\n        white-space: nowrap;\n        border-radius: var(--wcs-radio-option-border-radius);\n        transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n        background-color: var(--wcs-radio-option-background-color-default);\n    }\n\n    input:focus-visible + .label {\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius), $outline-offset: 0);\n    }\n}\n\n:host([mode=option][disabled]) {\n    .label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-disabled);\n    }\n}\n\n:host([mode=option][disabled].checked) {\n    .label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-selected-disabled);\n    }\n}\n\n:host([mode=option].checked) {\n    .label {\n        font-weight: var(--wcs-radio-option-text-font-weight-selected) !important;\n        color: var(--wcs-radio-option-text-color-selected-default);\n        background-color: var(--wcs-radio-option-background-color-selected-default);\n    }\n}\n\n:host([mode=option]:hover.checked:not([disabled])) {\n    .label {\n        color: var(--wcs-radio-option-text-color-selected-hover);\n        background-color: var(--wcs-radio-option-background-color-selected-hover);\n    }\n}\n\n:host([mode=option]:active.checked:not([disabled])) {\n    .label {\n        color: var(--wcs-radio-option-text-color-selected-press);\n        background-color: var(--wcs-radio-option-background-color-selected-press);\n    }\n}\n\n:host([mode=option]:hover:not(.checked):not([disabled])) {\n    .label {\n        color: var(--wcs-radio-option-text-color-hover);\n        background-color: var(--wcs-radio-option-background-color-hover);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover);\n    }\n}\n\n:host([mode=option]:active:not(.checked):not([disabled])) {\n    .label {\n        color: var(--wcs-radio-option-text-color-press);\n        background-color: var(--wcs-radio-option-background-color-press);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press);\n\n\n\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: true\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    @Element() private readonly el!: HTMLWcsRadioElement;\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked: boolean = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.el, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    private selectRadio() {\n        if (this.disabled || this.checked) {\n            return;\n        }\n\n        this.checked = true;\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        this.emitRadioChangeEvent();\n    }\n\n    private readonly handleClick = () => {\n        this.selectRadio();\n    };\n\n    private readonly handleKeyDown = (event: KeyboardEvent) => {\n        if (this.disabled) return;\n\n        if (event.key === ' ' || event.key === 'Enter') {\n            event.preventDefault();\n            event.stopPropagation();\n            this.selectRadio();\n        }\n    };\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  role=\"radio\"\n                  aria-checked={this.checked ? 'true' : 'false'}\n                  aria-disabled={this.disabled ? 'true' : 'false'}\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}\n                  onClick={this.handleClick.bind(this)}\n                  onFocus={this.onFocus.bind(this)}\n                  onBlur={this.onBlur.bind(this)}\n                  onKeyDown={this.handleKeyDown.bind(this)}>\n                <span class=\"label\">{this.label}</span>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -1,9 +1,9 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-d9de61ce.js';
 import { S as SelectArrow } from './select-arrow-e62de386.js';
-import { A as generateUniqueId, B as compareLists, t as findItemLabel, i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute, C as isElement, d as isEnterKey, c as isSpaceKey } from './helpers-ece6a2d3.js';
-import { k as keyboardShortcutFromKeyboardEvent } from './keyboard-event-26b65ae5.js';
+import { z as generateUniqueId, A as compareLists, i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute, B as isElement, d as isEnterKey, c as isSpaceKey } from './helpers-2d73ee7c.js';
+import { k as keyboardShortcutFromKeyboardEvent } from './keyboard-event-3a0579d5.js';
 import { i as isFocusable } from './accessibility-069640cf.js';
-import { w as isEqual } from './isEqual-f2a07f4c.js';
+import { w as isEqual } from './isEqual-89e74e17.js';
 import { c as createPopper } from './popper-ac238961.js';
 
 /*! *****************************************************************************
@@ -5317,7 +5317,6 @@ const Select = class {
         this.wcsBlur = createEvent(this, "wcsBlur", 7);
         this.wcsFilterChange = createEvent(this, "wcsFilterChange", 7);
         this.inheritedAttributes = {};
-        this.selectId = `wcs-select-${selectIds++}`;
         this.optionsId = generateUniqueId("OPTIONS");
         this.expanded = false;
         this.size = 'm';
@@ -5433,7 +5432,7 @@ const Select = class {
                     this.displayText = opt.innerText;
                     this.lastModifiedOptionElement = opt;
                     if (this.autocomplete) {
-                        this.setAutocompleteValue(opt.innerText, false, false, shouldEmitFilterChangeEvent);
+                        this.setAutocompleteValue(opt.innerText, false, false, shouldEmitFilterChangeEvent, 'selection');
                     }
                 }
                 opt.selected = isSelected;
@@ -5482,12 +5481,6 @@ const Select = class {
             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 = findItemLabel(this.el);
-        if (this.labelElement) {
-            this.labelElement.id = this.selectId + "-lbl";
-        }
     }
     createPopperInstance() {
         return createPopper(this.controlEl, this.optionsEl, {
@@ -5503,9 +5496,19 @@ const Select = class {
         });
     }
     emitChange(newValue) {
-        this.wcsChange.emit({
-            value: newValue
-        });
+        if (this.serverMode) {
+            // In server mode with autocomplete, we don't know all the options, so we only emit the value(s) without the selected options elements
+            this.wcsChange.emit({
+                value: newValue,
+                selectedOptions: undefined
+            });
+        }
+        else {
+            this.wcsChange.emit({
+                value: newValue,
+                selectedOptions: Array.from(this.options).filter(opt => opt.selected)
+            });
+        }
     }
     replaceOptions_firefoxBefore63() {
         Array.from(this.el.querySelectorAll('wcs-select-option'))
@@ -5640,7 +5643,7 @@ const Select = class {
                             }
                             else {
                                 // Emit the filter change immediately so that server-side filtering can refresh options.
-                                this.setAutocompleteValue(event.value.option.displayText);
+                                this.setAutocompleteValue(event.value.option.displayText, false, false, true, 'selection');
                             }
                         }
                         this.emitChange(this.value);
@@ -6003,7 +6006,7 @@ const Select = class {
      * @param shouldEmitFilterChangeEvent
      * @private
      */
-    setAutocompleteValue(filter, isReset = false, fromUserInteraction = false, shouldEmitFilterChangeEvent = true) {
+    setAutocompleteValue(filter, isReset = false, fromUserInteraction = false, shouldEmitFilterChangeEvent = true, trigger = 'input') {
         var _a, _b;
         this.clearHighlightOnLastHighlightedOption();
         const newValueIsDifferentFromLastModifiedOption = this.lastModifiedOptionElement == null || ((_a = this.lastModifiedOptionElement) === null || _a === void 0 ? void 0 : _a.textContent) !== this.autocompleteValue;
@@ -6043,6 +6046,7 @@ const Select = class {
         if (shouldEmitFilterChangeEvent && valueHasChanged) {
             this.wcsFilterChange.emit({
                 value: filter,
+                trigger
             });
         }
     }
@@ -6074,23 +6078,21 @@ const Select = class {
     }
     render() {
         var _a;
-        const ariaLabelValue = `${this.labelElement ? this.labelElement.innerText : ''} ${this.hasValue ? this.displayText : ''}`.trimEnd();
         const noResultContainerId = 'no-result-container';
-        return (h(Host, Object.assign({ key: '5da08e1418d8e8a2f65295a86a4868357ac676cb', 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.autocomplete ? (this.disabled ? 'true' : null) : null, "aria-required": !this.autocomplete ? (this.required ? 'true' : 'false') : null, "aria-expanded": !this.autocomplete ? (this.expanded ? 'true' : 'false') : null, "aria-multiselectable": !this.autocomplete ? (this.multiple ? 'true' : 'false') : null, "aria-label": !this.autocomplete ? ariaLabelValue : null }), h("div", { key: '64bb5c04992a0ecf451a6ea5114bcb631f936555', class: "wcs-select-control" }, h("div", { key: '9279627148ef9bf1e8113df1dd97ab9d721f2f06', class: "wcs-select-value-container" }, this.hasValue
+        return (h(Host, Object.assign({ key: '279b7995229c2a45b8b414f30cfee105f0eab2d8', 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.autocomplete ? (this.disabled ? 'true' : null) : null, "aria-required": !this.autocomplete ? (this.required ? 'true' : 'false') : null, "aria-expanded": !this.autocomplete ? (this.expanded ? 'true' : 'false') : null, "aria-multiselectable": !this.autocomplete ? (this.multiple ? 'true' : 'false') : null }), h("div", { key: '15ed8bbc3f5c0606d6b7736b46011ddbfcc6b062', class: "wcs-select-control" }, h("div", { key: '1dd1571c60ffd8e2cc0757c9bd3ae80af7358c60', 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) }))
                     : (!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", Object.assign({ key: '97732eba53ac636b9f9e231ad6c86903599dd21b', class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabelValue, "aria-describedby": noResultContainerId, "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", autocomplete: "off", disabled: this.disabled, required: this.required, 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 }, this.inheritedAttributes))), h(SelectArrow, { key: '4546d670d107ad9bb496844ef6b4d2b1e7d333c4', up: this.expanded })), h("div", { key: '75eda1298dab81575144d561120290d804d84cce', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { key: '4de8ebd148df28d68c4163026562669ebfbc37b3', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
-            h("div", { key: '6ebeb7af554a9f3799658e7e3d58f0c1ac25f9f2', role: "alert", id: noResultContainerId, class: "noresult-container" }, h("slot", { key: '2c34abe1a89dc797f80944809457710e66d0336d', name: "filter-no-result" }, h("span", { key: '6e51c2870b926c593dbd53d87a99ef1beb989343' }, "Aucun r\u00E9sultat"))))));
+            : !this.autocomplete && h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && h("input", Object.assign({ key: '735693884598b203d30e0a0240e23c4f8d1838d7', class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-describedby": noResultContainerId, "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", autocomplete: "off", disabled: this.disabled, required: this.required, 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 }, this.inheritedAttributes))), h(SelectArrow, { key: 'f2f7a5b23ca98156a2d2a293e94789f6b2297607', up: this.expanded })), h("div", { key: '2e63bdb1c3ef3251119727455159c6f7a4b0ec76', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { key: '04dd36de24892a8e6ee70154c08c6ccde691ddb1', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
+            h("div", { key: '8cf1f1337afdca5d2b48590de8b665679bdfe080', role: "alert", id: noResultContainerId, class: "noresult-container" }, h("slot", { key: '8d5f7839e3a12d87030bf7cddbe62308e09bff87', name: "filter-no-result" }, h("span", { key: '766513c4ba50723baf1987bbb43c2abe2c1a9f43' }, "Aucun r\u00E9sultat"))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "value": ["onValueChangeHandler"]
     }; }
 };
-let selectIds = 0;
 Select.style = WcsSelectStyle0;
 
 const selectOptionCss = "wcs-select-option{--wcs-select-option-height:var(--wcs-semantic-size-m);--wcs-select-option-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-select-option-padding-vertical:0;--wcs-select-option-text-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-select-option-text-font-size:var(--wcs-semantic-font-size-base);--wcs-select-option-text-color-default:var(--wcs-semantic-color-text-primary);--wcs-select-option-text-color-focus:var(--wcs-semantic-color-text-primary);--wcs-select-option-text-color-hover:var(--wcs-semantic-color-text-primary);--wcs-select-option-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-select-option-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-select-option-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-select-option-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-select-option-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-select-option-background-color-selected:var(--wcs-semantic-color-background-action-secondary-selected-default);--wcs-select-option-background-color-selected-hover:var(--wcs-semantic-color-background-action-secondary-selected-hover);--wcs-select-option-background-color-selected-press:var(--wcs-semantic-color-background-action-secondary-selected-press);--wcs-select-option-background-color-selected-disabled:var(--wcs-semantic-color-background-action-secondary-selected-disabled);--wcs-select-option-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-select-option-border-style-focus:var(--wcs-semantic-border-style-focus-base);--wcs-select-option-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-select-option-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-select-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-select-option-checkbox-color:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-select-option-gap:var(--wcs-semantic-spacing-base);--wcs-select-option-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-select-option-gap);padding:var(--wcs-select-option-padding-vertical) var(--wcs-select-option-padding-horizontal);height:var(--wcs-select-option-height);cursor:pointer;user-select:none;font-weight:var(--wcs-select-option-text-font-weight);font-size:var(--wcs-select-option-text-font-size);color:var(--wcs-select-option-text-color-default);background-color:var(--wcs-select-option-background-color-default);transition-duration:var(--wcs-select-option-transition-duration);transition-property:background-color, color;transition-timing-function:ease;border-radius:var(--wcs-select-option-border-radius);overflow:hidden;white-space:nowrap}wcs-select-option:focus-visible{outline:var(--wcs-select-option-border-style-focus) var(--wcs-select-option-border-width-focus) var(--wcs-select-option-border-color-focus);outline-offset:calc(-1 * var(--wcs-select-option-border-width-focus))}wcs-select-option:focus{color:var(--wcs-select-option-text-color-focus);background-color:var(--wcs-select-option-background-color-focus)}wcs-select-option:hover{color:var(--wcs-select-option-text-color-hover);background-color:var(--wcs-select-option-background-color-hover)}wcs-select-option:active{background-color:var(--wcs-select-option-background-color-press)}wcs-select-option[disabled]{cursor:not-allowed;pointer-events:none;color:var(--wcs-select-option-text-color-disabled)}wcs-select-option[hidden]{display:none}wcs-select-option[selected]{color:var(--wcs-select-option-text-color-selected);background-color:var(--wcs-select-option-background-color-selected)}wcs-select-option[selected]:hover{background-color:var(--wcs-select-option-background-color-selected-hover)}wcs-select-option[selected]:active{background-color:var(--wcs-select-option-background-color-selected-press)}wcs-select-option[selected][disabled]{color:var(--wcs-select-option-text-color-disabled);background-color:var(--wcs-select-option-background-color-selected-disabled)}wcs-select-option[multiple] wcs-checkbox{pointer-events:none}wcs-select-option[multiple]:hover wcs-checkbox{--wcs-checkbox-border-color:var(--wcs-select-option-checkbox-color)}wcs-select-option[highlighted]{outline:var(--wcs-select-option-border-style-focus) var(--wcs-select-option-border-width-focus) var(--wcs-select-option-border-color-focus);outline-offset:calc(-1 * var(--wcs-select-option-border-width-focus))}wcs-select-option[highlighted] wcs-checkbox{--wcs-checkbox-border-color:var(--wcs-select-option-checkbox-color)}";
@@ -6142,8 +6144,8 @@ const SelectOption = class {
         }
     }
     render() {
-        return (h(Host, { key: '18a9f541ccf9757c1b4e9005ecd9ca98f40ced22', id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
-            h("wcs-checkbox", { key: 'aa89dc61bd7ddabf6efdf1f7b5fc6bc024f91ffd', tabindex: "-1", checked: this.selected, disabled: this.disabled }), h("slot", { key: 'fc59a661788d75fd7f172e8ef13f7360c2540552' })));
+        return (h(Host, { key: 'b5cec4bddeb2bc1779f3f8c596ca461e36465dcd', id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
+            h("wcs-checkbox", { key: '0ea4d06fdc650bc54fde89a33d4460660de7ef02', tabindex: "-1", checked: this.selected, disabled: this.disabled }), h("slot", { key: 'a8829170fe8eea04cb0f2e2fdcd160612368b3c9' })));
     }
     get el() { return getElement(this); }
 };