npm - wcs-core - Versions diffs - 7.0.0 → 7.2.0 - Mend

wcs-core 7.0.0 → 7.2.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 (664) hide show

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

	@@ -1 +1 @@
1	- {"file":"wcs-radio-group.entry.cjs.js","mappings":"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","names":["isSpaceKey","isEnterKey","isDownArrowKey","isRightArrowKey","isUpArrowKey","isLeftArrowKey","isTabKey","h","Host"],"sources":["src/components/radio-group/radio-group.scss?tag=wcs-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.tsx"],"sourcesContent":[":host {\n display: flex;\n\n // region Radio\n --wcs-radio-group-gap: var(--wcs-semantic-spacing-base);\n // endregion\n\n // region Option\n --wcs-radio-group-option-height: var(--wcs-semantic-size-m);\n --wcs-radio-group-option-gap: var(--wcs-semantic-spacing-small);\n --wcs-radio-group-option-padding: var(--wcs-semantic-spacing-small) var(--wcs-semantic-spacing-small);\n --wcs-radio-group-option-border-radius: var(--wcs-semantic-border-radius-base);\n --wcs-radio-group-option-background-color: var(--wcs-semantic-color-background-surface-accent-lightest);\n // endregion\n}\n\n:host([mode=radio]) {\n flex-direction: column;\n gap: var(--wcs-radio-group-gap);\n}\n\n:host([mode=option]) {\n box-sizing: border-box;\n height: var(--wcs-radio-group-option-height);\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n gap: var(--wcs-radio-group-option-gap);\n padding: var(--wcs-radio-group-option-padding);\n background-color: var(--wcs-radio-group-option-background-color);\n border-radius: var(--wcs-radio-group-option-border-radius);\n}\n\n:host([mode=horizontal]) {\n justify-content: space-between;\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n Watch\n} from '@stencil/core';\nimport { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';\nimport { RadioChosedEvent } from '../radio/radio-interface';\nimport {\n isDownArrowKey, isEnterKey,\n isLeftArrowKey,\n isRightArrowKey,\n isSpaceKey,\n isTabKey,\n isUpArrowKey\n} from \"../../utils/helpers\";\n\n/*\n @cssprop --wcs-radio-group-gap - Gap between each radio (checkmark + label) in horizontal mode\n * \n \n @cssprop --wcs-radio-group-option-background-color - Background color of the radio group option\n * \n * @cssprop --wcs-radio-group-option-height - Height of the radio group option\n * @cssprop --wcs-radio-group-option-padding - Padding of the radio group option\n * \n * @cssprop --wcs-radio-group-option-border-radius - Border radius of the radio group option\n * \n * @cssprop --wcs-radio-group-option-gap - Gap between each radio option\n /\n@Component({\n tag: 'wcs-radio-group',\n styleUrl: 'radio-group.scss',\n shadow: true\n})\nexport class RadioGroup implements ComponentInterface {\n @Element() private el!: HTMLWcsRadioGroupElement;\n \n /\n The value of the radio-group. Automatically reflects which radio button is selected.\n /\n @Prop({ mutable: true }) value: any \| any[] \| undefined \| null;\n\n /\n The name of the control to be set on all radio button children\n /\n @Prop({ reflect: true }) name;\n\n /\n The display mode of the control to be set on all radio button children\n /\n @Prop({ reflect: true }) mode: RadioGroupMode = 'radio';\n\n /* Emitted when the value has changed. */\n @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n @Watch('value')\n onValueChangeHandler(value: any \| undefined) {\n this.updateRadioTabIndex(value);\n this.updateAllRadioState();\n }\n\n componentDidLoad() {\n this.onValueChangeHandler(this.value);\n this.updateAllRadioModeAndName();\n }\n \n onSlotChange() {\n this.updateRadioTabIndex(this.value);\n this.updateAllRadioModeAndName();\n }\n \n updateAllRadioState() {\n this.getSlottedRadios().forEach(r => r.updateState());\n }\n \n @Watch('name')\n @Watch('mode')\n updateAllRadioModeAndName() {\n this.getSlottedRadios().forEach(r => {\n r.mode = this.mode;\n r.name = this.name;\n });\n }\n \n updateRadioTabIndex(value: any \| undefined) {\n const radios = this.getSlottedRadios();\n\n // Get the first radio that is not disabled and the checked one\n const first = radios.find((radio) => !radio.disabled);\n const checked = radios.find((radio) => radio.value === value && !radio.disabled);\n\n if (!first && !checked) {\n return;\n }\n\n // If an enabled checked radio exists, set it to be the focusable radio\n // otherwise we default to focus the first radio\n const focusable = checked \|\| first;\n\n for (const radio of radios) {\n const tabindex = radio === focusable ? 0 : -1;\n radio.setTabIndex(tabindex);\n }\n }\n\n private getSlottedRadios(): HTMLWcsRadioElement[] {\n return Array.from(this.el.querySelectorAll('wcs-radio'));\n }\n\n private getSlottedRadiosNotDisabled(): HTMLWcsRadioElement[] {\n return Array.from(this.getSlottedRadios().filter(radio => !radio.disabled));\n }\n\n @Listen('wcsRadioClick')\n handleRadioClick(event: CustomEvent<RadioChosedEvent>) {\n this.value = event.detail.value;\n this.wcsChange.emit({\n value: event.detail.value\n });\n }\n\n @Listen('keydown')\n async handleKeyDown(ev: KeyboardEvent) {\n const radiosNotDisabled = this.getSlottedRadiosNotDisabled();\n const previousSelected = radiosNotDisabled.findIndex(r => r === ev.target);\n let indexToSelect: number;\n\n if ((isSpaceKey(ev) \|\| isEnterKey(ev))) {\n ev.preventDefault();\n indexToSelect = previousSelected;\n } else if (isDownArrowKey(ev) \|\| isRightArrowKey(ev)) {\n ev.preventDefault();\n // Check the next wcs-radio from the previous selected\n indexToSelect = (previousSelected + 1) % radiosNotDisabled.length; // to return at the beginning on the list when we are on the last index\n } else if (isUpArrowKey(ev) \|\| isLeftArrowKey(ev)) {\n ev.preventDefault();\n // Check the previous wcs-radio from the previous selected\n indexToSelect = (previousSelected - 1 + radiosNotDisabled.length) % radiosNotDisabled.length; // To return at the end of the list when we are on index=0\n } else if (isTabKey(ev)) {\n return;\n }\n \n const radioToSelect = radiosNotDisabled[indexToSelect]\n if (radioToSelect) {\n radioToSelect.focus();\n \n if (this.value !== radioToSelect.value) {\n this.wcsChange.emit({\n value: radioToSelect.value\n })\n }\n \n this.value = radioToSelect.value;\n }\n }\n\n render() {\n return (\n <Host role=\"radiogroup\">\n <slot name=\"option\" onSlotchange={this.onSlotChange.bind(this)}/>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"wcs-radio-group.entry.cjs.js","mappings":"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","names":["setOrRemoveAttribute","isSpaceKey","isEnterKey","isDownArrowKey","isRightArrowKey","isUpArrowKey","isLeftArrowKey","isTabKey","h","Host"],"sources":["src/components/radio-group/radio-group.scss?tag=wcs-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.tsx"],"sourcesContent":[":host {\n display: flex;\n\n // region Radio\n --wcs-radio-group-gap: var(--wcs-semantic-spacing-base);\n // endregion\n\n // region Option\n --wcs-radio-group-option-height: var(--wcs-semantic-size-m);\n --wcs-radio-group-option-gap: var(--wcs-semantic-spacing-small);\n --wcs-radio-group-option-padding: var(--wcs-semantic-spacing-small) var(--wcs-semantic-spacing-small);\n --wcs-radio-group-option-border-radius: var(--wcs-semantic-border-radius-base);\n --wcs-radio-group-option-background-color: var(--wcs-semantic-color-background-surface-accent-lightest);\n // endregion\n}\n\n:host([mode=radio]) {\n flex-direction: column;\n gap: var(--wcs-radio-group-gap);\n}\n\n:host([mode=option]) {\n box-sizing: border-box;\n height: var(--wcs-radio-group-option-height);\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n gap: var(--wcs-radio-group-option-gap);\n padding: var(--wcs-radio-group-option-padding);\n background-color: var(--wcs-radio-group-option-background-color);\n border-radius: var(--wcs-radio-group-option-border-radius);\n}\n\n:host([mode=horizontal]) {\n justify-content: space-between;\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n Watch\n} from '@stencil/core';\nimport { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';\nimport { RadioChosedEvent } from '../radio/radio-interface';\nimport {\n isDownArrowKey, isEnterKey,\n isLeftArrowKey,\n isRightArrowKey,\n isSpaceKey,\n isTabKey,\n isUpArrowKey,\n setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from '../../utils/mutable-aria-attribute';\n\n/*\n @cssprop --wcs-radio-group-gap - Gap between each radio (checkmark + label) in horizontal mode\n * \n \n @cssprop --wcs-radio-group-option-background-color - Background color of the radio group option\n * \n * @cssprop --wcs-radio-group-option-height - Height of the radio group option\n * @cssprop --wcs-radio-group-option-padding - Padding of the radio group option\n * \n * @cssprop --wcs-radio-group-option-border-radius - Border radius of the radio group option\n * \n * @cssprop --wcs-radio-group-option-gap - Gap between each radio option\n /\n@Component({\n tag: 'wcs-radio-group',\n styleUrl: 'radio-group.scss',\n shadow: true\n})\nexport class RadioGroup implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLWcsRadioGroupElement;\n \n /\n The value of the radio-group. Automatically reflects which radio button is selected.\n /\n @Prop({ mutable: true }) value: any \| any[] \| undefined \| null;\n\n /\n The name of the control to be set on all radio button children\n /\n @Prop({ reflect: true }) name;\n\n /\n The display mode of the control to be set on all radio button children\n /\n @Prop({ reflect: true }) mode: RadioGroupMode = 'radio';\n\n /* Emitted when the value has changed. */\n @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n @Watch('value')\n onValueChangeHandler(value: any \| undefined) {\n this.updateRadioTabIndex(value);\n this.updateAllRadioState();\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.el, attr, value);\n }\n\n componentDidLoad() {\n this.onValueChangeHandler(this.value);\n this.updateAllRadioModeAndName();\n }\n \n onSlotChange() {\n this.updateRadioTabIndex(this.value);\n this.updateAllRadioModeAndName();\n }\n \n updateAllRadioState() {\n this.getSlottedRadios().forEach(r => r.updateState());\n }\n \n @Watch('name')\n @Watch('mode')\n updateAllRadioModeAndName() {\n this.getSlottedRadios().forEach(r => {\n r.mode = this.mode;\n r.name = this.name;\n });\n }\n \n updateRadioTabIndex(value: any \| undefined) {\n const radios = this.getSlottedRadios();\n\n // Get the first radio that is not disabled and the checked one\n const first = radios.find((radio) => !radio.disabled);\n const checked = radios.find((radio) => radio.value === value && !radio.disabled);\n\n if (!first && !checked) {\n return;\n }\n\n // If an enabled checked radio exists, set it to be the focusable radio\n // otherwise we default to focus the first radio\n const focusable = checked \|\| first;\n\n for (const radio of radios) {\n const tabindex = radio === focusable ? 0 : -1;\n radio.setTabIndex(tabindex);\n }\n }\n\n private getSlottedRadios(): HTMLWcsRadioElement[] {\n return Array.from(this.el.querySelectorAll('wcs-radio'));\n }\n\n private getSlottedRadiosNotDisabled(): HTMLWcsRadioElement[] {\n return Array.from(this.getSlottedRadios().filter(radio => !radio.disabled));\n }\n\n @Listen('wcsRadioClick')\n handleRadioClick(event: CustomEvent<RadioChosedEvent>) {\n this.value = event.detail.value;\n this.wcsChange.emit({\n value: event.detail.value\n });\n }\n\n @Listen('keydown')\n async handleKeyDown(ev: KeyboardEvent) {\n const radiosNotDisabled = this.getSlottedRadiosNotDisabled();\n const previousSelected = radiosNotDisabled.findIndex(r => r === ev.target);\n let indexToSelect: number;\n\n if ((isSpaceKey(ev) \|\| isEnterKey(ev))) {\n ev.preventDefault();\n indexToSelect = previousSelected;\n } else if (isDownArrowKey(ev) \|\| isRightArrowKey(ev)) {\n ev.preventDefault();\n // Check the next wcs-radio from the previous selected\n indexToSelect = (previousSelected + 1) % radiosNotDisabled.length; // to return at the beginning on the list when we are on the last index\n } else if (isUpArrowKey(ev) \|\| isLeftArrowKey(ev)) {\n ev.preventDefault();\n // Check the previous wcs-radio from the previous selected\n indexToSelect = (previousSelected - 1 + radiosNotDisabled.length) % radiosNotDisabled.length; // To return at the end of the list when we are on index=0\n } else if (isTabKey(ev)) {\n return;\n }\n \n const radioToSelect = radiosNotDisabled[indexToSelect]\n if (radioToSelect) {\n radioToSelect.focus();\n \n if (this.value !== radioToSelect.value) {\n this.wcsChange.emit({\n value: radioToSelect.value\n })\n }\n \n this.value = radioToSelect.value;\n }\n }\n\n render() {\n return (\n <Host role=\"radiogroup\">\n <slot name=\"option\" onSlotchange={this.onSlotChange.bind(this)}/>\n </Host>\n );\n }\n\n}\n"],"version":3}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.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 WcsRadioStyle0 = radioCss;
@@ -77,7 +77,7 @@ const Radio = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'ebbb03e1c723a28798544b5f75bf305b74db2fe4', slot: "option", tabIndex: this.disabled ? -1 : this.radioTabIndex, class: this.checked ? 'checked' : '' }, index.h("input", Object.assign({ key: '6deafa14c6a33bb215ce629d2065cbc118692912', 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: 'a1bc3da98121c65a7589218fc57ca7c3baad1b67', htmlFor: `${this.inputId}` }, this.label)));
+        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)));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

	@@ -1 +1 @@
1	- {"file":"wcs-radio.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,22TAA22T,CAAC;AAC73T,uBAAe,QAAQ;;ACgBvB,MAAM,qBAAqB,GAAG,CAAC,OAAO,CAAC,CAAC;MA2E3B,KAAK;;;;;;QACN,YAAO,GAAG,UAAU,cAAc,EAAE,EAAE,CAAC;QAGvC,wBAAmB,GAAyB,EAAE,CAAC;uBAM5B,KAAK;6BAMC,CAAC,CAAC;;;wBAeC,KAAK;;oBA8BuB,OAAO;;;;;;IAOvE,MAAM,WAAW;QACb,MAAM,UAAU,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC/C,IAAI,UAAU,EAAE;YACZ,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAA;SAClF;KACJ;;IAID,MAAM,WAAW,CAAC,KAAa;QAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC9B;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5EA,4BAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACvD;IAED,OAAO,CAAC,EAAc;QAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC1B;IAED,MAAM,CAAC,EAAc;QACjB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACzB;IAEO,oBAAoB;QACxB,OAAO,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;KAC7C;IAED,iBAAiB;QACb,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;;YAE1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC;SACxC;QAED,IAAI,CAAC,mBAAmB,mCACjBC,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,qBAAqB,CAAC,CACvD,CAAC;KACL;IAEO,QAAQ,CAAC,CAAQ;QACrB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;;;;QAK1B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC/B;KACJ;IAED,oBAAoB;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,EAAE;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SACpB,CAAC,CAAC;KACN;IAED,MAAM;QAEF,QACIC,QAACC,UAAI,qDAAC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,EACjD,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,IACtCD,kFACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAClC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,mBACf,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,kBAC9B,GAAG,IAAI,CAAC,OAAO,EAAE,EAC/B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,IAChC,IAAI,CAAC,mBAAmB,EAC9B,EACFA,oEAAO,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,CACpD,EACT;KACL;;;;AAGL,IAAI,cAAc,GAAG,CAAC,CAAC;;;;;","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 }) 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}
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}

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
 const selectArrow = require('./select-arrow-a8a47fe4.js');
-const helpers = require('./helpers-871f5a3d.js');
-const keyboardEvent = require('./keyboard-event-d2c81ce0.js');
+const helpers = require('./helpers-2f1a8ddc.js');
+const keyboardEvent = require('./keyboard-event-40ecdc27.js');
 const accessibility = require('./accessibility-5f681a74.js');
 const isEqual = require('./isEqual-8a0a6936.js');
 const popper = require('./popper-8d6e7fca.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 = {
@@ -5324,6 +5324,7 @@ const Select = class {
         this.value = undefined;
         this.placeholder = undefined;
         this.disabled = false;
+        this.required = false;
         this.multiple = false;
         this.autocomplete = false;
         this.serverMode = false;
@@ -5428,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;
@@ -5445,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;
@@ -5570,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();
@@ -5959,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;
@@ -6035,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: '201fc0413dca958b717f8e68a3180475a6d29cc6', class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes(), { role: !this.autocomplete ? "combobox" : null, "aria-haspopup": !this.autocomplete ? "listbox" : null, "aria-owns": !this.autocomplete ? this.optionsId : null, "aria-controls": !this.autocomplete ? this.optionsId : null, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-label": ariaLabelValue }), index.h("div", { key: 'ed3644949eb6b936640af99c24992b041efd3377', class: "wcs-select-control" }, index.h("div", { key: '3760064787fb454b33e4d957110fddc981aa4f30', 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: '5cc152dd3815f8852493876baa56ab513eb1b424', 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, 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: '5c555ddc2049519b25316a4c0428e6cd02a02ea8', up: this.expanded })), index.h("div", { key: 'ffed16dd522116e992fba80451a242a34d6efa0d', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, index.h("slot", { key: '296e306aad573f1c71bb23439c501127a5c1b298', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
-            index.h("div", { key: '8f49959dccc48542d89d8425d4659201627b27a8', class: "noresult-container" }, index.h("slot", { key: '16be57220be51e5417b9b1e92f929c678a0f6f02', name: "filter-no-result" }, index.h("span", { key: 'c45dd71a0243a08dd77cafc40577d39c8f7e6d5d' }, "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 {
@@ -6101,8 +6109,8 @@ const SelectOption = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '5fb9e1a2133b04b3c1e791acec0d923c29e695bc', id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
-            index.h("wcs-checkbox", { key: '9dc934a047192b7bad75e740c5f9889e909a0e35', tabindex: "-1", checked: this.selected, disabled: this.disabled }), index.h("slot", { key: '07f513c6798cce83ab4aa5f553074db71e5b05e2' })));
+        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); }
 };