npm - @roadtrip/components - Versions diffs - 3.17.0 → 3.18.0 - Mend

@roadtrip/components 3.17.0 → 3.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (325) hide show

package/dist/esm/road-banner.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-52302079.js';
-import { a as navigationClose } from './index-891decf5.js';
+import { a as navigationClose } from './index-7a0158a4.js';
 const bannerCss = ":host{display:none}:host(.banner-open){position:relative;display:block;padding:1rem 2rem;font-size:var(--road-body-medium);text-align:center;background-color:var(--road-leading-banner)}.banner-close{position:absolute;top:0;right:0;padding:0.25rem;color:currentColor;cursor:pointer;background:none;border:0}.banner-close road-icon{color:currentColor}.banner-open-label{font-weight:700}.banner-open-link{display:block;margin:0.25rem 0.75rem;font-size:var(--road-font-size-14);color:currentColor}@media (min-width: 992px){.banner-close{right:0.25rem;bottom:0}.banner-open-link{display:initial}}";
@@ -29,7 +29,7 @@ const Banner = class {
   }
   render() {
     const bannerIsOpenClass = this.isOpen ? 'banner-open' : '';
-    return (h(Host, { class: bannerIsOpenClass }, h("div", null, h("span", { class: "banner-open-label" }, this.label), this.link && h("a", { href: this.url, class: "banner-open-link" }, this.link), h("button", { type: "button", class: "banner-close", onClick: this.onClick }, h("road-icon", { icon: navigationClose, size: "md" })))));
+    return (h(Host, { class: bannerIsOpenClass }, h("div", null, h("span", { class: "banner-open-label" }, this.label), this.link && h("a", { href: this.url, class: "banner-open-link" }, this.link), h("button", { type: "button", class: "banner-close", onClick: this.onClick, "aria-label": "closed" }, h("road-icon", { icon: navigationClose, size: "md" })))));
   }
 };
 Banner.style = bannerCss;

package/dist/esm/road-banner.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-banner.entry.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,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,iBAAiB,IAC5B,eACE,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EAClD,IAAI,CAAC,IAAI,IAAI,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAK,EACzE,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,~~IAC9D~~,iBAAW,IAAI,EAAE,eAAe,EAAE,IAAI,EAAC,IAAI,GAAa,CACjD,CACL,CACD,EACP;GACH;;;;;;","names":[],"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}
1	+ {"file":"road-banner.entry.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,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,iBAAiB,IAC5B,eACE,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EAClD,IAAI,CAAC,IAAI,IAAI,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAK,EACzE,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,gBAAa,QAAQ,IACnF,iBAAW,IAAI,EAAE,eAAe,EAAE,IAAI,EAAC,IAAI,GAAa,CACjD,CACL,CACD,EACP;GACH;;;;;;","names":[],"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/esm/road-button-floating.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-52302079.js';
 import './polyfill-dc7c89b2.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/esm/road-button-floating.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-button-floating.entry.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,QACE,EAAC,IAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,GAAG,aAAa,EAAE,IAEzB,EAAC,OAAO,IACN,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,YAAM,IAAI,EAAC,OAAO,GAAE,EACpB,eAAO,CACC,CACL,EACP;GACH;;;;;;;","names":[],"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}
1	+ {"file":"road-button-floating.entry.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,QACE,EAAC,IAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,GAAG,aAAa,EAAE,IAEzB,EAAC,OAAO,IACN,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,YAAM,IAAI,EAAC,OAAO,GAAE,EACpB,eAAO,CACC,CACL,EACP;GACH;;;;;;;","names":[],"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/esm/road-card.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-52302079.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/esm/road-card.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-card.entry.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;QACL,eAAO;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,QAEE,EAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,KAErB,eAAO,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,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,cAAc,EAAE,IAC/B,IAAI,CAAC,UAAU,EAAE,CACX,EACP;GACH;;;;;;;","names":[],"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}
1	+ {"file":"road-card.entry.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;QACL,eAAO;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,QAEE,EAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,KAErB,eAAO,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,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,cAAc,EAAE,IAC/B,IAAI,CAAC,UAAU,EAAE,CACX,EACP;GACH;;;;;;;","names":[],"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/esm/road-carousel.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-52302079.js';
-import { n as navigationChevron } from './index-891decf5.js';
+import { n as navigationChevron } from './index-7a0158a4.js';
 /**
  * SSR Window 4.0.2
@@ -6432,7 +6432,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 {
@@ -6471,7 +6471,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) {
@@ -6489,19 +6488,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);
@@ -6513,10 +6506,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(),
@@ -6524,150 +6513,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',
@@ -6760,8 +6679,6 @@ const Carousel = class {
         hideOnClick: false,
       };
     }
-    // Keep the event options separate, we dont want users
-    // overwriting these
     const eventOptions = {
       on: {
         init: () => {
@@ -6769,46 +6686,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 (h(Host, { class: "swiper-container" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), this.pager && h("div", { class: "swiper-pagination", ref: el => this.paginationEl = el }), this.arrows && (h("div", { class: "swiper-button-prev", onClick: () => this.el.slidePrev() }, h("road-icon", { icon: navigationChevron, rotate: "180" }))), this.arrows && (h("div", { class: "swiper-button-next", onClick: () => this.el.slideNext() }, h("road-icon", { icon: navigationChevron })))));
+    return (h(Host, { class: "swiper-container", tabindex: "0" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), this.pager && h("div", { class: "swiper-pagination", ref: el => this.paginationEl = el }), this.arrows && (h("div", { role: "button", class: "swiper-button-prev", tabindex: "0", "aria-label": "Previous slide", onClick: () => this.slidePrev() }, h("road-icon", { icon: navigationChevron, rotate: "180" }))), this.arrows && (h("div", { role: "button", class: "swiper-button-next", tabindex: "0", "aria-label": "Next slide", onClick: () => this.slideNext() }, h("road-icon", { icon: navigationChevron })))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {