wcs-core 7.1.0 → 7.2.1

package/dist/collection/components/native-select/native-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.js","sourceRoot":"","sources":["../../../src/components/native-select/native-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, ComponentInterface, State, Prop, Host, Element, Method, Watch } from '@stencil/core';\n\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsNativeSelectSize } from './native-select-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice\n * allows developers to bind the `<select>` element using the framework of their choice, without the need to re-expose all the\n * properties of the `<select>` and `<option>` elements in this component.\n *\n * The component wraps the native `<select>` element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * ### ✅ Guidance\n *\n * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled`\n * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay.\n *\n * ### Example usage\n *\n * ```html\n * <wcs-native-select>\n *   <select>\n *     <option value=\"option1\">Option 1</option>\n *     <option value=\"option2\">Option 2</option>\n *     <option value=\"option3\">Option 3</option>\n *   </select>\n * </wcs-native-select>\n * ```\n *\n * ### Note\n * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the\n * select is reset, you have to call the `updateStyles()` method manually.\n * - It is strongly recommended to use native-select when you don't have to support the multi-selection feature\n * - Use a native-select instead of a wcs-select if your application is mainly on mobile / tablet. The native behavior of the device will be used.\n *\n * @cssprop --wcs-native-select-line-height - Line height of the select\n * \n * @cssprop --wcs-native-select-size-m - Height of the select when size is 'm'\n * @cssprop --wcs-native-select-font-size-m - Font size of the select when size is 'm'\n * @cssprop --wcs-native-select-size-l - Height of the select when size is 'l'\n * @cssprop --wcs-native-select-font-size-l - Font size of the select when size is 'l'\n * \n * @cssprop --wcs-native-select-border-radius - Border radius of the select\n * \n * @cssprop --wcs-native-select-background-color - Background color of the select\n * \n * @cssprop --wcs-native-select-border-color-default - Border color of the select when not focused\n * @cssprop --wcs-native-select-border-color-disabled - Border color of the select when disabled\n * @cssprop --wcs-native-select-border-color-focus - Border color of the select when focused\n * @cssprop --wcs-native-select-border-color-error - Border color of the select when in error state\n * \n * @cssprop --wcs-native-select-border-style-default - Border style of the select when not focused\n * @cssprop --wcs-native-select-border-style-focus - Border style of the select when focused\n * \n * @cssprop --wcs-native-select-border-width - Border width of the select when not focused\n * @cssprop --wcs-native-select-border-width-focus - Border width of the select when focused\n * \n * @cssprop --wcs-native-select-value-color - Color of the selected value\n * @cssprop --wcs-native-select-value-font-weight - Font weight of the selected value\n * @cssprop --wcs-native-select-value-font-style - Font style of the selected value\n * \n * @cssprop --wcs-native-select-padding-horizontal-m - Padding horizontal of the select when size is 'm'\n * @cssprop --wcs-native-select-padding-horizontal-l - Padding horizontal of the select when size is 'l'\n * \n * @cssprop --wcs-native-select-arrow-color - Color of the select arrow\n * @cssprop --wcs-native-select-arrow-color-disabled - Color of the select arrow when the select is disabled\n * \n * @cssprop --wcs-native-select-text-color-disabled - Color of the text when the select is disabled\n *\n * @cssprop --wcs-native-select-placeholder-color - Color of the placeholder\n * @cssprop --wcs-native-select-placeholder-font-weight - Font weight of the placeholder\n * @cssprop --wcs-native-select-placeholder-font-style - Font style of the placeholder\n *\n * @cssprop --wcs-native-select-option-color - Text color of the options\n * @cssprop --wcs-native-select-option-font-style - Font style of the options\n * @cssprop --wcs-native-select-option-selected-color - Text color of the selected option\n *\n * \n */\n@Component({\n    tag: 'wcs-native-select',\n    styleUrl: 'native-select.scss',\n    shadow: true\n})\nexport class NativeSelect implements ComponentInterface, MutableAriaAttribute {\n    /**\n     * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n     * There are two possible size options:\n     * - 'm': medium size\n     * - 'l': large size\n     *\n     * The default value is 'm'.\n     */\n    @Prop({reflect: true}) size: WcsNativeSelectSize = 'm';\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     * It is propagated to the slotted select element\n     */\n    @Prop() required = false;\n    \n    @Element() private el!: HTMLWcsNativeSelectElement;\n\n    @State() private expanded: boolean = false;\n\n    @State() private disabled: boolean;\n    private selectElement: HTMLSelectElement;\n\n    private observer: MutationObserver;\n    private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n    @Watch('required')\n    requiredChanged(newValue: boolean, oldValue: boolean) {\n        if(newValue !== oldValue) {\n            if(!this.selectElement) return;\n            this.selectElement.required = this.required;\n        }\n    }\n    \n    componentWillLoad() {\n        this.selectElement = this.el.querySelector('select');\n        if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n        this.onSelectedOptionChange();\n\n        /**\n         * We use an event listener to apply the default style to the select when user chose an active option\n         */\n        this.selectElement.addEventListener('change', () => {\n            this.onSelectedOptionChange();\n        });\n\n        this.observer = new MutationObserver(mutations => {\n            const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n            if (hasSpiedAttrMutation) {\n                this.updateHostAttributeWithSlottedSelect();\n            }\n\n            // A workaround to detect when the select is reset by using a class change on the select element. For example\n            // angular add/remove ng-pristine and ng-dirty classes on the form controls when the form is reset.\n            // Not the best solution but it works since we cannot detect the reset event on the native select element.\n            if (mutations.filter(m => m.attributeName === 'class').length > 0) {\n                this._updateStyles();\n            }\n        });\n        this.updateHostAttributeWithSlottedSelect();\n        this.observer.observe(this.selectElement, {attributes: true});\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        if(!this.selectElement) return;\n        this.selectElement.setAttribute(attr, value);\n    }\n\n    private onSelectedOptionChange(): void {\n        this._updateStyles();\n    }\n\n    private _updateStyles() {\n        if (this.isPlaceholderOptionSelected()) {\n            this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n        } else {\n            this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n        }\n    }\n\n    private isPlaceholderOptionSelected() {\n        return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n    }\n\n    /**\n     * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n     * @private\n     */\n    private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-native-select-value-color)\";\n        this.selectElement.style.fontStyle = \"var(--wcs-native-select-value-font-style)\";\n        this.selectElement.style.fontWeight = \"var(--wcs-native-select-value-font-weight)\";\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = \"var(--wcs-native-select-option-font-style)\";\n            if (!option.disabled) {\n                option.style.color = \"var(--wcs-native-select-option-color)\";\n            }\n        });\n    }\n\n    /**\n     * This method apply styles when the placeholder is shown.\n     *\n     * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n     * @private\n     */\n    private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-native-select-placeholder-color)\";\n        this.selectElement.style.fontWeight = \"var(--wcs-native-select-placeholder-font-weight)\";\n        this.selectElement.style.fontStyle = \"var(--wcs-native-select-placeholder-font-style)\";\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = \"var(--wcs-native-select-option-font-style)\";\n            if (!option.disabled) {\n                option.style.color = \"var(--wcs-native-select-option-color)\";\n            }\n        });\n    }\n\n    private updateHostAttributeWithSlottedSelect() {\n        this.disabled = this.selectElement?.hasAttribute('disabled');\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n        this.selectElement?.removeEventListener(\"change\", () => {\n            this.onSelectedOptionChange();\n        });\n    }\n\n    /**\n     * Use this method to force the component to update its styles. It can be useful when the select is reset (with a placeholder).\n     */\n    @Method()\n    async updateStyles() {\n        // Note : we try to automatically detect if the select is reset with the onreset event and with a mutation\n        // observer on the select element. But it seems that the onreset event is not fired when the select is reset.\n        // and the mutation observer is not fired when the select is reset with the reset() method on the form.\n        // So we have to let the user call this method manually when he reset the select.\n        this._updateStyles();\n    }\n\n    render() {\n        return (\n            <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n                <div class=\"select-wrapper\">\n                    <slot></slot>\n                    <div class=\"arrow-container\">\n                        <SelectArrow up={this.expanded}></SelectArrow>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"native-select.js","sourceRoot":"","sources":["../../../src/components/native-select/native-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, ComponentInterface, State, Prop, Host, Element, Method, Watch } from '@stencil/core';\n\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsNativeSelectSize } from './native-select-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice\n * allows developers to bind the `<select>` element using the framework of their choice, without the need to re-expose all the\n * properties of the `<select>` and `<option>` elements in this component.\n *\n * The component wraps the native `<select>` element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * ### ✅ Guidance\n *\n * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled`\n * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay.\n *\n * ### Example usage\n *\n * ```html\n * <wcs-native-select>\n *   <select>\n *     <option value=\"option1\">Option 1</option>\n *     <option value=\"option2\">Option 2</option>\n *     <option value=\"option3\">Option 3</option>\n *   </select>\n * </wcs-native-select>\n * ```\n *\n * ### Note\n * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the\n * select is reset, you have to call the `updateStyles()` method manually.\n * - It is strongly recommended to use native-select when you don't have to support the multi-selection feature\n * - Use a native-select instead of a wcs-select if your application is mainly on mobile / tablet. The native behavior of the device will be used.\n *\n * @cssprop --wcs-native-select-line-height - Line height of the select\n * \n * @cssprop --wcs-native-select-size-m - Height of the select when size is 'm'\n * @cssprop --wcs-native-select-font-size-m - Font size of the select when size is 'm'\n * @cssprop --wcs-native-select-size-l - Height of the select when size is 'l'\n * @cssprop --wcs-native-select-font-size-l - Font size of the select when size is 'l'\n * \n * @cssprop --wcs-native-select-border-radius - Border radius of the select\n * \n * @cssprop --wcs-native-select-background-color - Background color of the select\n * \n * @cssprop --wcs-native-select-border-color-default - Border color of the select when not focused\n * @cssprop --wcs-native-select-border-color-disabled - Border color of the select when disabled\n * @cssprop --wcs-native-select-border-color-focus - Border color of the select when focused\n * @cssprop --wcs-native-select-border-color-error - Border color of the select when in error state\n * \n * @cssprop --wcs-native-select-border-style-default - Border style of the select when not focused\n * @cssprop --wcs-native-select-border-style-focus - Border style of the select when focused\n * \n * @cssprop --wcs-native-select-border-width - Border width of the select when not focused\n * @cssprop --wcs-native-select-border-width-focus - Border width of the select when focused\n * \n * @cssprop --wcs-native-select-value-color - Color of the selected value\n * @cssprop --wcs-native-select-value-font-weight - Font weight of the selected value\n * @cssprop --wcs-native-select-value-font-style - Font style of the selected value\n * \n * @cssprop --wcs-native-select-padding-horizontal-m - Padding horizontal of the select when size is 'm'\n * @cssprop --wcs-native-select-padding-horizontal-l - Padding horizontal of the select when size is 'l'\n * \n * @cssprop --wcs-native-select-arrow-color - Color of the select arrow\n * @cssprop --wcs-native-select-arrow-color-disabled - Color of the select arrow when the select is disabled\n * \n * @cssprop --wcs-native-select-text-color-disabled - Color of the text when the select is disabled\n *\n * @cssprop --wcs-native-select-placeholder-color - Color of the placeholder\n * @cssprop --wcs-native-select-placeholder-font-weight - Font weight of the placeholder\n * @cssprop --wcs-native-select-placeholder-font-style - Font style of the placeholder\n *\n * @cssprop --wcs-native-select-option-color - Text color of the options\n * @cssprop --wcs-native-select-option-font-style - Font style of the options\n * @cssprop --wcs-native-select-option-selected-color - Text color of the selected option\n *\n * \n */\n@Component({\n    tag: 'wcs-native-select',\n    styleUrl: 'native-select.scss',\n    shadow: true\n})\nexport class NativeSelect implements ComponentInterface, MutableAriaAttribute {\n    /**\n     * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n     * There are two possible size options:\n     * - 'm': medium size\n     * - 'l': large size\n     *\n     * The default value is 'm'.\n     */\n    @Prop({reflect: true}) size: WcsNativeSelectSize = 'm';\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     * It is propagated to the slotted select element\n     */\n    @Prop({ reflect: true }) required: boolean = false;\n    \n    @Element() private el!: HTMLWcsNativeSelectElement;\n\n    @State() private expanded: boolean = false;\n\n    @State() private disabled: boolean;\n    private selectElement: HTMLSelectElement;\n\n    private observer: MutationObserver;\n    private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n    @Watch('required')\n    requiredChanged(newValue: boolean, oldValue: boolean) {\n        if(newValue !== oldValue) {\n            if(!this.selectElement) return;\n            this.selectElement.required = this.required;\n        }\n    }\n    \n    componentWillLoad() {\n        this.selectElement = this.el.querySelector('select');\n        if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n        this.onSelectedOptionChange();\n\n        /**\n         * We use an event listener to apply the default style to the select when user chose an active option\n         */\n        this.selectElement.addEventListener('change', () => {\n            this.onSelectedOptionChange();\n        });\n\n        this.observer = new MutationObserver(mutations => {\n            const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n            if (hasSpiedAttrMutation) {\n                this.updateHostAttributeWithSlottedSelect();\n            }\n\n            // A workaround to detect when the select is reset by using a class change on the select element. For example\n            // angular add/remove ng-pristine and ng-dirty classes on the form controls when the form is reset.\n            // Not the best solution but it works since we cannot detect the reset event on the native select element.\n            if (mutations.filter(m => m.attributeName === 'class').length > 0) {\n                this._updateStyles();\n            }\n        });\n        this.updateHostAttributeWithSlottedSelect();\n        this.observer.observe(this.selectElement, {attributes: true});\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        if(!this.selectElement) return;\n        this.selectElement.setAttribute(attr, value);\n    }\n\n    private onSelectedOptionChange(): void {\n        this._updateStyles();\n    }\n\n    private _updateStyles() {\n        if (this.isPlaceholderOptionSelected()) {\n            this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n        } else {\n            this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n        }\n    }\n\n    private isPlaceholderOptionSelected() {\n        return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n    }\n\n    /**\n     * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n     * @private\n     */\n    private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-native-select-value-color)\";\n        this.selectElement.style.fontStyle = \"var(--wcs-native-select-value-font-style)\";\n        this.selectElement.style.fontWeight = \"var(--wcs-native-select-value-font-weight)\";\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = \"var(--wcs-native-select-option-font-style)\";\n            if (!option.disabled) {\n                option.style.color = \"var(--wcs-native-select-option-color)\";\n            }\n        });\n    }\n\n    /**\n     * This method apply styles when the placeholder is shown.\n     *\n     * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n     * @private\n     */\n    private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-native-select-placeholder-color)\";\n        this.selectElement.style.fontWeight = \"var(--wcs-native-select-placeholder-font-weight)\";\n        this.selectElement.style.fontStyle = \"var(--wcs-native-select-placeholder-font-style)\";\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = \"var(--wcs-native-select-option-font-style)\";\n            if (!option.disabled) {\n                option.style.color = \"var(--wcs-native-select-option-color)\";\n            }\n        });\n    }\n\n    private updateHostAttributeWithSlottedSelect() {\n        this.disabled = this.selectElement?.hasAttribute('disabled');\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n        this.selectElement?.removeEventListener(\"change\", () => {\n            this.onSelectedOptionChange();\n        });\n    }\n\n    /**\n     * Use this method to force the component to update its styles. It can be useful when the select is reset (with a placeholder).\n     */\n    @Method()\n    async updateStyles() {\n        // Note : we try to automatically detect if the select is reset with the onreset event and with a mutation\n        // observer on the select element. But it seems that the onreset event is not fired when the select is reset.\n        // and the mutation observer is not fired when the select is reset with the reset() method on the form.\n        // So we have to let the user call this method manually when he reset the select.\n        this._updateStyles();\n    }\n\n    render() {\n        return (\n            <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n                <div class=\"select-wrapper\">\n                    <slot></slot>\n                    <div class=\"arrow-container\">\n                        <SelectArrow up={this.expanded}></SelectArrow>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/nav/nav.css

@@ -11,6 +11,8 @@ nav {
   flex-direction: column;
   width: var(--wcs-nav-width-desktop);
   height: 100%;
+  overflow: auto;
+  scrollbar-width: thin;
 }
 nav div[role=list] {
   list-style-type: none;

package/dist/collection/components/nav/nav.js

@@ -21,7 +21,7 @@ export class Nav {
         setOrRemoveAttribute(this.nativeNav, attr, value);
     }
     render() {
-        return (h("nav", Object.assign({ key: '010b8847c02ed7e6c9f3112f486279709f75fbb0', role: "navigation", class: "wcs-nav-container", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("div", { key: '35117f4736ebeedc66db2c883eeb6a9b570fcc25', role: "list" }, h("slot", { key: 'a08aa2b168519ce86b6bfbabe501f38bfc55c62b' }), h("slot", { key: '0f2f00d3bf339128d64cb2b61eb7029d3a0ce035', name: "bottom" }))));
+        return (h("nav", Object.assign({ key: '3461a64de9b036b1a970e58a26a70f70772491c8', role: "navigation", class: "wcs-nav-container", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("div", { key: 'aa68166f70a54e44e78c0fe8a61c224bed4bcb3e', role: "list" }, h("slot", { key: '9e6315dafb2038e8577b2402dae1a646587dbb5f' }), h("slot", { key: '8dcddd80f189c8ade3ceb24cd5e36b8d03083a80', name: "bottom" }))));
     }
     static get is() { return "wcs-nav"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nav-item/nav-item.js

@@ -45,7 +45,7 @@ export class NavItem {
         }
     }
     render() {
-        return (h(Host, { key: '8a21ba03aacff1aa94ae552a0f76f0e551df6e67', role: "listitem" }, h("slot", { key: '75d250a220a1eaba9cb8dd68adbe267379afb915' })));
+        return (h(Host, { key: '79abea50c0964fd39358ecf7ed23030f9096b1fd', role: "listitem" }, h("slot", { key: 'dad7099b9fb08309052b2c35f2bc3a97c40b3ecb' })));
     }
     static get is() { return "wcs-nav-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/progress-bar/progress-bar.css

@@ -1,7 +1,7 @@
 :host {
   --wcs-progress-bar-border-radius: var(--wcs-semantic-border-radius-full);
   --wcs-progress-bar-border-radius-small: var(--wcs-semantic-border-radius-small);
-  --wcs-progress-bar-animation-duration: var(--wcs-semantic-motion-duration-feedback-slower);
+  --wcs-internal-progress-bar-animation-duration: var(--wcs-progress-bar-animation-duration, var(--wcs-semantic-motion-duration-feedback-slower)); /* internal used by horizontal-stepper */
   --wcs-progress-bar-height-m: calc(var(--wcs-semantic-size-m) / 4);
   --wcs-progress-bar-height-s: calc(var(--wcs-semantic-size-s) / 6);
   --wcs-progress-bar-background-color: transparent;
@@ -59,7 +59,7 @@
   text-align: center;
   background-color: var(--wcs-progress-bar-indicator-color);
   border-radius: var(--wcs-progress-bar-border-radius);
-  transition: width var(--wcs-progress-bar-animation-duration) ease-out;
+  transition: width var(--wcs-internal-progress-bar-animation-duration) ease-out;
 }
 
 .progress-label {

package/dist/collection/components/progress-bar/progress-bar.js

@@ -54,8 +54,8 @@ export class ProgressBar {
         const style = {
             width: this.value + '%'
         };
-        return (h("div", Object.assign({ key: '9339cb3c4ef89618cb45119495d3601ce2110d3d', class: this.rootClasses(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), h("div", { key: '8b54ef388bcd4e2bff826a18374c4732f7d0e384', class: "progress-bar", style: style }, this.showLabel &&
-            h("span", { key: 'f50f5879441f22db9552f6bbaaca3ede6f23a678', class: "progress-label" }, this.value, h("sup", { key: 'b10471901b5d3efc0ae95d3a1de822ead1720b87' }, "%")))));
+        return (h("div", Object.assign({ key: '5fe4671aeaaf799d336e38c4bd49f021b4fbb27b', class: this.rootClasses(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), h("div", { key: '9278d7110c3fed850ddcf1a06ff29a60fb4ebbd8', class: "progress-bar", style: style }, this.showLabel &&
+            h("span", { key: 'ac5758b7b685fc08ecf4592b7194666d751c4b87', class: "progress-label" }, this.value, h("sup", { key: '313cec9fb8df686b3affb9a9002e1c6055249f0b' }, "%")))));
     }
     rootClasses() {
         let classes = 'progress';
@@ -123,7 +123,7 @@ export class ProgressBar {
                     "text": "Whether it displays a label indicating the percentage of progress above the bar."
                 },
                 "attribute": "show-label",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "value": {

package/dist/collection/components/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAExF,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAIrG,MAAM,iCAAiC,GAAG,CAAC,OAAO,CAAC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAMH,MAAM,OAAO,WAAW;;QAIZ,wBAAmB,GAAyB,EAAE,CAAC;oBAOX,GAAG;yBAKlB,KAAK;qBAMV,CAAC;;IAEzB,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,iCAAiC,CAAC,CACnE,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;QACF,MAAM,KAAK,GAAG;YACV,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG;SAC1B,CAAC;QAEF,OAAO,CACH,0EAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EACzB,IAAI,EAAC,aAAa,mBACJ,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,KAAK,oBACT,IAAI,CAAC,KAAK,GAAG,GAAG,EAChC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,IACnC,IAAI,CAAC,mBAAmB;YAC7B,4DAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,KAAK,IACjC,IAAI,CAAC,SAAS;gBACX,6DAAM,KAAK,EAAC,gBAAgB;oBACrC,IAAI,CAAC,KAAK;oBAAC,kEAAY,CACnB,CAEG,CACJ,CACT,CAAC;IACN,CAAC;IAED,WAAW;QACP,IAAI,OAAO,GAAG,UAAU,CAAC;QACzB,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,YAAY,CAAC;QAC5C,mEAAmE;QACnE,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC;YAAE,OAAO,IAAI,aAAa,CAAC;QAC/C,OAAO,OAAO,CAAC;IACnB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, Element, h, Method, Prop } from '@stencil/core';\nimport { WcsSize } from \"../../shared-types\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n\nconst PROGRESS_BAR_ARIA_INHERITED_ATTRS = ['title'];\n\n/**\n * The progress-bar component is a horizontal bar that indicates the current completion of a task.\n *\n * ## Accessibility guidelines 💡\n * > Aria attributes and how to display the progress-bar depend on the use case in your application :\n * >\n * > - **Case 1 : decorative**\n * > If the progress-bar is used as a decoration _(if removed, the user doesn't lose any relevant information)_ or in the\n * > context of another component _(such as progress-bar in a card, stepper, ...)_ => **you don't need to show the label nor add an aria-label**.\n * >\n * > - **Case 2 : informative**\n * > If the progress-bar is used to convey important information _(e.g., form completion status, dashboard KPI)_, you need to :\n * >   - **Provide a visible label** that describes the purpose of the progress-bar.\n * >   - **Set the `showLabel` property to `true`** to show the percentage above the progress-bar.\n * >   - Optionally, use aria-label to provide an accessible name if a visible label is not present.\n *\n * @cssprop --wcs-progress-bar-border-radius - Border radius\n * @cssprop --wcs-progress-bar-border-radius-small - Border radius for size small\n * @cssprop --wcs-progress-bar-animation-duration - Animation duration\n * \n * @cssprop --wcs-progress-bar-height-m - Height for size medium\n * @cssprop --wcs-progress-bar-height-s - Height for size small\n * @cssprop --wcs-progress-bar-background-color - Background color of the progress bar\n * @cssprop --wcs-progress-bar-rail-color - Rail color (dashed line)\n * @cssprop --wcs-progress-bar-rail-spacing - Space between the rail dashes\n * @cssprop --wcs-progress-bar-gap-s - Gap between the progress bar and the label for size small\n * @cssprop --wcs-progress-bar-gap-m - Gap between the progress bar and the label for size medium\n * @cssprop --wcs-progress-bar-indicator-color - Color of the progress bar indicator (bar on top of the rail)\n * @cssprop --wcs-progress-bar-label-color - Color of the label\n * @cssprop --wcs-progress-bar-label-font-size-s - Font size of the label for size small\n * @cssprop --wcs-progress-bar-label-font-size-m - Font size of the label for size medium\n * @cssprop --wcs-progress-bar-label-font-weight - Font weight of the label\n * @cssprop --wcs-progress-bar-label-percentage-font-size-s - Font size of the percentage for size small\n * @cssprop --wcs-progress-bar-label-percentage-font-size-m - Font size of the percentage for size medium\n * @cssprop --wcs-progress-bar-label-top-space - Space on top of the progress bar when label is displayed\n */\n@Component({\n    tag: 'wcs-progress-bar',\n    styleUrl: 'progress-bar.scss',\n    shadow: true\n})\nexport class ProgressBar implements ComponentInterface, MutableAriaAttribute {\n\n    @Element() private el!: HTMLWcsProgressBarElement;\n    private nativeProgress!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n\n    /**\n     * Specify the size of the progress bar.\n     * m = default, s = smaller\n     */\n    @Prop() size: Extract<WcsSize, 'm' | 's'> = 'm';\n\n    /**\n     * Whether it displays a label indicating the percentage of progress above the bar.\n     */\n    @Prop() showLabel: boolean = false;\n\n    /**\n     * The actual value of the progress.\n     * Ranging from 0 to 100.\n     */\n    @Prop() value: number = 0;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, PROGRESS_BAR_ARIA_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeProgress, attr, value);\n    }\n\n    render() {\n        const style = {\n            width: this.value + '%'\n        };\n\n        return (\n            <div class={this.rootClasses()}\n                 role=\"progressbar\"\n                 aria-valuemin=\"0\"\n                 aria-valuemax=\"100\"\n                 aria-valuenow={this.value}\n                 aria-valuetext={this.value + '%'}\n                 ref={(el) => (this.nativeProgress = el)}\n                 {...this.inheritedAttributes}>\n                <div class=\"progress-bar\" style={style}>\n                    {this.showLabel &&\n                        <span class=\"progress-label\">\n              {this.value}<sup>%</sup>\n            </span>\n                    }\n                </div>\n            </div>\n        );\n    }\n\n    rootClasses(): string {\n        let classes = 'progress';\n        if (this.showLabel) classes += ' has-label';\n        // FIXME: Temporary fix so the label doesn't appear before the bar.\n        if (this.value === 0) classes += ' value-zero';\n        return classes;\n    }\n}\n"]}
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAExF,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAIrG,MAAM,iCAAiC,GAAG,CAAC,OAAO,CAAC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAMH,MAAM,OAAO,WAAW;;QAIZ,wBAAmB,GAAyB,EAAE,CAAC;oBAOX,GAAG;yBAKD,KAAK;qBAM3B,CAAC;;IAEzB,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,iCAAiC,CAAC,CACnE,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;QACF,MAAM,KAAK,GAAG;YACV,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG;SAC1B,CAAC;QAEF,OAAO,CACH,0EAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EACzB,IAAI,EAAC,aAAa,mBACJ,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,KAAK,oBACT,IAAI,CAAC,KAAK,GAAG,GAAG,EAChC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,IACnC,IAAI,CAAC,mBAAmB;YAC7B,4DAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,KAAK,IACjC,IAAI,CAAC,SAAS;gBACX,6DAAM,KAAK,EAAC,gBAAgB;oBACrC,IAAI,CAAC,KAAK;oBAAC,kEAAY,CACnB,CAEG,CACJ,CACT,CAAC;IACN,CAAC;IAED,WAAW;QACP,IAAI,OAAO,GAAG,UAAU,CAAC;QACzB,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,YAAY,CAAC;QAC5C,mEAAmE;QACnE,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC;YAAE,OAAO,IAAI,aAAa,CAAC;QAC/C,OAAO,OAAO,CAAC;IACnB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, Element, h, Method, Prop } from '@stencil/core';\nimport { WcsSize } from \"../../shared-types\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n\nconst PROGRESS_BAR_ARIA_INHERITED_ATTRS = ['title'];\n\n/**\n * The progress-bar component is a horizontal bar that indicates the current completion of a task.\n *\n * ## Accessibility guidelines 💡\n * > Aria attributes and how to display the progress-bar depend on the use case in your application :\n * >\n * > - **Case 1 : decorative**\n * > If the progress-bar is used as a decoration _(if removed, the user doesn't lose any relevant information)_ or in the\n * > context of another component _(such as progress-bar in a card, stepper, ...)_ => **you don't need to show the label nor add an aria-label**.\n * >\n * > - **Case 2 : informative**\n * > If the progress-bar is used to convey important information _(e.g., form completion status, dashboard KPI)_, you need to :\n * >   - **Provide a visible label** that describes the purpose of the progress-bar.\n * >   - **Set the `showLabel` property to `true`** to show the percentage above the progress-bar.\n * >   - Optionally, use aria-label to provide an accessible name if a visible label is not present.\n *\n * @cssprop --wcs-progress-bar-border-radius - Border radius\n * @cssprop --wcs-progress-bar-border-radius-small - Border radius for size small\n * @cssprop --wcs-progress-bar-animation-duration - Animation duration\n * \n * @cssprop --wcs-progress-bar-height-m - Height for size medium\n * @cssprop --wcs-progress-bar-height-s - Height for size small\n * @cssprop --wcs-progress-bar-background-color - Background color of the progress bar\n * @cssprop --wcs-progress-bar-rail-color - Rail color (dashed line)\n * @cssprop --wcs-progress-bar-rail-spacing - Space between the rail dashes\n * @cssprop --wcs-progress-bar-gap-s - Gap between the progress bar and the label for size small\n * @cssprop --wcs-progress-bar-gap-m - Gap between the progress bar and the label for size medium\n * @cssprop --wcs-progress-bar-indicator-color - Color of the progress bar indicator (bar on top of the rail)\n * @cssprop --wcs-progress-bar-label-color - Color of the label\n * @cssprop --wcs-progress-bar-label-font-size-s - Font size of the label for size small\n * @cssprop --wcs-progress-bar-label-font-size-m - Font size of the label for size medium\n * @cssprop --wcs-progress-bar-label-font-weight - Font weight of the label\n * @cssprop --wcs-progress-bar-label-percentage-font-size-s - Font size of the percentage for size small\n * @cssprop --wcs-progress-bar-label-percentage-font-size-m - Font size of the percentage for size medium\n * @cssprop --wcs-progress-bar-label-top-space - Space on top of the progress bar when label is displayed\n */\n@Component({\n    tag: 'wcs-progress-bar',\n    styleUrl: 'progress-bar.scss',\n    shadow: true\n})\nexport class ProgressBar implements ComponentInterface, MutableAriaAttribute {\n\n    @Element() private el!: HTMLWcsProgressBarElement;\n    private nativeProgress!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n\n    /**\n     * Specify the size of the progress bar.\n     * m = default, s = smaller\n     */\n    @Prop() size: Extract<WcsSize, 'm' | 's'> = 'm';\n\n    /**\n     * Whether it displays a label indicating the percentage of progress above the bar.\n     */\n    @Prop({ reflect: true }) showLabel: boolean = false;\n\n    /**\n     * The actual value of the progress.\n     * Ranging from 0 to 100.\n     */\n    @Prop() value: number = 0;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, PROGRESS_BAR_ARIA_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeProgress, attr, value);\n    }\n\n    render() {\n        const style = {\n            width: this.value + '%'\n        };\n\n        return (\n            <div class={this.rootClasses()}\n                 role=\"progressbar\"\n                 aria-valuemin=\"0\"\n                 aria-valuemax=\"100\"\n                 aria-valuenow={this.value}\n                 aria-valuetext={this.value + '%'}\n                 ref={(el) => (this.nativeProgress = el)}\n                 {...this.inheritedAttributes}>\n                <div class=\"progress-bar\" style={style}>\n                    {this.showLabel &&\n                        <span class=\"progress-label\">\n              {this.value}<sup>%</sup>\n            </span>\n                    }\n                </div>\n            </div>\n        );\n    }\n\n    rootClasses(): string {\n        let classes = 'progress';\n        if (this.showLabel) classes += ' has-label';\n        // FIXME: Temporary fix so the label doesn't appear before the bar.\n        if (this.value === 0) classes += ' value-zero';\n        return classes;\n    }\n}\n"]}

package/dist/collection/components/progress-radial/progress-radial.js

@@ -45,8 +45,8 @@ export class ProgressRadial {
     }
     render() {
         const { backgroundImageSize, halfSize } = { backgroundImageSize: this.backgroundImageSize, halfSize: this.backgroundImageSize / 2 };
-        return (h("div", Object.assign({ key: 'c98910d8a132eacbf780f3d9e5a23553c14297a6', class: "progress-circle", "data-component": "radial-progress", style: this.getSize(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), h("svg", { key: 'd8f0282d2b7332c29ed10936ca2cfc5c00c03e3d', "data-role": "figure", class: "circle-rail", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}` }, h("circle", { key: '4534f4ac6749d59a8a1bd4189f3f998bc0aae416', cx: halfSize, cy: halfSize, r: 54, "stroke-width": 12 })), h("svg", { key: 'daf5358b0148443292ce3ac84d55d849e48033bc', class: "progress-circle-figure", "data-role": "figure", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}`, style: this.getSvgStyle() }, h("circle", { key: '3df0779e14354a9084b5f9132660ac2e1d446028', class: "progress-circle-value", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" })), this.showLabel &&
-            h("div", { key: '28212403f92e2a2f1b7515847e8e7cab95851413', class: "progress-circle-label", "data-role": "label" }, h("span", { key: '93b4d94b47b8289f113d717392824d3bca9f9ec9' }, h("span", { key: 'e7093e3a2d3accdbc81ced41d8a02afa167483f6', "data-role": "labelvalue" }, this.value), h("sup", { key: 'f9e66ca420de366cab09cc835d39e849030c4c8b' }, "%")))));
+        return (h("div", Object.assign({ key: '7da6ed9d04399e5ff473d112d6a111696c9b14bc', class: "progress-circle", "data-component": "radial-progress", style: this.getSize(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), h("svg", { key: '226ed7d14005563adc1e55e7ba28c3bb49ed1d95', "data-role": "figure", class: "circle-rail", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}` }, h("circle", { key: 'a50b905a8c36416ce3ede895affbda05a30b1c1b', cx: halfSize, cy: halfSize, r: 54, "stroke-width": 12 })), h("svg", { key: '7d58cf8a614acdff769c769ecca919b86792cd0d', class: "progress-circle-figure", "data-role": "figure", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}`, style: this.getSvgStyle() }, h("circle", { key: '11f22fd6a506b226a0e8a450163ac5c3a0fcbe44', class: "progress-circle-value", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" })), this.showLabel &&
+            h("div", { key: 'a87680ab5a59f4e34072dde8a2f7d15ef4b671e9', class: "progress-circle-label", "data-role": "label" }, h("span", { key: 'fe65c818b10f58562d65f7f330a21a794f8b876f' }, h("span", { key: '337459684703272ec7817fe64226e2df10341e9c', "data-role": "labelvalue" }, this.value), h("sup", { key: '45f173f53dcfa8e85ea0986f28e8848f75d24434' }, "%")))));
     }
     getSvgStyle() {
         return {
@@ -107,7 +107,7 @@ export class ProgressRadial {
                     "text": "Whether the component should display the % label inside"
                 },
                 "attribute": "show-label",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "value": {

package/dist/collection/components/progress-radial/progress-radial.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-radial.js","sourceRoot":"","sources":["../../../src/components/progress-radial/progress-radial.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAsB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGrG,MAAM,oCAAoC,GAAG,CAAC,OAAO,CAAC,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAMH,MAAM,OAAO,cAAc;;QAIf,wBAAmB,GAAyB,EAAE,CAAC;QAEvD,wHAAwH;QAChH,wBAAmB,GAAW,GAAG,CAAC;oBAGnB,GAAG;yBAEG,KAAK;qBAEV,CAAC;;IAEzB,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,oCAAoC,CAAC,CACtE,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;QACF,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,EAAE,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAAE,QAAQ,EAAE,IAAI,CAAC,mBAAmB,GAAG,CAAC,EAAE,CAAC;QACpI,OAAO,CACH,0EAAK,KAAK,EAAC,iBAAiB,oBACR,iBAAiB,EAChC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,EACrB,IAAI,EAAC,aAAa,mBACJ,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,KAAK,oBACT,IAAI,CAAC,KAAK,GAAG,GAAG,EAChC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,IACnC,IAAI,CAAC,mBAAmB;YAC7B,yEAAe,QAAQ,EAAC,KAAK,EAAC,aAAa,EACtC,OAAO,EAAE,OAAO,mBAAmB,IAAI,mBAAmB,EAAE;gBAC7D,+DAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,kBAAgB,EAAE,GAAG,CAC5D;YACN,4DAAK,KAAK,EAAC,wBAAwB,eACrB,QAAQ,EAClB,OAAO,EAAE,OAAO,mBAAmB,IAAI,mBAAmB,EAAE,EAC5D,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;gBACrB,+DAAQ,KAAK,EAAC,uBAAuB,EAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAC,IAAI,kBAAc,IAAI,GAAG,CAC/F;YACL,IAAI,CAAC,SAAS;gBACX,4DAAK,KAAK,EAAC,uBAAuB,eAAW,OAAO;oBAChD;wBACI,0EAAgB,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ;wBAAA,kEAAY,CACzD,CACL,CAER,CACT,CAAC;IACN,CAAC;IAED,WAAW;QACP,OAAO;YACH,kBAAkB,EAAE,SAAS;YAC7B,mBAAmB,EAAE,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,OAAO,EAAE;SACnE,CAAC;IACN,CAAC;IAED,OAAO;QACH,OAAO;YACH,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;YAC3B,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;SAC/B,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, ComponentInterface, h, Element, Method } from '@stencil/core';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst PROGRESS_RADIAL_ARIA_INHERITED_ATTRS = ['title'];\n\n/**\n * The progress-radial component is a circular progress bar that indicates the current completion of a task. \n *\n * ## Accessibility guidelines 💡\n * > Aria attributes and how to display the progress-radial depend on the use case in your application :\n * >\n * > - **Case 1 : decorative**\n * > If the progress-radial is used as a decoration _(if removed, the user doesn't lose any relevant information)_ or in the\n * > context of another component _(such as progress-radial in a card)_ => **you don't need to show the label nor add an aria-label**.\n * >\n * > - **Case 2 : informative**\n * > If the progress-radial is used to convey important information _(e.g., form completion status, dashboard KPI)_, you need to :\n * >   - **Provide a visible label** that describes the purpose of the progress-radial.\n * >   - **Set the `showLabel` property to `true`** to show the percentage inside the progress-radial.\n * >   - Optionally, use aria-label to provide an accessible name if a visible label is not present.\n *\n * \n * @cssprop --wcs-progress-radial-rail-width - The width of the line that represents the rail of the progress radial\n * @cssprop --wcs-progress-radial-rail-spacing - The space between each rail of the progress radial\n * @cssprop --wcs-progress-radial-rail-color - The color of the rail of the progress radial\n * @cssprop --wcs-progress-radial-value-background-color - The background color of the bar on top of the rail \n * @cssprop --wcs-progress-radial-label-color - The color of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-font-size - The font size of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-font-weight - The font weight of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-percentage-font-size - The font size of the percentage inside the progress radial\n * @cssprop --wcs-progress-radial-animation-duration - The duration of the animation of the progress radial\n */\n@Component({\n    tag: 'wcs-progress-radial',\n    styleUrl: 'progress-radial.scss',\n    shadow: true\n})\nexport class ProgressRadial implements ComponentInterface, MutableAriaAttribute {\n    \n    @Element() private el!: HTMLWcsProgressRadialElement;\n    private nativeProgress!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /** The initial background image size (120x120) as specified in the background-image css property of .progress-circle */\n    private backgroundImageSize: number = 120;\n    \n    /** The size of the progress radial (in px) */\n    @Prop() size: number = 120;\n    /** Whether the component should display the % label inside */\n    @Prop() showLabel: boolean = false;\n    /** The value of the progress radial. Prefer values between 0 and 100. */\n    @Prop() value: number = 0;\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, PROGRESS_RADIAL_ARIA_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeProgress, attr, value);\n    }\n\n    render() {\n        const { backgroundImageSize, halfSize } = { backgroundImageSize: this.backgroundImageSize, halfSize: this.backgroundImageSize / 2 };\n        return (\n            <div class=\"progress-circle\"\n                 data-component=\"radial-progress\"\n                 style={this.getSize()}\n                 role=\"progressbar\"\n                 aria-valuemin=\"0\"\n                 aria-valuemax=\"100\"\n                 aria-valuenow={this.value}\n                 aria-valuetext={this.value + '%'}\n                 ref={(el) => (this.nativeProgress = el)}\n                 {...this.inheritedAttributes}>\n                <svg data-role=\"figure\" class=\"circle-rail\"\n                     viewBox={`0 0 ${backgroundImageSize} ${backgroundImageSize}`}>\n                    <circle cx={halfSize} cy={halfSize} r={54} stroke-width={12}/>\n                </svg>\n                <svg class=\"progress-circle-figure\"\n                    data-role=\"figure\"\n                    viewBox={`0 0 ${backgroundImageSize} ${backgroundImageSize}`}\n                    style={this.getSvgStyle()}>\n                        <circle class=\"progress-circle-value\" cx={halfSize} cy={halfSize} r=\"54\" stroke-width=\"12\" />\n                </svg>\n                {this.showLabel &&\n                    <div class=\"progress-circle-label\" data-role=\"label\">\n                        <span>\n                            <span data-role=\"labelvalue\">{this.value}</span><sup>%</sup>\n                        </span>\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    getSvgStyle() {\n        return {\n            'stroke-dasharray': '339.292',\n            'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}`,\n        };\n    }\n    \n    getSize() {\n        return {\n            'width': `${(this.size)}px`,\n            'height': `${(this.size)}px`,\n        };\n    }\n}\n"]}
+{"version":3,"file":"progress-radial.js","sourceRoot":"","sources":["../../../src/components/progress-radial/progress-radial.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAsB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGrG,MAAM,oCAAoC,GAAG,CAAC,OAAO,CAAC,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAMH,MAAM,OAAO,cAAc;;QAIf,wBAAmB,GAAyB,EAAE,CAAC;QAEvD,wHAAwH;QAChH,wBAAmB,GAAW,GAAG,CAAC;oBAGnB,GAAG;yBAEoB,KAAK;qBAE3B,CAAC;;IAEzB,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,oCAAoC,CAAC,CACtE,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;QACF,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,EAAE,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAAE,QAAQ,EAAE,IAAI,CAAC,mBAAmB,GAAG,CAAC,EAAE,CAAC;QACpI,OAAO,CACH,0EAAK,KAAK,EAAC,iBAAiB,oBACR,iBAAiB,EAChC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,EACrB,IAAI,EAAC,aAAa,mBACJ,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,KAAK,oBACT,IAAI,CAAC,KAAK,GAAG,GAAG,EAChC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,IACnC,IAAI,CAAC,mBAAmB;YAC7B,yEAAe,QAAQ,EAAC,KAAK,EAAC,aAAa,EACtC,OAAO,EAAE,OAAO,mBAAmB,IAAI,mBAAmB,EAAE;gBAC7D,+DAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,kBAAgB,EAAE,GAAG,CAC5D;YACN,4DAAK,KAAK,EAAC,wBAAwB,eACrB,QAAQ,EAClB,OAAO,EAAE,OAAO,mBAAmB,IAAI,mBAAmB,EAAE,EAC5D,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;gBACrB,+DAAQ,KAAK,EAAC,uBAAuB,EAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAC,IAAI,kBAAc,IAAI,GAAG,CAC/F;YACL,IAAI,CAAC,SAAS;gBACX,4DAAK,KAAK,EAAC,uBAAuB,eAAW,OAAO;oBAChD;wBACI,0EAAgB,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ;wBAAA,kEAAY,CACzD,CACL,CAER,CACT,CAAC;IACN,CAAC;IAED,WAAW;QACP,OAAO;YACH,kBAAkB,EAAE,SAAS;YAC7B,mBAAmB,EAAE,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,OAAO,EAAE;SACnE,CAAC;IACN,CAAC;IAED,OAAO;QACH,OAAO;YACH,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;YAC3B,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;SAC/B,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, ComponentInterface, h, Element, Method } from '@stencil/core';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst PROGRESS_RADIAL_ARIA_INHERITED_ATTRS = ['title'];\n\n/**\n * The progress-radial component is a circular progress bar that indicates the current completion of a task. \n *\n * ## Accessibility guidelines 💡\n * > Aria attributes and how to display the progress-radial depend on the use case in your application :\n * >\n * > - **Case 1 : decorative**\n * > If the progress-radial is used as a decoration _(if removed, the user doesn't lose any relevant information)_ or in the\n * > context of another component _(such as progress-radial in a card)_ => **you don't need to show the label nor add an aria-label**.\n * >\n * > - **Case 2 : informative**\n * > If the progress-radial is used to convey important information _(e.g., form completion status, dashboard KPI)_, you need to :\n * >   - **Provide a visible label** that describes the purpose of the progress-radial.\n * >   - **Set the `showLabel` property to `true`** to show the percentage inside the progress-radial.\n * >   - Optionally, use aria-label to provide an accessible name if a visible label is not present.\n *\n * \n * @cssprop --wcs-progress-radial-rail-width - The width of the line that represents the rail of the progress radial\n * @cssprop --wcs-progress-radial-rail-spacing - The space between each rail of the progress radial\n * @cssprop --wcs-progress-radial-rail-color - The color of the rail of the progress radial\n * @cssprop --wcs-progress-radial-value-background-color - The background color of the bar on top of the rail \n * @cssprop --wcs-progress-radial-label-color - The color of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-font-size - The font size of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-font-weight - The font weight of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-percentage-font-size - The font size of the percentage inside the progress radial\n * @cssprop --wcs-progress-radial-animation-duration - The duration of the animation of the progress radial\n */\n@Component({\n    tag: 'wcs-progress-radial',\n    styleUrl: 'progress-radial.scss',\n    shadow: true\n})\nexport class ProgressRadial implements ComponentInterface, MutableAriaAttribute {\n    \n    @Element() private el!: HTMLWcsProgressRadialElement;\n    private nativeProgress!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /** The initial background image size (120x120) as specified in the background-image css property of .progress-circle */\n    private backgroundImageSize: number = 120;\n    \n    /** The size of the progress radial (in px) */\n    @Prop() size: number = 120;\n    /** Whether the component should display the % label inside */\n    @Prop({ reflect: true }) showLabel: boolean = false;\n    /** The value of the progress radial. Prefer values between 0 and 100. */\n    @Prop() value: number = 0;\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, PROGRESS_RADIAL_ARIA_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeProgress, attr, value);\n    }\n\n    render() {\n        const { backgroundImageSize, halfSize } = { backgroundImageSize: this.backgroundImageSize, halfSize: this.backgroundImageSize / 2 };\n        return (\n            <div class=\"progress-circle\"\n                 data-component=\"radial-progress\"\n                 style={this.getSize()}\n                 role=\"progressbar\"\n                 aria-valuemin=\"0\"\n                 aria-valuemax=\"100\"\n                 aria-valuenow={this.value}\n                 aria-valuetext={this.value + '%'}\n                 ref={(el) => (this.nativeProgress = el)}\n                 {...this.inheritedAttributes}>\n                <svg data-role=\"figure\" class=\"circle-rail\"\n                     viewBox={`0 0 ${backgroundImageSize} ${backgroundImageSize}`}>\n                    <circle cx={halfSize} cy={halfSize} r={54} stroke-width={12}/>\n                </svg>\n                <svg class=\"progress-circle-figure\"\n                    data-role=\"figure\"\n                    viewBox={`0 0 ${backgroundImageSize} ${backgroundImageSize}`}\n                    style={this.getSvgStyle()}>\n                        <circle class=\"progress-circle-value\" cx={halfSize} cy={halfSize} r=\"54\" stroke-width=\"12\" />\n                </svg>\n                {this.showLabel &&\n                    <div class=\"progress-circle-label\" data-role=\"label\">\n                        <span>\n                            <span data-role=\"labelvalue\">{this.value}</span><sup>%</sup>\n                        </span>\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    getSvgStyle() {\n        return {\n            'stroke-dasharray': '339.292',\n            'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}`,\n        };\n    }\n    \n    getSize() {\n        return {\n            'width': `${(this.size)}px`,\n            'height': `${(this.size)}px`,\n        };\n    }\n}\n"]}

package/dist/collection/components/radio/radio.js

@@ -131,7 +131,7 @@ export class Radio {
         });
     }
     render() {
-        return (h(Host, { key: '07ab36a8de3f5503b21792d29fd384a9412f9c35', slot: "option", tabIndex: this.disabled ? -1 : this.radioTabIndex, class: this.checked ? 'checked' : '' }, h("input", Object.assign({ key: 'a977994ac12b09f5dac114b923cbeea2de437757', id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, ref: (el) => (this.nativeRadio = el) }, this.inheritedAttributes)), h("label", { key: '709e74930fd42435b6ad2ad12e1ab0b3653572d4', htmlFor: `${this.inputId}` }, this.label)));
+        return (h(Host, { key: 'b753f4673fccbd2f0d7e1636be135da90e1850ef', slot: "option", tabIndex: this.disabled ? -1 : this.radioTabIndex, class: this.checked ? 'checked' : '' }, h("input", Object.assign({ key: '25ac2afe93bdde452db9226feb11587f76a4fd69', id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, ref: (el) => (this.nativeRadio = el) }, this.inheritedAttributes)), h("label", { key: '13b771ac257bcf81734cee12a85ffdf143e3c329', htmlFor: `${this.inputId}` }, this.label)));
     }
     static get is() { return "wcs-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst RADIO_INHERITED_ATTRS = ['title'];\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    @Element() private el!: HTMLWcsRadioElement;\n    private nativeRadio!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ mutable: true, reflect: true }) disabled = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeRadio, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n        \n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, RADIO_INHERITED_ATTRS),\n        };\n    }\n    \n    private onChange(_: Event) {\n        if (this.disabled) return;\n\n        // If the radio is unchecked, then the change represents its transition to the check state.\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        if (!this.checked) {\n            this.checked = true;\n            this.emitRadioChangeEvent();\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}>\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked} // Initial checked state of native input\n                    disabled={this.disabled}\n                    onChange={this.onChange.bind(this)}\n                    onFocus={this.onFocus.bind(this)}\n                    onBlur={this.onBlur.bind(this)}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                    ref={(el) => (this.nativeRadio = el)}\n                    {...this.inheritedAttributes}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/radio-group/radio-group.js

@@ -104,7 +104,7 @@ export class RadioGroup {
         }
     }
     render() {
-        return (h(Host, { key: '7e9a6c9412d6ababef068d5766d79a790c3e531f', role: "radiogroup" }, h("slot", { key: '6163831fbd131047a6f3556c76b1628f41453b6b', name: "option", onSlotchange: this.onSlotChange.bind(this) })));
+        return (h(Host, { key: '3179704d2f1ed56f940941c1777b90a49ecd0ffa', role: "radiogroup" }, h("slot", { key: 'f01213b0c89bc04622601447005e24df07fea376', name: "option", onSlotchange: this.onSlotChange.bind(this) })));
     }
     static get is() { return "wcs-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.css

@@ -158,7 +158,7 @@ label::after {
   display: block;
 }
 
-:host([aria-invalid=true]) .wcs-select-control {
+: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);
 }

package/dist/collection/components/select/select.js

@@ -215,7 +215,7 @@ export class Select {
                     this.displayText = opt.innerText;
                     this.lastModifiedOptionElement = opt;
                     if (this.autocomplete) {
-                        this.autocompleteValue = opt.innerText;
+                        this.setAutocompleteValue(opt.innerText);
                     }
                 }
                 opt.selected = isSelected;
@@ -232,7 +232,7 @@ export class Select {
         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;
@@ -357,7 +357,7 @@ export class Select {
                             // 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();
@@ -752,11 +752,17 @@ export class Select {
     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;
@@ -828,14 +834,15 @@ export class Select {
     render() {
         var _a;
         const ariaLabelValue = `${this.labelElement ? this.labelElement.innerText : ''} ${this.hasValue ? this.displayText : ''}`.trimEnd();
-        return (h(Host, Object.assign({ key: '1fb232b49c0c6982f0fdb25f40b9cbc0b5a4feba', class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes(), { role: !this.autocomplete ? "combobox" : null, "aria-haspopup": !this.autocomplete ? "listbox" : null, "aria-owns": !this.autocomplete ? this.optionsId : null, "aria-controls": !this.autocomplete ? this.optionsId : null, "aria-disabled": !this.autocomplete ? (this.disabled ? 'true' : null) : null, "aria-required": !this.autocomplete ? (this.required ? 'true' : 'false') : null, "aria-expanded": !this.autocomplete ? (this.expanded ? 'true' : 'false') : null, "aria-multiselectable": !this.autocomplete ? (this.multiple ? 'true' : 'false') : null, "aria-label": !this.autocomplete ? ariaLabelValue : null }), h("div", { key: '1ffb794dad6a5047bda91a8d8a192542be53807e', class: "wcs-select-control" }, h("div", { key: '4a6eb4aee396013cb385c0747a64f5b734cdb671', class: "wcs-select-value-container" }, this.hasValue
+        const noResultContainerId = 'no-result-container';
+        return (h(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 }), h("div", { key: '190343789a5d2b4227b4a9822348aa087b4bbbad', class: "wcs-select-control" }, h("div", { key: '2f61ddd11d08bd25d8acf00ecfdced4a97a33320', class: "wcs-select-value-container" }, this.hasValue
             ?
                 (this.chips ?
                     this.values.map((option) => h(SelectChips, { disabled: this.disabled, option: option, onRemove: this.removeChip.bind(this) }))
                     : (!this.autocomplete || this.autocomplete && this.multiple) &&
                         h("label", { class: "wcs-select-value" }, this.displayText))
-            : !this.autocomplete && h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && h("input", Object.assign({ key: '347b45243c453e7c7b9295091107a86953a045e5', class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabelValue, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": this.optionsId, "aria-owns": this.optionsId, "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-autocomplete": "list", autocomplete: "off", disabled: this.disabled, required: this.required, onBlur: (e) => this.onAutocompleteFieldBlur(e), placeholder: ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) ? null : this.placeholder, onInput: (e) => this.onAutocompleteInputEvent(e), ref: el => this.autocompleteInput = el }, this.inheritedAttributes))), h(SelectArrow, { key: 'a7465cde16a44865b879d4c69de0fbdba0ab5279', up: this.expanded })), h("div", { key: 'dcd17dd6ca295aa4d3cc0e0e4e081cae36d2390e', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { key: '2d6ff245cdf496a3b8335fd3896a226209117717', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
-            h("div", { key: '26b9e2afd3db161f4c8be2d974825c8be68362d8', class: "noresult-container" }, h("slot", { key: '80558760b864f00666398afd6c413cd5e85e660f', name: "filter-no-result" }, h("span", { key: 'ba460bf80f8cc3127774bf19db6742766169727a' }, "Aucun r\u00E9sultat"))))));
+            : !this.autocomplete && h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && 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))), h(SelectArrow, { key: 'a6075fc5a325bc1e19cc3d62ddbffb8a3409d454', up: this.expanded })), h("div", { key: '36a6ea6029659db97f174c12a4a5ff3c4c0bfd69', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { key: '3a02c19f0b77c98807a684ae77f2612c422cb096', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
+            h("div", { key: '82ecd4b70ed11d8497e9d5d3aea0c3c95f20ec36', role: "alert", id: noResultContainerId, class: "noresult-container" }, h("slot", { key: '607e7d9c3c112e64218d2170ca4e07aaf5cbd25c', name: "filter-no-result" }, h("span", { key: 'da3800fefd8f57c0d7b62e261933e3293bea2161' }, "Aucun r\u00E9sultat"))))));
     }
     static get is() { return "wcs-select"; }
     static get encapsulation() { return "shadow"; }
@@ -942,7 +949,7 @@ export class Select {
                     "text": "If `true`, the user must fill in a value before submitting a form."
                 },
                 "attribute": "required",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "multiple": {