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

wcs-core 7.0.0 → 7.2.0

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

Files changed (664) hide show

package/dist/collection/components/modal/modal.js CHANGED Viewed

@@ -11,6 +11,9 @@ const MODAL_INHERITED_ATTRS = [];
  * > - Keyboard navigation is trapped inside the modal
  * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order
  * > to focus it upon dialog dismissal.
+ * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial
+ * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you
+ * > want to focus. You will see a story as example below
  * > - The modal can be closed at any time by pressing the Escape key.
  * >
  * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
@@ -70,6 +73,8 @@ export class Modal {
         this.size = 'm';
         this.hideActions = false;
         this.modalTriggerControlsId = undefined;
+        this.initialFocusElementId = undefined;
+        this.disableAutoFocus = false;
     }
     componentWillLoad() {
         if (!this.modalTriggerControlsId) {
@@ -85,7 +90,19 @@ export class Modal {
         this.updateFocusableElements();
         if (this.showAttributeChangedMarker) {
             this.showAttributeChangedMarker = false;
-            (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+            if (this.disableAutoFocus) {
+                return;
+            }
+            if (!this.initialFocusElementId) {
+                (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                const modalElementToFocusOnOpening = document.getElementById(this.initialFocusElementId);
+                if (!modalElementToFocusOnOpening) {
+                    console.warn(`wcs-modal: Unable to focus element - ID '${this.initialFocusElementId}' not found in DOM`);
+                }
+                modalElementToFocusOnOpening === null || modalElementToFocusOnOpening === void 0 ? void 0 : modalElementToFocusOnOpening.focus();
+            }
         }
     }
     async setAriaAttribute(attr, value) {
@@ -152,7 +169,7 @@ export class Modal {
     }
     render() {
         const modalTitleId = `wcs-modal-title-${this.modalId}`;
-        return (h(Host, { key: '788a5cedac43a4d1852b4023f8600db0042845f0' }, h("div", Object.assign({ key: 'c55ba8369740a1ec9b818c0107500f93510aded1', class: "wcs-modal-container", "data-size": this.size, "aria-modal": true, role: "dialog", "aria-labelledby": modalTitleId, ref: (el) => (this.nativeDivDialog = el) }, this.inheritedAttributes), h("div", { key: '6f869f59b47b274c5dc0e0e759681fff626be7c1', class: "wcs-modal-header" }, h("h1", { key: '572be535d3479f26678cb54fd4937563021bfac5', id: modalTitleId }, h("slot", { key: 'f159aa7451f735f9e0f43c8005c64eab5dee00f5', name: "header" })), this.showCloseButton && (h("wcs-button", { key: 'd39b4182b6e5e1b41b6664cfccac9f1022ad9d8f', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: '83a8991df30b15f89485d4445d2e4d01f937e321', icon: "close" })))), h("div", { key: 'fe83c50300c4a591ae36f9902fba434138c24beb', class: "wcs-modal-content" }, h("slot", { key: '5b18bfc38086089afcf0f4c60094ef5be0b603b7', onSlotchange: () => this.handleSlotContentChange() })), !this.hideActions && (h("div", { key: '0d3814339cb5c072c3fa6566c2114d8402977b47', class: "wcs-modal-actions" }, h("slot", { key: 'de8e11419a0507da6338040d6506abeee851aef5', name: "actions" }))))));
+        return (h(Host, { key: 'e609fe2024b73cab0bed97c0d3b7012d8deba893' }, h("div", Object.assign({ key: '23007c4ad4971263f7fd99d0e594216cd112f6ea', class: "wcs-modal-container", "data-size": this.size, "aria-modal": "true", role: "dialog", "aria-labelledby": modalTitleId, ref: (el) => (this.nativeDivDialog = el) }, this.inheritedAttributes), h("div", { key: 'bc3e2ead8e3e73da31882c5e87cde2780d9ef2f9', class: "wcs-modal-header" }, h("h1", { key: '87561fc92b0990d00e06463afc111e9bdeab6f20', id: modalTitleId }, h("slot", { key: 'dbf6d932257e7a264206ddf7caea8a80e4b2b069', name: "header" })), this.showCloseButton && (h("wcs-button", { key: '97036ea40d111c5ac737b1e3f789571cd524cb2d', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: '24d6b531e788c2760c66804df96037714c9f854b', icon: "close" })))), h("div", { key: '34d9ddf3c4527395864a238f329d7b499eb9791b', class: "wcs-modal-content" }, h("slot", { key: '5bbd76fc7de9bc6f5aaec7257e7c73995d3e1447', onSlotchange: () => this.handleSlotContentChange() })), !this.hideActions && (h("div", { key: '0c082f533dd77e73721b3bcf29a6f3d3baac65b3', class: "wcs-modal-actions" }, h("slot", { key: '56bfb65b4784492747eda2f5eb87b29dc7704db3', name: "actions" }))))));
     }
     static get is() { return "wcs-modal"; }
     static get originalStyleUrls() {
@@ -300,6 +317,45 @@ export class Modal {
                 },
                 "attribute": "modal-trigger-controls-id",
                 "reflect": false
+            },
+            "initialFocusElementId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<wcs-modal initial-focus-element=\"cancel-button\"></wcs-modal>"
+                        }],
+                    "text": "The ID of the element to automatically focus when the modal opens.\n\nIf this property is not set and `disableAutoFocus` is false, the modal will\nautomatically focus the first focusable element within its content.\nThis follows accessibility best practices by ensuring keyboard navigation\nstarts from a logical point when the modal opens."
+                },
+                "attribute": "initial-focus-element-id",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "disableAutoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables automatic focus behavior when the modal opens.\n\nWhen set to true, the modal will not automatically focus any element upon opening.\nUse this property with caution, as managing focus is important for accessibility.\nConsider providing an alternative focus management strategy if disabling the default behavior."
+                },
+                "attribute": "disable-auto-focus",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/modal/modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Element,\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n ComponentInterface,\n Watch, Method\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { inheritAriaAttributes, inheritAttributes, isTabKey, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst MODAL_INHERITED_ATTRS = [];\n\n/*\n The modal component (also named dialog or popup) is an interface element that appears on top of the page content.\n * Use it to show a message, a confirmation dialog, or any other content like forms.\n \n ## Accessibility guidelines 💡\n * > - Modal element has `role=\"dialog\"` and `aria-modal=\"true\"`\n * > - Keyboard navigation is trapped inside the modal\n * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order\n * > to focus it upon dialog dismissal.\n * > - The modal can be closed at any time by pressing the Escape key.\n * >\n * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n \n @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-overflow-y - Overflow-y of the content\n \n @cssprop --wcs-modal-backdrop-color - Backdrop color of the modal\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-background-color - Background color of the modal\n * @cssprop --wcs-modal-border-radius - Border radius of the modal\n * @cssprop --wcs-modal-padding - Padding inside the modal\n * @cssprop --wcs-modal-border-width - Border width of the modal\n * @cssprop --wcs-modal-border-color - Border color of the modal\n * @cssprop --wcs-modal-title-margin-bottom - Margin bottom of the modal title\n * @cssprop --wcs-modal-title-font-size - Font size of the modal title\n * @cssprop --wcs-modal-title-font-weight - Font weight of the modal title\n * @cssprop --wcs-modal-title-line-height - Line height of the modal title\n * @cssprop --wcs-modal-actions-margin-top - Margin top of the modal actions\n * @cssprop --wcs-modal-width-s - Width of the modal for size small\n * @cssprop --wcs-modal-width-m - Width of the modal for size medium\n * @cssprop --wcs-modal-width-l - Width of the modal for size large\n * @cssprop --wcs-modal-width-xl - Width of the modal for size extra large\n * \n * @slot <no-name> Main container slot\n * @slot header Header container slot (for title)\n * @slot actions Actions container slot (for buttons)\n /\n@Component({\n tag: 'wcs-modal',\n styleUrl: 'modal.scss',\n shadow: false,\n})\nexport class Modal implements ComponentInterface, MutableAriaAttribute {\n @Element() private el: HTMLElement;\n private nativeDivDialog!: HTMLDivElement;\n private inheritedAttributes: { [k: string]: any } = {};\n\n /\n Specifies whether the component should display a backdrop on the entire page\n /\n @Prop({reflect: true}) withoutBackdrop: boolean = false;\n\n /\n Displays the modal\n /\n @Prop({reflect: true, mutable: true}) show: boolean = false;\n\n /\n Triggered when the user leaves the dialog with the closing button.\n /\n @Event() wcsDialogClosed: EventEmitter<void>;\n\n /\n Specifies whether the component should display a close button.\n * if false, it won't close the modal when the escape key is pressed.\n /\n @Prop({reflect: true}) showCloseButton: boolean = false;\n\n /\n Specifies the aria-label present on the close button when the modal is opened. \n * Only use when `showCloseButton` is `true`.\n /\n @Prop() closeButtonAriaLabel: string = 'Fermer';\n\n /\n There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\n * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.\n /\n @Prop() size: ModalSize = 'm';\n\n /\n Specifies whether the component should hide the actions slot or not\n /\n @Prop({reflect: true}) hideActions: boolean = false;\n\n /\n Specifies which element id controls the modal\n * @private\n /\n @Prop() modalTriggerControlsId: string;\n\n /\n Give an unique id\n * @private\n /\n private modalId: number = modalIds++;\n\n private firstFocusableElement: HTMLElement;\n private lastFocusableElement: HTMLElement;\n /\n This attribute is used to determine whether the show attribute has changed since the last rendering. \n * This allows us to call the focus method on the first element of the modal when the show attribute changes to true. \n * This call is made in the componentDidRender method\n * @private\n /\n private showAttributeChangedMarker: boolean = false;\n /\n This attribute is used to determine if the modal has been closed for the first time since its last activation.\n * It is set to 'true' when the modal is first closed, and will be reset to 'false' when the modal is shown again.\n * This state is important for accessibility reasons in order to focus the modal trigger element (like the button \n * which controls the modal)\n \n @private\n /\n private hasBeenClosedBefore: boolean = false;\n\n componentWillLoad(): Promise<void> \| void {\n if (!this.modalTriggerControlsId) {\n console.warn('wcs-modal: You must provide the modal-trigger-controls-id attribute to the modal to make it to work properly');\n }\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, MODAL_INHERITED_ATTRS),\n };\n }\n\n componentDidLoad() {\n this.updateFocusableElements();\n }\n\n componentDidRender() {\n this.updateFocusableElements();\n if (this.showAttributeChangedMarker) {\n this.showAttributeChangedMarker = false;\n this.firstFocusableElement?.focus();\n }\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeDivDialog, attr, value);\n }\n \n @Watch(\"show\")\n onShowChange() {\n if(this.show) {\n this.hasBeenClosedBefore = false;\n this.showAttributeChangedMarker = true;\n } else {\n // if we already made actions when the modal was firstly closed, we do nothing\n if(this.hasBeenClosedBefore) {\n return;\n }\n \n this.hasBeenClosedBefore = true;\n\n if(this.modalTriggerControlsId) {\n const modalTriggerControlsHtmlElement = document.getElementById(this.modalTriggerControlsId);\n if(!modalTriggerControlsHtmlElement) {\n console.warn(`wcs-modal: Element with id '${this.modalTriggerControlsId}' could not be found`);\n }\n modalTriggerControlsHtmlElement?.focus();\n }\n }\n }\n\n private updateFocusableElements() {\n const focusableElements = Array.from(this.el.querySelectorAll(''))\n .filter(element => isFocusable(element));\n\n this.firstFocusableElement = focusableElements.length > 0 && focusableElements[0] as HTMLElement;\n this.lastFocusableElement = focusableElements.length > 0 && focusableElements[focusableElements.length - 1] as HTMLElement;\n }\n \n private close() {\n // If the modal isn't shown, we don't do anything\n if (this.show) {\n this.show = false;\n this.wcsDialogClosed.emit();\n }\n }\n\n @Listen('keydown', {target: 'document'})\n onKeyDown(event: KeyboardEvent) {\n if (this.show && this.showCloseButton && event.key === 'Escape') {\n this.close();\n }\n\n if (this.show) {\n if (isTabKey(event)) {\n this.updateFocusableElements(); // XXX: maybe a performance issue\n const firstElement = this.firstFocusableElement;\n const lastElement = this.lastFocusableElement;\n\n if (event.shiftKey && isElementFocused(firstElement)) {\n event.preventDefault();\n lastElement.focus();\n } else if (!event.shiftKey && isElementFocused(lastElement)) {\n event.preventDefault();\n firstElement.focus();\n }\n }\n }\n }\n\n private onCloseButtonClick(_: MouseEvent) {\n this.close();\n }\n\n private handleSlotContentChange() {\n this.updateFocusableElements();\n }\n\n render() {\n const modalTitleId = `wcs-modal-title-${this.modalId}`;\n return (\n <Host>\n <div class=\"wcs-modal-container\"\n data-size={this.size}\n aria-modal={true}\n role={\"dialog\"}\n aria-labelledby={modalTitleId}\n ref={(el) => (this.nativeDivDialog = el)}\n {...this.inheritedAttributes}\n >\n <div class=\"wcs-modal-header\">\n <h1 id={modalTitleId}>\n <slot name=\"header\"></slot>\n </h1>\n {this.showCloseButton && (\n <wcs-button shape=\"round\" \n mode=\"clear\" \n id=\"wcs-modal-close-button\"\n aria-label={this.closeButtonAriaLabel}\n onClick={($event) => this.onCloseButtonClick($event)}>\n <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n </wcs-button>)\n }\n\n </div>\n <div class=\"wcs-modal-content\">\n <slot onSlotchange={() => this.handleSlotContentChange()}></slot>\n </div>\n {!this.hideActions && (\n <div class=\"wcs-modal-actions\">\n <slot name=\"actions\"></slot>\n </div>)\n }\n </div>\n </Host>\n );\n }\n}\n\nlet modalIds = 0;\n"]}
1	+ {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Element,\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n ComponentInterface,\n Watch, Method\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { inheritAriaAttributes, inheritAttributes, isTabKey, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst MODAL_INHERITED_ATTRS = [];\n\n/*\n The modal component (also named dialog or popup) is an interface element that appears on top of the page content.\n * Use it to show a message, a confirmation dialog, or any other content like forms.\n \n ## Accessibility guidelines 💡\n * > - Modal element has `role=\"dialog\"` and `aria-modal=\"true\"`\n * > - Keyboard navigation is trapped inside the modal\n * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order\n * > to focus it upon dialog dismissal.\n * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial \n * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you \n * > want to focus. You will see a story as example below\n * > - The modal can be closed at any time by pressing the Escape key.\n * >\n * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n \n @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-overflow-y - Overflow-y of the content\n \n @cssprop --wcs-modal-backdrop-color - Backdrop color of the modal\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-background-color - Background color of the modal\n * @cssprop --wcs-modal-border-radius - Border radius of the modal\n * @cssprop --wcs-modal-padding - Padding inside the modal\n * @cssprop --wcs-modal-border-width - Border width of the modal\n * @cssprop --wcs-modal-border-color - Border color of the modal\n * @cssprop --wcs-modal-title-margin-bottom - Margin bottom of the modal title\n * @cssprop --wcs-modal-title-font-size - Font size of the modal title\n * @cssprop --wcs-modal-title-font-weight - Font weight of the modal title\n * @cssprop --wcs-modal-title-line-height - Line height of the modal title\n * @cssprop --wcs-modal-actions-margin-top - Margin top of the modal actions\n * @cssprop --wcs-modal-width-s - Width of the modal for size small\n * @cssprop --wcs-modal-width-m - Width of the modal for size medium\n * @cssprop --wcs-modal-width-l - Width of the modal for size large\n * @cssprop --wcs-modal-width-xl - Width of the modal for size extra large\n * \n * @slot <no-name> Main container slot\n * @slot header Header container slot (for title)\n * @slot actions Actions container slot (for buttons)\n /\n@Component({\n tag: 'wcs-modal',\n styleUrl: 'modal.scss',\n shadow: false,\n})\nexport class Modal implements ComponentInterface, MutableAriaAttribute {\n @Element() private el: HTMLElement;\n private nativeDivDialog!: HTMLDivElement;\n private inheritedAttributes: { [k: string]: any } = {};\n\n /\n Specifies whether the component should display a backdrop on the entire page\n /\n @Prop({reflect: true}) withoutBackdrop: boolean = false;\n\n /\n Displays the modal\n /\n @Prop({reflect: true, mutable: true}) show: boolean = false;\n\n /\n Triggered when the user leaves the dialog with the closing button.\n /\n @Event() wcsDialogClosed: EventEmitter<void>;\n\n /\n Specifies whether the component should display a close button.\n * if false, it won't close the modal when the escape key is pressed.\n /\n @Prop({reflect: true}) showCloseButton: boolean = false;\n\n /\n Specifies the aria-label present on the close button when the modal is opened. \n * Only use when `showCloseButton` is `true`.\n /\n @Prop() closeButtonAriaLabel: string = 'Fermer';\n\n /\n There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\n * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.\n /\n @Prop() size: ModalSize = 'm';\n\n /\n Specifies whether the component should hide the actions slot or not\n /\n @Prop({reflect: true}) hideActions: boolean = false;\n\n /\n Specifies which element id controls the modal\n * @private\n /\n @Prop() modalTriggerControlsId: string;\n /\n The ID of the element to automatically focus when the modal opens.\n * \n * If this property is not set and `disableAutoFocus` is false, the modal will\n * automatically focus the first focusable element within its content.\n * This follows accessibility best practices by ensuring keyboard navigation\n * starts from a logical point when the modal opens.\n * \n * @example\n * <wcs-modal initial-focus-element=\"cancel-button\"></wcs-modal>\n /\n @Prop() initialFocusElementId?: string = undefined;\n\n /\n Disables automatic focus behavior when the modal opens.\n * \n * When set to true, the modal will not automatically focus any element upon opening.\n * Use this property with caution, as managing focus is important for accessibility.\n * Consider providing an alternative focus management strategy if disabling the default behavior.\n /\n @Prop({ reflect: true }) disableAutoFocus: boolean = false;\n\n /\n Give an unique id\n * @private\n /\n private modalId: number = modalIds++;\n\n private firstFocusableElement: HTMLElement;\n private lastFocusableElement: HTMLElement;\n /\n This attribute is used to determine whether the show attribute has changed since the last rendering. \n * This allows us to call the focus method on the first element of the modal when the show attribute changes to true. \n * This call is made in the componentDidRender method\n * @private\n /\n private showAttributeChangedMarker: boolean = false;\n /\n This attribute is used to determine if the modal has been closed for the first time since its last activation.\n * It is set to 'true' when the modal is first closed, and will be reset to 'false' when the modal is shown again.\n * This state is important for accessibility reasons in order to focus the modal trigger element (like the button \n * which controls the modal)\n \n @private\n /\n private hasBeenClosedBefore: boolean = false;\n\n componentWillLoad(): Promise<void> \| void {\n if (!this.modalTriggerControlsId) {\n console.warn('wcs-modal: You must provide the modal-trigger-controls-id attribute to the modal to make it to work properly');\n }\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, MODAL_INHERITED_ATTRS),\n };\n }\n\n componentDidLoad() {\n this.updateFocusableElements();\n }\n\n componentDidRender() {\n this.updateFocusableElements();\n if (this.showAttributeChangedMarker) {\n this.showAttributeChangedMarker = false;\n \n if(this.disableAutoFocus) {\n return;\n }\n \n if(!this.initialFocusElementId) {\n this.firstFocusableElement?.focus();\n } else {\n const modalElementToFocusOnOpening = document.getElementById(this.initialFocusElementId);\n if(!modalElementToFocusOnOpening) {\n console.warn(`wcs-modal: Unable to focus element - ID '${this.initialFocusElementId}' not found in DOM`);\n }\n \n modalElementToFocusOnOpening?.focus();\n }\n }\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeDivDialog, attr, value);\n }\n \n @Watch(\"show\")\n onShowChange() {\n if(this.show) {\n this.hasBeenClosedBefore = false;\n this.showAttributeChangedMarker = true;\n } else {\n // if we already made actions when the modal was firstly closed, we do nothing\n if(this.hasBeenClosedBefore) {\n return;\n }\n \n this.hasBeenClosedBefore = true;\n\n if(this.modalTriggerControlsId) {\n const modalTriggerControlsHtmlElement = document.getElementById(this.modalTriggerControlsId);\n if(!modalTriggerControlsHtmlElement) {\n console.warn(`wcs-modal: Element with id '${this.modalTriggerControlsId}' could not be found`);\n }\n modalTriggerControlsHtmlElement?.focus();\n }\n }\n }\n\n private updateFocusableElements() {\n const focusableElements = Array.from(this.el.querySelectorAll(''))\n .filter(element => isFocusable(element));\n\n this.firstFocusableElement = focusableElements.length > 0 && focusableElements[0] as HTMLElement;\n this.lastFocusableElement = focusableElements.length > 0 && focusableElements[focusableElements.length - 1] as HTMLElement;\n }\n \n private close() {\n // If the modal isn't shown, we don't do anything\n if (this.show) {\n this.show = false;\n this.wcsDialogClosed.emit();\n }\n }\n\n @Listen('keydown', {target: 'document'})\n onKeyDown(event: KeyboardEvent) {\n if (this.show && this.showCloseButton && event.key === 'Escape') {\n this.close();\n }\n\n if (this.show) {\n if (isTabKey(event)) {\n this.updateFocusableElements(); // XXX: maybe a performance issue\n const firstElement = this.firstFocusableElement;\n const lastElement = this.lastFocusableElement;\n\n if (event.shiftKey && isElementFocused(firstElement)) {\n event.preventDefault();\n lastElement.focus();\n } else if (!event.shiftKey && isElementFocused(lastElement)) {\n event.preventDefault();\n firstElement.focus();\n }\n }\n }\n }\n\n private onCloseButtonClick(_: MouseEvent) {\n this.close();\n }\n\n private handleSlotContentChange() {\n this.updateFocusableElements();\n }\n\n render() {\n const modalTitleId = `wcs-modal-title-${this.modalId}`;\n return (\n <Host>\n <div class=\"wcs-modal-container\"\n data-size={this.size}\n aria-modal=\"true\"\n role={\"dialog\"}\n aria-labelledby={modalTitleId}\n ref={(el) => (this.nativeDivDialog = el)}\n {...this.inheritedAttributes}\n >\n <div class=\"wcs-modal-header\">\n <h1 id={modalTitleId}>\n <slot name=\"header\"></slot>\n </h1>\n {this.showCloseButton && (\n <wcs-button shape=\"round\" \n mode=\"clear\" \n id=\"wcs-modal-close-button\"\n aria-label={this.closeButtonAriaLabel}\n onClick={($event) => this.onCloseButtonClick($event)}>\n <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n </wcs-button>)\n }\n\n </div>\n <div class=\"wcs-modal-content\">\n <slot onSlotchange={() => this.handleSlotContentChange()}></slot>\n </div>\n {!this.hideActions && (\n <div class=\"wcs-modal-actions\">\n <slot name=\"actions\"></slot>\n </div>)\n }\n </div>\n </Host>\n );\n }\n}\n\nlet modalIds = 0;\n"]}

package/dist/collection/components/native-select/native-select.css CHANGED Viewed

@@ -71,11 +71,11 @@
   fill: var(--wcs-native-select-arrow-color-disabled);
 }
-:host([data-size=m]) {
+:host, :host([data-size=m]) {
   font-size: var(--wcs-native-select-font-size-m);
   --wcs-native-select-internal-padding-horizontal: var(--wcs-native-select-padding-horizontal-m);
 }
-:host([data-size=m]) ::slotted(select) {
+:host ::slotted(select), :host([data-size=m]) ::slotted(select) {
   height: var(--wcs-native-select-size-m);
 }

package/dist/collection/components/native-select/native-select.js CHANGED Viewed

@@ -190,7 +190,7 @@ export class NativeSelect {
         this._updateStyles();
     }
     render() {
-        return (h(Host, { key: '5e8929f9ccf25d5bc43afa782569e182ddb893a2', class: `${this.expanded ? 'expanded' : ''}`, "data-disabled": this.disabled, "data-size": this.size }, h("div", { key: 'a98a456f9473002729388146f323730b7241dd51', class: "select-wrapper" }, h("slot", { key: 'd8760d4e7814655e0b27c806d0324b06877e4dea' }), h("div", { key: '816e210db4ff583e55f8a37401668cfcc0bd0f6b', class: "arrow-container" }, h(SelectArrow, { key: '97c5a9e253f437fff1baeacb863a13731fe3dc83', up: this.expanded })))));
+        return (h(Host, { key: 'dedd08d93118cc5323b6d2062577275504972b12', class: `${this.expanded ? 'expanded' : ''}`, "data-disabled": this.disabled, "data-size": this.size }, h("div", { key: 'bd211e20d0ab314767729ab54611c3d28fb8cca7', class: "select-wrapper" }, h("slot", { key: 'b0e58a954d0212c19a05395065ad5ed76efa9f39' }), h("div", { key: '5f70166ee1756180982a43151b9762e1cfec51d4', class: "arrow-container" }, h(SelectArrow, { key: 'ed256e18a87ab7cf17af6b5226ee6f10779d5bb1', up: this.expanded })))));
     }
     static get is() { return "wcs-native-select"; }
     static get encapsulation() { return "shadow"; }
@@ -245,7 +245,7 @@ export class NativeSelect {
                     "text": "If `true`, the user must fill in a value before submitting a form.\nIt is propagated to the slotted select element"
                 },
                 "attribute": "required",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             }
         };

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

	@@ -1 +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"]}
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({ 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -21,7 +21,7 @@ export class Nav {
         setOrRemoveAttribute(this.nativeNav, attr, value);
     }
     render() {
-        return (h("nav", Object.assign({ key: 'b21daddbeba58cc9f1a7488a50641062244e698b', role: "navigation", class: "wcs-nav-container", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("div", { key: '9a6aa465e017b462a444127e1a18dfe8814bb95f', role: "list" }, h("slot", { key: 'ef653234e05f5dd2bf1428562fcf8ee1dc695b72' }), h("slot", { key: '2e41b049ef0d82c5fecb8ef13b1cd59eec77e009', 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.css CHANGED Viewed

@@ -18,7 +18,7 @@ wcs-nav-item {
   --wcs-nav-item-color-active: var(--wcs-semantic-color-foreground-action-primary-default);
   --wcs-nav-item-color-hover: var(--wcs-semantic-color-foreground-action-primary-default);
   --wcs-nav-item-color-press: var(--wcs-semantic-color-foreground-action-primary-default);
-  --wcs-nav-item-border-color-focus: var(--wcs-semantic-color-foreground-action-primary-default);
+  --wcs-nav-item-border-color-focus: var(--wcs-semantic-color-border-focus-base-on-secondary);
   --wcs-nav-item-border-width-focus: var(--wcs-semantic-border-width-large);
   --wcs-nav-item-indicator-background-color: var(--wcs-semantic-color-background-surface-accent-light);
   --wcs-nav-item-indicator-width-desktop: calc(0.5 * var(--wcs-semantic-size-base));
@@ -36,7 +36,7 @@ wcs-nav-item {
   transition-timing-function: ease-in-out;
   background-color: var(--wcs-nav-item-background-color-default);
 }
-wcs-nav-item a {
+wcs-nav-item a, wcs-nav-item button {
   display: flex;
   position: relative;
   flex-direction: column;
@@ -52,7 +52,7 @@ wcs-nav-item a {
   color: var(--wcs-nav-item-color-default);
 }
 @media (max-width: 1199px) {
-  wcs-nav-item a {
+  wcs-nav-item a, wcs-nav-item button {
     display: flex;
     flex: 1;
     height: var(--wcs-nav-item-height-mobile);
@@ -60,11 +60,15 @@ wcs-nav-item a {
     font-size: var(--wcs-nav-item-font-size-mobile);
   }
 }
-wcs-nav-item a:focus {
+wcs-nav-item button {
+  width: 100%;
+  cursor: inherit;
+}
+wcs-nav-item a:focus, wcs-nav-item button:focus {
   outline: none;
 }
 @media (max-width: 1199px) {
-  wcs-nav-item:has(a:focus-visible) {
+  wcs-nav-item:has(a:focus-visible), wcs-nav-item:has(button:focus-visible) {
     outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);
     outline-offset: -2px;
     border-radius: var(--wcs-nav-item-border-width-focus);
@@ -76,9 +80,16 @@ wcs-nav-item a:focus {
       border-radius: var(--wcs-nav-item-border-width-focus);
     }
   }
+  @supports not selector(&:has(button:focus-visible)) {
+    wcs-nav-item:focus-within {
+      outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);
+      outline-offset: -2px;
+      border-radius: var(--wcs-nav-item-border-width-focus);
+    }
+  }
 }
 @media (min-width: 1200px) {
-  wcs-nav-item:has(a:focus-visible) {
+  wcs-nav-item:has(a:focus-visible), wcs-nav-item:has(button:focus-visible) {
     outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);
     outline-offset: -2px;
     border-radius: var(--wcs-nav-item-border-width-focus);
@@ -90,6 +101,13 @@ wcs-nav-item a:focus {
       border-radius: var(--wcs-nav-item-border-width-focus);
     }
   }
+  @supports not selector(&:has(button:focus-visible)) {
+    wcs-nav-item:focus-within {
+      outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);
+      outline-offset: -2px;
+      border-radius: var(--wcs-nav-item-border-width-focus);
+    }
+  }
 }
 wcs-nav-item i {
   margin-bottom: 0.5rem;

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

@@ -45,7 +45,7 @@ export class NavItem {
         }
     }
     render() {
-        return (h(Host, { key: '013d857a5e7c718eb08554541b99ba6ca7231561', role: "listitem" }, h("slot", { key: '2054563b72fbbefcbc11b69ccaa136864488c3f5' })));
+        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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -54,8 +54,8 @@ export class ProgressBar {
         const style = {
             width: this.value + '%'
         };
-        return (h("div", Object.assign({ key: '5eafbef962694edca0d5df1ba278305024b62c52', 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: '247b91b7898ef6c1c2ee16100bc344ec633beb9b', class: "progress-bar", style: style }, this.showLabel &&
-            h("span", { key: '24da06a23d7c1bae748872823defd844302d6d64', class: "progress-label" }, this.value, h("sup", { key: '0deaf0870a815c32d8c45767f12c41b4ee8b493b' }, "%")))));
+        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 CHANGED Viewed

	@@ -1 +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"]}
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;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 CHANGED Viewed

@@ -45,8 +45,8 @@ export class ProgressRadial {
     }
     render() {
         const { backgroundImageSize, halfSize } = { backgroundImageSize: this.backgroundImageSize, halfSize: this.backgroundImageSize / 2 };
-        return (h("div", Object.assign({ key: '20a1b2ec2f830712df1314092685217a949fb29d', 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: '92572a6d6d5be7eca3a89285f77a8a5e0b6a2afa', "data-role": "figure", class: "circle-rail", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}` }, h("circle", { key: 'c1b1ced5b7d6e618ef5b99b917505c1fdf26bed3', cx: halfSize, cy: halfSize, r: 54, "stroke-width": 12 })), h("svg", { key: 'f5d3484a174d41b7d30c74f86c804f4580de3adf', class: "progress-circle-figure", "data-role": "figure", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}`, style: this.getSvgStyle() }, h("circle", { key: 'c050adc6249e7e02a93a4c1ae5a3964e30693a6b', class: "progress-circle-value", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" })), this.showLabel &&
-            h("div", { key: '7f1c735090e8bffeef031273988df3bb6d5ef3cb', class: "progress-circle-label", "data-role": "label" }, h("span", { key: 'b7bb1c1413f747b1fa69d4c604290a7c5b4474a2' }, h("span", { key: 'ce9dba9d9e9772486ba6ffee33f3333d48686805', "data-role": "labelvalue" }, this.value), h("sup", { key: 'ac7fb3d250f950bc87d1fbde2fcc6e6d6d6e3d4b' }, "%")))));
+        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 CHANGED Viewed

	@@ -1 +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"]}
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;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 CHANGED Viewed

@@ -131,7 +131,7 @@ export class Radio {
         });
     }
     render() {
-        return (h(Host, { key: 'ebbb03e1c723a28798544b5f75bf305b74db2fe4', slot: "option", tabIndex: this.disabled ? -1 : this.radioTabIndex, class: this.checked ? 'checked' : '' }, h("input", Object.assign({ key: '6deafa14c6a33bb215ce629d2065cbc118692912', id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, ref: (el) => (this.nativeRadio = el) }, this.inheritedAttributes)), h("label", { key: 'a1bc3da98121c65a7589218fc57ca7c3baad1b67', 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"; }
@@ -197,7 +197,7 @@ export class Radio {
                     "text": "If `true`, the user cannot interact with the radio."
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "name": {