@roadtrip/components 3.52.0 → 3.53.0

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\";\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"]}
+{"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/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-05a7fd2f.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy(JSON.parse("[[\"road-badge_14\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"readonly\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]},null,{\"value\":[\"onValueChange\"],\"readonly\":[\"onValueChange\"]}],[1,\"road-item\",{\"titleItem\":[1,\"title-item\"],\"text\":[1],\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"layout\":[1],\"target\":[1],\"type\":[1],\"multipleInputs\":[32]}],[1,\"road-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[1,\"road-drawer\",{\"isOpen\":[1028,\"is-open\"],\"removePadding\":[1028,\"remove-padding\"],\"position\":[1],\"drawerWidth\":[2,\"drawer-width\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"hasBackIcon\":[4,\"has-back-icon\"],\"backText\":[1,\"back-text\"],\"drawerTitle\":[1,\"drawer-title\"],\"ariaLabel\":[1,\"aria-label\"],\"ariaLabelBack\":[1,\"aria-label-back\"],\"ariaLabelClose\":[1,\"aria-label-close\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"enabledFocusTrap\":[4,\"enabled-focus-trap\"],\"whitelistSelectors\":[1040],\"focusTrap\":[32],\"hasFooterContent\":[32],\"open\":[64],\"close\":[64],\"back\":[64],\"updateWhitelistSelectors\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"enabledFocusTrap\":[\"handleFocusTrapProp\"],\"isOpen\":[\"handleOpen\"]}],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"blockdecimal\":[4],\"autocorrect\":[1],\"autofocus\":[4],\"disabled\":[4],\"enterkeyhint\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"sizes\":[1],\"type\":[1],\"value\":[1032],\"label\":[1],\"error\":[1],\"success\":[4],\"helper\":[1],\"list\":[1],\"debounce\":[2],\"enforceMinMaxValue\":[64],\"focus\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4],\"size\":[513]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"inverse\":[4],\"iconOnly\":[516,\"icon-only\"],\"disabled\":[516],\"expand\":[516],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"outline\":[4]}],[1,\"road-input-group\",{\"disabled\":[4]},null,{\"disabled\":[\"handleDisabledChange\"]}],[1,\"road-label\"],[1,\"road-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"svgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIcon\"],\"src\":[\"loadIcon\"],\"icon\":[\"loadIcon\"]}]]],[\"road-duration\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-content-card\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-alert\",[[1,\"road-alert\",{\"color\":[1],\"layout\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"],\"isOpen\":[1028,\"is-open\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-banner\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"pagertype\":[1],\"arrows\":[4],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"getPreviousIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipeToNext\":[64],\"lockSwipeToPrev\":[64],\"lockSwipes\":[64],\"getSwiper\":[64]},null,{\"options\":[\"optionsChanged\"]}]]],[\"road-checkbox\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"secondaryLabel\":[1,\"secondary-label\"],\"inverse\":[4],\"error\":[1],\"helper\":[1],\"size\":[513]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-phone-number-input\",[[2,\"road-phone-number-input\",{\"disabled\":[4],\"countryData\":[16],\"language\":[1],\"codeLabel\":[1,\"code-label\"],\"phoneLabel\":[1,\"phone-label\"],\"phoneValue\":[1,\"phone-value\"],\"countryCode\":[1,\"country-code\"],\"errorMessage\":[1,\"error-message\"],\"required\":[4],\"selectedCountry\":[32],\"selectedCountryCode\":[32],\"phoneNumber\":[32],\"countryOptions\":[32],\"returnObject\":[32]}]]],[\"road-range\",[[6,\"road-range\",{\"rangeId\":[1,\"range-id\"],\"value\":[1032],\"min\":[1],\"max\":[1],\"step\":[1],\"showValue\":[4,\"show-value\"],\"showTick\":[4,\"show-tick\"],\"showLabels\":[4,\"show-labels\"],\"disabled\":[4]},[[2,\"focus\",\"handleFocus\"],[2,\"blur\",\"handleBlur\"]],{\"value\":[\"valueChanged\"]}]]],[\"road-segmented-button\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1],\"badge\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-status-chip\",[[1,\"road-status-chip\",{\"size\":[1]}]]],[\"road-time-range-picker\",[[6,\"road-time-range-picker\",{\"start\":[1025],\"end\":[1025],\"disabled\":[4],\"helper\":[1],\"separator\":[1],\"required\":[4],\"label\":[1],\"sizes\":[1],\"error\":[1],\"getRange\":[64]}]]],[\"road-toast\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-toggle\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-area-code\",[[2,\"road-area-code\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1025],\"triggerRender\":[1026,\"trigger-render\"],\"selectedValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-aspect-ratio\",[[1,\"road-aspect-ratio\",{\"ratio\":[1]}]]],[\"road-asset\",[[1,\"road-asset\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"asset\":[8],\"lazy\":[4],\"sanitize\":[4],\"assetSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadAsset\"],\"src\":[\"loadAsset\"],\"asset\":[\"loadAsset\"]}]]],[\"road-autocomplete\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-carousel\",[[1,\"road-button-carousel\",{\"outline\":[4],\"disabled\":[516]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-button-floating\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item\",[[4,\"road-carousel-item\"]]],[\"road-flap\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-global-navigation-v2\",[[1,\"road-global-navigation-v2\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"],[8,\"click\",\"onButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration\",[[1,\"road-illustration\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"illustration\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"illustrationSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIllustration\"],\"src\":[\"loadIllustration\"],\"illustration\":[\"loadIllustration\"]}]]],[\"road-navbar\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]],{\"selected\":[\"handleSelectedChange\"]}]]],[\"road-navbar-item-v2\",[[1,\"road-navbar-item-v2\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]],{\"selected\":[\"handleSelectedChange\"]}]]],[\"road-navbar-v2\",[[1,\"road-navbar-v2\",{\"compact\":[516],\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-progress\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[2],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1],\"progresscalculationbase\":[1]}]]],[\"road-progress-indicator-horizontal\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"numberStep\":[2,\"number-step\"],\"stateFirstStep\":[1,\"state-first-step\"],\"stateSecondStep\":[1,\"state-second-step\"],\"stateThirdStep\":[1,\"state-third-step\"],\"urlStep1\":[1,\"url-step-1\"],\"urlStep2\":[1,\"url-step-2\"],\"urlStep3\":[1,\"url-step-3\"]}]]],[\"road-progress-indicator-vertical\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"secondaryLabel\":[1,\"secondary-label\"],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-card\",[[6,\"road-radio-card\",{\"name\":[1],\"disabled\":[4],\"selected\":[4],\"value\":[8],\"label\":[1],\"inline\":[4],\"isSelected\":[32],\"radioId\":[32]},[[8,\"road-radio-selected\",\"handleRadioSelected\"]]]]],[\"road-radio-group\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button-bar\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"helper\":[1],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"loading\":[4],\"isOpen\":[32],\"currentValue\":[32],\"activeIndex\":[32],\"wasFocusedBeforeLoading\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[5,\"mousedown\",\"onClickOutside\"],[8,\"keydown\",\"handleKeydown\"]],{\"loading\":[\"loadingChanged\"],\"options\":[\"onOptionsChange\"]}]]],[\"road-skeleton\",[[1,\"road-skeleton\"]]],[\"road-spinner\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"disabled\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table\",[[6,\"road-table\"]]],[\"road-tabs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toolbar-title\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page\",[[1,\"road-toolbar-title-page\"]]],[\"road-toolbar-v2\",[[1,\"road-toolbar-v2\"]]],[\"road-tooltip\",[[1,\"road-tooltip\",{\"tooltipId\":[1,\"tooltip-id\"],\"content\":[1],\"position\":[1],\"contentAlign\":[1,\"content-align\"],\"isOpen\":[1028,\"is-open\"],\"trigger\":[1],\"open\":[64],\"close\":[64]}]]],[\"road-avatar\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"selected\":[516],\"disabled\":[516],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"road-badge_14\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"readonly\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]},null,{\"value\":[\"onValueChange\"],\"readonly\":[\"onValueChange\"]}],[1,\"road-item\",{\"titleItem\":[1,\"title-item\"],\"text\":[1],\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"layout\":[1],\"target\":[1],\"type\":[1],\"multipleInputs\":[32]}],[1,\"road-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[1,\"road-drawer\",{\"isOpen\":[1028,\"is-open\"],\"removePadding\":[1028,\"remove-padding\"],\"position\":[1],\"drawerWidth\":[2,\"drawer-width\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"hasBackIcon\":[4,\"has-back-icon\"],\"backText\":[1,\"back-text\"],\"drawerTitle\":[1,\"drawer-title\"],\"ariaLabel\":[1,\"aria-label\"],\"ariaLabelBack\":[1,\"aria-label-back\"],\"ariaLabelClose\":[1,\"aria-label-close\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"enabledFocusTrap\":[4,\"enabled-focus-trap\"],\"whitelistSelectors\":[1040],\"focusTrap\":[32],\"hasFooterContent\":[32],\"hasMounted\":[32],\"open\":[64],\"close\":[64],\"back\":[64],\"updateWhitelistSelectors\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"enabledFocusTrap\":[\"handleFocusTrapProp\"],\"isOpen\":[\"handleOpen\"]}],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"blockdecimal\":[4],\"autocorrect\":[1],\"autofocus\":[4],\"disabled\":[4],\"enterkeyhint\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"sizes\":[1],\"type\":[1],\"value\":[1032],\"label\":[1],\"error\":[1],\"success\":[4],\"helper\":[1],\"list\":[1],\"debounce\":[2],\"enforceMinMaxValue\":[64],\"focus\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4],\"size\":[513]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"inverse\":[4],\"iconOnly\":[516,\"icon-only\"],\"disabled\":[516],\"expand\":[516],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"outline\":[4]}],[1,\"road-input-group\",{\"disabled\":[4]},null,{\"disabled\":[\"handleDisabledChange\"]}],[1,\"road-label\"],[1,\"road-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"svgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIcon\"],\"src\":[\"loadIcon\"],\"icon\":[\"loadIcon\"]}]]],[\"road-duration\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-content-card\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-alert\",[[1,\"road-alert\",{\"color\":[1],\"layout\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"],\"isOpen\":[1028,\"is-open\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-banner\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"pagertype\":[1],\"arrows\":[4],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"getPreviousIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipeToNext\":[64],\"lockSwipeToPrev\":[64],\"lockSwipes\":[64],\"getSwiper\":[64]},null,{\"options\":[\"optionsChanged\"]}]]],[\"road-checkbox\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"secondaryLabel\":[1,\"secondary-label\"],\"inverse\":[4],\"error\":[1],\"helper\":[1],\"size\":[513]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-phone-number-input\",[[2,\"road-phone-number-input\",{\"disabled\":[4],\"countryData\":[16],\"language\":[1],\"codeLabel\":[1,\"code-label\"],\"phoneLabel\":[1,\"phone-label\"],\"phoneValue\":[1,\"phone-value\"],\"countryCode\":[1,\"country-code\"],\"errorMessage\":[1,\"error-message\"],\"required\":[4],\"selectedCountry\":[32],\"selectedCountryCode\":[32],\"phoneNumber\":[32],\"countryOptions\":[32],\"returnObject\":[32]}]]],[\"road-range\",[[6,\"road-range\",{\"rangeId\":[1,\"range-id\"],\"value\":[1032],\"min\":[1],\"max\":[1],\"step\":[1],\"showValue\":[4,\"show-value\"],\"showTick\":[4,\"show-tick\"],\"showLabels\":[4,\"show-labels\"],\"disabled\":[4]},[[2,\"focus\",\"handleFocus\"],[2,\"blur\",\"handleBlur\"]],{\"value\":[\"valueChanged\"]}]]],[\"road-segmented-button\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1],\"badge\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-status-chip\",[[1,\"road-status-chip\",{\"size\":[1]}]]],[\"road-time-range-picker\",[[6,\"road-time-range-picker\",{\"start\":[1025],\"end\":[1025],\"disabled\":[4],\"helper\":[1],\"separator\":[1],\"required\":[4],\"label\":[1],\"sizes\":[1],\"error\":[1],\"getRange\":[64]}]]],[\"road-toast\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-toggle\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-area-code\",[[2,\"road-area-code\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1025],\"triggerRender\":[1026,\"trigger-render\"],\"selectedValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-aspect-ratio\",[[1,\"road-aspect-ratio\",{\"ratio\":[1]}]]],[\"road-asset\",[[1,\"road-asset\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"asset\":[8],\"lazy\":[4],\"sanitize\":[4],\"assetSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadAsset\"],\"src\":[\"loadAsset\"],\"asset\":[\"loadAsset\"]}]]],[\"road-autocomplete\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-carousel\",[[1,\"road-button-carousel\",{\"outline\":[4],\"disabled\":[516]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-button-floating\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item\",[[4,\"road-carousel-item\"]]],[\"road-flap\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-global-navigation-v2\",[[1,\"road-global-navigation-v2\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"],[8,\"click\",\"onButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration\",[[1,\"road-illustration\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"illustration\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"illustrationSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIllustration\"],\"src\":[\"loadIllustration\"],\"illustration\":[\"loadIllustration\"]}]]],[\"road-navbar\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]],{\"selected\":[\"handleSelectedChange\"]}]]],[\"road-navbar-item-v2\",[[1,\"road-navbar-item-v2\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]],{\"selected\":[\"handleSelectedChange\"]}]]],[\"road-navbar-v2\",[[1,\"road-navbar-v2\",{\"compact\":[516],\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-progress\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[2],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1],\"progresscalculationbase\":[1]}]]],[\"road-progress-indicator-horizontal\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"numberStep\":[2,\"number-step\"],\"stateFirstStep\":[1,\"state-first-step\"],\"stateSecondStep\":[1,\"state-second-step\"],\"stateThirdStep\":[1,\"state-third-step\"],\"urlStep1\":[1,\"url-step-1\"],\"urlStep2\":[1,\"url-step-2\"],\"urlStep3\":[1,\"url-step-3\"]}]]],[\"road-progress-indicator-vertical\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"secondaryLabel\":[1,\"secondary-label\"],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-card\",[[6,\"road-radio-card\",{\"name\":[1],\"disabled\":[4],\"selected\":[4],\"value\":[8],\"label\":[1],\"inline\":[4],\"isSelected\":[32],\"radioId\":[32]},[[8,\"road-radio-selected\",\"handleRadioSelected\"]]]]],[\"road-radio-group\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button-bar\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"helper\":[1],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"loading\":[4],\"isOpen\":[32],\"currentValue\":[32],\"activeIndex\":[32],\"wasFocusedBeforeLoading\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[5,\"mousedown\",\"onClickOutside\"],[8,\"keydown\",\"handleKeydown\"]],{\"loading\":[\"loadingChanged\"],\"options\":[\"onOptionsChange\"]}]]],[\"road-skeleton\",[[1,\"road-skeleton\"]]],[\"road-spinner\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"disabled\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table\",[[6,\"road-table\"]]],[\"road-tabs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toolbar-title\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page\",[[1,\"road-toolbar-title-page\"]]],[\"road-toolbar-v2\",[[1,\"road-toolbar-v2\"]]],[\"road-tooltip\",[[1,\"road-tooltip\",{\"tooltipId\":[1,\"tooltip-id\"],\"content\":[1],\"position\":[1],\"contentAlign\":[1,\"content-align\"],\"isOpen\":[1028,\"is-open\"],\"trigger\":[1],\"open\":[64],\"close\":[64]}]]],[\"road-avatar\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"selected\":[516],\"disabled\":[516],\"selectionMode\":[513,\"selection-mode\"],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
 };
 
 export { defineCustomElements };

package/dist/esm/road-badge_14.entry.js

@@ -1889,7 +1889,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   return trap;
 };
 
-const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.3s ease-out, visibility 0s linear 0.3s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.road-drawer-wrapper{width:100%}.road-drawer-wrapper .drawer-dialog{position:absolute;right:0;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .road-drawer-wrapper .drawer-dialog{transform:translateX(100%)}:host(.drawer-left) .road-drawer-wrapper .drawer-dialog{left:0}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .road-drawer-wrapper .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;opacity:1;transition:opacity 0.3s ease-out, visibility 0s linear 0s}:host(.drawer-open) .road-drawer-wrapper .drawer-dialog{transform:none}";
+const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;transition:visibility 0s linear 0.3s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay);opacity:0}.road-drawer-wrapper{width:100%}.road-drawer-wrapper .drawer-dialog{position:absolute;right:0;width:100%;pointer-events:none;transition:transform 0.3s ease-out;opacity:0;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .road-drawer-wrapper .drawer-dialog{transform:translateX(100%)}:host(.drawer-left) .road-drawer-wrapper .drawer-dialog{left:0}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .road-drawer-wrapper .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;transition:visibility 0s linear 0s}:host(.drawer-open) .drawer-overlay,:host(.drawer-open) .drawer-dialog{opacity:1}:host(.drawer-open) .road-drawer-wrapper .drawer-dialog{transform:none}@media (prefers-reduced-motion: no-preference){:host(.drawer-open) .drawer-overlay,:host(.drawer-open) .drawer-dialog{animation:road-drawer-fade-in 0.3s ease-out both}.drawer-overlay,.drawer-dialog{animation:road-drawer-fade-out 0.3s ease-out both}@keyframes road-drawer-fade-in{from{opacity:0}to{opacity:1}}@keyframes road-drawer-fade-out{from{opacity:1}to{opacity:0}}}";
 const RoadDrawerStyle0 = drawerCss;
 
 const Drawer = class {
@@ -1938,6 +1938,11 @@ const Drawer = class {
          * 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;
@@ -2034,18 +2039,19 @@ const Drawer = class {
         }, 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);
@@ -2064,9 +2070,14 @@ const Drawer = class {
         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(elements) {
         var _a;
@@ -2096,7 +2107,8 @@ const Drawer = class {
     }
     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"
@@ -2108,7 +2120,7 @@ const Drawer = class {
         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: '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 })))))));
+        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 })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {