@roadtrip/components 3.45.2 → 3.47.0

package/dist/cjs/road-button-carousel.cjs.entry.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-fee0103c.js');
+require('./polyfill-8e8d96b1.js');
+
+const buttonCarouselCss = ":host{position:fixed;right:1rem;bottom:1rem;z-index:2;box-sizing:border-box;display:block;align-items:center;text-decoration:none;white-space:nowrap;border:1px solid transparent;max-width:3rem;height:3rem;border-radius:2rem}:host(.scroll-up){display:block;max-width:3.5rem}:host(.scroll-down) .button-native{display:flex}:host(.scroll-down){display:flex;max-width:max-content}.button-native{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.btn-outline){background:transparent;color:var(--road-on-overlay-inverse);border-color:var(--road-overlay)}:host([aria-disabled].btn-outline){border-color:var(--road-surface-disabled);background:var(--road-surface-disabled);color:var(--road-on-surface-disabled)}:host(.btn-outline:not([disabled]):hover),:host(.btn-outline:not([disabled]).focus-visible){border-color:var(--road-outline);background:var(--road-surface)}:host(.btn-default){background:var(--road-overlay);color:var(--road-on-overlay);border-color:var(--road-overlay-inverse)}:host([aria-disabled].btn-default){background:var(--road-surface-disabled);color:var(--road-on-surface-disabled)}:host(.btn-default:not([disabled]):hover),:host(.btn-default:not([disabled]).focus-visible){color:var(--road-on-surface);border-color:transparent;background:var(--road-surface)}";
+const RoadButtonCarouselStyle0 = buttonCarouselCss;
+
+const Button = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.roadfocus = index.createEvent(this, "roadfocus", 7);
+        this.roadFocus = index.createEvent(this, "roadFocus", 7);
+        this.roadblur = index.createEvent(this, "roadblur", 7);
+        this.roadBlur = index.createEvent(this, "roadBlur", 7);
+        /**
+         * Set to `false` for a ghost button, set to `true` for a default outline button
+         */
+        this.outline = false;
+        /**
+         * If `true`, the user cannot interact with the button.
+         */
+        this.disabled = false;
+        this.onClick = (ev) => {
+            if (this.el.shadowRoot && this.el.attachShadow) {
+                // this button wants to specifically submit a form
+                // climb up the dom to see if we're in a <form>
+                // and if so, then use JS to submit it
+                const form = this.el.closest('form');
+                if (form) {
+                    ev.preventDefault();
+                    const fakeButton = document.createElement('button');
+                    fakeButton.style.display = 'none';
+                    form.appendChild(fakeButton);
+                    fakeButton.click();
+                    fakeButton.remove();
+                }
+            }
+        };
+        this.onFocus = () => {
+            this.roadfocus.emit();
+            this.roadFocus.emit();
+        };
+        this.onBlur = () => {
+            this.roadblur.emit();
+            this.roadBlur.emit();
+        };
+    }
+    onScroll() {
+        const positionScroll = window.scrollY;
+        if (positionScroll < 300) {
+            this.el.classList.add("scroll-down");
+            this.el.classList.remove("scroll-up");
+        }
+        if (positionScroll > 300) {
+            this.el.classList.add("scroll-up");
+            this.el.classList.remove("scroll-down");
+        }
+    }
+    render() {
+        const TagType = 'button';
+        const outlineClass = this.outline ? 'btn-outline' : 'btn-default';
+        return (index.h(index.Host, { key: '1107b2f89efba230a6d0c207239fb80e90c8b877', onClick: this.onClick, class: [outlineClass].filter(Boolean).join(' '), "aria-disabled": this.disabled ? 'true' : null }, index.h(TagType, { key: '125d636dce50637a3eeb67441db9ebd285b75322', class: "button-native", part: "native", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("slot", { key: 'a1128035274089a9cfd252027ee25a1164bf1988' }))));
+    }
+    get el() { return index.getElement(this); }
+};
+Button.style = RoadButtonCarouselStyle0;
+
+exports.road_button_carousel = Button;
+
+//# sourceMappingURL=road-button-carousel.cjs.entry.js.map

package/dist/cjs/road-button-carousel.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"road-button-carousel.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,sqDAAsqD,CAAC;AACjsD,iCAAe,iBAAiB;;MCcnB,MAAM;IALnB;;;;;;;;;QAYU,YAAO,GAAY,KAAK,CAAC;;;;QAKR,aAAQ,GAAY,KAAK,CAAC;QAkC3C,YAAO,GAAG,CAAC,EAAS;YAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,IAAK,IAAI,CAAC,EAAU,CAAC,YAAY,EAAE;;;;gBAIvD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;gBACrC,IAAI,IAAI,EAAE;oBACR,EAAE,CAAC,cAAc,EAAE,CAAC;oBAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACpD,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;oBAClC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;oBAC7B,UAAU,CAAC,KAAK,EAAE,CAAC;oBACnB,UAAU,CAAC,MAAM,EAAE,CAAC;iBACrB;aACF;SACF,CAAC;QAEM,YAAO,GAAG;YAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;SACvB,CAAC;QAEM,WAAM,GAAG;YACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;SACtB,CAAC;KAwBH;IAjEG,QAAQ;QACN,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC;QACtC,IAAI,cAAc,GAAG,GAAG,EAAG;YACvB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;YACrC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;SACzC;QACD,IAAI,cAAc,GAAG,GAAG,EAAG;YACvB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YACnC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;SAC3C;KACF;IAiCH,MAAM;QACJ,MAAM,OAAO,GAAG,QAAQ,CAAC;QACzB,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,aAAa,CAAC;QAElE,QACEA,QAACC,UAAI,qDACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,mBAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE5CD,QAAC,OAAO,qDACN,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnBA,oEAAO,CACC,CACL,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/button-carousel/button-carousel.css?tag=road-button-carousel&encapsulation=shadow","src/components/button-carousel/button-carousel.tsx"],"sourcesContent":["/*\n * Button carousel\n *\n *\n * Index\n * - Button\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  position: fixed;\n  right: 1rem;\n  bottom: 1rem;\n  z-index: 2;\n  box-sizing: border-box;\n  display: block;\n  align-items: center;\n  text-decoration: none;\n  white-space: nowrap;\n  border: 1px solid transparent;\n  max-width: 3rem;\n  height: 3rem;\n  border-radius: 2rem;\n}\n\n:host(.scroll-up) {\n  display: block;\n  max-width: 3.5rem;\n}\n\n\n:host(.scroll-down) .button-native{\n  display: flex;\n}\n\n:host(.scroll-down) {\n  display: flex;\n  max-width: max-content;\n}\n\n\n/**\n * Native button\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  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/* OUTLINE\n -------------------- */\n\n:host(.btn-outline) {\n  background: transparent;\n  color: var(--road-on-overlay-inverse);\n  border-color: var(--road-overlay);\n}\n\n:host([aria-disabled].btn-outline) {\n  border-color: var(--road-surface-disabled);\n  background: var(--road-surface-disabled);\n  color: var(--road-on-surface-disabled);\n}\n\n:host(.btn-outline:not([disabled]):hover),\n:host(.btn-outline:not([disabled]).focus-visible) {\n  border-color: var(--road-outline);\n  background: var(--road-surface);\n}\n\n/* DEFAULT\n -------------------- */\n\n:host(.btn-default) {\n  background: var(--road-overlay);\n  color: var(--road-on-overlay);\n  border-color: var(--road-overlay-inverse);\n}\n\n:host([aria-disabled].btn-default) {\n  background: var(--road-surface-disabled);\n  color: var(--road-on-surface-disabled);\n}\n\n:host(.btn-default:not([disabled]):hover),\n:host(.btn-default:not([disabled]).focus-visible) {\n  color: var(--road-on-surface);\n  border-color: transparent;\n  background: var(--road-surface);\n}\n\n","import { Component, Element, Event, EventEmitter, Host, Prop, h, Listen } from '@stencil/core';\n\nimport '../../utils/polyfill';\n\n/**\n * @slot - Content of the carrousel button.\n *\n * @part native - The native HTML button or anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-button-carousel',\n  styleUrl: 'button-carousel.css',\n  shadow: true,\n})\nexport class Button {\n\n  @Element() el!: HTMLRoadButtonElement;\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   * If `true`, the user cannot interact with the button.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Emitted when the button-carousel has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the button-carousel loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n\n  @Listen('scroll', {target: 'window'})\n\n    onScroll() {\n      const positionScroll = window.scrollY;\n      if (positionScroll < 300 ) {\n          this.el.classList.add(\"scroll-down\");\n          this.el.classList.remove(\"scroll-up\");\n      }\n      if (positionScroll > 300 ) {\n          this.el.classList.add(\"scroll-up\");\n          this.el.classList.remove(\"scroll-down\");\n      }\n    }\n\n\n\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.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 TagType = 'button';\n    const outlineClass = this.outline ? 'btn-outline' : 'btn-default';\n\n    return (\n      <Host\n        onClick={this.onClick}\n        class={[outlineClass].filter(Boolean).join(' ')}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <TagType\n          class=\"button-native\"\n          part=\"native\"\n          disabled={this.disabled}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <slot/>\n        </TagType>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/cjs/road-button-floating.cjs.entry.js

@@ -58,7 +58,7 @@ const Button = class {
     render() {
         const TagType = this.href === undefined ? 'button' : 'a';
         const positionClass = this.position !== undefined ? `position-${this.position}` : '';
-        return (index.h(index.Host, { key: 'c92dd334acedc9c577901d339dfa121b63c0d8d0', onClick: this.onClick, class: `${positionClass}` }, index.h(TagType, { key: '10398fbc53a8e72cfc12975c6351dfe5430af311', class: "button-native", part: "native", onFocus: this.onFocus, onBlur: this.onBlur }, index.h("slot", { key: '22d572c54bd1defb07f45426f0bbab05666feb83', name: "start" }), index.h("slot", { key: 'aad19f6d9af9b534ae7aa36485639a928c77d287' }))));
+        return (index.h(index.Host, { key: '80fc92dc2304506cc8d36b1f183af43057c8ed89', onClick: this.onClick, class: `${positionClass}` }, index.h(TagType, { key: 'aeb4f497b2b35208b69a4fb09c28b08d42b1bf94', class: "button-native", part: "native", onFocus: this.onFocus, onBlur: this.onBlur }, index.h("slot", { key: 'fd318fd17487cb99a8d898cfd09f9483963e65af', name: "start" }), index.h("slot", { key: 'f4a7566371471270921991dd553ef201ea07b8b0' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -93,7 +93,7 @@ const Card = class {
         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()));
+        return (index.h(index.Host, { key: '44026953c66e6ee3421d5bbc03c92e60710feb94', class: `${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass}` }, this.renderCard()));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/road-carousel-item.cjs.entry.js

@@ -12,10 +12,10 @@ const CarouselItem = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '9505d58be5a5b79ca69b82808b1ffd06ba6bf5ae', class: {
+        return (index.h(index.Host, { key: '66cf75481e1bb831c17a7a7ca01341dfd1f28cae', class: {
                 'swiper-slide': true,
                 'swiper-zoom-container': true,
-            } }, index.h("slot", { key: 'e5c79e5ae3ca8cb8d69cd37a5b55496e04b26652' })));
+            } }, index.h("slot", { key: 'ace4b6235ef59848e24915b3c8f17a54f78f18a7' })));
     }
 };
 CarouselItem.style = RoadCarouselItemStyle0;

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

@@ -6735,7 +6735,7 @@ const Carousel = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'fc3ffdd804e5891f91fdc8686f556e595e772e1c', class: "swiper-container", tabindex: "0" }, index$1.h("div", { key: '847514ac112594e8fcfc9eac30ffba016104672a', class: "swiper-wrapper" }, index$1.h("slot", { key: '0d0bdec966329e10668feeb889002144921fa838' })), this.pager && (index$1.h("div", { key: 'a301eb072380dc9a9a05564f269e7ffd2fb35dda', class: "swiper-pagination", ref: (el) => (this.paginationEl = el) })), this.arrows && (index$1.h("div", { key: '84b80a05177fa4301a32968ab168a5d87f18a609', role: "button", class: "swiper-button-prev", tabindex: "0", "aria-label": "Previous slide", onClick: () => this.slidePrev() }, index$1.h("road-icon", { key: 'f5d6134e5e58ee0ab5cc189582ed4e46e8e1313b', icon: index$2.navigationChevron, rotate: "180" }))), this.arrows && (index$1.h("div", { key: 'bbc274b30ef7a90efc0938a077299e15b3653d14', role: "button", class: "swiper-button-next", tabindex: "0", "aria-label": "Next slide", onClick: () => this.slideNext() }, index$1.h("road-icon", { key: '3b0a8040718466b1ecca612e42cb3b013cc583b8', icon: index$2.navigationChevron })))));
+        return (index$1.h(index$1.Host, { key: '7de13f5ced4a2071d8a520ab9ad134ff0b551d17', class: "swiper-container", tabindex: "0" }, index$1.h("div", { key: '51c9909fcf085e5ee7d4c79b380f7a7edcd0b491', class: "swiper-wrapper" }, index$1.h("slot", { key: '971f91cc7e356f9e9282e36b1de8beb8a8bb9c07' })), this.pager && (index$1.h("div", { key: 'c78672aa427460488b5da344e6db4223040b7a10', class: "swiper-pagination", ref: (el) => (this.paginationEl = el) })), this.arrows && (index$1.h("div", { key: 'aa5732a2c5885602f814e2e853bdb8bd5650f54d', role: "button", class: "swiper-button-prev", tabindex: "0", "aria-label": "Previous slide", onClick: () => this.slidePrev() }, index$1.h("road-icon", { key: '195af2ff8d2319a29dd64d5a4278dcb722cf26d0', icon: index$2.navigationChevron, rotate: "180" }))), this.arrows && (index$1.h("div", { key: '8700c937007ea062e0f3909deee887b8158b7085', role: "button", class: "swiper-button-next", tabindex: "0", "aria-label": "Next slide", onClick: () => this.slideNext() }, index$1.h("road-icon", { key: 'b94e08b955343c34d2b5ecdeb3f385db649aadc5', icon: index$2.navigationChevron })))));
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {

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

@@ -6,7 +6,7 @@ const index = require('./index-fee0103c.js');
 const index$1 = require('./index-0e4df560.js');
 require('./polyfill-8e8d96b1.js');
 
-const checkboxCss = ".sc-road-checkbox-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-16);line-height:1.5;color:var(--road-on-surface)}.form-check-input.sc-road-checkbox{position:absolute;z-index:-1;opacity:0}.form-check-label.sc-road-checkbox{position:relative;display:inline-flex;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-check-label.sc-road-checkbox::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0 0.75rem 0 0;content:\"\";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;transition:border 0.2s ease-in-out, background 0.2s ease-in-out}.form-check-label-span.sc-road-checkbox{color:var(--road-on-surface-weak)}.form-check-icon.sc-road-checkbox{position:absolute;top:0;left:0;box-sizing:border-box;display:block;width:1.25rem;height:1.25rem;color:var(--road-primary-contrast);opacity:0;transition:opacity 0.2s ease-in-out}@media (hover: hover){.form-check-input.sc-road-checkbox:not(:disabled)~.form-check-label.sc-road-checkbox:hover::before{border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:not(:disabled):checked~.form-check-label.sc-road-checkbox:hover::before,.form-check-input.sc-road-checkbox:not(:disabled):indeterminate~.form-check-label.sc-road-checkbox:hover::before{background:var(--road-input-surface-variant)}}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{opacity:1}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface);border-color:var(--road-input-surface)}.form-check-input.focus-visible.sc-road-checkbox~.form-check-label.sc-road-checkbox::before{box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700)}.form-check-input.focus-visible.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.focus-visible.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface-variant);border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox{cursor:not-allowed}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox::before,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox::before{background:var(--road-surface-disabled);border:none}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{fill:var(--road-on-surface-disabled)}.invalid-feedback.sc-road-checkbox{display:none;flex:0 0 100%;width:100%;margin-top:0.5rem;font-size:var(--road-font-size-12);color:var(--road-danger-default)}.form-check-input.is-invalid.sc-road-checkbox~.form-check-label.sc-road-checkbox::before,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.form-check-label.sc-road-checkbox::before{border-color:var(--road-danger-outline)}.form-check-input.is-invalid.sc-road-checkbox~.invalid-feedback.sc-road-checkbox,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.invalid-feedback.sc-road-checkbox{display:block}.form-checkbox-inverse.sc-road-checkbox{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-checkbox-inverse.sc-road-checkbox::before{margin:0 0 0 1rem}.form-checkbox-inverse.sc-road-checkbox .form-check-icon.sc-road-checkbox{right:0;left:auto}.helper.sc-road-checkbox{margin-top:0.5rem;margin-left:2rem;font-size:var(--road-font-size-14);color:var(--road-on-surface-weak)}";
+const checkboxCss = ".sc-road-checkbox-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-16);line-height:1.5;color:var(--road-on-surface)}.form-check-input.sc-road-checkbox{position:absolute;z-index:-1;opacity:0}.form-check-label.sc-road-checkbox{position:relative;display:inline-flex;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-check-label.sc-road-checkbox::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0 0.75rem 0 0;content:\"\";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;transition:border 0.2s ease-in-out, background 0.2s ease-in-out}.form-check-label-span.sc-road-checkbox{color:var(--road-on-surface-weak)}.form-check-icon.sc-road-checkbox{position:absolute;top:0;left:0;box-sizing:border-box;display:block;width:1.25rem;height:1.25rem;color:var(--road-primary-contrast);opacity:0;transition:opacity 0.2s ease-in-out}@media (hover: hover){.form-check-input.sc-road-checkbox:not(:disabled)~.form-check-label.sc-road-checkbox:hover::before{border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:not(:disabled):checked~.form-check-label.sc-road-checkbox:hover::before,.form-check-input.sc-road-checkbox:not(:disabled):indeterminate~.form-check-label.sc-road-checkbox:hover::before{background:var(--road-input-surface-variant)}}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{opacity:1}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface);border-color:var(--road-input-surface)}.form-check-input.focus-visible.sc-road-checkbox~.form-check-label.sc-road-checkbox::before{box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700)}.form-check-input.focus-visible.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.focus-visible.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface-variant);border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox{cursor:not-allowed}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox::before,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox::before{background:var(--road-surface-disabled);border:none}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{fill:var(--road-on-surface-disabled)}.invalid-feedback.sc-road-checkbox{display:none;flex:0 0 100%;width:100%;margin-top:0.5rem;font-size:var(--road-font-size-12);color:var(--road-danger-default)}.form-check-input.is-invalid.sc-road-checkbox~.form-check-label.sc-road-checkbox::before,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.form-check-label.sc-road-checkbox::before{border-color:var(--road-danger-outline)}.form-check-input.is-invalid.sc-road-checkbox~.invalid-feedback.sc-road-checkbox,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.invalid-feedback.sc-road-checkbox{display:block}.form-checkbox-inverse.sc-road-checkbox{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-checkbox-inverse.sc-road-checkbox::before{margin:0 0 0 1rem}.form-checkbox-inverse.sc-road-checkbox .form-check-icon.sc-road-checkbox{right:0;left:auto}.helper.sc-road-checkbox{margin-top:0.5rem;margin-left:2rem;font-size:var(--road-font-size-14);color:var(--road-on-surface-weak)}.form-check-label-sm.sc-road-checkbox{font-size:var(--road-body-small)}.form-check-label-md.sc-road-checkbox{font-size:var(--road-body-medium)}.form-check-label-lg.sc-road-checkbox{font-size:var(--road-body-large)}";
 const RoadCheckboxStyle0 = checkboxCss;
 
 const Checkbox = class {
@@ -54,6 +54,10 @@ const Checkbox = class {
          * If `true`, the label and the checkbox are inverse and spaced
          */
         this.inverse = false;
+        /**
+          * The checkbox label size.
+          */
+        this.size = 'md';
         this.onClick = () => {
             this.checked = !this.checked;
             this.indeterminate = false;
@@ -80,8 +84,9 @@ const Checkbox = class {
     render() {
         const labelId = this.checkboxId + '-label';
         const inverseClass = this.inverse && 'form-checkbox-inverse';
+        const sizeClass = this.size !== undefined ? `form-check-label-${this.size}` : '';
         const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';
-        return (index.h(index.Host, { key: '6c65aa807587f38c0d6fcba34c1606431dfa1997' }, index.h("input", { key: '6a3aa3c88b3fd4bdc23bc3881c7b72e8d7591964', class: `form-check-input ${isInvalidClass}`, type: "checkbox", id: this.checkboxId, name: this.name, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { key: '3614ccc3ffbeacfd1e1b237da2b9c78ce7b8eecc', class: `form-check-label ${inverseClass}`, id: labelId, htmlFor: this.checkboxId }, index.h("div", { key: '5c3b311e9a816bd504780c2ba4009f5ab69d4b8e' }, this.label, " ", index.h("span", { key: 'cc588cbde6b8fbdea9ee0d861e265b994c8c5fa6', class: "form-check-label-span" }, this.secondaryLabel), index.h("slot", { key: 'd92e1174f5d8bc282938dde2532a065b4511f5e2' })), this.checked && !this.indeterminate && index.h("road-icon", { key: 'f4d26476c8686fc1d210378c581a5dedb6fb9ca3', class: "form-check-icon", icon: index$1.checkWide }), this.indeterminate && index.h("road-icon", { key: '2701bbb698f4558edb21e024d9f803d4227f1eec', class: "form-check-icon", icon: index$1.navigationAddLess })), this.error && this.error !== '' && index.h("p", { key: 'c39dc46b6aa89becc12a0277fddea6afe8c2f447', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: 'bbd1c57d3d9bc9c13664a829927cb26c560bf075', class: "helper" }, this.helper)));
+        return (index.h(index.Host, { key: '61a1420c717c25c8b09f6ecb52fa281bc7c0a4ff' }, index.h("input", { key: 'b894bdab786b416ab46280c80a344fb1ea97fb82', class: `form-check-input ${isInvalidClass}`, type: "checkbox", id: this.checkboxId, name: this.name, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { key: 'bc0b308f508cfbd15876c97f4dd381cf4f1cabe8', class: `form-check-label ${inverseClass} ${sizeClass}`, id: labelId, htmlFor: this.checkboxId }, index.h("div", { key: 'd78bb31d01f3ad0cbcb51e61f79d00b611599ee9' }, this.label, " ", index.h("span", { key: '5154464b3ff2840408f57891f92b344e1fb0ecbc', class: "form-check-label-span" }, this.secondaryLabel), index.h("slot", { key: '6ed42d75b5bf687a17e30f163a7d5c28a8d6d2e1' })), this.checked && !this.indeterminate && index.h("road-icon", { key: '5dfdae2ea90921103427d2f8fca7b14625a80fc6', class: "form-check-icon", icon: index$1.checkWide }), this.indeterminate && index.h("road-icon", { key: '9e4e76b62f504d24b114d8801cb4fe0c0319365b', class: "form-check-icon", icon: index$1.navigationAddLess })), this.error && this.error !== '' && index.h("p", { key: 'eed17cd5b5aac44c93a02fbfa1eddc68252b6369', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: '89e6e4739b2ddc39a1e850d1a4a55a9a723e6972', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]

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

@@ -1 +1 @@
-{"file":"road-checkbox.entry.cjs.js","mappings":"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","names":["h","Host","checkWide","navigationAddLess"],"sources":["src/components/checkbox/checkbox.css?tag=road-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * Checkbox\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Checkbox\n * - Label\n * - Error\n * - Helper\n * - Position\n */\n\n\n/* CHECKBOX\n -------------------- */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1.5rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-font-size-16);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n}\n\n/**\n * Hide input\n */\n\n.form-check-input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-check-label {\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-check-label::before {\n  box-sizing: border-box;\n  display: block;\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0 0.75rem 0 0;\n  content: \"\";\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  transition: border 0.2s ease-in-out, background 0.2s ease-in-out;\n}\n\n.form-check-label-span {\n  color: var(--road-on-surface-weak);\n}\n\n.form-check-icon {\n  position: absolute;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  color: var(--road-primary-contrast);\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-check-input:not(:disabled) ~ .form-check-label:hover::before {\n    border-color: var(--road-input-surface-variant);\n  }\n\n  .form-check-input:not(:disabled):checked ~ .form-check-label:hover::before,\n  .form-check-input:not(:disabled):indeterminate ~ .form-check-label:hover::before {\n    background: var(--road-input-surface-variant);\n  }\n}\n\n/**\n * Checked state\n */\n\n.form-check-input:checked ~ .form-check-label .form-check-icon,\n.form-check-input:indeterminate ~ .form-check-label .form-check-icon {\n  opacity: 1;\n}\n\n.form-check-input:checked ~ .form-check-label::before,\n.form-check-input:indeterminate ~ .form-check-label::before {\n  background: var(--road-input-surface);\n  border-color: var(--road-input-surface);\n}\n\n/**\n * Focus on Tab\n */\n\n.form-check-input.focus-visible ~ .form-check-label::before {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);\n}\n\n.form-check-input.focus-visible:checked ~ .form-check-label::before,\n.form-check-input.focus-visible:indeterminate ~ .form-check-label::before {\n  background: var(--road-input-surface-variant);\n  border-color: var(--road-input-surface-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-check-input:disabled ~ .form-check-label,\n.form-check-input[readonly] ~ .form-check-label {\n  cursor: not-allowed;\n}\n\n.form-check-input:disabled ~ .form-check-label::before,\n.form-check-input[readonly] ~ .form-check-label::before {\n  background: var(--road-surface-disabled);\n  border: none;\n}\n\n.form-check-input:disabled ~ .form-check-label .form-check-icon,\n.form-check-input[readonly] ~ .form-check-label .form-check-icon {\n  fill: var(--road-on-surface-disabled);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  flex: 0 0 100%;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-font-size-12);\n  color: var(--road-danger-default);\n}\n\n.form-check-input.is-invalid ~ .form-check-label::before,\n.was-validated .form-check-input:invalid ~ .form-check-label::before {\n  border-color: var(--road-danger-outline);\n}\n\n.form-check-input.is-invalid ~ .invalid-feedback,\n.was-validated .form-check-input:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* POSITION\n -------------------- */\n\n.form-checkbox-inverse {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n.form-checkbox-inverse::before {\n  margin: 0 0 0 1rem;\n}\n\n.form-checkbox-inverse .form-check-icon {\n  right: 0;\n  left: auto;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  margin-left: 2rem;\n  font-size: var(--road-font-size-14);\n  color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport { checkWide, navigationAddLess } from '../../../icons';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Adding additional elements next to the label (e.g. number of items in filters).\n */\n\n@Component({\n  tag: 'road-checkbox',\n  styleUrl: 'checkbox.css',\n  scoped: true,\n})\nexport class Checkbox {\n\n  /**\n   * The id of checkbox\n   */\n  @Prop() checkboxId: string = `road-checkbox-${checkboxIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.checkboxId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   */\n   @Prop() indeterminate: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.checkboxId}-label`;\n\n    /**\n   * Secondary Label for the field\n   */\n    @Prop() secondaryLabel?: string;\n\n  /**\n   * If `true`, the label and the checkbox are inverse and spaced\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n   @Prop() helper?: string;\n\n  /**\n   * Emitted when the checked property has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the checkbox has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.roadchange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n    this.roadChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onClick = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\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 labelId = this.checkboxId + '-label';\n    const inverseClass = this.inverse && 'form-checkbox-inverse';\n    const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host>\n        <input\n          class={`form-check-input ${isInvalidClass}`}\n          type=\"checkbox\"\n          id={this.checkboxId}\n          name={this.name}\n          required={this.required}\n          disabled={this.disabled}\n          indeterminate={this.indeterminate}\n          checked={this.checked}\n          value={this.value}\n          aria-checked={`${this.checked}`}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-check-label ${inverseClass}`} id={labelId} htmlFor={this.checkboxId}>\n          <div>\n            {this.label} <span class=\"form-check-label-span\">{this.secondaryLabel}</span><slot/>\n          </div>\n          {this.checked && !this.indeterminate && <road-icon class=\"form-check-icon\" icon={checkWide}></road-icon>}\n          {this.indeterminate && <road-icon class=\"form-check-icon\" icon={navigationAddLess}></road-icon>}\n        </label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n}\n\nlet checkboxIds = 0;\n"],"version":3}
+{"file":"road-checkbox.entry.cjs.js","mappings":"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","names":["h","Host","checkWide","navigationAddLess"],"sources":["src/components/checkbox/checkbox.css?tag=road-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * Checkbox\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Checkbox\n * - Label\n * - Error\n * - Helper\n * - Position\n */\n\n\n/* CHECKBOX\n -------------------- */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1.5rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-font-size-16);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n}\n\n/**\n * Hide input\n */\n\n.form-check-input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-check-label {\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-check-label::before {\n  box-sizing: border-box;\n  display: block;\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0 0.75rem 0 0;\n  content: \"\";\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  transition: border 0.2s ease-in-out, background 0.2s ease-in-out;\n}\n\n.form-check-label-span {\n  color: var(--road-on-surface-weak);\n}\n\n.form-check-icon {\n  position: absolute;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  color: var(--road-primary-contrast);\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-check-input:not(:disabled) ~ .form-check-label:hover::before {\n    border-color: var(--road-input-surface-variant);\n  }\n\n  .form-check-input:not(:disabled):checked ~ .form-check-label:hover::before,\n  .form-check-input:not(:disabled):indeterminate ~ .form-check-label:hover::before {\n    background: var(--road-input-surface-variant);\n  }\n}\n\n/**\n * Checked state\n */\n\n.form-check-input:checked ~ .form-check-label .form-check-icon,\n.form-check-input:indeterminate ~ .form-check-label .form-check-icon {\n  opacity: 1;\n}\n\n.form-check-input:checked ~ .form-check-label::before,\n.form-check-input:indeterminate ~ .form-check-label::before {\n  background: var(--road-input-surface);\n  border-color: var(--road-input-surface);\n}\n\n/**\n * Focus on Tab\n */\n\n.form-check-input.focus-visible ~ .form-check-label::before {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);\n}\n\n.form-check-input.focus-visible:checked ~ .form-check-label::before,\n.form-check-input.focus-visible:indeterminate ~ .form-check-label::before {\n  background: var(--road-input-surface-variant);\n  border-color: var(--road-input-surface-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-check-input:disabled ~ .form-check-label,\n.form-check-input[readonly] ~ .form-check-label {\n  cursor: not-allowed;\n}\n\n.form-check-input:disabled ~ .form-check-label::before,\n.form-check-input[readonly] ~ .form-check-label::before {\n  background: var(--road-surface-disabled);\n  border: none;\n}\n\n.form-check-input:disabled ~ .form-check-label .form-check-icon,\n.form-check-input[readonly] ~ .form-check-label .form-check-icon {\n  fill: var(--road-on-surface-disabled);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  flex: 0 0 100%;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-font-size-12);\n  color: var(--road-danger-default);\n}\n\n.form-check-input.is-invalid ~ .form-check-label::before,\n.was-validated .form-check-input:invalid ~ .form-check-label::before {\n  border-color: var(--road-danger-outline);\n}\n\n.form-check-input.is-invalid ~ .invalid-feedback,\n.was-validated .form-check-input:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* POSITION\n -------------------- */\n\n.form-checkbox-inverse {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n.form-checkbox-inverse::before {\n  margin: 0 0 0 1rem;\n}\n\n.form-checkbox-inverse .form-check-icon {\n  right: 0;\n  left: auto;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  margin-left: 2rem;\n  font-size: var(--road-font-size-14);\n  color: var(--road-on-surface-weak);\n}\n\n/**\n * Size\n */\n \n .form-check-label-sm {\n   font-size: var(--road-body-small);\n }\n\n.form-check-label-md {\n  font-size: var(--road-body-medium);\n}\n\n.form-check-label-lg {\n  font-size: var(--road-body-large);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport { checkWide, navigationAddLess } from '../../../icons';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Adding additional elements next to the label (e.g. number of items in filters).\n */\n\n@Component({\n  tag: 'road-checkbox',\n  styleUrl: 'checkbox.css',\n  scoped: true,\n})\nexport class Checkbox {\n\n  /**\n   * The id of checkbox\n   */\n  @Prop() checkboxId: string = `road-checkbox-${checkboxIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.checkboxId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   */\n   @Prop() indeterminate: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.checkboxId}-label`;\n\n    /**\n   * Secondary Label for the field\n   */\n    @Prop() secondaryLabel?: string;\n\n  /**\n   * If `true`, the label and the checkbox are inverse and spaced\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n   @Prop() helper?: string;\n\n  /**\n    * The checkbox label size.\n    */\n  @Prop({ reflect: true }) size?: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Emitted when the checked property has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the checkbox has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.roadchange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n    this.roadChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onClick = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\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 labelId = this.checkboxId + '-label';\n    const inverseClass = this.inverse && 'form-checkbox-inverse';\n    const sizeClass = this.size !== undefined ? `form-check-label-${this.size}` : '';\n    const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host>\n        <input\n          class={`form-check-input ${isInvalidClass}`}\n          type=\"checkbox\"\n          id={this.checkboxId}\n          name={this.name}\n          required={this.required}\n          disabled={this.disabled}\n          indeterminate={this.indeterminate}\n          checked={this.checked}\n          value={this.value}\n          aria-checked={`${this.checked}`}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-check-label ${inverseClass} ${sizeClass}`} id={labelId} htmlFor={this.checkboxId}>\n          <div>\n            {this.label} <span class=\"form-check-label-span\">{this.secondaryLabel}</span><slot/>\n          </div>\n          {this.checked && !this.indeterminate && <road-icon class=\"form-check-icon\" icon={checkWide}></road-icon>}\n          {this.indeterminate && <road-icon class=\"form-check-icon\" icon={navigationAddLess}></road-icon>}\n        </label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n}\n\nlet checkboxIds = 0;\n"],"version":3}

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

@@ -31,7 +31,7 @@ const Chip = class {
     }
     render() {
         const outlineClass = this.outline ? 'chip-outline' : '';
-        return (index.h(index.Host, { key: 'a3d6d90495d0d68b83b3ddbaed51378dedf4d63a', class: `${outlineClass} chip-${this.color} chip-${this.size}`, tabindex: "0" }, index.h("div", { key: 'a59a6d3451042a9d04cda50c82615fc59465fdf7', class: "chip-description" }, index.h("slot", { key: '4219f60dc0bd8fda2be79f0ecd2b21075054c046' })), this.hasCloseIcon && index.h("road-icon", { key: 'c9426711dcf68f15413a3cd1a4f0c65cd09aa548', class: "chip-close", icon: index$1.navigationClose })));
+        return (index.h(index.Host, { key: 'ded3c67d6a534dfd46c54ecf503767f8283d2822', class: `${outlineClass} chip-${this.color} chip-${this.size}`, tabindex: "0" }, index.h("div", { key: '2ba980cea6242d94be97da8da18d00c88980acc6', class: "chip-description" }, index.h("slot", { key: '1360a26a52fa7f94c76f321f400258a37af29285' })), this.hasCloseIcon && index.h("road-icon", { key: 'f4049de03437098c2e85cf8b7975cfcc408cdbcb', class: "chip-close", icon: index$1.navigationClose })));
     }
 };
 Chip.style = RoadChipStyle0;

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

@@ -37,7 +37,7 @@ const Collapse = class {
         const isOpenClass = this.isOpen ? 'collapse-open' : '';
         const buttonText = this.isOpen ? this.showLess : this.showMore;
         const centerClass = this.centered ? 'collapse-btn-centered' : '';
-        return (index.h(index.Host, { key: 'dc4faac44b6213b807e1c1b935474e61ecffc229' }, index.h("slot", { key: '007dc5698f07c530416b96319c087c70cc2e0928' }), index.h("div", { key: '88f368b345b0d27a467bf120f4c461f409f43187', class: `collapsed-content ${isOpenClass}` }, index.h("slot", { key: '253c48a56447a867c6b9f99ec485d3f444166f5a', name: "collapsed-content" })), index.h("div", { key: 'ce988a1da4251516b4e6a751cd214931e608a586', class: `collapse-btn-wrapper ${centerClass}` }, index.h("road-button", { key: 'd52107ea32b0cf25f490e7b1d38425df9fdd7d58', onClick: this.onClick, class: "collapse-btn btn-link" }, buttonText))));
+        return (index.h(index.Host, { key: '6c1f78aea13744aab6d9e39f5c415e38a070026e' }, index.h("slot", { key: '3d369bc22707614e18b0b87b2ac880a696876a10' }), index.h("div", { key: 'a2e58a860c41422159ac8a605431cb747934f1c4', class: `collapsed-content ${isOpenClass}` }, index.h("slot", { key: 'db854e26de30f90268f3c0a209ed946a38fde7b4', name: "collapsed-content" })), index.h("div", { key: '37ab581d3d384433e69ac37993adb116cdf3d787', class: `collapse-btn-wrapper ${centerClass}` }, index.h("road-button", { key: '97d8bb625e6cac6108e0b4dc6263481b20da6f1c', onClick: this.onClick, class: "collapse-btn btn-link" }, buttonText))));
     }
 };
 Collapse.style = RoadCollapseStyle0;

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

@@ -17,7 +17,7 @@ const ContentCard = class {
     }
     render() {
         const insetImageClass = this.insetImage ? '' : 'content-card-image';
-        return (index.h(index.Host, { key: '0929d51b0a1629b1d983f114f1a0a5109db72d5b' }, index.h("road-img", { key: '289c2d4def77b4bae2f0ab1ce5e3569367b8bfcf', src: "https://s1.medias-norauto.fr/visuals/desktop/fr/banners/blog_loimontagne.png", alt: "loi montagne", class: insetImageClass }), index.h("div", { key: 'a22a7377c03e7b9f715b723ac454375785ee4765', class: "content-card-description" }, index.h("road-label", { key: 'e43c2c05a422a9aff793cf67ce7d3810689470b5', class: "content-card-description-title" }, index.h("slot", { key: '474ee1adb66d34157ad37b3a06546b8000d49a7a', name: "label" })), index.h("p", { key: 'd8cb29dba572569025b961e4fc08e51cc19fdeea', class: "content-card-description-text" }, index.h("slot", { key: '2751c5b213c615a8b4e70808da4ee5cdc3e7f26c', name: "description" })), index.h("div", { key: 'cce3d9833cda5f79b06c5f909af9fae197544204', class: "content-card-description-buttons" }, index.h("slot", { key: '2f75207ca66a7346c19f521c35ca8772ed3202c9' })))));
+        return (index.h(index.Host, { key: '8e0b36b7d5e3906508a99ccd55b5ce38b0d8328d' }, index.h("road-img", { key: '57d11f40a4678f141fdf7952c3663a4c3803bc42', src: "https://s1.medias-norauto.fr/visuals/desktop/fr/banners/blog_loimontagne.png", alt: "loi montagne", class: insetImageClass }), index.h("div", { key: '2050e2fa7a84d84e0737308a1e977fca746eaf4c', class: "content-card-description" }, index.h("road-label", { key: '3fe09993b8bf8c3a82cf8a7ec8efc6eed87fd78b', class: "content-card-description-title" }, index.h("slot", { key: '3a37c63b30c874314aa764210b4b268a83f71645', name: "label" })), index.h("p", { key: 'fb09e79bb1b73656e2bfa9b03a5b822640ec0638', class: "content-card-description-text" }, index.h("slot", { key: '7c8c4ced139302c08dcf4b67436e92780a29ce67', name: "description" })), index.h("div", { key: '209e1873e8f6e4e340109c46a9b11d3587e5a43b', class: "content-card-description-buttons" }, index.h("slot", { key: '2feb58a1893aa6607cd1f89fc28ffb53729f1c6a' })))));
     }
 };
 ContentCard.style = RoadContentCardStyle0;

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

@@ -90,11 +90,11 @@ const Dialog = class {
                     break;
             }
         }
-        return (index.h(index.Host, { key: 'e2ee13cb0fd6330b23224504c717efe8c68df097', class: `dialog ${modalIsOpenClass} ${modalhasClose}`, role: "alertdialog", "aria-modal": "true", tabindex: "-1", "aria-label": "dialogLabel" }, index.h("div", { key: 'c5f3ecaae31debea9afe6a712308520cd092fc23', class: "dialog-overlay", onClick: this.hasCloseIcon === true ? this.onClick : undefined, tabindex: "-1" }), index.h("div", { key: 'b28e1225a56208c8ff7891856a49b171bf09f88b', class: "dialog-modal", role: "document", tabindex: "0" }, index.h("div", { key: 'd799e1b00205d54e96e52f2e95b63e4c4327db2f', class: "dialog-content" }, index.h("header", { key: 'a3d16ae59ee42a9a61f4849c779dbf2f2a8066c9', class: "dialog-header" }, this.hasCloseIcon
+        return (index.h(index.Host, { key: '81a8f90ed4049e3485a6ab736accc9fec67d7594', class: `dialog ${modalIsOpenClass} ${modalhasClose}`, role: "alertdialog", "aria-modal": "true", tabindex: "-1", "aria-label": "dialogLabel" }, index.h("div", { key: 'b3225223c0bca4133cf60a748903c1b3011b8760', class: "dialog-overlay", onClick: this.hasCloseIcon === true ? this.onClick : undefined, tabindex: "-1" }), index.h("div", { key: '1488377ca21798d95a54384268a0d365ba54b8ff', class: "dialog-modal", role: "document", tabindex: "0" }, index.h("div", { key: '3ed4499f0462bedb809118f5ba134930cdd3f0fe', class: "dialog-content" }, index.h("header", { key: '9179af253c0babbbd378200dc0b6e53a54421fbd', class: "dialog-header" }, this.hasCloseIcon
             ? index.h("button", { type: "button", class: "dialog-close", onClick: this.onClick, "aria-label": "Close" }, index.h("road-icon", { icon: index$1.navigationClose, "aria-hidden": "true" }))
-            : ''), index.h("div", { key: 'fadeb8d0776e92809c1f4fdda9d24fe325640103', class: "dialog-body" }, this.color !== undefined
+            : ''), index.h("div", { key: '5c1f4459f65cf0864a4bf257bef0f6682a9ae2c4', class: "dialog-body" }, this.color !== undefined
             ? index.h("road-icon", { class: "dialog-icon", part: "dialog-icon", color: this.color, icon: icon, "aria-hidden": "true" })
-            : '', index.h("h2", { key: '06cbf8264b6336cb98b19e7bda1a80fb7d7a9271', class: "dialog-title" }, this.label), index.h("p", { key: 'f82e151b413764289e3d430b76d987a8eaa1d7b3', class: "dialog-description", id: "dialogDesc" }, this.description)), index.h("footer", { key: 'cbc9e71ad7aed7eab7bca5d9818dcbceb3cbcce2', class: "dialog-footer" }, index.h("slot", { key: '41d4e4dd47ecf92e96396316e27ff8218ced5f2c' }))))));
+            : '', index.h("h2", { key: 'ff143f65b583d0aeed73ea249c5091b8c9e5d64c', class: "dialog-title" }, this.label), index.h("p", { key: 'f404363a6ba5af84300d506b391d986dcd87080a', class: "dialog-description", id: "dialogDesc" }, this.description)), index.h("footer", { key: '50947ca23bb9e9bd5a71c9c48a793f79e3096c89', class: "dialog-footer" }, index.h("slot", { key: '87bcb8232aaba76e3ea703777d67abe220980ed1' }))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -32,7 +32,7 @@ const Dropdown = class {
         const positionClass = this.position ? `position-${this.position}` : '';
         const dropdownClass = this.position ? `dropdown-${this.position}` : '';
         const directionClass = this.direction ? `direction-${this.direction}` : '';
-        return (index.h("details", { key: '369ce1cfb90f00ccdf3a513b074871f74587ea60', class: "dropdown", open: this.isOpen }, index.h("summary", { key: '7892d1f9a8dd3167d3894b3c8cd2f2ee3feda8f4', "aria-expanded": this.isOpen.toString(), tabindex: "0", role: "button", onClick: this.onClick, "tab-index": "0" }, index.h("div", { key: 'a24ca536cf7f3e6cf44c46f6dae355d527224570', class: `d-flex ${positionClass}` }, index.h("div", { key: '1e7ba5b51a68a4b0c79cd7bf256853dfa4b8ab3a', class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, index.h("road-icon", { key: '64256d8c446025fa7199fbb7cda0777cf02c46c9', name: "navigation-more", class: "dropdown-button-icon", "aria-hidden": "true" })))), index.h("div", { key: 'b2020719de2304d5c4f606ed3f306aaf4f8a382a', class: `dropdown-menu ${directionClass} ${dropdownClass}` }, index.h("slot", { key: 'ee017bc6678acc0f8770a5c52921d8f886f35aa6', name: "list" }))));
+        return (index.h("details", { key: '96f98a43d15a43bc4e48354d0ad9734ca502455a', class: "dropdown", open: this.isOpen }, index.h("summary", { key: 'af1ff26056eaf4b6b3ff57cd9308b0f630f42ed1', "aria-expanded": this.isOpen.toString(), tabindex: "0", role: "button", onClick: this.onClick, "tab-index": "0" }, index.h("div", { key: '9e2149f6901a9b9f6b0b946336c8f037f35b1a12', class: `d-flex ${positionClass}` }, index.h("div", { key: 'cc34ac31554224da891175c86ddc4fb0e824a509', class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, index.h("road-icon", { key: '25fb15d3fd97ce75d77da1a3cce8f968d76b7ecf', name: "navigation-more", class: "dropdown-button-icon", "aria-hidden": "true" })))), index.h("div", { key: '5d2e08dbd8e1d58eb6f94b2e6f4ae438d48b0ec5', class: `dropdown-menu ${directionClass} ${dropdownClass}` }, index.h("slot", { key: '441c9b8f8177a90ca9d9b26ea2e0f6eab8eda176', name: "list" }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -52,7 +52,7 @@ const Duration = class {
         this.isOpen = false;
     }
     render() {
-        return (index.h("road-drawer", { key: '17db42f462da76b54a24eb6dd52a0ce637be4c86', "is-open": this.isOpen, position: "bottom", "drawer-title": this.header }, index.h("road-grid", { key: '51fb1715dc70ffe94e82e171db3759c308c562e4' }, index.h("road-row", { key: 'a4b5d1e6489f39bb6bc698c7beadf5135d46e3e9', class: "duration-values" }, Array(Math.floor((this.max - this.min) / this.step) + 1).fill(this.min).map(((item, index) => (item + index * this.step))).map(item => index.h("road-col", { class: "col-3 col-md-2" }, index.h("road-card", { button: true, value: item }, index.h("road-label", null, Math.floor(item / 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false }), ":", (item % 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false })))))))));
+        return (index.h("road-drawer", { key: '535f8253ed4077add28d3ef7089c41e292ef7d78', "is-open": this.isOpen, position: "bottom", "drawer-title": this.header }, index.h("road-grid", { key: '0b82c91ceb9d64ff3e0ff1462d1197f7607de643' }, index.h("road-row", { key: '0913921ee3b390f33a84b5a008665381e2d8bcea', class: "duration-values" }, Array(Math.floor((this.max - this.min) / this.step) + 1).fill(this.min).map(((item, index) => (item + index * this.step))).map(item => index.h("road-col", { class: "col-3 col-md-2" }, index.h("road-card", { button: true, value: item }, index.h("road-label", null, Math.floor(item / 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false }), ":", (item % 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false })))))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -25,7 +25,7 @@ const Flap = class {
     }
     render() {
         const colorClass = this.filled ? `flap-${this.color}-filled` : `flap-${this.color}`;
-        return (index.h(index.Host, { key: '17654f70a4f17fb19164ebb3f29ca576768cda54', class: `${colorClass} flap-${this.size}` }, index.h("slot", { key: '06d531af72c1d328976fcc23f9877da54e39b667' })));
+        return (index.h(index.Host, { key: 'd20f1aff196fce6d4b5a0abc93c412a8eb25a074', class: `${colorClass} flap-${this.size}` }, index.h("slot", { key: '0be62bb6925782d1109981adbb67de911bcb29f3' })));
     }
 };
 Flap.style = RoadFlapStyle0;

package/dist/cjs/road-global-navigation-v2.cjs.entry.js

@@ -132,7 +132,7 @@ const GlobalNavigationV2 = class {
         this.selectedTabChanged();
     }
     render() {
-        return (index.h(index.Host, { key: '71284cfbbb2297134bfed397d45af88fc035d95f', role: "application" }, index.h("slot", { key: '04c47f8f5c69d72ef7c74e405037deeba4aa6019' })));
+        return (index.h(index.Host, { key: 'f4fb2c22034b13b4937635c6427ce6a1db6da363', role: "application" }, index.h("slot", { key: 'efc105887ec5a4f4ae417d075c30d6b9816b4850' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/road-global-navigation.cjs.entry.js

@@ -31,7 +31,7 @@ const GlobalNavigation = class {
         this.selectedTabChanged();
     }
     render() {
-        return (index.h(index.Host, { key: '3153f9036b6fcbf625b4b6c2fb22dc270b20ac58', role: "application" }, index.h("slot", { key: '5bc133bc9abe1abcae66c1247215c1884ead0a3c' })));
+        return (index.h(index.Host, { key: '72901e74098db281d77f4200a744a63968f2e28c', role: "application" }, index.h("slot", { key: '6b70d101f1d30a6888dd4176ac87bdc37bb9dd06' })));
     }
     static get watchers() { return {
         "selectedTab": ["selectedTabChanged"]

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

@@ -70,7 +70,7 @@ const Img = class {
     }
     render() {
         const placeholder = this.loadSrc !== undefined ? '' : 'placeholder';
-        return (index.h(index.Host, { key: 'f059a8a30c536d517219ac57c2fb085a669cfcef', class: placeholder }, index.h("img", { key: 'c624708aaa39e50e26bfe1725225b6038949ad5b', class: "native-img", decoding: "async", src: this.loadSrc, alt: this.alt, onLoad: this.onLoad, onError: this.loadError, part: "image" })));
+        return (index.h(index.Host, { key: 'b62aaf9dd6afc9ce4727cd12375f1c4b760f41f2', class: placeholder }, index.h("img", { key: 'e0fca9d6cf0b015e9d6be7d24b37eb7812814897', class: "native-img", decoding: "async", src: this.loadSrc, alt: this.alt, onLoad: this.onLoad, onError: this.loadError, part: "image" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -72,7 +72,7 @@ const Modal = class {
         const modalIsOpenClass = this.isOpen ? 'modal-open' : '';
         const inverseHeaderClass = this.hasInverseHeader ? 'modal-header-inverse' : '';
         const closeIconElement = this.hasCloseIcon ? index.h("button", { type: "button", class: "modal-close", onClick: this.onClick, "aria-label": "Close" }, index.h("road-icon", { icon: index$1.navigationClose, "aria-hidden": "true" })) : '';
-        return (index.h(index.Host, { key: '230e6f6eaae339d5314c46db9fd0d67fc2d846fc', class: `modal ${modalIsOpenClass}`, tabindex: "-1", role: "dialog", "aria-label": "modal" }, index.h("div", { key: '2080e60ffe8a97a331f68f314d2aee59c7a86bf5', class: "modal-overlay", onClick: this.onClick, tabindex: "-1" }), index.h("div", { key: '47044cf9e0b9dd04550db1ec3a82c263b4c547ee', class: "modal-dialog", style: { maxWidth: `${this.maxWidth}px` }, role: "document", tabindex: "0" }, index.h("div", { key: 'e6abe2cb25564e1aff45d1c4a29a8504224b4456', class: "modal-content" }, index.h("header", { key: '6459cf83929bbf51b797bb636fd88369fabda3d3', class: `modal-header ${inverseHeaderClass}` }, index.h("h2", { key: '050a8988f516aa9573f2d29b952dad3f52ead85e', class: "modal-title" }, this.modalTitle), closeIconElement), index.h("div", { key: 'eed07ba054f757aeba4f676727c101dd12c94a7d', class: "modal-body" }, index.h("slot", { key: '221f6df6bf95583b4edd0d1dfe3a2eaec3fe7dae' }))))));
+        return (index.h(index.Host, { key: '6c244ce1b24c5bf03510f660f15875f0447971b5', class: `modal ${modalIsOpenClass}`, tabindex: "-1", role: "dialog", "aria-label": "modal" }, index.h("div", { key: '8e8dbb9998bac59c729f1aada64bc5b992f61df8', class: "modal-overlay", onClick: this.onClick, tabindex: "-1" }), index.h("div", { key: '44d711823586fe5ba41e188401d80f50013b0c13', class: "modal-dialog", style: { maxWidth: `${this.maxWidth}px` }, role: "document", tabindex: "0" }, index.h("div", { key: '419db268697ee725be611f58a60fabd0c00885c5', class: "modal-content" }, index.h("header", { key: '7c827e7599d584cdd3cf32bea76f4f0eb7f28b92', class: `modal-header ${inverseHeaderClass}` }, index.h("h2", { key: '13c09b08282b8cd1194de014f4ce8d6729adb367', class: "modal-title" }, this.modalTitle), closeIconElement), index.h("div", { key: '7b876b870d1ca06b42af0bc62c778c23da78d6c4', class: "modal-body" }, index.h("slot", { key: '5c1caff28e65e3a9bd256fd583857c590d805184' }))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -67,11 +67,11 @@ const NavbarItem = class {
             rel,
             target,
         };
-        return (index.h(index.Host, { key: 'b5d5414801e5eb897dd1f346834fda3f6408ef4d', onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
+        return (index.h(index.Host, { key: '26cc0ac4caebe985b43b11227634008dbfc58d5c', onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
                 'navbar-item': true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
-            } }, index.h("a", Object.assign({ key: '88b26c7312ff31508d4d231ec04036185f877fc6' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: '97a6306b28115a3d1aa8961895aaa84f5a0fbe10', class: "button-inner" }, index.h("slot", { key: 'd5dfe7aae57d389c6cd71fbe0b01e6cd5ec4ed5e' })))));
+            } }, index.h("a", Object.assign({ key: '1dac4defe0a192239fb2d76770b9b38a4d56767e' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: 'd8a0b012ec8703c8fe46c2f7c98f00352748cc68', class: "button-inner" }, index.h("slot", { key: 'bb3859b51d5d5b411c5490b7456faf51419a12aa' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/road-navbar-item.cjs.entry.js

@@ -67,11 +67,11 @@ const NavbarItem = class {
             rel,
             target,
         };
-        return (index.h(index.Host, { key: '7ff4e21f2f090d7b2bee47c1395468c89d619c63', onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
+        return (index.h(index.Host, { key: 'fe103b4b40d2a2801b24f00ce2c6bc53052f2391', onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
                 'navbar-item': true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
-            } }, index.h("a", Object.assign({ key: 'cb857860824f7b5244d014868b37c5242664f2d2' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: '6d03a2caf31f24f12f0cd0d833a0c546ca01155f', class: "button-inner" }, index.h("slot", { key: '6c64a44e43ef3d0f42ab1630b88b3e5a7529968a' })))));
+            } }, index.h("a", Object.assign({ key: '6c593b2df20a7a1cd46c2d3260c96ee591cba02f' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: '70ab22ac31e4af63594721b5e4cddf235257c156', class: "button-inner" }, index.h("slot", { key: '3323e0c0aabc071f9aad3689956a9a6a89dba442' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -36,7 +36,7 @@ const NavbarV2 = class {
     }
     render() {
         const compactClass = this.compact ? 'compact' : '';
-        return (index.h(index.Host, { key: 'a7dbd950685bc968dde55225595dfda20e2ede07', role: "menubar", class: `${compactClass}` }, index.h("slot", { key: '0181dc8feee84135b55ee42d2b1aaaf1d8e24a78' })));
+        return (index.h(index.Host, { key: 'd8338b69a6dbdd71d1ca39e5ea5fff4c6b0e6de9', role: "menubar", class: `${compactClass}` }, index.h("slot", { key: '59afd9379182b345858fd641aba05177fd8d71de' })));
     }
     static get watchers() { return {
         "selectedTab": ["selectedTabChanged"]

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

@@ -31,7 +31,7 @@ const Navbar = class {
         this.selectedTabChanged();
     }
     render() {
-        return (index.h(index.Host, { key: 'c121e166433a74cb9bfe086872e29d0aceff6a4f', role: "menubar" }, index.h("slot", { key: '4152762dbcbf5467698a3cde344c7898b579d505' })));
+        return (index.h(index.Host, { key: '3c4b66461802de4f15cfffaddcd27a4672f5b575', role: "menubar" }, index.h("slot", { key: '56e8f8fc09788ff82386c6cef50be1b984d35a87' })));
     }
     static get watchers() { return {
         "selectedTab": ["selectedTabChanged"]

package/dist/cjs/road-phone-number-input.cjs.entry.js

@@ -1367,9 +1367,9 @@ const RoadPhoneNumberInput = class {
         const isErrorClass = this.errorMessage.length ? 'is-error' : '';
         const hasValueClass = this.hasValue() ? 'has-value' : '';
         const sizes = 'xl';
-        return (index.h(index.Host, { key: '24cd537172b031b54a8d4b551316c6d35ebfb457' }, index.h("div", { key: 'fb2728e530fca3d44e2bd54ad5c326bffdec704e', class: 'phone-number-inputs-container' }, index.h("div", { key: 'f8143383f1a4d27a6e1d0f5d31396b08fee31ad7', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, index.h("select", { key: 'bc5cd7865dced3c1a7a8c412ce487a1e95c74bd9', id: selectId, class: `form-select-area has-value`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (index.h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), index.h("label", { key: '2a460863f32b098caa5bc47aade77089038d1cb1', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), index.h("label", { key: '747540f6cf9f2402e12f370970631c44177fda73', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), index.h("input", { key: '02b9cb47645876729fb4206c8c930f4a214f53a3', type: 'tel', id: inputId, class: `input-${sizes} phone-number-input-field ${hasValueClass} ${isErrorClass}`, value: this.phoneValue, required: this.required, tabIndex: 0, onInput: (event) => this.handleInput(event) }), index.h("label", { key: 'c3de74c259cc32edd1cd107bab4bb8c00be91fb5', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
+        return (index.h(index.Host, { key: '552dcc0d24ed4d178f040fe8021050c74d902058' }, index.h("div", { key: '70ca6c4f0bdec5dcebdc4b5591ab06b304cc95e0', class: 'phone-number-inputs-container' }, index.h("div", { key: '4c992e0a1a8c9fa27b68f10c7216b344e6d645b1', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, index.h("select", { key: '5e7261c78dd3d71c28e8dd340dec596a301d27ef', id: selectId, class: `form-select-area has-value`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (index.h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), index.h("label", { key: '35a5db0450b99e05e76865316ff77261cebbdddf', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), index.h("label", { key: '2cd83c2a7576d7d81d6a0845837093e6f537fc04', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), index.h("input", { key: '141c74565f3d98943c94dc5f8bd0b5e4fd74a7b0', type: 'tel', id: inputId, class: `input-${sizes} phone-number-input-field ${hasValueClass} ${isErrorClass}`, value: this.phoneValue, required: this.required, tabIndex: 0, onInput: (event) => this.handleInput(event) }), index.h("label", { key: '458b36d9170841d8eeedc2888c99b69beb21e013', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
             && this.errorMessage !== ''
-            && index.h("p", { key: '334407a43c985abd508a0dd38a88af4e2587a525', class: "invalid-feedback" }, index.h("road-icon", { key: 'c9bfb7b1a24f0ea3f2cc8a335e28c99c38a5c004', slot: "start", color: 'danger', name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.errorMessage)));
+            && index.h("p", { key: '741d9f65e5f74ad938bb84e4d16d83b16e334ae3', class: "invalid-feedback" }, index.h("road-icon", { key: '89b68bd1f9810d5ac495b951796e59dd02cb91f8', slot: "start", color: 'danger', name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.errorMessage)));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/road-plate-number.cjs.entry.js

@@ -109,10 +109,10 @@ const PlateNumber = class {
     render() {
         const value = this.getValue();
         const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';
-        return (index.h("road-input-group", { key: '078fe518c39b731041ebff1825b9119d0f0ceb94', class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, index.h("label", { key: '7eb5ad6dc9eaff3f22398d37fc0f352779aa70c7', slot: "prepend", class: "input-group-prepend" }, index.h("div", { key: '1b40d4b4f5cafedbc76cf31441012a1c006d6afb', class: "plate-number-start" }, index.h("road-icon", { key: 'aacc90e679c24a386964d6d12088a1a4e499ac80', class: "plate-number-icon", icon: index$1.licensePlateStarEu }), index.h("div", { key: 'bfc3dee0ba4400aed94e31f3bbb6ce0c716f15b4', class: "plate-number-location", "aria-label": this.country, role: "img" }, this.countries
+        return (index.h("road-input-group", { key: 'edaa7cd8e513932287becfcc4af72d723d7b729f', class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, index.h("label", { key: '49d3b7bdb6c63adceab1b13ae16f2bff1903e84c', slot: "prepend", class: "input-group-prepend" }, index.h("div", { key: '39760b0846d83e37e1f450819fe53e99650bab8b', class: "plate-number-start" }, index.h("road-icon", { key: '1d08fc08600b06afa481cbd45df983591057a324', class: "plate-number-icon", icon: index$1.licensePlateStarEu }), index.h("div", { key: 'd8644ec27f56eb9d75f67dff85e39bd17d4b4f6e', class: "plate-number-location", "aria-label": this.country, role: "img" }, this.countries
             .filter(item => item.country === this.country)[0].letter))), this.motorbike
             ? (index.h("textarea", { class: "form-control plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, maxlength: "9", rows: 2, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }))
-            : (index.h("input", { class: "plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus })), index.h("label", { key: 'bbdbde5a98aec4e5d91b3c39af8f5e8d7141730d', slot: "append", class: "input-group-append" }, index.h("div", { key: '506043ccefb71abc11caf7f0f865ca13d1cd2bdc', class: "plate-number-end" }))));
+            : (index.h("input", { class: "plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus })), index.h("label", { key: '06b33c03a7eabf6b591b35493e1135f2b5870aff', slot: "append", class: "input-group-append" }, index.h("div", { key: 'eedacf154846a5902aecca99a526c267c416eb35', class: "plate-number-end" }))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/dist/cjs/road-profil-dropdown.cjs.entry.js

@@ -30,7 +30,7 @@ const Dropdown = class {
         this.isOpen = false;
     }
     render() {
-        return (index.h("details", { key: '6b4e442ce01f574182606e7c09e63e6d8e0d96b9', class: "dropdown", open: this.isOpen }, index.h("summary", { key: '96a1c367ac0b6602e6e8151579b108783ba53c8e', "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, index.h("div", { key: 'f01c4d03a12d00874238e2aa3abb7be483e45476', class: `d-flex` }, index.h("div", { key: 'ec9d487f6cffc7e6e754f560302ecf209b48805a' }, index.h("road-avatar", { key: '3f6b7e0ad05414771176f7b7e28cfc79b9590e34' }, index.h("slot", { key: 'd38ff4e91a859e64da6788f10cf341ade9efdfd5', name: "avatar" }))))), index.h("div", { key: '49c70f04f60cd49f8f7dea3f3edf538886245a6e', class: `dropdown-menu` }, index.h("div", { key: '251bc17b6dd66d76d780f8736df547b07b8ea028', class: "profil-item" }, index.h("road-avatar", { key: '0facee183c2290c5dbfaf78a38bbd040693124c0', size: "sm" }, index.h("slot", { key: '578b32315727e7193fc88e3a2c3f8dde364970da', name: "avatarItem" })), index.h("div", { key: '7faa802856269a4440b8602772acc2cfde110341', class: "profil-item-info" }, index.h("span", { key: 'efbeb25518e9a70da4fa52d6633abcc304efd9ae', class: "profil-item-info-name" }, index.h("slot", { key: 'bbfe23bb0e4832bb62a9f4232fd0291981fdbaa4', name: "name" })), index.h("road-label", { key: '2abf8f36c90e55491484a9c8f040a68bd2255be6' }, index.h("slot", { key: '4fb41b62b83d688e1ba940c784d1947a64e7a17a', name: "email" })))), index.h("slot", { key: '0fa5e3352f774d950d5d2cd4ad3e44b0eb106140', name: "list" }))));
+        return (index.h("details", { key: '657ada2de370f6aaf76e2a98895ce3be28cc6f69', class: "dropdown", open: this.isOpen }, index.h("summary", { key: '940d726d7d1c8ea126924b108bf57ab685a2a686', "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, index.h("div", { key: '5857ab37b0438b2610d908094bbab9187c46e259', class: `d-flex` }, index.h("div", { key: 'a317e761fa4b6b46097b04ebe309e2f752e2f2e1' }, index.h("road-avatar", { key: 'b25236fa949b54ca0faf7bceb0b635fc4cb6b07b' }, index.h("slot", { key: 'c18965b719882ecd60dcef091298401933f33c88', name: "avatar" }))))), index.h("div", { key: '70fc69f9f0cccac896d5196bee1e6a9c866c6541', class: `dropdown-menu` }, index.h("div", { key: '7d28cb139e59995c972c30217cc0a0fc1f96382c', class: "profil-item" }, index.h("road-avatar", { key: 'f74a21b6c4fcb5e23bb073839fb77b4edd95818a', size: "sm" }, index.h("slot", { key: '3da5faaa271a97c4a016853f77c24c8e5961680d', name: "avatarItem" })), index.h("div", { key: 'd30bf6cb38ffde6720dc48baad4226c7b0cc0188', class: "profil-item-info" }, index.h("span", { key: '676ab7af4733f92f8e9f1e4e11ea85364237068b', class: "profil-item-info-name" }, index.h("slot", { key: '2e4b1a90c2f00e7e67e4db95931aaca9102e776f', name: "name" })), index.h("road-label", { key: 'c09654f005fc0b322fd071e13349731ab16e62f5' }, index.h("slot", { key: '661db4276128da1f7c2c1c6cfc72fd31ef50e413', name: "email" })))), index.h("slot", { key: '22b9d5856379c958ab32fd67ca70eceed2d58725', name: "list" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/road-progress-indicator-horizontal.cjs.entry.js

@@ -27,7 +27,7 @@ const Stepper = class {
         const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';
         const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';
         const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';
-        return (index.h(index.Host, { key: 'f111144edc55e730674a4bd5e1633e5a91b97015' }, index.h("nav", { key: '7591c2c39a2827b36d351a3b28a85c6156b64b2d' }, index.h("ul", { key: '78fa0a7bd33e11c970ce71df3e86ad82adf092f4', class: `${colorClass}` }, index.h("li", { key: '3e395290532c35a096b9c6f24936ed37041f6205', class: `${stateClass}` }, index.h("a", { key: 'c5eea4f543e4d74d1a0616b2352961edfd5516b5', class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, index.h("span", { key: 'de796e773f0e4529d0b7fdbe61e6c11d8e6279ca', class: "progress-indicator-horizontal-icon" }, index.h("slot", { key: 'fb65dc7ad9d3f422bacc3ccba87e2be2171d7f9e', name: "progress-indicator-horizontal-icon" })), index.h("span", { key: 'd7cf1de8faa1821bba9280c171735e10448b9453', class: "progress-indicator-horizontal-title" }, index.h("slot", { key: 'f0d15278bee067c765fa466e1e4a368b23c06703', name: "progress-indicator-horizontal-title" })))), index.h("li", { key: '25fb14e2d761124258ac90fcd3c7df82a3d77e16', class: `${stateSecondStepClass}` }, index.h("a", { key: 'f253c9d89b3fa7f430be3bdcdfe8cacd828fdbe0', class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, index.h("span", { key: 'd85c7358d428abb5ee621355cab2c8c1f87c802a', class: "progress-indicator-horizontal-icon" }, index.h("slot", { key: '1c7b3678964d7cb76420b427654488f745f58491', name: "progress-indicator-horizontal-icon2" })), index.h("span", { key: 'f9df661db7d252d4660652a3c1a4cfbbc000a7d0', class: "progress-indicator-horizontal-title" }, index.h("slot", { key: 'b58b9a83c49dbf5883f12380d659f65a68167181', name: "progress-indicator-horizontal-title2" })))), this.numberStep == 3 && index.h("li", { key: '93e3ff18e0f07844d00fed42acb091b9482798d5', class: `${stateThirdStepClass}` }, index.h("a", { key: '10ea0a5904d2308eeefc1707a3fdb596c4cdb4e3', class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, index.h("span", { key: '7da570caa2a771389acc1b44870f2712afb17b96', class: "progress-indicator-horizontal-icon" }, index.h("slot", { key: '5235530ca67e9c2730eb1130e7f98454bb3c58d1', name: "progress-indicator-horizontal-icon3" })), index.h("span", { key: '22d8d0d86ad2b8035b91a63783381c8f7c40e2dd', class: "progress-indicator-horizontal-title" }, index.h("slot", { key: '06193f06fa83c0d64ed13ad40e6a37f73da7592e', name: "progress-indicator-horizontal-title3" }))))))));
+        return (index.h(index.Host, { key: 'ccb6347ccc6d69282b0b3de2e6371b4ae0da7d6d' }, index.h("nav", { key: '4025380ac77abef5bf2cc517fe73e11112f768b0' }, index.h("ul", { key: '84fa3d6446fe171ae5c167bec45fdbc8cdb4ce9c', class: `${colorClass}` }, index.h("li", { key: 'a15bf9839e720c4587e06e64285352062a05fed0', class: `${stateClass}` }, index.h("a", { key: '5f8b9233a3c63701d1e689666c295bf8687352b9', class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, index.h("span", { key: 'a388162f0a3399cd61f500ca1a6cd2195fc1cfaa', class: "progress-indicator-horizontal-icon" }, index.h("slot", { key: '15c6e61fa315c0685b0163e303edcc6778b4c9a5', name: "progress-indicator-horizontal-icon" })), index.h("span", { key: 'a46cd307a9ea8e6136d6404ef0c5a433ffb87666', class: "progress-indicator-horizontal-title" }, index.h("slot", { key: '9993529c48b5e0b77fc22864d649694cb1c2ee0c', name: "progress-indicator-horizontal-title" })))), index.h("li", { key: '4d64c11c640b2f40f72f6dddd8c33438c4bdeb9b', class: `${stateSecondStepClass}` }, index.h("a", { key: '03d659b8a60172b33c82b3a26957896c25e3b467', class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, index.h("span", { key: 'c1f9a3b9c9f0b0a54859ee7a3b0d7e9c2552740b', class: "progress-indicator-horizontal-icon" }, index.h("slot", { key: '08db755e8c6b0a8b5103e4022710fb5e8ed5ae34', name: "progress-indicator-horizontal-icon2" })), index.h("span", { key: '7c458f6a250c5f66b199019babb14e1373fae597', class: "progress-indicator-horizontal-title" }, index.h("slot", { key: 'a2df3767db3baa71ed8e3d5e93f3fb86b2e71f8f', name: "progress-indicator-horizontal-title2" })))), this.numberStep == 3 && index.h("li", { key: 'b7adeb48232b08b3a234829611af3b6a28d00a67', class: `${stateThirdStepClass}` }, index.h("a", { key: 'e7537eddb421180a668ad31eddb034c5bdad4a23', class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, index.h("span", { key: 'e0ffebe33d163b2e37e5d8d54dabe96f5b12a171', class: "progress-indicator-horizontal-icon" }, index.h("slot", { key: '2e077ab50eebe1d72e76e9dc04f451cf8c617b9f', name: "progress-indicator-horizontal-icon3" })), index.h("span", { key: '1cad575ca395bb5f2a718c49b32c01952e7faa8c', class: "progress-indicator-horizontal-title" }, index.h("slot", { key: 'ee40e5251b5db0a55fdff81a903af67ac3ca5f93', name: "progress-indicator-horizontal-title3" }))))))));
     }
 };
 Stepper.style = RoadProgressIndicatorHorizontalStyle0;

package/dist/cjs/road-progress-indicator-vertical-item.cjs.entry.js

@@ -12,7 +12,7 @@ const ProgressIndicatorVerticalItem = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '0c9d2ff669b0e8c23d2e319e02811af7b572c7d9' }, index.h("slot", { key: 'd8c61ee8af278f07e4431fe67551b9627b1e8fe1' })));
+        return (index.h(index.Host, { key: '01e909268830e3729f771371fea8e22672c1f81f' }, index.h("slot", { key: 'd613840f69ca8d4c9b0ae8e1d53b01acc027bcee' })));
     }
 };
 ProgressIndicatorVerticalItem.style = RoadProgressIndicatorVerticalItemStyle0;

package/dist/cjs/road-progress-indicator-vertical.cjs.entry.js

@@ -12,7 +12,7 @@ const ProgressIndicatorVertical = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7cb6fe2a4a78937fc84bd9b0daf0c9445a051fc5' }, index.h("nav", { key: 'da179588065c7d0e9469a067eee27aeb7d497ab5' }, index.h("ul", { key: '232392a6dc63b3923550dd58db7ba2eae621a79b' }, index.h("li", { key: '7e545e5818a67bc4fce6b97b4d26191da6f58c4c' }, index.h("slot", { key: 'c815524158b6e599dfbbaaae21cee71abc33583a' }))))));
+        return (index.h(index.Host, { key: '4762ffd8a4fbf70b85dd9d21a370006e9c9f1dde' }, index.h("nav", { key: 'b5582b03ea6525acab65853e3d816b96d7e1fbfc' }, index.h("ul", { key: '3e368e7204eb13839ceac853dbdbe5037c8c11a0' }, index.h("li", { key: '3304843de4f5fdd4b66dd4539b536bc87b506187' }, index.h("slot", { key: 'bbbb9861ece279921924dc9fc04b8a9581783071' }))))));
     }
 };
 ProgressIndicatorVertical.style = RoadProgressIndicatorVerticalStyle0;

package/dist/cjs/road-progress-tracker-item.cjs.entry.js

@@ -12,7 +12,7 @@ const ProgressTrackerItem = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f080eb45be07dd54b9f028b96febd5b7090527cf' }, index.h("slot", { key: '9ac63fa7a9a0d4e533dbc1a0a96fe93ea9a8034e' })));
+        return (index.h(index.Host, { key: 'd7232f28ef30258e59fff790e0a07677eacd13a1' }, index.h("slot", { key: 'cf7e6d62701374235c58ef97f340b99d1b648847' })));
     }
 };
 ProgressTrackerItem.style = RoadProgressTrackerItemStyle0;