wcs-core 7.1.0 → 7.2.0

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

@@ -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 = 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({ mutable: true, reflect: true }) disabled = 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.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}

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

@@ -5281,7 +5281,7 @@ function getActionForKeyboardEvent(event, currentState, type) {
     return [];
 }
 
-const selectCss = ":host{--wcs-select-ligther-percentage:40;--wcs-select-control-border-radius:var(--wcs-semantic-border-radius-base);--wcs-select-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-select-value-color:var(--wcs-semantic-color-text-primary);--wcs-select-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-select-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-select-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-select-options-padding:var(--wcs-semantic-spacing-base-150);--wcs-select-control-line-height:var(--wcs-semantic-font-line-height-large);--wcs-select-control-background-color:var(--wcs-semantic-color-background-control-default);--wcs-select-control-arrow-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-select-control-arrow-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-select-control-chips-gap:var(--wcs-semantic-spacing-small);--wcs-select-control-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-select-control-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-select-control-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-select-control-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-select-control-border-style-default:solid;--wcs-select-control-border-style-error:solid;--wcs-select-control-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-select-control-border-width-default:var(--wcs-semantic-border-width-default);--wcs-select-control-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-select-control-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-select-control-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-select-control-height:var(--wcs-select-control-height-m);--wcs-select-control-height-m:var(--wcs-semantic-size-m);--wcs-select-control-height-l:var(--wcs-semantic-size-l);--wcs-internal-select-chip-size:var(--wcs-semantic-size-s);--wcs-select-control-font-size:var(--wcs-select-control-font-size-m, 1rem);--wcs-select-control-font-size-m:var(--wcs-semantic-font-size-m);--wcs-select-control-font-size-l:var(--wcs-semantic-font-size-l);--wcs-select-overlay-max-height:360px;--wcs-select-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-select-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-select-overlay-border-color:var(--wcs-semantic-color-border-secondary);--wcs-select-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-select-control-chip-color-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-select-control-chip-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-select-control-chip-background-color-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-select-control-chip-background-color-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-select-control-chip-padding-vertical:var(--wcs-semantic-spacing-small);--wcs-select-control-chip-padding-horizontal:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-select-control-chip-line-height:var(--wcs-semantic-font-line-height-large);--wcs-select-control-chip-border-radius:var(--wcs-semantic-border-radius-base);--wcs-select-control-autocomplete-padding-vertical-m:var(--wcs-semantic-spacing-small);--wcs-select-control-autocomplete-padding-vertical-l:var(--wcs-semantic-spacing-small);--wcs-select-internal-noresult-padding-horizontal:var(--wcs-semantic-spacing-base);display:block;min-height:var(--wcs-select-control-height);position:relative;outline:none;user-select:none;box-sizing:border-box}:host svg{flex-shrink:0}:host .wcs-select-control{min-height:var(--wcs-select-control-height);outline:var(--wcs-select-control-border-width-default) var(--wcs-select-control-border-style-default) var(--wcs-select-control-border-color-default);outline-offset:calc(var(--wcs-select-control-border-width-default) * -1)}:host .arrow{fill:var(--wcs-select-control-arrow-color)}:host .chip{fill:var(--wcs-select-control-chip-color-default);opacity:calc((100 - var(--wcs-select-ligther-percentage)) / 100)}:host .chip:hover{opacity:100}.wcs-select-control{box-sizing:border-box;display:flex;align-items:center;background-color:var(--wcs-select-control-background-color);border-radius:var(--wcs-select-control-border-radius);outline:var(--wcs-select-control-border-color-default) solid var(--wcs-select-control-border-width-default);outline-offset:calc(var(--wcs-select-control-border-width-default) * -1);font-size:var(--wcs-select-control-font-size, 1rem);line-height:var(--wcs-select-control-line-height);cursor:pointer;padding-left:var(--wcs-select-control-padding-horizontal-m);padding-right:calc(var(--wcs-select-control-padding-horizontal-m) - 4px)}label{cursor:pointer;transition:color 125ms ease-in;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label.wcs-select-placeholder{color:var(--wcs-select-placeholder-color);font-style:var(--wcs-select-placeholder-font-style);font-weight:var(--wcs-select-placeholder-font-weight)}label.wcs-select-value{color:var(--wcs-select-value-color);font-style:normal;font-weight:var(--wcs-select-value-font-weight)}label::after{content:\"\";padding:1px}.wcs-select-value-container{max-width:calc(100% - (24px + var(--wcs-semantic-spacing-base)));padding-right:8px;display:flex;flex-direction:row;gap:var(--wcs-select-control-chips-gap);align-items:center;flex-wrap:wrap}.wcs-select-chip{box-sizing:border-box;height:var(--wcs-internal-select-chip-size);line-height:var(--wcs-select-control-chip-line-height);color:var(--wcs-select-control-chip-color-default);background-color:var(--wcs-select-control-chip-background-color-default);border-radius:var(--wcs-select-control-chip-border-radius);display:flex;align-items:center;padding:var(--wcs-select-control-chip-padding-vertical) var(--wcs-select-control-chip-padding-horizontal);overflow:initial;z-index:1}.wcs-select-options{display:none;position:absolute;z-index:999999999;border:solid var(--wcs-select-overlay-border-width) var(--wcs-select-overlay-border-color);border-radius:var(--wcs-select-overlay-border-radius);max-height:var(--wcs-select-overlay-max-height);overflow-y:auto;width:calc(100% - (2 * var(--wcs-select-overlay-border-width) + 2 * var(--wcs-select-options-padding)));padding:var(--wcs-select-options-padding);background-color:var(--wcs-select-overlay-background-color)}:host(.expanded){outline-width:var(--wcs-select-control-border-width-focus)}:host(.expanded) .wcs-select-control{outline:var(--wcs-select-control-border-width-focus) var(--wcs-select-control-border-style-focus) var(--wcs-select-control-border-color-focus);outline-offset:calc(var(--wcs-select-control-border-width-focus) * -1)}:host(.expanded) .wcs-select-options{display:block}:host([aria-invalid=true]) .wcs-select-control{outline-style:var(--wcs-select-control-border-style-error);outline-color:var(--wcs-select-control-border-color-error)}:host(:not(.expanded):focus-visible){outline-width:var(--wcs-select-control-border-width-focus)}:host(:not(.expanded):focus-visible) .wcs-select-control{outline:var(--wcs-select-control-border-width-focus) var(--wcs-select-control-border-style-focus) var(--wcs-select-control-border-color-focus);outline-offset:calc(var(--wcs-select-control-border-width-focus) * -1)}:host([disabled]){cursor:not-allowed;--wcs-select-control-background-color:var(--wcs-semantic-color-background-control-disabled)}:host([disabled]) .wcs-select-control{outline-style:var(--wcs-select-control-border-style-default);outline-color:var(--wcs-select-control-border-color-disabled)}:host([disabled]) .wcs-select-control,:host([disabled]) label{cursor:default;pointer-events:none}:host([disabled]) label{color:var(--wcs-select-text-color-disabled)}:host([disabled]) .arrow{fill:var(--wcs-select-control-arrow-color-disabled)}:host([disabled]) .wcs-select-chip{color:var(--wcs-select-control-chip-color-disabled);background-color:var(--wcs-select-control-chip-background-color-disabled)}:host([disabled]) .chip{fill:var(--wcs-select-control-chip-color-disabled)}:host([size=m]){--wcs-select-control-font-size:var(--wcs-select-control-font-size-m);--wcs-select-control-height:var(--wcs-select-control-height-m);--wcs-internal-select-chip-size:var(--wcs-select-chip-size-m)}:host([size=m]) .wcs-select-control{padding-left:var(--wcs-select-control-padding-horizontal-m);padding-right:calc(var(--wcs-select-control-padding-horizontal-m) - 4px)}:host([size=m]):host([autocomplete]) .autocomplete-field{height:calc(var(--wcs-select-control-height) - var(--wcs-select-control-autocomplete-padding-vertical-m) * 2)}:host([size=m]):host([autocomplete]) .wcs-select-value-container{padding-top:var(--wcs-select-control-autocomplete-padding-vertical-m);padding-bottom:var(--wcs-select-control-autocomplete-padding-vertical-m)}:host([size=l]){--wcs-select-control-font-size:var(--wcs-select-control-font-size-l);--wcs-select-control-height:var(--wcs-select-control-height-l);--wcs-internal-select-chip-size:var(--wcs-select-chip-size-l)}:host([size=l]) .wcs-select-control{padding-left:var(--wcs-select-control-padding-horizontal-l);padding-right:calc(var(--wcs-select-control-padding-horizontal-l) - 4px)}:host([size=l]):host([autocomplete]) .autocomplete-field{height:calc(var(--wcs-select-control-height) - var(--wcs-select-control-autocomplete-padding-vertical-l) * 2)}:host([size=l]):host([autocomplete]) .wcs-select-value-container{padding-top:var(--wcs-select-control-autocomplete-padding-vertical-l);padding-bottom:var(--wcs-select-control-autocomplete-padding-vertical-l)}:host([chips]) .wcs-select-control{flex-wrap:wrap}:host([chips]) .wcs-select-value-container{margin-top:4px;margin-bottom:4px}:host([autocomplete]) .wcs-select-value-container{margin:0;width:100%}:host([autocomplete]) input{font:unset;background-color:transparent;outline:none;border:none;padding:unset;color:var(--wcs-select-value-color);font-weight:var(--wcs-select-value-font-weight) !important;font-size:var(--wcs-select-control-font-size);line-height:inherit}:host([autocomplete]) input::placeholder{color:var(--wcs-select-placeholder-color);opacity:1;font-weight:var(--wcs-select-placeholder-font-weight);font-style:var(--wcs-select-placeholder-font-style)}:host([autocomplete]:focus-within) .wcs-select-control{outline:var(--wcs-select-control-border-width-focus) var(--wcs-select-control-border-style-focus) var(--wcs-select-control-border-color-focus);outline-offset:calc(var(--wcs-select-control-border-width-focus) * -1)}.autocomplete-field{width:0;min-width:50px;flex-grow:1}.noresult-container{padding-left:var(--wcs-select-internal-noresult-padding-horizontal);padding-right:var(--wcs-select-internal-noresult-padding-horizontal);display:flex;flex-direction:row;align-items:center;height:var(--wcs-select-control-height)}";
+const selectCss = ":host{--wcs-select-ligther-percentage:40;--wcs-select-control-border-radius:var(--wcs-semantic-border-radius-base);--wcs-select-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-select-value-color:var(--wcs-semantic-color-text-primary);--wcs-select-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-select-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-select-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-select-options-padding:var(--wcs-semantic-spacing-base-150);--wcs-select-control-line-height:var(--wcs-semantic-font-line-height-large);--wcs-select-control-background-color:var(--wcs-semantic-color-background-control-default);--wcs-select-control-arrow-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-select-control-arrow-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-select-control-chips-gap:var(--wcs-semantic-spacing-small);--wcs-select-control-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-select-control-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-select-control-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-select-control-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-select-control-border-style-default:solid;--wcs-select-control-border-style-error:solid;--wcs-select-control-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-select-control-border-width-default:var(--wcs-semantic-border-width-default);--wcs-select-control-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-select-control-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-select-control-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-select-control-height:var(--wcs-select-control-height-m);--wcs-select-control-height-m:var(--wcs-semantic-size-m);--wcs-select-control-height-l:var(--wcs-semantic-size-l);--wcs-internal-select-chip-size:var(--wcs-semantic-size-s);--wcs-select-control-font-size:var(--wcs-select-control-font-size-m, 1rem);--wcs-select-control-font-size-m:var(--wcs-semantic-font-size-m);--wcs-select-control-font-size-l:var(--wcs-semantic-font-size-l);--wcs-select-overlay-max-height:360px;--wcs-select-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-select-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-select-overlay-border-color:var(--wcs-semantic-color-border-secondary);--wcs-select-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-select-control-chip-color-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-select-control-chip-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-select-control-chip-background-color-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-select-control-chip-background-color-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-select-control-chip-padding-vertical:var(--wcs-semantic-spacing-small);--wcs-select-control-chip-padding-horizontal:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-select-control-chip-line-height:var(--wcs-semantic-font-line-height-large);--wcs-select-control-chip-border-radius:var(--wcs-semantic-border-radius-base);--wcs-select-control-autocomplete-padding-vertical-m:var(--wcs-semantic-spacing-small);--wcs-select-control-autocomplete-padding-vertical-l:var(--wcs-semantic-spacing-small);--wcs-select-internal-noresult-padding-horizontal:var(--wcs-semantic-spacing-base);display:block;min-height:var(--wcs-select-control-height);position:relative;outline:none;user-select:none;box-sizing:border-box}:host svg{flex-shrink:0}:host .wcs-select-control{min-height:var(--wcs-select-control-height);outline:var(--wcs-select-control-border-width-default) var(--wcs-select-control-border-style-default) var(--wcs-select-control-border-color-default);outline-offset:calc(var(--wcs-select-control-border-width-default) * -1)}:host .arrow{fill:var(--wcs-select-control-arrow-color)}:host .chip{fill:var(--wcs-select-control-chip-color-default);opacity:calc((100 - var(--wcs-select-ligther-percentage)) / 100)}:host .chip:hover{opacity:100}.wcs-select-control{box-sizing:border-box;display:flex;align-items:center;background-color:var(--wcs-select-control-background-color);border-radius:var(--wcs-select-control-border-radius);outline:var(--wcs-select-control-border-color-default) solid var(--wcs-select-control-border-width-default);outline-offset:calc(var(--wcs-select-control-border-width-default) * -1);font-size:var(--wcs-select-control-font-size, 1rem);line-height:var(--wcs-select-control-line-height);cursor:pointer;padding-left:var(--wcs-select-control-padding-horizontal-m);padding-right:calc(var(--wcs-select-control-padding-horizontal-m) - 4px)}label{cursor:pointer;transition:color 125ms ease-in;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label.wcs-select-placeholder{color:var(--wcs-select-placeholder-color);font-style:var(--wcs-select-placeholder-font-style);font-weight:var(--wcs-select-placeholder-font-weight)}label.wcs-select-value{color:var(--wcs-select-value-color);font-style:normal;font-weight:var(--wcs-select-value-font-weight)}label::after{content:\"\";padding:1px}.wcs-select-value-container{max-width:calc(100% - (24px + var(--wcs-semantic-spacing-base)));padding-right:8px;display:flex;flex-direction:row;gap:var(--wcs-select-control-chips-gap);align-items:center;flex-wrap:wrap}.wcs-select-chip{box-sizing:border-box;height:var(--wcs-internal-select-chip-size);line-height:var(--wcs-select-control-chip-line-height);color:var(--wcs-select-control-chip-color-default);background-color:var(--wcs-select-control-chip-background-color-default);border-radius:var(--wcs-select-control-chip-border-radius);display:flex;align-items:center;padding:var(--wcs-select-control-chip-padding-vertical) var(--wcs-select-control-chip-padding-horizontal);overflow:initial;z-index:1}.wcs-select-options{display:none;position:absolute;z-index:999999999;border:solid var(--wcs-select-overlay-border-width) var(--wcs-select-overlay-border-color);border-radius:var(--wcs-select-overlay-border-radius);max-height:var(--wcs-select-overlay-max-height);overflow-y:auto;width:calc(100% - (2 * var(--wcs-select-overlay-border-width) + 2 * var(--wcs-select-options-padding)));padding:var(--wcs-select-options-padding);background-color:var(--wcs-select-overlay-background-color)}:host(.expanded){outline-width:var(--wcs-select-control-border-width-focus)}:host(.expanded) .wcs-select-control{outline:var(--wcs-select-control-border-width-focus) var(--wcs-select-control-border-style-focus) var(--wcs-select-control-border-color-focus);outline-offset:calc(var(--wcs-select-control-border-width-focus) * -1)}:host(.expanded) .wcs-select-options{display:block}:host([aria-invalid=true]) .wcs-select-control,:host([autocomplete]):has(input[aria-invalid=true]) .wcs-select-control{outline-style:var(--wcs-select-control-border-style-error);outline-color:var(--wcs-select-control-border-color-error)}:host(:not(.expanded):focus-visible){outline-width:var(--wcs-select-control-border-width-focus)}:host(:not(.expanded):focus-visible) .wcs-select-control{outline:var(--wcs-select-control-border-width-focus) var(--wcs-select-control-border-style-focus) var(--wcs-select-control-border-color-focus);outline-offset:calc(var(--wcs-select-control-border-width-focus) * -1)}:host([disabled]){cursor:not-allowed;--wcs-select-control-background-color:var(--wcs-semantic-color-background-control-disabled)}:host([disabled]) .wcs-select-control{outline-style:var(--wcs-select-control-border-style-default);outline-color:var(--wcs-select-control-border-color-disabled)}:host([disabled]) .wcs-select-control,:host([disabled]) label{cursor:default;pointer-events:none}:host([disabled]) label{color:var(--wcs-select-text-color-disabled)}:host([disabled]) .arrow{fill:var(--wcs-select-control-arrow-color-disabled)}:host([disabled]) .wcs-select-chip{color:var(--wcs-select-control-chip-color-disabled);background-color:var(--wcs-select-control-chip-background-color-disabled)}:host([disabled]) .chip{fill:var(--wcs-select-control-chip-color-disabled)}:host([size=m]){--wcs-select-control-font-size:var(--wcs-select-control-font-size-m);--wcs-select-control-height:var(--wcs-select-control-height-m);--wcs-internal-select-chip-size:var(--wcs-select-chip-size-m)}:host([size=m]) .wcs-select-control{padding-left:var(--wcs-select-control-padding-horizontal-m);padding-right:calc(var(--wcs-select-control-padding-horizontal-m) - 4px)}:host([size=m]):host([autocomplete]) .autocomplete-field{height:calc(var(--wcs-select-control-height) - var(--wcs-select-control-autocomplete-padding-vertical-m) * 2)}:host([size=m]):host([autocomplete]) .wcs-select-value-container{padding-top:var(--wcs-select-control-autocomplete-padding-vertical-m);padding-bottom:var(--wcs-select-control-autocomplete-padding-vertical-m)}:host([size=l]){--wcs-select-control-font-size:var(--wcs-select-control-font-size-l);--wcs-select-control-height:var(--wcs-select-control-height-l);--wcs-internal-select-chip-size:var(--wcs-select-chip-size-l)}:host([size=l]) .wcs-select-control{padding-left:var(--wcs-select-control-padding-horizontal-l);padding-right:calc(var(--wcs-select-control-padding-horizontal-l) - 4px)}:host([size=l]):host([autocomplete]) .autocomplete-field{height:calc(var(--wcs-select-control-height) - var(--wcs-select-control-autocomplete-padding-vertical-l) * 2)}:host([size=l]):host([autocomplete]) .wcs-select-value-container{padding-top:var(--wcs-select-control-autocomplete-padding-vertical-l);padding-bottom:var(--wcs-select-control-autocomplete-padding-vertical-l)}:host([chips]) .wcs-select-control{flex-wrap:wrap}:host([chips]) .wcs-select-value-container{margin-top:4px;margin-bottom:4px}:host([autocomplete]) .wcs-select-value-container{margin:0;width:100%}:host([autocomplete]) input{font:unset;background-color:transparent;outline:none;border:none;padding:unset;color:var(--wcs-select-value-color);font-weight:var(--wcs-select-value-font-weight) !important;font-size:var(--wcs-select-control-font-size);line-height:inherit}:host([autocomplete]) input::placeholder{color:var(--wcs-select-placeholder-color);opacity:1;font-weight:var(--wcs-select-placeholder-font-weight);font-style:var(--wcs-select-placeholder-font-style)}:host([autocomplete]:focus-within) .wcs-select-control{outline:var(--wcs-select-control-border-width-focus) var(--wcs-select-control-border-style-focus) var(--wcs-select-control-border-color-focus);outline-offset:calc(var(--wcs-select-control-border-width-focus) * -1)}.autocomplete-field{width:0;min-width:50px;flex-grow:1}.noresult-container{padding-left:var(--wcs-select-internal-noresult-padding-horizontal);padding-right:var(--wcs-select-internal-noresult-padding-horizontal);display:flex;flex-direction:row;align-items:center;height:var(--wcs-select-control-height)}";
 const WcsSelectStyle0 = selectCss;
 
 const SELECT_MACHINE_CONFIG = {
@@ -5429,7 +5429,7 @@ const Select = class {
                     this.displayText = opt.innerText;
                     this.lastModifiedOptionElement = opt;
                     if (this.autocomplete) {
-                        this.autocompleteValue = opt.innerText;
+                        this.setAutocompleteValue(opt.innerText);
                     }
                 }
                 opt.selected = isSelected;
@@ -5446,7 +5446,7 @@ const Select = class {
         if (this.autocomplete) {
             // When need to reset the internal filter state of the component as the mutation of 
             // autocompleteValue from the code doesn't call onAutocompleteInputEvent method.
-            this.handleAutocompleteValueChange('', true);
+            this.setAutocompleteValue('', true);
         }
         this.options.forEach((opt) => {
             opt.selected = false;
@@ -5571,7 +5571,7 @@ const Select = class {
                             // Indeed, we have to tell the component to take the current filter state manually at the 
                             // opening (because the input event of the autocomplete field is not fired at this point).
                             if (this.autocompleteValue && this.autocompleteValue !== '') {
-                                this.handleAutocompleteValueChange(this.autocompleteValue);
+                                this.setAutocompleteValue(this.autocompleteValue);
                             }
                         }
                         this.clearHighlightOnLastHighlightedOption();
@@ -5960,11 +5960,17 @@ const Select = class {
     onAutocompleteInputEvent(e) {
         var _a;
         const filter = (_a = this.autocompleteInput.value) !== null && _a !== void 0 ? _a : '';
-        this.handleAutocompleteValueChange(filter);
+        this.setAutocompleteValue(filter);
         // Avoid the inputEvent event to bubble and be emitted, we rather use wcsFilterChange in this case :
         e.stopPropagation();
     }
-    handleAutocompleteValueChange(filter, isReset = false) {
+    /**
+     * Set the autocomplete value and open the select if needed.
+     * @param filter - The new filter value
+     * @param isReset - If true, the filter is reset and the select is closed
+     * @private
+     */
+    setAutocompleteValue(filter, isReset = false) {
         var _a, _b;
         this.clearHighlightOnLastHighlightedOption();
         const newValueIsDifferentFromLastModifiedOption = this.lastModifiedOptionElement == null || ((_a = this.lastModifiedOptionElement) === null || _a === void 0 ? void 0 : _a.textContent) !== this.autocompleteValue;
@@ -6036,14 +6042,15 @@ const Select = class {
     render() {
         var _a;
         const ariaLabelValue = `${this.labelElement ? this.labelElement.innerText : ''} ${this.hasValue ? this.displayText : ''}`.trimEnd();
-        return (index.h(index.Host, Object.assign({ key: '1fb232b49c0c6982f0fdb25f40b9cbc0b5a4feba', 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: '1ffb794dad6a5047bda91a8d8a192542be53807e', class: "wcs-select-control" }, index.h("div", { key: '4a6eb4aee396013cb385c0747a64f5b734cdb671', class: "wcs-select-value-container" }, this.hasValue
+        const noResultContainerId = 'no-result-container';
+        return (index.h(index.Host, Object.assign({ key: '6a973d4f68de6f668fda8b17de1da78b94076dc0', 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: '190343789a5d2b4227b4a9822348aa087b4bbbad', class: "wcs-select-control" }, index.h("div", { key: '2f61ddd11d08bd25d8acf00ecfdced4a97a33320', 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: '347b45243c453e7c7b9295091107a86953a045e5', class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabelValue, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": this.optionsId, "aria-owns": this.optionsId, "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-autocomplete": "list", autocomplete: "off", disabled: this.disabled, required: this.required, onBlur: (e) => this.onAutocompleteFieldBlur(e), placeholder: ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) ? null : this.placeholder, onInput: (e) => this.onAutocompleteInputEvent(e), ref: el => this.autocompleteInput = el }, this.inheritedAttributes))), index.h(selectArrow.SelectArrow, { key: 'a7465cde16a44865b879d4c69de0fbdba0ab5279', up: this.expanded })), index.h("div", { key: 'dcd17dd6ca295aa4d3cc0e0e4e081cae36d2390e', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, index.h("slot", { key: '2d6ff245cdf496a3b8335fd3896a226209117717', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
-            index.h("div", { key: '26b9e2afd3db161f4c8be2d974825c8be68362d8', class: "noresult-container" }, index.h("slot", { key: '80558760b864f00666398afd6c413cd5e85e660f', name: "filter-no-result" }, index.h("span", { key: 'ba460bf80f8cc3127774bf19db6742766169727a' }, "Aucun r\u00E9sultat"))))));
+            : !this.autocomplete && index.h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && index.h("input", Object.assign({ key: '7f2fc76276628b45ebcbcb40f64a82acafa5e192', 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, onBlur: (e) => this.onAutocompleteFieldBlur(e), placeholder: ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) ? null : this.placeholder, onInput: (e) => this.onAutocompleteInputEvent(e), ref: el => this.autocompleteInput = el }, this.inheritedAttributes))), index.h(selectArrow.SelectArrow, { key: 'a6075fc5a325bc1e19cc3d62ddbffb8a3409d454', up: this.expanded })), index.h("div", { key: '36a6ea6029659db97f174c12a4a5ff3c4c0bfd69', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, index.h("slot", { key: '3a02c19f0b77c98807a684ae77f2612c422cb096', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
+            index.h("div", { key: '82ecd4b70ed11d8497e9d5d3aea0c3c95f20ec36', role: "alert", id: noResultContainerId, class: "noresult-container" }, index.h("slot", { key: '607e7d9c3c112e64218d2170ca4e07aaf5cbd25c', name: "filter-no-result" }, index.h("span", { key: 'da3800fefd8f57c0d7b62e261933e3293bea2161' }, "Aucun r\u00E9sultat"))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -6102,8 +6109,8 @@ const SelectOption = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f23b48f3dbf1219b02651cf96687762cd04670fd', id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
-            index.h("wcs-checkbox", { key: '78a67e83750518e01bab218efc605b7414224cc6', tabindex: "-1", checked: this.selected, disabled: this.disabled }), index.h("slot", { key: 'db2f9f6ef1a341070dac82b570308e08b852460d' })));
+        return (index.h(index.Host, { key: '8e2f93d1db10d33df62a34b1f9e62a948a78424e', id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
+            index.h("wcs-checkbox", { key: '3af49da773954213d7f2b64c4a2f8fd7114b6a24', tabindex: "-1", checked: this.selected, disabled: this.disabled }), index.h("slot", { key: '3e5267f2626863b13bbcab46f98b4eacfa90c83f' })));
     }
     get el() { return index.getElement(this); }
 };