@roadtrip/components 3.41.2 → 3.42.1

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fee0103c.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)}: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)}.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)}.card-native:focus{border:1px solid var(--road-primary)}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)}: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 RoadCardStyle0 = cardCss;
 
 const Card = class {
@@ -13,45 +13,71 @@ const Card = class {
         this.roadcardclick = index.createEvent(this, "roadcardclick", 7);
         this.roadCardClick = index.createEvent(this, "roadCardClick", 7);
         /**
-       * The elevation.
-       */
-        this.elevation = 'none';
+         * The elevation.
+         */
+        this.elevation = "none";
         /**
          * If `true`, a button tag will be rendered and the card will be tappable.
          */
         this.button = false;
+        /**
+         * If `true`, the card has the `selected` state and the `selected` class is applied on the host.
+         * Toggled automatically when the card is clicked (when clickable).
+         */
+        this.selected = false;
+        /**
+         * If `true`, the card is disabled and cannot be clicked.
+         * Only applies when in button mode (button=true and no href).
+         */
+        this.disabled = false;
         /**
          * The type of the button. Only used when an `onclick` or `button` property is present.
          */
-        this.type = 'button';
-        this.onClick = () => {
+        this.type = "button";
+        this.onClick = (e) => {
             var _a, _b;
+            // If disabled in button mode, prevent all interactions
+            const isButtonMode = this.button && this.href === undefined;
+            if (isButtonMode && this.disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            // Toggle selected state on click for clickable cards
+            this.selected = !this.selected;
             if (this.value !== undefined) {
                 this.roadcardclick.emit({
                     value: this.value,
-                    label: (_a = this.el.querySelector('road-label')) === null || _a === void 0 ? void 0 : _a.textContent,
+                    label: (_a = this.el.querySelector("road-label")) === null || _a === void 0 ? void 0 : _a.textContent,
                 });
                 this.roadCardClick.emit({
                     value: this.value,
-                    label: (_b = this.el.querySelector('road-label')) === null || _b === void 0 ? void 0 : _b.textContent,
+                    label: (_b = this.el.querySelector("road-label")) === null || _b === void 0 ? void 0 : _b.textContent,
                 });
             }
         };
     }
     isClickable() {
-        return (this.href !== undefined || this.button);
+        return this.href !== undefined || this.button;
     }
     renderCard() {
         const clickable = this.isClickable();
         if (!clickable) {
-            return [
-                index.h("slot", null)
-            ];
+            return [index.h("slot", null)];
         }
         const { href } = this;
-        const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
-        const attrs = (TagType === 'button')
-            ? { type: this.type }
+        const TagType = clickable
+            ? href === undefined
+                ? "button"
+                : "a"
+            : "div";
+        const isButtonMode = this.button && href === undefined;
+        const attrs = TagType === "button"
+            ? {
+                type: this.type,
+                disabled: isButtonMode && this.disabled,
+                "aria-disabled": isButtonMode && this.disabled ? "true" : undefined,
+            }
             : {
                 download: this.download,
                 href: this.href,
@@ -62,8 +88,12 @@ const Card = class {
     }
     render() {
         const { elevation } = this;
+        const isButtonMode = this.button && this.href === undefined;
         const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;
-        return (index.h(index.Host, { key: 'f5bd5b9245b805dbd174a96b76b349af87e4e938', class: `${elevationClass}` }, this.renderCard()));
+        const selectedClass = this.selected ? "selected" : "";
+        const isButtonClass = isButtonMode ? "is-button" : "";
+        const disabledClass = isButtonMode && this.disabled ? "is-disabled" : "";
+        return (index.h(index.Host, { key: '5ef381ca3d9d8028cc1e3a10cc06511602964437', class: `${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass}` }, this.renderCard()));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"road-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,giCAAgiC,CAAC;AACjjC,uBAAe,OAAO;;MCYT,IAAI;IALjB;;;;;;;QAYY,cAAS,GAAmC,MAAM,CAAC;;;;QAKrD,WAAM,GAAY,KAAK,CAAC;;;;QAUxB,SAAI,GAAkC,QAAQ,CAAC;QA8C/C,YAAO,GAAG;;YAChB,IAAG,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;gBAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;oBACtB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;iBACxD,CAAC,CAAC;gBACH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;oBACtB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;iBACxD,CAAC,CAAC;aACJ;SACF,CAAC;KA+CH;IA9DS,WAAW;QACjB,QAAQ,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;KACjD;IAeO,UAAU;QAChB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAErC,IAAI,CAAC,SAAS,EAAE;YAGd,OAAO;gBACLA,qBAAO;aACR,CAAC;SAEH;QACD,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtB,MAAM,OAAO,GAAG,SAAS,IAAI,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAG,IAAI,KAAY,CAAC;QACjF,MAAM,KAAK,GAAG,CAAC,OAAO,KAAK,QAAQ;cAC/B,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;cACnB;gBACA,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC;QAEJ,QAEEA,QAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,KAErBA,qBAAO,CACC,EACV;KACH;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,kBAAkB,SAAS,EAAE,GAAG,EAAE,CAAC;QAC3E,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,GAAG,cAAc,EAAE,IAC/B,IAAI,CAAC,UAAU,EAAE,CACX,EACP;KACH;;;;;;;","names":["h","Host"],"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}\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/* 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\n.card-native:focus{\n  border: 1px solid var(--road-primary);\n}\n\n/* @media (min-width: 768px) {\n\n  .card-native {\n    padding: var(--road-spacing-06);\n  }\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 { Component, h, Prop, Event, EventEmitter, Element, Host } 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\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   * 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 = () => {\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     \n      \n      return [\n        <slot/>\n      ];\n      \n    }\n    const { href } = this;\n    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;\n    const attrs = (TagType === 'button')\n      ? { type: this.type }\n      : {\n        download: this.download,\n        href: this.href,\n        rel: this.rel,\n        target: this.target,\n      };\n\n    return (\n      \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 elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n    return (\n      <Host class={`${elevationClass}`}>\n      {this.renderCard()}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-card.entry.cjs.js","mappings":"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","names":["h","Host"],"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}\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}

package/dist/cjs/road-navbar-v2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-navbar-v2.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,o6CAAo6C,CAAC;AACz7C,2BAAe,WAAW;;MCWb,QAAQ;IALrB;;;;;;;QAU2B,YAAO,GAAY,KAAK,CAAC;KA+CnD;IAxCC,kBAAkB;QAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;YAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;aACtB,CAAC,CAAC;YACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;aACtB,CAAC,CAAC;SACJ;KACF;IASD,eAAe,CAAC,EAAe;QAC7B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;KAClC;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,MAAM;QAEJ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,CAAC;QAEnD,QACEA,QAACC,UAAI,qDACH,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,GAAG,YAAY,EAAE,IAExBD,oEAAO,CACF,EACP;KACH;;;;;;;;;","names":["h","Host"],"sources":["src/components/navbar-v2/navbar-v2.css?tag=road-navbar-v2&encapsulation=shadow","src/components/navbar-v2/navbar-v2.tsx"],"sourcesContent":["/*\n * Navbar\n *\n */\n\n/**\n * @prop --z-index: The z-index of the Navbar.\n */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: var(--z-index);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 5.125rem;\n  padding-left: 0;\n  margin: 0;\n  text-align: center;\n  -webkit-user-select: none;\n          user-select: none;\n  background-color: var(--road-surface);\n  border-top: 1px solid var(--road-outline-weak);\n}\n\n@media (max-width: 576px) {\n\n  :host {\n    overflow-x: auto;\n  }\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    flex-direction: column;\n    align-items: flex-start;\n    width: 260px;\n    height: 100%;\n    padding: var(--road-spacing-05);\n    text-align: left;\n    border-top: 0;\n    border-right: 1px solid var(--road-outline-weak);\n    justify-content: space-between;\n    height: 100%;\n  }\n}\n\n\n/**\n * Button save drawer.\n */\n\n::slotted(.drawer-button-save) {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.button-native {\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: var(--padding-end) var(--padding-end) var(--padding-start) 0;\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: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n\n/**\n * Compact\n */\n\n@media (min-width: 1200px) {\n\n  :host(.compact){\n    max-width: 5.5rem;\n  }\n\n  .compact ::slotted(.compact-container){\n    max-width: 3.5rem;\n  }\n\n  .compact ::slotted(.compact-container) .compact-logo{\n    justify-content: center;\n  }\n\n}\n","import { Component, Host, h, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile\n */\n\n@Component({\n  tag: 'road-navbar-v2',\n  styleUrl: 'navbar-v2.css',\n  shadow: true,\n})\nexport class NavbarV2 {\n\n  /**\n   * Set to `true` for a compact navbar.\n   */\n  @Prop({ reflect: true }) compact: boolean = false;\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadnavbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadNavbarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadnavbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarChanged!: EventEmitter;\n\n  @Listen('roadNavbarItemClick')\n  @Listen('roadnavbaritemclick')\n  onNavbarChanged(ev: CustomEvent) {\n    this.selectedTab = ev.detail.tab;\n  }\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n\n    const compactClass = this.compact ? 'compact' : '';\n\n    return (\n      <Host\n        role=\"menubar\"\n        class={`${compactClass}`}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-navbar-v2.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,o6CAAo6C,CAAC;AACz7C,2BAAe,WAAW;;MCWb,QAAQ;IALrB;;;;;;;QAU2B,YAAO,GAAY,KAAK,CAAC;KA+CnD;IAxCC,kBAAkB;QAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;YAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;aACtB,CAAC,CAAC;YACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;aACtB,CAAC,CAAC;SACJ;KACF;IASD,eAAe,CAAC,EAAe;QAC7B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;KAClC;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,MAAM;QAEJ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,CAAC;QAEnD,QACEA,QAACC,UAAI,qDACH,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,GAAG,YAAY,EAAE,IAExBD,oEAAO,CACF,EACP;KACH;;;;;;;;;","names":["h","Host"],"sources":["src/components/navbar-v2/navbar-v2.css?tag=road-navbar-v2&encapsulation=shadow","src/components/navbar-v2/navbar-v2.tsx"],"sourcesContent":["/*\n * Navbar\n *\n */\n\n/**\n * @prop --z-index: The z-index of the Navbar.\n */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: var(--z-index);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 5.125rem;\n  padding-left: 0;\n  margin: 0;\n  text-align: center;\n  user-select: none;\n  background-color: var(--road-surface);\n  border-top: 1px solid var(--road-outline-weak);\n}\n\n@media (max-width: 576px) {\n\n  :host {\n    overflow-x: auto;\n  }\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    flex-direction: column;\n    align-items: flex-start;\n    width: 260px;\n    height: 100%;\n    padding: var(--road-spacing-05);\n    text-align: left;\n    border-top: 0;\n    border-right: 1px solid var(--road-outline-weak);\n    justify-content: space-between;\n    height: 100%;\n  }\n}\n\n\n/**\n * Button save drawer.\n */\n\n::slotted(.drawer-button-save) {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.button-native {\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: var(--padding-end) var(--padding-end) var(--padding-start) 0;\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: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n\n/**\n * Compact\n */\n\n@media (min-width: 1200px) {\n\n  :host(.compact){\n    max-width: 5.5rem;\n  }\n\n  .compact ::slotted(.compact-container){\n    max-width: 3.5rem;\n  }\n\n  .compact ::slotted(.compact-container) .compact-logo{\n    justify-content: center;\n  }\n\n}\n","import { Component, Host, h, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile\n */\n\n@Component({\n  tag: 'road-navbar-v2',\n  styleUrl: 'navbar-v2.css',\n  shadow: true,\n})\nexport class NavbarV2 {\n\n  /**\n   * Set to `true` for a compact navbar.\n   */\n  @Prop({ reflect: true }) compact: boolean = false;\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadnavbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadNavbarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadnavbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarChanged!: EventEmitter;\n\n  @Listen('roadNavbarItemClick')\n  @Listen('roadnavbaritemclick')\n  onNavbarChanged(ev: CustomEvent) {\n    this.selectedTab = ev.detail.tab;\n  }\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n\n    const compactClass = this.compact ? 'compact' : '';\n\n    return (\n      <Host\n        role=\"menubar\"\n        class={`${compactClass}`}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/cjs/roadtrip.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[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\"]}],[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-badge\",{\"color\":[1],\"bubble\":[4],\"size\":[513]}],[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\"],\"open\":[64],\"close\":[64],\"back\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"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],\"debounce\":[2],\"enforceMinMaxValue\":[64],\"focus\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"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.cjs\",[[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.cjs\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-alert.cjs\",[[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.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"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.cjs\",[[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]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[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.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal.cjs\",[[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.cjs\",[[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.cjs\",[[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-status-chip.cjs\",[[1,\"road-status-chip\",{\"size\":[1]}]]],[\"road-time-range-picker.cjs\",[[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.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-toggle.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-aspect-ratio\",{\"ratio\":[1]}]]],[\"road-asset.cjs\",[[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.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-global-navigation-v2.cjs\",[[1,\"road-global-navigation-v2\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"],[8,\"click\",\"onButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[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.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-navbar-v2\",{\"compact\":[516],\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-progress.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[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.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[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.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[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.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[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.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-toolbar-v2.cjs\",[[1,\"road-toolbar-v2\"]]],[\"road-tooltip.cjs\",[[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.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[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\"]}],[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-badge\",{\"color\":[1],\"bubble\":[4],\"size\":[513]}],[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\"],\"focusTrap\":[32],\"open\":[64],\"close\":[64],\"back\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"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],\"debounce\":[2],\"enforceMinMaxValue\":[64],\"focus\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[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.cjs\",[[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.cjs\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-alert.cjs\",[[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.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"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.cjs\",[[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]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[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.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal.cjs\",[[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.cjs\",[[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.cjs\",[[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-status-chip.cjs\",[[1,\"road-status-chip\",{\"size\":[1]}]]],[\"road-time-range-picker.cjs\",[[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.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-toggle.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-aspect-ratio\",{\"ratio\":[1]}]]],[\"road-asset.cjs\",[[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.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-global-navigation-v2.cjs\",[[1,\"road-global-navigation-v2\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"],[8,\"click\",\"onButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[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.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-navbar-v2\",{\"compact\":[516],\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-progress.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[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.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[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.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[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.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[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.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-toolbar-v2.cjs\",[[1,\"road-toolbar-v2\"]]],[\"road-tooltip.cjs\",[[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.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[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.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/button/button.css

@@ -214,21 +214,92 @@
   background: var(--road-grey-80);
 }
 
+:host(.btn-outline-default.focus-visible), 
+:host(.btn-outline-default:focus-visible) {
+  background: var(--road-surface-disabled);
+  outline-offset: 1px;
+  outline: 2px solid var(--road-outline);
+}
+
+:host(.btn-outline-default) .button-native:focus,
+:host(.btn-outline-default) .button-native:focus-visible {
+  outline: none;
+}
+
 /**
- * Ghost
+ * Ghost not inverse
  */
 
 :host(.btn-ghost) {
   color: var(--road-on-button-ghost);
 }
 
-:host(.btn-ghost) ::slotted(road-icon) {
-  color: var(--road-on-button-ghost);
+:host(.btn-ghost:not(.btn-inverse):hover) {
+  background: var(--road-button-ghost-variant);
 }
 
-:host(.btn-ghost:hover),
-:host(.btn-ghost.focus-visible) {
+:host(.btn-ghost:not(.btn-inverse).focus-visible), 
+:host(.btn-ghost:not(.btn-inverse):focus-visible) {
   background: var(--road-button-ghost-variant);
+  outline-offset: 1px;
+  outline: 2px solid var(--road-button-ghost-variant);
+}
+
+:host(.btn-ghost:not(.btn-inverse)) .button-native:focus,
+:host(.btn-ghost:not(.btn-inverse)) .button-native:focus-visible {
+  outline: none;
+}
+
+/**
+* Outline ghost not inverse
+*/
+:host(.btn-outline-ghost:not(.btn-inverse):hover) {
+  background: var(--road-surface-disabled);
+}
+
+:host(.btn-outline-ghost:not(.btn-inverse).focus-visible), 
+:host(.btn-outline-ghost:not(.btn-inverse):focus-visible) {
+  border: 1px solid var(--road-outline);
+  background: var(--road-surface-disabled);
+  outline-offset: 1px;
+  outline: 2px solid var(--road-outline);
+}
+
+:host(.btn-outline-ghost:not(.btn-inverse)) .button-native:focus,
+:host(.btn-outline-ghost:not(.btn-inverse)) .button-native:focus-visible {
+  outline: none;
+}
+
+/**
+ * Ghost inverse
+ */
+
+:host(.btn-inverse) .button-native:focus,
+:host(.btn-inverse) .button-native:focus-visible {
+  outline: none;
+}
+
+:host(.btn-inverse) ::slotted(road-icon) {
+  color: var(--road-on-button-ghost);
+}
+
+:host(.btn-inverse:hover) {
+  outline: 1px solid var(--road-on-header-surface);
+}
+
+:host(.btn-inverse.focus-visible), 
+:host(.btn-inverse:focus-visible),
+:host(.btn-inverse:focus) {
+  outline: thick double var(--road-on-header-surface);
+}
+
+:host([aria-disabled].btn-inverse) {
+  border: 1px solid var(--road-on-header-surface-disabled);
+  background: var(--road-on-header-surface-disabled);
+}
+
+:host([aria-disabled].btn-inverse) ::slotted(road-icon){
+  color: var(--road-on-header-surface-disabled);
 }
 
 /**

package/dist/collection/components/button/button.js

@@ -22,6 +22,10 @@ export class Button {
          * The type of the button.
          */
         this.buttonType = 'button';
+        /**
+         * If `true`, the button will use inverse colors (when in headers or dark backgrounds).
+         */
+        this.inverse = false;
         /**
          * If `true`, display only an icon in the button.
          */
@@ -79,7 +83,8 @@ export class Button {
         const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
         const expandClass = this.expand ? 'btn-block' : '';
         const iconOnlyClass = this.iconOnly ? 'btn-icon' : '';
-        return (h(Host, { key: '79d849dd58e95934ff3ab4c9c5b5edd65fb4c899', class: [colorClass, sizeClass, expandClass, iconOnlyClass].filter(Boolean).join(' '), onClick: this.onClick, "aria-disabled": disabled ? 'true' : null }, h(TagType, Object.assign({ key: '764448aaf4c6c221563aa2d9b00c0b55c0fdea21' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }), h("slot", { key: '54a7978f6da8b45b48db0ab31cec66d592172e90', name: "start" }), h("slot", { key: '09f29be168b254fa9e3d73273938493d14cbca2f' }), h("slot", { key: '8a014e7ebeed34446a89729ff771ac0a7c97639e', name: "end" }))));
+        const inverseClass = this.inverse ? 'btn-inverse' : '';
+        return (h(Host, { key: '10bf8a00e2cf0abe8a3116ed54c9bce15fae6b0f', class: [colorClass, sizeClass, expandClass, iconOnlyClass, inverseClass].filter(Boolean).join(' '), onClick: this.onClick, "aria-disabled": disabled ? 'true' : null }, h(TagType, Object.assign({ key: 'b4d651d32195f88f6958d3261cd88ee46476ea95' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }), h("slot", { key: '8e931be9fcf7a6894ed71921f110c3726d2a4215', name: "start" }), h("slot", { key: '4a26d78cb726e7487e8ac5fb5006b7b7c70185b3' }), h("slot", { key: 'a8f44025e68ce0142b3eee4991d9c86bb22233ee', name: "end" }))));
     }
     static get is() { return "road-button"; }
     static get encapsulation() { return "shadow"; }
@@ -155,6 +160,26 @@ export class Button {
                 "reflect": false,
                 "defaultValue": "'button'"
             },
+            "inverse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the button will use inverse colors (when in headers or dark backgrounds)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "inverse",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "iconOnly": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the button.\n * ex if onlyIcon `<road-icon name=\"shopping-cart-add\"></road-icon>`\n * @slot start - Left content of the button text, usually for icon.\n * @slot end - Right content of the button text, usually icon.\n *\n * @part native - The native HTML button or anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class Button {\n\n  @Element() el!: HTMLRoadButtonElement;\n\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'ghost' |'default' = 'default';\n\n  /**\n    * The button size.\n    */\n  @Prop({ reflect: true }) size?: 'sm' | 'md' | 'lg' | 'xl' = 'lg';\n\n  /**\n   * The type of the button.\n   */\n  @Prop() buttonType: 'submit' | 'reset' | 'button' = 'button';\n\n  /**\n   * If `true`, display only an icon in the button.\n   */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the button.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Set to `true` for a full-width button.\n   */\n  @Prop({ reflect: true }) expand: boolean = false;\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 | undefined;\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   * Set to `false` for a ghost button, set to `true` for a default outline button\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * Emitted when the button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  private onClick = (ev: Event) => {\n    if (this.el.shadowRoot && (this.el as any).attachShadow) {\n      // this button wants to specifically submit a form\n      // climb up the dom to see if we're in a <form>\n      // and if so, then use JS to submit it\n      const form = this.el.closest('form');\n      if (form) {\n        ev.preventDefault();\n\n        const fakeButton = document.createElement('button');\n        fakeButton.type = this.buttonType;\n        fakeButton.style.display = 'none';\n        form.appendChild(fakeButton);\n        fakeButton.click();\n        fakeButton.remove();\n      }\n    }\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const { buttonType, disabled, href, rel, target, color } = this;\n    const TagType = this.href === undefined ? 'button' : 'a' as any;\n    const attrs = (TagType === 'button')\n      ? { type: buttonType }\n      : {\n        download: this.download,\n        href,\n        rel,\n        target,\n      };\n    const colorClass = this.outline ? `btn-outline-${color}` : `btn-${color}`;\n    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n    const expandClass = this.expand ? 'btn-block' : '';\n    const iconOnlyClass = this.iconOnly ? 'btn-icon' : '';\n\n    return (\n      <Host\n          class={[colorClass, sizeClass, expandClass, iconOnlyClass].filter(Boolean).join(' ')}\n          onClick={this.onClick}\n          aria-disabled={disabled ? 'true' : null}\n        >\n        <TagType\n          {...attrs}\n          class=\"button-native\"\n          part=\"native\"\n          disabled={disabled}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <slot name=\"start\"/>\n          <slot/>\n          <slot name=\"end\"/>\n        </TagType>\n      </Host>\n    );\n  }\n}"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the button.\n * ex if onlyIcon `<road-icon name=\"shopping-cart-add\"></road-icon>`\n * @slot start - Left content of the button text, usually for icon.\n * @slot end - Right content of the button text, usually icon.\n *\n * @part native - The native HTML button or anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class Button {\n\n  @Element() el!: HTMLRoadButtonElement;\n\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'ghost' |'default' = 'default';\n\n  /**\n    * The button size.\n    */\n  @Prop({ reflect: true }) size?: 'sm' | 'md' | 'lg' | 'xl' = 'lg';\n\n  /**\n   * The type of the button.\n   */\n  @Prop() buttonType: 'submit' | 'reset' | 'button' = 'button';\n\n  /**\n   * If `true`, the button will use inverse colors (when in headers or dark backgrounds).\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * If `true`, display only an icon in the button.\n   */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the button.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Set to `true` for a full-width button.\n   */\n  @Prop({ reflect: true }) expand: boolean = false;\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 | undefined;\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   * Set to `false` for a ghost button, set to `true` for a default outline button\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * Emitted when the button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  private onClick = (ev: Event) => {\n    if (this.el.shadowRoot && (this.el as any).attachShadow) {\n      // this button wants to specifically submit a form\n      // climb up the dom to see if we're in a <form>\n      // and if so, then use JS to submit it\n      const form = this.el.closest('form');\n      if (form) {\n        ev.preventDefault();\n\n        const fakeButton = document.createElement('button');\n        fakeButton.type = this.buttonType;\n        fakeButton.style.display = 'none';\n        form.appendChild(fakeButton);\n        fakeButton.click();\n        fakeButton.remove();\n      }\n    }\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const { buttonType, disabled, href, rel, target, color } = this;\n    const TagType = this.href === undefined ? 'button' : 'a' as any;\n    const attrs = (TagType === 'button')\n      ? { type: buttonType }\n      : {\n        download: this.download,\n        href,\n        rel,\n        target,\n      };\n    const colorClass = this.outline ? `btn-outline-${color}` : `btn-${color}`;\n    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n    const expandClass = this.expand ? 'btn-block' : '';\n    const iconOnlyClass = this.iconOnly ? 'btn-icon' : '';\n    const inverseClass = this.inverse ? 'btn-inverse' : '';\n\n    return (\n      <Host\n          class={[colorClass, sizeClass, expandClass, iconOnlyClass, inverseClass].filter(Boolean).join(' ')}\n          onClick={this.onClick}\n          aria-disabled={disabled ? 'true' : null}\n        >\n        <TagType\n          {...attrs}\n          class=\"button-native\"\n          part=\"native\"\n          disabled={disabled}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <slot name=\"start\"/>\n          <slot/>\n          <slot name=\"end\"/>\n        </TagType>\n      </Host>\n    );\n  }\n}"]}

package/dist/collection/components/button/button.stories.js

@@ -24,6 +24,10 @@ export default {
       control: { type: 'select' },
       description: 'Specifies the type of the button.',
     },
+    inverse: {
+      control: 'boolean',
+      description: 'If `true`, the button will use inverse colors (when in headers or dark backgrounds).',
+    },
     disabled: {
       control: 'boolean',
       description: 'Disables the button when set to `true`.',
@@ -114,6 +118,7 @@ export default {
     'button-type': 'button',
     'icon-only': false,
     color: 'default',
+    inverse: false,
     disabled: false,
     expand: false,
     outline: false,
@@ -128,6 +133,7 @@ const Template = (args) => html`
 <road-button 
   button-type="${ifDefined(args['button-type'])}"
   ?icon-only="${args['icon-only']}"
+  ?inverse="${args.inverse}"
   color="${ifDefined(args.color)}"
   ?disabled="${args.disabled}"
   ?expand="${args.expand}"
@@ -207,3 +213,64 @@ BackButton.args = {
   start: `<road-icon slot="start" name="navigation-chevron" rotate="180" role="button"></road-icon>`,
   ' ': `Back`,
 };
+
+export const TyreModifyButton = Template.bind({});
+TyreModifyButton.args = {
+  color: 'ghost',
+  size: 'sm',
+  'icon-only': true,
+  inverse: true,
+  ' ': `<road-icon name="edit-outline" role="button"></road-icon>`,
+};
+TyreModifyButton.decorators = [
+  (story) => html`
+    <style>
+      .context-banner-container {
+        display: flex;
+        padding: 0.5rem 1rem;
+        align-items: center;
+        align-content: center;
+        gap: 0.5rem;
+        align-self: stretch;
+        flex-wrap: wrap;
+        background: var(--road-header-surface);
+      }
+
+      .context-banner-content {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
+
+      .context-banner-text {
+        margin: 0;
+        font-size: 0.875rem;
+        font-weight: 700;
+        line-height: 150%;
+        color: var(--road-on-header-surface);
+      }
+
+      .context-banner-label {
+        margin: 0;
+        font-size: 0.875rem;
+        line-height: 150%;
+        color: var(--road-on-header-surface);
+      }
+
+      .context-banner-button road-button {
+        --road-on-button-ghost: var(--road-on-header-surface);
+        margin: 0;
+      }
+    </style>
+    <div class="context-banner-container">
+      <div class="context-banner-content">
+        <p class="context-banner-text">Véhicule : </p>
+        <p class="context-banner-label">Tous</p>
+      </div>
+      <div class="context-banner-button">
+        ${story()}
+      </div>
+    </div>
+  `,
+];
+