@roadtrip/components 3.51.3 → 3.53.0

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

@@ -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,10 +45,19 @@ export class Drawer {
          * Override focus trap
          */
         this.enabledFocusTrap = true;
+        /**
+         * whitelisted selectors
+         */
+        this.whitelistSelectors = [];
         /**
          * Footer Content state
          */
         this.hasFooterContent = false;
+        /**
+         * Used to ensure open transitions run when the drawer
+         * is initially mounted with `isOpen=true`.
+         */
+        this.hasMounted = false;
         this.onFooterSlotChange = (event) => {
             const slot = event.target;
             this.hasFooterContent = slot.assignedElements().length > 0;
@@ -100,6 +110,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
      */
@@ -115,18 +154,19 @@ export class Drawer {
         }, 100); // Timeout is used to ensure the drawer has been rendered when client wants to update the property at the same time
     }
     handleOpen(openValue) {
-        var _a;
+        var _a, _b;
+        const dialog = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.drawer-dialog');
         if (openValue === true) {
             this.onOpen.emit();
-            this.el.addEventListener("transitionend", () => {
+            dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("transitionend", () => {
                 if (this.enabledFocusTrap) {
                     this.getOrCreateFocusTrap().activate();
                 }
             }, { once: true });
         }
         else {
-            (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
-            this.el.addEventListener("transitionend", () => {
+            (_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.deactivate();
+            dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("transitionend", () => {
                 this.onClose.emit();
                 this.el.shadowRoot &&
                     (this.el.shadowRoot.querySelector(".drawer-body").scrollTop = 0);
@@ -145,20 +185,36 @@ export class Drawer {
         this.el.querySelectorAll('[data-dismiss="modal"]').forEach((item) => {
             item.addEventListener("click", () => this.close());
         });
-        if (this.isOpen) {
-            this.handleOpen(true);
-        }
+        // Wait for the first paint so the "closed" transform can be applied,
+        // then open on the next frame to allow CSS transitions to run.
+        requestAnimationFrame(() => {
+            this.hasMounted = true;
+            if (this.isOpen) {
+                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,
             });
         }
@@ -166,7 +222,8 @@ export class Drawer {
     }
     render() {
         var _a, _b, _c;
-        const drawerIsOpenClass = this.isOpen ? "drawer-open" : "";
+        const isEffectivelyOpen = this.isOpen && this.hasMounted;
+        const drawerIsOpenClass = isEffectivelyOpen ? "drawer-open" : "";
         const removePaddingClass = this.removePadding ? "remove-padding" : "";
         const inverseHeaderClass = this.hasInverseHeader
             ? "drawer-header-inverse"
@@ -178,7 +235,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: 'ecd747ab4372bed7cefb4647dfaf9404c7206b53', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: '1d5760b82a095696e30867669f607d5c3608c308', class: "road-drawer-wrapper" }, h("div", { key: '4d519361b71dd228e7a35a1ee20f741911e0752f', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '36dc3dac85b6784b66f5a12476be608d2b43c40c', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: '74a7d03928a6919fa6cd95c6a66a61c9bf225e20', class: "drawer-content" }, h("header", { key: 'f4c543d1ea08ee62ea3a9f93e34499a7f5c81fa5', 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: '796030c5a5cf6661aa4c1f4c10cc039e0e550d4c', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: '8c0bdfa660ace789ea5a01ada7ce3cd9c5cc3d4a' })), h("footer", { key: 'a52a747ea4c5de885fc440ac4f8247f5c9ab88b0', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, h("slot", { key: '0bef80d08a9e6078f025768eb88f93df86517fb9', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
     }
     static get is() { return "road-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -448,13 +505,32 @@ 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": "[]"
             }
         };
     }
     static get states() {
         return {
             "focusTrap": {},
-            "hasFooterContent": {}
+            "hasFooterContent": {},
+            "hasMounted": {}
         };
     }
     static get events() {
@@ -557,6 +633,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

@@ -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"]}
+{"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\";\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   * Used to ensure open transitions run when the drawer\n   * is initially mounted with `isOpen=true`.\n   */\n  @State() hasMounted = 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    const dialog = this.el.shadowRoot?.querySelector('.drawer-dialog')\n\n    if (openValue === true) {\n      this.onOpen.emit();\n      dialog?.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      dialog?.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    // Wait for the first paint so the \"closed\" transform can be applied,\n    // then open on the next frame to allow CSS transitions to run.\n    requestAnimationFrame(() => {\n      this.hasMounted = true;\n      if (this.isOpen) {\n        this.handleOpen(true);\n      }\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 isEffectivelyOpen = this.isOpen && this.hasMounted;\n    const drawerIsOpenClass = isEffectivelyOpen ? \"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

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

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

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

@@ -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}"]}
+{"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["../../../src/components/segmented-button/segmented-button.tsx"],"names":[],"mappings":"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","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

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

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

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

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

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

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

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

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

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

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

@@ -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"; }