@roadtrip/components 3.26.0 → 3.28.0

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

@@ -6,7 +6,7 @@ const index = require('./index-12592729.js');
 const index$1 = require('./index-bf8a763e.js');
 require('./polyfill-b1fff766.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-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;font-size:0.75rem;color:var(--road-grey-500)}";
+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 Checkbox = class {
   constructor(hostRef) {
@@ -37,6 +37,7 @@ const Checkbox = class {
     this.disabled = false;
     this.value = 'on';
     this.label = `${this.checkboxId}-label`;
+    this.secondaryLabel = undefined;
     this.inverse = false;
     this.error = undefined;
     this.helper = undefined;
@@ -55,7 +56,7 @@ const Checkbox = class {
     const labelId = this.checkboxId + '-label';
     const inverseClass = this.inverse && 'form-checkbox-inverse';
     const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';
-    return (index.h(index.Host, null, index.h("input", { 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", { class: `form-check-label ${inverseClass}`, id: labelId, htmlFor: this.checkboxId }, index.h("div", null, this.label, index.h("slot", null)), this.checked && !this.indeterminate && index.h("road-icon", { class: "form-check-icon", icon: index$1.checkWide }), this.indeterminate && index.h("road-icon", { class: "form-check-icon", icon: index$1.navigationAddLess })), this.error && this.error !== '' && index.h("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { class: "helper" }, this.helper)));
+    return (index.h(index.Host, null, index.h("input", { 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", { class: `form-check-label ${inverseClass}`, id: labelId, htmlFor: this.checkboxId }, index.h("div", null, this.label, " ", index.h("span", { class: "form-check-label-span" }, this.secondaryLabel), index.h("slot", null)), this.checked && !this.indeterminate && index.h("road-icon", { class: "form-check-icon", icon: index$1.checkWide }), this.indeterminate && index.h("road-icon", { class: "form-check-icon", icon: index$1.navigationAddLess })), this.error && this.error !== '' && index.h("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { 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":";;;;;;;;AAAA,MAAM,WAAW,GAAG,64HAA64H;;MCcp5H,QAAQ;;;;;;;;;IAgGX,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;sBAxG2B,iBAAiB,WAAW,EAAE,EAAE;gBAKtC,IAAI,CAAC,UAAU;oBAKV,KAAK;mBAKE,KAAK;yBAKN,KAAK;oBAKX,KAAK;iBAKT,IAAI;iBAKJ,GAAG,IAAI,CAAC,UAAU,QAAQ;mBAKvB,KAAK;;;;EAwChC,cAAc,CAAC,SAAkB;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;GACJ;EAiBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;IAC3C,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,IAAI,uBAAuB,CAAC;IAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,YAAY,GAAG,EAAE,CAAC;IAE1G,QACEA,QAACC,UAAI,QACHD,mBACE,KAAK,EAAE,oBAAoB,cAAc,EAAE,EAC3C,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,GAAG,IAAI,CAAC,OAAO,EAAE,mBAChB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,qBAC3B,OAAO,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACFA,mBAAO,KAAK,EAAE,oBAAoB,YAAY,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,IACrFA,qBACG,IAAI,CAAC,KAAK,EAACA,qBAAO,CACf,EACL,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,IAAIA,uBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAEE,iBAAS,GAAc,EACvG,IAAI,CAAC,aAAa,IAAIF,uBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAEG,yBAAiB,GAAc,CACzF,EACP,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAIH,eAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK,EAC/E,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,IAAIA,eAAG,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAK,CACpE,EACP;GACH;;;;;AAGH,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","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-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  font-size: 0.75rem;\n  color: var(--road-grey-500);\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   * 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}<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":";;;;;;;;AAAA,MAAM,WAAW,GAAG,ggIAAggI;;MCcvgI,QAAQ;;;;;;;;;IAqGX,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;sBA7G2B,iBAAiB,WAAW,EAAE,EAAE;gBAKtC,IAAI,CAAC,UAAU;oBAKV,KAAK;mBAKE,KAAK;yBAKN,KAAK;oBAKX,KAAK;iBAKT,IAAI;iBAKJ,GAAG,IAAI,CAAC,UAAU,QAAQ;;mBAUvB,KAAK;;;;EAwChC,cAAc,CAAC,SAAkB;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;GACJ;EAiBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;IAC3C,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,IAAI,uBAAuB,CAAC;IAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,YAAY,GAAG,EAAE,CAAC;IAE1G,QACEA,QAACC,UAAI,QACHD,mBACE,KAAK,EAAE,oBAAoB,cAAc,EAAE,EAC3C,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,GAAG,IAAI,CAAC,OAAO,EAAE,mBAChB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,qBAC3B,OAAO,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACFA,mBAAO,KAAK,EAAE,oBAAoB,YAAY,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,IACrFA,qBACG,IAAI,CAAC,KAAK,OAAEA,kBAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,cAAc,CAAQ,EAAAA,qBAAO,CAChF,EACL,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,IAAIA,uBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAEE,iBAAS,GAAc,EACvG,IAAI,CAAC,aAAa,IAAIF,uBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAEG,yBAAiB,GAAc,CACzF,EACP,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAIH,eAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK,EAC/E,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,IAAIA,eAAG,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAK,CACpE,EACP;GACH;;;;;AAGH,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","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}

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

@@ -30,6 +30,14 @@ const NavbarItem = class {
   onNavbarChanged(ev) {
     this.selected = this.tab === ev.detail.tab;
   }
+  /**
+   * Watch for changes to `selected` and move focus to this element if `selected` is true.
+   */
+  handleSelectedChange(newValue) {
+    if (newValue) {
+      this.el.focus();
+    }
+  }
   selectTab(ev) {
     if (this.tab !== undefined) {
       if (!this.disabled) {
@@ -57,13 +65,16 @@ const NavbarItem = class {
       rel,
       target,
     };
-    return (index.h(index.Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "menu", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
+    return (index.h(index.Host, { 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({}, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { class: "button-inner" }, index.h("slot", null)))));
   }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "selected": ["handleSelectedChange"]
+  }; }
 };
 NavbarItem.style = navbarItemCss;
 

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

@@ -1 +1 @@
-{"file":"road-navbar-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,kiGAAkiG;;MCa3iG,UAAU;;;;;IAiFb,YAAO,GAAG,CAAC,EAAiB;MAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;KACF,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;KACpB,CAAC;oBAlFiB,KAAK;;;;oBAyBY,KAAK;;;;EAyBzC,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;GAC5C;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;OACJ;MACD,IAAG,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;QAC1B,EAAE,CAAC,cAAc,EAAE,CAAC;OACrB;KACF;GACF;EAYD,MAAM;IACJ,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC5D,MAAM,KAAK,GAAG;MACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,IAAI;MACJ,GAAG;MACH,MAAM;KACP,CAAC;IAEF,QACEA,QAACC,UAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,GAAG,mBACG,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,eAAe,GAAG,EAAE,GAAG,IAAI,EACnD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,QAAQ;OACzB,IAEDD,+BAAO,KAAK,IAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,KAC7DA,kBAAM,KAAK,EAAC,cAAc,IACxBA,qBAAO,CACF,CACL,CACC,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/navbar-item/navbar-item.css?tag=road-navbar-item&encapsulation=shadow","src/components/navbar-item/navbar-item.tsx"],"sourcesContent":["/*\n * Navbar item\n *\n * Index\n * - Native\n * - Inner\n * - Icon\n * - Badge\n */\n\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-basis: 0;\n  flex-direction: column;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    flex-grow: inherit;\n    width: 100%;\n    padding: 0.5rem;\n  }\n\n}\n\n/**\n * Disabled\n */\n\n:host(.tab-disabled),\n:host(.tab-disabled) road-tooltip,\n:host(.tab-disabled) road-tooltip road-icon,\n:host(.tab-disabled) ::slotted(road-icon) {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  fill: var(--road-on-surface-disabled);\n}\n\n/**\n * Selected state\n */\n\n:host(.tab-selected),\n:host(.tab-selected) road-tooltip road-icon,\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--road-on-button-tertiary);\n  fill: var(--road-on-button-tertiary);\n}\n\n:host(.tab-selected)::after {\n  position: absolute;\n  bottom: -12px;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 4px;\n  color: var(--road-on-button-tertiary);\n  content: \"\";\n  background-color: var(--road-on-button-tertiary);\n}\n\n@media (min-width: 1200px) {\n\n  :host(.tab-selected)::after {\n    bottom: auto;\n    left: 0;\n    width: 4px;\n    height: 100%;\n  }\n\n}\n\n\n/**\n * Focus on Tab state\n */\n\n:host(.focus-visible) ::slotted(road-icon),\n:host(.focus-visible) ::slotted(road-icon)::after,\n:host(.focus-visible) ::slotted(road-label),\n:host(.focus-visible) ::slotted(road-label)::after,\n:host(:hover) ::slotted(road-icon),\n:host(:hover) ::slotted(road-icon)::after,\n:host(:hover) ::slotted(road-label),\n:host(:hover) ::slotted(road-label)::after {\n  color: var(--road-on-button-tertiary);\n}\n\n:host(.tab-disabled.focus-visible) ::slotted(road-icon),\n:host(.tab-disabled.focus-visible) ::slotted(road-label),\n:host(.tab-disabled:hover) ::slotted(road-icon),\n:host(.tab-disabled:hover) ::slotted(road-label) {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  fill: var(--road-on-surface-disabled);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  overflow: visible;\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-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host(.tab-disabled) .button-native {\n  cursor: not-allowed;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  display: block;\n  width: 2rem;\n  height: 2rem;\n  margin-right: auto;\n  margin-bottom: 0.25rem;\n  margin-left: auto;\n  fill: currentColor;\n}\n\n/* TOOLTIP\n -------------------- */\n\n@media (min-width: 1200px) {\n\n  :host ::slotted(road-tooltip) {\n    width: 100%;\n  }\n\n}\n\n/* LABEL\n -------------------- */\n\n::slotted(road-label) {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  font-size: var(--road-label-small);\n  font-weight: 700;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  ::slotted(road-label)  {\n    display: block;\n  }\n}\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n  position: absolute;\n  top: 4px;\n  left: calc(50% + 0.375rem);\n  z-index: 1;\n  box-sizing: border-box;\n  height: auto;\n  font-size: var(--road-font-size-10);\n  font-weight: 400;\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * @slot  - Content of the item, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-navbar-item',\n  styleUrl: 'navbar-item.css',\n  shadow: true,\n})\nexport class NavbarItem {\n\n  @Element() el!: HTMLRoadNavbarItemElement;\n\n  /**\n   * If `true`, the user cannot interact with the tab button.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab.\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadnavbaritemclick!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarItemClick!: EventEmitter;\n\n  @Listen('roadNavbarChanged', { target: 'window' })\n  @Listen('roadnavbarchanged', { target: 'window' })\n  onNavbarChanged(ev: CustomEvent) {\n    this.selected = this.tab === ev.detail.tab;\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      if (!this.disabled) {\n        this.roadnavbaritemclick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n        this.roadNavbarItemClick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n      }\n      if(this.href === undefined) {\n        ev.preventDefault();\n      }\n    }\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { href, rel, target, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"menu\"\n        tabindex=\"0\"\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `navbar-item-${tab}` : null}\n        disabled={disabled}\n        class={{\n          'navbar-item': true,\n          'tab-selected': selected,\n          'tab-disabled': disabled,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-navbar-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,kiGAAkiG;;MCa3iG,UAAU;;;;;IA2Fb,YAAO,GAAG,CAAC,EAAiB;MAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;KACF,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;KACpB,CAAC;oBA5FiB,KAAK;;;;oBAyBY,KAAK;;;;EAyBzC,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;GAC5C;;;;EAMD,oBAAoB,CAAC,QAAiB;IACpC,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;KACjB;GACF;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;OACJ;MACD,IAAG,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;QAC1B,EAAE,CAAC,cAAc,EAAE,CAAC;OACrB;KACF;GACF;EAYD,MAAM;IACJ,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC5D,MAAM,KAAK,GAAG;MACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,IAAI;MACJ,GAAG;MACH,MAAM;KACP,CAAC;IAEF,QACEA,QAACC,UAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAC,GAAG,mBACG,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,eAAe,GAAG,EAAE,GAAG,IAAI,EACnD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,QAAQ;OACzB,IAEDD,+BAAO,KAAK,IAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,KAC7DA,kBAAM,KAAK,EAAC,cAAc,IACxBA,qBAAO,CACF,CACL,CACC,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["src/components/navbar-item/navbar-item.css?tag=road-navbar-item&encapsulation=shadow","src/components/navbar-item/navbar-item.tsx"],"sourcesContent":["/*\n * Navbar item\n *\n * Index\n * - Native\n * - Inner\n * - Icon\n * - Badge\n */\n\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-basis: 0;\n  flex-direction: column;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    flex-grow: inherit;\n    width: 100%;\n    padding: 0.5rem;\n  }\n\n}\n\n/**\n * Disabled\n */\n\n:host(.tab-disabled),\n:host(.tab-disabled) road-tooltip,\n:host(.tab-disabled) road-tooltip road-icon,\n:host(.tab-disabled) ::slotted(road-icon) {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  fill: var(--road-on-surface-disabled);\n}\n\n/**\n * Selected state\n */\n\n:host(.tab-selected),\n:host(.tab-selected) road-tooltip road-icon,\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--road-on-button-tertiary);\n  fill: var(--road-on-button-tertiary);\n}\n\n:host(.tab-selected)::after {\n  position: absolute;\n  bottom: -12px;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 4px;\n  color: var(--road-on-button-tertiary);\n  content: \"\";\n  background-color: var(--road-on-button-tertiary);\n}\n\n@media (min-width: 1200px) {\n\n  :host(.tab-selected)::after {\n    bottom: auto;\n    left: 0;\n    width: 4px;\n    height: 100%;\n  }\n\n}\n\n\n/**\n * Focus on Tab state\n */\n\n:host(.focus-visible) ::slotted(road-icon),\n:host(.focus-visible) ::slotted(road-icon)::after,\n:host(.focus-visible) ::slotted(road-label),\n:host(.focus-visible) ::slotted(road-label)::after,\n:host(:hover) ::slotted(road-icon),\n:host(:hover) ::slotted(road-icon)::after,\n:host(:hover) ::slotted(road-label),\n:host(:hover) ::slotted(road-label)::after {\n  color: var(--road-on-button-tertiary);\n}\n\n:host(.tab-disabled.focus-visible) ::slotted(road-icon),\n:host(.tab-disabled.focus-visible) ::slotted(road-label),\n:host(.tab-disabled:hover) ::slotted(road-icon),\n:host(.tab-disabled:hover) ::slotted(road-label) {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  fill: var(--road-on-surface-disabled);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  overflow: visible;\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-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host(.tab-disabled) .button-native {\n  cursor: not-allowed;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  display: block;\n  width: 2rem;\n  height: 2rem;\n  margin-right: auto;\n  margin-bottom: 0.25rem;\n  margin-left: auto;\n  fill: currentColor;\n}\n\n/* TOOLTIP\n -------------------- */\n\n@media (min-width: 1200px) {\n\n  :host ::slotted(road-tooltip) {\n    width: 100%;\n  }\n\n}\n\n/* LABEL\n -------------------- */\n\n::slotted(road-label) {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  font-size: var(--road-label-small);\n  font-weight: 700;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  ::slotted(road-label)  {\n    display: block;\n  }\n}\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n  position: absolute;\n  top: 4px;\n  left: calc(50% + 0.375rem);\n  z-index: 1;\n  box-sizing: border-box;\n  height: auto;\n  font-size: var(--road-font-size-10);\n  font-weight: 400;\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen, Watch } from '@stencil/core';\n\n/**\n * @slot  - Content of the item, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-navbar-item',\n  styleUrl: 'navbar-item.css',\n  shadow: true,\n})\nexport class NavbarItem {\n\n  @Element() el!: HTMLRoadNavbarItemElement;\n\n  /**\n   * If `true`, the user cannot interact with the tab button.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab.\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadnavbaritemclick!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarItemClick!: EventEmitter;\n\n  @Listen('roadNavbarChanged', { target: 'window' })\n  @Listen('roadnavbarchanged', { target: 'window' })\n  onNavbarChanged(ev: CustomEvent) {\n    this.selected = this.tab === ev.detail.tab;\n  }\n\n  /**\n   * Watch for changes to `selected` and move focus to this element if `selected` is true.\n   */\n  @Watch('selected')\n  handleSelectedChange(newValue: boolean) {\n    if (newValue) {\n      this.el.focus();\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      if (!this.disabled) {\n        this.roadnavbaritemclick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n        this.roadNavbarItemClick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n      }\n      if(this.href === undefined) {\n        ev.preventDefault();\n      }\n    }\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { href, rel, target, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"menuitem\"\n        tabindex=\"0\"\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `navbar-item-${tab}` : null}\n        disabled={disabled}\n        class={{\n          'navbar-item': true,\n          'tab-selected': selected,\n          'tab-disabled': disabled,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-12592729.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.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 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,.progress-indicator-horizontal-header .in-progress: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,.in-progress .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,.progress-indicator-horizontal-header .in-progress .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,.in-progress .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,.progress-indicator-horizontal-header .in-progress .progress-indicator-horizontal-title{font-weight:700;color:var(--road-on-header-surface)}.in-progress.progress-indicator-horizontal-item:not(:last-child)::before{position:relative;top:0.93rem;left:calc(50% + 12px);order:-1;width:calc(50% - 24px);height:2px;content:\"\";background:var(--road-primary)}";
 
 const Stepper = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"road-progress-indicator-horizontal.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,8BAA8B,GAAG,gxHAAgxH;;MCmB1yH,OAAO;;;iBAKwC,SAAS;sBAKpC,CAAC;;;;;;;;EAiC7B,MAAM;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,+DAA+D,IAAI,CAAC,KAAK,EAAE,GAAG,+BAA+B,CAAC;IAC5J,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,cAAc,EAAE,GAAG,oCAAoC,CAAC;IAC1J,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,eAAe,EAAE,GAAG,oCAAoC,CAAC;IACtK,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,cAAc,EAAE,GAAG,oCAAoC,CAAC;IACnK,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IAExE,QACEA,QAACC,UAAI,QACHD,qBACKA,gBAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IAC1BA,gBAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IACxBA,eAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/DA,kBAAM,KAAK,EAAC,oCAAoC,IAC9CA,kBAAM,IAAI,EAAC,oCAAoC,GAAE,CAC5C,EACPA,kBAAM,KAAK,EAAC,qCAAqC,IAC/CA,kBAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,CACL,CACD,EACLA,gBAAI,KAAK,EAAE,GAAG,oBAAoB,EAAE,IACnCA,eAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/DA,kBAAM,KAAK,EAAC,oCAAoC,IAC9CA,kBAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACPA,kBAAM,KAAK,EAAC,qCAAqC,IAC/CA,kBAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,EACJ,IAAI,CAAC,UAAU,IAAI,CAAC,IAAIA,gBAAI,KAAK,EAAE,GAAG,mBAAmB,EAAE,IAC1DA,eAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/DA,kBAAM,KAAK,EAAC,oCAAoC,IAC9CA,kBAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACPA,kBAAM,KAAK,EAAC,qCAAqC,IAC/CA,kBAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,CAEF,CACD,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/progress-indicator-horizontal/progress-indicator-horizontal.css?tag=road-progress-indicator-horizontal&encapsulation=shadow","src/components/progress-indicator-horizontal/progress-indicator-horizontal.tsx"],"sourcesContent":["/*\n * Progress-indicator-horizontal\n *\n * Index\n * - Item\n * - Link\n * - Icon\n * - Title\n * - Completed\n */\n\n:host {\n  display: block;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL\n -------------------- */\n\n.progress-indicator-horizontal {\n  display: flex;\n  padding-left: 0;\n  margin: 0;\n  font-family: var(--road-font);\n  line-height: 1.5;\n  list-style: none;\n}\n\n.progress-indicator-horizontal.progress-indicator-horizontal-header {\n  background-color: var(--road-header-surface);\n}\n\n\n/* PROGRESS INDICATOR HORIZONTAL ITEM\n -------------------- */\n\n.progress-indicator-horizontal-item {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  text-align: center;\n}\n\n.progress-indicator-horizontal-item:last-child {\n  margin-top: 0.125rem;\n}\n\n/**\n * Line between items\n */\n\n\n.progress-indicator-horizontal-item:not(:last-child)::after {\n  position: relative;\n  top: 0.8rem;\n  left: calc(50% + 12px);\n  order: -1;\n  width: calc(100% - 24px);\n  height: 2px;\n  content: \"\";\n  background: var(--road-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after {\n  position: relative;\n  top: 0.8rem;\n  left: calc(50% + 12px);\n  order: -1;\n  width: calc(100% - 24px);\n  height: 2px;\n  content: \"\";\n  background: var(--road-header-surface-disabled);\n}\n\n\n/**\n * Disabled click for current and next steps\n */\n\n\n.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link {\n  cursor: not-allowed;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL LINK\n -------------------- */\n\n.progress-indicator-horizontal-link {\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-decoration: none;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL ICON\n -------------------- */\n\n.progress-indicator-horizontal-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: var(--road-font-size-12);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n  background: var(--road-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n  color: currentColor;\n}\n\n.progress-indicator-horizontal-header ::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n  color: currentColor;\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: var(--road-font-size-12);\n  font-weight: 700;\n  color: var(--road-on-header-surface-disabled);\n  background: var(--road-header-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL TITLE\n -------------------- */\n\n.progress-indicator-horizontal-title {\n  display: block;\n  margin-top: 0.25rem;\n  font-size: var(--road-body-small);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-indicator-horizontal-title span{\n  display: block;\n  font-size: var(--road-body-small);\n  font-weight: 400;\n  color: var(--road-on-surface-weak);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title {\n  display: block;\n  margin-top: 0.25rem;\n  font-size: var(--road-body-small);\n  font-weight: 700;\n  color: var(--road-on-header-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{\n  display: block;\n  font-size: var(--road-body-small);\n  font-weight: 400;\n  color: var(--road-on-header-surface-weak);\n}\n\n/* STEP COMPLETED\n -------------------- */\n\n.completed:not(:last-child)::after {\n  background: var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed:not(:last-child)::after {\n  background: var(--road-header-badge);\n}\n\n.current .progress-indicator-horizontal-icon {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n  border: 0;\n}\n\n.completed .progress-indicator-horizontal-icon{\n  width: calc(1.5rem - 4px);\n  height: calc(1.5rem - 4px);\n  color: var(--road-primary);\n  background: var(--road-surface);\n  border: 2px solid var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon {\n  color: var(--road-header-badge);\n  background: none;\n  border: 2px solid var(--road-header-badge);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon {\n  width: calc(1.5rem);\n  height: calc(1.5rem);\n  color: var(--road-on-header-badge);\n  background: var(--road-header-badge);\n  border: 0;\n}\n\n.current .progress-indicator-horizontal-title,\n.completed .progress-indicator-horizontal-title {\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title {\n  font-weight: 700;\n  color: var(--road-on-header-surface);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot progress-indicator-horizontal-icon - if the state of the step 1 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title \n * @slot progress-indicator-horizontal-icon2 - if the state of the step 2 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title2 \n * @slot progress-indicator-horizontal-icon3 - if the state of the step 3 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title3\n */\n\n@Component({\n  tag: 'road-progress-indicator-horizontal',\n  styleUrl: 'progress-indicator-horizontal.css',\n  shadow: true,\n})\nexport class Stepper {\n\n  /**\n    * The color progress-indicator-horizontal.\n    */\n    @Prop({ reflect: true }) color?: 'default' | 'header' = 'default';\n\n    /**\n    * The nombre of steps.\n    */\n    @Prop() numberStep?: 3 | 2 = 3;\n\n    /**\n   * The color of the first step.\n   */\n   @Prop() stateFirstStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The color of the second step.\n   */\n    @Prop() stateSecondStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The color of the third step.\n   */\n     @Prop() stateThirdStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep1?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep2?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep3?: string;\n    \n\n     render() {\n\n       const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';\n       const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';\n       const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';\n       const stateThirdStepClass = this.stateThirdStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';\n       const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';\n       const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';\n       const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';\n\n       return (\n         <Host>\n           <nav>\n                <ul class={`${colorClass}`}>\n                <li class={`${stateClass}`}>\n                  <a class=\"progress-indicator-horizontal-link\" href={`${urlStep1}`}>\n                    <span class=\"progress-indicator-horizontal-icon\">\n                      <slot name=\"progress-indicator-horizontal-icon\"/>\n                    </span>\n                    <span class=\"progress-indicator-horizontal-title\">\n                      <slot name=\"progress-indicator-horizontal-title\"/>\n                    </span>\n                  </a>\n                </li>\n                <li class={`${stateSecondStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep2}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon2\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title2\"/>\n                   </span>\n                 </a>\n               </li>\n               {this.numberStep == 3 && <li class={`${stateThirdStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep3}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon3\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title3\"/>\n                   </span>\n                 </a>\n               </li>}\n               \n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"],"version":3}
+{"file":"road-progress-indicator-horizontal.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,8BAA8B,GAAG,i0IAAi0I;;MCmB31I,OAAO;;;iBAKwC,SAAS;sBAKpC,CAAC;;;;;;;;EAiC7B,MAAM;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,+DAA+D,IAAI,CAAC,KAAK,EAAE,GAAG,+BAA+B,CAAC;IAC5J,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,cAAc,EAAE,GAAG,oCAAoC,CAAC;IAC1J,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,eAAe,EAAE,GAAG,oCAAoC,CAAC;IACtK,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,cAAc,EAAE,GAAG,oCAAoC,CAAC;IACnK,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IAExE,QACEA,QAACC,UAAI,QACHD,qBACKA,gBAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IAC1BA,gBAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IACxBA,eAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/DA,kBAAM,KAAK,EAAC,oCAAoC,IAC9CA,kBAAM,IAAI,EAAC,oCAAoC,GAAE,CAC5C,EACPA,kBAAM,KAAK,EAAC,qCAAqC,IAC/CA,kBAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,CACL,CACD,EACLA,gBAAI,KAAK,EAAE,GAAG,oBAAoB,EAAE,IACnCA,eAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/DA,kBAAM,KAAK,EAAC,oCAAoC,IAC9CA,kBAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACPA,kBAAM,KAAK,EAAC,qCAAqC,IAC/CA,kBAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,EACJ,IAAI,CAAC,UAAU,IAAI,CAAC,IAAIA,gBAAI,KAAK,EAAE,GAAG,mBAAmB,EAAE,IAC1DA,eAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/DA,kBAAM,KAAK,EAAC,oCAAoC,IAC9CA,kBAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACPA,kBAAM,KAAK,EAAC,qCAAqC,IAC/CA,kBAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,CAEF,CACD,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/progress-indicator-horizontal/progress-indicator-horizontal.css?tag=road-progress-indicator-horizontal&encapsulation=shadow","src/components/progress-indicator-horizontal/progress-indicator-horizontal.tsx"],"sourcesContent":["/*\n * Progress-indicator-horizontal\n *\n * Index\n * - Item\n * - Link\n * - Icon\n * - Title\n * - Completed\n */\n\n:host {\n  display: block;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL\n -------------------- */\n\n.progress-indicator-horizontal {\n  display: flex;\n  padding-left: 0;\n  margin: 0;\n  font-family: var(--road-font);\n  line-height: 1.5;\n  list-style: none;\n}\n\n.progress-indicator-horizontal.progress-indicator-horizontal-header {\n  background-color: var(--road-header-surface);\n}\n\n\n/* PROGRESS INDICATOR HORIZONTAL ITEM\n -------------------- */\n\n.progress-indicator-horizontal-item {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  text-align: center;\n}\n\n.progress-indicator-horizontal-item:last-child {\n  margin-top: 0.125rem;\n}\n\n/**\n * Line between items\n */\n\n\n.progress-indicator-horizontal-item:not(:last-child)::after {\n  position: relative;\n  top: 0.8rem;\n  left: calc(50% + 12px);\n  order: -1;\n  width: calc(100% - 24px);\n  height: 2px;\n  content: \"\";\n  background: var(--road-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after {\n  position: relative;\n  top: 0.8rem;\n  left: calc(50% + 12px);\n  order: -1;\n  width: calc(100% - 24px);\n  height: 2px;\n  content: \"\";\n  background: var(--road-header-surface-disabled);\n}\n\n\n/**\n * Disabled click for current and next steps\n */\n\n\n.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link {\n  cursor: not-allowed;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL LINK\n -------------------- */\n\n.progress-indicator-horizontal-link {\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-decoration: none;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL ICON\n -------------------- */\n\n.progress-indicator-horizontal-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: var(--road-font-size-12);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n  background: var(--road-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n  color: currentColor;\n}\n\n.progress-indicator-horizontal-header ::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n  color: currentColor;\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: var(--road-font-size-12);\n  font-weight: 700;\n  color: var(--road-on-header-surface-disabled);\n  background: var(--road-header-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL TITLE\n -------------------- */\n\n.progress-indicator-horizontal-title {\n  display: block;\n  margin-top: 0.25rem;\n  font-size: var(--road-body-small);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-indicator-horizontal-title span{\n  display: block;\n  font-size: var(--road-body-small);\n  font-weight: 400;\n  color: var(--road-on-surface-weak);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title {\n  display: block;\n  margin-top: 0.25rem;\n  font-size: var(--road-body-small);\n  font-weight: 700;\n  color: var(--road-on-header-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{\n  display: block;\n  font-size: var(--road-body-small);\n  font-weight: 400;\n  color: var(--road-on-header-surface-weak);\n}\n\n/* STEP COMPLETED\n -------------------- */\n\n.completed:not(:last-child)::after {\n  background: var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed:not(:last-child)::after,\n.progress-indicator-horizontal-header .in-progress:not(:last-child)::after {\n  background: var(--road-header-badge);\n}\n\n.current .progress-indicator-horizontal-icon {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n  border: 0;\n}\n\n.completed .progress-indicator-horizontal-icon,\n.in-progress .progress-indicator-horizontal-icon{\n  width: calc(1.5rem - 4px);\n  height: calc(1.5rem - 4px);\n  color: var(--road-primary);\n  background: var(--road-surface);\n  border: 2px solid var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon,\n.progress-indicator-horizontal-header .in-progress .progress-indicator-horizontal-icon  {\n  color: var(--road-header-badge);\n  background: none;\n  border: 2px solid var(--road-header-badge);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon {\n  width: calc(1.5rem);\n  height: calc(1.5rem);\n  color: var(--road-on-header-badge);\n  background: var(--road-header-badge);\n  border: 0;\n}\n\n.current .progress-indicator-horizontal-title,\n.completed .progress-indicator-horizontal-title,\n.in-progress .progress-indicator-horizontal-title {\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title,\n.progress-indicator-horizontal-header .in-progress .progress-indicator-horizontal-title {\n  font-weight: 700;\n  color: var(--road-on-header-surface);\n}\n\n/* IN PROGRESS\n-------------------- */\n\n.in-progress.progress-indicator-horizontal-item:not(:last-child)::before {\n  position: relative;\n  top: 0.93rem;\n  left: calc(50% + 12px);\n  order: -1;\n  width: calc(50% - 24px);\n  height: 2px;\n  content: \"\";\n  background: var(--road-primary);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot progress-indicator-horizontal-icon - if the state of the step 1 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title \n * @slot progress-indicator-horizontal-icon2 - if the state of the step 2 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title2 \n * @slot progress-indicator-horizontal-icon3 - if the state of the step 3 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title3\n */\n\n@Component({\n  tag: 'road-progress-indicator-horizontal',\n  styleUrl: 'progress-indicator-horizontal.css',\n  shadow: true,\n})\nexport class Stepper {\n\n  /**\n    * The color progress-indicator-horizontal.\n    */\n    @Prop({ reflect: true }) color?: 'default' | 'header' = 'default';\n\n    /**\n    * The nombre of steps.\n    */\n    @Prop() numberStep?: 3 | 2 = 3;\n\n    /**\n   * The color of the first step.\n   */\n   @Prop() stateFirstStep?: 'default' | 'current' | 'comleted' | 'in-progress';\n\n    /**\n   * The color of the second step.\n   */\n    @Prop() stateSecondStep?: 'default' | 'current' | 'comleted' | 'in-progress';\n\n    /**\n   * The color of the third step.\n   */\n     @Prop() stateThirdStep?: 'default' | 'current' | 'comleted' | 'in-progress';\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep1?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep2?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep3?: string;\n    \n\n     render() {\n\n       const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';\n       const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';\n       const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';\n       const stateThirdStepClass = this.stateThirdStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';\n       const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';\n       const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';\n       const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';\n\n       return (\n         <Host>\n           <nav>\n                <ul class={`${colorClass}`}>\n                <li class={`${stateClass}`}>\n                  <a class=\"progress-indicator-horizontal-link\" href={`${urlStep1}`}>\n                    <span class=\"progress-indicator-horizontal-icon\">\n                      <slot name=\"progress-indicator-horizontal-icon\"/>\n                    </span>\n                    <span class=\"progress-indicator-horizontal-title\">\n                      <slot name=\"progress-indicator-horizontal-title\"/>\n                    </span>\n                  </a>\n                </li>\n                <li class={`${stateSecondStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep2}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon2\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title2\"/>\n                   </span>\n                 </a>\n               </li>\n               {this.numberStep == 3 && <li class={`${stateThirdStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep3}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon3\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title3\"/>\n                   </span>\n                 </a>\n               </li>}\n               \n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"],"version":3}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-12592729.js');
 require('./polyfill-b1fff766.js');
 
-const radioCss = ".sc-road-radio-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface)}.form-radio-inline.sc-road-radio-h{display:inline-flex;flex-wrap:wrap;align-items:center;margin-right:1.5rem;margin-bottom:0}.form-radio-input.sc-road-radio{position:absolute;z-index:-1;width:20px;height:20px;opacity:0}.form-radio-input.sc-road-radio:disabled{z-index:1;width:100%;cursor:not-allowed}.form-radio-label.sc-road-radio{position:relative;display:inline-flex;align-items:flex-start;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-radio-label.sc-road-radio::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0.1rem 0.75rem 0 0;content:\"\";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:50%;transition:border-color 0.2s ease-in-out}.form-radio-label.sc-road-radio::after{position:absolute;top:0.285rem;left:0.1875rem;box-sizing:border-box;display:block;width:0.875rem;height:0.875rem;content:\"\";background:var(--road-grey-60);border:none;border-radius:50%;transition:background 0.2s ease-in-out, transform 0.2s ease-in-out;transform:scale(0);transform-origin:50% 50%}@media (hover: hover){.form-radio-input.sc-road-radio~.form-radio-label.sc-road-radio:hover::before{border-color:var(--road-input-surface)}.form-radio-input.sc-road-radio:checked~.form-radio-label.sc-road-radio:hover::after{background:var(--road-input-surface-variant)}}.form-radio-input.sc-road-radio:checked~.form-radio-label.sc-road-radio::after{background:var(--road-input-surface);opacity:1;transform:scale(1)}.form-radio-input.focus-visible.sc-road-radio~.form-radio-label.sc-road-radio::before{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant)}.form-radio-input.focus-visible.sc-road-radio:checked~.form-radio-label.sc-road-radio::after{background:var(--road-primary-700)}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio{cursor:not-allowed}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio::before,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio::before{background:var(--road-on-surface-disabled);border:none}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio::after,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio::after{background:var(--road-grey-60)}.form-radio-input.is-invalid.sc-road-radio~.form-radio-label.sc-road-radio::before{border-color:var(--road-danger-outline)}.form-radio-inverse.sc-road-radio{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-radio-inverse.sc-road-radio::before{margin:0 0 0 1rem}.form-radio-inverse.sc-road-radio::after{right:0.1875rem;left:auto}";
+const radioCss = ".sc-road-radio-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface)}.form-radio-inline.sc-road-radio-h{display:inline-flex;flex-wrap:wrap;align-items:center;margin-right:1.5rem;margin-bottom:0}.form-radio-input.sc-road-radio{position:absolute;z-index:-1;width:20px;height:20px;opacity:0}.form-radio-input.sc-road-radio:disabled{z-index:1;width:100%;cursor:not-allowed}.form-radio-label.sc-road-radio{position:relative;display:inline-flex;align-items:flex-start;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-radio-label.sc-road-radio::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0.1rem 0.75rem 0 0;content:\"\";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:50%;transition:border-color 0.2s ease-in-out}.form-radio-label-span.sc-road-radio{margin-left:var(--road-spacing-02);color:var(--road-on-surface-weak)}.form-radio-label.sc-road-radio::after{position:absolute;top:0.285rem;left:0.1875rem;box-sizing:border-box;display:block;width:0.875rem;height:0.875rem;content:\"\";background:var(--road-grey-60);border:none;border-radius:50%;transition:background 0.2s ease-in-out, transform 0.2s ease-in-out;transform:scale(0);transform-origin:50% 50%}@media (hover: hover){.form-radio-input.sc-road-radio~.form-radio-label.sc-road-radio:hover::before{border-color:var(--road-input-surface)}.form-radio-input.sc-road-radio:checked~.form-radio-label.sc-road-radio:hover::after{background:var(--road-input-surface-variant)}}.form-radio-input.sc-road-radio:checked~.form-radio-label.sc-road-radio::after{background:var(--road-input-surface);opacity:1;transform:scale(1)}.form-radio-input.focus-visible.sc-road-radio~.form-radio-label.sc-road-radio::before{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant)}.form-radio-input.focus-visible.sc-road-radio:checked~.form-radio-label.sc-road-radio::after{background:var(--road-primary-700)}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio{cursor:not-allowed}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio::before,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio::before{background:var(--road-on-surface-disabled);border:none}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio::after,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio::after{background:var(--road-grey-60)}.form-radio-input.is-invalid.sc-road-radio~.form-radio-label.sc-road-radio::before{border-color:var(--road-danger-outline)}.form-radio-inverse.sc-road-radio{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-radio-inverse.sc-road-radio::before{margin:0 0 0 1rem}.form-radio-inverse.sc-road-radio::after{right:0.1875rem;left:auto}";
 
 const Radio = class {
   constructor(hostRef) {
@@ -35,6 +35,7 @@ const Radio = class {
     this.disabled = false;
     this.value = undefined;
     this.label = `${this.radioId}-label`;
+    this.secondaryLabel = undefined;
     this.inverse = false;
     this.error = undefined;
     this.helper = undefined;
@@ -63,7 +64,7 @@ const Radio = class {
     const inverseClass = this.inverse && 'form-radio-inverse';
     const isInvalidClass = this.error ? 'is-invalid' : '';
     const inlineClass = this.inline ? 'form-radio-inline' : '';
-    return (index.h(index.Host, { class: `form-radio ${inlineClass}` }, index.h("input", { class: `form-radio-input ${isInvalidClass}`, type: "radio", id: this.radioId, name: this.name, required: this.required, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, checked: this.checked, "aria-checked": `${this.checked}`, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label)));
+    return (index.h(index.Host, { class: `form-radio ${inlineClass}` }, index.h("input", { class: `form-radio-input ${isInvalidClass}`, type: "radio", id: this.radioId, name: this.name, required: this.required, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, checked: this.checked, "aria-checked": `${this.checked}`, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label, " ", index.h("span", { class: "form-radio-label-span" }, this.secondaryLabel))));
   }
   get el() { return index.getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"road-radio.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,+3FAA+3F;;MCQn4F,KAAK;;;;;;;IAER,eAAU,GAAqC,IAAI,CAAC;IAgGpD,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;OACrD;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;mBAvGwB,cAAc,QAAQ,EAAE,EAAE;mBAKxB,KAAK;gBAKV,IAAI,CAAC,OAAO;oBAKP,KAAK;oBAKL,KAAK;;iBAUT,GAAG,IAAI,CAAC,OAAO,QAAQ;mBAKpB,KAAK;;;kBAeN,IAAI;;EAgB9B,iBAAiB;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;KAC3B;IACD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACzE,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;GACF;EAED,oBAAoB;IAClB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IACnC,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;GACF;EAID,oBAAoB;IAClB,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAkBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;IACxC,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC;IAC1D,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,GAAG,YAAY,GAAG,EAAE,CAAC;IACtD,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,mBAAmB,GAAG,EAAE,CAAC;IAE3D,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,cAAc,WAAW,EAAE,IACtCD,mBACE,KAAK,EAAE,oBAAoB,cAAc,EAAE,EAC3C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,GAAG,IAAI,CAAC,OAAO,EAAE,qBACd,OAAO,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACFA,mBAAO,KAAK,EAAE,oBAAoB,YAAY,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAAG,IAAI,CAAC,KAAK,CAAS,CACrG,EACP;GACH;;;AAGH,IAAI,QAAQ,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/radio/radio.css?tag=road-radio&encapsulation=scoped","src/components/radio/radio.tsx"],"sourcesContent":["/*\n * Radio\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 * - Radio\n * - Label\n * - Error\n * - Position\n */\n\n/* RADIO\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-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n}\n\n/**\n * Inline radio\n */\n\n:host(.form-radio-inline) {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  margin-right: 1.5rem;\n  margin-bottom: 0;\n}\n\n/**\n * Hide input\n */\n\n.form-radio-input {\n  position: absolute;\n  z-index: -1;\n  width: 20px;\n  height: 20px;\n  opacity: 0;\n}\n\n.form-radio-input:disabled {\n  z-index: 1;\n  width: 100%;\n  cursor: not-allowed;\n}\n\n/* LABEL\n -------------------- */\n\n.form-radio-label {\n  position: relative;\n  display: inline-flex;\n  align-items: flex-start;\n  margin: 0;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-radio-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.1rem 0.75rem 0 0;\n  content: \"\";\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 50%;\n  transition: border-color 0.2s ease-in-out;\n}\n\n.form-radio-label::after {\n  position: absolute;\n  top: 0.285rem;\n  left: 0.1875rem;\n  box-sizing: border-box;\n  display: block;\n  width: 0.875rem;\n  height: 0.875rem;\n  content: \"\";\n  background: var(--road-grey-60);\n  border: none;\n  border-radius: 50%;\n  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;\n  transform: scale(0);\n  transform-origin: 50% 50%;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-radio-input ~ .form-radio-label:hover::before {\n    border-color: var(--road-input-surface);\n  }\n\n  .form-radio-input:checked ~ .form-radio-label:hover::after {\n    background: var(--road-input-surface-variant);\n  }\n}\n\n/**\n * Checked state\n */\n\n.form-radio-input:checked ~ .form-radio-label::after {\n  background: var(--road-input-surface);\n  opacity: 1;\n  transform: scale(1);\n}\n\n/**\n * Focus on Tab\n */\n\n.form-radio-input.focus-visible ~ .form-radio-label::before {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant);\n}\n\n.form-radio-input.focus-visible:checked ~ .form-radio-label::after {\n  background: var(--road-primary-700);\n}\n\n/**\n * Disabled state\n */\n\n.form-radio-input:disabled ~ .form-radio-label,\n.form-radio-input[readonly] ~ .form-radio-label {\n  cursor: not-allowed;\n}\n\n.form-radio-input:disabled ~ .form-radio-label::before,\n.form-radio-input[readonly] ~ .form-radio-label::before {\n  background: var(--road-on-surface-disabled);\n  border: none;\n}\n\n.form-radio-input:disabled ~ .form-radio-label::after,\n.form-radio-input[readonly] ~ .form-radio-label::after {\n  background: var(--road-grey-60);\n}\n\n/* ERROR\n -------------------- */\n\n.form-radio-input.is-invalid ~ .form-radio-label::before {\n  border-color: var(--road-danger-outline);\n}\n\n/* POSITION\n -------------------- */\n\n.form-radio-inverse {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n.form-radio-inverse::before {\n  margin: 0 0 0 1rem;\n}\n\n.form-radio-inverse::after {\n  right: 0.1875rem;\n  left: auto;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, h, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n@Component({\n  tag: 'road-radio',\n  styleUrl: 'radio.css',\n  scoped: true,\n})\nexport class Radio {\n\n  private radioGroup: HTMLRoadRadioGroupElement | null = null;\n\n  @Element() el!: HTMLRoadRadioElement;\n\n  /**\n   * The id of radio\n   */\n  @Prop() radioId: string = `road-radio-${radioIds++}`;\n\n  /**\n   * If `true`, the radio is selected.\n   */\n  @State() checked: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.radioId;\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 user cannot interact with the radio.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value?: any | null;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.radioId}-label`;\n\n  /**\n   * If `true`, the label and the radio are inverse and spaced\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: boolean;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * Inline multiple radio\n   */\n  @Prop() inline: boolean = true;\n\n  /**\n   * Emitted when the radio button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    if (this.value === undefined) {\n      this.value = this.radioId;\n    }\n    const radioGroup = this.radioGroup = this.el.closest('road-radio-group');\n    if (radioGroup) {\n      this.updateState();\n    }\n  }\n\n  disconnectedCallback() {\n    const radioGroup = this.radioGroup;\n    if (radioGroup) {\n      this.radioGroup = null;\n    }\n  }\n\n  @Listen('roadChange', {target: 'window'})\n  @Listen('roadchange', {target: 'window'})\n  onRoadChangedChanged() {\n    this.updateState();\n  }\n\n  private updateState = () => {\n    if (this.radioGroup) {\n      this.checked = this.radioGroup.value === this.value;\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 labelId = this.radioId + '-label';\n    const inverseClass = this.inverse && 'form-radio-inverse';\n    const isInvalidClass = this.error ? 'is-invalid' : '';\n    const inlineClass = this.inline ? 'form-radio-inline' : '';\n\n    return (\n      <Host class={`form-radio ${inlineClass}`}>\n        <input\n          class={`form-radio-input ${isInvalidClass}`}\n          type=\"radio\"\n          id={this.radioId}\n          name={this.name}\n          required={this.required}\n          disabled={this.disabled}\n          aria-disabled={this.disabled ? 'true' : null}\n          checked={this.checked}\n          aria-checked={`${this.checked}`}\n          aria-labelledby={labelId}\n          value={this.value}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-radio-label ${inverseClass}`} id={labelId} htmlFor={this.radioId}>{this.label}</label>\n      </Host>\n    );\n  }\n}\n\nlet radioIds = 0;\n"],"version":3}
+{"file":"road-radio.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,y+FAAy+F;;MCQ7+F,KAAK;;;;;;;IAER,eAAU,GAAqC,IAAI,CAAC;IAqGpD,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;OACrD;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;mBA5GwB,cAAc,QAAQ,EAAE,EAAE;mBAKxB,KAAK;gBAKV,IAAI,CAAC,OAAO;oBAKP,KAAK;oBAKL,KAAK;;iBAUT,GAAG,IAAI,CAAC,OAAO,QAAQ;;mBAUpB,KAAK;;;kBAeN,IAAI;;EAgB9B,iBAAiB;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;KAC3B;IACD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACzE,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;GACF;EAED,oBAAoB;IAClB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IACnC,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;GACF;EAID,oBAAoB;IAClB,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAkBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;IACxC,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC;IAC1D,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,GAAG,YAAY,GAAG,EAAE,CAAC;IACtD,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,mBAAmB,GAAG,EAAE,CAAC;IAE3D,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,cAAc,WAAW,EAAE,IACtCD,mBACE,KAAK,EAAE,oBAAoB,cAAc,EAAE,EAC3C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,GAAG,IAAI,CAAC,OAAO,EAAE,qBACd,OAAO,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACFA,mBAAO,KAAK,EAAE,oBAAoB,YAAY,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAAG,IAAI,CAAC,KAAK,OAAEA,kBAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,cAAc,CAAQ,CAAQ,CACtK,EACP;GACH;;;AAGH,IAAI,QAAQ,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/radio/radio.css?tag=road-radio&encapsulation=scoped","src/components/radio/radio.tsx"],"sourcesContent":["/*\n * Radio\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 * - Radio\n * - Label\n * - Error\n * - Position\n */\n\n/* RADIO\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-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n}\n\n/**\n * Inline radio\n */\n\n:host(.form-radio-inline) {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  margin-right: 1.5rem;\n  margin-bottom: 0;\n}\n\n/**\n * Hide input\n */\n\n.form-radio-input {\n  position: absolute;\n  z-index: -1;\n  width: 20px;\n  height: 20px;\n  opacity: 0;\n}\n\n.form-radio-input:disabled {\n  z-index: 1;\n  width: 100%;\n  cursor: not-allowed;\n}\n\n/* LABEL\n -------------------- */\n\n.form-radio-label {\n  position: relative;\n  display: inline-flex;\n  align-items: flex-start;\n  margin: 0;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-radio-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.1rem 0.75rem 0 0;\n  content: \"\";\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 50%;\n  transition: border-color 0.2s ease-in-out;\n}\n\n.form-radio-label-span {\n  margin-left: var(--road-spacing-02);\n  color: var(--road-on-surface-weak);\n}\n\n.form-radio-label::after {\n  position: absolute;\n  top: 0.285rem;\n  left: 0.1875rem;\n  box-sizing: border-box;\n  display: block;\n  width: 0.875rem;\n  height: 0.875rem;\n  content: \"\";\n  background: var(--road-grey-60);\n  border: none;\n  border-radius: 50%;\n  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;\n  transform: scale(0);\n  transform-origin: 50% 50%;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-radio-input ~ .form-radio-label:hover::before {\n    border-color: var(--road-input-surface);\n  }\n\n  .form-radio-input:checked ~ .form-radio-label:hover::after {\n    background: var(--road-input-surface-variant);\n  }\n}\n\n/**\n * Checked state\n */\n\n.form-radio-input:checked ~ .form-radio-label::after {\n  background: var(--road-input-surface);\n  opacity: 1;\n  transform: scale(1);\n}\n\n/**\n * Focus on Tab\n */\n\n.form-radio-input.focus-visible ~ .form-radio-label::before {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant);\n}\n\n.form-radio-input.focus-visible:checked ~ .form-radio-label::after {\n  background: var(--road-primary-700);\n}\n\n/**\n * Disabled state\n */\n\n.form-radio-input:disabled ~ .form-radio-label,\n.form-radio-input[readonly] ~ .form-radio-label {\n  cursor: not-allowed;\n}\n\n.form-radio-input:disabled ~ .form-radio-label::before,\n.form-radio-input[readonly] ~ .form-radio-label::before {\n  background: var(--road-on-surface-disabled);\n  border: none;\n}\n\n.form-radio-input:disabled ~ .form-radio-label::after,\n.form-radio-input[readonly] ~ .form-radio-label::after {\n  background: var(--road-grey-60);\n}\n\n/* ERROR\n -------------------- */\n\n.form-radio-input.is-invalid ~ .form-radio-label::before {\n  border-color: var(--road-danger-outline);\n}\n\n/* POSITION\n -------------------- */\n\n.form-radio-inverse {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n.form-radio-inverse::before {\n  margin: 0 0 0 1rem;\n}\n\n.form-radio-inverse::after {\n  right: 0.1875rem;\n  left: auto;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, h, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n@Component({\n  tag: 'road-radio',\n  styleUrl: 'radio.css',\n  scoped: true,\n})\nexport class Radio {\n\n  private radioGroup: HTMLRoadRadioGroupElement | null = null;\n\n  @Element() el!: HTMLRoadRadioElement;\n\n  /**\n   * The id of radio\n   */\n  @Prop() radioId: string = `road-radio-${radioIds++}`;\n\n  /**\n   * If `true`, the radio is selected.\n   */\n  @State() checked: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.radioId;\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 user cannot interact with the radio.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value?: any | null;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.radioId}-label`;\n\n  /**\n  * Secondary Label for the field\n  */\n  @Prop() secondaryLabel?: string;\n\n  /**\n   * If `true`, the label and the radio are inverse and spaced\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: boolean;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * Inline multiple radio\n   */\n  @Prop() inline: boolean = true;\n\n  /**\n   * Emitted when the radio button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    if (this.value === undefined) {\n      this.value = this.radioId;\n    }\n    const radioGroup = this.radioGroup = this.el.closest('road-radio-group');\n    if (radioGroup) {\n      this.updateState();\n    }\n  }\n\n  disconnectedCallback() {\n    const radioGroup = this.radioGroup;\n    if (radioGroup) {\n      this.radioGroup = null;\n    }\n  }\n\n  @Listen('roadChange', {target: 'window'})\n  @Listen('roadchange', {target: 'window'})\n  onRoadChangedChanged() {\n    this.updateState();\n  }\n\n  private updateState = () => {\n    if (this.radioGroup) {\n      this.checked = this.radioGroup.value === this.value;\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 labelId = this.radioId + '-label';\n    const inverseClass = this.inverse && 'form-radio-inverse';\n    const isInvalidClass = this.error ? 'is-invalid' : '';\n    const inlineClass = this.inline ? 'form-radio-inline' : '';\n\n    return (\n      <Host class={`form-radio ${inlineClass}`}>\n        <input\n          class={`form-radio-input ${isInvalidClass}`}\n          type=\"radio\"\n          id={this.radioId}\n          name={this.name}\n          required={this.required}\n          disabled={this.disabled}\n          aria-disabled={this.disabled ? 'true' : null}\n          checked={this.checked}\n          aria-checked={`${this.checked}`}\n          aria-labelledby={labelId}\n          value={this.value}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-radio-label ${inverseClass}`} id={labelId} htmlFor={this.radioId}>{this.label} <span class=\"form-radio-label-span\">{this.secondaryLabel}</span></label>\n      </Host>\n    );\n  }\n}\n\nlet radioIds = 0;\n"],"version":3}

package/dist/cjs/road-select-filter.cjs.entry.js

@@ -1863,6 +1863,11 @@ const SelectFilter = class {
           this.onClick(activeOption.item.value, activeOption.item.label);
         }
       }
+      else if (event.key === 'Escape') {
+        event.preventDefault();
+        this.isOpen = false;
+        this.isActive = false;
+      }
     }
   }
   get filteredOptions() {