npm - wcs-core - Versions diffs - 7.5.1 → 7.7.0 - Mend

wcs-core 7.5.1 → 7.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (768) hide show

package/dist/cjs/wcs-radio.cjs.entry.js CHANGED Viewed

@@ -3,20 +3,29 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-2f1a8ddc.js');
+const helpers = require('./helpers-eaafd588.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) {
         index.registerInstance(this, hostRef);
         this.wcsRadioClick = index.createEvent(this, "wcsRadioClick", 7);
         this.wcsBlur = index.createEvent(this, "wcsBlur", 7);
         this.wcsFocus = index.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;
@@ -40,7 +49,7 @@ const Radio = class {
         this.radioTabIndex = value;
     }
     async setAriaAttribute(attr, value) {
-        helpers.setOrRemoveAttribute(this.nativeRadio, attr, value);
+        helpers.setOrRemoveAttribute(this.el, attr, value);
     }
     onFocus(ev) {
         this.wcsFocus.emit(ev);
@@ -56,18 +65,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({}, helpers.inheritAriaAttributes(this.el)), helpers.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({
@@ -76,13 +73,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 (index.h(index.Host, { key: 'b753f4673fccbd2f0d7e1636be135da90e1850ef', slot: "option", tabIndex: this.disabled ? -1 : this.radioTabIndex, class: this.checked ? 'checked' : '' }, index.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)), index.h("label", { key: '13b771ac257bcf81734cee12a85ffdf143e3c329', htmlFor: `${this.inputId}` }, this.label)));
+        return (index.h(index.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) }, index.h("span", { key: '4dcb066b114426a822fb46f225d96c499b24e628', class: "label" }, this.label)));
     }
-    static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
 };
-let radioButtonIds = 0;
 Radio.style = WcsRadioStyle0;
 exports.wcs_radio = Radio;

package/dist/cjs/wcs-radio.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-radio.entry.cjs.js","mappings":"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","names":["setOrRemoveAttribute","inheritAriaAttributes","inheritAttributes","h","Host"],"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}
1	+ {"file":"wcs-radio.entry.cjs.js","mappings":"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","names":["setOrRemoveAttribute","h","Host"],"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/cjs/wcs-select_2.cjs.entry.js CHANGED Viewed

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
 const selectArrow = require('./select-arrow-a8a47fe4.js');
-const helpers = require('./helpers-2f1a8ddc.js');
-const keyboardEvent = require('./keyboard-event-40ecdc27.js');
+const helpers = require('./helpers-eaafd588.js');
+const keyboardEvent = require('./keyboard-event-4890c60e.js');
 const accessibility = require('./accessibility-5f681a74.js');
-const isEqual = require('./isEqual-8a0a6936.js');
+const isEqual = require('./isEqual-be8e5a57.js');
 const popper = require('./popper-1b61df21.js');
 /*! *****************************************************************************
@@ -5321,7 +5321,6 @@ const Select = class {
         this.wcsBlur = index.createEvent(this, "wcsBlur", 7);
         this.wcsFilterChange = index.createEvent(this, "wcsFilterChange", 7);
         this.inheritedAttributes = {};
-        this.selectId = `wcs-select-${selectIds++}`;
         this.optionsId = helpers.generateUniqueId("OPTIONS");
         this.expanded = false;
         this.size = 'm';
@@ -5437,7 +5436,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;
@@ -5486,12 +5485,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 = helpers.findItemLabel(this.el);
-        if (this.labelElement) {
-            this.labelElement.id = this.selectId + "-lbl";
-        }
     }
     createPopperInstance() {
         return popper.createPopper(this.controlEl, this.optionsEl, {
@@ -5507,9 +5500,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'))
@@ -5644,7 +5647,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);
@@ -6007,7 +6010,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;
@@ -6047,6 +6050,7 @@ const Select = class {
         if (shouldEmitFilterChangeEvent && valueHasChanged) {
             this.wcsFilterChange.emit({
                 value: filter,
+                trigger
             });
         }
     }
@@ -6078,23 +6082,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 (index.h(index.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 }), index.h("div", { key: '64bb5c04992a0ecf451a6ea5114bcb631f936555', class: "wcs-select-control" }, index.h("div", { key: '9279627148ef9bf1e8113df1dd97ab9d721f2f06', class: "wcs-select-value-container" }, this.hasValue
+        return (index.h(index.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 }), index.h("div", { key: '15ed8bbc3f5c0606d6b7736b46011ddbfcc6b062', class: "wcs-select-control" }, index.h("div", { key: '1dd1571c60ffd8e2cc0757c9bd3ae80af7358c60', 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) }))
                     : (!this.autocomplete || this.autocomplete && this.multiple) &&
                         index.h("label", { class: "wcs-select-value" }, this.displayText))
-            : !this.autocomplete && index.h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && index.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))), index.h(selectArrow.SelectArrow, { key: '4546d670d107ad9bb496844ef6b4d2b1e7d333c4', up: this.expanded })), index.h("div", { key: '75eda1298dab81575144d561120290d804d84cce', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, index.h("slot", { key: '4de8ebd148df28d68c4163026562669ebfbc37b3', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
-            index.h("div", { key: '6ebeb7af554a9f3799658e7e3d58f0c1ac25f9f2', role: "alert", id: noResultContainerId, class: "noresult-container" }, index.h("slot", { key: '2c34abe1a89dc797f80944809457710e66d0336d', name: "filter-no-result" }, index.h("span", { key: '6e51c2870b926c593dbd53d87a99ef1beb989343' }, "Aucun r\u00E9sultat"))))));
+            : !this.autocomplete && index.h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && index.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))), index.h(selectArrow.SelectArrow, { key: 'f2f7a5b23ca98156a2d2a293e94789f6b2297607', up: this.expanded })), index.h("div", { key: '2e63bdb1c3ef3251119727455159c6f7a4b0ec76', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, index.h("slot", { key: '04dd36de24892a8e6ee70154c08c6ccde691ddb1', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
+            index.h("div", { key: '8cf1f1337afdca5d2b48590de8b665679bdfe080', role: "alert", id: noResultContainerId, class: "noresult-container" }, index.h("slot", { key: '8d5f7839e3a12d87030bf7cddbe62308e09bff87', name: "filter-no-result" }, index.h("span", { key: '766513c4ba50723baf1987bbb43c2abe2c1a9f43' }, "Aucun r\u00E9sultat"))))));
     }
     get el() { return index.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)}";
@@ -6146,8 +6148,8 @@ const SelectOption = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '18a9f541ccf9757c1b4e9005ecd9ca98f40ced22', id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
-            index.h("wcs-checkbox", { key: 'aa89dc61bd7ddabf6efdf1f7b5fc6bc024f91ffd', tabindex: "-1", checked: this.selected, disabled: this.disabled }), index.h("slot", { key: 'fc59a661788d75fd7f172e8ef13f7360c2540552' })));
+        return (index.h(index.Host, { key: 'b5cec4bddeb2bc1779f3f8c596ca461e36465dcd', id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
+            index.h("wcs-checkbox", { key: '0ea4d06fdc650bc54fde89a33d4460660de7ef02', tabindex: "-1", checked: this.selected, disabled: this.disabled }), index.h("slot", { key: 'a8829170fe8eea04cb0f2e2fdcd160612368b3c9' })));
     }
     get el() { return index.getElement(this); }
 };