@roadtrip/components 3.4.0 → 3.5.0

package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.css

@@ -25,6 +25,11 @@
   list-style: none;
 }
 
+.progress-indicator-horizontal.progress-indicator-horizontal-header {
+  background-color: var(--road-header-surface);
+}
+
+
 /* PROGRESS INDICATOR HORIZONTAL ITEM
  -------------------- */
 
@@ -35,6 +40,10 @@
   text-align: center;
 }
 
+.progress-indicator-horizontal-item:last-child {
+  margin-top: 0.125rem;
+}
+
 /**
  * Line between items
  */
@@ -42,21 +51,27 @@
 
 .progress-indicator-horizontal-item:not(:last-child)::after {
   position: relative;
-  top: 1rem;
-  left: calc(50% + 16px);
+  top: 0.8rem;
+  left: calc(50% + 12px);
   order: -1;
-  width: calc(100% - 32px);
+  width: calc(100% - 24px);
   height: 2px;
   content: "";
   background: var(--road-surface-disabled);
 }
 
-.progress-indicator-horizontal-outline-light .progress-indicator-horizontal-item:not(:last-child)::after,
-.progress-indicator-horizontal-secondary-outline-light .progress-indicator-horizontal-item:not(:last-child)::after {
-  left: calc(50% + calc(2rem / 2));
-  width: calc(100% - 2rem);
+.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after {
+  position: relative;
+  top: 0.8rem;
+  left: calc(50% + 12px);
+  order: -1;
+  width: calc(100% - 24px);
+  height: 2px;
+  content: "";
+  background: var(--road-header-surface-disabled);
 }
 
+
 /**
  * Disabled click for current and next steps
  */
@@ -84,9 +99,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  font-size: var(--road-button-medium);
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: var(--road-font-size-12);
   font-weight: 700;
   color: var(--road-on-surface-disabled);
   background: var(--road-surface-disabled);
@@ -94,25 +109,25 @@
   fill: currentColor;
 }
 
-::slotted(.progress-indicator-horizontal-icon) road-icon{
-  color: var(--road-secondary-600);
+::slotted([slot="progress-indicator-horizontal-icon"]) road-icon{
+  color: currentColor;
 }
 
-.progress-indicator-horizontal-outline .progress-indicator-horizontal-icon,
-.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline .progress-indicator-horizontal-icon {
-  width: calc(2rem - 4px);
-  height: calc(2rem - 4px);
-  color: var(--road-on-surface-disabled);
-  background: var(--road-surface);
-  border: 2px solid var(--road-surface-disabled);
-  fill: currentColor;
+.progress-indicator-horizontal-header ::slotted([slot="progress-indicator-horizontal-icon"]) road-icon{
+  color: currentColor;
 }
 
-.progress-indicator-horizontal-outline-light .progress-indicator-horizontal-icon,
-.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline-light .progress-indicator-horizontal-icon {
-  color: var(--road-on-surface-disabled);
-  background: none;
-  border: 2px solid var(--road-surface-disabled);
+.progress-indicator-horizontal-header .progress-indicator-horizontal-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: var(--road-font-size-12);
+  font-weight: 700;
+  color: var(--road-on-header-surface-disabled);
+  background: var(--road-header-surface-disabled);
+  border-radius: 50%;
   fill: currentColor;
 }
 
@@ -134,6 +149,21 @@
   color: var(--road-on-surface-weak);
 }
 
+.progress-indicator-horizontal-header .progress-indicator-horizontal-title {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: var(--road-body-small);
+  font-weight: 700;
+  color: var(--road-on-header-surface-disabled);
+}
+
+.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{
+  display: block;
+  font-size: var(--road-body-small);
+  font-weight: 400;
+  color: var(--road-on-header-surface-weak);
+}
+
 /* STEP COMPLETED
  -------------------- */
 
@@ -141,75 +171,46 @@
   background: var(--road-primary);
 }
 
-.progress-indicator-horizontal-secondary .completed:not(:last-child)::after,
-.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline .completed:not(:last-child)::after,
-.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline-light .completed:not(:last-child)::after {
-  background: var(--road-secondary);
+.progress-indicator-horizontal-header .completed:not(:last-child)::after {
+  background: var(--road-header-badge);
 }
 
-.completed .progress-indicator-horizontal-icon,
 .current .progress-indicator-horizontal-icon {
-  width: 2rem;
-  height: 2rem;
   color: var(--road-on-primary);
   background: var(--road-primary);
   border: 0;
 }
 
-.progress-indicator-horizontal-outline .completed .progress-indicator-horizontal-icon {
+.completed .progress-indicator-horizontal-icon{
+  width: calc(1.5rem - 4px);
+  height: calc(1.5rem - 4px);
   color: var(--road-primary);
   background: var(--road-surface);
   border: 2px solid var(--road-primary);
 }
 
-.progress-indicator-horizontal-outline-light .completed .progress-indicator-horizontal-icon {
-  color: var(--road-primary);
+.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon {
+  color: var(--road-header-badge);
   background: none;
-  border: 2px solid var(--road-primary);
+  border: 2px solid var(--road-header-badge);
 }
 
-.progress-indicator-horizontal-secondary .completed .progress-indicator-horizontal-icon {
-  color: var(--road-on-secondary);
-  background: var(--road-secondary);
+.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon {
+  width: calc(1.5rem);
+  height: calc(1.5rem);
+  color: var(--road-on-header-badge);
+  background: var(--road-header-badge);
   border: 0;
 }
 
-.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline .completed .progress-indicator-horizontal-icon {
-  width: calc(2rem - 4px);
-  height: calc(2rem - 4px);
-  color: var(--road-secondary);
-  background: var(--road-surface);
-  border: 2px solid var(--road-secondary);
-}
-
-.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline-light .completed .progress-indicator-horizontal-icon {
-  width: calc(2rem - 4px);
-  height: calc(2rem - 4px);
-  color: var(--road-secondary);
-  background: none;
-  border: 2px solid var(--road-secondary);
-}
-
-.progress-indicator-horizontal-secondary .current .progress-indicator-horizontal-icon {
-  width: calc(2rem - 4px);
-  height: calc(2rem - 4px);
-  color: var(--road-grey-900);
-  background: var(--road-secondary);
-  border: 2px solid var(--road-secondary);
-}
-
-.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline .current .progress-indicator-horizontal-icon {
-  color: var(--road-on-secondary);
-  background: var(--road-secondary);
-}
-
-.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline-light .current .progress-indicator-horizontal-icon {
-  color: var(--road-on-secondary);
-  background: var(--road-secondary);
-}
-
 .current .progress-indicator-horizontal-title,
 .completed .progress-indicator-horizontal-title {
   font-weight: 700;
   color: var(--road-on-surface);
 }
+
+.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,
+.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title {
+  font-weight: 700;
+  color: var(--road-on-header-surface);
+}

package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.js

@@ -1,22 +1,13 @@
 import { Host, h } from '@stencil/core';
 /**
  * @slot progress-indicator-horizontal-icon - if the state of the step 1 is completed add
- * `<road-icon name="check-small" class="d-block" color="white"></road-icon>` by default.
- * `<road-icon name="check-small" class="d-block" color="primary"></road-icon>` if is outline.
- * `<road-icon name="check-small" class="d-block" color="defaut"></road-icon>`
- * `<road-icon name="check-small" class="d-block" color="warning"></road-icon>` if the color is secondary and outline.
+ * `<road-icon name="check-small" class="d-block" style="color: currentColor;"></road-icon>` by default.
  * @slot progress-indicator-horizontal-title
  * @slot progress-indicator-horizontal-icon2 - if the state of the step 2 is completed add
- * `<road-icon name="check-small" class="d-block" color="white"></road-icon>` by default.
- * `<road-icon name="check-small" class="d-block" color="primary"></road-icon>` if is outline.
- * `<road-icon name="check-small" class="d-block" color="defaut"></road-icon>`
- * `<road-icon name="check-small" class="d-block" color="warning"></road-icon>` if the color is secondary and outline.
+ * `<road-icon name="check-small" class="d-block" style="color: currentColor;"></road-icon>` by default.
  * @slot progress-indicator-horizontal-title2
  * @slot progress-indicator-horizontal-icon3 - if the state of the step 3 is completed add
- * `<road-icon name="check-small" class="d-block" color="white"></road-icon>` by default.
- * `<road-icon name="check-small" class="d-block" color="primary"></road-icon>` if is outline.
- * `<road-icon name="check-small" class="d-block" color="defaut"></road-icon>`.
- * `<road-icon name="check-small" class="d-block" color="warning"></road-icon>` if the color is secondary and outline.
+ * `<road-icon name="check-small" class="d-block" style="color: currentColor;"></road-icon>` by default.
  * @slot progress-indicator-horizontal-title3
  */
 export class Stepper {
@@ -25,26 +16,16 @@ export class Stepper {
       * The color progress-indicator-horizontal.
       */
     this.color = 'default';
-    /**
-   * Display an outline without background.
-   */
-    this.light = false;
-    /**
-   * Display an outline style .
-   */
-    this.outline = false;
   }
   render() {
     const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';
-    const outlineClass = this.outline == true ? `progress-indicator-horizontal progress-indicator-horizontal-outline` : 'progress-indicator-horizontal';
-    const lightClass = this.light == true ? `progress-indicator-horizontal progress-indicator-horizontal-outline-light` : 'progress-indicator-horizontal';
     const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';
     const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';
     const stateThirdStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';
     const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';
     const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';
     const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';
-    return (h(Host, null, h("nav", null, h("ul", { class: `${colorClass} ${outlineClass} ${lightClass}` }, h("li", { class: `${stateClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title" })))), h("li", { class: `${stateSecondStepClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon2" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title2" })))), h("li", { class: `${stateThirdStepClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon3" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title3" }))))))));
+    return (h(Host, null, h("nav", null, h("ul", { class: `${colorClass}` }, h("li", { class: `${stateClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title" })))), h("li", { class: `${stateSecondStepClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon2" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title2" })))), h("li", { class: `${stateThirdStepClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon3" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title3" }))))))));
   }
   static get is() { return "road-progress-indicator-horizontal"; }
   static get encapsulation() { return "shadow"; }
@@ -64,8 +45,8 @@ export class Stepper {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'default' | 'secondary'",
-          "resolved": "\"default\" | \"secondary\" | undefined",
+          "original": "'default' | 'header'",
+          "resolved": "\"default\" | \"header\" | undefined",
           "references": {}
         },
         "required": false,
@@ -78,42 +59,6 @@ export class Stepper {
         "reflect": true,
         "defaultValue": "'default'"
       },
-      "light": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Display an outline without background."
-        },
-        "attribute": "light",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "outline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Display an outline style ."
-        },
-        "attribute": "outline",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "stateFirstStep": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.stories.js

@@ -7,17 +7,11 @@ export default {
   component: 'road-progress-indicator-horizontal',
   argTypes: {
     color: {
-      options: ['default', 'secondary'],
+      options: ['default', 'header'],
       control: {
         type: 'select',
       },
     },
-    outline: {
-      control: 'boolean',
-    },
-    light: {
-      control: 'boolean',
-    },
     'state-first-step': {
       options: ['default', 'current', 'completed'],
       control: {
@@ -60,8 +54,6 @@ export default {
     'state-first-step': 'default',
     'state-second-step': 'default',
     'state-third-step': 'default',
-    outline: null,
-    light: null,
     'progress-indicator-horizontal-icon': `1`,
     'progress-indicator-horizontal-title': `First step`,
     'progress-indicator-horizontal-icon2': `2`,
@@ -72,7 +64,7 @@ export default {
 };
 
 export const Template = (args) => html`
-  <road-progress-indicator-horizontal color="${ifDefined(args.color)}" outline="${ifDefined(args.outline)}" light="${ifDefined(args.light)}" state-first-step="${ifDefined(args['state-first-step'])}" state-second-step="${ifDefined(args['state-second-step'])}" state-third-step="${ifDefined(args['state-third-step'])}">
+  <road-progress-indicator-horizontal color="${ifDefined(args.color)}" state-first-step="${ifDefined(args['state-first-step'])}" state-second-step="${ifDefined(args['state-second-step'])}" state-third-step="${ifDefined(args['state-third-step'])}">
       <div slot="progress-indicator-horizontal-icon">
         ${unsafeHTML(args['progress-indicator-horizontal-icon'])}
       </div>
@@ -95,7 +87,7 @@ export const Template = (args) => html`
 `;
 
 export const withoutlabel = (args) => html`
-  <road-progress-indicator-horizontal color="${ifDefined(args.color)}" outline="${ifDefined(args.outline)}" light="${ifDefined(args.light)}" state-first-step="${ifDefined(args['state-first-step'])}" state-second-step="${ifDefined(args['state-second-step'])}" state-third-step="${ifDefined(args['state-third-step'])}">
+  <road-progress-indicator-horizontal color="${ifDefined(args.color)}" state-first-step="${ifDefined(args['state-first-step'])}" state-second-step="${ifDefined(args['state-second-step'])}" state-third-step="${ifDefined(args['state-third-step'])}">
     <div slot="progress-indicator-horizontal-icon">
       ${unsafeHTML(args['progress-indicator-horizontal-icon'])}
     </div>
@@ -109,7 +101,7 @@ export const withoutlabel = (args) => html`
 `;
 
 export const primary = (args) => html`
-  <road-progress-indicator-horizontal color="default" outline="false" state-first-step="current" state-second-step="default" state-third-step="default">
+  <road-progress-indicator-horizontal color="default" state-first-step="current" state-second-step="default" state-third-step="default">
   <div slot="progress-indicator-horizontal-icon">
   ${unsafeHTML(args['progress-indicator-horizontal-icon'])}
   </div>
@@ -131,8 +123,8 @@ export const primary = (args) => html`
   </road-progress-indicator-horizontal>
 `;
 
-export const secondary = (args) => html`
-  <road-progress-indicator-horizontal color="secondary" outline="false" state-first-step="current" state-second-step="default" state-third-step="default">
+export const header = (args) => html`
+  <road-progress-indicator-horizontal color="header" state-first-step="current" state-second-step="default" state-third-step="default">
   <div slot="progress-indicator-horizontal-icon">
   ${unsafeHTML(args['progress-indicator-horizontal-icon'])}
   </div>
@@ -155,7 +147,7 @@ export const secondary = (args) => html`
 `;
 
 export const stepcompleted = (args) => html`
-  <road-progress-indicator-horizontal color="secondary" outline="false" state-first-step="completed" state-second-step="current" state-third-step="default">
+  <road-progress-indicator-horizontal color="header" state-first-step="completed" state-second-step="current" state-third-step="default">
   <div slot="progress-indicator-horizontal-icon">
     <road-icon name="check-small" class="d-block" color="default"></road-icon>
   </div>
@@ -176,26 +168,3 @@ export const stepcompleted = (args) => html`
     </div>
   </road-progress-indicator-horizontal>
 `;
-
-export const outline = (args) => html`
-  <road-progress-indicator-horizontal color="default" outline="true" state-first-step="current" state-second-step="default" state-third-step="default">
-  <div slot="progress-indicator-horizontal-icon">
-  ${unsafeHTML(args['progress-indicator-horizontal-icon'])}
-  </div>
-  <div slot="progress-indicator-horizontal-title">
-    ${unsafeHTML(args['progress-indicator-horizontal-title'])}
-    </div>
-    <div slot="progress-indicator-horizontal-icon2">
-    ${unsafeHTML(args['progress-indicator-horizontal-icon2'])}
-  </div>
-    <div slot="progress-indicator-horizontal-title2">
-    ${unsafeHTML(args['progress-indicator-horizontal-title2'])}
-    </div>
-    <div slot="progress-indicator-horizontal-icon3">
-    ${unsafeHTML(args['progress-indicator-horizontal-icon3'])}
-  </div>
-  <div slot="progress-indicator-horizontal-title3">
-    ${unsafeHTML(args['progress-indicator-horizontal-title3'])}
-    </div>
-  </road-progress-indicator-horizontal>
-`;

package/dist/esm/loader.js

@@ -25,7 +25,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["road-badge_14",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]}],[1,"road-item",{"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[33,"road-drawer",{"isOpen":[1028,"is-open"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]]],[1,"road-col"],[1,"road-grid"],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"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],"helper":[1],"debounce":[2]}],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group"],[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]}]]],["road-duration",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["road-plate-number",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]}]]],["road-profil-dropdown",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]}]]],["road-accordion",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["road-banner",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["road-carousel",[[1,"road-carousel",{"options":[8],"pager":[4],"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]}]]],["road-checkbox",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"inverse":[4],"error":[1],"helper":[1]}]]],["road-chip",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["road-collapse",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["road-dialog",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-dropdown",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]}]]],["road-modal",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-range",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"]}]]],["road-rating",[[1,"road-rating",{"size":[513],"rate":[2],"reviews":[2],"reviewsText":[1,"reviews-text"]}]]],["road-toast",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]}]]],["road-alert",[[1,"road-alert",{"color":[1],"label":[1],"link":[1],"url":[1]}]]],["road-autocomplete",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["road-button-floating",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["road-carousel-item",[[4,"road-carousel-item"]]],["road-flap",[[1,"road-flap",{"color":[1],"size":[513]}]]],["road-global-navigation",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]]]]],["road-img",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]}]]],["road-navbar",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]]]]],["road-navbar-item",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]]]]],["road-progress",[[1,"road-progress",{"value":[2],"numbersteps":[1],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1]}]]],["road-progress-indicator-horizontal",[[1,"road-progress-indicator-horizontal",{"color":[513],"light":[4],"outline":[4],"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-tracker",[[1,"road-progress-tracker"]]],["road-progress-tracker-item",[[4,"road-progress-tracker-item"]]],["road-radio",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["road-radio-group",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025],"helper":[1]}]]],["road-segmented-button",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["road-segmented-button-bar",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]}]]],["road-segmented-buttons",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["road-select",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]}]]],["road-select-filter",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"isOpen":[32],"currentValue":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[4,"click","onClickOutside"]]]]],["road-skeleton",[[1,"road-skeleton"]]],["road-spinner",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["road-switch",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]}]]],["road-tab",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]}]]],["road-tab-bar",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1,"selected-tab"]}]]],["road-tab-button",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["road-table",[[6,"road-table"]]],["road-tabs",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["road-text",[[1,"road-text",{"color":[1]}]]],["road-textarea",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]}]]],["road-toggle",[[2,"road-toggle",{"toggleId":[1,"toggle-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]}]]],["road-toolbar-title",[[1,"road-toolbar-title"]]],["road-toolbar-title-page",[[1,"road-toolbar-title-page"]]],["road-tooltip",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["road-vertical-stepper",[[1,"road-vertical-stepper"]]],["road-vertical-stepper-item",[[4,"road-vertical-stepper-item"]]],["road-avatar",[[1,"road-avatar",{"size":[513]}]]],["road-card",[[1,"road-card",{"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]]], options);
+  return bootstrapLazy([["road-badge_14",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]}],[1,"road-item",{"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[33,"road-drawer",{"isOpen":[1028,"is-open"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]]],[1,"road-col"],[1,"road-grid"],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"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],"helper":[1],"debounce":[2]}],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group"],[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]}]]],["road-duration",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["road-plate-number",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]}]]],["road-profil-dropdown",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]}]]],["road-accordion",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["road-banner",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["road-carousel",[[1,"road-carousel",{"options":[8],"pager":[4],"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]}]]],["road-checkbox",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"inverse":[4],"error":[1],"helper":[1]}]]],["road-chip",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["road-collapse",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["road-dialog",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-dropdown",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]}]]],["road-modal",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-range",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"]}]]],["road-rating",[[1,"road-rating",{"size":[513],"rate":[2],"reviews":[2],"reviewsText":[1,"reviews-text"]}]]],["road-toast",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]}]]],["road-alert",[[1,"road-alert",{"color":[1],"label":[1],"link":[1],"url":[1]}]]],["road-autocomplete",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["road-button-floating",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["road-carousel-item",[[4,"road-carousel-item"]]],["road-flap",[[1,"road-flap",{"color":[1],"size":[513]}]]],["road-global-navigation",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]]]]],["road-img",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]}]]],["road-navbar",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]]]]],["road-navbar-item",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]]]]],["road-progress",[[1,"road-progress",{"value":[2],"numbersteps":[1],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1]}]]],["road-progress-indicator-horizontal",[[1,"road-progress-indicator-horizontal",{"color":[513],"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-tracker",[[1,"road-progress-tracker"]]],["road-progress-tracker-item",[[4,"road-progress-tracker-item"]]],["road-radio",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["road-radio-group",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025],"helper":[1]}]]],["road-segmented-button",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["road-segmented-button-bar",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]}]]],["road-segmented-buttons",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["road-select",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]}]]],["road-select-filter",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"isOpen":[32],"currentValue":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[4,"click","onClickOutside"]]]]],["road-skeleton",[[1,"road-skeleton"]]],["road-spinner",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["road-switch",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]}]]],["road-tab",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]}]]],["road-tab-bar",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1,"selected-tab"]}]]],["road-tab-button",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["road-table",[[6,"road-table"]]],["road-tabs",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["road-text",[[1,"road-text",{"color":[1]}]]],["road-textarea",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]}]]],["road-toggle",[[2,"road-toggle",{"toggleId":[1,"toggle-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]}]]],["road-toolbar-title",[[1,"road-toolbar-title"]]],["road-toolbar-title-page",[[1,"road-toolbar-title-page"]]],["road-tooltip",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["road-vertical-stepper",[[1,"road-vertical-stepper"]]],["road-vertical-stepper-item",[[4,"road-vertical-stepper-item"]]],["road-avatar",[[1,"road-avatar",{"size":[513]}]]],["road-card",[[1,"road-card",{"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]]], options);
   });
 };
 

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

@@ -25,7 +25,7 @@ const Badge = class {
 };
 Badge.style = badgeCss;
 
-const buttonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;display:inline-flex;display:-webkit-inline-flex;align-items:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--road-grey-10);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:hover){text-decoration:none}:host(.focus-visible){outline:0}.button-native{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:0 var(--padding-end) 0 var(--padding-start);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;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.btn-default:not([disabled]).focus-visible){background:var(--road-grey-80)}:host(.btn-primary){color:var(--road-on-button-primary);background:var(--road-button-primary)}:host(.btn-primary) ::slotted(road-icon){color:var(--road-on-button-primary)}:host(.btn-primary:not([disabled]):hover),:host(.btn-primary:not([disabled]).focus-visible){background:var(--road-button-primary-variant)}:host(.btn-secondary){color:var(--road-on-button-secondary);background:var(--road-button-secondary)}:host(.btn-secondary) ::slotted(road-icon){color:var(--road-on-button-secondary)}:host(.btn-secondary:not([disabled]):hover),:host(.btn-secondary:not([disabled]).focus-visible){background:var(--road-button-secondary-variant)}:host(.btn-link){font-weight:400;color:var(--road-link-primary);text-decoration:underline;background:transparent}:host(.btn-link:not([disabled]):hover),:host(.btn-link:not([disabled]).focus-visible){color:var(--road-primary-30)}:host(.btn-outline-primary),:host(.btn-outline-secondary),:host(.btn-outline-default){background:transparent}:host(.btn-outline-default){color:var(--road-on-surface-weak);background:var(--road-surface);border-color:var(--road-outline)}:host(.btn-outline-default) ::slotted(road-icon){color:var(--road-on-surface-weak)}:host(.btn-outline-default:hover),:host(.btn-outline-default.focus-visible){background:var(--road-grey-80)}:host(.btn-ghost) ::slotted(road-icon){color:var(--road-icon)}:host(.btn-ghost:hover),:host(.btn-ghost.focus-visible){background:var(--road-button-ghost-variant)}:host(.btn-outline-primary){color:var(--road-button-primary);border-color:var(--road-button-primary)}:host(.btn-outline-primary) ::slotted(road-icon){color:var(--road-button-primary)}:host(.btn-outline-primary:hover),:host(.btn-outline-primary.focus-visible){background:var(--road-button-tertiary-variant)}:host(.btn-outline-secondary){color:var(--road-button-secondary);border-color:var(--road-button-secondary)}:host(.btn-outline-secondary) ::slotted(road-icon){color:var(--road-button-secondary)}:host(.btn-outline-secondary:hover),:host(.btn-outline-secondary.focus-visible){background:var(--road-button-tertiary-variant)}:host([aria-disabled]){pointer-events:none;opacity:0.16}.button-native:disabled{cursor:not-allowed}::slotted([slot=\"start\"]){margin-right:0.5rem}::slotted([slot=\"end\"]){margin-left:0.5rem}:host(.btn-xl){height:3.5rem}:host(.btn-xl) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-md){--font-size:var(--road-font-size-14);height:2.5rem}:host(.btn-md) ::slotted(road-icon){width:1.5rem;height:1.5rem}:host(.btn-sm){--font-size:var(--road-font-size-14);height:2rem}:host(.btn-sm) ::slotted(road-icon){width:1.25rem;height:1.25rem}:host(.btn-block){width:100%}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);box-sizing:border-box;height:auto}";
+const buttonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;display:inline-flex;display:-webkit-inline-flex;align-items:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--road-grey-10);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:hover){text-decoration:none}:host(.focus-visible){outline:0}.button-native{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:0 var(--padding-end) 0 var(--padding-start);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;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.btn-default:not([disabled]).focus-visible){background:var(--road-grey-80)}:host(.btn-primary){color:var(--road-on-button-primary);background:var(--road-button-primary)}:host(.btn-primary) ::slotted(road-icon){color:var(--road-on-button-primary)}:host(.btn-primary:not([disabled]):hover),:host(.btn-primary:not([disabled]).focus-visible){background:var(--road-button-primary-variant)}:host(.btn-secondary){color:var(--road-on-button-secondary);background:var(--road-button-secondary)}:host(.btn-secondary) ::slotted(road-icon){color:var(--road-on-button-secondary)}:host(.btn-secondary:not([disabled]):hover),:host(.btn-secondary:not([disabled]).focus-visible){background:var(--road-button-secondary-variant)}:host(.btn-link){font-weight:400;color:var(--road-link-primary);text-decoration:underline;background:transparent}:host(.btn-link:not([disabled]):hover),:host(.btn-link:not([disabled]).focus-visible){color:var(--road-primary-30)}:host(.btn-outline-primary),:host(.btn-outline-secondary),:host(.btn-outline-default){background:transparent}:host(.btn-outline-default){color:var(--road-on-surface-weak);background:var(--road-surface);border-color:var(--road-outline)}:host(.btn-outline-default) ::slotted(road-icon){color:var(--road-on-surface-weak)}:host(.btn-outline-default:hover),:host(.btn-outline-default.focus-visible){background:var(--road-grey-80)}:host(.btn-ghost) ::slotted(road-icon){color:var(--road-icon)}:host(.btn-ghost:hover),:host(.btn-ghost.focus-visible){background:var(--road-button-ghost-variant)}:host(.btn-outline-primary){color:var(--road-button-primary);border-color:var(--road-button-primary)}:host(.btn-outline-primary) ::slotted(road-icon){color:var(--road-button-primary)}:host(.btn-outline-primary:hover),:host(.btn-outline-primary.focus-visible){background:var(--road-button-tertiary-variant)}:host(.btn-outline-secondary){color:var(--road-button-secondary);border-color:var(--road-button-secondary)}:host(.btn-outline-secondary) ::slotted(road-icon){color:var(--road-button-secondary)}:host(.btn-outline-secondary:hover),:host(.btn-outline-secondary.focus-visible){background:var(--road-button-tertiary-variant)}:host([aria-disabled]){color:var(--road-on-surface-disabled);pointer-events:none;background-color:var(--road-surface-disabled)}:host([aria-disabled]) ::slotted(road-icon){color:var(--road-on-surface-disabled)}.button-native:disabled{cursor:not-allowed}::slotted([slot=\"start\"]){margin-right:0.5rem}::slotted([slot=\"end\"]){margin-left:0.5rem}:host(.btn-xl){height:3.5rem}:host(.btn-xl) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-md){--font-size:var(--road-font-size-14);height:2.5rem}:host(.btn-md) ::slotted(road-icon){width:1.5rem;height:1.5rem}:host(.btn-sm){--font-size:var(--road-font-size-14);height:2rem}:host(.btn-sm) ::slotted(road-icon){width:1.25rem;height:1.25rem}:host(.btn-block){width:100%}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);box-sizing:border-box;height:auto}";
 
 const Button = class {
   constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-a99a5e7b.js';
 
-const progressIndicatorHorizontalCss = ":host{display:block}.progress-indicator-horizontal{display:flex;padding-left:0;margin:0;font-family:var(--road-font);line-height:1.5;list-style:none}.progress-indicator-horizontal-item{display:flex;flex:1;flex-direction:column;text-align:center}.progress-indicator-horizontal-item:not(:last-child)::after{position:relative;top:1rem;left:calc(50% + 16px);order:-1;width:calc(100% - 32px);height:2px;content:\"\";background:var(--road-surface-disabled)}.progress-indicator-horizontal-outline-light .progress-indicator-horizontal-item:not(:last-child)::after,.progress-indicator-horizontal-secondary-outline-light .progress-indicator-horizontal-item:not(:last-child)::after{left:calc(50% + calc(2rem / 2));width:calc(100% - 2rem)}.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link{cursor:not-allowed}.progress-indicator-horizontal-link{z-index:1;display:flex;flex-direction:column;align-items:center;text-decoration:none}.progress-indicator-horizontal-icon{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-on-surface-disabled);background:var(--road-surface-disabled);border-radius:50%;fill:currentColor}::slotted(.progress-indicator-horizontal-icon) road-icon{color:var(--road-secondary-600)}.progress-indicator-horizontal-outline .progress-indicator-horizontal-icon,.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline .progress-indicator-horizontal-icon{width:calc(2rem - 4px);height:calc(2rem - 4px);color:var(--road-on-surface-disabled);background:var(--road-surface);border:2px solid var(--road-surface-disabled);fill:currentColor}.progress-indicator-horizontal-outline-light .progress-indicator-horizontal-icon,.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline-light .progress-indicator-horizontal-icon{color:var(--road-on-surface-disabled);background:none;border:2px solid var(--road-surface-disabled);fill:currentColor}.progress-indicator-horizontal-title{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-surface-disabled)}.progress-indicator-horizontal-title span{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-surface-weak)}.completed:not(:last-child)::after{background:var(--road-primary)}.progress-indicator-horizontal-secondary .completed:not(:last-child)::after,.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline .completed:not(:last-child)::after,.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline-light .completed:not(:last-child)::after{background:var(--road-secondary)}.completed .progress-indicator-horizontal-icon,.current .progress-indicator-horizontal-icon{width:2rem;height:2rem;color:var(--road-on-primary);background:var(--road-primary);border:0}.progress-indicator-horizontal-outline .completed .progress-indicator-horizontal-icon{color:var(--road-primary);background:var(--road-surface);border:2px solid var(--road-primary)}.progress-indicator-horizontal-outline-light .completed .progress-indicator-horizontal-icon{color:var(--road-primary);background:none;border:2px solid var(--road-primary)}.progress-indicator-horizontal-secondary .completed .progress-indicator-horizontal-icon{color:var(--road-on-secondary);background:var(--road-secondary);border:0}.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline .completed .progress-indicator-horizontal-icon{width:calc(2rem - 4px);height:calc(2rem - 4px);color:var(--road-secondary);background:var(--road-surface);border:2px solid var(--road-secondary)}.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline-light .completed .progress-indicator-horizontal-icon{width:calc(2rem - 4px);height:calc(2rem - 4px);color:var(--road-secondary);background:none;border:2px solid var(--road-secondary)}.progress-indicator-horizontal-secondary .current .progress-indicator-horizontal-icon{width:calc(2rem - 4px);height:calc(2rem - 4px);color:var(--road-grey-900);background:var(--road-secondary);border:2px solid var(--road-secondary)}.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline .current .progress-indicator-horizontal-icon{color:var(--road-on-secondary);background:var(--road-secondary)}.progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline-light .current .progress-indicator-horizontal-icon{color:var(--road-on-secondary);background:var(--road-secondary)}.current .progress-indicator-horizontal-title,.completed .progress-indicator-horizontal-title{font-weight:700;color:var(--road-on-surface)}";
+const progressIndicatorHorizontalCss = ":host{display:block}.progress-indicator-horizontal{display:flex;padding-left:0;margin:0;font-family:var(--road-font);line-height:1.5;list-style:none}.progress-indicator-horizontal.progress-indicator-horizontal-header{background-color:var(--road-header-surface)}.progress-indicator-horizontal-item{display:flex;flex:1;flex-direction:column;text-align:center}.progress-indicator-horizontal-item:last-child{margin-top:0.125rem}.progress-indicator-horizontal-item:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:\"\";background:var(--road-surface-disabled)}.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:\"\";background:var(--road-header-surface-disabled)}.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link{cursor:not-allowed}.progress-indicator-horizontal-link{z-index:1;display:flex;flex-direction:column;align-items:center;text-decoration:none}.progress-indicator-horizontal-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-surface-disabled);background:var(--road-surface-disabled);border-radius:50%;fill:currentColor}::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{color:currentColor}.progress-indicator-horizontal-header ::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{color:currentColor}.progress-indicator-horizontal-header .progress-indicator-horizontal-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-header-surface-disabled);background:var(--road-header-surface-disabled);border-radius:50%;fill:currentColor}.progress-indicator-horizontal-title{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-surface-disabled)}.progress-indicator-horizontal-title span{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-surface-weak)}.progress-indicator-horizontal-header .progress-indicator-horizontal-title{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-header-surface-disabled)}.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-header-surface-weak)}.completed:not(:last-child)::after{background:var(--road-primary)}.progress-indicator-horizontal-header .completed:not(:last-child)::after{background:var(--road-header-badge)}.current .progress-indicator-horizontal-icon{color:var(--road-on-primary);background:var(--road-primary);border:0}.completed .progress-indicator-horizontal-icon{width:calc(1.5rem - 4px);height:calc(1.5rem - 4px);color:var(--road-primary);background:var(--road-surface);border:2px solid var(--road-primary)}.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon{color:var(--road-header-badge);background:none;border:2px solid var(--road-header-badge)}.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon{width:calc(1.5rem);height:calc(1.5rem);color:var(--road-on-header-badge);background:var(--road-header-badge);border:0}.current .progress-indicator-horizontal-title,.completed .progress-indicator-horizontal-title{font-weight:700;color:var(--road-on-surface)}.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title{font-weight:700;color:var(--road-on-header-surface)}";
 
 const Stepper = class {
   constructor(hostRef) {
@@ -9,26 +9,16 @@ const Stepper = class {
       * The color progress-indicator-horizontal.
       */
     this.color = 'default';
-    /**
-   * Display an outline without background.
-   */
-    this.light = false;
-    /**
-   * Display an outline style .
-   */
-    this.outline = false;
   }
   render() {
     const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';
-    const outlineClass = this.outline == true ? `progress-indicator-horizontal progress-indicator-horizontal-outline` : 'progress-indicator-horizontal';
-    const lightClass = this.light == true ? `progress-indicator-horizontal progress-indicator-horizontal-outline-light` : 'progress-indicator-horizontal';
     const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';
     const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';
     const stateThirdStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';
     const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';
     const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';
     const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';
-    return (h(Host, null, h("nav", null, h("ul", { class: `${colorClass} ${outlineClass} ${lightClass}` }, h("li", { class: `${stateClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title" })))), h("li", { class: `${stateSecondStepClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon2" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title2" })))), h("li", { class: `${stateThirdStepClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon3" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title3" }))))))));
+    return (h(Host, null, h("nav", null, h("ul", { class: `${colorClass}` }, h("li", { class: `${stateClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title" })))), h("li", { class: `${stateSecondStepClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon2" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title2" })))), h("li", { class: `${stateThirdStepClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon3" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title3" }))))))));
   }
 };
 Stepper.style = progressIndicatorHorizontalCss;