@roadtrip/components 3.17.0 → 3.18.0

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

@@ -1 +1 @@
-{"file":"road-banner.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,ilBAAilB;;MCQtlB,MAAM;;;;;;;IAyBT,YAAO,GAAG,CAAC,EAAW;MAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;MACrB,EAAE,CAAC,cAAc,EAAE,CAAC;MAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd,CAAC;kBAzByC,IAAI;iBAKvB,EAAE;;;;;;;EA0B1B,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;GACrB;EAOD,MAAM;IACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,EAAE,CAAC;IAE3D,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,iBAAiB,IAC5BD,qBACEA,kBAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EAClD,IAAI,CAAC,IAAI,IAAIA,eAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAK,EACzEA,oBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAC9DA,uBAAW,IAAI,EAAEE,uBAAe,EAAE,IAAI,EAAC,IAAI,GAAa,CACjD,CACL,CACD,EACP;GACH;;;;;;","names":["h","Host","navigationClose"],"sources":["src/components/banner/banner.css?tag=road-banner&encapsulation=shadow","src/components/banner/banner.tsx"],"sourcesContent":["/* BANNER\n -------------------- */\n\n:host{\n  display: none;\n}\n\n:host(.banner-open) {\n  position: relative;\n  display: block;\n  padding: 1rem 2rem;\n  font-size: var(--road-body-medium);\n  text-align: center;\n  background-color: var(--road-leading-banner);\n}\n\n.banner-close{\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 0.25rem;\n  color: currentColor;\n  cursor: pointer;\n  background: none;\n  border: 0;\n}\n\n.banner-close road-icon{\n  color: currentColor;\n}\n\n.banner-open-label{\n  font-weight: 700;\n}\n\n.banner-open-link{\n  display: block;\n  margin: 0.25rem 0.75rem;\n  font-size: var(--road-font-size-14);\n  color: currentColor;\n}\n\n@media (min-width: 992px) {\n\n  .banner-close{\n    right: 0.25rem;\n    bottom: 0;\n  }\n\n  .banner-open-link{\n    display: initial;\n  }\n}\n","import { Component, Host, h, Prop, Method, Event, EventEmitter} from '@stencil/core';\nimport { navigationClose } from '../../../icons';\n\n@Component({\n  tag: 'road-banner',\n  styleUrl: 'banner.css',\n  shadow: true,\n})\nexport class Banner {\n\n  /**\n   * Set `open` property to `true` to open the banner\n   */\n  @Prop({ mutable: true }) isOpen: boolean = true;\n\n  /**\n   * Text display in the banner\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Text Link display in the banner\n   */\n  @Prop() link?: string;\n\n  /**\n   * Text Link display in the banner\n   */\n  @Prop() url?: string;\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the banner\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.onClose.emit();\n  }\n\n  /**\n   * Indicate when closing the banner\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  render() {\n    const bannerIsOpenClass = this.isOpen ? 'banner-open' : '';\n\n    return (\n      <Host class={bannerIsOpenClass}>\n        <div>\n          <span class=\"banner-open-label\">{this.label}</span>\n          {this.link && <a href={this.url} class=\"banner-open-link\">{this.link}</a>}\n          <button type=\"button\" class=\"banner-close\" onClick={this.onClick}>\n            <road-icon icon={navigationClose} size=\"md\"></road-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-banner.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,ilBAAilB;;MCQtlB,MAAM;;;;;;;IAyBT,YAAO,GAAG,CAAC,EAAW;MAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;MACrB,EAAE,CAAC,cAAc,EAAE,CAAC;MAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd,CAAC;kBAzByC,IAAI;iBAKvB,EAAE;;;;;;;EA0B1B,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;GACrB;EAOD,MAAM;IACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,EAAE,CAAC;IAE3D,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,iBAAiB,IAC5BD,qBACEA,kBAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EAClD,IAAI,CAAC,IAAI,IAAIA,eAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAK,EACzEA,oBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,gBAAa,QAAQ,IACnFA,uBAAW,IAAI,EAAEE,uBAAe,EAAE,IAAI,EAAC,IAAI,GAAa,CACjD,CACL,CACD,EACP;GACH;;;;;;","names":["h","Host","navigationClose"],"sources":["src/components/banner/banner.css?tag=road-banner&encapsulation=shadow","src/components/banner/banner.tsx"],"sourcesContent":["/* BANNER\n -------------------- */\n\n:host{\n  display: none;\n}\n\n:host(.banner-open) {\n  position: relative;\n  display: block;\n  padding: 1rem 2rem;\n  font-size: var(--road-body-medium);\n  text-align: center;\n  background-color: var(--road-leading-banner);\n}\n\n.banner-close{\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 0.25rem;\n  color: currentColor;\n  cursor: pointer;\n  background: none;\n  border: 0;\n}\n\n.banner-close road-icon{\n  color: currentColor;\n}\n\n.banner-open-label{\n  font-weight: 700;\n}\n\n.banner-open-link{\n  display: block;\n  margin: 0.25rem 0.75rem;\n  font-size: var(--road-font-size-14);\n  color: currentColor;\n}\n\n@media (min-width: 992px) {\n\n  .banner-close{\n    right: 0.25rem;\n    bottom: 0;\n  }\n\n  .banner-open-link{\n    display: initial;\n  }\n}\n","import { Component, Host, h, Prop, Method, Event, EventEmitter} from '@stencil/core';\nimport { navigationClose } from '../../../icons';\n\n@Component({\n  tag: 'road-banner',\n  styleUrl: 'banner.css',\n  shadow: true,\n})\nexport class Banner {\n\n  /**\n   * Set `open` property to `true` to open the banner\n   */\n  @Prop({ mutable: true }) isOpen: boolean = true;\n\n  /**\n   * Text display in the banner\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Text Link display in the banner\n   */\n  @Prop() link?: string;\n\n  /**\n   * Text Link display in the banner\n   */\n  @Prop() url?: string;\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the banner\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.onClose.emit();\n  }\n\n  /**\n   * Indicate when closing the banner\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  render() {\n    const bannerIsOpenClass = this.isOpen ? 'banner-open' : '';\n\n    return (\n      <Host class={bannerIsOpenClass}>\n        <div>\n          <span class=\"banner-open-label\">{this.label}</span>\n          {this.link && <a href={this.url} class=\"banner-open-link\">{this.link}</a>}\n          <button type=\"button\" class=\"banner-close\" onClick={this.onClick} aria-label=\"closed\">\n            <road-icon icon={navigationClose} size=\"md\"></road-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-12592729.js');
 require('./polyfill-b1fff766.js');
 
-const buttonFloatingCss = ":host{position:fixed;right:1rem;bottom:1rem;z-index:2;box-sizing:border-box;display:block;align-items:center;max-width:3.5rem;height:3.5rem;padding:0.6rem 0.75rem 0.75rem;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-button-medium);font-weight:700;line-height:1.375;color:var(--road-on-button-fab);text-decoration:none;white-space:nowrap;background:var(--road-button-fab);border:1px solid transparent;border-radius:2rem;box-shadow:var(--road-elevation-average);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.position-left){right:auto;left:1rem}:host(.position-center){right:0;left:0;margin:0 auto}:host(.scroll-up){display:block;max-width:3.5rem}:host(.position-center.scroll-up){display:flex;max-width:max-content}:host(.scroll-down) .button-native{display:flex}:host(.position-center.scroll-down) .button-native{display:flex}:host(.position-center) .button-native{display:flex}:host(.scroll-down){display:flex;max-width:max-content}:host ::slotted(road-icon){margin-right:0.5rem;color:var(--road-on-button-secondary)}:host(:hover){background-color:var(--road-button-fab-variant)}:host(.focus-visible){outline:0}.button-native{position:relative;z-index:1;align-items:center;justify-content:center;width:100%;height:100%;padding:0;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host([aria-disabled]){pointer-events:none;opacity:0.16}.button-native:disabled{cursor:not-allowed}";
+const buttonFloatingCss = ":host{position:fixed;right:1rem;bottom:1rem;z-index:2;box-sizing:border-box;display:block;align-items:center;max-width:3.5rem;height:3.5rem;padding:0.6rem 0.75rem 0.75rem;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-button-medium);font-weight:700;line-height:1.375;color:var(--road-on-button-fab);text-decoration:none;white-space:nowrap;background:var(--road-button-fab);border:1px solid transparent;border-radius:2rem;box-shadow:var(--road-elevation-average);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.position-left){right:auto;left:1rem}:host(.position-center){right:0;left:0;margin:0 auto}:host(.scroll-up){display:block;max-width:3.5rem}:host(.position-center.scroll-up){display:flex;max-width:max-content}:host(.scroll-down) .button-native{display:flex}:host(.position-center.scroll-down) .button-native{display:flex}:host(.position-center) .button-native{display:flex}:host(.scroll-down){display:flex;max-width:max-content}:host ::slotted(road-icon){margin-right:0.5rem;color:var(--road-on-button-secondary)}:host(:hover){background-color:var(--road-button-fab-variant)}.button-native{position:relative;z-index:1;align-items:center;justify-content:center;width:100%;height:100%;padding:0;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host([aria-disabled]){pointer-events:none;opacity:0.16}.button-native:disabled{cursor:not-allowed}";
 
 const Button = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"road-button-floating.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,wvDAAwvD;;MCgBrwD,MAAM;;;;;;;IA6DT,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,IAAK,IAAI,CAAC,EAAU,CAAC,YAAY,EAAE;;;;QAIvD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACrC,IAAI,IAAI,EAAE;UACR,EAAE,CAAC,cAAc,EAAE,CAAC;UAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;UACpD,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;UAClC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;UAC7B,UAAU,CAAC,KAAK,EAAE,CAAC;UACnB,UAAU,CAAC,MAAM,EAAE,CAAC;SACrB;OACF;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;oBAhFmE,OAAO;;;;;EAuC1E,QAAQ;IACN,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC;IACtC,IAAI,cAAc,GAAG,GAAG,EAAG;MACvB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;MACrC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;KACzC;IACD,IAAI,cAAc,GAAG,GAAG,EAAG;MACvB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;MACnC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;KAC3C;GACF;EAiCH,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAU,CAAC;IAChE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IAErF,QACEA,QAACC,UAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,GAAG,aAAa,EAAE,IAEzBD,QAAC,OAAO,IACN,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnBA,kBAAM,IAAI,EAAC,OAAO,GAAE,EACpBA,qBAAO,CACC,CACL,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/button-floating/button-floating.css?tag=road-button-floating&encapsulation=shadow","src/components/button-floating/button-floating.tsx"],"sourcesContent":["/*\n * Button floating\n *\n *\n * Index\n * - Button\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  position: fixed;\n  right: 1rem;\n  bottom: 1rem;\n  z-index: 2;\n  box-sizing: border-box;\n  display: block;\n  align-items: center;\n  max-width: 3.5rem;\n  height: 3.5rem;\n  padding: 0.6rem 0.75rem 0.75rem;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  line-height: 1.375;\n  color: var(--road-on-button-fab);\n  text-decoration: none;\n  white-space: nowrap;\n  background: var(--road-button-fab);\n  border: 1px solid transparent;\n  border-radius: 2rem;\n  box-shadow: var(--road-elevation-average);\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n:host(.position-left) {\n  right: auto;\n  left: 1rem;\n}\n\n:host(.position-center) {\n  right: 0;\n  left: 0;\n  margin: 0 auto;\n}\n\n:host(.scroll-up) {\n  display: block;\n  max-width: 3.5rem;\n}\n\n:host(.position-center.scroll-up) {\n  display: flex;\n  max-width: max-content;\n}\n\n\n:host(.scroll-down) .button-native{\n  display: flex;\n}\n\n:host(.position-center.scroll-down) .button-native{\n  display: flex;\n}\n\n:host(.position-center) .button-native{\n  display: flex;\n}\n\n:host(.scroll-down) {\n  display: flex;\n  max-width: max-content;\n}\n\n\n\n:host ::slotted(road-icon) {\n  margin-right: 0.5rem;\n  color: var(--road-on-button-secondary);\n}\n\n\n:host(:hover) {\n  background-color: var(--road-button-fab-variant);\n}\n\n:host(.focus-visible) {\n  outline: 0;\n}\n\n/**\n * Native button\n */\n\n.button-native {\n  position: relative;\n  z-index: 1;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  outline: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n\n/* DISABLED\n -------------------- */\n\n:host([aria-disabled]) {\n  pointer-events: none;\n  opacity: 0.16;\n}\n\n.button-native:disabled {\n  cursor: not-allowed;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, h, Listen } from '@stencil/core';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the button.\n * @slot start - Left content of the button text, usually for icon.\n *\n * @part native - The native HTML button or anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-button-floating',\n  styleUrl: 'button-floating.css',\n  shadow: true,\n})\nexport class Button {\n\n  @Element() el!: HTMLRoadButtonElement;\n\n  /**\n  * position.\n  */\n     @Prop({ reflect: true }) position?: 'left' | 'center' | 'right' = 'right';\n\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n\n  @Listen('scroll', {target: 'window'})\n\n    onScroll() {\n      const positionScroll = window.scrollY;\n      if (positionScroll < 300 ) {\n          this.el.classList.add(\"scroll-down\");\n          this.el.classList.remove(\"scroll-up\");\n      }\n      if (positionScroll > 300 ) {\n          this.el.classList.add(\"scroll-up\");\n          this.el.classList.remove(\"scroll-down\");\n      }\n    }\n\n\n\n\n  private onClick = (ev: Event) => {\n    if (this.el.shadowRoot && (this.el as any).attachShadow) {\n      // this button wants to specifically submit a form\n      // climb up the dom to see if we're in a <form>\n      // and if so, then use JS to submit it\n      const form = this.el.closest('form');\n      if (form) {\n        ev.preventDefault();\n\n        const fakeButton = document.createElement('button');\n        fakeButton.style.display = 'none';\n        form.appendChild(fakeButton);\n        fakeButton.click();\n        fakeButton.remove();\n      }\n    }\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const TagType = this.href === undefined ? 'button' : 'a' as any;\n    const positionClass = this.position !== undefined ? `position-${this.position}` : '';\n\n    return (\n      <Host\n        onClick={this.onClick}\n        class={`${positionClass}`}\n      >\n        <TagType\n          class=\"button-native\"\n          part=\"native\"\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <slot name=\"start\"/>\n          <slot/>\n        </TagType>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-button-floating.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,wtDAAwtD;;MCgBruD,MAAM;;;;;;;IA6DT,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,IAAK,IAAI,CAAC,EAAU,CAAC,YAAY,EAAE;;;;QAIvD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACrC,IAAI,IAAI,EAAE;UACR,EAAE,CAAC,cAAc,EAAE,CAAC;UAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;UACpD,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;UAClC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;UAC7B,UAAU,CAAC,KAAK,EAAE,CAAC;UACnB,UAAU,CAAC,MAAM,EAAE,CAAC;SACrB;OACF;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;oBAhFmE,OAAO;;;;;EAuC1E,QAAQ;IACN,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC;IACtC,IAAI,cAAc,GAAG,GAAG,EAAG;MACvB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;MACrC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;KACzC;IACD,IAAI,cAAc,GAAG,GAAG,EAAG;MACvB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;MACnC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;KAC3C;GACF;EAiCH,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAU,CAAC;IAChE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IAErF,QACEA,QAACC,UAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,GAAG,aAAa,EAAE,IAEzBD,QAAC,OAAO,IACN,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnBA,kBAAM,IAAI,EAAC,OAAO,GAAE,EACpBA,qBAAO,CACC,CACL,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/button-floating/button-floating.css?tag=road-button-floating&encapsulation=shadow","src/components/button-floating/button-floating.tsx"],"sourcesContent":["/*\n * Button floating\n *\n *\n * Index\n * - Button\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  position: fixed;\n  right: 1rem;\n  bottom: 1rem;\n  z-index: 2;\n  box-sizing: border-box;\n  display: block;\n  align-items: center;\n  max-width: 3.5rem;\n  height: 3.5rem;\n  padding: 0.6rem 0.75rem 0.75rem;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  line-height: 1.375;\n  color: var(--road-on-button-fab);\n  text-decoration: none;\n  white-space: nowrap;\n  background: var(--road-button-fab);\n  border: 1px solid transparent;\n  border-radius: 2rem;\n  box-shadow: var(--road-elevation-average);\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n:host(.position-left) {\n  right: auto;\n  left: 1rem;\n}\n\n:host(.position-center) {\n  right: 0;\n  left: 0;\n  margin: 0 auto;\n}\n\n:host(.scroll-up) {\n  display: block;\n  max-width: 3.5rem;\n}\n\n:host(.position-center.scroll-up) {\n  display: flex;\n  max-width: max-content;\n}\n\n\n:host(.scroll-down) .button-native{\n  display: flex;\n}\n\n:host(.position-center.scroll-down) .button-native{\n  display: flex;\n}\n\n:host(.position-center) .button-native{\n  display: flex;\n}\n\n:host(.scroll-down) {\n  display: flex;\n  max-width: max-content;\n}\n\n\n\n:host ::slotted(road-icon) {\n  margin-right: 0.5rem;\n  color: var(--road-on-button-secondary);\n}\n\n\n:host(:hover) {\n  background-color: var(--road-button-fab-variant);\n}\n\n/**\n * Native button\n */\n\n.button-native {\n  position: relative;\n  z-index: 1;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  outline: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n\n/* DISABLED\n -------------------- */\n\n:host([aria-disabled]) {\n  pointer-events: none;\n  opacity: 0.16;\n}\n\n.button-native:disabled {\n  cursor: not-allowed;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, h, Listen } from '@stencil/core';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the button.\n * @slot start - Left content of the button text, usually for icon.\n *\n * @part native - The native HTML button or anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-button-floating',\n  styleUrl: 'button-floating.css',\n  shadow: true,\n})\nexport class Button {\n\n  @Element() el!: HTMLRoadButtonElement;\n\n  /**\n  * position.\n  */\n     @Prop({ reflect: true }) position?: 'left' | 'center' | 'right' = 'right';\n\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n\n  @Listen('scroll', {target: 'window'})\n\n    onScroll() {\n      const positionScroll = window.scrollY;\n      if (positionScroll < 300 ) {\n          this.el.classList.add(\"scroll-down\");\n          this.el.classList.remove(\"scroll-up\");\n      }\n      if (positionScroll > 300 ) {\n          this.el.classList.add(\"scroll-up\");\n          this.el.classList.remove(\"scroll-down\");\n      }\n    }\n\n\n\n\n  private onClick = (ev: Event) => {\n    if (this.el.shadowRoot && (this.el as any).attachShadow) {\n      // this button wants to specifically submit a form\n      // climb up the dom to see if we're in a <form>\n      // and if so, then use JS to submit it\n      const form = this.el.closest('form');\n      if (form) {\n        ev.preventDefault();\n\n        const fakeButton = document.createElement('button');\n        fakeButton.style.display = 'none';\n        form.appendChild(fakeButton);\n        fakeButton.click();\n        fakeButton.remove();\n      }\n    }\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const TagType = this.href === undefined ? 'button' : 'a' as any;\n    const positionClass = this.position !== undefined ? `position-${this.position}` : '';\n\n    return (\n      <Host\n        onClick={this.onClick}\n        class={`${positionClass}`}\n      >\n        <TagType\n          class=\"button-native\"\n          part=\"native\"\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <slot name=\"start\"/>\n          <slot/>\n        </TagType>\n      </Host>\n    );\n  }\n}"],"version":3}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-12592729.js');
 
-const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
+const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.card-native:focus{border:1px solid var(--road-primary)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
 
 const Card = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"road-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,w+BAAw+B;;MCa3+B,IAAI;;;;;IAoEP,YAAO,GAAG;;MAChB,IAAG,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;SACxD,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;SACxD,CAAC,CAAC;OACJ;KACF,CAAC;qBAxEoD,MAAM;kBAKlC,KAAK;;gBAUe,QAAQ;;;;;;EA0C9C,WAAW;IACjB,QAAQ,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;GACjD;EAeO,UAAU;IAChB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAErC,IAAI,CAAC,SAAS,EAAE;MAGd,OAAO;QACLA,qBAAO;OACR,CAAC;KAEH;IACD,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACtB,MAAM,OAAO,GAAG,SAAS,IAAI,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAG,IAAI,KAAY,CAAC;IACjF,MAAM,KAAK,GAAG,CAAC,OAAO,KAAK,QAAQ;QAC/B,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;QACnB;QACA,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,CAAC;IAEJ,QAEEA,QAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,KAErBA,qBAAO,CACC,EACV;GACH;EAED,MAAM;IACJ,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,kBAAkB,SAAS,EAAE,GAAG,EAAE,CAAC;IAC3E,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,GAAG,cAAc,EAAE,IAC/B,IAAI,CAAC,UAAU,EAAE,CACX,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/*\n * Card\n *\n * Index\n * - Card\n * - Native\n * - Icon\n */\n\n/* CARD\n -------------------- */\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: block;\n  margin-bottom: var(--margin-bottom, 1rem);\n  background: var(--road-surface);\n  border: 1px solid var(--road-outline-weak);\n  border-radius: var(--road-spacing-02);\n}\n\n:host(.card-elevation-none) {\n  box-shadow: none;\n}\n\n:host(.card-elevation-lowest) {\n  box-shadow: var(--road-elevation-lowest);\n}\n\n:host(.card-elevation-average) {\n  box-shadow: var(--road-elevation-average);\n}\n\n/* NATIVE\n -------------------- */\n\n.card-native {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 100%;\n  padding: var(--road-spacing-06);\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: center;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  background: var(--road-surface);\n  border: 0;\n  border-radius: 0.25rem;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* @media (min-width: 768px) {\n\n  .card-native {\n    padding: var(--road-spacing-06);\n  }\n} */\n\na,\nbutton {\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-drag: none;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  text-align: center;\n}\n","import { Component, h, Prop, Event, EventEmitter, Element, Host } from '@stencil/core';\n\n/**\n * @slot  - Content of the card.\n *\n * @part native - The native HTML button, anchor, or div element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-card',\n  styleUrl: 'card.css',\n  shadow: true,\n})\nexport class Card {\n\n  @Element() el!: HTMLRoadCardElement;\n\n    /**\n   * The elevation.\n   */\n    @Prop() elevation?: 'none' | 'lowest' | 'average' = 'none';\n\n  /**\n   * If `true`, a button tag will be rendered and the card will be tappable.\n   */\n  @Prop() button: boolean = false;\n\n  /**\n   * value of the card\n   */\n  @Prop() value?: string;\n\n  /**\n   * The type of the button. Only used when an `onclick` or `button` property is present.\n   */\n  @Prop() type: 'submit' | 'reset' | 'button' = 'button';\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download?: string;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the card is clicked and send the `value` of the card\n   */\n  @Event() roadcardclick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadCardClick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n\n  private isClickable(): boolean {\n    return (this.href !== undefined || this.button);\n  }\n\n  private onClick = () => {\n    if(this.value !== undefined) {\n      this.roadcardclick.emit({\n        value: this.value,\n        label: this.el.querySelector('road-label')?.textContent,\n      });\n      this.roadCardClick.emit({\n        value: this.value,\n        label: this.el.querySelector('road-label')?.textContent,\n      });\n    }\n  };\n\n  private renderCard() {\n    const clickable = this.isClickable();\n\n    if (!clickable) {\n     \n      \n      return [\n        <slot/>\n      ];\n      \n    }\n    const { href } = this;\n    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;\n    const attrs = (TagType === 'button')\n      ? { type: this.type }\n      : {\n        download: this.download,\n        href: this.href,\n        rel: this.rel,\n        target: this.target,\n      };\n\n    return (\n      \n      <TagType\n        {...attrs}\n        class=\"card-native\"\n        part=\"native\"\n        onClick={this.onClick}\n      >\n        <slot/>\n      </TagType>\n    );\n  }\n\n  render() {\n    const { elevation } = this;\n    const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n    return (\n      <Host class={`${elevationClass}`}>\n      {this.renderCard()}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,giCAAgiC;;MCaniC,IAAI;;;;;IAoEP,YAAO,GAAG;;MAChB,IAAG,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;SACxD,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;SACxD,CAAC,CAAC;OACJ;KACF,CAAC;qBAxEoD,MAAM;kBAKlC,KAAK;;gBAUe,QAAQ;;;;;;EA0C9C,WAAW;IACjB,QAAQ,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;GACjD;EAeO,UAAU;IAChB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAErC,IAAI,CAAC,SAAS,EAAE;MAGd,OAAO;QACLA,qBAAO;OACR,CAAC;KAEH;IACD,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACtB,MAAM,OAAO,GAAG,SAAS,IAAI,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAG,IAAI,KAAY,CAAC;IACjF,MAAM,KAAK,GAAG,CAAC,OAAO,KAAK,QAAQ;QAC/B,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;QACnB;QACA,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,CAAC;IAEJ,QAEEA,QAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,KAErBA,qBAAO,CACC,EACV;GACH;EAED,MAAM;IACJ,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,kBAAkB,SAAS,EAAE,GAAG,EAAE,CAAC;IAC3E,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,GAAG,cAAc,EAAE,IAC/B,IAAI,CAAC,UAAU,EAAE,CACX,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/*\n * Card\n *\n * Index\n * - Card\n * - Native\n * - Icon\n */\n\n/* CARD\n -------------------- */\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: block;\n  margin-bottom: var(--margin-bottom, 1rem);\n  background: var(--road-surface);\n  border: 1px solid var(--road-outline-weak);\n  border-radius: var(--road-spacing-02);\n}\n\n:host(.card-elevation-none) {\n  box-shadow: none;\n}\n\n:host(.card-elevation-lowest) {\n  box-shadow: var(--road-elevation-lowest);\n}\n\n:host(.card-elevation-average) {\n  box-shadow: var(--road-elevation-average);\n}\n\n/* NATIVE\n -------------------- */\n\n.card-native {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 100%;\n  padding: var(--road-spacing-06);\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: center;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  background: var(--road-surface);\n  border: 0;\n  border-radius: 0.25rem;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.card-native:focus{\n  border: 1px solid var(--road-primary);\n}\n\n/* @media (min-width: 768px) {\n\n  .card-native {\n    padding: var(--road-spacing-06);\n  }\n} */\n\na,\nbutton {\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-drag: none;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  text-align: center;\n}\n","import { Component, h, Prop, Event, EventEmitter, Element, Host } from '@stencil/core';\n\n/**\n * @slot  - Content of the card.\n *\n * @part native - The native HTML button, anchor, or div element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-card',\n  styleUrl: 'card.css',\n  shadow: true,\n})\nexport class Card {\n\n  @Element() el!: HTMLRoadCardElement;\n\n    /**\n   * The elevation.\n   */\n    @Prop() elevation?: 'none' | 'lowest' | 'average' = 'none';\n\n  /**\n   * If `true`, a button tag will be rendered and the card will be tappable.\n   */\n  @Prop() button: boolean = false;\n\n  /**\n   * value of the card\n   */\n  @Prop() value?: string;\n\n  /**\n   * The type of the button. Only used when an `onclick` or `button` property is present.\n   */\n  @Prop() type: 'submit' | 'reset' | 'button' = 'button';\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download?: string;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the card is clicked and send the `value` of the card\n   */\n  @Event() roadcardclick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadCardClick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n\n  private isClickable(): boolean {\n    return (this.href !== undefined || this.button);\n  }\n\n  private onClick = () => {\n    if(this.value !== undefined) {\n      this.roadcardclick.emit({\n        value: this.value,\n        label: this.el.querySelector('road-label')?.textContent,\n      });\n      this.roadCardClick.emit({\n        value: this.value,\n        label: this.el.querySelector('road-label')?.textContent,\n      });\n    }\n  };\n\n  private renderCard() {\n    const clickable = this.isClickable();\n\n    if (!clickable) {\n     \n      \n      return [\n        <slot/>\n      ];\n      \n    }\n    const { href } = this;\n    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;\n    const attrs = (TagType === 'button')\n      ? { type: this.type }\n      : {\n        download: this.download,\n        href: this.href,\n        rel: this.rel,\n        target: this.target,\n      };\n\n    return (\n      \n      <TagType\n        {...attrs}\n        class=\"card-native\"\n        part=\"native\"\n        onClick={this.onClick}\n      >\n        <slot/>\n      </TagType>\n    );\n  }\n\n  render() {\n    const { elevation } = this;\n    const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n    return (\n      <Host class={`${elevationClass}`}>\n      {this.renderCard()}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -6436,7 +6436,7 @@ function Autoplay({
   });
 }
 
-const carouselCss = "@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;backface-visibility:hidden}.swiper-creative .swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;backface-visibility:hidden;overflow:hidden}:host(.swiper-container){display:block;-webkit-user-select:none;user-select:none;position:relative;z-index:1;padding:0;margin-right:auto;margin-left:auto;overflow:hidden;list-style:none}:host(.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet),:host(.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet){margin:0 0.125rem}:host(.swiper-container-horizontal>.swiper-pagination-bullets){bottom:0.5rem}.swiper-pagination-bullets{right:0;display:inline-table;width:auto!important;padding:0 0.75rem;margin:0 auto;vertical-align:middle;background-color:var(--road-overlay-inverse);border-radius:40px}.swiper-pagination-bullet{width:1.5rem;height:0.25rem;vertical-align:middle;background:var(--road-overlay);border-radius:0}.swiper-pagination-bullet-active{background:var(--road-on-surface)}:host(.swiper-pagination-progressbar){background:var(--road-grey-70)}:host(.swiper-pagination-progressbar) .swiper-pagination-progressbar-fill{background:var(--road-grey-10)}:host(.swiper-scrollbar){background:var(--road-grey-70)}:host(.swiper-scrollbar-drag){background:var(--road-grey-10)}.swiper-button-prev,.swiper-button-next{display:none}@media (min-width: 768px){.swiper-button-prev,.swiper-button-next{display:flex;width:3rem;height:3rem;background:var(--road-overlay);border:1px solid var(--road-overlay-inverse);border-radius:3rem}.swiper-button-prev road-icon,.swiper-button-next road-icon{color:var(--road-on-overlay)}}.swiper-button-prev::after,.swiper-button-next::after{display:none}@media (hover: hover){.swiper-button-prev:hover,.swiper-button-next:hover{background:var(--road-surface)}.swiper-button-prev:hover road-icon,.swiper-button-next:hover road-icon{color:var(--road-on-surface)}}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:1rem}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:1rem}@media (min-width: 768px){.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:1.5rem}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:1.5rem}}";
+const carouselCss = "@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;backface-visibility:hidden}.swiper-creative .swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;backface-visibility:hidden;overflow:hidden}:host(.swiper-container){display:block;-webkit-user-select:none;user-select:none;position:relative;z-index:1;padding:0;margin-right:auto;margin-left:auto;overflow:hidden;list-style:none}:host(.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet),:host(.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet){margin:0 0.125rem}:host(.swiper-container-horizontal>.swiper-pagination-bullets){bottom:0.5rem}.swiper-pagination-bullets{right:0;display:inline-table;width:auto!important;padding:0 0.75rem;margin:0 auto;vertical-align:middle;background-color:var(--road-overlay-inverse);border-radius:40px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.swiper-pagination-bullet{width:1.5rem;height:0.25rem;vertical-align:middle;background:var(--road-overlay);border-radius:0;opacity:1}.swiper-pagination-bullet-active{background:var(--road-primary)}:host(.swiper-pagination-progressbar){background:var(--road-grey-70)}:host(.swiper-pagination-progressbar) .swiper-pagination-progressbar-fill{background:var(--road-grey-10)}:host(.swiper-scrollbar){background:var(--road-grey-70)}:host(.swiper-scrollbar-drag){background:var(--road-grey-10)}.swiper-button-prev,.swiper-button-next{display:none}@media (min-width: 768px){.swiper-button-prev,.swiper-button-next{display:flex;width:3rem;height:3rem;background:var(--road-overlay);border:1px solid var(--road-overlay-inverse);border-radius:3rem}.swiper-button-prev road-icon,.swiper-button-next road-icon{color:var(--road-on-overlay)}}.swiper-button-prev::after,.swiper-button-next::after{display:none}@media (hover: hover){.swiper-button-prev:hover,.swiper-button-next:hover{background:var(--road-surface)}.swiper-button-prev:hover road-icon,.swiper-button-next:hover road-icon{color:var(--road-on-surface)}}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:1rem}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:1rem}@media (min-width: 768px){.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:1.5rem}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:1.5rem}}";
 
 Swiper.use([Pagination, Scrollbar, Autoplay, Keyboard, Zoom]);
 const Carousel = class {
@@ -6475,7 +6475,6 @@ const Carousel = class {
     }
   }
   connectedCallback() {
-    // tslint:disable-next-line: strict-type-predicates
     if (typeof MutationObserver !== 'undefined') {
       const mut = this.mutationO = new MutationObserver(() => {
         if (this.swiperReady) {
@@ -6493,19 +6492,13 @@ const Carousel = class {
       this.didInit = true;
       this.initSwiper();
     }
+    this.setupKeyboardNavigation();
   }
   disconnectedCallback() {
     if (this.mutationO) {
       this.mutationO.disconnect();
       this.mutationO = undefined;
     }
-    /**
-     * We need to synchronously destroy
-     * swiper otherwise it is possible
-     * that it will be left in a
-     * destroyed state if connectedCallback
-     * is called multiple times
-     */
     const swiper = this.syncSwiper;
     if (swiper !== undefined) {
       swiper.destroy(true, true);
@@ -6517,10 +6510,6 @@ const Carousel = class {
     }
     this.didInit = false;
   }
-  /**
-   * Update the underlying slider implementation. Call this if you've added or removed
-   * child slides.
-   */
   async update() {
     const [swiper] = await Promise.all([
       this.getSwiper(),
@@ -6528,150 +6517,80 @@ const Carousel = class {
     ]);
     swiper.update();
   }
-  /**
-   * Force swiper to update its height (when autoHeight is enabled) for the duration
-   * equal to 'speed' parameter.
-   *
-   * @param speed The transition duration (in ms).
-   */
   async updateAutoHeight(speed) {
     const swiper = await this.getSwiper();
     swiper.updateAutoHeight(speed);
   }
-  /**
-   * Transition to the specified slide.
-   *
-   * @param index The index of the slide to transition to.
-   * @param speed The transition duration (in ms).
-   * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events.
-   */
   async slideTo(index, speed, runCallbacks) {
     const swiper = await this.getSwiper();
     swiper.slideTo(index, speed, runCallbacks);
   }
-  /**
-   * Transition to the next slide.
-   *
-   * @param speed The transition duration (in ms).
-   * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events.
-   */
   async slideNext(speed, runCallbacks) {
     const swiper = await this.getSwiper();
     swiper.slideNext(speed, runCallbacks);
   }
-  /**
-   * Transition to the previous slide.
-   *
-   * @param speed The transition duration (in ms).
-   * @param runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events.
-   */
   async slidePrev(speed, runCallbacks) {
     const swiper = await this.getSwiper();
     swiper.slidePrev(speed, runCallbacks);
   }
-  /**
-   * Get the index of the active slide.
-   */
   async getActiveIndex() {
     const swiper = await this.getSwiper();
     return swiper.activeIndex;
   }
-  /**
-   * Get the index of the previous slide.
-   */
   async getPreviousIndex() {
     const swiper = await this.getSwiper();
     return swiper.previousIndex;
   }
-  /**
-   * Get the total number of slides.
-   */
   async length() {
     const swiper = await this.getSwiper();
     return swiper.slides.length;
   }
-  /**
-   * Get whether or not the current slide is the last slide.
-   */
   async isEnd() {
     const swiper = await this.getSwiper();
     return swiper.isEnd;
   }
-  /**
-   * Get whether or not the current slide is the first slide.
-   */
   async isBeginning() {
     const swiper = await this.getSwiper();
     return swiper.isBeginning;
   }
-  /**
-   * Start auto play.
-   */
   async startAutoplay() {
     const swiper = await this.getSwiper();
     if (swiper.autoplay) {
       swiper.autoplay.start();
     }
   }
-  /**
-   * Stop auto play.
-   */
   async stopAutoplay() {
     const swiper = await this.getSwiper();
     if (swiper.autoplay) {
       swiper.autoplay.stop();
     }
   }
-  /**
-   * Lock or unlock the ability to slide to the next slide.
-   *
-   * @param lock If `true`, disable swiping to the next slide.
-   */
   async lockSwipeToNext(lock) {
     const swiper = await this.getSwiper();
     swiper.allowSlideNext = !lock;
   }
-  /**
-   * Lock or unlock the ability to slide to the previous slide.
-   *
-   * @param lock If `true`, disable swiping to the previous slide.
-   */
   async lockSwipeToPrev(lock) {
     const swiper = await this.getSwiper();
     swiper.allowSlidePrev = !lock;
   }
-  /**
-   * Lock or unlock the ability to slide to the next or previous slide.
-   *
-   * @param lock If `true`, disable swiping to the next and previous slide.
-   */
   async lockSwipes(lock) {
     const swiper = await this.getSwiper();
     swiper.allowSlideNext = !lock;
     swiper.allowSlidePrev = !lock;
     swiper.allowTouchMove = !lock;
   }
-  /**
-   * Get the Swiper instance.
-   * Use this to access the full Swiper API.
-   * See https://idangero.us/swiper/api/ for all API options.
-   */
   async getSwiper() {
     return this.swiper;
   }
   async initSwiper() {
     const finalOptions = this.normalizeOptions();
-    // init swiper core
     await waitForSlides(this.el);
-    // @ts-ignore
     const swiper = new Swiper(this.el, finalOptions);
     this.swiperReady = true;
     this.syncSwiper = swiper;
     this.readySwiper(swiper);
   }
   normalizeOptions() {
-    // Base options, can be changed
-    // TODO Add interface SwiperOptions
     const swiperOptions = {
       effect: undefined,
       direction: 'horizontal',
@@ -6764,8 +6683,6 @@ const Carousel = class {
         hideOnClick: false,
       };
     }
-    // Keep the event options separate, we dont want users
-    // overwriting these
     const eventOptions = {
       on: {
         init: () => {
@@ -6773,46 +6690,41 @@ const Carousel = class {
             this.roadslidesdidload.emit();
           }, 20);
         },
-        // @ts-ignore
-        slideChangeTransitionStart: this.roadslidewillchange.emit,
-        // @ts-ignore
-        slideChangeTransitionEnd: this.roadslidedidchange.emit,
-        // @ts-ignore
-        slideNextTransitionStart: this.roadslidenextstart.emit,
-        // @ts-ignore
-        slidePrevTransitionStart: this.roadslideprevstart.emit,
-        // @ts-ignore
-        slideNextTransitionEnd: this.roadslidenextend.emit,
-        // @ts-ignore
-        slidePrevTransitionEnd: this.roadslideprevend.emit,
-        // @ts-ignore
-        transitionStart: this.roadslidetransitionstart.emit,
-        // @ts-ignore
-        transitionEnd: this.roadslidetransitionend.emit,
-        // @ts-ignore
-        sliderMove: this.roadslidedrag.emit,
-        // @ts-ignore
-        reachBeginning: this.roadslidereachstart.emit,
-        // @ts-ignore
-        reachEnd: this.roadslidereachend.emit,
-        // @ts-ignore
-        touchStart: this.roadslidetouchstart.emit,
-        // @ts-ignore
-        touchEnd: this.roadslidetouchend.emit,
-        // @ts-ignore
-        tap: this.roadslidetap.emit,
-        // @ts-ignore
-        doubleTap: this.roadslidedoubletap.emit,
+        slideChangeTransitionStart: () => this.roadslidewillchange.emit(),
+        slideChangeTransitionEnd: () => this.roadslidedidchange.emit(),
+        slideNextTransitionStart: () => this.roadslidenextstart.emit(),
+        slidePrevTransitionStart: () => this.roadslideprevstart.emit(),
+        slideNextTransitionEnd: () => this.roadslidenextend.emit(),
+        slidePrevTransitionEnd: () => this.roadslideprevend.emit(),
+        transitionStart: () => this.roadslidetransitionstart.emit(),
+        transitionEnd: () => this.roadslidetransitionend.emit(),
+        sliderMove: () => this.roadslidedrag.emit(),
+        reachBeginning: () => this.roadslidereachstart.emit(),
+        reachEnd: () => this.roadslidereachend.emit(),
+        touchStart: () => this.roadslidetouchstart.emit(),
+        touchEnd: () => this.roadslidetouchend.emit(),
+        tap: () => this.roadslidetap.emit(),
+        doubleTap: () => this.roadslidedoubletap.emit(),
       },
     };
     const customEvents = (!!this.options && !!this.options.on) ? this.options.on : {};
-    // merge "on" event listeners, while giving our event listeners priority
     const mergedEventOptions = { on: Object.assign(Object.assign({}, customEvents), eventOptions.on) };
-    // Merge the base, user options, and events together then pas to swiper
     return Object.assign(Object.assign(Object.assign({}, swiperOptions), this.options), mergedEventOptions);
   }
+  setupKeyboardNavigation() {
+    this.el.addEventListener('keydown', (event) => {
+      switch (event.key) {
+        case 'ArrowLeft':
+          this.slidePrev();
+          break;
+        case 'ArrowRight':
+          this.slideNext();
+          break;
+      }
+    });
+  }
   render() {
-    return (index$1.h(index$1.Host, { class: "swiper-container" }, index$1.h("div", { class: "swiper-wrapper" }, index$1.h("slot", null)), this.pager && index$1.h("div", { class: "swiper-pagination", ref: el => this.paginationEl = el }), this.arrows && (index$1.h("div", { class: "swiper-button-prev", onClick: () => this.el.slidePrev() }, index$1.h("road-icon", { icon: index$2.navigationChevron, rotate: "180" }))), this.arrows && (index$1.h("div", { class: "swiper-button-next", onClick: () => this.el.slideNext() }, index$1.h("road-icon", { icon: index$2.navigationChevron })))));
+    return (index$1.h(index$1.Host, { class: "swiper-container", tabindex: "0" }, index$1.h("div", { class: "swiper-wrapper" }, index$1.h("slot", null)), this.pager && index$1.h("div", { class: "swiper-pagination", ref: el => this.paginationEl = el }), this.arrows && (index$1.h("div", { role: "button", class: "swiper-button-prev", tabindex: "0", "aria-label": "Previous slide", onClick: () => this.slidePrev() }, index$1.h("road-icon", { icon: index$2.navigationChevron, rotate: "180" }))), this.arrows && (index$1.h("div", { role: "button", class: "swiper-button-next", tabindex: "0", "aria-label": "Next slide", onClick: () => this.slideNext() }, index$1.h("road-icon", { icon: index$2.navigationChevron })))));
   }
   get el() { return index$1.getElement(this); }
   static get watchers() { return {