@roadtrip/components 3.52.0 → 3.53.1

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-8dc34f94.js';
 
-const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline);padding:0}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
+const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline);padding:0}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected.is-single:hover){border:2px solid var(--road-primary);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-single:focus){border:2px solid var(--road-primary);outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
 const RoadCardStyle0 = cardCss;
 
 const Card = class {
@@ -26,6 +26,12 @@ const Card = class {
          * Only applies when in button mode (button=true and no href).
          */
         this.disabled = false;
+        /**
+         * Defines the selection mode.
+         * - `"single"`: only one card can be selected at a time (focus outline disabled).
+         * - `"multiple"`: multiple cards can be selected simultaneously.
+         */
+        this.selectionMode = "multiple";
         /**
          * The type of the button. Only used when an `onclick` or `button` property is present.
          */
@@ -41,6 +47,9 @@ const Card = class {
             }
             // Toggle selected state on click for clickable cards
             this.selected = !this.selected;
+            if (this.selectionMode === "single") {
+                e.currentTarget.blur();
+            }
             if (this.value !== undefined) {
                 this.roadcardclick.emit({
                     value: this.value,
@@ -89,7 +98,8 @@ const Card = class {
         const selectedClass = this.selected ? "selected" : "";
         const isButtonClass = isButtonMode ? "is-button" : "";
         const disabledClass = isButtonMode && this.disabled ? "is-disabled" : "";
-        return (h(Host, { key: '44026953c66e6ee3421d5bbc03c92e60710feb94', class: `${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass}` }, this.renderCard()));
+        const singleClass = isButtonMode && this.selectionMode === "single" ? "is-single" : "";
+        return (h(Host, { key: 'fc2636b92be59ddf232b162574c3cdd3a7042a50', class: `${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass} ${singleClass}` }, this.renderCard()));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/road-card.entry.js.map

@@ -1 +1 @@
-{"file":"road-card.entry.js","mappings":"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","names":[],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/*\n * Card\n *\n * Index\n * - Card\n * - Native\n * - Icon\n */\n\n/* CARD\n -------------------- */\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: block;\n  margin-bottom: var(--margin-bottom, 1rem);\n  background: var(--road-surface);\n  border: 1px solid var(--road-outline-weak);\n  border-radius: var(--road-spacing-02);\n  padding: var(--road-spacing-03);\n}\n\n:host(.card-elevation-none) {\n  box-shadow: none;\n}\n\n:host(.card-elevation-lowest) {\n  box-shadow: var(--road-elevation-lowest);\n}\n\n:host(.card-elevation-average) {\n  box-shadow: var(--road-elevation-average);\n}\n\n/*\n* Card as a button (interactivity in Figma)\n*/\n\n:host(.is-button) {\n  border: 1px solid var(--road-outline);\n  padding: 0;\n}\n\n:host(.is-button:hover) {\n  border: 1px solid var(--road-outline-variant);\n  outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button:focus-visible),\n:host(.is-button:focus) {\n  border: 1px solid var(--road-outline);\n  outline-offset: 1px;\n  outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.is-disabled) {\n  cursor: not-allowed;\n  pointer-events: none;\n  border: 1px solid var(--road-surface-disabled);\n  background: var(--road-surface-disabled);\n}\n\n:host(.is-button.is-disabled) .card-native,\n:host(.is-button.selected.is-disabled) .card-native {\n  background: none;\n}\n\n:host(.is-button.selected) {\n  border: 2px solid var(--road-primary);\n  outline: none;\n}\n\n:host(.is-button.selected:hover) {\n  border: 2px solid var(--road-outline-variant);\n  outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button.selected:focus-visible),\n:host(.is-button.selected:focus) {\n  border: 2px solid var(--road-outline-variant);\n  outline-offset: 1px;\n  outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.selected.is-disabled) {\n  cursor: not-allowed;\n  pointer-events: none;\n  outline: none;\n  background: var(--road-surface-disabled);\n  border: 2px solid var(--road-surface-disabled);\n}\n\n/* NATIVE\n -------------------- */\n\n.card-native {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 100%;\n  padding: var(--road-spacing-06);\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: center;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  background: var(--road-surface);\n  border: 0;\n  border-radius: 0.25rem;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\na,\nbutton {\n  cursor: pointer;\n  -webkit-user-select: none;\n          user-select: none;\n  -webkit-user-drag: none;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  text-align: center;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Host,\n} from \"@stencil/core\";\n\n/**\n * @slot  - Content of the card.\n *\n * @part native - The native HTML button, anchor, or div element that wraps all child elements.\n */\n\n@Component({\n  tag: \"road-card\",\n  styleUrl: \"card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el!: HTMLRoadCardElement;\n\n  /**\n   * The elevation.\n   */\n  @Prop() elevation?: \"none\" | \"lowest\" | \"average\" = \"none\";\n\n  /**\n   * If `true`, a button tag will be rendered and the card will be tappable.\n   */\n  @Prop() button: boolean = false;\n\n  /**\n   * value of the card\n   */\n  @Prop() value?: string;\n\n  /**\n   * If `true`, the card has the `selected` state and the `selected` class is applied on the host.\n   * Toggled automatically when the card is clicked (when clickable).\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * If `true`, the card is disabled and cannot be clicked.\n   * Only applies when in button mode (button=true and no href).\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The type of the button. Only used when an `onclick` or `button` property is present.\n   */\n  @Prop() type: \"submit\" | \"reset\" | \"button\" = \"button\";\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download?: string;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the card is clicked and send the `value` of the card\n   */\n  @Event() roadcardclick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadCardClick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n\n  private isClickable(): boolean {\n    return this.href !== undefined || this.button;\n  }\n\n  private onClick = (e: Event) => {\n    // If disabled in button mode, prevent all interactions\n    const isButtonMode = this.button && this.href === undefined;\n    if (isButtonMode && this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    // Toggle selected state on click for clickable cards\n    this.selected = !this.selected;\n\n    if (this.value !== undefined) {\n      this.roadcardclick.emit({\n        value: this.value,\n        label: this.el.querySelector(\"road-label\")?.textContent,\n      });\n      this.roadCardClick.emit({\n        value: this.value,\n        label: this.el.querySelector(\"road-label\")?.textContent,\n      });\n    }\n  };\n\n  private renderCard() {\n    const clickable = this.isClickable();\n\n    if (!clickable) {\n      return [<slot />];\n    }\n    const { href } = this;\n    const TagType = clickable\n      ? href === undefined\n        ? \"button\"\n        : \"a\"\n      : (\"div\" as any);\n    const isButtonMode = this.button && href === undefined;\n    const attrs =\n      TagType === \"button\"\n        ? {\n            type: this.type,\n            disabled: isButtonMode && this.disabled,\n            \"aria-disabled\": isButtonMode && this.disabled ? \"true\" : undefined,\n          }\n        : {\n            download: this.download,\n            href: this.href,\n            rel: this.rel,\n            target: this.target,\n          };\n\n    return (\n      <TagType\n        {...attrs}\n        class=\"card-native\"\n        part=\"native\"\n        onClick={this.onClick}\n      >\n        <slot />\n      </TagType>\n    );\n  }\n\n  render() {\n    const { elevation } = this;\n    const isButtonMode = this.button && this.href === undefined;\n    const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n    const selectedClass = this.selected ? \"selected\" : \"\";\n    const isButtonClass = isButtonMode ? \"is-button\" : \"\";\n    const disabledClass = isButtonMode && this.disabled ? \"is-disabled\" : \"\";\n    return (\n      <Host\n        class={`${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass}`}\n      >\n        {this.renderCard()}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"road-card.entry.js","mappings":"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","names":[],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/*\n * Card\n *\n * Index\n * - Card\n * - Native\n * - Icon\n */\n\n/* CARD\n -------------------- */\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: block;\n  margin-bottom: var(--margin-bottom, 1rem);\n  background: var(--road-surface);\n  border: 1px solid var(--road-outline-weak);\n  border-radius: var(--road-spacing-02);\n  padding: var(--road-spacing-03);\n}\n\n:host(.card-elevation-none) {\n  box-shadow: none;\n}\n\n:host(.card-elevation-lowest) {\n  box-shadow: var(--road-elevation-lowest);\n}\n\n:host(.card-elevation-average) {\n  box-shadow: var(--road-elevation-average);\n}\n\n/*\n* Card as a button (interactivity in Figma)\n*/\n\n:host(.is-button) {\n  border: 1px solid var(--road-outline);\n  padding: 0;\n}\n\n:host(.is-button:hover) {\n  border: 1px solid var(--road-outline-variant);\n  outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button:focus-visible),\n:host(.is-button:focus) {\n  border: 1px solid var(--road-outline);\n  outline-offset: 1px;\n  outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.is-disabled) {\n  cursor: not-allowed;\n  pointer-events: none;\n  border: 1px solid var(--road-surface-disabled);\n  background: var(--road-surface-disabled);\n}\n\n:host(.is-button.is-disabled) .card-native,\n:host(.is-button.selected.is-disabled) .card-native {\n  background: none;\n}\n\n:host(.is-button.selected) {\n  border: 2px solid var(--road-primary);\n  outline: none;\n}\n\n:host(.is-button.selected:hover) {\n  border: 2px solid var(--road-outline-variant);\n  outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button.selected.is-single:hover) {\n  border: 2px solid var(--road-primary);\n  outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button.selected:focus-visible),\n:host(.is-button.selected:focus) {\n  border: 2px solid var(--road-outline-variant);\n  outline-offset: 1px;\n  outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.selected.is-single:focus) {\n  border: 2px solid var(--road-primary);\n  outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.selected.is-disabled) {\n  cursor: not-allowed;\n  pointer-events: none;\n  outline: none;\n  background: var(--road-surface-disabled);\n  border: 2px solid var(--road-surface-disabled);\n}\n\n/* NATIVE\n -------------------- */\n\n.card-native {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 100%;\n  padding: var(--road-spacing-06);\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: center;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  background: var(--road-surface);\n  border: 0;\n  border-radius: 0.25rem;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\na,\nbutton {\n  cursor: pointer;\n  -webkit-user-select: none;\n          user-select: none;\n  -webkit-user-drag: none;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  text-align: center;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Host,\n} from \"@stencil/core\";\n\n/**\n * @slot  - Content of the card.\n *\n * @part native - The native HTML button, anchor, or div element that wraps all child elements.\n */\n\n@Component({\n  tag: \"road-card\",\n  styleUrl: \"card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el!: HTMLRoadCardElement;\n\n  /**\n   * The elevation.\n   */\n  @Prop() elevation?: \"none\" | \"lowest\" | \"average\" = \"none\";\n\n  /**\n   * If `true`, a button tag will be rendered and the card will be tappable.\n   */\n  @Prop() button: boolean = false;\n\n  /**\n   * value of the card\n   */\n  @Prop() value?: string;\n\n  /**\n   * If `true`, the card has the `selected` state and the `selected` class is applied on the host.\n   * Toggled automatically when the card is clicked (when clickable).\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * If `true`, the card is disabled and cannot be clicked.\n   * Only applies when in button mode (button=true and no href).\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Defines the selection mode.\n   * - `\"single\"`: only one card can be selected at a time (focus outline disabled).\n   * - `\"multiple\"`: multiple cards can be selected simultaneously.\n   */\n  @Prop({ reflect: true }) selectionMode?: \"single\" | \"multiple\" = \"multiple\";\n\n\n  /**\n   * The type of the button. Only used when an `onclick` or `button` property is present.\n   */\n  @Prop() type: \"submit\" | \"reset\" | \"button\" = \"button\";\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download?: string;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the card is clicked and send the `value` of the card\n   */\n  @Event() roadcardclick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadCardClick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n\n  private isClickable(): boolean {\n    return this.href !== undefined || this.button;\n  }\n\n  private onClick = (e: Event) => {\n    // If disabled in button mode, prevent all interactions\n    const isButtonMode = this.button && this.href === undefined;\n    if (isButtonMode && this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    // Toggle selected state on click for clickable cards\n    this.selected = !this.selected;\n    if (this.selectionMode === \"single\") {\n      (e.currentTarget as HTMLElement).blur();\n    }\n\n    if (this.value !== undefined) {\n      this.roadcardclick.emit({\n        value: this.value,\n        label: this.el.querySelector(\"road-label\")?.textContent,\n      });\n      this.roadCardClick.emit({\n        value: this.value,\n        label: this.el.querySelector(\"road-label\")?.textContent,\n      });\n    }\n  };\n\n  private renderCard() {\n    const clickable = this.isClickable();\n\n    if (!clickable) {\n      return [<slot />];\n    }\n    const { href } = this;\n    const TagType = clickable\n      ? href === undefined\n        ? \"button\"\n        : \"a\"\n      : (\"div\" as any);\n    const isButtonMode = this.button && href === undefined;\n    const attrs =\n      TagType === \"button\"\n        ? {\n            type: this.type,\n            disabled: isButtonMode && this.disabled,\n            \"aria-disabled\": isButtonMode && this.disabled ? \"true\" : undefined,\n          }\n        : {\n            download: this.download,\n            href: this.href,\n            rel: this.rel,\n            target: this.target,\n          };\n\n    return (\n      <TagType\n        {...attrs}\n        class=\"card-native\"\n        part=\"native\"\n        onClick={this.onClick}\n      >\n        <slot />\n      </TagType>\n    );\n  }\n\n  render() {\n    const { elevation } = this;\n    const isButtonMode = this.button && this.href === undefined;\n    const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n    const selectedClass = this.selected ? \"selected\" : \"\";\n    const isButtonClass = isButtonMode ? \"is-button\" : \"\";\n    const disabledClass = isButtonMode && this.disabled ? \"is-disabled\" : \"\";\n    const singleClass = isButtonMode && this.selectionMode === \"single\" ? \"is-single\" : \"\";\n    return (\n      <Host\n        class={`${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass} ${singleClass}`}\n      >\n        {this.renderCard()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-8dc34f94.js';
 
-const progressCss = ".progress{--border-radius:0.25rem;display:flex;height:0.25rem;overflow:hidden;font-size:var(--road-label-small);background-color:var(--road-surface-disabled);border-radius:var(--border-radius)}.progress-light{background-color:var(--road-overlay-inverse)}.progress-element-info{display:flex;justify-content:space-between;margin-top:0.5rem}.progress-element-info-full-width{display:flex;justify-content:space-between;padding:0 1rem;margin-top:0.5rem}.progress-element-label{font-size:var(--road-label-medium);text-align:left}.progress-element-step{font-size:var(--road-label-medium);text-align:right}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;text-align:center;white-space:nowrap;transition:width 0.6s ease}.progress.progress-primary .progress-bar{background:var(--road-primary)}.progress.progress-secondary .progress-bar{background:var(--road-secondary)}.progress.progress-info .progress-bar{background:var(--road-info-surface-inverse)}.progress.progress-success .progress-bar{background:var(--road-success-surface-inverse)}.progress.progress-warning .progress-bar{background:var(--road-warning-surface-inverse)}.progress.progress-danger .progress-bar{background:var(--road-danger-surface-inverse)}.progress.progress-rating .progress-bar{background:var(--road-rating)}.animation .progress-bar{animation:load 5s normal forwards}@keyframes load{0%{width:0}100%{width:100%}}";
+const progressCss = ".progress{--border-radius:0.25rem;display:flex;height:0.25rem;overflow:hidden;font-size:var(--road-label-small);background-color:var(--road-surface-disabled);border-radius:var(--border-radius)}.progress-light{background-color:var(--road-overlay-inverse)}.progress-element-info{display:flex;justify-content:space-between;margin-top:0.5rem}.progress-element-info-full-width{display:flex;justify-content:space-between;padding:0 1rem;margin-top:0.5rem}.progress-element-label{font-size:var(--road-label-medium);text-align:left}.progress-element-step{font-size:var(--road-label-medium);text-align:right}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;text-align:center;white-space:nowrap;transition:width 0.6s ease}.progress.progress-primary .progress-bar{background:var(--road-primary)}.progress.progress-secondary .progress-bar{background:var(--road-secondary)}.progress.progress-info .progress-bar{background:var(--road-info-surface-inverse)}.progress.progress-success .progress-bar{background:var(--road-success-surface-inverse)}.progress.progress-warning .progress-bar{background:var(--road-warning-surface-inverse)}.progress.progress-danger .progress-bar{background:var(--road-danger-surface-inverse)}.progress.progress-rating .progress-bar{background:var(--road-rating)}.animation .progress-bar{animation:load var(--road-progress-animation-duration, 5s) normal forwards;animation-play-state:var(--road-progress-animation-play-state, running)}@keyframes load{0%{width:0}100%{width:100%}}";
 const RoadProgressStyle0 = progressCss;
 
 const ProgressBar = class {

package/dist/esm/road-progress.entry.js.map

@@ -1 +1 @@
-{"file":"road-progress.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,y4CAAy4C,CAAC;AAC95C,2BAAe,WAAW;;MCMb,WAAW;IALxB;;;;;;QAUU,UAAK,GAAW,CAAC,CAAC;;;;QAKlB,gBAAW,GAAW,CAAC,CAAC;;;;QAKxB,UAAK,GAAW,EAAE,CAAC;;;;QAKnB,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,cAAS,GAAY,KAAK,CAAC;;;;QAK3B,UAAK,GAAY,KAAK,CAAC;;;;QAKvB,cAAS,GAAY,KAAK,CAAC;;;;QAK3B,UAAK,GAOE,SAAS,CAAC;;;;;;;QAQjB,4BAAuB,GAA2B,SAAS,CAAC;KA6CrE;IA3CC,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS;cAC5B,kCAAkC;cAClC,uBAAuB,CAAC;QAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,yBAAyB,GAAG,UAAU,CAAC;QAClE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,CAAC;QAEpD,MAAM,MAAM,GAAW,IAAI,CAAC,uBAAuB,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAC3E,MAAM,iBAAiB,GAAG,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC;QACjD,MAAM,2BAA2B,GAC/B,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,GAAG,iBAAiB,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;QAEnE,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5D,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QAEzB,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,kBAAkB,IAC5B,4DAAK,KAAK,EAAE,GAAG,KAAK,aAAa,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,IACxD,4DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,2BAA2B,GAAG,EAAE,mBACpC,2BAA2B,mBAC5B,GAAG,mBACH,KAAK,qBACH,cAAc,gBACnB,cAAc,GACpB,CACH,EACN,4DAAK,KAAK,EAAE,GAAG,SAAS,EAAE,IACxB,6DAAM,EAAE,EAAC,cAAc,EAAC,KAAK,EAAC,wBAAwB,IACnD,IAAI,CAAC,KAAK,CACN,EACN,IAAI,CAAC,QAAQ,KACZ,6DAAM,KAAK,EAAC,uBAAuB,IAChC,IAAI,OAAG,IAAI,CAAC,WAAW,CACnB,CACR,CACG,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/progress/progress.css?tag=road-progress&encapsulation=shadow","src/components/progress/progress.tsx"],"sourcesContent":["/*\n * Progress\n *\n * Index\n * - Progress\n * - Progress Bar\n * - Colors\n */\n\n/**\n * @prop --border-radius: Border radius of the progress\n */\n\n/* PROGRESS\n -------------------- */\n\n.progress{\n  --border-radius: 0.25rem;\n\n  display: flex;\n  height: 0.25rem;\n  overflow: hidden;\n  font-size: var(--road-label-small);\n  background-color: var(--road-surface-disabled);\n  border-radius: var(--border-radius);\n}\n\n.progress-light{\n  background-color: var(--road-overlay-inverse);\n}\n\n\n.progress-element-info {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 0.5rem;\n}\n\n.progress-element-info-full-width {\n  display: flex;\n  justify-content: space-between;\n  padding: 0 1rem;\n  margin-top: 0.5rem;\n}\n\n.progress-element-label {\n  font-size: var(--road-label-medium);\n  text-align: left;\n}\n\n.progress-element-step {\n  font-size: var(--road-label-medium);\n  text-align: right;\n}\n\n/* PROGRESS BAR\n -------------------- */\n\n.progress-bar {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  text-align: center;\n  white-space: nowrap;\n  transition: width 0.6s ease;\n}\n\n/* COLORS\n -------------------- */\n\n.progress.progress-primary .progress-bar {\n  background: var(--road-primary);\n}\n\n.progress.progress-secondary .progress-bar {\n  background: var(--road-secondary);\n}\n\n.progress.progress-info .progress-bar {\n  background: var(--road-info-surface-inverse);\n}\n\n.progress.progress-success .progress-bar {\n  background: var(--road-success-surface-inverse);\n}\n\n.progress.progress-warning .progress-bar {\n  background: var(--road-warning-surface-inverse);\n}\n\n.progress.progress-danger .progress-bar {\n  background: var(--road-danger-surface-inverse);\n}\n\n.progress.progress-rating .progress-bar {\n  background: var(--road-rating);\n}\n\n\n/* ANIMATION\n -------------------- */\n\n.animation .progress-bar{\n  animation: load 5s normal forwards;\n}\n\n@keyframes load {\n\n  0% {\n    width: 0;\n  }\n\n  100% {\n    width: 100%;\n  }\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"road-progress\",\n  styleUrl: \"progress.css\",\n  shadow: true,\n})\nexport class ProgressBar {\n  /**\n   * The value determines how much of the active bar should display.\n   * The value should be between [0, 100].\n   */\n  @Prop() value: number = 0;\n\n  /**\n   * The number of steps.\n   */\n  @Prop() numbersteps: number = 0;\n\n  /**\n   * Label display in progress bar\n   */\n  @Prop() label: string = \"\";\n\n  /**\n   * Show step\n   */\n  @Prop() showstep: boolean = false;\n\n  /**\n   * Animation progress bar\n   */\n  @Prop() animation: boolean = false;\n\n  /**\n   * Light progress background\n   */\n  @Prop() light: boolean = false;\n\n  /**\n   * Add padding if the progress is full width\n   */\n  @Prop() fullwidth: boolean = false;\n\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color:\n    | \"primary\"\n    | \"secondary\"\n    | \"info\"\n    | \"success\"\n    | \"warning\"\n    | \"danger\"\n    | \"rating\" = \"primary\";\n\n  /**\n   * Progress calculation base for step display\n   * - previous: step is calculated based on the previous completed step\n   * - current: step is calculated based on the current progress\n   * Default is 'current'\n   */\n  @Prop() progresscalculationbase: \"previous\" | \"current\" = \"current\";\n\n  render() {\n    const fullwidth = this.fullwidth\n      ? \"progress-element-info-full-width\"\n      : \"progress-element-info\";\n    const light = this.light ? \"progress progress-light\" : \"progress\";\n    const animation = this.animation ? \"animation\" : \"\";\n\n    const offset: number = this.progresscalculationbase === \"current\" ? 0 : -1;\n    const percentagePerStep = 100 / this.numbersteps;\n    const progressBarFilledPercentage =\n      this.value + (this.numbersteps ? percentagePerStep * offset : 0);\n\n    let step = Math.ceil((this.value / 100) * this.numbersteps);\n    step = Math.min(step, this.numbersteps);\n    step = Math.max(step, 0);\n\n    return (\n      <Host class=\"progress-element\">\n        <div class={`${light} progress-${this.color} ${animation}`}>\n          <div\n            class=\"progress-bar\"\n            role=\"progressbar\"\n            style={{ width: `${progressBarFilledPercentage}%` }}\n            aria-valuenow={progressBarFilledPercentage}\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            aria-labelledby=\"loadinglabel\"\n            aria-label=\"progress bar\"\n          ></div>\n        </div>\n        <div class={`${fullwidth}`}>\n          <span id=\"loadinglabel\" class=\"progress-element-label\">\n            {this.label}\n          </span>\n          {this.showstep && (\n            <span class=\"progress-element-step\">\n              {step}/{this.numbersteps}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"road-progress.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0/CAA0/C,CAAC;AAC/gD,2BAAe,WAAW;;MCMb,WAAW;IALxB;;;;;;QAUU,UAAK,GAAW,CAAC,CAAC;;;;QAKlB,gBAAW,GAAW,CAAC,CAAC;;;;QAKxB,UAAK,GAAW,EAAE,CAAC;;;;QAKnB,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,cAAS,GAAY,KAAK,CAAC;;;;QAK3B,UAAK,GAAY,KAAK,CAAC;;;;QAKvB,cAAS,GAAY,KAAK,CAAC;;;;QAK3B,UAAK,GAOE,SAAS,CAAC;;;;;;;QAQjB,4BAAuB,GAA2B,SAAS,CAAC;KA6CrE;IA3CC,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS;cAC5B,kCAAkC;cAClC,uBAAuB,CAAC;QAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,yBAAyB,GAAG,UAAU,CAAC;QAClE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,CAAC;QAEpD,MAAM,MAAM,GAAW,IAAI,CAAC,uBAAuB,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAC3E,MAAM,iBAAiB,GAAG,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC;QACjD,MAAM,2BAA2B,GAC/B,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,GAAG,iBAAiB,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;QAEnE,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5D,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QAEzB,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,kBAAkB,IAC5B,4DAAK,KAAK,EAAE,GAAG,KAAK,aAAa,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,IACxD,4DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,2BAA2B,GAAG,EAAE,mBACpC,2BAA2B,mBAC5B,GAAG,mBACH,KAAK,qBACH,cAAc,gBACnB,cAAc,GACpB,CACH,EACN,4DAAK,KAAK,EAAE,GAAG,SAAS,EAAE,IACxB,6DAAM,EAAE,EAAC,cAAc,EAAC,KAAK,EAAC,wBAAwB,IACnD,IAAI,CAAC,KAAK,CACN,EACN,IAAI,CAAC,QAAQ,KACZ,6DAAM,KAAK,EAAC,uBAAuB,IAChC,IAAI,OAAG,IAAI,CAAC,WAAW,CACnB,CACR,CACG,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/progress/progress.css?tag=road-progress&encapsulation=shadow","src/components/progress/progress.tsx"],"sourcesContent":["/*\n * Progress\n *\n * Index\n * - Progress\n * - Progress Bar\n * - Colors\n */\n\n/**\n * @prop --border-radius: Border radius of the progress\n */\n\n/* PROGRESS\n -------------------- */\n\n.progress{\n  --border-radius: 0.25rem;\n\n  display: flex;\n  height: 0.25rem;\n  overflow: hidden;\n  font-size: var(--road-label-small);\n  background-color: var(--road-surface-disabled);\n  border-radius: var(--border-radius);\n}\n\n.progress-light{\n  background-color: var(--road-overlay-inverse);\n}\n\n\n.progress-element-info {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 0.5rem;\n}\n\n.progress-element-info-full-width {\n  display: flex;\n  justify-content: space-between;\n  padding: 0 1rem;\n  margin-top: 0.5rem;\n}\n\n.progress-element-label {\n  font-size: var(--road-label-medium);\n  text-align: left;\n}\n\n.progress-element-step {\n  font-size: var(--road-label-medium);\n  text-align: right;\n}\n\n/* PROGRESS BAR\n -------------------- */\n\n.progress-bar {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  text-align: center;\n  white-space: nowrap;\n  transition: width 0.6s ease;\n}\n\n/* COLORS\n -------------------- */\n\n.progress.progress-primary .progress-bar {\n  background: var(--road-primary);\n}\n\n.progress.progress-secondary .progress-bar {\n  background: var(--road-secondary);\n}\n\n.progress.progress-info .progress-bar {\n  background: var(--road-info-surface-inverse);\n}\n\n.progress.progress-success .progress-bar {\n  background: var(--road-success-surface-inverse);\n}\n\n.progress.progress-warning .progress-bar {\n  background: var(--road-warning-surface-inverse);\n}\n\n.progress.progress-danger .progress-bar {\n  background: var(--road-danger-surface-inverse);\n}\n\n.progress.progress-rating .progress-bar {\n  background: var(--road-rating);\n}\n\n\n/* ANIMATION\n -------------------- */\n\n.animation .progress-bar{\n  animation: load var(--road-progress-animation-duration, 5s) normal forwards;\n  animation-play-state: var(--road-progress-animation-play-state, running);\n}\n\n@keyframes load {\n\n  0% {\n    width: 0;\n  }\n\n  100% {\n    width: 100%;\n  }\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"road-progress\",\n  styleUrl: \"progress.css\",\n  shadow: true,\n})\nexport class ProgressBar {\n  /**\n   * The value determines how much of the active bar should display.\n   * The value should be between [0, 100].\n   */\n  @Prop() value: number = 0;\n\n  /**\n   * The number of steps.\n   */\n  @Prop() numbersteps: number = 0;\n\n  /**\n   * Label display in progress bar\n   */\n  @Prop() label: string = \"\";\n\n  /**\n   * Show step\n   */\n  @Prop() showstep: boolean = false;\n\n  /**\n   * Animation progress bar\n   */\n  @Prop() animation: boolean = false;\n\n  /**\n   * Light progress background\n   */\n  @Prop() light: boolean = false;\n\n  /**\n   * Add padding if the progress is full width\n   */\n  @Prop() fullwidth: boolean = false;\n\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color:\n    | \"primary\"\n    | \"secondary\"\n    | \"info\"\n    | \"success\"\n    | \"warning\"\n    | \"danger\"\n    | \"rating\" = \"primary\";\n\n  /**\n   * Progress calculation base for step display\n   * - previous: step is calculated based on the previous completed step\n   * - current: step is calculated based on the current progress\n   * Default is 'current'\n   */\n  @Prop() progresscalculationbase: \"previous\" | \"current\" = \"current\";\n\n  render() {\n    const fullwidth = this.fullwidth\n      ? \"progress-element-info-full-width\"\n      : \"progress-element-info\";\n    const light = this.light ? \"progress progress-light\" : \"progress\";\n    const animation = this.animation ? \"animation\" : \"\";\n\n    const offset: number = this.progresscalculationbase === \"current\" ? 0 : -1;\n    const percentagePerStep = 100 / this.numbersteps;\n    const progressBarFilledPercentage =\n      this.value + (this.numbersteps ? percentagePerStep * offset : 0);\n\n    let step = Math.ceil((this.value / 100) * this.numbersteps);\n    step = Math.min(step, this.numbersteps);\n    step = Math.max(step, 0);\n\n    return (\n      <Host class=\"progress-element\">\n        <div class={`${light} progress-${this.color} ${animation}`}>\n          <div\n            class=\"progress-bar\"\n            role=\"progressbar\"\n            style={{ width: `${progressBarFilledPercentage}%` }}\n            aria-valuenow={progressBarFilledPercentage}\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            aria-labelledby=\"loadinglabel\"\n            aria-label=\"progress bar\"\n          ></div>\n        </div>\n        <div class={`${fullwidth}`}>\n          <span id=\"loadinglabel\" class=\"progress-element-label\">\n            {this.label}\n          </span>\n          {this.showstep && (\n            <span class=\"progress-element-step\">\n              {step}/{this.numbersteps}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,13 +1,15 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-8dc34f94.js';
 import { a as navigationClose, d as alertInfoOutline, e as alertDangerOutline, f as alertWarningOutline, g as alertSuccessOutline } from './index-6de77b28.js';
 
-const toastCss = ":host{position:fixed;right:0;bottom:1rem;left:0;z-index:1;display:flex;justify-content:center;width:328px;margin:0 auto;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;transform:translateY(-100%)}@media (min-width: 1200px){:host{right:1.5rem;bottom:3rem;left:auto;width:auto;transform:translateX(100%)}}:host(.toast-open){visibility:visible;opacity:1;transform:none}.toast{position:relative;box-sizing:border-box;display:flex;flex:0 0 100%;flex-flow:wrap;align-items:flex-start;width:328px;padding:0.75rem 2rem 0.6rem 1rem;font-family:var(--road-font);font-size:var(--road-body-medium);line-height:1.4;color:var(--road-on-info-surface-inverse);text-align:left;background:var(--road-info-surface-inverse);border-radius:0.25rem}@media (min-width: 575px){.toast{padding:1rem;margin-right:auto;margin-left:auto}}.toast-danger{color:var(--road-on-danger-surface-inverse);pointer-events:all;background:var(--road-danger-surface-inverse)}.toast-danger road-icon{color:var(--road-danger-icon-inverse)}.toast-warning{color:var(--road-on-warning-surface-inverse);background:var(--road-warning-surface-inverse)}.toast-warning road-icon{color:var(--road-warning-icon-inverse)}.toast-success{color:var(--road-on-success-surface-inverse);background:var(--road-success-surface-inverse)}.toast-success road-icon{color:var(--road-success-icon-inverse)}.toast-info{color:var(--road-on-info-surface-inverse);background:var(--road-info-surface-inverse)}.toast-info road-icon{color:var(--road-info-icon-inverse)}.toast-icon{top:auto;left:0.5rem;margin-top:-5px;margin-right:0.5rem}@media (min-width: 575px){.toast-icon{position:relative;top:auto;left:auto;margin-right:0.5rem}}.toast-close{position:absolute;right:0.5rem;padding:0;color:inherit;cursor:pointer;background:none;border:0;border-radius:4px;fill:var(--road-info-icon-inverse)}.toast-warning .toast-close{fill:var(--road-warning-icon-inverse)}.toast-close:focus{border-color:var(--road-info-surface-inverse);outline:none}.toast-label{width:240px;margin:0}:host ::slotted(road-progress){position:absolute;bottom:-8px;left:0;flex-basis:100%;width:100%;margin-top:0.5rem}@keyframes load{0%{width:0}100%{width:100%}}";
+const toastCss = ":host{position:fixed;right:0;bottom:1rem;left:0;z-index:1;display:flex;justify-content:center;width:328px;margin:0 auto;--road-toast-timeout:5000ms;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;transform:translateY(-100%)}@media (min-width: 1200px){:host{right:1.5rem;bottom:3rem;left:auto;width:auto;transform:translateX(100%)}}:host(.toast-open){visibility:visible;opacity:1;transform:none}.toast{position:relative;box-sizing:border-box;display:flex;flex:0 0 100%;flex-flow:wrap;align-items:flex-start;width:328px;padding:0.75rem 2rem 0.6rem 1rem;font-family:var(--road-font);font-size:var(--road-body-medium);line-height:1.4;color:var(--road-on-info-surface-inverse);text-align:left;background:var(--road-info-surface-inverse);border-radius:0.25rem;pointer-events:all;--road-progress-animation-play-state:running}.toast:hover,.toast:focus-within{--road-progress-animation-play-state:paused}@media (min-width: 575px){.toast{padding:1rem;margin-right:auto;margin-left:auto}}.toast-danger{color:var(--road-on-danger-surface-inverse);background:var(--road-danger-surface-inverse)}.toast-danger road-icon{color:var(--road-danger-icon-inverse)}.toast-warning{color:var(--road-on-warning-surface-inverse);background:var(--road-warning-surface-inverse)}.toast-warning road-icon{color:var(--road-warning-icon-inverse)}.toast-success{color:var(--road-on-success-surface-inverse);background:var(--road-success-surface-inverse)}.toast-success road-icon{color:var(--road-success-icon-inverse)}.toast-info{color:var(--road-on-info-surface-inverse);background:var(--road-info-surface-inverse)}.toast-info road-icon{color:var(--road-info-icon-inverse)}.toast-icon{top:auto;left:0.5rem;margin-top:-5px;margin-right:0.5rem}@media (min-width: 575px){.toast-icon{position:relative;top:auto;left:auto;margin-right:0.5rem}}.toast-close{position:absolute;right:0.5rem;padding:0;color:inherit;cursor:pointer;background:none;border:0;border-radius:4px;fill:var(--road-info-icon-inverse);height:1.5rem}.toast-warning .toast-close{fill:var(--road-warning-icon-inverse)}.toast-close:focus{border-color:var(--road-info-surface-inverse);outline:none}.toast-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.toast:focus-within{outline:2px solid currentColor;outline-offset:2px}.toast-label{width:240px;margin:0}:host ::slotted(road-progress){position:absolute;bottom:-8px;left:0;flex-basis:100%;width:100%;margin-top:0.5rem;--road-progress-animation-duration:var(--road-toast-timeout)}@keyframes load{0%{width:0}100%{width:100%}}";
 const RoadToastStyle0 = toastCss;
 
 const Toast = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.onClose = createEvent(this, "close", 7);
+        this.isHovered = false;
+        this.isFocusWithin = false;
         /**
          * Set `open` propertie to `true` to open the toast
          */
@@ -21,6 +23,26 @@ const Toast = class {
          * until `close()` is called.
          */
         this.timeout = 5000;
+        this.onMouseEnter = () => {
+            this.isHovered = true;
+            this.clearAutoClose();
+        };
+        this.onMouseLeave = () => {
+            this.isHovered = false;
+            this.scheduleAutoClose();
+        };
+        this.onFocusIn = () => {
+            this.isFocusWithin = true;
+            this.clearAutoClose();
+        };
+        this.onFocusOut = (ev) => {
+            const next = ev.relatedTarget;
+            const current = ev.currentTarget;
+            if (current && next && current.contains(next))
+                return;
+            this.isFocusWithin = false;
+            this.scheduleAutoClose();
+        };
         /**
          * Close the dialog when clicking on the cross or layer
          */
@@ -34,35 +56,64 @@ const Toast = class {
      * Watch the isOpen property to start the timeout before closing
      */
     isOpenChanged() {
-        if (this.isOpen && this.timeout > 0) {
-            setTimeout(() => this.close(), this.timeout);
+        if (this.isOpen)
+            this.scheduleAutoClose();
+        else
+            this.clearAutoClose();
+    }
+    timeoutChanged() {
+        if (this.isOpen)
+            this.scheduleAutoClose();
+    }
+    colorChanged() {
+        if (this.isOpen)
+            this.scheduleAutoClose();
+    }
+    getEffectiveTimeout() {
+        if (this.color === 'danger')
+            return 0;
+        return this.timeout;
+    }
+    clearAutoClose() {
+        if (this.autoCloseTimeoutId != null) {
+            clearTimeout(this.autoCloseTimeoutId);
+            this.autoCloseTimeoutId = undefined;
         }
     }
+    scheduleAutoClose() {
+        this.clearAutoClose();
+        if (!this.isOpen)
+            return;
+        if (this.isHovered || this.isFocusWithin)
+            return;
+        const effectiveTimeout = this.getEffectiveTimeout();
+        if (effectiveTimeout <= 0)
+            return;
+        this.autoCloseTimeoutId = window.setTimeout(() => {
+            this.close();
+        }, effectiveTimeout);
+    }
     /**
      * Open the toast
      */
     async open() {
         this.isOpen = true;
-        if (this.timeout > 0) {
-            setTimeout(() => {
-                this.close();
-            }, this.timeout);
-        }
     }
     /**
      * Close the toast
      */
     async close() {
+        this.clearAutoClose();
         this.isOpen = false;
         this.onClose.emit();
     }
     componentDidLoad() {
-        if (this.isOpen && this.timeout > 0) {
-            setTimeout(() => this.close(), this.timeout);
-        }
+        if (this.isOpen)
+            this.scheduleAutoClose();
     }
     render() {
         const toastIsOpenClass = this.isOpen ? 'toast-open' : '';
+        const effectiveTimeout = this.getEffectiveTimeout();
         let icon;
         switch (this.color) {
             case 'info':
@@ -81,13 +132,12 @@ const Toast = class {
                 icon = alertInfoOutline;
                 break;
         }
-        if (this.color == 'danger') {
-            this.timeout = 0;
-        }
-        return (h(Host, { key: '5c3caac868d79f97699af08fb0b96c1ff35ad9cc', class: `${toastIsOpenClass}`, role: "alert" }, h("div", { key: 'b20177ba76a147f157605497de541dd53070a7b1', class: `toast toast-${this.color}` }, h("road-icon", { key: 'f75466515c805ee5460577e9694b374b1a30ac62', class: "toast-icon", icon: icon, "aria-hidden": "true" }), h("p", { key: 'a2e984002c90fbcc7f0eb8f912835c46f1f5effd', class: "toast-label" }, this.label), h("button", { key: '37b9009541e949ee9ffe2350abd189a2d5bcf014', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, h("road-icon", { key: '5c0cd9dbae939e8c52cb2150861b3c0f68d5518b', icon: navigationClose, size: "md" })), h("slot", { key: '48469490e404f7db80d5c77aa3e08c02d769dd4f', name: "progress" }))));
+        return (h(Host, { key: 'c53f341eb9ab4cd5bc6473010b3f20fa8bd89992', class: `${toastIsOpenClass}`, role: "alert", style: { '--road-toast-timeout': `${effectiveTimeout}ms` } }, h("div", { key: 'c19b7f56e4742ab271d221b1c32d46c00483742c', class: `toast toast-${this.color}`, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onFocusin: this.onFocusIn, onFocusout: this.onFocusOut }, h("road-icon", { key: 'aee43fd100a79856280457bca668c5523c9a919c', class: "toast-icon", icon: icon, "aria-hidden": "true" }), h("p", { key: 'ba7a66ea709c4a3d7049fbb6c06bb9c49018b6eb', class: "toast-label" }, this.label), h("button", { key: 'ed67191bfe6ef32f5d40d5d8c4b6427c79a6c3d4', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, h("road-icon", { key: '58337a7ac323b56cd4e4cf2b81773cba4ad271cd', icon: navigationClose, size: "md" })), h("slot", { key: '0403310fb12b4e510932670f23535092483bf7d3', name: "progress" }))));
     }
     static get watchers() { return {
-        "isOpen": ["isOpenChanged"]
+        "isOpen": ["isOpenChanged"],
+        "timeout": ["timeoutChanged"],
+        "color": ["colorChanged"]
     }; }
 };
 Toast.style = RoadToastStyle0;

package/dist/esm/road-toast.entry.js.map

@@ -1 +1 @@
-{"file":"road-toast.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,urEAAurE,CAAC;AACzsE,wBAAe,QAAQ;;MCkBV,KAAK;IALlB;;;;;;QAU2B,WAAM,GAAY,KAAK,CAAC;;;;QAKzC,UAAK,GAAmB,MAAM,CAAC;;;;;QAW/B,YAAO,GAAW,IAAI,CAAC;;;;QA0CvB,YAAO,GAAG,CAAC,EAAW;YAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;SACd,CAAC;KA8CH;;;;IAlFC,aAAa;QACX,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;KACF;;;;IAMD,MAAM,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAG,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnB,UAAU,CAAC;gBACT,IAAI,CAAC,KAAK,EAAE,CAAC;aACd,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAClB;KACF;;;;IAMD,MAAM,KAAK;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB;IAYD,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;KACF;IAED,MAAM;QACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,GAAG,EAAE,CAAC;QACzD,IAAI,IAAI,CAAC;QACT,QAAO,IAAI,CAAC,KAAK;YACjB,KAAK,MAAM;gBACT,IAAI,GAAG,gBAAgB,CAAC;gBACxB,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAG,mBAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAG,mBAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,GAAG,kBAAkB,CAAC;gBAC1B,MAAM;YACR;gBACE,IAAI,GAAG,gBAAgB,CAAC;gBACxB,MAAM;SACP;QAED,IAAI,IAAI,CAAC,KAAK,IAAG,QAAQ,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA;SACjB;QAED,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,GAAG,gBAAgB,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9C,4DAAK,KAAK,EAAE,eAAe,IAAI,CAAC,KAAK,EAAE,IACrC,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,iBAAc,MAAM,GAAa,EACzE,0DAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAK,EACvC,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,gBAAY,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAChF,kEAAW,IAAI,EAAE,eAAe,EAAE,IAAI,EAAC,IAAI,GAAa,CACjD,EACT,6DAAM,IAAI,EAAC,UAAU,GAAE,CACnB,CACD,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/toast/toast.css?tag=road-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/*\n * Toast\n *\n *\n * Index\n * - Container\n * - Toast\n * - Feedback color\n * - Feedback icon\n * - Close button\n */\n\n\n/* CONTAINER\n -------------------- */\n\n:host {\n  position: fixed;\n  right: 0;\n  bottom: 1rem;\n  left: 0;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n  width: 328px;\n  margin: 0 auto;\n  pointer-events: none;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;\n  transform: translateY(-100%);\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    right: 1.5rem;\n    bottom: 3rem;\n    left: auto;\n    width: auto;\n    transform: translateX(100%);\n  }\n}\n\n/**\n * Open state\n */\n\n:host(.toast-open) {\n  visibility: visible;\n  opacity: 1;\n  transform: none;\n}\n\n/* TOAST\n -------------------- */\n\n.toast {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 100%;\n  flex-flow: wrap;\n  align-items: flex-start;\n  width: 328px;\n  padding: 0.75rem 2rem 0.6rem 1rem;\n  font-family: var(--road-font);\n  font-size: var(--road-body-medium);\n  line-height: 1.4;\n  color: var(--road-on-info-surface-inverse);\n  text-align: left;\n  background: var(--road-info-surface-inverse);\n  border-radius: 0.25rem;\n}\n\n@media (min-width: 575px) {\n\n  .toast {\n    padding: 1rem;\n    margin-right: auto;\n    margin-left: auto;\n  }\n}\n\n/* FEEDBACK COLOR\n -------------------- */\n\n/**\n * Danger\n */\n\n.toast-danger {\n  color: var(--road-on-danger-surface-inverse);\n  pointer-events: all;\n  background: var(--road-danger-surface-inverse);\n}\n\n.toast-danger road-icon {\n  color: var(--road-danger-icon-inverse);\n}\n\n/**\n * Warning\n */\n\n.toast-warning {\n  color: var(--road-on-warning-surface-inverse);\n  background: var(--road-warning-surface-inverse);\n}\n\n.toast-warning road-icon {\n  color: var(--road-warning-icon-inverse);\n}\n\n/**\n * Success\n */\n\n.toast-success {\n  color: var(--road-on-success-surface-inverse);\n  background: var(--road-success-surface-inverse);\n}\n\n.toast-success road-icon {\n  color: var(--road-success-icon-inverse);\n}\n\n/**\n * Info\n */\n\n.toast-info {\n  color: var(--road-on-info-surface-inverse);\n  background: var(--road-info-surface-inverse);\n}\n\n.toast-info road-icon {\n  color: var(--road-info-icon-inverse);\n}\n\n/* FEEDBACK ICON\n -------------------- */\n\n.toast-icon {\n  top: auto;\n  left: 0.5rem;\n  margin-top: -5px;\n  margin-right: 0.5rem;\n}\n\n@media (min-width: 575px) {\n\n  .toast-icon {\n    position: relative;\n    top: auto;\n    left: auto;\n    margin-right: 0.5rem;\n  }\n}\n\n/* CLOSE BUTTON\n -------------------- */\n\n.toast-close {\n  position: absolute;\n  right: 0.5rem;\n  padding: 0;\n  color: inherit;\n  cursor: pointer;\n  background: none;\n  border: 0;\n  border-radius: 4px;\n  fill: var(--road-info-icon-inverse);\n}\n\n.toast-warning .toast-close {\n  fill: var(--road-warning-icon-inverse);\n}\n\n\n/**\n * Focus state\n */\n\n.toast-close:focus {\n  border-color: var(--road-info-surface-inverse);\n  outline: none;\n}\n\n/* TOAST LABEL\n -------------------- */\n\n.toast-label{\n  width: 240px;\n  margin: 0;\n}\n\n/* TOAST PORGRESS BAR\n -------------------- */\n\n:host ::slotted(road-progress) {\n  position: absolute;\n  bottom: -8px;\n  left: 0;\n  flex-basis: 100%;\n  width: 100%;\n  margin-top: 0.5rem;\n}\n\n/* ANIMATION\n -------------------- */\n\n\n@keyframes load {\n\n  0% {\n    width: 0;\n  }\n\n  100% {\n    width: 100%;\n  }\n}\n","import { Component, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n\n/**\n *\n * @slot progress - the progress bar in the toast.\n * color=\"info\" for Info\n * color=\"success\" for success\n * color=\"warning\" for warning\n * color=\"danger\" for danger\n */\n\n@Component({\n  tag: 'road-toast',\n  styleUrl: 'toast.css',\n  shadow: true,\n})\nexport class Toast {\n\n  /**\n   * Set `open` propertie to `true` to open the toast\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Set the color of the toast. e.g. info, success, warning, danger\n   */\n  @Prop() color: FeedbackColors = 'info';\n\n  /**\n   * Text display in the toast\n   */\n  @Prop() label?: string;\n\n  /**\n   * How many milliseconds to wait before hiding the toast. if `\"0\"`, it will show\n   * until `close()` is called.\n   */\n  @Prop() timeout: number = 5000;\n\n  /**\n    * Indicate when closing the toast\n    */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Watch the isOpen property to start the timeout before closing\n   */\n  @Watch('isOpen')\n  isOpenChanged() {\n    if (this.isOpen && this.timeout > 0) {\n      setTimeout(() => this.close(), this.timeout);\n    }\n  }\n\n  /**\n   * Open the toast\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n    if(this.timeout > 0) {\n      setTimeout(() => {\n        this.close();\n      }, this.timeout);\n    }\n  }\n\n  /**\n   * Close the toast\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.onClose.emit();\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  componentDidLoad() {\n    if (this.isOpen && this.timeout > 0) {\n      setTimeout(() => this.close(), this.timeout);\n    }\n  }\n\n  render() {\n    const toastIsOpenClass = this.isOpen ? 'toast-open' : '';\n    let icon;\n    switch(this.color) {\n    case 'info':\n      icon = alertInfoOutline;\n      break;\n    case 'success':\n      icon = alertSuccessOutline;\n      break;\n    case 'warning':\n      icon = alertWarningOutline;\n      break;\n    case 'danger':\n      icon = alertDangerOutline;\n      break;\n    default:\n      icon = alertInfoOutline;\n      break;\n    }\n\n    if (this.color =='danger') {\n      this.timeout = 0\n    }\n\n    return (\n      <Host class={`${toastIsOpenClass}`} role=\"alert\">\n        <div class={`toast toast-${this.color}`}>\n          <road-icon class=\"toast-icon\" icon={icon} aria-hidden=\"true\"></road-icon>\n          <p class=\"toast-label\">{this.label}</p>\n          <button type=\"button\" class=\"toast-close\" aria-label=\"Close\" onClick={this.onClick}>\n            <road-icon icon={navigationClose} size=\"md\"></road-icon>\n          </button>\n          <slot name=\"progress\"/>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"road-toast.entry.js","mappings":"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","names":[],"sources":["src/components/toast/toast.css?tag=road-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/*\n * Toast\n *\n *\n * Index\n * - Container\n * - Toast\n * - Feedback color\n * - Feedback icon\n * - Close button\n */\n\n\n/* CONTAINER\n -------------------- */\n\n:host {\n  position: fixed;\n  right: 0;\n  bottom: 1rem;\n  left: 0;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n  width: 328px;\n  margin: 0 auto;\n  --road-toast-timeout: 5000ms;\n  pointer-events: none;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;\n  transform: translateY(-100%);\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    right: 1.5rem;\n    bottom: 3rem;\n    left: auto;\n    width: auto;\n    transform: translateX(100%);\n  }\n}\n\n/**\n * Open state\n */\n\n:host(.toast-open) {\n  visibility: visible;\n  opacity: 1;\n  transform: none;\n}\n\n/* TOAST\n -------------------- */\n\n.toast {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 100%;\n  flex-flow: wrap;\n  align-items: flex-start;\n  width: 328px;\n  padding: 0.75rem 2rem 0.6rem 1rem;\n  font-family: var(--road-font);\n  font-size: var(--road-body-medium);\n  line-height: 1.4;\n  color: var(--road-on-info-surface-inverse);\n  text-align: left;\n  background: var(--road-info-surface-inverse);\n  border-radius: 0.25rem;\n  pointer-events: all;\n  --road-progress-animation-play-state: running;\n}\n\n.toast:hover,\n.toast:focus-within {\n  --road-progress-animation-play-state: paused;\n}\n\n@media (min-width: 575px) {\n\n  .toast {\n    padding: 1rem;\n    margin-right: auto;\n    margin-left: auto;\n  }\n}\n\n/* FEEDBACK COLOR\n -------------------- */\n\n/**\n * Danger\n */\n\n.toast-danger {\n  color: var(--road-on-danger-surface-inverse);\n  background: var(--road-danger-surface-inverse);\n}\n\n.toast-danger road-icon {\n  color: var(--road-danger-icon-inverse);\n}\n\n/**\n * Warning\n */\n\n.toast-warning {\n  color: var(--road-on-warning-surface-inverse);\n  background: var(--road-warning-surface-inverse);\n}\n\n.toast-warning road-icon {\n  color: var(--road-warning-icon-inverse);\n}\n\n/**\n * Success\n */\n\n.toast-success {\n  color: var(--road-on-success-surface-inverse);\n  background: var(--road-success-surface-inverse);\n}\n\n.toast-success road-icon {\n  color: var(--road-success-icon-inverse);\n}\n\n/**\n * Info\n */\n\n.toast-info {\n  color: var(--road-on-info-surface-inverse);\n  background: var(--road-info-surface-inverse);\n}\n\n.toast-info road-icon {\n  color: var(--road-info-icon-inverse);\n}\n\n/* FEEDBACK ICON\n -------------------- */\n\n.toast-icon {\n  top: auto;\n  left: 0.5rem;\n  margin-top: -5px;\n  margin-right: 0.5rem;\n}\n\n@media (min-width: 575px) {\n\n  .toast-icon {\n    position: relative;\n    top: auto;\n    left: auto;\n    margin-right: 0.5rem;\n  }\n}\n\n/* CLOSE BUTTON\n -------------------- */\n\n.toast-close {\n  position: absolute;\n  right: 0.5rem;\n  padding: 0;\n  color: inherit;\n  cursor: pointer;\n  background: none;\n  border: 0;\n  border-radius: 4px;\n  fill: var(--road-info-icon-inverse);\n  height: 1.5rem;\n}\n\n.toast-warning .toast-close {\n  fill: var(--road-warning-icon-inverse);\n}\n\n\n/**\n * Focus state\n */\n\n.toast-close:focus {\n  border-color: var(--road-info-surface-inverse);\n  outline: none;\n}\n\n.toast-close:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n.toast:focus-within {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n/* TOAST LABEL\n -------------------- */\n\n.toast-label{\n  width: 240px;\n  margin: 0;\n}\n\n/* TOAST PORGRESS BAR\n -------------------- */\n\n:host ::slotted(road-progress) {\n  position: absolute;\n  bottom: -8px;\n  left: 0;\n  flex-basis: 100%;\n  width: 100%;\n  margin-top: 0.5rem;\n  --road-progress-animation-duration: var(--road-toast-timeout);\n}\n\n/* ANIMATION\n -------------------- */\n\n\n@keyframes load {\n\n  0% {\n    width: 0;\n  }\n\n  100% {\n    width: 100%;\n  }\n}\n","import { Component, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n\n/**\n *\n * @slot progress - the progress bar in the toast.\n * color=\"info\" for Info\n * color=\"success\" for success\n * color=\"warning\" for warning\n * color=\"danger\" for danger\n */\n\n@Component({\n  tag: 'road-toast',\n  styleUrl: 'toast.css',\n  shadow: true,\n})\nexport class Toast {\n  private autoCloseTimeoutId?: number;\n  private isHovered = false;\n  private isFocusWithin = false;\n\n  /**\n   * Set `open` propertie to `true` to open the toast\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Set the color of the toast. e.g. info, success, warning, danger\n   */\n  @Prop() color: FeedbackColors = 'info';\n\n  /**\n   * Text display in the toast\n   */\n  @Prop() label?: string;\n\n  /**\n   * How many milliseconds to wait before hiding the toast. if `\"0\"`, it will show\n   * until `close()` is called.\n   */\n  @Prop() timeout: number = 5000;\n\n  /**\n    * Indicate when closing the toast\n    */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Watch the isOpen property to start the timeout before closing\n   */\n  @Watch('isOpen')\n  isOpenChanged() {\n    if (this.isOpen) this.scheduleAutoClose();\n    else this.clearAutoClose();\n  }\n\n  @Watch('timeout')\n  timeoutChanged() {\n    if (this.isOpen) this.scheduleAutoClose();\n  }\n\n  @Watch('color')\n  colorChanged() {\n    if (this.isOpen) this.scheduleAutoClose();\n  }\n\n  private getEffectiveTimeout(): number {\n    if (this.color === 'danger') return 0;\n    return this.timeout;\n  }\n\n  private clearAutoClose() {\n    if (this.autoCloseTimeoutId != null) {\n      clearTimeout(this.autoCloseTimeoutId);\n      this.autoCloseTimeoutId = undefined;\n    }\n  }\n\n  private scheduleAutoClose() {\n    this.clearAutoClose();\n\n    if (!this.isOpen) return;\n    if (this.isHovered || this.isFocusWithin) return;\n\n    const effectiveTimeout = this.getEffectiveTimeout();\n    if (effectiveTimeout <= 0) return;\n\n    this.autoCloseTimeoutId = window.setTimeout(() => {\n      this.close();\n    }, effectiveTimeout);\n  }\n\n  private onMouseEnter = () => {\n    this.isHovered = true;\n    this.clearAutoClose();\n  };\n\n  private onMouseLeave = () => {\n    this.isHovered = false;\n    this.scheduleAutoClose();\n  };\n\n  private onFocusIn = () => {\n    this.isFocusWithin = true;\n    this.clearAutoClose();\n  };\n\n  private onFocusOut = (ev: FocusEvent) => {\n    const next = ev.relatedTarget as Node | null;\n    const current = ev.currentTarget as HTMLElement | null;\n    if (current && next && current.contains(next)) return;\n\n    this.isFocusWithin = false;\n    this.scheduleAutoClose();\n  };\n\n  /**\n   * Open the toast\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the toast\n   */\n  @Method()\n  async close() {\n    this.clearAutoClose();\n    this.isOpen = false;\n    this.onClose.emit();\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  componentDidLoad() {\n    if (this.isOpen) this.scheduleAutoClose();\n  }\n\n  render() {\n    const toastIsOpenClass = this.isOpen ? 'toast-open' : '';\n    const effectiveTimeout = this.getEffectiveTimeout();\n    let icon;\n    switch(this.color) {\n    case 'info':\n      icon = alertInfoOutline;\n      break;\n    case 'success':\n      icon = alertSuccessOutline;\n      break;\n    case 'warning':\n      icon = alertWarningOutline;\n      break;\n    case 'danger':\n      icon = alertDangerOutline;\n      break;\n    default:\n      icon = alertInfoOutline;\n      break;\n    }\n\n    return (\n      <Host\n        class={`${toastIsOpenClass}`}\n        role=\"alert\"\n        style={{ '--road-toast-timeout': `${effectiveTimeout}ms` }}\n      >\n        <div\n          class={`toast toast-${this.color}`}\n          onMouseEnter={this.onMouseEnter}\n          onMouseLeave={this.onMouseLeave}\n          onFocusin={this.onFocusIn}\n          onFocusout={this.onFocusOut}\n        >\n          <road-icon class=\"toast-icon\" icon={icon} aria-hidden=\"true\"></road-icon>\n          <p class=\"toast-label\">{this.label}</p>\n          <button type=\"button\" class=\"toast-close\" aria-label=\"Close\" onClick={this.onClick}>\n            <road-icon icon={navigationClose} size=\"md\"></road-icon>\n          </button>\n          <slot name=\"progress\"/>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/roadtrip.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   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],\"dustbinLabelA11y\":[1,\"dustbin-label-a11y\"],\"decreaseLabelA11y\":[1,\"decrease-label-a11y\"],\"increaseLabelA11y\":[1,\"increase-label-a11y\"],\"quantityLabelA11y\":[1,\"quantity-label-a11y\"],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32],\"decreaseAriaLabel\":[32],\"increaseAriaLabel\":[32]},null,{\"value\":[\"onValueChange\"],\"readonly\":[\"onValueChange\"],\"decreaseLabelA11y\":[\"onA11yLabelChange\"],\"increaseLabelA11y\":[\"onA11yLabelChange\"],\"dustbinLabelA11y\":[\"onA11yLabelChange\"]}],[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\"],\"timeout\":[\"timeoutChanged\"],\"color\":[\"colorChanged\"]}]]],[\"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);
 });
 
 //# sourceMappingURL=roadtrip.js.map

package/dist/html.html-data.json

@@ -611,6 +611,18 @@
           "name": "selected",
           "description": "If `true`, the card has the `selected` state and the `selected` class is applied on the host.\nToggled automatically when the card is clicked (when clickable)."
         },
+        {
+          "name": "selection-mode",
+          "description": "Defines the selection mode.\n- `\"single\"`: only one card can be selected at a time (focus outline disabled).\n- `\"multiple\"`: multiple cards can be selected simultaneously.",
+          "values": [
+            {
+              "name": "multiple"
+            },
+            {
+              "name": "single"
+            }
+          ]
+        },
         {
           "name": "target",
           "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
@@ -894,10 +906,22 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "decrease-label-a11y",
+          "description": "Accessible label for the decrease button (suffix `, minimum {min}` is appended when not in dustbin mode)."
+        },
         {
           "name": "dustbin",
           "description": "Set to `true` to add the dustbin icon if the value is equal to the min."
         },
+        {
+          "name": "dustbin-label-a11y",
+          "description": "Accessible label for the dustbin button when `dustbin` is enabled and value equals `min`."
+        },
+        {
+          "name": "increase-label-a11y",
+          "description": "Accessible label for the increase button (suffix `, maximum {max}` is appended when not in dustbin mode)."
+        },
         {
           "name": "input-id",
           "description": "The id of counter"
@@ -910,6 +934,10 @@
           "name": "min",
           "description": "The minimum value, which must not be greater than its maximum (max attribute) value."
         },
+        {
+          "name": "quantity-label-a11y",
+          "description": "Accessible label for the input field."
+        },
         {
           "name": "readonly",
           "description": "Set to `true` to not modify the input field"

package/dist/roadtrip/p-12f2b114.entry.js

@@ -0,0 +1,2 @@
+import{r,h as e,H as s}from"./p-d7aae05d.js";const a=".progress{--border-radius:0.25rem;display:flex;height:0.25rem;overflow:hidden;font-size:var(--road-label-small);background-color:var(--road-surface-disabled);border-radius:var(--border-radius)}.progress-light{background-color:var(--road-overlay-inverse)}.progress-element-info{display:flex;justify-content:space-between;margin-top:0.5rem}.progress-element-info-full-width{display:flex;justify-content:space-between;padding:0 1rem;margin-top:0.5rem}.progress-element-label{font-size:var(--road-label-medium);text-align:left}.progress-element-step{font-size:var(--road-label-medium);text-align:right}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;text-align:center;white-space:nowrap;transition:width 0.6s ease}.progress.progress-primary .progress-bar{background:var(--road-primary)}.progress.progress-secondary .progress-bar{background:var(--road-secondary)}.progress.progress-info .progress-bar{background:var(--road-info-surface-inverse)}.progress.progress-success .progress-bar{background:var(--road-success-surface-inverse)}.progress.progress-warning .progress-bar{background:var(--road-warning-surface-inverse)}.progress.progress-danger .progress-bar{background:var(--road-danger-surface-inverse)}.progress.progress-rating .progress-bar{background:var(--road-rating)}.animation .progress-bar{animation:load var(--road-progress-animation-duration, 5s) normal forwards;animation-play-state:var(--road-progress-animation-play-state, running)}@keyframes load{0%{width:0}100%{width:100%}}";const o=a;const i=class{constructor(e){r(this,e);this.value=0;this.numbersteps=0;this.label="";this.showstep=false;this.animation=false;this.light=false;this.fullwidth=false;this.color="primary";this.progresscalculationbase="current"}render(){const r=this.fullwidth?"progress-element-info-full-width":"progress-element-info";const a=this.light?"progress progress-light":"progress";const o=this.animation?"animation":"";const i=this.progresscalculationbase==="current"?0:-1;const t=100/this.numbersteps;const n=this.value+(this.numbersteps?t*i:0);let d=Math.ceil(this.value/100*this.numbersteps);d=Math.min(d,this.numbersteps);d=Math.max(d,0);return e(s,{key:"afaa397b17cba4c71cf8b9899ea0272869ceace6",class:"progress-element"},e("div",{key:"8b049a8b3d40c3c23ceca9fd931be9e028f1a919",class:`${a} progress-${this.color} ${o}`},e("div",{key:"05c9a7efd42334e449cc9394dcaa4ed173e70870",class:"progress-bar",role:"progressbar",style:{width:`${n}%`},"aria-valuenow":n,"aria-valuemin":"0","aria-valuemax":"100","aria-labelledby":"loadinglabel","aria-label":"progress bar"})),e("div",{key:"57c7b9d84886d5c96d633d3d85e95059cb113f2b",class:`${r}`},e("span",{key:"befe4e5d339847a04bfa246edc0c809523e40aa9",id:"loadinglabel",class:"progress-element-label"},this.label),this.showstep&&e("span",{key:"6eb7e35b57306e67f5bf5ff45d592b926669f63a",class:"progress-element-step"},d,"/",this.numbersteps)))}};i.style=o;export{i as road_progress};
+//# sourceMappingURL=p-12f2b114.entry.js.map

package/dist/roadtrip/p-12f2b114.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["progressCss","RoadProgressStyle0","ProgressBar","constructor","hostRef","this","value","numbersteps","label","showstep","animation","light","fullwidth","color","progresscalculationbase","render","offset","percentagePerStep","progressBarFilledPercentage","step","Math","ceil","min","max","h","Host","key","class","role","style","width","id"],"sources":["src/components/progress/progress.css?tag=road-progress&encapsulation=shadow","src/components/progress/progress.tsx"],"sourcesContent":["/*\n * Progress\n *\n * Index\n * - Progress\n * - Progress Bar\n * - Colors\n */\n\n/**\n * @prop --border-radius: Border radius of the progress\n */\n\n/* PROGRESS\n -------------------- */\n\n.progress{\n  --border-radius: 0.25rem;\n\n  display: flex;\n  height: 0.25rem;\n  overflow: hidden;\n  font-size: var(--road-label-small);\n  background-color: var(--road-surface-disabled);\n  border-radius: var(--border-radius);\n}\n\n.progress-light{\n  background-color: var(--road-overlay-inverse);\n}\n\n\n.progress-element-info {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 0.5rem;\n}\n\n.progress-element-info-full-width {\n  display: flex;\n  justify-content: space-between;\n  padding: 0 1rem;\n  margin-top: 0.5rem;\n}\n\n.progress-element-label {\n  font-size: var(--road-label-medium);\n  text-align: left;\n}\n\n.progress-element-step {\n  font-size: var(--road-label-medium);\n  text-align: right;\n}\n\n/* PROGRESS BAR\n -------------------- */\n\n.progress-bar {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  text-align: center;\n  white-space: nowrap;\n  transition: width 0.6s ease;\n}\n\n/* COLORS\n -------------------- */\n\n.progress.progress-primary .progress-bar {\n  background: var(--road-primary);\n}\n\n.progress.progress-secondary .progress-bar {\n  background: var(--road-secondary);\n}\n\n.progress.progress-info .progress-bar {\n  background: var(--road-info-surface-inverse);\n}\n\n.progress.progress-success .progress-bar {\n  background: var(--road-success-surface-inverse);\n}\n\n.progress.progress-warning .progress-bar {\n  background: var(--road-warning-surface-inverse);\n}\n\n.progress.progress-danger .progress-bar {\n  background: var(--road-danger-surface-inverse);\n}\n\n.progress.progress-rating .progress-bar {\n  background: var(--road-rating);\n}\n\n\n/* ANIMATION\n -------------------- */\n\n.animation .progress-bar{\n  animation: load var(--road-progress-animation-duration, 5s) normal forwards;\n  animation-play-state: var(--road-progress-animation-play-state, running);\n}\n\n@keyframes load {\n\n  0% {\n    width: 0;\n  }\n\n  100% {\n    width: 100%;\n  }\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"road-progress\",\n  styleUrl: \"progress.css\",\n  shadow: true,\n})\nexport class ProgressBar {\n  /**\n   * The value determines how much of the active bar should display.\n   * The value should be between [0, 100].\n   */\n  @Prop() value: number = 0;\n\n  /**\n   * The number of steps.\n   */\n  @Prop() numbersteps: number = 0;\n\n  /**\n   * Label display in progress bar\n   */\n  @Prop() label: string = \"\";\n\n  /**\n   * Show step\n   */\n  @Prop() showstep: boolean = false;\n\n  /**\n   * Animation progress bar\n   */\n  @Prop() animation: boolean = false;\n\n  /**\n   * Light progress background\n   */\n  @Prop() light: boolean = false;\n\n  /**\n   * Add padding if the progress is full width\n   */\n  @Prop() fullwidth: boolean = false;\n\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color:\n    | \"primary\"\n    | \"secondary\"\n    | \"info\"\n    | \"success\"\n    | \"warning\"\n    | \"danger\"\n    | \"rating\" = \"primary\";\n\n  /**\n   * Progress calculation base for step display\n   * - previous: step is calculated based on the previous completed step\n   * - current: step is calculated based on the current progress\n   * Default is 'current'\n   */\n  @Prop() progresscalculationbase: \"previous\" | \"current\" = \"current\";\n\n  render() {\n    const fullwidth = this.fullwidth\n      ? \"progress-element-info-full-width\"\n      : \"progress-element-info\";\n    const light = this.light ? \"progress progress-light\" : \"progress\";\n    const animation = this.animation ? \"animation\" : \"\";\n\n    const offset: number = this.progresscalculationbase === \"current\" ? 0 : -1;\n    const percentagePerStep = 100 / this.numbersteps;\n    const progressBarFilledPercentage =\n      this.value + (this.numbersteps ? percentagePerStep * offset : 0);\n\n    let step = Math.ceil((this.value / 100) * this.numbersteps);\n    step = Math.min(step, this.numbersteps);\n    step = Math.max(step, 0);\n\n    return (\n      <Host class=\"progress-element\">\n        <div class={`${light} progress-${this.color} ${animation}`}>\n          <div\n            class=\"progress-bar\"\n            role=\"progressbar\"\n            style={{ width: `${progressBarFilledPercentage}%` }}\n            aria-valuenow={progressBarFilledPercentage}\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            aria-labelledby=\"loadinglabel\"\n            aria-label=\"progress bar\"\n          ></div>\n        </div>\n        <div class={`${fullwidth}`}>\n          <span id=\"loadinglabel\" class=\"progress-element-label\">\n            {this.label}\n          </span>\n          {this.showstep && (\n            <span class=\"progress-element-step\">\n              {step}/{this.numbersteps}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAc,2/CACpB,MAAAC,EAAeD,E,MCMFE,EAAW,MALxB,WAAAC,CAAAC,G,UAUUC,KAAAC,MAAgB,EAKhBD,KAAAE,YAAsB,EAKtBF,KAAAG,MAAgB,GAKhBH,KAAAI,SAAoB,MAKpBJ,KAAAK,UAAqB,MAKrBL,KAAAM,MAAiB,MAKjBN,KAAAO,UAAqB,MAKrBP,KAAAQ,MAOO,UAQPR,KAAAS,wBAAkD,S,CAE1D,MAAAC,GACE,MAAMH,EAAYP,KAAKO,UACnB,mCACA,wBACJ,MAAMD,EAAQN,KAAKM,MAAQ,0BAA4B,WACvD,MAAMD,EAAYL,KAAKK,UAAY,YAAc,GAEjD,MAAMM,EAAiBX,KAAKS,0BAA4B,UAAY,GAAK,EACzE,MAAMG,EAAoB,IAAMZ,KAAKE,YACrC,MAAMW,EACJb,KAAKC,OAASD,KAAKE,YAAcU,EAAoBD,EAAS,GAEhE,IAAIG,EAAOC,KAAKC,KAAMhB,KAAKC,MAAQ,IAAOD,KAAKE,aAC/CY,EAAOC,KAAKE,IAAIH,EAAMd,KAAKE,aAC3BY,EAAOC,KAAKG,IAAIJ,EAAM,GAEtB,OACEK,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,oBACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,GAAGhB,cAAkBN,KAAKQ,SAASH,KAC7Cc,EAAA,OAAAE,IAAA,2CACEC,MAAM,eACNC,KAAK,cACLC,MAAO,CAAEC,MAAO,GAAGZ,MAAgC,gBACpCA,EAA2B,gBAC5B,IAAG,gBACH,MAAK,kBACH,eAAc,aACnB,kBAGfM,EAAA,OAAAE,IAAA,2CAAKC,MAAO,GAAGf,KACbY,EAAA,QAAAE,IAAA,2CAAMK,GAAG,eAAeJ,MAAM,0BAC3BtB,KAAKG,OAEPH,KAAKI,UACJe,EAAA,QAAAE,IAAA,2CAAMC,MAAM,yBACTR,EAAI,IAAGd,KAAKE,c","ignoreList":[]}