npm - @roadtrip/components - Versions diffs - 3.51.3 → 3.52.0 - Mend

@roadtrip/components 3.51.3 → 3.52.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 (160) hide show

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

@@ -42,7 +42,7 @@ export class Badge {
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
-                    "resolved": "\"accent\" | \"danger\" | \"default\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | undefined",
+                    "resolved": "\"accent\" | \"danger\" | \"default\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | undefined",
                     "references": {
                         "Color": {
                             "location": "import",

package/dist/collection/components/badge/badge.stories.js CHANGED Viewed

@@ -8,7 +8,7 @@ export default {
   argTypes: {
     color: {
       description: "Color of the badge",
-      options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'danger', 'inverse'],
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'danger', 'inverse', 'neutral'],
       control: {
         type: 'select',
       },

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

@@ -1,6 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import { navigationClose, navigationChevron } from "../../../icons";
 import { createFocusTrap } from "focus-trap";
+import { tabbable } from "tabbable";
 /**
  * @slot  - Content of the drawer.
  * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set
@@ -44,6 +45,10 @@ export class Drawer {
          * Override focus trap
          */
         this.enabledFocusTrap = true;
+        /**
+         * whitelisted selectors
+         */
+        this.whitelistSelectors = [];
         /**
          * Footer Content state
          */
@@ -100,6 +105,35 @@ export class Drawer {
     async back() {
         this.onBack.emit();
     }
+    /**
+     * Update the whitelist selectors at runtime and recreate the focus trap.
+     * Use this instead of updating the prop directly to ensure the change is detected,
+     * since Stencil compares arrays by reference.
+     */
+    async updateWhitelistSelectors(selectors) {
+        var _a;
+        this.whitelistSelectors = selectors;
+        const containers = [];
+        this.whitelistSelectors.forEach(selector => {
+            const el = document.querySelector(selector);
+            if (el)
+                containers.push(el);
+        });
+        const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
+        if (drawerContent)
+            containers.push(drawerContent);
+        this.resetFocusTrap(containers);
+    }
+    resetFocusTrap(elements) {
+        if (this.focusTrap) {
+            const isActive = this.focusTrap.active;
+            this.focusTrap.deactivate();
+            this.focusTrap = undefined;
+            if (isActive) {
+                this.getOrCreateFocusTrap(elements).activate();
+            }
+        }
+    }
     /**
      * Enable/disable focus trap so it can be overrided by the client in case of something appearing over the drawer like a modal for example
      */
@@ -149,16 +183,27 @@ export class Drawer {
             this.handleOpen(true);
         }
     }
-    getOrCreateFocusTrap() {
+    getOrCreateFocusTrap(elements) {
         var _a;
         if (!this.focusTrap) {
             const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
-            this.focusTrap = createFocusTrap(drawerContent, {
+            const elmt = (elements === null || elements === void 0 ? void 0 : elements.length) ? elements : [drawerContent];
+            this.focusTrap = createFocusTrap(elmt, {
+                initialFocus: () => {
+                    if (!elmt.length)
+                        return undefined;
+                    const allTabbables = tabbable(elmt[0], { getShadowRoot: true });
+                    return allTabbables[0];
+                },
                 onActivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.add("focus-trapped"),
                 onDeactivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.remove("focus-trapped"),
+                allowOutsideClick: (event) => {
+                    return this.whitelistSelectors.some(s => event.target.closest(s));
+                },
                 tabbableOptions: {
                     getShadowRoot: true,
                 },
+                fallbackFocus: this.el,
                 preventScroll: true,
             });
         }
@@ -178,7 +223,7 @@ export class Drawer {
         const backIconElement = this.hasBackIcon ? (h("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
         const closeIconElement = this.hasCloseIcon ? (h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))) : null;
         const drawerWidthValue = this.position === "bottom" ? "100%" : `${this.drawerWidth}px`;
-        return (h(Host, { key: 'f3f7bb36db4476325b4e7a879a739529bc79d964', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: '407cd4cc74d0f94f43cb306e8e7c819b771493dd', class: "road-drawer-wrapper" }, h("div", { key: '2f09ca1bfff5bf81ed94a277910dbb6017d0b984', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'ae71f5011512dd1dd2a3cdd69b7ca6c8838b787f', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: '94cf3ed5d1a5e62cf15ec3a20a6bb786a240d61a', class: "drawer-content" }, h("header", { key: '58c9716838a98d57a0f147aed96c7b06d98ac9cf', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '5d97f008d5514de90fac3c7d6c517882216aee00', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: '53a401cd8b6295017d4903e7626d2ab643ad8b26' })), h("footer", { key: 'e1c65d15af977b46484d35c6b93def36c3523fdb', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, h("slot", { key: 'c7b7694a70fb98a9057d5292acbf6bdda42267c5', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
+        return (h(Host, { key: 'c7eb453776139d160c5304536e79ab0af0232290', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: 'af1efa519efd2b12f49475d5a84c90767beeacf0', class: "road-drawer-wrapper" }, h("div", { key: 'c43ce7162e3616b51b9e668a459d8c729b1f414f', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '5c69c051e7c1eb827d2df487f58f8c5237388a7f', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: 'fa483418e0660b8c2fdb79838581650e5f0b1174', class: "drawer-content" }, h("header", { key: 'cdc22b61772f7f425f4d5f41c2ceb3d6b2d8478b', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '6d44de12a434ea729754187aca476c78e6e0e7a7', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: 'dfe2557f8ddffb9a8b6b9ed41661c726c650bd6b' })), h("footer", { key: '7cd86ddeb089a5b06649a993a6315a317b543863', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, h("slot", { key: '58fa205ff641909acb5d1d12d660024e50ab4058', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
     }
     static get is() { return "road-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -448,6 +493,24 @@ export class Drawer {
                 "attribute": "enabled-focus-trap",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "whitelistSelectors": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "whitelisted selectors"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
             }
         };
     }
@@ -557,6 +620,31 @@ export class Drawer {
                     "text": "Return to previous state of the drawer content",
                     "tags": []
                 }
+            },
+            "updateWhitelistSelectors": {
+                "complexType": {
+                    "signature": "(selectors: string[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "selectors",
+                            "type": "string[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Update the whitelist selectors at runtime and recreate the focus trap.\nUse this instead of updating the prop directly to ensure the change is detected,\nsince Stencil compares arrays by reference.",
+                    "tags": []
+                }
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n Prop,\n h,\n Host,\n Watch,\n State,\n} from \"@stencil/core\";\nimport { navigationClose, navigationChevron } from \"../../../icons\";\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\n/*\n @slot - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n ` </div>`\n /\n\n@Component({\n tag: \"road-drawer\",\n styleUrl: \"drawer.css\",\n shadow: true,\n})\nexport class Drawer {\n /\n Current reference of the drawer\n /\n @Element() el!: HTMLRoadDrawerElement;\n\n /\n Set isOpen property to true to open the drawer\n /\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /\n Set removePadding property to true to remove padding for drawer body\n /\n @Prop({ mutable: true }) removePadding: boolean = false;\n\n /\n position of the drawer. e.g. left, right, bottom\n /\n @Prop() position: string = \"left\";\n\n /\n Width of the drawer\n /\n @Prop() drawerWidth: number = 480;\n\n /\n Inverse header colors\n /\n @Prop() hasInverseHeader: boolean = false;\n\n /\n Show / hide back icon\n /\n @Prop() hasBackIcon: boolean = false;\n\n /\n Show / hide back icon\n /\n @Prop() backText?: string;\n\n /\n Title of the drawer in the header bar\n /\n @Prop() drawerTitle?: string;\n\n /\n Aria label of the drawer\n /\n @Prop() ariaLabel?: string;\n\n /\n Aria label of the drawer\n /\n @Prop() ariaLabelBack?: string;\n\n /\n Aria label of the drawer\n /\n @Prop() ariaLabelClose?: string;\n\n /\n Show / hide close icon\n /\n @Prop() hasCloseIcon: boolean = true;\n\n /\n Override focus trap\n /\n @Prop() enabledFocusTrap: boolean = true;\n\n /\n Indicate when opening the drawer\n /\n @Event({ eventName: \"open\" }) onOpen!: EventEmitter<void>;\n\n /\n Indicate when closing the drawer\n /\n @Event({ eventName: \"close\" }) onClose!: EventEmitter<void>;\n\n /\n Indicate when return to previous state of the drawer content\n /\n @Event({ eventName: \"back\" }) onBack!: EventEmitter<void>;\n\n /\n Focus trap state\n /\n @State() focusTrap?: FocusTrap;\n\n /\n Footer Content state\n /\n @State() hasFooterContent = false;\n\n /\n Open the drawer\n /\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /\n Close the drawer\n /\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n /\n Return to previous state of the drawer content\n /\n @Method()\n async back() {\n this.onBack.emit();\n }\n\n /\n Enable/disable focus trap so it can be overrided by the client in case of something appearing over the drawer like a modal for example\n /\n @Watch(\"enabledFocusTrap\")\n handleFocusTrapProp(value: boolean) {\n setTimeout(() => {\n if (value) {\n this.focusTrap?.unpause();\n } else {\n this.focusTrap?.pause();\n }\n }, 100); // Timeout is used to ensure the drawer has been rendered when client wants to update the property at the same time\n }\n\n@Watch(\"isOpen\")\nhandleOpen(openValue: boolean) {\n if (openValue === true) {\n this.onOpen.emit();\n this.el.addEventListener(\n \"transitionend\",\n () => {\n if (this.enabledFocusTrap) {\n this.getOrCreateFocusTrap().activate();\n }\n },\n { once: true },\n );\n } else {\n this.focusTrap?.deactivate();\n this.el.addEventListener(\n \"transitionend\",\n () => {\n this.onClose.emit();\n this.el.shadowRoot &&\n ((this.el.shadowRoot.querySelector(\".drawer-body\") as HTMLElement).scrollTop = 0);\n },\n { once: true },\n );\n }\n}\n\n private onFooterSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n this.hasFooterContent = slot.assignedElements().length > 0;\n };\n\n /\n Find and focus the first element in the drawer\n /\n /\n Find and focus the first element in the drawer\n /\n // private focusFirstElement() {\n // const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex=\"-1\"])')[0] as HTMLElement;\n //\n // if (firstElement) {\n // firstElement.focus();\n // }\n // }\n\n /\n Close the dialog when clicking on the cross or layer\n /\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n /\n Close the dialog when clicking on the cross or layer\n /\n private onClickBack = (event: MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n\n this.back();\n };\n\n /\n Close the dialog when press Escape key\n */\n @Listen(\"keyup\", { target: \"document\" })\n onEscape(event: KeyboardEvent) {\n if (event.key === \"Escape\" \|\| event.key === \"Esc\") {\n this.close();\n }\n }\n\n componentDidLoad() {\n this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach((item) => {\n item.addEventListener(\"click\", () => this.close());\n });\n\n if (this.isOpen) {\n this.handleOpen(true);\n }\n}\n\nprivate getOrCreateFocusTrap(): FocusTrap {\n if (!this.focusTrap) {\n const drawerContent = this.el.shadowRoot?.querySelector(\".road-drawer-wrapper\");\n this.focusTrap = createFocusTrap(drawerContent as HTMLElement, {\n onActivate: () => drawerContent?.classList.add(\"focus-trapped\"),\n onDeactivate: () => drawerContent?.classList.remove(\"focus-trapped\"),\n tabbableOptions: {\n getShadowRoot: true,\n },\n preventScroll: true,\n });\n }\n return this.focusTrap;\n}\n\n render() {\n const drawerIsOpenClass = this.isOpen ? \"drawer-open\" : \"\";\n const removePaddingClass = this.removePadding ? \"remove-padding\" : \"\";\n const inverseHeaderClass = this.hasInverseHeader\n ? \"drawer-header-inverse\"\n : \"\";\n const ariaLabel = this.ariaLabel ?? \"drawer\";\n const ariaLabelBack = this.ariaLabelBack ?? \"Back\";\n const ariaLabelClose = this.ariaLabelClose ?? \"Close\";\n const drawerDelimiterClass =\n this.drawerTitle && !this.hasInverseHeader ? \"drawer-delimiter\" : \"\";\n const backIconElement = this.hasBackIcon ? (\n <button\n type=\"button\"\n class=\"drawer-action\"\n aria-label={ariaLabelBack}\n onClick={this.onClickBack}\n >\n <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n {this.backText}\n </button>\n ) : null;\n const closeIconElement = this.hasCloseIcon ? (\n <button\n type=\"button\"\n class=\"drawer-close\"\n onClick={this.onClick}\n aria-label={ariaLabelClose}\n >\n <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n </button>\n ) : null;\n const drawerWidthValue =\n this.position === \"bottom\" ? \"100%\" : `${this.drawerWidth}px`;\n\n return (\n <Host\n class={`${drawerIsOpenClass} drawer-${this.position}`}\n tabindex=\"0\"\n role=\"dialog\"\n aria-label={ariaLabel}\n >\n <div class=\"road-drawer-wrapper\">\n <div\n class=\"drawer-overlay\"\n onClick={this.onClick}\n tabindex=\"-1\"\n ></div>\n <div\n class=\"drawer-dialog\"\n style={{ maxWidth: drawerWidthValue }}\n role=\"document\"\n >\n <div class=\"drawer-content\">\n <header\n class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}\n >\n {backIconElement}\n {this.drawerTitle ? (\n <h2 class=\"drawer-title\">{this.drawerTitle}</h2>\n ) : (\n <div class=\"drawer-title\">\n <slot name=\"title\" />\n </div>\n )}\n {closeIconElement}\n </header>\n <div class={`drawer-body ${removePaddingClass}`}>\n <slot />\n </div>\n <footer\n class={`drawer-footer ${removePaddingClass}`}\n hidden={!this.hasFooterContent}\n >\n <slot name=\"footer\" onSlotchange={this.onFooterSlotChange} />\n </footer>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAa,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC;;;;;;;;GAQG;AAOH,MAAM,OAAO,MAAM;IALnB;QAWE;;WAEG;QACsB,WAAM,GAAY,KAAK,CAAC;QAEjD;;WAEG;QACsB,kBAAa,GAAY,KAAK,CAAC;QAExD;;WAEG;QACK,aAAQ,GAAW,MAAM,CAAC;QAElC;;WAEG;QACK,gBAAW,GAAW,GAAG,CAAC;QAElC;;WAEG;QACK,qBAAgB,GAAY,KAAK,CAAC;QAE1C;;WAEG;QACK,gBAAW,GAAY,KAAK,CAAC;QA2BrC;;WAEG;QACK,iBAAY,GAAY,IAAI,CAAC;QAErC;;WAEG;QACK,qBAAgB,GAAY,IAAI,CAAC;QAEzC;;WAEG;QACsB,uBAAkB,GAAa,EAAE,CAAC;QAsB3D;;WAEG;QACM,qBAAgB,GAAG,KAAK,CAAC;QAmG1B,uBAAkB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC5C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;YAC7C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAC7D,CAAC,CAAC;QAEF;;WAEG;QACH;;WAEG;QACH,gCAAgC;QAChC,oRAAoR;QACpR,EAAE;QACF,wBAAwB;QACxB,4BAA4B;QAC5B,MAAM;QACN,IAAI;QAEJ;;WAEG;QACK,YAAO,GAAG,CAAC,EAAW,EAAE,EAAE;YAChC,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,CAAC;QAEF;;WAEG;QACK,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,CAAC;KAkIH;IAxQC;;OAEG;IAEH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,wBAAwB,CAAC,SAAmB;;QAChD,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC;QACpC,MAAM,UAAU,GAAkB,EAAE,CAAC;QAErC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YACzC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC5C,IAAI,EAAE;gBAAE,UAAU,CAAC,IAAI,CAAC,EAAiB,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;QAEH,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAChF,IAAI,aAAa;YAAE,UAAU,CAAC,IAAI,CAAC,aAA4B,CAAC,CAAC;QAEjE,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC;IAED,cAAc,CAAC,QAAwB;QACrC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;YACvC,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;YAC5B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC3B,IAAI,QAAQ,EAAE,CAAC;gBACb,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;YACjD,CAAC;QACH,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,mBAAmB,CAAC,KAAc;QAChC,UAAU,CAAC,GAAG,EAAE;;YAChB,IAAI,KAAK,EAAE,CAAC;gBACV,MAAA,IAAI,CAAC,SAAS,0CAAE,OAAO,EAAE,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACN,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;YACxB,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,mHAAmH;IAC9H,CAAC;IAGD,UAAU,CAAC,SAAkB;;QAC3B,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACnB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CACtB,eAAe,EACf,GAAG,EAAE;gBACH,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC,QAAQ,EAAE,CAAC;gBACzC,CAAC;YACH,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,MAAA,IAAI,CAAC,SAAS,0CAAE,UAAU,EAAE,CAAC;YAC7B,IAAI,CAAC,EAAE,CAAC,gBAAgB,CACtB,eAAe,EACf,GAAG,EAAE;gBACH,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;gBACpB,IAAI,CAAC,EAAE,CAAC,UAAU;oBAChB,CAAE,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAiB,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;YACtF,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;QACJ,CAAC;IACH,CAAC;IAyCD;;OAEG;IAEH,QAAQ,CAAC,KAAoB;QAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YAClD,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED,gBAAgB;QAChB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAClE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,oBAAoB,CAAC,QAAwB;;QACnD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;YAChF,MAAM,IAAI,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,EAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;YAC3D,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,IAAqB,EAAE;gBACtD,YAAY,EAAE,GAAG,EAAE;oBACjB,IAAI,CAAC,IAAI,CAAC,MAAM;wBAAE,OAAO,SAAS,CAAC;oBAEnC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;oBACjE,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC;gBACzB,CAAC;gBACD,UAAU,EAAE,GAAG,EAAE,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;gBAC/D,YAAY,EAAE,GAAG,EAAE,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC;gBACpE,iBAAiB,EAAE,CAAC,KAAK,EAAE,EAAE;oBAC3B,OAAO,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAE,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrF,CAAC;gBACD,eAAe,EAAE;oBACf,aAAa,EAAE,IAAI;iBACpB;gBACD,aAAa,EAAE,IAAI,CAAC,EAAiB;gBACrC,aAAa,EAAE,IAAI;aACpB,CAAC,CAAC;QACL,CAAC;QACD,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEC,MAAM;;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;QACtE,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB;YAC9C,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,EAAE,CAAC;QACP,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,SAAS,mCAAI,QAAQ,CAAC;QAC7C,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,aAAa,mCAAI,MAAM,CAAC;QACnD,MAAM,cAAc,GAAG,MAAA,IAAI,CAAC,cAAc,mCAAI,OAAO,CAAC;QACtD,MAAM,oBAAoB,GACxB,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;QACvE,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACzC,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,eAAe,gBACT,aAAa,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW;YAEzB,iBAAW,IAAI,EAAE,iBAAiB,EAAE,MAAM,EAAC,KAAK,GAAa;YAC5D,IAAI,CAAC,QAAQ,CACP,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;QACT,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAC3C,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,IAAI,CAAC,OAAO,gBACT,cAAc;YAE1B,iBAAW,IAAI,EAAE,eAAe,iBAAc,MAAM,GAAa,CAC1D,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;QACT,MAAM,gBAAgB,GACpB,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC;QAEhE,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,GAAG,iBAAiB,YAAY,IAAI,CAAC,QAAQ,EAAE,EACtD,QAAQ,EAAC,GAAG,EACZ,IAAI,EAAC,QAAQ,gBACD,SAAS;YAErB,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,4DACE,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAC,IAAI,GACR;gBACP,4DACE,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EACrC,IAAI,EAAC,UAAU;oBAEf,4DAAK,KAAK,EAAC,gBAAgB;wBACzB,+DACE,KAAK,EAAE,iBAAiB,kBAAkB,IAAI,oBAAoB,EAAE;4BAEnE,eAAe;4BACf,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,UAAI,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAM,CACjD,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,cAAc;gCACvB,YAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACP;4BACA,gBAAgB,CACV;wBACT,4DAAK,KAAK,EAAE,eAAe,kBAAkB,EAAE;4BAC7C,8DAAQ,CACJ;wBACN,+DACE,KAAK,EAAE,iBAAiB,kBAAkB,EAAE,EAC5C,MAAM,EAAE,CAAC,IAAI,CAAC,gBAAgB;4BAE9B,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB,GAAI,CACtD,CACL,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n Prop,\n h,\n Host,\n Watch,\n State,\n} from \"@stencil/core\";\nimport { navigationClose, navigationChevron } from \"../../../icons\";\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { tabbable } from 'tabbable';\n\n/*\n @slot - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n ` </div>`\n /\n\n@Component({\n tag: \"road-drawer\",\n styleUrl: \"drawer.css\",\n shadow: true,\n})\nexport class Drawer {\n /\n Current reference of the drawer\n /\n @Element() el!: HTMLRoadDrawerElement;\n\n /\n Set isOpen property to true to open the drawer\n /\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /\n Set removePadding property to true to remove padding for drawer body\n /\n @Prop({ mutable: true }) removePadding: boolean = false;\n\n /\n position of the drawer. e.g. left, right, bottom\n /\n @Prop() position: string = \"left\";\n\n /\n Width of the drawer\n /\n @Prop() drawerWidth: number = 480;\n\n /\n Inverse header colors\n /\n @Prop() hasInverseHeader: boolean = false;\n\n /\n Show / hide back icon\n /\n @Prop() hasBackIcon: boolean = false;\n\n /\n Show / hide back icon\n /\n @Prop() backText?: string;\n\n /\n Title of the drawer in the header bar\n /\n @Prop() drawerTitle?: string;\n\n /\n Aria label of the drawer\n /\n @Prop() ariaLabel?: string;\n\n /\n Aria label of the drawer\n /\n @Prop() ariaLabelBack?: string;\n\n /\n Aria label of the drawer\n /\n @Prop() ariaLabelClose?: string;\n\n /\n Show / hide close icon\n /\n @Prop() hasCloseIcon: boolean = true;\n\n /\n Override focus trap\n /\n @Prop() enabledFocusTrap: boolean = true;\n\n /\n whitelisted selectors\n /\n @Prop({ mutable: true }) whitelistSelectors: string[] = [];\n\n /\n Indicate when opening the drawer\n /\n @Event({ eventName: \"open\" }) onOpen!: EventEmitter<void>;\n\n /\n Indicate when closing the drawer\n /\n @Event({ eventName: \"close\" }) onClose!: EventEmitter<void>;\n\n /\n Indicate when return to previous state of the drawer content\n /\n @Event({ eventName: \"back\" }) onBack!: EventEmitter<void>;\n\n /\n Focus trap state\n /\n @State() focusTrap?: FocusTrap;\n\n /\n Footer Content state\n /\n @State() hasFooterContent = false;\n\n /\n Open the drawer\n /\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /\n Close the drawer\n /\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n /\n Return to previous state of the drawer content\n /\n @Method()\n async back() {\n this.onBack.emit();\n }\n\n /\n Update the whitelist selectors at runtime and recreate the focus trap.\n * Use this instead of updating the prop directly to ensure the change is detected,\n * since Stencil compares arrays by reference.\n /\n @Method()\n async updateWhitelistSelectors(selectors: string[]) {\n this.whitelistSelectors = selectors;\n const containers: HTMLElement[] = [];\n\n this.whitelistSelectors.forEach(selector => {\n const el = document.querySelector(selector);\n if (el) containers.push(el as HTMLElement);\n });\n\n const drawerContent = this.el.shadowRoot?.querySelector(\".road-drawer-wrapper\");\n if (drawerContent) containers.push(drawerContent as HTMLElement);\n\n this.resetFocusTrap(containers);\n }\n\n resetFocusTrap(elements?: HTMLElement[]) {\n if (this.focusTrap) {\n const isActive = this.focusTrap.active;\n this.focusTrap.deactivate();\n this.focusTrap = undefined;\n if (isActive) {\n this.getOrCreateFocusTrap(elements).activate();\n }\n }\n }\n\n /\n Enable/disable focus trap so it can be overrided by the client in case of something appearing over the drawer like a modal for example\n /\n @Watch(\"enabledFocusTrap\")\n handleFocusTrapProp(value: boolean) {\n setTimeout(() => {\n if (value) {\n this.focusTrap?.unpause();\n } else {\n this.focusTrap?.pause();\n }\n }, 100); // Timeout is used to ensure the drawer has been rendered when client wants to update the property at the same time\n }\n\n @Watch(\"isOpen\")\n handleOpen(openValue: boolean) {\n if (openValue === true) {\n this.onOpen.emit();\n this.el.addEventListener(\n \"transitionend\",\n () => {\n if (this.enabledFocusTrap) {\n this.getOrCreateFocusTrap().activate();\n }\n },\n { once: true },\n );\n } else {\n this.focusTrap?.deactivate();\n this.el.addEventListener(\n \"transitionend\",\n () => {\n this.onClose.emit();\n this.el.shadowRoot &&\n ((this.el.shadowRoot.querySelector(\".drawer-body\") as HTMLElement).scrollTop = 0);\n },\n { once: true },\n );\n }\n }\n\n private onFooterSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n this.hasFooterContent = slot.assignedElements().length > 0;\n };\n\n /\n Find and focus the first element in the drawer\n /\n /\n Find and focus the first element in the drawer\n /\n // private focusFirstElement() {\n // const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex=\"-1\"])')[0] as HTMLElement;\n //\n // if (firstElement) {\n // firstElement.focus();\n // }\n // }\n\n /\n Close the dialog when clicking on the cross or layer\n /\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n /\n Close the dialog when clicking on the cross or layer\n /\n private onClickBack = (event: MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n\n this.back();\n };\n\n /\n Close the dialog when press Escape key\n */\n @Listen(\"keyup\", { target: \"document\" })\n onEscape(event: KeyboardEvent) {\n if (event.key === \"Escape\" \|\| event.key === \"Esc\") {\n this.close();\n }\n }\n\n componentDidLoad() {\n this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach((item) => {\n item.addEventListener(\"click\", () => this.close());\n });\n\n if (this.isOpen) {\n this.handleOpen(true);\n }\n}\n\nprivate getOrCreateFocusTrap(elements?: HTMLElement[]): FocusTrap {\n if (!this.focusTrap) {\n const drawerContent = this.el.shadowRoot?.querySelector(\".road-drawer-wrapper\");\n const elmt = elements?.length ? elements : [drawerContent];\n this.focusTrap = createFocusTrap(elmt as HTMLElement[], {\n initialFocus: () => {\n if (!elmt.length) return undefined;\n\n const allTabbables = tabbable(elmt[0]!, { getShadowRoot: true });\n return allTabbables[0];\n },\n onActivate: () => drawerContent?.classList.add(\"focus-trapped\"),\n onDeactivate: () => drawerContent?.classList.remove(\"focus-trapped\"),\n allowOutsideClick: (event) => {\n return this.whitelistSelectors.some(s => (event.target as HTMLElement).closest(s));\n },\n tabbableOptions: {\n getShadowRoot: true,\n },\n fallbackFocus: this.el as HTMLElement,\n preventScroll: true,\n });\n }\n return this.focusTrap;\n}\n\n render() {\n const drawerIsOpenClass = this.isOpen ? \"drawer-open\" : \"\";\n const removePaddingClass = this.removePadding ? \"remove-padding\" : \"\";\n const inverseHeaderClass = this.hasInverseHeader\n ? \"drawer-header-inverse\"\n : \"\";\n const ariaLabel = this.ariaLabel ?? \"drawer\";\n const ariaLabelBack = this.ariaLabelBack ?? \"Back\";\n const ariaLabelClose = this.ariaLabelClose ?? \"Close\";\n const drawerDelimiterClass =\n this.drawerTitle && !this.hasInverseHeader ? \"drawer-delimiter\" : \"\";\n const backIconElement = this.hasBackIcon ? (\n <button\n type=\"button\"\n class=\"drawer-action\"\n aria-label={ariaLabelBack}\n onClick={this.onClickBack}\n >\n <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n {this.backText}\n </button>\n ) : null;\n const closeIconElement = this.hasCloseIcon ? (\n <button\n type=\"button\"\n class=\"drawer-close\"\n onClick={this.onClick}\n aria-label={ariaLabelClose}\n >\n <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n </button>\n ) : null;\n const drawerWidthValue =\n this.position === \"bottom\" ? \"100%\" : `${this.drawerWidth}px`;\n\n return (\n <Host\n class={`${drawerIsOpenClass} drawer-${this.position}`}\n tabindex=\"0\"\n role=\"dialog\"\n aria-label={ariaLabel}\n >\n <div class=\"road-drawer-wrapper\">\n <div\n class=\"drawer-overlay\"\n onClick={this.onClick}\n tabindex=\"-1\"\n ></div>\n <div\n class=\"drawer-dialog\"\n style={{ maxWidth: drawerWidthValue }}\n role=\"document\"\n >\n <div class=\"drawer-content\">\n <header\n class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}\n >\n {backIconElement}\n {this.drawerTitle ? (\n <h2 class=\"drawer-title\">{this.drawerTitle}</h2>\n ) : (\n <div class=\"drawer-title\">\n <slot name=\"title\" />\n </div>\n )}\n {closeIconElement}\n </header>\n <div class={`drawer-body ${removePaddingClass}`}>\n <slot />\n </div>\n <footer\n class={`drawer-footer ${removePaddingClass}`}\n hidden={!this.hasFooterContent}\n >\n <slot name=\"footer\" onSlotchange={this.onFooterSlotChange} />\n </footer>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -103,7 +103,7 @@ export class Icon {
                 "mutable": false,
                 "complexType": {
                     "original": "Color | 'white'",
-                    "resolved": "\"accent\" | \"danger\" | \"default\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"white\" | undefined",
+                    "resolved": "\"accent\" | \"danger\" | \"default\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"white\" | undefined",
                     "references": {
                         "Color": {
                             "location": "import",

package/dist/collection/components/segmented-button/segmented-button.css CHANGED Viewed

@@ -17,7 +17,7 @@
   flex: 1;
   align-items: center;
   justify-content: center;
-  max-height: 2.75rem;
+  max-height: 3rem;
   font-size: var(--road-button-medium);
   font-weight: 700;
   color: var(--road-on-surface-weak);
@@ -51,6 +51,14 @@
   height: 2.75rem;
 }
+/**
+* medium
+*/
+:host(.btn-lg) {
+  height: 3rem;
+}
 /**
  * Active state
  */
@@ -136,5 +144,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
+  display: flex;
+  align-items: center;
+}
+.button-content-badge{
+  margin-left: var(--road-spacing-03);
 }

package/dist/collection/components/segmented-button/segmented-button.js CHANGED Viewed

@@ -52,10 +52,11 @@ export class SegmentedButton {
     render() {
         const { tabIndex, selected, tab } = this;
         const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
-        return (h(Host, { key: '20194d71e8ca1c839c4a6287511fcb9ad1318e67', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: 'c32084087edad1374074d06d73fe718361396247', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 [`${sizeClass}`]: true,
-            } }, h("span", { key: 'cf51481805c04571bc3ef97a150b011bd8c0e79e', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("span", { key: '595aae2ef9621aa6a39ef2388373ec3708972bbb', class: "button-content" }, h("slot", { key: '9b6e874b79e88265b6c56465e9f84a5849363016' })))));
+            } }, h("span", { key: '55c39f3b6508f33537a0d0e243bc61a700d5c533', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("span", { key: 'fa599539a08ff52bbfe0c479e809926aecabc85a', class: "button-content" }, h("slot", { key: '044b41c9a2217d62aa30f4221d4a5670105e7bd5' }), this.badge &&
+            h("road-badge", { key: '35a10d98aa0149976dcb21c4f7cb546753ed933f', color: this.selected ? 'primary' : 'neutral', class: "button-content-badge" }, this.badge)))));
     }
     static get is() { return "road-segmented-button"; }
     static get encapsulation() { return "shadow"; }
@@ -75,8 +76,8 @@ export class SegmentedButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sm' | 'md'",
-                    "resolved": "\"md\" | \"sm\" | undefined",
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -129,6 +130,25 @@ export class SegmentedButton {
                 "setter": false,
                 "attribute": "tab",
                 "reflect": false
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A badge can be added to the segmented button by providing a string value to this property."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "badge",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/segmented-button/segmented-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["../../../src/components/segmented-button/segmented-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE/F;;;GAGG;AAOH,MAAM,OAAO,eAAe;IAL5B;QASE;;YAEI;QACK,SAAI,~~GAAiB~~,IAAI,CAAC;~~QAEnC~~;;WAEG;QACsB,aAAQ,GAAG,KAAK,CAAC;~~QAmDlC~~,YAAO,GAAG,CAAC,EAAiB,EAAE,EAAE;YACtC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACzC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;QAEM,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;YAC9B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC,CAAC;~~KA6BH~~;~~IAvEC~~,kBAAkB,CAAC,EAAe;QAChC,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B,CAAC;QAEpD,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;YACpH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;QAC7C,CAAC;IACH,CAAC;IAEO,SAAS,CAAC,EAAyB;QACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YACH,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YAEH,EAAE,CAAC,cAAc,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,IAAY,QAAQ;QAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAErD,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC1C,CAAC;QAED,OAAO,CAAC,CAAC;IACX,CAAC;IAYD,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QAEzC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAGpE,OAAO,CACL,EAAC,IAAI,qDACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,mBACH,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,EAClD,KAAK,EAAE;gBACL,cAAc,EAAE,QAAQ;gBACxB,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,IAAI;aACvB;YAED,6DAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM;gBACxE,6DAAM,KAAK,EAAC,gBAAgB;oBAC1B,8DAAO,~~CACF~~,CACF,CACF,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/*\n \n * @part native - The native HTML anchor element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-segmented-button',\n styleUrl: 'segmented-button.css',\n shadow: true,\n})\nexport class SegmentedButton {\n\n @Element() el!: HTMLRoadSegmentedButtonElement;\n\n /\n The Segmented buttons size.\n /\n @Prop() size?: 'sm' \| 'md' = 'md';\n\n /\n The selected tab component\n /\n @Prop({ mutable: true }) selected = false;\n\n /\n A tab id must be provided for each `road-tab`. It's used internally to reference\n /\n @Prop() tab?: string;\n\n /\n Emitted when the tab bar is clicked\n * @internal\n /\n @Event() roadsegmentedbuttonclick!: EventEmitter;\n /* @internal */\n @Event() roadSegmentedButtonClick!: EventEmitter;\n\n @Listen('roadSegmentedButtonBarChanged', { target: 'window' })\n @Listen('roadSegmentedButtonbarchanged', { target: 'window' })\n onButtonBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) \|\| (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadsegmentedbuttonclick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n this.roadSegmentedButtonClick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\n }\n\n private onKeyUp = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.selectTab(ev);\n }\n };\n\n private onClick = (ev: Event) => {\n this.selectTab(ev);\n };\n\n render() {\n const { tabIndex, selected, tab } = this;\n\n const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n\n\n return (\n <Host\n onClick={this.onClick}\n onKeyup={this.onKeyUp}\n role=\"tab\"\n tabindex={tabIndex}\n aria-selected={selected ? 'true' : null}\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n [`${sizeClass}`]: true,\n }}\n >\n <span tabIndex={-1} class=\"button-native\" part=\"native\" aria-hidden=\"true\">\n <span class=\"button-content\">\n <slot/>\n </span>\n </span>\n </Host>\n );\n }\n}"]}
1	+ {"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["../../../src/components/segmented-button/segmented-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE/F;;;GAGG;AAOH,MAAM,OAAO,eAAe;IAL5B;QASE;;YAEI;QACK,SAAI,GAAyB,IAAI,CAAC;QAE3C;;WAEG;QACsB,aAAQ,GAAG,KAAK,CAAC;QAwDlC,YAAO,GAAG,CAAC,EAAiB,EAAE,EAAE;YACtC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACzC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;QAEM,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;YAC9B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC,CAAC;KA+BH;IAzEC,kBAAkB,CAAC,EAAe;QAChC,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B,CAAC;QAEpD,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;YACpH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;QAC7C,CAAC;IACH,CAAC;IAEO,SAAS,CAAC,EAAyB;QACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YACH,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YAEH,EAAE,CAAC,cAAc,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,IAAY,QAAQ;QAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAErD,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC1C,CAAC;QAED,OAAO,CAAC,CAAC;IACX,CAAC;IAYD,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QAEzC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAGpE,OAAO,CACL,EAAC,IAAI,qDACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,mBACH,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,EAClD,KAAK,EAAE;gBACL,cAAc,EAAE,QAAQ;gBACxB,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,IAAI;aACvB;YAED,6DAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM;gBACxE,6DAAM,KAAK,EAAC,gBAAgB;oBAC1B,8DAAO;oBACN,IAAI,CAAC,KAAK;wBACT,mEAAY,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAc,CAC7G,CACF,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/*\n \n * @part native - The native HTML anchor element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-segmented-button',\n styleUrl: 'segmented-button.css',\n shadow: true,\n})\nexport class SegmentedButton {\n\n @Element() el!: HTMLRoadSegmentedButtonElement;\n\n /\n The Segmented buttons size.\n /\n @Prop() size?: 'sm' \| 'md' \| 'lg' = 'md';\n\n /\n The selected tab component\n /\n @Prop({ mutable: true }) selected = false;\n\n /\n A tab id must be provided for each `road-tab`. It's used internally to reference\n /\n @Prop() tab?: string;\n\n /\n A badge can be added to the segmented button by providing a string value to this property.\n /\n @Prop() badge?:string;\n\n /\n Emitted when the tab bar is clicked\n * @internal\n /\n @Event() roadsegmentedbuttonclick!: EventEmitter;\n /* @internal */\n @Event() roadSegmentedButtonClick!: EventEmitter;\n\n @Listen('roadSegmentedButtonBarChanged', { target: 'window' })\n @Listen('roadSegmentedButtonbarchanged', { target: 'window' })\n onButtonBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) \|\| (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadsegmentedbuttonclick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n this.roadSegmentedButtonClick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\n }\n\n private onKeyUp = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.selectTab(ev);\n }\n };\n\n private onClick = (ev: Event) => {\n this.selectTab(ev);\n };\n\n render() {\n const { tabIndex, selected, tab } = this;\n\n const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n\n\n return (\n <Host\n onClick={this.onClick}\n onKeyup={this.onKeyUp}\n role=\"tab\"\n tabindex={tabIndex}\n aria-selected={selected ? 'true' : null}\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n [`${sizeClass}`]: true,\n }}\n >\n <span tabIndex={-1} class=\"button-native\" part=\"native\" aria-hidden=\"true\">\n <span class=\"button-content\">\n <slot/>\n {this.badge &&\n <road-badge color={this.selected ? 'primary' : 'neutral'} class=\"button-content-badge\">{this.badge}</road-badge>}\n </span>\n </span>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/segmented-button-bar/segmented-button-bar.js CHANGED Viewed

@@ -18,7 +18,7 @@ export class ButtonBar {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: '9d6937fa6b2840970dd93648f1e79724562d91bf', role: "tablist" }, h("slot", { key: '63de3253cb8eb6e9d4fa2374a1fab04ff64b174a' })));
+        return (h(Host, { key: '76466abd7a912ac1a0df83853216c3f20ac3086a', role: "tablist" }, h("slot", { key: '04290019d2aea356a7fd24739b68c371455e3b70' })));
     }
     static get is() { return "road-segmented-button-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-buttons/segmented-buttons.js CHANGED Viewed

@@ -86,7 +86,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: 'df0d2cbe2bf0647686439e58ab7e47067bb85a18', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: '0181d346ee8cf63cab8eac42c8932e1f5477288f', name: "top" }), h("slot", { key: 'c3c0f5c41618721ace911e149d1218b0f8412369' })));
+        return (h(Host, { key: '74762d3d2e76c9926a2344182debdd17dbf3c011', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: 'f4d5f461a7fe74ebc76c181b185932759ceb0f34', name: "top" }), h("slot", { key: '6b99ef4524d2aa3f55b95b33b7028097abb03712' })));
     }
     static get is() { return "road-segmented-buttons"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-buttons/segmented-buttons.stories.js CHANGED Viewed

@@ -123,4 +123,43 @@ Small.args = {
   </road-tab>`,
 };
+export const Large = Template.bind({});
+Large.args = {
+  top: `<road-segmented-button-bar slot="top" selected-tab="tab-description">
+    <road-segmented-button tab="tab-description" size="lg">
+      Description
+    </road-segmented-button>
+    <road-segmented-button tab="tab-services" size="lg">
+      Services
+    </road-segmented-button>
+    </road-segmented-button-bar>`,
+  ' ': `<road-tab tab="tab-description">
+    Description
+  </road-tab>
+  <road-tab tab="tab-services">
+    Services
+  </road-tab>`,
+};
+export const Badge = Template.bind({});
+Badge.args = {
+  top: `<road-segmented-button-bar slot="top" selected-tab="tab-description">
+    <road-segmented-button tab="tab-description" size="md" badge="i">
+      Description
+    </road-segmented-button>
+    <road-segmented-button tab="tab-services" size="md" badge="3">
+      Services
+    </road-segmented-button>
+    </road-segmented-button-bar>`,
+  ' ': `<road-tab tab="tab-description">
+    Description
+  </road-tab>
+  <road-tab tab="tab-services">
+    Services
+  </road-tab>`,
+};

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

@@ -92,7 +92,7 @@ export class Select {
         const labelId = this.selectId + '-label';
         const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: 'e86d30d1fe1fd95d7b70140a57d76f3992cbc035', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '9a438873eedc20213b7e6c8bae2c648c9c1e0ad1', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, h("option", { key: '67d63f752f9f0fa2d48ee4ec07029c7e43706729', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: 'c07e091eb4b6da4ab793c2056131c16bf9ee4723', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: 'd01132cad717c35ca5a5afe2ad8effb697037a13', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '2f884ebd87cf990ab093ee5a023cd698c6883a8f', class: "helper" }, this.helper)));
+        return (h(Host, { key: '5bb29d6c8e7ed03e244ec3fdd239589bab5cabe0', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '2493089b1bb3c57c3af43ebbb5daff18ae4744e0', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, h("option", { key: 'e2bf03909eac53047f830ce9a655a643690f918e', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: '8a8ad20b057bec306e122587b24f5ffbcb79a3de', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: '1d5648a6e2fb46921900ff639b17ac5cc536350e', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '88a14e5d848bda00fea2088013037f37559387f0', class: "helper" }, this.helper)));
     }
     static get is() { return "road-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -179,7 +179,7 @@ export class SelectFilter {
         const options = this.filteredOptions;
         const isActive = this.isActive ? 'true' : 'false';
         const notActive = this.isActive ? '' : 'not-active';
-        return (h(Host, { key: '5d0540d59c53f2506b97fdaa40a1fae6381098f5', "is-active": isActive }, h("slot", { key: 'e7b5e449426fe5364b5a12a5aa408a98a033869e' }), this.isOpen && (h("div", { key: '01f532bba66042887e23c5892609e4dd174d8330', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (h("div", { class: "select-filter-empty" }, "Aucune option")) : (h("ul", { class: "pl-0" }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: (e) => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, ''), e), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 })))))))));
+        return (h(Host, { key: '7fdfb3dadc614f4e851891dceb20e19f33074443', "is-active": isActive }, h("slot", { key: 'e2be686790e0ad87e002c8f393cee0ac0864d532' }), this.isOpen && (h("div", { key: '155ccb2711eaa3f8e92f25a3d3b7b9dfa34d4021', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (h("div", { class: "select-filter-empty" }, "Aucune option")) : (h("ul", { class: "pl-0" }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: (e) => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, ''), e), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 })))))))));
     }
     static get is() { return "road-select-filter"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Skeleton {
     render() {
-        return (h("span", { key: 'ec2419ddcf62a6b2aeedd68ec0c1eb8e430f8185' }, "\u00A0"));
+        return (h("span", { key: 'eecb6ba03a976649272ec4df632022afa71b4a1e' }, "\u00A0"));
     }
     static get is() { return "road-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class Spinner {
     render() {
         const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
         const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
-        return (h("svg", { key: 'fc286db53f3b74155c3221474abb9472d774e89d', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: 'a40ef2366ff12fe69486f3db0d92b7d49affd370', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (h("svg", { key: 'eb559d1ad35ed62c6c4cb1e7280faf29e52fe2f6', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '8faa4a39732b5b882a2c76abed424d95846c3083', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
     static get is() { return "road-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/status-chip/status-chip.js CHANGED Viewed

@@ -21,7 +21,7 @@ export class StatusChip {
         };
     }
     render() {
-        return (h(Host, { key: '178e109ebeac6b66b105e3aa12cfc1cd942e83cc', class: `chip-${this.size}`, tabindex: "0", role: "button", onClick: this.onActivate, onKeyDown: this.onKeyDown }, h("div", { key: '5904c24f62ed7636205a0bf05431f698930ae615', class: "chip-description" }, h("road-icon", { key: '5a6767d216edc33ba42b6788102e90469c276a7e', class: "chip-icon", color: "info", icon: alertInfoSolid }), h("slot", { key: '03dfda63fce2ecbfeac0b16e1f54157f75bbe156' }))));
+        return (h(Host, { key: 'f261ddcd3afd748b815d63d973724d0898b48cd7', class: `chip-${this.size}`, tabindex: "0", role: "button", onClick: this.onActivate, onKeyDown: this.onKeyDown }, h("div", { key: '1a6fdaf843be1db93ee850456d662c98c6ab182b', class: "chip-description" }, h("road-icon", { key: '169dc92bb2d1ef16083019799ba80573731464f4', class: "chip-icon", color: "info", icon: alertInfoSolid }), h("slot", { key: '4e24bd7b4a140a532970959e5c2140a54910feb6' }))));
     }
     static get is() { return "road-status-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,11 +70,11 @@ export class Switch {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = h("label", { key: '22fa2b6f8be006647d123f0fc8eb077afad13aca', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = h("label", { key: 'c232e4f3505aa5d27a54077cf9883fef864efc4d', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
         const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';
         const isSpacedClass = this.isSpaced && 'form-switch-spaced';
         const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';
-        return (h(Host, { key: 'afcb3cea4c1ee2740769cc1364d9175d5a144ba7' }, h("input", { key: '2dace2130557a4c73b79dcd494cc33a7541e6737', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '81450123a463b3619774e65b7e49c3637b5d0037', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '4bf60bf353f80414ac1bba264966b0ca00405b07', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: '3d93be9bb557c13028dabaef2e82a1e53b814c56' }, h("input", { key: '9682f18c59fa23c8bdaeb30c27ea0aea4c37b2e2', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '30340789f9d2d0182d478f7e840d705afcb4cf13', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '7dd93e85e3a444f92dbfb524e5ba401e1f5ecb7d', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get is() { return "road-switch"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,9 +21,9 @@ export class Tab {
     }
     render() {
         const { tab, active } = this;
-        return (h(Host, { key: '1f2746fc33e9b879bc8558f18685bdf2f243fdf1', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'e5f32c9c796b1a798eca2d24a7a660d808d060f8', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'tab-hidden': !active,
-            } }, h("slot", { key: '38d4df4049aa57b8160855d33990f1b2db21d259' })));
+            } }, h("slot", { key: '018740decce73c280c77ba78216623ac0f842e9d' })));
     }
     static get is() { return "road-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-bar/tab-bar.js CHANGED Viewed

@@ -36,11 +36,11 @@ export class TabBar {
     }
     render() {
         const { expand, center, secondary } = this;
-        return (h(Host, { key: 'c44503ddd4b988d4c35891794c92998299811acb', role: "tablist", class: {
+        return (h(Host, { key: '598640b2a0d7bfc657df37e30deff1a0aee2698c', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, h("slot", { key: '356756006ef297ea0933437004f703dc8eccacf9' })));
+            } }, h("slot", { key: '2f8c35375effb72f15d0b37d80ff3dd3a2779b22' })));
     }
     static get is() { return "road-tab-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-button/tab-button.js CHANGED Viewed

@@ -71,7 +71,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '15684e85cbefb6d8646231adfc2bd423a59edb84', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: 'd0232d92d13b395713e9537e4e985b9b1aef4be8', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 'tab-has-label': hasLabel,
                 'tab-has-icon': hasIcon,
@@ -79,7 +79,7 @@ export class TabButton {
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
                 'tab-disabled': disabled, // Classe CSS pour les styles désactivés
-            } }, h("a", Object.assign({ key: '8808982bb613680dcf3e7e330d6ac113f2d2f47f' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: 'cc2bb1c13f607c1e3c8088179c3c6ce49f272222', class: "button-inner" }, h("slot", { key: 'a471b49c35cdfc57bd2f5a7156381ea051f1649f' })))));
+            } }, h("a", Object.assign({ key: '3cfffe4aef2432b2a23eb2ff6c86c5da125f0e04' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '36f97b5e282bf7870228ca6651629b766d614512', class: "button-inner" }, h("slot", { key: '4f963acbe1cc57893b19c0f86af05b8e754c96c1' })))));
     }
     static get is() { return "road-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class Table {
     render() {
-        return (h("slot", { key: 'df60a444f486b688b982684f727e28468022b801' }));
+        return (h("slot", { key: '81dd5f1f536cbc1362baa3027bb76b8fa5a6022b' }));
     }
     static get is() { return "road-table"; }
     static get encapsulation() { return "scoped"; }

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

@@ -99,7 +99,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: '09627e578a4f116e875445939739ffb334429c05', onRoadTabButtonClick: this.onTabClicked }, h("slot", { key: 'ffe9f5b8d3ac85e47a16650254e94376a59376de', name: "top" }), h("div", { key: '1443f709510efff63fdb972db851916406321ac5', class: "tabs-inner" }, h("slot", { key: 'ce206df02b9e5e4933bf1dde5447313cb2ecd900' }))));
+        return (h(Host, { key: '0e0850a766229851fb10751a2c598517ea6ab666', onRoadTabButtonClick: this.onTabClicked }, h("slot", { key: '449935aea69a4bb19f26ffefa9427af73dea2400', name: "top" }), h("div", { key: 'cca0b8a935a1e8df7fc9ce46fab95371910e7676', class: "tabs-inner" }, h("slot", { key: '649c2c4cec7a0cd43dfc668eab513ce80207ac9a' }))));
     }
     static get is() { return "road-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class Tag {
     }
     render() {
         const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
-        return (h(Host, { key: 'e69d81ddb79dcbc736b38c9f7f0e15d5328444ee', class: `${contrastClass}` }, h("slot", { key: '0dc393d2b05bb35d1d17696ea3771ad067a30962' })));
+        return (h(Host, { key: 'c17a38527980d6d453ba3846f9a3b2d57f31c071', class: `${contrastClass}` }, h("slot", { key: '77293988ddc60d4defb5e1600db3340c95335cb3' })));
     }
     static get is() { return "road-tag"; }
     static get encapsulation() { return "shadow"; }