@roadtrip/components 3.29.0 → 3.30.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.
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-12592729.js');
6
6
 
7
- const tooltipCss = ":host{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}:host(:hover){cursor:pointer}:host([trigger=\"hover\"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger=\"hover\"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}:host([contentalign=\"left\"]) .tooltip{text-align:left}.tooltip.tooltip-text-left::after{text-align:left}.tooltip-open{opacity:1}:host([data-tooltip-position=\"top\"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position=\"top\"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position=\"top-left\"]) .tooltip{left:0%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-left\"]) .tooltip-open{transform:translateY(-100%)}:host([data-tooltip-position=\"top-right\"]) .tooltip{left:50%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-right\"]) .tooltip-open{left:100%;transform:translateY(-100%)}:host([data-tooltip-position=\"left\"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position=\"left\"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position=\"bottom\"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position=\"bottom\"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"right\"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position=\"right\"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}";
7
+ const tooltipCss = ":host{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}:host(:hover){cursor:pointer}:host([trigger=\"hover\"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger=\"hover\"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}:host([contentalign=\"left\"]) .tooltip{text-align:left}.tooltip.tooltip-text-left::after{text-align:left}.tooltip-open{visibility:visible;opacity:1}:host([data-tooltip-position=\"top\"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position=\"top\"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position=\"top-left\"]) .tooltip{left:0%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-left\"]) .tooltip-open{transform:translateY(-100%)}:host([data-tooltip-position=\"top-right\"]) .tooltip{left:50%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-right\"]) .tooltip-open{left:100%;transform:translateY(-100%)}:host([data-tooltip-position=\"left\"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position=\"left\"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position=\"bottom\"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position=\"bottom\"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"right\"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position=\"right\"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}";
8
8
 
9
9
  const Tooltip = class {
10
10
  constructor(hostRef) {
@@ -24,13 +24,20 @@ const Tooltip = class {
24
24
  this.close();
25
25
  }
26
26
  };
27
+ this.isKeyboardNavigation = false;
28
+ this.handleKeyDown = () => {
29
+ this.isKeyboardNavigation = true;
30
+ };
31
+ this.handleMouseDown = () => {
32
+ this.isKeyboardNavigation = false;
33
+ };
27
34
  this.onFocus = () => {
28
- if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
35
+ if (this.isKeyboardNavigation && this.hasTrigger('hover')) {
29
36
  this.open();
30
37
  }
31
38
  };
32
39
  this.onBlur = () => {
33
- if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
40
+ if (this.isKeyboardNavigation && this.hasTrigger('hover')) {
34
41
  this.close();
35
42
  }
36
43
  };
@@ -53,6 +60,19 @@ const Tooltip = class {
53
60
  async close() {
54
61
  this.isOpen = false;
55
62
  }
63
+ // Écoute les événements pour détecter le mode d'interaction
64
+ componentDidMount() {
65
+ document.addEventListener('keydown', this.handleKeyDown);
66
+ document.addEventListener('mousedown', this.handleMouseDown);
67
+ }
68
+ componentDidLoad() {
69
+ document.addEventListener('keydown', this.handleKeyDown);
70
+ document.addEventListener('mousedown', this.handleMouseDown);
71
+ }
72
+ componentWillUnmount() {
73
+ document.removeEventListener('keydown', this.handleKeyDown);
74
+ document.removeEventListener('mousedown', this.handleMouseDown);
75
+ }
56
76
  hasTrigger(triggerType) {
57
77
  const triggers = this.trigger.split(' ');
58
78
  return triggers.includes(triggerType);
@@ -1 +1 @@
1
- {"file":"road-tooltip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,qgFAAqgF;;MCa3gF,OAAO;;;IA8DV,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;KACF,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAEM,eAAU,GAAG;MACnB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;qBAnF0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBAaP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;;;;EAMjC,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;EAgCO,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAC,GAAG;;+BACW,IAAI,CAAC,QAAQ,IAEpCD,sCAAwB,IAAI,CAAC,SAAS,GAAI,EAE1CA,iBACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,cAAc,EAAE,IAAI,CAAC,MAAM;OAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,IAE3C,IAAI,CAAC,OAAO,EACbA,kBAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,EACP;GACH;;;AAGH,IAAI,UAAU,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * Tooltip\n *\n * Index\n * - Tooltip\n * - Position\n */\n\n/**\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n */\n\n/* TOOLTIP\n -------------------- */\n\n:host {\n --max-width: 85vw;\n --z-index: 1;\n --width: max-content;\n\n position: relative;\n display: inline-block;\n}\n\n:host(:hover) {\n cursor: pointer;\n}\n\n\n:host([trigger=\"hover\"]) .tooltip {\n display: none;\n}\n\n@media (min-width: 1200px) {\n\n :host([trigger=\"hover\"]) .tooltip {\n display: block;\n }\n}\n\n.tooltip {\n position: absolute;\n top: -0.5rem;\n left: 50%;\n z-index: 1;\n width: var(--width);\n min-width: 100%;\n max-width: var(--max-width);\n padding: 0.5rem;\n font-family: var(--road-font);\n font-size: var(--road-body-small);\n color: var(--road-on-surface);\n text-align: center;\n pointer-events: none;\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: 0.25rem;\n box-shadow: var(--road-elevation-low);\n opacity: 0;\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n text-align: left;\n}\n\n.tooltip-open {\n opacity: 1;\n}\n\n/* POSITION\n -------------------- */\n\n/**\n * Top\n */\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n left: 50%;\n transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n}\n\n/**\n * Top Left\n */\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n left: 0%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n transform: translateY(-100%);\n}\n\n/**\n * Top Right\n */\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n left: 50%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n left: 100%;\n transform: translateY(-100%);\n}\n\n/**\n * Left\n */\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n top: 50%;\n left: 0%;\n margin-right: 0.5rem;\n transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n transform: translateX(-103%) translateY(-55%);\n}\n\n/**\n * Bottom\n */\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n top: 100%;\n left: 50%;\n margin-top: 0.5rem;\n transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n transform: translateX(-50%) translateY(-6%);\n}\n\n/**\n * Bottom Left\n */\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n top: 100%;\n left: 0;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Bottom Right\n */\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n top: 100%;\n left: 100%;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Right\n */\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n top: 50%;\n left: 100%;\n margin-left: 0.5rem;\n transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /**\n * The id of tooltip\n */\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /**\n * The tooltip's content.\n */\n @Prop() content = '';\n\n /**\n * The position of the tooltip.\n */\n @Prop() position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'left' = 'top';\n\n /**\n * The content align of the tooltip.\n */\n @Prop() contentAlign:\n | 'center'\n | 'left' = 'center';\n\n /**\n * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n */\n @Prop({ mutable: true }) isOpen = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover';\n\n /**\n * Open the tooltip.\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private onFocus = () => {\n if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onBlur = () => {\n if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n tabindex=\"0\" // Makes the element focusable\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"],"version":3}
1
+ {"file":"road-tooltip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,whFAAwhF;;MCa9hF,OAAO;;;IA8DV,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;KACF,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAEM,eAAU,GAAG;MACnB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;IAEI,yBAAoB,GAAG,KAAK,CAAC;IAmB7B,kBAAa,GAAG;MACtB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;KAClC,CAAC;IAEM,oBAAe,GAAG;MACxB,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;KACnC,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACzD,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAGQ,WAAM,GAAG;MACf,IAAI,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACzD,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;qBA/G0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBAaP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;;;;EAMjC,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;;EAuBH,iBAAiB;IACf,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;GAC9D;EAED,gBAAgB;IACd,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;GAC9D;EAED,oBAAoB;IAClB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC5D,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;GACjE;EAwBS,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAC,GAAG;;+BACW,IAAI,CAAC,QAAQ,IAEpCD,sCAAwB,IAAI,CAAC,SAAS,GAAI,EAE1CA,iBACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,cAAc,EAAE,IAAI,CAAC,MAAM;OAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,IAE3C,IAAI,CAAC,OAAO,EACbA,kBAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,EACP;GACH;;;AAGH,IAAI,UAAU,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * Tooltip\n *\n * Index\n * - Tooltip\n * - Position\n */\n\n/**\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n */\n\n/* TOOLTIP\n -------------------- */\n\n:host {\n --max-width: 85vw;\n --z-index: 1;\n --width: max-content;\n\n position: relative;\n display: inline-block;\n}\n\n:host(:hover) {\n cursor: pointer;\n}\n\n\n:host([trigger=\"hover\"]) .tooltip {\n display: none;\n}\n\n@media (min-width: 1200px) {\n\n :host([trigger=\"hover\"]) .tooltip {\n display: block;\n }\n}\n\n.tooltip {\n position: absolute;\n top: -0.5rem;\n left: 50%;\n z-index: 1;\n width: var(--width);\n min-width: 100%;\n max-width: var(--max-width);\n padding: 0.5rem;\n font-family: var(--road-font);\n font-size: var(--road-body-small);\n color: var(--road-on-surface);\n text-align: center;\n pointer-events: none;\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: 0.25rem;\n box-shadow: var(--road-elevation-low);\n opacity: 0;\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n text-align: left;\n}\n\n.tooltip-open {\n visibility: visible;\n opacity: 1;\n}\n\n\n/* POSITION\n -------------------- */\n\n/**\n * Top\n */\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n left: 50%;\n transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n}\n\n/**\n * Top Left\n */\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n left: 0%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n transform: translateY(-100%);\n}\n\n/**\n * Top Right\n */\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n left: 50%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n left: 100%;\n transform: translateY(-100%);\n}\n\n/**\n * Left\n */\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n top: 50%;\n left: 0%;\n margin-right: 0.5rem;\n transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n transform: translateX(-103%) translateY(-55%);\n}\n\n/**\n * Bottom\n */\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n top: 100%;\n left: 50%;\n margin-top: 0.5rem;\n transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n transform: translateX(-50%) translateY(-6%);\n}\n\n/**\n * Bottom Left\n */\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n top: 100%;\n left: 0;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Bottom Right\n */\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n top: 100%;\n left: 100%;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Right\n */\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n top: 50%;\n left: 100%;\n margin-left: 0.5rem;\n transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /**\n * The id of tooltip\n */\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /**\n * The tooltip's content.\n */\n @Prop() content = '';\n\n /**\n * The position of the tooltip.\n */\n @Prop() position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'left' = 'top';\n\n /**\n * The content align of the tooltip.\n */\n @Prop() contentAlign:\n | 'center'\n | 'left' = 'center';\n\n /**\n * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n */\n @Prop({ mutable: true }) isOpen = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover';\n\n /**\n * Open the tooltip.\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\nprivate isKeyboardNavigation = false;\n\n// Écoute les événements pour détecter le mode d'interaction\ncomponentDidMount() {\n document.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentDidLoad() {\n document.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentWillUnmount() {\n document.removeEventListener('keydown', this.handleKeyDown);\n document.removeEventListener('mousedown', this.handleMouseDown);\n}\n\n\nprivate handleKeyDown = () => {\n this.isKeyboardNavigation = true;\n};\n\nprivate handleMouseDown = () => {\n this.isKeyboardNavigation = false;\n};\n\nprivate onFocus = () => {\n if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n this.open();\n }\n};\n\n\n private onBlur = () => {\n if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n tabindex=\"0\" // Makes the element focusable\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"],"version":3}
@@ -72,9 +72,11 @@
72
72
  }
73
73
 
74
74
  .tooltip-open {
75
+ visibility: visible;
75
76
  opacity: 1;
76
77
  }
77
78
 
79
+
78
80
  /* POSITION
79
81
  -------------------- */
80
82
 
@@ -21,13 +21,20 @@ export class Tooltip {
21
21
  this.close();
22
22
  }
23
23
  };
24
+ this.isKeyboardNavigation = false;
25
+ this.handleKeyDown = () => {
26
+ this.isKeyboardNavigation = true;
27
+ };
28
+ this.handleMouseDown = () => {
29
+ this.isKeyboardNavigation = false;
30
+ };
24
31
  this.onFocus = () => {
25
- if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
32
+ if (this.isKeyboardNavigation && this.hasTrigger('hover')) {
26
33
  this.open();
27
34
  }
28
35
  };
29
36
  this.onBlur = () => {
30
- if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
37
+ if (this.isKeyboardNavigation && this.hasTrigger('hover')) {
31
38
  this.close();
32
39
  }
33
40
  };
@@ -50,6 +57,19 @@ export class Tooltip {
50
57
  async close() {
51
58
  this.isOpen = false;
52
59
  }
60
+ // Écoute les événements pour détecter le mode d'interaction
61
+ componentDidMount() {
62
+ document.addEventListener('keydown', this.handleKeyDown);
63
+ document.addEventListener('mousedown', this.handleMouseDown);
64
+ }
65
+ componentDidLoad() {
66
+ document.addEventListener('keydown', this.handleKeyDown);
67
+ document.addEventListener('mousedown', this.handleMouseDown);
68
+ }
69
+ componentWillUnmount() {
70
+ document.removeEventListener('keydown', this.handleKeyDown);
71
+ document.removeEventListener('mousedown', this.handleMouseDown);
72
+ }
53
73
  hasTrigger(triggerType) {
54
74
  const triggers = this.trigger.split(' ');
55
75
  return triggers.includes(triggerType);
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE1E;;;;GAIG;AAOH,MAAM,OAAO,OAAO;;IA8DV,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;IACH,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;IACH,CAAC,CAAC;qBAnF0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBAaP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;EAEjC;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;EACrB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;EACtB,CAAC;EAgCO,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;EACxC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAC,GAAG,CAAE,8BAA8B;iCACrB,IAAI,CAAC,QAAQ;MAEpC,gCAAwB,IAAI,CAAC,SAAS,GAAI;MAE1C,WACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,cAAc,EAAE,IAAI,CAAC,MAAM;SAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QAE3C,IAAI,CAAC,OAAO;QACb,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,UAAU,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /**\n * The id of tooltip\n */\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /**\n * The tooltip's content.\n */\n @Prop() content = '';\n\n /**\n * The position of the tooltip.\n */\n @Prop() position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'left' = 'top';\n\n /**\n * The content align of the tooltip.\n */\n @Prop() contentAlign:\n | 'center'\n | 'left' = 'center';\n\n /**\n * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n */\n @Prop({ mutable: true }) isOpen = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover';\n\n /**\n * Open the tooltip.\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private onFocus = () => {\n if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onBlur = () => {\n if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n tabindex=\"0\" // Makes the element focusable\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"]}
1
+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE1E;;;;GAIG;AAOH,MAAM,OAAO,OAAO;;IA8DV,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;IACH,CAAC,CAAC;IAEI,yBAAoB,GAAG,KAAK,CAAC;IAmB7B,kBAAa,GAAG,GAAG,EAAE;MAC3B,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;IACnC,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;IACpC,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACzD,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAGQ,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACzD,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;IACH,CAAC,CAAC;qBA/G0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBAaP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;EAEjC;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;EACrB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;EACtB,CAAC;EAsBH,4DAA4D;EAC5D,iBAAiB;IACf,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;EAC/D,CAAC;EAED,gBAAgB;IACd,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;EAC/D,CAAC;EAED,oBAAoB;IAClB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC5D,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;EAClE,CAAC;EAwBS,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;EACxC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAC,GAAG,CAAE,8BAA8B;iCACrB,IAAI,CAAC,QAAQ;MAEpC,gCAAwB,IAAI,CAAC,SAAS,GAAI;MAE1C,WACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,cAAc,EAAE,IAAI,CAAC,MAAM;SAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QAE3C,IAAI,CAAC,OAAO;QACb,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,UAAU,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /**\n * The id of tooltip\n */\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /**\n * The tooltip's content.\n */\n @Prop() content = '';\n\n /**\n * The position of the tooltip.\n */\n @Prop() position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'left' = 'top';\n\n /**\n * The content align of the tooltip.\n */\n @Prop() contentAlign:\n | 'center'\n | 'left' = 'center';\n\n /**\n * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n */\n @Prop({ mutable: true }) isOpen = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover';\n\n /**\n * Open the tooltip.\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\nprivate isKeyboardNavigation = false;\n\n// Écoute les événements pour détecter le mode d'interaction\ncomponentDidMount() {\n document.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentDidLoad() {\n document.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentWillUnmount() {\n document.removeEventListener('keydown', this.handleKeyDown);\n document.removeEventListener('mousedown', this.handleMouseDown);\n}\n\n\nprivate handleKeyDown = () => {\n this.isKeyboardNavigation = true;\n};\n\nprivate handleMouseDown = () => {\n this.isKeyboardNavigation = false;\n};\n\nprivate onFocus = () => {\n if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n this.open();\n }\n};\n\n\n private onBlur = () => {\n if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n tabindex=\"0\" // Makes the element focusable\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"]}
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h, H as Host, a as getElement } from './index-52302079.js';
2
2
 
3
- const tooltipCss = ":host{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}:host(:hover){cursor:pointer}:host([trigger=\"hover\"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger=\"hover\"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}:host([contentalign=\"left\"]) .tooltip{text-align:left}.tooltip.tooltip-text-left::after{text-align:left}.tooltip-open{opacity:1}:host([data-tooltip-position=\"top\"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position=\"top\"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position=\"top-left\"]) .tooltip{left:0%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-left\"]) .tooltip-open{transform:translateY(-100%)}:host([data-tooltip-position=\"top-right\"]) .tooltip{left:50%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-right\"]) .tooltip-open{left:100%;transform:translateY(-100%)}:host([data-tooltip-position=\"left\"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position=\"left\"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position=\"bottom\"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position=\"bottom\"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"right\"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position=\"right\"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}";
3
+ const tooltipCss = ":host{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}:host(:hover){cursor:pointer}:host([trigger=\"hover\"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger=\"hover\"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}:host([contentalign=\"left\"]) .tooltip{text-align:left}.tooltip.tooltip-text-left::after{text-align:left}.tooltip-open{visibility:visible;opacity:1}:host([data-tooltip-position=\"top\"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position=\"top\"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position=\"top-left\"]) .tooltip{left:0%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-left\"]) .tooltip-open{transform:translateY(-100%)}:host([data-tooltip-position=\"top-right\"]) .tooltip{left:50%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-right\"]) .tooltip-open{left:100%;transform:translateY(-100%)}:host([data-tooltip-position=\"left\"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position=\"left\"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position=\"bottom\"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position=\"bottom\"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"right\"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position=\"right\"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}";
4
4
 
5
5
  const Tooltip = class {
6
6
  constructor(hostRef) {
@@ -20,13 +20,20 @@ const Tooltip = class {
20
20
  this.close();
21
21
  }
22
22
  };
23
+ this.isKeyboardNavigation = false;
24
+ this.handleKeyDown = () => {
25
+ this.isKeyboardNavigation = true;
26
+ };
27
+ this.handleMouseDown = () => {
28
+ this.isKeyboardNavigation = false;
29
+ };
23
30
  this.onFocus = () => {
24
- if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
31
+ if (this.isKeyboardNavigation && this.hasTrigger('hover')) {
25
32
  this.open();
26
33
  }
27
34
  };
28
35
  this.onBlur = () => {
29
- if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
36
+ if (this.isKeyboardNavigation && this.hasTrigger('hover')) {
30
37
  this.close();
31
38
  }
32
39
  };
@@ -49,6 +56,19 @@ const Tooltip = class {
49
56
  async close() {
50
57
  this.isOpen = false;
51
58
  }
59
+ // Écoute les événements pour détecter le mode d'interaction
60
+ componentDidMount() {
61
+ document.addEventListener('keydown', this.handleKeyDown);
62
+ document.addEventListener('mousedown', this.handleMouseDown);
63
+ }
64
+ componentDidLoad() {
65
+ document.addEventListener('keydown', this.handleKeyDown);
66
+ document.addEventListener('mousedown', this.handleMouseDown);
67
+ }
68
+ componentWillUnmount() {
69
+ document.removeEventListener('keydown', this.handleKeyDown);
70
+ document.removeEventListener('mousedown', this.handleMouseDown);
71
+ }
52
72
  hasTrigger(triggerType) {
53
73
  const triggers = this.trigger.split(' ');
54
74
  return triggers.includes(triggerType);
@@ -1 +1 @@
1
- {"file":"road-tooltip.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,qgFAAqgF;;MCa3gF,OAAO;;;IA8DV,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;KACF,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAEM,eAAU,GAAG;MACnB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;qBAnF0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBAaP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;;;;EAMjC,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;EAgCO,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAC,GAAG;;+BACW,IAAI,CAAC,QAAQ,IAEpC,gCAAwB,IAAI,CAAC,SAAS,GAAI,EAE1C,WACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,cAAc,EAAE,IAAI,CAAC,MAAM;OAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,IAE3C,IAAI,CAAC,OAAO,EACb,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,EACP;GACH;;;AAGH,IAAI,UAAU,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * Tooltip\n *\n * Index\n * - Tooltip\n * - Position\n */\n\n/**\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n */\n\n/* TOOLTIP\n -------------------- */\n\n:host {\n --max-width: 85vw;\n --z-index: 1;\n --width: max-content;\n\n position: relative;\n display: inline-block;\n}\n\n:host(:hover) {\n cursor: pointer;\n}\n\n\n:host([trigger=\"hover\"]) .tooltip {\n display: none;\n}\n\n@media (min-width: 1200px) {\n\n :host([trigger=\"hover\"]) .tooltip {\n display: block;\n }\n}\n\n.tooltip {\n position: absolute;\n top: -0.5rem;\n left: 50%;\n z-index: 1;\n width: var(--width);\n min-width: 100%;\n max-width: var(--max-width);\n padding: 0.5rem;\n font-family: var(--road-font);\n font-size: var(--road-body-small);\n color: var(--road-on-surface);\n text-align: center;\n pointer-events: none;\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: 0.25rem;\n box-shadow: var(--road-elevation-low);\n opacity: 0;\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n text-align: left;\n}\n\n.tooltip-open {\n opacity: 1;\n}\n\n/* POSITION\n -------------------- */\n\n/**\n * Top\n */\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n left: 50%;\n transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n}\n\n/**\n * Top Left\n */\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n left: 0%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n transform: translateY(-100%);\n}\n\n/**\n * Top Right\n */\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n left: 50%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n left: 100%;\n transform: translateY(-100%);\n}\n\n/**\n * Left\n */\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n top: 50%;\n left: 0%;\n margin-right: 0.5rem;\n transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n transform: translateX(-103%) translateY(-55%);\n}\n\n/**\n * Bottom\n */\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n top: 100%;\n left: 50%;\n margin-top: 0.5rem;\n transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n transform: translateX(-50%) translateY(-6%);\n}\n\n/**\n * Bottom Left\n */\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n top: 100%;\n left: 0;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Bottom Right\n */\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n top: 100%;\n left: 100%;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Right\n */\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n top: 50%;\n left: 100%;\n margin-left: 0.5rem;\n transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /**\n * The id of tooltip\n */\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /**\n * The tooltip's content.\n */\n @Prop() content = '';\n\n /**\n * The position of the tooltip.\n */\n @Prop() position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'left' = 'top';\n\n /**\n * The content align of the tooltip.\n */\n @Prop() contentAlign:\n | 'center'\n | 'left' = 'center';\n\n /**\n * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n */\n @Prop({ mutable: true }) isOpen = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover';\n\n /**\n * Open the tooltip.\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private onFocus = () => {\n if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onBlur = () => {\n if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n tabindex=\"0\" // Makes the element focusable\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"],"version":3}
1
+ {"file":"road-tooltip.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,whFAAwhF;;MCa9hF,OAAO;;;IA8DV,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;KACF,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAEM,eAAU,GAAG;MACnB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;IAEI,yBAAoB,GAAG,KAAK,CAAC;IAmB7B,kBAAa,GAAG;MACtB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;KAClC,CAAC;IAEM,oBAAe,GAAG;MACxB,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;KACnC,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACzD,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAGQ,WAAM,GAAG;MACf,IAAI,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACzD,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;qBA/G0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBAaP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;;;;EAMjC,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;;EAuBH,iBAAiB;IACf,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;GAC9D;EAED,gBAAgB;IACd,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;GAC9D;EAED,oBAAoB;IAClB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC5D,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;GACjE;EAwBS,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAC,GAAG;;+BACW,IAAI,CAAC,QAAQ,IAEpC,gCAAwB,IAAI,CAAC,SAAS,GAAI,EAE1C,WACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,cAAc,EAAE,IAAI,CAAC,MAAM;OAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,IAE3C,IAAI,CAAC,OAAO,EACb,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,EACP;GACH;;;AAGH,IAAI,UAAU,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * Tooltip\n *\n * Index\n * - Tooltip\n * - Position\n */\n\n/**\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n */\n\n/* TOOLTIP\n -------------------- */\n\n:host {\n --max-width: 85vw;\n --z-index: 1;\n --width: max-content;\n\n position: relative;\n display: inline-block;\n}\n\n:host(:hover) {\n cursor: pointer;\n}\n\n\n:host([trigger=\"hover\"]) .tooltip {\n display: none;\n}\n\n@media (min-width: 1200px) {\n\n :host([trigger=\"hover\"]) .tooltip {\n display: block;\n }\n}\n\n.tooltip {\n position: absolute;\n top: -0.5rem;\n left: 50%;\n z-index: 1;\n width: var(--width);\n min-width: 100%;\n max-width: var(--max-width);\n padding: 0.5rem;\n font-family: var(--road-font);\n font-size: var(--road-body-small);\n color: var(--road-on-surface);\n text-align: center;\n pointer-events: none;\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: 0.25rem;\n box-shadow: var(--road-elevation-low);\n opacity: 0;\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n text-align: left;\n}\n\n.tooltip-open {\n visibility: visible;\n opacity: 1;\n}\n\n\n/* POSITION\n -------------------- */\n\n/**\n * Top\n */\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n left: 50%;\n transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n}\n\n/**\n * Top Left\n */\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n left: 0%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n transform: translateY(-100%);\n}\n\n/**\n * Top Right\n */\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n left: 50%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n left: 100%;\n transform: translateY(-100%);\n}\n\n/**\n * Left\n */\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n top: 50%;\n left: 0%;\n margin-right: 0.5rem;\n transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n transform: translateX(-103%) translateY(-55%);\n}\n\n/**\n * Bottom\n */\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n top: 100%;\n left: 50%;\n margin-top: 0.5rem;\n transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n transform: translateX(-50%) translateY(-6%);\n}\n\n/**\n * Bottom Left\n */\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n top: 100%;\n left: 0;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Bottom Right\n */\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n top: 100%;\n left: 100%;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Right\n */\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n top: 50%;\n left: 100%;\n margin-left: 0.5rem;\n transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /**\n * The id of tooltip\n */\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /**\n * The tooltip's content.\n */\n @Prop() content = '';\n\n /**\n * The position of the tooltip.\n */\n @Prop() position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'left' = 'top';\n\n /**\n * The content align of the tooltip.\n */\n @Prop() contentAlign:\n | 'center'\n | 'left' = 'center';\n\n /**\n * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n */\n @Prop({ mutable: true }) isOpen = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover';\n\n /**\n * Open the tooltip.\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\nprivate isKeyboardNavigation = false;\n\n// Écoute les événements pour détecter le mode d'interaction\ncomponentDidMount() {\n document.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentDidLoad() {\n document.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentWillUnmount() {\n document.removeEventListener('keydown', this.handleKeyDown);\n document.removeEventListener('mousedown', this.handleMouseDown);\n}\n\n\nprivate handleKeyDown = () => {\n this.isKeyboardNavigation = true;\n};\n\nprivate handleMouseDown = () => {\n this.isKeyboardNavigation = false;\n};\n\nprivate onFocus = () => {\n if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n this.open();\n }\n};\n\n\n private onBlur = () => {\n if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n tabindex=\"0\" // Makes the element focusable\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"],"version":3}
@@ -0,0 +1,2 @@
1
+ import{r as t,h as o,H as i,a as s}from"./p-f3d586b3.js";const a=':host{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}:host(:hover){cursor:pointer}:host([trigger="hover"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger="hover"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}:host([contentalign="left"]) .tooltip{text-align:left}.tooltip.tooltip-text-left::after{text-align:left}.tooltip-open{visibility:visible;opacity:1}:host([data-tooltip-position="top"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position="top"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position="top-left"]) .tooltip{left:0%;transform:translateY(-70%)}:host([data-tooltip-position="top-left"]) .tooltip-open{transform:translateY(-100%)}:host([data-tooltip-position="top-right"]) .tooltip{left:50%;transform:translateY(-70%)}:host([data-tooltip-position="top-right"]) .tooltip-open{left:100%;transform:translateY(-100%)}:host([data-tooltip-position="left"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position="left"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position="bottom"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position="bottom"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position="bottom-left"]) .tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position="bottom-left"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position="bottom-right"]) .tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position="bottom-right"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position="right"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position="right"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}';const e=class{constructor(o){t(this,o);this.onClick=()=>{if(this.hasTrigger("click")){this.isOpen?this.close():this.open()}};this.onMouseOver=()=>{if(this.hasTrigger("hover")){this.open()}};this.onMouseOut=()=>{if(this.hasTrigger("hover")){this.close()}};this.isKeyboardNavigation=false;this.handleKeyDown=()=>{this.isKeyboardNavigation=true};this.handleMouseDown=()=>{this.isKeyboardNavigation=false};this.onFocus=()=>{if(this.isKeyboardNavigation&&this.hasTrigger("hover")){this.open()}};this.onBlur=()=>{if(this.isKeyboardNavigation&&this.hasTrigger("hover")){this.close()}};this.tooltipId=`road-tooltip-${++n}`;this.content="";this.position="top";this.contentAlign="center";this.isOpen=false;this.trigger="hover"}async open(){this.isOpen=true}async close(){this.isOpen=false}componentDidMount(){document.addEventListener("keydown",this.handleKeyDown);document.addEventListener("mousedown",this.handleMouseDown)}componentDidLoad(){document.addEventListener("keydown",this.handleKeyDown);document.addEventListener("mousedown",this.handleMouseDown)}componentWillUnmount(){document.removeEventListener("keydown",this.handleKeyDown);document.removeEventListener("mousedown",this.handleMouseDown)}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}render(){return o(i,{onMouseOver:this.onMouseOver,onMouseOut:this.onMouseOut,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur,tabindex:"0","data-tooltip-position":this.position},o("slot",{"aria-describedby":this.tooltipId}),o("div",{part:"tooltip",id:this.tooltipId,class:{tooltip:true,"tooltip-open":this.isOpen},role:"tooltip","aria-hidden":!this.isOpen?"true":"false"},this.content,o("slot",{name:"tooltip-content"})))}get el(){return s(this)}};let n=0;e.style=a;export{e as road_tooltip};
2
+ //# sourceMappingURL=p-36895fa7.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["tooltipCss","Tooltip","this","onClick","hasTrigger","isOpen","close","open","onMouseOver","onMouseOut","isKeyboardNavigation","handleKeyDown","handleMouseDown","onFocus","onBlur","tooltipIds","componentDidMount","document","addEventListener","componentDidLoad","componentWillUnmount","removeEventListener","triggerType","triggers","trigger","split","includes","render","h","Host","tabindex","position","tooltipId","part","id","class","tooltip","role","content","name"],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * Tooltip\n *\n * Index\n * - Tooltip\n * - Position\n */\n\n/**\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n */\n\n/* TOOLTIP\n -------------------- */\n\n:host {\n --max-width: 85vw;\n --z-index: 1;\n --width: max-content;\n\n position: relative;\n display: inline-block;\n}\n\n:host(:hover) {\n cursor: pointer;\n}\n\n\n:host([trigger=\"hover\"]) .tooltip {\n display: none;\n}\n\n@media (min-width: 1200px) {\n\n :host([trigger=\"hover\"]) .tooltip {\n display: block;\n }\n}\n\n.tooltip {\n position: absolute;\n top: -0.5rem;\n left: 50%;\n z-index: 1;\n width: var(--width);\n min-width: 100%;\n max-width: var(--max-width);\n padding: 0.5rem;\n font-family: var(--road-font);\n font-size: var(--road-body-small);\n color: var(--road-on-surface);\n text-align: center;\n pointer-events: none;\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: 0.25rem;\n box-shadow: var(--road-elevation-low);\n opacity: 0;\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n text-align: left;\n}\n\n.tooltip-open {\n visibility: visible;\n opacity: 1;\n}\n\n\n/* POSITION\n -------------------- */\n\n/**\n * Top\n */\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n left: 50%;\n transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n}\n\n/**\n * Top Left\n */\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n left: 0%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n transform: translateY(-100%);\n}\n\n/**\n * Top Right\n */\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n left: 50%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n left: 100%;\n transform: translateY(-100%);\n}\n\n/**\n * Left\n */\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n top: 50%;\n left: 0%;\n margin-right: 0.5rem;\n transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n transform: translateX(-103%) translateY(-55%);\n}\n\n/**\n * Bottom\n */\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n top: 100%;\n left: 50%;\n margin-top: 0.5rem;\n transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n transform: translateX(-50%) translateY(-6%);\n}\n\n/**\n * Bottom Left\n */\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n top: 100%;\n left: 0;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Bottom Right\n */\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n top: 100%;\n left: 100%;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Right\n */\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n top: 50%;\n left: 100%;\n margin-left: 0.5rem;\n transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /**\n * The id of tooltip\n */\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /**\n * The tooltip's content.\n */\n @Prop() content = '';\n\n /**\n * The position of the tooltip.\n */\n @Prop() position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'left' = 'top';\n\n /**\n * The content align of the tooltip.\n */\n @Prop() contentAlign:\n | 'center'\n | 'left' = 'center';\n\n /**\n * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n */\n @Prop({ mutable: true }) isOpen = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover';\n\n /**\n * Open the tooltip.\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\nprivate isKeyboardNavigation = false;\n\n// Écoute les événements pour détecter le mode d'interaction\ncomponentDidMount() {\n document.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentDidLoad() {\n document.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentWillUnmount() {\n document.removeEventListener('keydown', this.handleKeyDown);\n document.removeEventListener('mousedown', this.handleMouseDown);\n}\n\n\nprivate handleKeyDown = () => {\n this.isKeyboardNavigation = true;\n};\n\nprivate handleMouseDown = () => {\n this.isKeyboardNavigation = false;\n};\n\nprivate onFocus = () => {\n if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n this.open();\n }\n};\n\n\n private onBlur = () => {\n if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n tabindex=\"0\" // Makes the element focusable\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAa,m/E,MCaNC,EAAO,M,yBA8DVC,KAAAC,QAAU,KAChB,GAAID,KAAKE,WAAW,SAAU,CAC5BF,KAAKG,OAASH,KAAKI,QAAUJ,KAAKK,M,GAI9BL,KAAAM,YAAc,KACpB,GAAIN,KAAKE,WAAW,SAAU,CAC5BF,KAAKK,M,GAIDL,KAAAO,WAAa,KACnB,GAAIP,KAAKE,WAAW,SAAU,CAC5BF,KAAKI,O,GAIHJ,KAAAQ,qBAAuB,MAmBvBR,KAAAS,cAAgB,KACtBT,KAAKQ,qBAAuB,IAAI,EAG1BR,KAAAU,gBAAkB,KACxBV,KAAKQ,qBAAuB,KAAK,EAG3BR,KAAAW,QAAU,KAChB,GAAIX,KAAKQ,sBAAwBR,KAAKE,WAAW,SAAU,CACzDF,KAAKK,M,GAKCL,KAAAY,OAAS,KACf,GAAIZ,KAAKQ,sBAAwBR,KAAKE,WAAW,SAAU,CACzDF,KAAKI,O,kBA7GmB,kBAAkBS,I,aAK5B,G,cAaL,M,kBAOA,S,YAKqB,M,aAOR,O,CAM1B,UAAMR,GACJL,KAAKG,OAAS,I,CAOhB,WAAMC,GACJJ,KAAKG,OAAS,K,CAwBlB,iBAAAW,GACEC,SAASC,iBAAiB,UAAWhB,KAAKS,eAC1CM,SAASC,iBAAiB,YAAahB,KAAKU,gB,CAG9C,gBAAAO,GACEF,SAASC,iBAAiB,UAAWhB,KAAKS,eAC1CM,SAASC,iBAAiB,YAAahB,KAAKU,gB,CAG9C,oBAAAQ,GACEH,SAASI,oBAAoB,UAAWnB,KAAKS,eAC7CM,SAASI,oBAAoB,YAAanB,KAAKU,gB,CAyBvC,UAAAR,CAAWkB,GACjB,MAAMC,EAAWrB,KAAKsB,QAAQC,MAAM,KACpC,OAAOF,EAASG,SAASJ,E,CAG3B,MAAAK,GACE,OACEC,EAACC,EAAI,CACHrB,YAAaN,KAAKM,YAClBC,WAAYP,KAAKO,WACjBN,QAASD,KAAKC,QACdU,QAASX,KAAKW,QACdC,OAAQZ,KAAKY,OACbgB,SAAS,I,wBACc5B,KAAK6B,UAE5BH,EAAA,2BAAwB1B,KAAK8B,YAE7BJ,EAAA,OACEK,KAAK,UACLC,GAAIhC,KAAK8B,UACTG,MAAO,CACLC,QAAS,KACT,eAAgBlC,KAAKG,QAEvBgC,KAAK,UAAS,eACAnC,KAAKG,OAAS,OAAS,SAEpCH,KAAKoC,QACNV,EAAA,QAAMW,KAAK,qB,2BAOrB,IAAIxB,EAAa,E"}
@@ -1 +1 @@
1
- body{--road-brand-primary:#002b6f;--road-primary-10:#001638;--road-primary-20:#002b6f;--road-primary-30:#004293;--road-primary-40:#005ab8;--road-primary-50:#0071dc;--road-primary-60:#338de3;--road-primary-70:#66aaea;--road-primary-80:#99c6f1;--road-primary-90:#cce3f8;--road-brand-secondary:#fcb731;--road-secondary-10:#9c3305;--road-secondary-20:#b14512;--road-secondary-30:#c4621a;--road-secondary-40:#d67e21;--road-secondary-50:#e99b29;--road-secondary-60:#fcb731;--road-secondary-70:#fdca68;--road-secondary-80:#fdde9f;--road-secondary-90:#fef1d6;--road-grey-0:#000000;--road-grey-5:#11151d;--road-grey-10:#22293a;--road-grey-15:#2c3345;--road-grey-20:#353c50;--road-grey-30:#51586c;--road-grey-40:#6d7488;--road-grey-50:#898fa0;--road-grey-60:#a4a9b6;--road-grey-70:#c1c4cd;--road-grey-80:#dddfe4;--road-grey-85:#e9eaed;--road-grey-90:#f4f4f6;--road-grey-95:#fafafb;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-primary-20);--road-on-header-surface:var(--road-grey-100-new);--road-header-surface-disabled:rgba(255, 255, 255, 0.32);--road-on-header-surface-disabled:rgba(255, 255, 255, 0.4);--road-header-outline:var(--road-primary-20);--road-header-icon:var(--road-grey-100-new);--road-header-icon-variant:var(--road-secondary-60);--road-header-badge:var(--road-secondary-60);--road-on-header-badge:var(--road-primary-10);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-5);--road-on-surface-weak:var(--road-grey-30);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-50);--road-primary-variant:var(--road-primary-20);--road-on-primary:var(--road-grey-100-new);--road-secondary:var(--road-secondary-60);--road-secondary-variant:var(--road-secondary-40);--road-on-secondary:var(--road-grey-10);--road-outline:var(--road-grey-60);--road-outline-weak:var(--road-grey-80);--road-outline-variant:var(--road-primary-30);--road-icon:var(--road-grey-10);--road-icon-variant:var(--road-secondary-50);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-secondary-60);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-10);--road-blur-light:blur(0.25rem);--road-blur-medium:blur(0.5rem);--road-button-primary:var(--road-primary-40);--road-button-primary-variant:var(--road-primary-30);--road-on-button-primary:var(--road-grey-100-new);--road-button-secondary:var(--road-secondary-60);--road-button-secondary-variant:var(--road-secondary-40);--road-on-button-secondary:var(--road-grey-10);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-90);--road-button-tertiary-outline:var(--road-primary-40);--road-on-button-tertiary:var(--road-primary-50);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-90);--road-on-button-ghost:var(--road-primary-40);--road-button-destructive-primary:var(--road-danger-50);--road-button-destructive-primary-variant:var(--road-danger-40);--road-button-destructive-outline:var(--road-danger-50);--road-button-destructive-secondary:var(--road-grey-100-new);--road-button-destructive-secondary-variant:var(--road-danger-90);--road-on-button-destructive-secondary:var(--road-danger-50);--road-on-button-destructive-primary:var(--road-grey-100-new);--road-button-fab:var(--road-secondary-60);--road-on-button-fab:var(--road-grey-10);--road-button-fab-variant:var(--road-secondary-40);--road-link-primary:var(--road-primary-40);--road-link-secondary:var(--road-grey-10);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-primary-50);--road-input-surface-variant:var(--road-primary-30);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-primary-30);--road-decorative-surface:var(--road-secondary-50);--road-decorative-surface-variant:var(--road-primary-50);--road-elevation-lowest:0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px 1px rgba(0, 0, 0, 0.08);--road-elevation-low:0 1px 2px rgba(41, 44, 51, 0.16), 0 3px 5px 1px rgba(41, 44, 51, 0.12);--road-elevation-average:0 3px 3px rgba(0, 0, 0, 0.16), 0 6px 8px 1px rgba(41, 44, 51, 0.12);--road-elevation-hight:0 3px 3px rgba(0, 0, 0, 0.2), 0 10px 13px 2px rgba(41, 44, 51, 0.12);--road-elevation-highest:0 4px 4px rgba(0, 0, 0, 0.24), 0 12px 16px 6px rgba(41, 44, 51, 0.16);--road-blue-klein-5:#000411;--road-blue-klein-10:#000923;--road-blue-klein-15:#000d34;--road-blue-klein-20:#001146;--road-blue-klein-30:#001a68;--road-blue-klein-40:#00228b;--road-blue-klein-50:#002bae;--road-blue-klein-60:#3355be;--road-blue-klein-70:#6680ce;--road-blue-klein-80:#99aadf;--road-blue-klein-85:#b3bfe7;--road-blue-klein-90:#ccd5ef;--road-blue-klein-95:#e6eaf7;--road-violet-electric-5:#0e0019;--road-violet-electric-10:#1c0032;--road-violet-electric-15:#2a004a;--road-violet-electric-20:#380063;--road-violet-electric-30:#550095;--road-violet-electric-40:#7100c6;--road-violet-electric-50:#8d00f8;--road-violet-electric-60:#a433f9;--road-violet-electric-70:#bb66fb;--road-violet-electric-80:#d199fc;--road-violet-electric-85:#ddb2fd;--road-violet-electric-90:#e8ccfe;--road-violet-electric-95:#f4e5fe;--road-green-monstera-5:#000c01;--road-green-monstera-10:#001901;--road-green-monstera-15:#002502;--road-green-monstera-20:#003203;--road-green-monstera-30:#005705;--road-green-monstera-40:#007006;--road-green-monstera-50:#007c07;--road-green-monstera-60:#339639;--road-green-monstera-70:#66b06a;--road-green-monstera-80:#99cb9c;--road-green-monstera-85:#b3d8b5;--road-green-monstera-90:#cce5cd;--road-green-monstera-95:#e6f2e6;--road-red-pepper-5:#150000;--road-red-pepper-10:#2a0000;--road-red-pepper-15:#3f0000;--road-red-pepper-20:#540000;--road-red-pepper-30:#7f0000;--road-red-pepper-40:#a90000;--road-red-pepper-50:#d30000;--road-red-pepper-60:#dc3333;--road-red-pepper-70:#e56666;--road-red-pepper-80:#ed9999;--road-red-pepper-85:#f2b3b3;--road-red-pepper-90:#f6cccc;--road-red-pepper-95:#fbe6e6;--road-yellow-gold-5:#130e00;--road-yellow-gold-10:#261c00;--road-yellow-gold-15:#3a2a00;--road-yellow-gold-20:#4d3800;--road-yellow-gold-30:#735400;--road-yellow-gold-40:#9a7000;--road-yellow-gold-50:#c08c00;--road-yellow-gold-60:#cda333;--road-yellow-gold-70:#d9ba66;--road-yellow-gold-80:#e6d199;--road-yellow-gold-85:#ecdcb2;--road-yellow-gold-90:#f2e8cc;--road-yellow-gold-95:#f9f4e6;--road-yellow-mikado-5:#191401;--road-yellow-mikado-10:#332702;--road-yellow-mikado-15:#4c3b04;--road-yellow-mikado-20:#664e05;--road-yellow-mikado-30:#997607;--road-yellow-mikado-40:#cc9d0a;--road-yellow-mikado-50:#ffc40c;--road-yellow-mikado-60:#ffd03d;--road-yellow-mikado-70:#ffdc6d;--road-yellow-mikado-80:#ffe79e;--road-yellow-mikado-85:#ffedb6;--road-yellow-mikado-90:#fff3ce;--road-yellow-mikado-95:#fff9e7;--road-tag-default:var(--road-blue-klein-50);--road-tag-ecology:var(--road-green-monstera-50);--road-tag-exclusivity:var(--road-yellow-gold-50);--road-tag-offer:var(--road-red-pepper-50);--road-tag-black-friday:var(--road-grey-0);--road-leading-banner:var(--road-secondary-60);--road-on-leading-banner:var(--road-grey-10);--road-rating:var(--road-yellow-mikado-50);--road-info-10:#0a1628;--road-info-20:#142c51;--road-info-30:#1d4379;--road-info-40:#2759a2;--road-info-50:#316fca;--road-info-60:#5a8cd5;--road-info-70:#83a9df;--road-info-80:#adc5ea;--road-info-90:#d6e2f4;--road-info-95:#ebf1fa;--road-success-10:#0d1b0e;--road-success-20:#1a351b;--road-success-30:#285029;--road-success-40:#356a36;--road-success-50:#428544;--road-success-60:#689d69;--road-success-70:#8eb68f;--road-success-80:#b3ceb4;--road-success-90:#d9e7da;--road-success-95:#ecf3ec;--road-warning-10:#4e3406;--road-warning-20:#9c690d;--road-warning-30:#ea9d13;--road-warning-40:#fab815;--road-warning-50:#fdc93e;--road-warning-60:#ffd966;--road-warning-70:#ffe38c;--road-warning-80:#ffecb3;--road-warning-90:#fff6d9;--road-warning-95:#fffaec;--road-danger-10:#240b09;--road-danger-20:#471711;--road-danger-30:#6b221a;--road-danger-40:#8e2e22;--road-danger-50:#b2392b;--road-danger-60:#c16155;--road-danger-70:#d18880;--road-danger-80:#e0b0aa;--road-danger-90:#f0d7d5;--road-danger-95:#f7ebea;--road-info-surface:var(--road-info-95);--road-info-surface-inverse:var(--road-info-50);--road-on-info-surface:var(--road-info-30);--road-on-info-surface-inverse:var(--road-grey-100-new);--road-info-outline:var(--road-info-50);--road-info-icon:var(--road-info-50);--road-info-icon-inverse:var(--road-grey-100-new);--road-info-background:var(--road-info-surface);--road-info-default:var(--road-info-surface-inverse);--road-info-text:var(--road-on-info-surface);--road-info-contrast:var(--road-on-info-surface-inverse);--road-success-surface:var(--road-success-95);--road-success-surface-inverse:var(--road-success-50);--road-on-success-surface:var(--road-success-30);--road-on-success-surface-inverse:var(--road-grey-100-new);--road-success-outline:var(--road-success-50);--road-success-icon:var(--road-success-50);--road-success-icon-inverse:var(--road-grey-100-new);--road-success-background:var(--road-success-surface);--road-success-default:var(--road-success-surface-inverse);--road-success-text:var(--road-on-success-surface);--road-success-contrast:var(--road-on-success-surface-inverse);--road-warning-surface:var(--road-warning-95);--road-warning-surface-inverse:var(--road-warning-50);--road-on-warning-surface:var(--road-warning-20);--road-on-warning-surface-inverse:var(--road-warning-10);--road-warning-outline:var(--road-warning-30);--road-warning-icon:var(--road-warning-30);--road-warning-icon-inverse:var(--road-warning-10);--road-warning-background:var(--road-warning-surface);--road-warning-default:var(--road-warning-surface-inverse);--road-warning-text:var(--road-on-warning-surface);--road-warning-contrast:var(--road-on-warning-surface-inverse);--road-danger-surface:var(--road-danger-95);--road-danger-surface-inverse:var(--road-danger-50);--road-on-danger-surface:var(--road-danger-30);--road-on-danger-surface-inverse:var(--road-grey-100-new);--road-danger-outline:var(--road-danger-50);--road-danger-icon:var(--road-danger-50);--road-danger-icon-inverse:var(--road-grey-100-new);--road-danger-background:var(--road-danger-surface);--road-danger-default:var(--road-danger-surface-inverse);--road-danger-text:var(--road-on-danger-surface);--road-danger-contrast:var(--road-danger-surface-inverse);--road-font:muli, arial, sans-serif;--road-font-size-75:4.6875rem;--road-font-size-65:4.0625rem;--road-font-size-57:3.5625rem;--road-font-size-49:3.0625rem;--road-font-size-43:2.6875rem;--road-font-size-37:2.3125rem;--road-font-size-32:2rem;--road-font-size-28:1.75rem;--road-font-size-24:1.5rem;--road-font-size-21:1.325rem;--road-font-size-18:1.125rem;--road-font-size-16:1rem;--road-font-size-14:0.875rem;--road-font-size-12:0.75rem;--road-font-size-10:0.625rem;--road-overline:var(--road-font-size-12);--road-legal-medium:var(--road-font-size-12);--road-label-medium:var(--road-font-size-16);--road-label-small:var(--road-font-size-12);--road-label-extra-small:var(--road-font-size-10);--road-caption-medium:var(--road-font-size-12);--road-helper-medium:var(--road-font-size-14);--road-link-large:var(--road-font-size-18);--road-link-medium:var(--road-font-size-16);--road-link-small:var(--road-font-size-14);--road-link-extra-small:var(--road-font-size-12);--road-button-medium:var(--road-font-size-16);--road-button-small:var(--road-font-size-14);--road-display-large:var(--road-font-size-57);--road-display-medium:var(--road-font-size-49);--road-display-small:var(--road-font-size-43);--road-heading-01:var(--road-font-size-32);--road-heading-02:var(--road-font-size-28);--road-heading-03:var(--road-font-size-24);--road-heading-04:var(--road-font-size-21);--road-sub-heading-large:var(--road-font-size-24);--road-sub-heading-medium:var(--road-font-size-21);--road-sub-heading-small:var(--road-font-size-18);--road-body-large:var(--road-font-size-18);--road-body-medium:var(--road-font-size-16);--road-body-small:var(--road-font-size-14);--road-spacing-01:0.125rem;--road-spacing-02:0.25rem;--road-spacing-03:0.5rem;--road-spacing-04:0.75rem;--road-spacing-05:1rem;--road-spacing-06:1.5rem;--road-spacing-07:2rem;--road-spacing-08:2.5rem;--road-spacing-09:3rem;--road-spacing-10:4rem;--road-spacing-11:5rem;--road-spacing-12:6rem;--road-spacing-13:10rem;--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--road-secondary-100:var(--road-secondary-90);--road-secondary-200:var(--road-secondary-80);--road-secondary-300:var(--road-secondary-70);--road-secondary-400:var(--road-secondary-60);--road-secondary-500:var(--road-secondary-50);--road-secondary-600:var(--road-secondary-40);--road-secondary-700:var(--road-secondary-30);--road-secondary-800:var(--road-secondary-20);--road-secondary-900:var(--road-secondary-10);--road-secondary-contrast:var(--road-on-secondary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--secondary:var(--road-primary-500);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--road-grey-000:var(--road-grey-100-new);--road-grey-100:var(--road-grey-90);--road-grey-200:var(--road-grey-80);--road-grey-300:var(--road-grey-70);--road-grey-400:var(--road-grey-60);--road-grey-500:var(--road-grey-50);--road-grey-600:var(--road-grey-40);--road-grey-700:var(--road-grey-30);--road-grey-800:var(--road-grey-20);--road-grey-900:var(--road-grey-10);--road-grey-999:var(--road-grey-0);--road-disabled:var(--road-surface-disabled);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900);--info:var(--road-info-default);--info-hover:var(--road-info-text);--info-text:var(--road-info-text);--info-background:var(--road-info-background);--info-contrast:var(--road-grey-000);--success:var(--road-success-default);--success-hover:var(--road-success-text);--success-text:var(--road-success-text);--success-background:var(--road-success-background);--success-contrast:var(--road-grey-000);--warning:var(--road-warning-default);--warning-hover:var(--road-warning-text);--warning-text:var(--road-warning-text);--warning-background:var(--road-warning-background);--warning-contrast:var(--road-grey-900);--danger:var(--road-danger-default);--danger-hover:var(--road-danger-text);--danger-text:var(--road-danger-text);--danger-background:var(--road-danger-background);--danger-contrast:var(--road-grey-000);--icon:var(--road-grey-900);--text:var(--road-grey-900);--text-second:var(--road-grey-600);--text-disabled:var(--road-grey-400);--border-form:var(--road-grey-400);--border:var(--road-grey-300);--background:var(--road-grey-100);--background-second:var(--road-grey-100);--white:var(--road-grey-000);--font:var(--road-font)}@media (min-width: 768px){body{--road-display-large:var(--road-font-size-75);--road-display-medium:var(--road-font-size-65);--road-display-small:var(--road-font-size-57);--road-heading-01:var(--road-font-size-49);--road-heading-02:var(--road-font-size-37);--road-heading-03:var(--road-font-size-32);--road-heading-04:var(--road-font-size-28);--road-sub-heading-large:var(--road-font-size-32);--road-sub-heading-medium:var(--road-font-size-28);--road-sub-heading-small:var(--road-font-size-24)}}.auto5-theme{--road-brand-primary:#002b6f;--road-primary-10:#001638;--road-primary-20:#002b6f;--road-primary-30:#004293;--road-primary-40:#005ab8;--road-primary-50:#0071dc;--road-primary-60:#338de3;--road-primary-70:#66aaea;--road-primary-80:#99c6f1;--road-primary-90:#cce3f8;--road-brand-secondary:#e00008;--road-secondary-10:#2d0002;--road-secondary-20:#5a0003;--road-secondary-30:#860005;--road-secondary-40:#b30006;--road-secondary-50:#e00008;--road-secondary-60:#e63339;--road-secondary-70:#ec666b;--road-secondary-80:#f3999c;--road-secondary-90:#f9ccce;--road-grey-0:#000000;--road-grey-5:#11151d;--road-grey-10:#22293a;--road-grey-15:#2c3345;--road-grey-20:#353c50;--road-grey-30:#51586c;--road-grey-40:#6d7488;--road-grey-50:#898fa0;--road-grey-60:#a4a9b6;--road-grey-70:#c1c4cd;--road-grey-80:#dddfe4;--road-grey-85:#e9eaed;--road-grey-90:#f4f4f6;--road-grey-95:#fafafb;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-primary-20);--road-on-header-surface:var(--road-grey-100-new);--road-header-surface-disabled:rgba(255, 255, 255, 0.32);--road-on-header-surface-disabled:rgba(255, 255, 255, 0.4);--road-header-outline:var(--road-primary-20);--road-header-icon:var(--road-grey-100-new);--road-icon-header-variant:var(--road-secondary-60);--road-header-badge:var(--road-secondary-60);--road-on-header-badge:var(--road-grey-100-new);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-10);--road-on-surface-weak:var(--road-grey-20);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-50);--road-primary-variant:var(--road-primary-30);--road-on-primary:var(--road-grey-100-new);--road-secondary:var(--road-secondary-50);--road-secondary-variant:var(--road-secondary-30);--road-on-secondary:var(--road-grey-100-new);--road-outline:var(--road-grey-30);--road-outline-weak:var(--road-grey-40);--road-outline-variant:var(--road-primary-30);--road-icon:var(--road-grey-10);--road-icon-variant:var(--road-secondary-50);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-grey-70);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-10);--road-button-primary:var(--road-primary-40);--road-button-primary-variant:var(--road-primary-30);--road-on-button-primary:var(--road-grey-100-new);--road-button-secondary:var(--road-secondary-60);--road-button-secondary-variant:var(--road-secondary-30);--road-on-button-secondary:var(--road-grey-100-new);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-90);--road-button-tertiary-outline:var(--road-primary-40);--road-on-button-tertiary:var(--road-primary-50);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-90);--road-on-button-ghost:var(--road-primary-40);--road-button-fab:var(--road-primary-50);--road-on-button-fab:var(--road-grey-100-new);--road-button-fab-variant:var(--road-primary-30);--road-link-primary:var(--road-primary-40);--road-link-secondary:var(--road-grey-10);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-primary-50);--road-input-surface-variant:var(--road-primary-30);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-primary-30);--road-decorative-surface:var(--road-secondary-50);--road-decorative-surface-variant:var(--road-primary-50);--road-leading-banner:var(--road-yellow-mikado-50);--road-on-leading-banner:var(--road-grey-10);--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--road-secondary-100:var(--road-secondary-90);--road-secondary-200:var(--road-secondary-80);--road-secondary-300:var(--road-secondary-70);--road-secondary-400:var(--road-secondary-60);--road-secondary-500:var(--road-secondary-50);--road-secondary-600:var(--road-secondary-40);--road-secondary-700:var(--road-secondary-30);--road-secondary-800:var(--road-secondary-20);--road-secondary-900:var(--road-secondary-10);--road-secondary-contrast:var(--road-on-secondary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--secondary:var(--road-brand-secondary);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900)}.atu-theme{--road-brand-primary:#bb1e10;--road-primary-10:#250603;--road-primary-20:#4b0b06;--road-primary-30:#70120a;--road-primary-40:#96180d;--road-primary-50:#bb1e10;--road-primary-60:#c94b40;--road-primary-70:#d67870;--road-primary-80:#e4a59f;--road-primary-90:#f1d2cf;--road-brand-secondary:#bb1e10;--road-secondary-10:#0c0a0a;--road-secondary-20:#292727;--road-secondary-30:#474545;--road-secondary-40:#646262;--road-secondary-50:#827f7f;--road-secondary-60:#9f9c9c;--road-secondary-70:#bcbaba;--road-secondary-80:#dad7d7;--road-secondary-90:#f7f4f4;--road-grey-0:#000000;--road-grey-5:#060505;--road-grey-10:#0c0a0a;--road-grey-15:#1b1919;--road-grey-20:#292727;--road-grey-30:#474545;--road-grey-40:#646262;--road-grey-50:#827f7f;--road-grey-60:#9f9c9c;--road-grey-70:#bcbaba;--road-grey-80:#dad7d7;--road-grey-85:#e9e6e6;--road-grey-90:#f7f4f4;--road-grey-95:#fbfafa;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-grey-90);--road-on-header-surface:var(--road-grey-20);--road-header-surface-disabled:rgba(130, 127, 127, 0.24);--road-on-header-surface-disabled:rgba(41, 39, 39, 0.32);--road-header-outline:rgba(71, 69, 69, 0.24);--road-header-icon:var(--road-grey-20);--road-icon-header-variant:var(--road-primary-50);--road-header-badge:var(--road-primary-50);--road-on-header-badge:var(--road-grey-100-new);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-20);--road-on-surface-weak:var(--road-grey-20);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-50);--road-primary-variant:var(--road-primary-30);--road-on-primary:var(--road-grey-100-new);--road-secondary:var(--road-secondary-20);--road-secondary-variant:var(--road-secondary-10);--road-on-secondary:var(--road-grey-100-new);--road-outline:var(--road-grey-30);--road-outline-weak:var(--road-grey-40);--road-outline-variant:var(--road-secondary-10);--road-icon:var(--road-grey-20);--road-icon-variant:var(--road-primary-50);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-secondary-60);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-20);--road-button-primary:var(--road-primary-50);--road-button-primary-variant:var(--road-primary-30);--road-on-button-primary:var(--road-grey-100-new);--road-button-secondary:var(--road-secondary-10);--road-button-secondary-variant:var(--road-secondary-40);--road-on-button-secondary:var(--road-grey-100-new);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-90);--road-button-tertiary-outline:var(--road-primary-50);--road-on-button-tertiary:var(--road-primary-50);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-90);--road-on-button-ghost:var(--road-primary-4à);--road-button-fab:var(--road-primary-50);--road-on-button-fab:var(--road-grey-100-new);--road-button-fab-variant:var(--road-primary-30);--road-link-primary:var(--road-primary-40);--road-link-secondary:var(--road-grey-20);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-secondary-10);--road-input-surface-variant:var(--road-secondary-40);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-secondary-10);--road-decorative-surface:var(--road-primary-50);--road-decorative-surface-variant:var(--road-primary-50);--road-leading-banner:var(--road-secondary-10);--road-on-leading-banner:var(--road-grey-100-new);--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--road-secondary-100:#f5cccc;--road-secondary-200:#e99d9a;--road-secondary-300:#db706b;--road-secondary-400:#cc463c;--road-secondary-500:#bb1e10;--road-secondary-600:#9e2013;--road-secondary-700:#832114;--road-secondary-800:#681f14;--road-secondary-900:#501b12;--road-secondary-contrast:var(--road-on-secondary);--secondary:var(--road-brand-secondary);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900)}.atu-theme road-banner{color:var(--road-grey-100-new)}.midas-theme{--road-brand-primary:#ffd300;--road-primary-10:#280f06;--road-primary-20:#6e450d;--road-primary-30:#b37a15;--road-primary-40:#f9b01c;--road-primary-50:#fcc20e;--road-primary-60:#ffd300;--road-primary-70:#ffde40;--road-primary-80:#ffe980;--road-primary-90:#fff4bf;--road-brand-secondary:#000000;--road-secondary-10:#1a1a1a;--road-secondary-20:#353535;--road-secondary-30:#515151;--road-secondary-40:#6c6c6c;--road-secondary-50:#878787;--road-secondary-60:#a2a2a2;--road-secondary-70:#bebebe;--road-secondary-80:#d9d9d9;--road-secondary-90:#f4f4f4;--road-grey-0:#000000;--road-grey-5:#0d0d0d;--road-grey-10:#1a1a1a;--road-grey-15:#282828;--road-grey-20:#353535;--road-grey-30:#515151;--road-grey-40:#6c6c6c;--road-grey-50:#878787;--road-grey-60:#a2a2a2;--road-grey-70:#bebebe;--road-grey-80:#d9d9d9;--road-grey-85:#e7e7e7;--road-grey-90:#f4f4f4;--road-grey-95:#fafafa;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-secondary-20);--road-on-header-surface:var(--road-grey-10);--road-header-surface-disabled:rgba(135, 135, 135, 0.24);--road-on-header-surface-disabled:rgba(26, 26, 26, 0.32);--road-header-outline:rgba(162, 162, 162, 0.24);--road-header-icon:var(--road-grey-10);--road-icon-header-variant:var(--road-primary-40);--road-header-badge:var(--road-primary-60);--road-on-header-badge:var(--road-grey-10);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-10);--road-on-surface-weak:var(--road-grey-20);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-60);--road-primary-variant:var(--road-primary-40);--road-on-primary:var(--road-grey-10);--road-secondary:var(--road-secondary-20);--road-secondary-variant:var(--road-secondary-10);--road-on-secondary:var(--road-grey-100-new);--road-outline:var(--road-grey-30);--road-outline-weak:var(--road-grey-40);--road-outline-variant:var(--road-primary-40);--road-icon:var(--road-grey-10);--road-icon-variant:var(--road-primary-40);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-primary-60);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-10);--road-button-primary:var(--road-primary-60);--road-button-primary-variant:var(--road-primary-40);--road-on-button-primary:var(--road-grey-10);--road-button-secondary:var(--road-secondary-20);--road-button-secondary-variant:var(--road-secondary-10);--road-on-button-secondary:var(--road-grey-10);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-80);--road-button-tertiary-outline:var(--road-primary-60);--road-on-button-tertiary:var(--road-grey-10);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-80);--road-on-button-ghost:var(--road-grey-10);--road-button-fab:var(--road-primary-60);--road-on-button-fab:var(--road-grey-10);--road-button-fab-variant:var(--road-primary-30);--road-link-primary:var(--road-grey-10);--road-link-secondary:var(--road-primary-30);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-secondary-10);--road-input-surface-variant:var(--road-secondary-20);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-secondary-10);--road-decorative-surface:var(--road-primary-40);--road-decorative-surface-variant:var(--road-secondary-20);--road-leading-banner:var(--road-secondary-10);--road-on-leading-banner:var(--road-grey-100-new);--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--road-secondary-100:var(--road-secondary-90);--road-secondary-200:var(--road-secondary-80);--road-secondary-300:var(--road-secondary-70);--road-secondary-400:var(--road-secondary-60);--road-secondary-500:var(--road-secondary-50);--road-secondary-600:var(--road-secondary-40);--road-secondary-700:var(--road-secondary-30);--road-secondary-800:var(--road-secondary-20);--road-secondary-900:var(--road-secondary-10);--road-secondary-contrast:var(--road-on-secondary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--secondary:var(--road-brand-secondary);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900)}.midas-theme road-button[outline][color="primary"],.midas-theme road-button[outline][color="secondary"],.midas-theme .link{color:var(--road-grey-900)}.midas-theme .link:focus,.midas-theme .link:hover{color:var(--road-grey-600)}.mobivia-theme{--road-brand-primary:#b40063;--road-primary-10:#2e0011;--road-primary-20:#5c0026;--road-primary-30:#7f003b;--road-primary-40:#9b004f;--road-primary-50:#b40063;--road-primary-60:#c42674;--road-primary-70:#d24d87;--road-primary-80:#e282a6;--road-primary-90:#f1bbcd;--road-brand-secondary:#f8ab00;--road-secondary-10:#4c2800;--road-secondary-20:#754300;--road-secondary-30:#995e00;--road-secondary-40:#bd7b00;--road-secondary-50:#f8ab00;--road-secondary-60:#ffbb21;--road-secondary-70:#ffca42;--road-secondary-80:#ffda70;--road-secondary-90:#ffeaa8;--road-grey-0:#000000;--road-grey-5:#141413;--road-grey-10:#282826;--road-grey-15:#333331;--road-grey-20:#3d3d3c;--road-grey-30:#565656;--road-grey-40:#757574;--road-grey-50:#8e8e8e;--road-grey-60:#a9a8a7;--road-grey-70:#c3c3c1;--road-grey-80:#deddda;--road-grey-85:#ebeae6;--road-grey-90:#f8f7f3;--road-grey-95:#fcfbf9;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-primary-50);--road-on-header-surface:var(--road-grey-100-new);--road-header-surface-disabled:rgba(255, 255, 255, 0.32);--road-on-header-surface-disabled:rgba(255, 255, 255, 0.4);--road-header-outline:var(--road-primary-50);--road-header-icon:var(--road-grey-10-new);--road-variant-icon-header:var(--road-secondary-60);--road-header-badge:var(--road-secondary-60);--road-on-header-badge:var(--road-grey-10);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-10);--road-on-surface-weak:var(--road-grey-20);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-50);--road-primary-variant:var(--road-primary-30);--road-on-primary:var(--road-grey-100-new);--road-secondary:var(--road-secondary-50);--road-secondary-variant:var(--road-secondary-40);--road-on-secondary:var(--road-grey-10);--road-outline:var(--road-grey-30);--road-outline-weak:var(--road-grey-40);--road-outline-variant:var(--road-primary-30);--road-icon:var(--road-grey-10);--road-icon-variant:var(--road-secondary-40);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-secondary-60);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-10);--road-button-primary:var(--road-primary-50);--road-button-primary-variant:var(--road-primary-30);--road-on-button-primary:var(--road-grey-100-new);--road-button-secondary:var(--road-secondary-50);--road-button-secondary-variant:var(--road-secondary-40);--road-on-button-secondary:var(--road-grey-10);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-90);--road-button-tertiary-outline:var(--road-primary-50);--road-on-button-tertiary:var(--road-grey-10);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-90);--road-on-button-ghost:var(--road-primary-50);--road-button-fab:var(--road-secondary-50);--road-on-button-fab:var(--road-grey-10);--road-button-fab-variant:var(--road-secondary-40);--road-link-primary:var(--road-primary-50);--road-link-secondary:var(--road-grey-10);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-primary-50);--road-input-surface-variant:var(--road-primary-30);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-grey-0);--road-decorative-surface:var(--road-secondary-50);--road-decorative-surface-variant:var(--road-primary-50);--road-leading-banner:var(--road-secondary-50);--road-on-leading-banner:var(--road-grey-10);--road-grey-000:var(--road-grey-100);--road-grey-200:var(--road-grey-80);--road-grey-300:var(--road-grey-70);--road-grey-400:var(--road-grey-60);--road-grey-500:var(--road-grey-50);--road-grey-600:var(--road-grey-40);--road-grey-700:var(--road-grey-30);--road-grey-800:var(--road-grey-20);--road-grey-900:var(--road-grey-10);--road-grey-999:var(--road-grey-0);--road-disabled:var(--road-surface-disabled);--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--road-secondary-100:var(--road-secondary-90);--road-secondary-200:var(--road-secondary-80);--road-secondary-300:var(--road-secondary-70);--road-secondary-400:var(--road-secondary-60);--road-secondary-500:var(--road-secondary-50);--road-secondary-600:var(--road-secondary-40);--road-secondary-700:var(--road-secondary-30);--road-secondary-800:var(--road-secondary-20);--road-secondary-900:var(--road-secondary-10);--road-secondary-contrast:var(--road-on-secondary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--secondary:var(--road-brand-secondary);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900)}.bythjul-theme{--road-brand-primary:#103d6d;--road-primary-10:#173557;--road-primary-20:#103d6d;--road-primary-30:#134b85;--road-primary-40:#16579a;--road-primary-50:#1961ac;--road-primary-60:#748fbf;--road-primary-70:#a2b2d1;--road-primary-80:#c6cfe1;--road-primary-90:#e4e8f1;--road-primary-95:#f2f4f8;--road-brand-secondary:#f5a973;--road-secondary-10:#6c3f07;--road-secondary-20:#99590a;--road-secondary-30:#bb6c0c;--road-secondary-40:#d87d0e;--road-secondary-50:#f28c10;--road-secondary-60:#f5a973;--road-secondary-70:#f7c2a2;--road-secondary-80:#fad8c6;--road-secondary-90:#fcede4;--road-secondary-95:#fef6f2;--road-grey-0:#000000;--road-grey-5:#141414;--road-grey-10:#1c1c1c;--road-grey-15:#232323;--road-grey-20:#282828;--road-grey-30:#2d2d2d;--road-grey-40:#313131;--road-grey-50:#333333;--road-grey-60:#828282;--road-grey-70:#a3a3a3;--road-grey-80:#bebebe;--road-grey-85:#d6d6d6;--road-grey-90:#ebebeb;--road-grey-95:#f8f8f8;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-primary-50);--road-on-header-surface:var(--road-grey-100-new);--road-header-surface-disabled:rgba(255, 255, 255, 0.32);--road-on-header-surface-disabled:rgba(255, 255, 255, 0.4);--road-header-outline:var(--road-primary-50);--road-header-icon:var(--road-grey-10-new);--road-variant-icon-header:var(--road-secondary-60);--road-header-badge:var(--road-secondary-60);--road-on-header-badge:var(--road-grey-10);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-10);--road-on-surface-weak:var(--road-grey-20);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-50);--road-primary-variant:var(--road-primary-30);--road-on-primary:var(--road-grey-100-new);--road-secondary:var(--road-secondary-50);--road-secondary-variant:var(--road-secondary-40);--road-on-secondary:var(--road-grey-10);--road-outline:var(--road-grey-30);--road-outline-weak:var(--road-grey-40);--road-outline-variant:var(--road-primary-30);--road-icon:var(--road-grey-10);--road-icon-variant:var(--road-secondary-40);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-secondary-60);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-10);--road-button-primary:var(--road-primary-50);--road-button-primary-variant:var(--road-primary-30);--road-on-button-primary:var(--road-grey-100-new);--road-button-secondary:var(--road-secondary-50);--road-button-secondary-variant:var(--road-secondary-40);--road-on-button-secondary:var(--road-grey-10);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-90);--road-button-tertiary-outline:var(--road-primary-50);--road-on-button-tertiary:var(--road-grey-10);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-90);--road-on-button-ghost:var(--road-grey-10);--road-button-fab:var(--road-secondary-50);--road-on-button-fab:var(--road-grey-10);--road-button-fab-variant:var(--road-secondary-40);--road-link-primary:var(--road-primary-50);--road-link-secondary:var(--road-grey-10);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-primary-50);--road-input-surface-variant:var(--road-primary-30);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-grey-0);--road-decorative-surface:var(--road-secondary-50);--road-decorative-surface-variant:var(--road-primary-50);--road-leading-banner:var(--road-secondary-50);--road-on-leading-banner:var(--road-grey-10);--road-grey-000:var(--road-grey-100);--road-grey-200:var(--road-grey-80);--road-grey-300:var(--road-grey-70);--road-grey-400:var(--road-grey-60);--road-grey-500:var(--road-grey-50);--road-grey-600:var(--road-grey-40);--road-grey-700:var(--road-grey-30);--road-grey-800:var(--road-grey-20);--road-grey-900:var(--road-grey-10);--road-grey-999:var(--road-grey-0);--road-disabled:var(--road-surface-disabled);--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--road-secondary-100:var(--road-secondary-90);--road-secondary-200:var(--road-secondary-80);--road-secondary-300:var(--road-secondary-70);--road-secondary-400:var(--road-secondary-60);--road-secondary-500:var(--road-secondary-50);--road-secondary-600:var(--road-secondary-40);--road-secondary-700:var(--road-secondary-30);--road-secondary-800:var(--road-secondary-20);--road-secondary-900:var(--road-secondary-10);--road-secondary-contrast:var(--road-on-secondary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--secondary:var(--road-brand-secondary);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900)}.skruvat-theme{--road-brand-primary:#a73b0d;--road-primary-10:#471c0b;--road-primary-20:#a73b0d;--road-primary-30:#ff4b00;--road-primary-40:#ff6d2f;--road-primary-50:#d7734b;--road-primary-60:#ffaf8f;--road-primary-70:#ffc3ab;--road-primary-80:#ffe9e1;--road-primary-90:#fffbfa;--road-brand-secondary:#382e29;--road-secondary-10:#382e29;--road-secondary-20:#6b6868;--road-secondary-30:#807a7a;--road-secondary-40:#958d8c;--road-secondary-50:#aaa2a1;--road-secondary-60:#bebab9;--road-secondary-70:#d3d3d3;--road-secondary-80:#dddddd;--road-secondary-90:#f0f0f0;--road-secondary-95:#fafafa;--road-grey-0:#000000;--road-grey-5:#19160c;--road-grey-10:#382e29;--road-grey-15:#565656;--road-grey-20:#6b6868;--road-grey-30:#807a7a;--road-grey-40:#958d8c;--road-grey-50:#aaa2a1;--road-grey-60:#bebab9;--road-grey-70:#d3d3d3;--road-grey-80:#dddddd;--road-grey-85:#e7e7e7;--road-grey-90:#f0f0f0;--road-grey-95:#fafafa;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-primary-50);--road-on-header-surface:var(--road-grey-100-new);--road-header-surface-disabled:rgba(255, 255, 255, 0.32);--road-on-header-surface-disabled:rgba(255, 255, 255, 0.4);--road-header-outline:var(--road-primary-50);--road-header-icon:var(--road-grey-10-new);--road-variant-icon-header:var(--road-secondary-60);--road-header-badge:var(--road-secondary-60);--road-on-header-badge:var(--road-grey-10);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-10);--road-on-surface-weak:var(--road-grey-20);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-50);--road-primary-variant:var(--road-primary-30);--road-on-primary:var(--road-grey-100-new);--road-secondary:var(--road-secondary-50);--road-secondary-variant:var(--road-secondary-40);--road-on-secondary:var(--road-grey-10);--road-outline:var(--road-grey-30);--road-outline-weak:var(--road-grey-40);--road-outline-variant:var(--road-primary-30);--road-icon:var(--road-grey-10);--road-icon-variant:var(--road-primary-40);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-secondary-60);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-10);--road-button-primary:var(--road-primary-50);--road-button-primary-variant:var(--road-primary-30);--road-on-button-primary:var(--road-grey-100-new);--road-button-secondary:var(--road-secondary-50);--road-button-secondary-variant:var(--road-secondary-40);--road-on-button-secondary:var(--road-grey-10);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-90);--road-button-tertiary-outline:var(--road-primary-50);--road-on-button-tertiary:var(--road-grey-10);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-90);--road-on-button-ghost:var(--road-grey-10);--road-button-fab:var(--road-secondary-50);--road-on-button-fab:var(--road-grey-10);--road-button-fab-variant:var(--road-secondary-40);--road-link-primary:var(--road-primary-50);--road-link-secondary:var(--road-grey-10);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-primary-50);--road-input-surface-variant:var(--road-primary-30);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-grey-0);--road-decorative-surface:var(--road-secondary-50);--road-decorative-surface-variant:var(--road-primary-50);--road-leading-banner:var(--road-secondary-50);--road-on-leading-banner:var(--road-grey-10);--road-grey-000:var(--road-grey-100);--road-grey-200:var(--road-grey-80);--road-grey-300:var(--road-grey-70);--road-grey-400:var(--road-grey-60);--road-grey-500:var(--road-grey-50);--road-grey-600:var(--road-grey-40);--road-grey-700:var(--road-grey-30);--road-grey-800:var(--road-grey-20);--road-grey-900:var(--road-grey-10);--road-grey-999:var(--road-grey-0);--road-disabled:var(--road-surface-disabled);--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--road-secondary-100:var(--road-secondary-90);--road-secondary-200:var(--road-secondary-80);--road-secondary-300:var(--road-secondary-70);--road-secondary-400:var(--road-secondary-60);--road-secondary-500:var(--road-secondary-50);--road-secondary-600:var(--road-secondary-40);--road-secondary-700:var(--road-secondary-30);--road-secondary-800:var(--road-secondary-20);--road-secondary-900:var(--road-secondary-10);--road-secondary-contrast:var(--road-on-secondary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--secondary:var(--road-brand-secondary);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900)}html{-webkit-text-size-adjust:100%}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible;}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{padding:0;border-style:none}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;display:table;max-width:100%;padding:0;color:inherit;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none}[type="search"]{outline-offset:-2px;-webkit-appearance:textfield;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*,*::before,*::after{box-sizing:border-box}input[type="number"]{appearance:textfield}body{font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-14);line-height:1.5;color:var(--road-grey-10)}img,embed,iframe,object,audio,video{max-width:100%;height:auto}iframe{border:0}input,textarea,button,select,a{-webkit-tap-highlight-color:rgba(0,0,0,0)}a{text-decoration:none;cursor:pointer}*.focus-visible{outline:auto}@font-face{font-family:Muli;font-style:normal;font-weight:400;font-display:swap;src:local("Muli Regular"), local("Muli-Regular"), url("fonts/Muli-Regular.woff2") format("woff2"), url("fonts/Muli-Regular.woff") format("woff");unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:Muli;font-style:normal;font-weight:400;font-display:swap;src:local("Muli Regular"), local("Muli-Regular"), url("fonts/Muli-Regular.woff2") format("woff2"), url("fonts/Muli-Regular.woff") format("woff");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:Muli;font-style:normal;font-weight:700;font-display:swap;src:local("Muli Bold"), local("Muli-Bold"), url("fonts/Muli-Bold.woff2") format("woff2"), url("fonts/Muli-Bold.woff") format("woff");unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:Muli;font-style:normal;font-weight:700;font-display:swap;src:local("Muli Bold"), local("Muli-Bold"), url("fonts/Muli-Bold.woff2") format("woff2"), url("fonts/Muli-Bold.woff") format("woff");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}.display-large{font-size:var(--road-display-large);font-weight:700;line-height:1.5}.display-medium{font-size:var(--road-display-medium);font-weight:700;line-height:1.5}.display-small{font-size:var(--road-display-small);font-weight:700;line-height:1.5}.h1,.h2,.h3,.h4,.h5,.h6,.h7,.h8,.h9{padding:0;font-weight:700;line-height:1.5;color:var(--road-on-surface)}.title-primary{color:var(--road-brand-primary)}.h1,.h2,.h3,.h4,.h5,.h6,.h7,.h8,.h9,.text-content,.text-small,.text-legal,.text-large,.text-medium{margin:0 0 1rem;font-family:var(--road-font, sans-serif)}.h1{font-size:var(--road-heading-01)}.h2{font-size:var(--road-heading-02)}.h3{font-size:var(--road-heading-03)}.h4{font-size:var(--road-heading-04)}.h5{font-size:var(--road-font-size-24)}.h6{font-size:var(--road-font-size-21)}.h7{font-size:var(--road-font-size-18)}.h8{font-size:var(--road-font-size-16)}.h9{font-size:var(--road-font-size-12);text-transform:uppercase}.sub-heading-large{font-size:var(--road-sub-heading-large);font-weight:700;line-height:1.5}.sub-heading-medium{font-size:var(--road-sub-heading-medium);font-weight:700;line-height:1.5}.sub-heading-small{font-size:var(--road-sub-heading-small);font-weight:700;line-height:1.5}.overline{font-size:var(--road-overline);font-weight:700;text-transform:uppercase}.text-content,.text-small,.text-legal,.text-large,.text-medium{line-height:1.5}.text-large{font-size:var(--road-body-large);color:var(--road-grey-10)}.text-content{font-size:var(--road-body-medium);color:var(--road-grey-10)}.text-medium{font-size:var(--road-body-small);color:var(--road-grey-10)}.text-small{font-size:var(--road-legal-medium)}.text-legal{font-size:var(--road-legal-medium);color:var(--road-grey-60)}.title-underline::after{display:block;width:50px;height:3px;margin-top:8px;content:"";background-color:var(--road-decorative-surface)}.text-center.title-underline::after{margin:8px auto 0}.text-right.title-underline::after{position:absolute;right:2rem}.link{color:var(--road-link-primary);text-decoration:underline;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.link:hover{text-decoration:none}.link:focus,.link.focus-visible{outline:auto}.link-default{color:var(--road-link-secondary)}.link-white{color:var(--road-link-inverse)}.link-md{font-size:var(--road-link-medium)}.link-sm{font-size:var(--road-link-small)}.link road-icon{color:currentColor}.d-none{display:none}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-block{display:block}.d-flex{display:flex}.d-inline-flex{display:inline-flex}@media (min-width: 576px){.d-sm-none{display:none}.d-sm-inline{display:inline}.d-sm-inline-block{display:inline-block}.d-sm-block{display:block}.d-sm-flex{display:flex}.d-sm-inline-flex{display:inline-flex}}@media (min-width: 768px){.d-md-none{display:none}.d-md-inline{display:inline}.d-md-inline-block{display:inline-block}.d-md-block{display:block}.d-md-flex{display:flex}.d-md-inline-flex{display:inline-flex}}@media (min-width: 992px){.d-lg-none{display:none}.d-lg-inline{display:inline}.d-lg-inline-block{display:inline-block}.d-lg-block{display:block}.d-lg-flex{display:flex}.d-lg-inline-flex{display:inline-flex}}@media (min-width: 1200px){.d-xl-none{display:none}.d-xl-inline{display:inline}.d-xl-inline-block{display:inline-block}.d-xl-block{display:block}.d-xl-flex{display:flex}.d-xl-inline-flex{display:inline-flex}}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-grow-0{flex-grow:0}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-shrink-1{flex-shrink:1}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}@media (min-width: 576px){.flex-sm-wrap{flex-wrap:wrap}.flex-sm-nowrap{flex-wrap:nowrap}.justify-content-sm-start{justify-content:flex-start}.justify-content-sm-end{justify-content:flex-end}.justify-content-sm-center{justify-content:center}.justify-content-sm-between{justify-content:space-between}.justify-content-sm-around{justify-content:space-around}.align-items-sm-start{align-items:flex-start}.align-items-sm-end{align-items:flex-end}.align-items-sm-center{align-items:center}.align-items-sm-baseline{align-items:baseline}.align-items-sm-stretch{align-items:stretch}}@media (min-width: 768px){.flex-md-wrap{flex-wrap:wrap}.flex-md-nowrap{flex-wrap:nowrap}.justify-content-md-start{justify-content:flex-start}.justify-content-md-end{justify-content:flex-end}.justify-content-md-center{justify-content:center}.justify-content-md-between{justify-content:space-between}.justify-content-md-around{justify-content:space-around}.align-items-md-start{align-items:flex-start}.align-items-md-end{align-items:flex-end}.align-items-md-center{align-items:center}.align-items-md-baseline{align-items:baseline}.align-items-md-stretch{align-items:stretch}}@media (min-width: 992px){.flex-lg-wrap{flex-wrap:wrap}.flex-lg-nowrap{flex-wrap:nowrap}.justify-content-lg-start{justify-content:flex-start}.justify-content-lg-end{justify-content:flex-end}.justify-content-lg-center{justify-content:center}.justify-content-lg-between{justify-content:space-between}.justify-content-lg-around{justify-content:space-around}.align-items-lg-start{align-items:flex-start}.align-items-lg-end{align-items:flex-end}.align-items-lg-center{align-items:center}.align-items-lg-baseline{align-items:baseline}.align-items-lg-stretch{align-items:stretch}}@media (min-width: 1200px){.flex-xl-wrap{flex-wrap:wrap}.flex-xl-nowrap{flex-wrap:nowrap}.justify-content-xl-start{justify-content:flex-start}.justify-content-xl-end{justify-content:flex-end}.justify-content-xl-center{justify-content:center}.justify-content-xl-between{justify-content:space-between}.justify-content-xl-around{justify-content:space-around}.align-items-xl-start{align-items:flex-start}.align-items-xl-end{align-items:flex-end}.align-items-xl-center{align-items:center}.align-items-xl-baseline{align-items:baseline}.align-items-xl-stretch{align-items:stretch}}.align-content-start{align-content:flex-start}.align-content-end{align-content:flex-end}.align-content-center{align-content:center}.align-content-between{align-content:space-between}.align-content-around{align-content:space-around}.align-content-stretch{align-content:stretch}.align-self-auto{align-self:auto}.align-self-start{align-self:flex-start}.align-self-end{align-self:flex-end}.align-self-center{align-self:center}.align-self-baseline{align-self:baseline}.align-self-stretch{align-self:stretch}.m-0{margin:0}.m-4{margin:var(--road-spacing-02)}.m-8{margin:var(--road-spacing-03)}.m-12{margin:var(--road-spacing-04)}.m-16{margin:var(--road-spacing-05)}.m-24{margin:var(--road-spacing-06)}.m-auto{margin:auto}.mx-0{margin-right:0;margin-left:0}.mx-4{margin-right:var(--road-spacing-02);margin-left:var(--road-spacing-02)}.mx-8{margin-right:var(--road-spacing-03);margin-left:var(--road-spacing-03)}.mx-12{margin-right:var(--road-spacing-04);margin-left:var(--road-spacing-04)}.mx-16{margin-right:var(--road-spacing-05);margin-left:var(--road-spacing-05)}.mx-24{margin-right:var(--road-spacing-06);margin-left:var(--road-spacing-06)}.mx-auto{margin-right:auto;margin-left:auto}.my-0{margin-top:0;margin-bottom:0}.my-4{margin-top:var(--road-spacing-02);margin-bottom:var(--road-spacing-02)}.my-8{margin-top:var(--road-spacing-03);margin-bottom:var(--road-spacing-03)}.my-12{margin-top:var(--road-spacing-04);margin-bottom:var(--road-spacing-04)}.my-16{margin-top:var(--road-spacing-05);margin-bottom:var(--road-spacing-05)}.my-24{margin-top:var(--road-spacing-06);margin-bottom:var(--road-spacing-06)}.my-auto{margin-top:auto;margin-bottom:auto}.mt-0{margin-top:0}.mt-4{margin-top:var(--road-spacing-02)}.mt-8{margin-top:var(--road-spacing-03)}.mt-12{margin-top:var(--road-spacing-04)}.mt-16{margin-top:var(--road-spacing-05)}.mt-24{margin-top:var(--road-spacing-06)}.mr-0{margin-right:0}.mr-4{margin-right:var(--road-spacing-02)}.mr-8{margin-right:var(--road-spacing-03)}.mr-12{margin-right:var(--road-spacing-04)}.mr-16{margin-right:var(--road-spacing-05)}.mr-24{margin-right:var(--road-spacing-06)}.mb-0{margin-bottom:0}.mb-4{margin-bottom:var(--road-spacing-02)}.mb-8{margin-bottom:var(--road-spacing-03)}.mb-12{margin-bottom:var(--road-spacing-04)}.mb-16{margin-bottom:var(--road-spacing-05)}.mb-24{margin-bottom:var(--road-spacing-06)}.ml-0{margin-left:0}.ml-4{margin-left:var(--road-spacing-02)}.ml-8{margin-left:var(--road-spacing-03)}.ml-12{margin-left:var(--road-spacing-04)}.ml-16{margin-left:var(--road-spacing-05)}.ml-24{margin-left:var(--road-spacing-06)}.p-0{padding:0}.p-4{padding:var(--road-spacing-02)}.p-8{padding:var(--road-spacing-03)}.p-12{padding:var(--road-spacing-04)}.p-16{padding:var(--road-spacing-05)}.p-24{padding:var(--road-spacing-06)}.px-0{padding-right:0;padding-left:0}.px-4{padding-right:var(--road-spacing-02);padding-left:var(--road-spacing-02)}.px-8{padding-right:var(--road-spacing-03);padding-left:var(--road-spacing-03)}.px-12{padding-right:var(--road-spacing-04);padding-left:var(--road-spacing-04)}.px-16{padding-right:var(--road-spacing-05);padding-left:var(--road-spacing-05)}.px-24{padding-right:var(--road-spacing-06);padding-left:var(--road-spacing-06)}.py-0{padding-top:0;padding-bottom:0}.py-4{padding-top:var(--road-spacing-02);padding-bottom:var(--road-spacing-02)}.py-8{padding-top:var(--road-spacing-03);padding-bottom:var(--road-spacing-03)}.py-12{padding-top:var(--road-spacing-04);padding-bottom:var(--road-spacing-04)}.py-16{padding-top:var(--road-spacing-05);padding-bottom:var(--road-spacing-05)}.py-24{padding-top:var(--road-spacing-06);padding-bottom:var(--road-spacing-06)}.pt-0{padding-top:0}.pt-4{padding-top:var(--road-spacing-02)}.pt-8{padding-top:var(--road-spacing-03)}.pt-12{padding-top:var(--road-spacing-04)}.pt-16{padding-top:var(--road-spacing-05)}.pt-24{padding-top:var(--road-spacing-06)}.pr-0{padding-right:0}.pr-4{padding-right:var(--road-spacing-02)}.pr-8{padding-right:var(--road-spacing-03)}.pr-12{padding-right:var(--road-spacing-04)}.pr-16{padding-right:var(--road-spacing-05)}.pr-24{padding-right:var(--road-spacing-06)}.pb-0{padding-bottom:0}.pb-4{padding-bottom:var(--road-spacing-02)}.pb-8{padding-bottom:var(--road-spacing-03)}.pb-12{padding-bottom:var(--road-spacing-04)}.pb-16{padding-bottom:var(--road-spacing-05)}.pb-24{padding-bottom:var(--road-spacing-06)}.pl-0{padding-left:0}.pl-4{padding-left:var(--road-spacing-02)}.pl-8{padding-left:var(--road-spacing-03)}.pl-12{padding-left:var(--road-spacing-04)}.pl-16{padding-left:var(--road-spacing-05)}.pl-24{padding-left:var(--road-spacing-06)}.gap-0{gap:0}.gap-4{gap:var(--road-spacing-02)}.gap-8{gap:var(--road-spacing-03)}.gap-12{gap:var(--road-spacing-04)}.gap-16{gap:var(--road-spacing-05)}.gap-24{gap:var(--road-spacing-06)}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.font-weight-normal{font-weight:400}.font-weight-bold{font-weight:700}.font-italic{font-style:italic}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-primary{color:var(--road-primary-10)}.text-secondary{color:var(--road-primary-50)}.text-accent{color:var(--road-secondary-50)}.text-info{color:var(--road-on-info-surface)}.text-success{color:var(--road-on-success-surface)}.text-warning{color:var(--road-on-warning-surface)}.text-danger{color:var(--road-on-danger-surface)}.text-gray{color:var(--road-on-surface-weak)}.text-gray-second{color:var(--road-on-surface-extra-weak)}.text-disabled{color:var(--road-on-surface-disabled)}.text-white{--text:var(--road-on-primary);color:var(--road-on-primary)}.bg-primary{background-color:var(--road-primary-variant)}.bg-secondary{background-color:var(--road-secondary)}.bg-accent{background-color:var(--road-secondary-50)}.bg-info{background-color:var(--road-info-surface-inverse)}.bg-success{background-color:var(--road-success-surface-inverse)}.bg-warning{background-color:var(--road-warning-surface-inverse)}.bg-danger{background-color:var(--road-danger-surface-inverse)}.bg-rating{background-color:var(--road-rating)}.bg-light{background-color:var(--road-surface-inverse)}.bg-white{background-color:var(--road-surface)}.border{border:1px solid var(--road-outline)}.border-left{border-left:1px solid var(--road-outline)}.border-top{border-top:1px solid var(--road-outline)}.border-right{border-right:1px solid var(--road-outline)}.border-bottom{border-bottom:1px solid var(--road-outline)}.border-0{border:0 !important}.border-left-0{border-left:0 !important}.border-top-0{border-top:0 !important}.border-right-0{border-right:0 !important}.border-bottom-0{border-bottom:0 !important}.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.position-static{position:static}.position-sticky{position:sticky}.w-full{width:100%}.w-screen{width:100vh}.w-auto{width:auto}.h-full{height:100%}.h-screen{height:100vh}.h-auto{height:auto}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.visible{visibility:visible}.invisible{visibility:hidden}
1
+ body{--road-brand-primary:#002b6f;--road-primary-10:#001638;--road-primary-20:#002b6f;--road-primary-30:#004293;--road-primary-40:#005ab8;--road-primary-50:#0071dc;--road-primary-60:#338de3;--road-primary-70:#66aaea;--road-primary-80:#99c6f1;--road-primary-90:#cce3f8;--road-brand-secondary:#fcb731;--road-secondary-10:#9c3305;--road-secondary-20:#b14512;--road-secondary-30:#c4621a;--road-secondary-40:#d67e21;--road-secondary-50:#e99b29;--road-secondary-60:#fcb731;--road-secondary-70:#fdca68;--road-secondary-80:#fdde9f;--road-secondary-90:#fef1d6;--road-grey-0:#000000;--road-grey-5:#11151d;--road-grey-10:#22293a;--road-grey-15:#2c3345;--road-grey-20:#353c50;--road-grey-30:#51586c;--road-grey-40:#6d7488;--road-grey-50:#898fa0;--road-grey-60:#a4a9b6;--road-grey-70:#c1c4cd;--road-grey-80:#dddfe4;--road-grey-85:#e9eaed;--road-grey-90:#f4f4f6;--road-grey-95:#fafafb;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-primary-20);--road-on-header-surface:var(--road-grey-100-new);--road-header-surface-disabled:rgba(255, 255, 255, 0.32);--road-on-header-surface-disabled:rgba(255, 255, 255, 0.4);--road-header-outline:var(--road-primary-20);--road-header-icon:var(--road-grey-100-new);--road-header-icon-variant:var(--road-secondary-60);--road-header-badge:var(--road-secondary-60);--road-on-header-badge:var(--road-primary-10);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-5);--road-on-surface-weak:var(--road-grey-30);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-50);--road-primary-variant:var(--road-primary-20);--road-on-primary:var(--road-grey-100-new);--road-secondary:var(--road-secondary-60);--road-secondary-variant:var(--road-secondary-40);--road-on-secondary:var(--road-grey-10);--road-outline:var(--road-grey-60);--road-outline-weak:var(--road-grey-80);--road-outline-variant:var(--road-primary-30);--road-icon:var(--road-grey-10);--road-icon-variant:var(--road-secondary-50);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-secondary-60);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-10);--road-blur-light:blur(0.25rem);--road-blur-medium:blur(0.5rem);--road-button-primary:var(--road-primary-40);--road-button-primary-variant:var(--road-primary-30);--road-on-button-primary:var(--road-grey-100-new);--road-button-secondary:var(--road-secondary-60);--road-button-secondary-variant:var(--road-secondary-40);--road-on-button-secondary:var(--road-grey-10);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-90);--road-button-tertiary-outline:var(--road-primary-40);--road-on-button-tertiary:var(--road-primary-50);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-90);--road-on-button-ghost:var(--road-primary-40);--road-button-destructive-primary:var(--road-danger-50);--road-button-destructive-primary-variant:var(--road-danger-40);--road-button-destructive-outline:var(--road-danger-50);--road-button-destructive-secondary:var(--road-grey-100-new);--road-button-destructive-secondary-variant:var(--road-danger-90);--road-on-button-destructive-secondary:var(--road-danger-50);--road-on-button-destructive-primary:var(--road-grey-100-new);--road-button-fab:var(--road-secondary-60);--road-on-button-fab:var(--road-grey-10);--road-button-fab-variant:var(--road-secondary-40);--road-link-primary:var(--road-primary-40);--road-link-secondary:var(--road-grey-10);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-primary-50);--road-input-surface-variant:var(--road-primary-30);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-primary-30);--road-decorative-surface:var(--road-secondary-50);--road-decorative-surface-variant:var(--road-primary-50);--road-elevation-lowest:0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px 1px rgba(0, 0, 0, 0.08);--road-elevation-low:0 1px 2px rgba(41, 44, 51, 0.16), 0 3px 5px 1px rgba(41, 44, 51, 0.12);--road-elevation-average:0 3px 3px rgba(0, 0, 0, 0.16), 0 6px 8px 1px rgba(41, 44, 51, 0.12);--road-elevation-hight:0 3px 3px rgba(0, 0, 0, 0.2), 0 10px 13px 2px rgba(41, 44, 51, 0.12);--road-elevation-highest:0 4px 4px rgba(0, 0, 0, 0.24), 0 12px 16px 6px rgba(41, 44, 51, 0.16);--road-blue-klein-5:#000411;--road-blue-klein-10:#000923;--road-blue-klein-15:#000d34;--road-blue-klein-20:#001146;--road-blue-klein-30:#001a68;--road-blue-klein-40:#00228b;--road-blue-klein-50:#002bae;--road-blue-klein-60:#3355be;--road-blue-klein-70:#6680ce;--road-blue-klein-80:#99aadf;--road-blue-klein-85:#b3bfe7;--road-blue-klein-90:#ccd5ef;--road-blue-klein-95:#e6eaf7;--road-violet-electric-5:#0e0019;--road-violet-electric-10:#1c0032;--road-violet-electric-15:#2a004a;--road-violet-electric-20:#380063;--road-violet-electric-30:#550095;--road-violet-electric-40:#7100c6;--road-violet-electric-50:#8d00f8;--road-violet-electric-60:#a433f9;--road-violet-electric-70:#bb66fb;--road-violet-electric-80:#d199fc;--road-violet-electric-85:#ddb2fd;--road-violet-electric-90:#e8ccfe;--road-violet-electric-95:#f4e5fe;--road-green-monstera-5:#000c01;--road-green-monstera-10:#001901;--road-green-monstera-15:#002502;--road-green-monstera-20:#003203;--road-green-monstera-30:#005705;--road-green-monstera-40:#007006;--road-green-monstera-50:#007c07;--road-green-monstera-60:#339639;--road-green-monstera-70:#66b06a;--road-green-monstera-80:#99cb9c;--road-green-monstera-85:#b3d8b5;--road-green-monstera-90:#cce5cd;--road-green-monstera-95:#e6f2e6;--road-red-pepper-5:#150000;--road-red-pepper-10:#2a0000;--road-red-pepper-15:#3f0000;--road-red-pepper-20:#540000;--road-red-pepper-30:#7f0000;--road-red-pepper-40:#a90000;--road-red-pepper-50:#d30000;--road-red-pepper-60:#dc3333;--road-red-pepper-70:#e56666;--road-red-pepper-80:#ed9999;--road-red-pepper-85:#f2b3b3;--road-red-pepper-90:#f6cccc;--road-red-pepper-95:#fbe6e6;--road-yellow-gold-5:#130e00;--road-yellow-gold-10:#261c00;--road-yellow-gold-15:#3a2a00;--road-yellow-gold-20:#4d3800;--road-yellow-gold-30:#735400;--road-yellow-gold-40:#9a7000;--road-yellow-gold-50:#c08c00;--road-yellow-gold-60:#cda333;--road-yellow-gold-70:#d9ba66;--road-yellow-gold-80:#e6d199;--road-yellow-gold-85:#ecdcb2;--road-yellow-gold-90:#f2e8cc;--road-yellow-gold-95:#f9f4e6;--road-yellow-mikado-5:#191401;--road-yellow-mikado-10:#332702;--road-yellow-mikado-15:#4c3b04;--road-yellow-mikado-20:#664e05;--road-yellow-mikado-30:#997607;--road-yellow-mikado-40:#cc9d0a;--road-yellow-mikado-50:#ffc40c;--road-yellow-mikado-60:#ffd03d;--road-yellow-mikado-70:#ffdc6d;--road-yellow-mikado-80:#ffe79e;--road-yellow-mikado-85:#ffedb6;--road-yellow-mikado-90:#fff3ce;--road-yellow-mikado-95:#fff9e7;--road-tag-default:var(--road-blue-klein-50);--road-tag-ecology:var(--road-green-monstera-50);--road-tag-exclusivity:var(--road-yellow-gold-50);--road-tag-offer:var(--road-red-pepper-50);--road-tag-black-friday:var(--road-grey-0);--road-leading-banner:var(--road-secondary-60);--road-on-leading-banner:var(--road-grey-10);--road-rating:var(--road-yellow-mikado-50);--road-info-10:#0a1628;--road-info-20:#142c51;--road-info-30:#1d4379;--road-info-40:#2759a2;--road-info-50:#316fca;--road-info-60:#5a8cd5;--road-info-70:#83a9df;--road-info-80:#adc5ea;--road-info-90:#d6e2f4;--road-info-95:#ebf1fa;--road-success-10:#0d1b0e;--road-success-20:#1a351b;--road-success-30:#285029;--road-success-40:#356a36;--road-success-50:#428544;--road-success-60:#689d69;--road-success-70:#8eb68f;--road-success-80:#b3ceb4;--road-success-90:#d9e7da;--road-success-95:#ecf3ec;--road-warning-10:#4e3406;--road-warning-20:#9c690d;--road-warning-30:#ea9d13;--road-warning-40:#fab815;--road-warning-50:#fdc93e;--road-warning-60:#ffd966;--road-warning-70:#ffe38c;--road-warning-80:#ffecb3;--road-warning-90:#fff6d9;--road-warning-95:#fffaec;--road-danger-10:#240b09;--road-danger-20:#471711;--road-danger-30:#6b221a;--road-danger-40:#8e2e22;--road-danger-50:#b2392b;--road-danger-60:#c16155;--road-danger-70:#d18880;--road-danger-80:#e0b0aa;--road-danger-90:#f0d7d5;--road-danger-95:#f7ebea;--road-info-surface:var(--road-info-95);--road-info-surface-inverse:var(--road-info-50);--road-on-info-surface:var(--road-info-30);--road-on-info-surface-inverse:var(--road-grey-100-new);--road-info-outline:var(--road-info-50);--road-info-icon:var(--road-info-50);--road-info-icon-inverse:var(--road-grey-100-new);--road-info-background:var(--road-info-surface);--road-info-default:var(--road-info-surface-inverse);--road-info-text:var(--road-on-info-surface);--road-info-contrast:var(--road-on-info-surface-inverse);--road-success-surface:var(--road-success-95);--road-success-surface-inverse:var(--road-success-50);--road-on-success-surface:var(--road-success-30);--road-on-success-surface-inverse:var(--road-grey-100-new);--road-success-outline:var(--road-success-50);--road-success-icon:var(--road-success-50);--road-success-icon-inverse:var(--road-grey-100-new);--road-success-background:var(--road-success-surface);--road-success-default:var(--road-success-surface-inverse);--road-success-text:var(--road-on-success-surface);--road-success-contrast:var(--road-on-success-surface-inverse);--road-warning-surface:var(--road-warning-95);--road-warning-surface-inverse:var(--road-warning-50);--road-on-warning-surface:var(--road-warning-20);--road-on-warning-surface-inverse:var(--road-warning-10);--road-warning-outline:var(--road-warning-30);--road-warning-icon:var(--road-warning-30);--road-warning-icon-inverse:var(--road-warning-10);--road-warning-background:var(--road-warning-surface);--road-warning-default:var(--road-warning-surface-inverse);--road-warning-text:var(--road-on-warning-surface);--road-warning-contrast:var(--road-on-warning-surface-inverse);--road-danger-surface:var(--road-danger-95);--road-danger-surface-inverse:var(--road-danger-50);--road-on-danger-surface:var(--road-danger-30);--road-on-danger-surface-inverse:var(--road-grey-100-new);--road-danger-outline:var(--road-danger-50);--road-danger-icon:var(--road-danger-50);--road-danger-icon-inverse:var(--road-grey-100-new);--road-danger-background:var(--road-danger-surface);--road-danger-default:var(--road-danger-surface-inverse);--road-danger-text:var(--road-on-danger-surface);--road-danger-contrast:var(--road-danger-surface-inverse);--road-font:muli, arial, sans-serif;--road-font-size-75:4.6875rem;--road-font-size-65:4.0625rem;--road-font-size-57:3.5625rem;--road-font-size-49:3.0625rem;--road-font-size-43:2.6875rem;--road-font-size-37:2.3125rem;--road-font-size-32:2rem;--road-font-size-28:1.75rem;--road-font-size-24:1.5rem;--road-font-size-21:1.325rem;--road-font-size-18:1.125rem;--road-font-size-16:1rem;--road-font-size-14:0.875rem;--road-font-size-12:0.75rem;--road-font-size-10:0.625rem;--road-overline:var(--road-font-size-12);--road-legal-medium:var(--road-font-size-12);--road-label-medium:var(--road-font-size-16);--road-label-small:var(--road-font-size-12);--road-label-extra-small:var(--road-font-size-10);--road-caption-medium:var(--road-font-size-12);--road-helper-medium:var(--road-font-size-14);--road-link-large:var(--road-font-size-18);--road-link-medium:var(--road-font-size-16);--road-link-small:var(--road-font-size-14);--road-link-extra-small:var(--road-font-size-12);--road-button-medium:var(--road-font-size-16);--road-button-small:var(--road-font-size-14);--road-display-large:var(--road-font-size-57);--road-display-medium:var(--road-font-size-49);--road-display-small:var(--road-font-size-43);--road-heading-01:var(--road-font-size-32);--road-heading-02:var(--road-font-size-28);--road-heading-03:var(--road-font-size-24);--road-heading-04:var(--road-font-size-21);--road-sub-heading-large:var(--road-font-size-24);--road-sub-heading-medium:var(--road-font-size-21);--road-sub-heading-small:var(--road-font-size-18);--road-body-large:var(--road-font-size-18);--road-body-medium:var(--road-font-size-16);--road-body-small:var(--road-font-size-14);--road-spacing-01:0.125rem;--road-spacing-02:0.25rem;--road-spacing-03:0.5rem;--road-spacing-04:0.75rem;--road-spacing-05:1rem;--road-spacing-06:1.5rem;--road-spacing-07:2rem;--road-spacing-08:2.5rem;--road-spacing-09:3rem;--road-spacing-10:4rem;--road-spacing-11:5rem;--road-spacing-12:6rem;--road-spacing-13:10rem;--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--road-secondary-100:var(--road-secondary-90);--road-secondary-200:var(--road-secondary-80);--road-secondary-300:var(--road-secondary-70);--road-secondary-400:var(--road-secondary-60);--road-secondary-500:var(--road-secondary-50);--road-secondary-600:var(--road-secondary-40);--road-secondary-700:var(--road-secondary-30);--road-secondary-800:var(--road-secondary-20);--road-secondary-900:var(--road-secondary-10);--road-secondary-contrast:var(--road-on-secondary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--secondary:var(--road-primary-500);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--road-grey-000:var(--road-grey-100-new);--road-grey-100:var(--road-grey-90);--road-grey-200:var(--road-grey-80);--road-grey-300:var(--road-grey-70);--road-grey-400:var(--road-grey-60);--road-grey-500:var(--road-grey-50);--road-grey-600:var(--road-grey-40);--road-grey-700:var(--road-grey-30);--road-grey-800:var(--road-grey-20);--road-grey-900:var(--road-grey-10);--road-grey-999:var(--road-grey-0);--road-disabled:var(--road-surface-disabled);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900);--info:var(--road-info-default);--info-hover:var(--road-info-text);--info-text:var(--road-info-text);--info-background:var(--road-info-background);--info-contrast:var(--road-grey-000);--success:var(--road-success-default);--success-hover:var(--road-success-text);--success-text:var(--road-success-text);--success-background:var(--road-success-background);--success-contrast:var(--road-grey-000);--warning:var(--road-warning-default);--warning-hover:var(--road-warning-text);--warning-text:var(--road-warning-text);--warning-background:var(--road-warning-background);--warning-contrast:var(--road-grey-900);--danger:var(--road-danger-default);--danger-hover:var(--road-danger-text);--danger-text:var(--road-danger-text);--danger-background:var(--road-danger-background);--danger-contrast:var(--road-grey-000);--icon:var(--road-grey-900);--text:var(--road-grey-900);--text-second:var(--road-grey-600);--text-disabled:var(--road-grey-400);--border-form:var(--road-grey-400);--border:var(--road-grey-300);--background:var(--road-grey-100);--background-second:var(--road-grey-100);--white:var(--road-grey-000);--font:var(--road-font)}@media (min-width: 768px){body{--road-display-large:var(--road-font-size-75);--road-display-medium:var(--road-font-size-65);--road-display-small:var(--road-font-size-57);--road-heading-01:var(--road-font-size-49);--road-heading-02:var(--road-font-size-37);--road-heading-03:var(--road-font-size-32);--road-heading-04:var(--road-font-size-28);--road-sub-heading-large:var(--road-font-size-32);--road-sub-heading-medium:var(--road-font-size-28);--road-sub-heading-small:var(--road-font-size-24)}}.auto5-theme{--road-brand-primary:#002b6f;--road-primary-10:#001638;--road-primary-20:#002b6f;--road-primary-30:#004293;--road-primary-40:#005ab8;--road-primary-50:#0071dc;--road-primary-60:#338de3;--road-primary-70:#66aaea;--road-primary-80:#99c6f1;--road-primary-90:#cce3f8;--road-brand-secondary:#e00008;--road-secondary-10:#2d0002;--road-secondary-20:#5a0003;--road-secondary-30:#860005;--road-secondary-40:#b30006;--road-secondary-50:#e00008;--road-secondary-60:#e63339;--road-secondary-70:#ec666b;--road-secondary-80:#f3999c;--road-secondary-90:#f9ccce;--road-grey-0:#000000;--road-grey-5:#11151d;--road-grey-10:#22293a;--road-grey-15:#2c3345;--road-grey-20:#353c50;--road-grey-30:#51586c;--road-grey-40:#6d7488;--road-grey-50:#898fa0;--road-grey-60:#a4a9b6;--road-grey-70:#c1c4cd;--road-grey-80:#dddfe4;--road-grey-85:#e9eaed;--road-grey-90:#f4f4f6;--road-grey-95:#fafafb;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-primary-20);--road-on-header-surface:var(--road-grey-100-new);--road-header-surface-disabled:rgba(255, 255, 255, 0.32);--road-on-header-surface-disabled:rgba(255, 255, 255, 0.4);--road-header-outline:var(--road-primary-20);--road-header-icon:var(--road-grey-100-new);--road-icon-header-variant:var(--road-secondary-60);--road-header-badge:var(--road-secondary-60);--road-on-header-badge:var(--road-grey-100-new);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-10);--road-on-surface-weak:var(--road-grey-20);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-50);--road-primary-variant:var(--road-primary-30);--road-on-primary:var(--road-grey-100-new);--road-secondary:var(--road-secondary-50);--road-secondary-variant:var(--road-secondary-30);--road-on-secondary:var(--road-grey-100-new);--road-outline:var(--road-grey-30);--road-outline-weak:var(--road-grey-40);--road-outline-variant:var(--road-primary-30);--road-icon:var(--road-grey-10);--road-icon-variant:var(--road-secondary-50);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-grey-70);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-10);--road-button-primary:var(--road-primary-40);--road-button-primary-variant:var(--road-primary-30);--road-on-button-primary:var(--road-grey-100-new);--road-button-secondary:var(--road-secondary-60);--road-button-secondary-variant:var(--road-secondary-30);--road-on-button-secondary:var(--road-grey-100-new);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-90);--road-button-tertiary-outline:var(--road-primary-40);--road-on-button-tertiary:var(--road-primary-50);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-90);--road-on-button-ghost:var(--road-primary-40);--road-button-fab:var(--road-primary-50);--road-on-button-fab:var(--road-grey-100-new);--road-button-fab-variant:var(--road-primary-30);--road-link-primary:var(--road-primary-40);--road-link-secondary:var(--road-grey-10);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-primary-50);--road-input-surface-variant:var(--road-primary-30);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-primary-30);--road-decorative-surface:var(--road-secondary-50);--road-decorative-surface-variant:var(--road-primary-50);--road-leading-banner:var(--road-yellow-mikado-50);--road-on-leading-banner:var(--road-grey-10);--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--road-secondary-100:var(--road-secondary-90);--road-secondary-200:var(--road-secondary-80);--road-secondary-300:var(--road-secondary-70);--road-secondary-400:var(--road-secondary-60);--road-secondary-500:var(--road-secondary-50);--road-secondary-600:var(--road-secondary-40);--road-secondary-700:var(--road-secondary-30);--road-secondary-800:var(--road-secondary-20);--road-secondary-900:var(--road-secondary-10);--road-secondary-contrast:var(--road-on-secondary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--secondary:var(--road-brand-secondary);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900)}.atu-theme{--road-brand-primary:#bb1e10;--road-primary-10:#250603;--road-primary-20:#4b0b06;--road-primary-30:#70120a;--road-primary-40:#96180d;--road-primary-50:#bb1e10;--road-primary-60:#c94b40;--road-primary-70:#d67870;--road-primary-80:#e4a59f;--road-primary-90:#f1d2cf;--road-brand-secondary:#bb1e10;--road-secondary-10:#0c0a0a;--road-secondary-20:#292727;--road-secondary-30:#474545;--road-secondary-40:#646262;--road-secondary-50:#827f7f;--road-secondary-60:#9f9c9c;--road-secondary-70:#bcbaba;--road-secondary-80:#dad7d7;--road-secondary-90:#f7f4f4;--road-grey-0:#000000;--road-grey-5:#060505;--road-grey-10:#0c0a0a;--road-grey-15:#1b1919;--road-grey-20:#292727;--road-grey-30:#474545;--road-grey-40:#646262;--road-grey-50:#827f7f;--road-grey-60:#9f9c9c;--road-grey-70:#bcbaba;--road-grey-80:#dad7d7;--road-grey-85:#e9e6e6;--road-grey-90:#f7f4f4;--road-grey-95:#fbfafa;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-grey-90);--road-on-header-surface:var(--road-grey-20);--road-header-surface-disabled:rgba(130, 127, 127, 0.24);--road-on-header-surface-disabled:rgba(41, 39, 39, 0.32);--road-header-outline:rgba(71, 69, 69, 0.24);--road-header-icon:var(--road-grey-20);--road-icon-header-variant:var(--road-primary-50);--road-header-badge:var(--road-primary-50);--road-on-header-badge:var(--road-grey-100-new);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-20);--road-on-surface-weak:var(--road-grey-20);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-50);--road-primary-variant:var(--road-primary-30);--road-on-primary:var(--road-grey-100-new);--road-secondary:var(--road-secondary-20);--road-secondary-variant:var(--road-secondary-10);--road-on-secondary:var(--road-grey-100-new);--road-outline:var(--road-grey-30);--road-outline-weak:var(--road-grey-40);--road-outline-variant:var(--road-secondary-10);--road-icon:var(--road-grey-20);--road-icon-variant:var(--road-primary-50);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-secondary-60);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-20);--road-button-primary:var(--road-primary-50);--road-button-primary-variant:var(--road-primary-30);--road-on-button-primary:var(--road-grey-100-new);--road-button-secondary:var(--road-secondary-10);--road-button-secondary-variant:var(--road-secondary-40);--road-on-button-secondary:var(--road-grey-100-new);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-90);--road-button-tertiary-outline:var(--road-primary-50);--road-on-button-tertiary:var(--road-primary-50);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-90);--road-on-button-ghost:var(--road-primary-4à);--road-button-fab:var(--road-primary-50);--road-on-button-fab:var(--road-grey-100-new);--road-button-fab-variant:var(--road-primary-30);--road-link-primary:var(--road-primary-40);--road-link-secondary:var(--road-grey-20);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-secondary-10);--road-input-surface-variant:var(--road-secondary-40);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-secondary-10);--road-decorative-surface:var(--road-primary-50);--road-decorative-surface-variant:var(--road-primary-50);--road-leading-banner:var(--road-secondary-10);--road-on-leading-banner:var(--road-grey-100-new);--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--road-secondary-100:#f5cccc;--road-secondary-200:#e99d9a;--road-secondary-300:#db706b;--road-secondary-400:#cc463c;--road-secondary-500:#bb1e10;--road-secondary-600:#9e2013;--road-secondary-700:#832114;--road-secondary-800:#681f14;--road-secondary-900:#501b12;--road-secondary-contrast:var(--road-on-secondary);--secondary:var(--road-brand-secondary);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900)}.atu-theme road-banner{color:var(--road-grey-100-new)}.midas-theme{--road-brand-primary:#ffd300;--road-primary-10:#280f06;--road-primary-20:#6e450d;--road-primary-30:#b37a15;--road-primary-40:#f9b01c;--road-primary-50:#fcc20e;--road-primary-60:#ffd300;--road-primary-70:#ffde40;--road-primary-80:#ffe980;--road-primary-90:#fff4bf;--road-brand-secondary:#000000;--road-secondary-10:#1a1a1a;--road-secondary-20:#353535;--road-secondary-30:#515151;--road-secondary-40:#6c6c6c;--road-secondary-50:#878787;--road-secondary-60:#a2a2a2;--road-secondary-70:#bebebe;--road-secondary-80:#d9d9d9;--road-secondary-90:#f4f4f4;--road-grey-0:#000000;--road-grey-5:#0d0d0d;--road-grey-10:#1a1a1a;--road-grey-15:#282828;--road-grey-20:#353535;--road-grey-30:#515151;--road-grey-40:#6c6c6c;--road-grey-50:#878787;--road-grey-60:#a2a2a2;--road-grey-70:#bebebe;--road-grey-80:#d9d9d9;--road-grey-85:#e7e7e7;--road-grey-90:#f4f4f4;--road-grey-95:#fafafa;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-secondary-20);--road-on-header-surface:var(--road-grey-10);--road-header-surface-disabled:rgba(135, 135, 135, 0.24);--road-on-header-surface-disabled:rgba(26, 26, 26, 0.32);--road-header-outline:rgba(162, 162, 162, 0.24);--road-header-icon:var(--road-grey-10);--road-icon-header-variant:var(--road-primary-40);--road-header-badge:var(--road-primary-60);--road-on-header-badge:var(--road-grey-10);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-10);--road-on-surface-weak:var(--road-grey-20);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-60);--road-primary-variant:var(--road-primary-40);--road-on-primary:var(--road-grey-10);--road-secondary:var(--road-secondary-20);--road-secondary-variant:var(--road-secondary-10);--road-on-secondary:var(--road-grey-100-new);--road-outline:var(--road-grey-30);--road-outline-weak:var(--road-grey-40);--road-outline-variant:var(--road-primary-40);--road-icon:var(--road-grey-10);--road-icon-variant:var(--road-primary-40);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-primary-60);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-10);--road-button-primary:var(--road-primary-60);--road-button-primary-variant:var(--road-primary-40);--road-on-button-primary:var(--road-grey-10);--road-button-secondary:var(--road-secondary-20);--road-button-secondary-variant:var(--road-secondary-10);--road-on-button-secondary:var(--road-grey-10);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-80);--road-button-tertiary-outline:var(--road-primary-60);--road-on-button-tertiary:var(--road-grey-10);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-80);--road-on-button-ghost:var(--road-grey-10);--road-button-fab:var(--road-primary-60);--road-on-button-fab:var(--road-grey-10);--road-button-fab-variant:var(--road-primary-30);--road-link-primary:var(--road-grey-10);--road-link-secondary:var(--road-primary-30);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-secondary-10);--road-input-surface-variant:var(--road-secondary-20);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-secondary-10);--road-decorative-surface:var(--road-primary-40);--road-decorative-surface-variant:var(--road-secondary-20);--road-leading-banner:var(--road-secondary-10);--road-on-leading-banner:var(--road-grey-100-new);--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--road-secondary-100:var(--road-secondary-90);--road-secondary-200:var(--road-secondary-80);--road-secondary-300:var(--road-secondary-70);--road-secondary-400:var(--road-secondary-60);--road-secondary-500:var(--road-secondary-50);--road-secondary-600:var(--road-secondary-40);--road-secondary-700:var(--road-secondary-30);--road-secondary-800:var(--road-secondary-20);--road-secondary-900:var(--road-secondary-10);--road-secondary-contrast:var(--road-on-secondary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--secondary:var(--road-brand-secondary);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900)}.midas-theme road-button[outline][color="primary"],.midas-theme road-button[outline][color="secondary"],.midas-theme .link{color:var(--road-grey-900)}.midas-theme .link:focus,.midas-theme .link:hover{color:var(--road-grey-600)}.mobivia-theme{--road-brand-primary:#b40063;--road-primary-10:#2e0011;--road-primary-20:#5c0026;--road-primary-30:#7f003b;--road-primary-40:#9b004f;--road-primary-50:#b40063;--road-primary-60:#c42674;--road-primary-70:#d24d87;--road-primary-80:#e282a6;--road-primary-90:#f1bbcd;--road-brand-secondary:#f8ab00;--road-secondary-10:#4c2800;--road-secondary-20:#754300;--road-secondary-30:#995e00;--road-secondary-40:#bd7b00;--road-secondary-50:#f8ab00;--road-secondary-60:#ffbb21;--road-secondary-70:#ffca42;--road-secondary-80:#ffda70;--road-secondary-90:#ffeaa8;--road-grey-0:#000000;--road-grey-5:#141413;--road-grey-10:#282826;--road-grey-15:#333331;--road-grey-20:#3d3d3c;--road-grey-30:#565656;--road-grey-40:#757574;--road-grey-50:#8e8e8e;--road-grey-60:#a9a8a7;--road-grey-70:#c3c3c1;--road-grey-80:#deddda;--road-grey-85:#ebeae6;--road-grey-90:#f8f7f3;--road-grey-95:#fcfbf9;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-primary-50);--road-on-header-surface:var(--road-grey-100-new);--road-header-surface-disabled:rgba(255, 255, 255, 0.32);--road-on-header-surface-disabled:rgba(255, 255, 255, 0.4);--road-header-outline:var(--road-primary-50);--road-header-icon:var(--road-grey-10-new);--road-variant-icon-header:var(--road-secondary-60);--road-header-badge:var(--road-secondary-60);--road-on-header-badge:var(--road-grey-10);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-10);--road-on-surface-weak:var(--road-grey-20);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-50);--road-primary-variant:var(--road-primary-30);--road-on-primary:var(--road-grey-100-new);--road-secondary:var(--road-secondary-50);--road-secondary-variant:var(--road-secondary-40);--road-on-secondary:var(--road-grey-10);--road-outline:var(--road-grey-30);--road-outline-weak:var(--road-grey-40);--road-outline-variant:var(--road-primary-30);--road-icon:var(--road-grey-10);--road-icon-variant:var(--road-secondary-40);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-secondary-60);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-10);--road-button-primary:var(--road-primary-50);--road-button-primary-variant:var(--road-primary-30);--road-on-button-primary:var(--road-grey-100-new);--road-button-secondary:var(--road-secondary-50);--road-button-secondary-variant:var(--road-secondary-40);--road-on-button-secondary:var(--road-grey-10);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-90);--road-button-tertiary-outline:var(--road-primary-50);--road-on-button-tertiary:var(--road-grey-10);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-90);--road-on-button-ghost:var(--road-primary-50);--road-button-fab:var(--road-secondary-50);--road-on-button-fab:var(--road-grey-10);--road-button-fab-variant:var(--road-secondary-40);--road-link-primary:var(--road-primary-50);--road-link-secondary:var(--road-grey-10);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-primary-50);--road-input-surface-variant:var(--road-primary-30);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-grey-0);--road-decorative-surface:var(--road-secondary-50);--road-decorative-surface-variant:var(--road-primary-50);--road-leading-banner:var(--road-secondary-50);--road-on-leading-banner:var(--road-grey-10);--road-grey-000:var(--road-grey-100);--road-grey-200:var(--road-grey-80);--road-grey-300:var(--road-grey-70);--road-grey-400:var(--road-grey-60);--road-grey-500:var(--road-grey-50);--road-grey-600:var(--road-grey-40);--road-grey-700:var(--road-grey-30);--road-grey-800:var(--road-grey-20);--road-grey-900:var(--road-grey-10);--road-grey-999:var(--road-grey-0);--road-disabled:var(--road-surface-disabled);--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--road-secondary-100:var(--road-secondary-90);--road-secondary-200:var(--road-secondary-80);--road-secondary-300:var(--road-secondary-70);--road-secondary-400:var(--road-secondary-60);--road-secondary-500:var(--road-secondary-50);--road-secondary-600:var(--road-secondary-40);--road-secondary-700:var(--road-secondary-30);--road-secondary-800:var(--road-secondary-20);--road-secondary-900:var(--road-secondary-10);--road-secondary-contrast:var(--road-on-secondary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--secondary:var(--road-brand-secondary);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900)}.bythjul-theme{--road-brand-primary:#103d6d;--road-primary-10:#173557;--road-primary-20:#103d6d;--road-primary-30:#134b85;--road-primary-40:#16579a;--road-primary-50:#1961ac;--road-primary-60:#748fbf;--road-primary-70:#a2b2d1;--road-primary-80:#c6cfe1;--road-primary-90:#e4e8f1;--road-primary-95:#f2f4f8;--road-brand-secondary:#f5a973;--road-secondary-10:#6c3f07;--road-secondary-20:#99590a;--road-secondary-30:#bb6c0c;--road-secondary-40:#d87d0e;--road-secondary-50:#f28c10;--road-secondary-60:#f5a973;--road-secondary-70:#f7c2a2;--road-secondary-80:#fad8c6;--road-secondary-90:#fcede4;--road-secondary-95:#fef6f2;--road-grey-0:#000000;--road-grey-5:#141414;--road-grey-10:#1c1c1c;--road-grey-15:#232323;--road-grey-20:#282828;--road-grey-30:#2d2d2d;--road-grey-40:#313131;--road-grey-50:#333333;--road-grey-60:#828282;--road-grey-70:#a3a3a3;--road-grey-80:#bebebe;--road-grey-85:#d6d6d6;--road-grey-90:#ebebeb;--road-grey-95:#f8f8f8;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-primary-50);--road-on-header-surface:var(--road-grey-100-new);--road-header-surface-disabled:rgba(255, 255, 255, 0.32);--road-on-header-surface-disabled:rgba(255, 255, 255, 0.4);--road-header-outline:var(--road-primary-50);--road-header-icon:var(--road-grey-10-new);--road-variant-icon-header:var(--road-secondary-60);--road-header-badge:var(--road-secondary-60);--road-on-header-badge:var(--road-grey-10);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-10);--road-on-surface-weak:var(--road-grey-20);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-50);--road-primary-variant:var(--road-primary-30);--road-on-primary:var(--road-grey-100-new);--road-secondary:var(--road-secondary-50);--road-secondary-variant:var(--road-secondary-40);--road-on-secondary:var(--road-grey-10);--road-outline:var(--road-grey-30);--road-outline-weak:var(--road-grey-40);--road-outline-variant:var(--road-primary-30);--road-icon:var(--road-grey-10);--road-icon-variant:var(--road-secondary-40);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-secondary-60);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-10);--road-button-primary:var(--road-primary-50);--road-button-primary-variant:var(--road-primary-30);--road-on-button-primary:var(--road-grey-100-new);--road-button-secondary:var(--road-secondary-50);--road-button-secondary-variant:var(--road-secondary-40);--road-on-button-secondary:var(--road-grey-10);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-90);--road-button-tertiary-outline:var(--road-primary-50);--road-on-button-tertiary:var(--road-grey-10);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-90);--road-on-button-ghost:var(--road-grey-10);--road-button-fab:var(--road-secondary-50);--road-on-button-fab:var(--road-grey-10);--road-button-fab-variant:var(--road-secondary-40);--road-link-primary:var(--road-primary-50);--road-link-secondary:var(--road-grey-10);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-primary-50);--road-input-surface-variant:var(--road-primary-30);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-grey-0);--road-decorative-surface:var(--road-secondary-50);--road-decorative-surface-variant:var(--road-primary-50);--road-leading-banner:var(--road-secondary-50);--road-on-leading-banner:var(--road-grey-10);--road-grey-000:var(--road-grey-100);--road-grey-200:var(--road-grey-80);--road-grey-300:var(--road-grey-70);--road-grey-400:var(--road-grey-60);--road-grey-500:var(--road-grey-50);--road-grey-600:var(--road-grey-40);--road-grey-700:var(--road-grey-30);--road-grey-800:var(--road-grey-20);--road-grey-900:var(--road-grey-10);--road-grey-999:var(--road-grey-0);--road-disabled:var(--road-surface-disabled);--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--road-secondary-100:var(--road-secondary-90);--road-secondary-200:var(--road-secondary-80);--road-secondary-300:var(--road-secondary-70);--road-secondary-400:var(--road-secondary-60);--road-secondary-500:var(--road-secondary-50);--road-secondary-600:var(--road-secondary-40);--road-secondary-700:var(--road-secondary-30);--road-secondary-800:var(--road-secondary-20);--road-secondary-900:var(--road-secondary-10);--road-secondary-contrast:var(--road-on-secondary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--secondary:var(--road-brand-secondary);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900)}.skruvat-theme{--road-brand-primary:#a73b0d;--road-primary-10:#471c0b;--road-primary-20:#a73b0d;--road-primary-30:#ff4b00;--road-primary-40:#ff6d2f;--road-primary-50:#d7734b;--road-primary-60:#ffaf8f;--road-primary-70:#ffc3ab;--road-primary-80:#ffe9e1;--road-primary-90:#fffbfa;--road-brand-secondary:#382e29;--road-secondary-10:#382e29;--road-secondary-20:#6b6868;--road-secondary-30:#807a7a;--road-secondary-40:#958d8c;--road-secondary-50:#aaa2a1;--road-secondary-60:#bebab9;--road-secondary-70:#d3d3d3;--road-secondary-80:#dddddd;--road-secondary-90:#f0f0f0;--road-secondary-95:#fafafa;--road-grey-0:#000000;--road-grey-5:#19160c;--road-grey-10:#382e29;--road-grey-15:#565656;--road-grey-20:#6b6868;--road-grey-30:#807a7a;--road-grey-40:#958d8c;--road-grey-50:#aaa2a1;--road-grey-60:#bebab9;--road-grey-70:#d3d3d3;--road-grey-80:#dddddd;--road-grey-85:#e7e7e7;--road-grey-90:#f0f0f0;--road-grey-95:#fafafa;--road-grey-100-new:#ffffff;--road-header-surface:var(--road-primary-50);--road-on-header-surface:var(--road-grey-100-new);--road-header-surface-disabled:rgba(255, 255, 255, 0.32);--road-on-header-surface-disabled:rgba(255, 255, 255, 0.4);--road-header-outline:var(--road-primary-50);--road-header-icon:var(--road-grey-10-new);--road-variant-icon-header:var(--road-secondary-60);--road-header-badge:var(--road-secondary-60);--road-on-header-badge:var(--road-grey-10);--road-surface:var(--road-grey-100-new);--road-surface-inverse:var(--road-grey-90);--road-surface-disabled:rgba(137, 143, 160, 0.24);--road-on-surface:var(--road-grey-10);--road-on-surface-weak:var(--road-grey-20);--road-on-surface-extra-weak:var(--road-grey-40);--road-on-surface-disabled:rgba(34, 41, 58, 0.32);--road-primary:var(--road-primary-50);--road-primary-variant:var(--road-primary-30);--road-on-primary:var(--road-grey-100-new);--road-secondary:var(--road-secondary-50);--road-secondary-variant:var(--road-secondary-40);--road-on-secondary:var(--road-grey-10);--road-outline:var(--road-grey-30);--road-outline-weak:var(--road-grey-40);--road-outline-variant:var(--road-primary-30);--road-icon:var(--road-grey-10);--road-icon-variant:var(--road-primary-40);--road-icon-inverse:var(--road-grey-100-new);--road-icon-inverse-variant:var(--road-secondary-60);--road-overlay:rgba(0, 0, 0, 0.64);--road-overlay-inverse:rgba(255, 255, 255, 0.64);--road-on-overlay:var(--road-grey-100-new);--road-on-overlay-inverse:var(--road-grey-10);--road-button-primary:var(--road-primary-50);--road-button-primary-variant:var(--road-primary-30);--road-on-button-primary:var(--road-grey-100-new);--road-button-secondary:var(--road-secondary-50);--road-button-secondary-variant:var(--road-secondary-40);--road-on-button-secondary:var(--road-grey-10);--road-button-tertiary:rgba(241, 187, 205, 0);--road-button-tertiary-variant:var(--road-primary-90);--road-button-tertiary-outline:var(--road-primary-50);--road-on-button-tertiary:var(--road-grey-10);--road-button-ghost:rgba(241, 187, 205, 0);--road-button-ghost-variant:var(--road-primary-90);--road-on-button-ghost:var(--road-grey-10);--road-button-fab:var(--road-secondary-50);--road-on-button-fab:var(--road-grey-10);--road-button-fab-variant:var(--road-secondary-40);--road-link-primary:var(--road-primary-50);--road-link-secondary:var(--road-grey-10);--road-link-inverse:var(--road-grey-100-new);--road-input-surface:var(--road-primary-50);--road-input-surface-variant:var(--road-primary-30);--road-input-outline:var(--road-grey-40);--road-input-outline-variant:var(--road-grey-0);--road-decorative-surface:var(--road-secondary-50);--road-decorative-surface-variant:var(--road-primary-50);--road-leading-banner:var(--road-secondary-50);--road-on-leading-banner:var(--road-grey-10);--road-grey-000:var(--road-grey-100);--road-grey-200:var(--road-grey-80);--road-grey-300:var(--road-grey-70);--road-grey-400:var(--road-grey-60);--road-grey-500:var(--road-grey-50);--road-grey-600:var(--road-grey-40);--road-grey-700:var(--road-grey-30);--road-grey-800:var(--road-grey-20);--road-grey-900:var(--road-grey-10);--road-grey-999:var(--road-grey-0);--road-disabled:var(--road-surface-disabled);--road-primary-100:var(--road-primary-90);--road-primary-200:var(--road-primary-80);--road-primary-300:var(--road-primary-70);--road-primary-400:var(--road-primary-60);--road-primary-500:var(--road-primary-50);--road-primary-600:var(--road-primary-40);--road-primary-700:var(--road-primary-30);--road-primary-800:var(--road-primary-20);--road-primary-900:var(--road-primary-10);--road-primary-contrast:var(--road-on-primary);--road-secondary-100:var(--road-secondary-90);--road-secondary-200:var(--road-secondary-80);--road-secondary-300:var(--road-secondary-70);--road-secondary-400:var(--road-secondary-60);--road-secondary-500:var(--road-secondary-50);--road-secondary-600:var(--road-secondary-40);--road-secondary-700:var(--road-secondary-30);--road-secondary-800:var(--road-secondary-20);--road-secondary-900:var(--road-secondary-10);--road-secondary-contrast:var(--road-on-secondary);--primary:var(--road-brand-primary);--primary-hover:var(--road-grey-999);--primary-darken:var(--road-grey-999);--primary-lighten:var(--road-primary-100);--primary-contrast:var(--road-grey-000);--secondary:var(--road-brand-secondary);--secondary-hover:var(--road-primary-700);--secondary-darken:var(--road-primary-700);--secondary-lighten:var(--road-primary-100);--secondary-contrast:var(--road-grey-000);--accent:var(--road-secondary-500);--accent-hover:var(--road-secondary-700);--accent-darken:var(--road-secondary-700);--accent-lighten:var(--road-secondary-100);--accent-contrast:var(--road-grey-900)}html{-webkit-text-size-adjust:100%}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible;}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{padding:0;border-style:none}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;display:table;max-width:100%;padding:0;color:inherit;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none}[type="search"]{outline-offset:-2px;-webkit-appearance:textfield;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*,*::before,*::after{box-sizing:border-box}input[type="number"]{appearance:textfield}body{font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-14);line-height:1.5;color:var(--road-grey-10)}img,embed,iframe,object,audio,video{max-width:100%;height:auto}iframe{border:0}input,textarea,button,select,a{-webkit-tap-highlight-color:rgba(0,0,0,0)}a{text-decoration:none;cursor:pointer}*.focus-visible{outline:auto}@font-face{font-family:Muli;font-style:normal;font-weight:400;font-display:swap;src:local("Muli Regular"), local("Muli-Regular"), url("fonts/Muli-Regular.woff2") format("woff2"), url("fonts/Muli-Regular.woff") format("woff");unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:Muli;font-style:normal;font-weight:400;font-display:swap;src:local("Muli Regular"), local("Muli-Regular"), url("fonts/Muli-Regular.woff2") format("woff2"), url("fonts/Muli-Regular.woff") format("woff");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:Muli;font-style:normal;font-weight:700;font-display:swap;src:local("Muli Bold"), local("Muli-Bold"), url("fonts/Muli-Bold.woff2") format("woff2"), url("fonts/Muli-Bold.woff") format("woff");unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:Muli;font-style:normal;font-weight:700;font-display:swap;src:local("Muli Bold"), local("Muli-Bold"), url("fonts/Muli-Bold.woff2") format("woff2"), url("fonts/Muli-Bold.woff") format("woff");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}.display-large{font-size:var(--road-display-large);font-weight:700;line-height:1.5}.display-medium{font-size:var(--road-display-medium);font-weight:700;line-height:1.5}.display-small{font-size:var(--road-display-small);font-weight:700;line-height:1.5}.h1,.h2,.h3,.h4,.h5,.h6,.h7,.h8,.h9{padding:0;font-weight:700;line-height:1.5;color:var(--road-on-surface)}.title-primary{color:var(--road-brand-primary)}.h1,.h2,.h3,.h4,.h5,.h6,.h7,.h8,.h9,.text-content,.text-small,.text-legal,.text-large,.text-medium{margin:0 0 1rem;font-family:var(--road-font, sans-serif)}.h1{font-size:var(--road-heading-01)}.h2{font-size:var(--road-heading-02)}.h3{font-size:var(--road-heading-03)}.h4{font-size:var(--road-heading-04)}.h5{font-size:var(--road-font-size-24)}.h6{font-size:var(--road-font-size-21)}.h7{font-size:var(--road-font-size-18)}.h8{font-size:var(--road-font-size-16)}.h9{font-size:var(--road-font-size-12);text-transform:uppercase}.sub-heading-large{font-size:var(--road-sub-heading-large);font-weight:700;line-height:1.5}.sub-heading-medium{font-size:var(--road-sub-heading-medium);font-weight:700;line-height:1.5}.sub-heading-small{font-size:var(--road-sub-heading-small);font-weight:700;line-height:1.5}.overline{font-size:var(--road-overline);font-weight:700;text-transform:uppercase}.text-content,.text-small,.text-legal,.text-large,.text-medium{line-height:1.5}.text-large{font-size:var(--road-body-large);color:var(--road-grey-10)}.text-content{font-size:var(--road-body-medium);color:var(--road-grey-10)}.text-medium{font-size:var(--road-body-small);color:var(--road-grey-10)}.text-small{font-size:var(--road-legal-medium)}.text-legal{font-size:var(--road-legal-medium);color:var(--road-grey-60)}.title-underline::after{display:block;width:50px;height:3px;margin-top:8px;content:"";background-color:var(--road-decorative-surface)}.text-center.title-underline::after{margin:8px auto 0}.text-right.title-underline::after{position:absolute;right:2rem}.link{color:var(--road-link-primary);text-decoration:underline;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.link:hover{text-decoration:none}.link:focus,.link.focus-visible{outline:auto}.link-default{color:var(--road-link-secondary)}.link-white{color:var(--road-link-inverse)}.link-md{font-size:var(--road-link-medium)}.link-sm{font-size:var(--road-link-small)}.link road-icon{color:currentColor}.d-none{display:none}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-block{display:block}.d-flex{display:flex}.d-inline-flex{display:inline-flex}@media (min-width: 576px){.d-sm-none{display:none}.d-sm-inline{display:inline}.d-sm-inline-block{display:inline-block}.d-sm-block{display:block}.d-sm-flex{display:flex}.d-sm-inline-flex{display:inline-flex}}@media (min-width: 768px){.d-md-none{display:none}.d-md-inline{display:inline}.d-md-inline-block{display:inline-block}.d-md-block{display:block}.d-md-flex{display:flex}.d-md-inline-flex{display:inline-flex}}@media (min-width: 992px){.d-lg-none{display:none}.d-lg-inline{display:inline}.d-lg-inline-block{display:inline-block}.d-lg-block{display:block}.d-lg-flex{display:flex}.d-lg-inline-flex{display:inline-flex}}@media (min-width: 1200px){.d-xl-none{display:none}.d-xl-inline{display:inline}.d-xl-inline-block{display:inline-block}.d-xl-block{display:block}.d-xl-flex{display:flex}.d-xl-inline-flex{display:inline-flex}}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-column{flex-direction:column}.flex-column-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-grow-0{flex-grow:0}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-shrink-1{flex-shrink:1}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}@media (min-width: 576px){.flex-sm-row{flex-direction:row}.flex-sm-row-reverse{flex-direction:row-reverse}.flex-sm-column{flex-direction:column}.flex-sm-column-reverse{flex-direction:column-reverse}.flex-sm-wrap{flex-wrap:wrap}.flex-sm-nowrap{flex-wrap:nowrap}.justify-content-sm-start{justify-content:flex-start}.justify-content-sm-end{justify-content:flex-end}.justify-content-sm-center{justify-content:center}.justify-content-sm-between{justify-content:space-between}.justify-content-sm-around{justify-content:space-around}.align-items-sm-start{align-items:flex-start}.align-items-sm-end{align-items:flex-end}.align-items-sm-center{align-items:center}.align-items-sm-baseline{align-items:baseline}.align-items-sm-stretch{align-items:stretch}}@media (min-width: 768px){.flex-md-row{flex-direction:row}.flex-md-row-reverse{flex-direction:row-reverse}.flex-md-column{flex-direction:column}.flex-md-column-reverse{flex-direction:column-reverse}.flex-md-wrap{flex-wrap:wrap}.flex-md-nowrap{flex-wrap:nowrap}.justify-content-md-start{justify-content:flex-start}.justify-content-md-end{justify-content:flex-end}.justify-content-md-center{justify-content:center}.justify-content-md-between{justify-content:space-between}.justify-content-md-around{justify-content:space-around}.align-items-md-start{align-items:flex-start}.align-items-md-end{align-items:flex-end}.align-items-md-center{align-items:center}.align-items-md-baseline{align-items:baseline}.align-items-md-stretch{align-items:stretch}}@media (min-width: 992px){.flex-lg-row{flex-direction:row}.flex-lg-row-reverse{flex-direction:row-reverse}.flex-lg-column{flex-direction:column}.flex-lg-column-reverse{flex-direction:column-reverse}.flex-lg-wrap{flex-wrap:wrap}.flex-lg-nowrap{flex-wrap:nowrap}.justify-content-lg-start{justify-content:flex-start}.justify-content-lg-end{justify-content:flex-end}.justify-content-lg-center{justify-content:center}.justify-content-lg-between{justify-content:space-between}.justify-content-lg-around{justify-content:space-around}.align-items-lg-start{align-items:flex-start}.align-items-lg-end{align-items:flex-end}.align-items-lg-center{align-items:center}.align-items-lg-baseline{align-items:baseline}.align-items-lg-stretch{align-items:stretch}}@media (min-width: 1200px){.flex-xl-row{flex-direction:row}.flex-xl-row-reverse{flex-direction:row-reverse}.flex-xl-column{flex-direction:column}.flex-xl-column-reverse{flex-direction:column-reverse}.flex-xl-wrap{flex-wrap:wrap}.flex-xl-nowrap{flex-wrap:nowrap}.justify-content-xl-start{justify-content:flex-start}.justify-content-xl-end{justify-content:flex-end}.justify-content-xl-center{justify-content:center}.justify-content-xl-between{justify-content:space-between}.justify-content-xl-around{justify-content:space-around}.align-items-xl-start{align-items:flex-start}.align-items-xl-end{align-items:flex-end}.align-items-xl-center{align-items:center}.align-items-xl-baseline{align-items:baseline}.align-items-xl-stretch{align-items:stretch}}.align-content-start{align-content:flex-start}.align-content-end{align-content:flex-end}.align-content-center{align-content:center}.align-content-between{align-content:space-between}.align-content-around{align-content:space-around}.align-content-stretch{align-content:stretch}.align-self-auto{align-self:auto}.align-self-start{align-self:flex-start}.align-self-end{align-self:flex-end}.align-self-center{align-self:center}.align-self-baseline{align-self:baseline}.align-self-stretch{align-self:stretch}.m-0{margin:0}.m-4{margin:var(--road-spacing-02)}.m-8{margin:var(--road-spacing-03)}.m-12{margin:var(--road-spacing-04)}.m-16{margin:var(--road-spacing-05)}.m-24{margin:var(--road-spacing-06)}.m-auto{margin:auto}.mx-0{margin-right:0;margin-left:0}.mx-4{margin-right:var(--road-spacing-02);margin-left:var(--road-spacing-02)}.mx-8{margin-right:var(--road-spacing-03);margin-left:var(--road-spacing-03)}.mx-12{margin-right:var(--road-spacing-04);margin-left:var(--road-spacing-04)}.mx-16{margin-right:var(--road-spacing-05);margin-left:var(--road-spacing-05)}.mx-24{margin-right:var(--road-spacing-06);margin-left:var(--road-spacing-06)}.mx-auto{margin-right:auto;margin-left:auto}.my-0{margin-top:0;margin-bottom:0}.my-4{margin-top:var(--road-spacing-02);margin-bottom:var(--road-spacing-02)}.my-8{margin-top:var(--road-spacing-03);margin-bottom:var(--road-spacing-03)}.my-12{margin-top:var(--road-spacing-04);margin-bottom:var(--road-spacing-04)}.my-16{margin-top:var(--road-spacing-05);margin-bottom:var(--road-spacing-05)}.my-24{margin-top:var(--road-spacing-06);margin-bottom:var(--road-spacing-06)}.my-auto{margin-top:auto;margin-bottom:auto}.mt-0{margin-top:0}.mt-4{margin-top:var(--road-spacing-02)}.mt-8{margin-top:var(--road-spacing-03)}.mt-12{margin-top:var(--road-spacing-04)}.mt-16{margin-top:var(--road-spacing-05)}.mt-24{margin-top:var(--road-spacing-06)}.mr-0{margin-right:0}.mr-4{margin-right:var(--road-spacing-02)}.mr-8{margin-right:var(--road-spacing-03)}.mr-12{margin-right:var(--road-spacing-04)}.mr-16{margin-right:var(--road-spacing-05)}.mr-24{margin-right:var(--road-spacing-06)}.mb-0{margin-bottom:0}.mb-4{margin-bottom:var(--road-spacing-02)}.mb-8{margin-bottom:var(--road-spacing-03)}.mb-12{margin-bottom:var(--road-spacing-04)}.mb-16{margin-bottom:var(--road-spacing-05)}.mb-24{margin-bottom:var(--road-spacing-06)}.ml-0{margin-left:0}.ml-4{margin-left:var(--road-spacing-02)}.ml-8{margin-left:var(--road-spacing-03)}.ml-12{margin-left:var(--road-spacing-04)}.ml-16{margin-left:var(--road-spacing-05)}.ml-24{margin-left:var(--road-spacing-06)}.p-0{padding:0}.p-4{padding:var(--road-spacing-02)}.p-8{padding:var(--road-spacing-03)}.p-12{padding:var(--road-spacing-04)}.p-16{padding:var(--road-spacing-05)}.p-24{padding:var(--road-spacing-06)}.px-0{padding-right:0;padding-left:0}.px-4{padding-right:var(--road-spacing-02);padding-left:var(--road-spacing-02)}.px-8{padding-right:var(--road-spacing-03);padding-left:var(--road-spacing-03)}.px-12{padding-right:var(--road-spacing-04);padding-left:var(--road-spacing-04)}.px-16{padding-right:var(--road-spacing-05);padding-left:var(--road-spacing-05)}.px-24{padding-right:var(--road-spacing-06);padding-left:var(--road-spacing-06)}.py-0{padding-top:0;padding-bottom:0}.py-4{padding-top:var(--road-spacing-02);padding-bottom:var(--road-spacing-02)}.py-8{padding-top:var(--road-spacing-03);padding-bottom:var(--road-spacing-03)}.py-12{padding-top:var(--road-spacing-04);padding-bottom:var(--road-spacing-04)}.py-16{padding-top:var(--road-spacing-05);padding-bottom:var(--road-spacing-05)}.py-24{padding-top:var(--road-spacing-06);padding-bottom:var(--road-spacing-06)}.pt-0{padding-top:0}.pt-4{padding-top:var(--road-spacing-02)}.pt-8{padding-top:var(--road-spacing-03)}.pt-12{padding-top:var(--road-spacing-04)}.pt-16{padding-top:var(--road-spacing-05)}.pt-24{padding-top:var(--road-spacing-06)}.pr-0{padding-right:0}.pr-4{padding-right:var(--road-spacing-02)}.pr-8{padding-right:var(--road-spacing-03)}.pr-12{padding-right:var(--road-spacing-04)}.pr-16{padding-right:var(--road-spacing-05)}.pr-24{padding-right:var(--road-spacing-06)}.pb-0{padding-bottom:0}.pb-4{padding-bottom:var(--road-spacing-02)}.pb-8{padding-bottom:var(--road-spacing-03)}.pb-12{padding-bottom:var(--road-spacing-04)}.pb-16{padding-bottom:var(--road-spacing-05)}.pb-24{padding-bottom:var(--road-spacing-06)}.pl-0{padding-left:0}.pl-4{padding-left:var(--road-spacing-02)}.pl-8{padding-left:var(--road-spacing-03)}.pl-12{padding-left:var(--road-spacing-04)}.pl-16{padding-left:var(--road-spacing-05)}.pl-24{padding-left:var(--road-spacing-06)}.gap-0{gap:0}.gap-4{gap:var(--road-spacing-02)}.gap-8{gap:var(--road-spacing-03)}.gap-12{gap:var(--road-spacing-04)}.gap-16{gap:var(--road-spacing-05)}.gap-24{gap:var(--road-spacing-06)}@media (min-width: 576px){.m-sm-0{margin:0}.m-sm-4{margin:var(--road-spacing-02)}.m-sm-8{margin:var(--road-spacing-03)}.m-sm-12{margin:var(--road-spacing-04)}.m-sm-16{margin:var(--road-spacing-05)}.m-sm-24{margin:var(--road-spacing-06)}.m-sm-auto{margin:auto}.mt-sm-0{margin-top:0}.mt-sm-4{margin-top:var(--road-spacing-02)}.mt-sm-8{margin-top:var(--road-spacing-03)}.mt-sm-12{margin-top:var(--road-spacing-04)}.mt-sm-16{margin-top:var(--road-spacing-05)}.mt-sm-24{margin-top:var(--road-spacing-06)}.mr-sm-0{margin-right:0}.mr-sm-4{margin-right:var(--road-spacing-02)}.mr-sm-8{margin-right:var(--road-spacing-03)}.mr-sm-12{margin-right:var(--road-spacing-04)}.mr-sm-16{margin-right:var(--road-spacing-05)}.mr-sm-24{margin-right:var(--road-spacing-06)}.mb-sm-0{margin-bottom:0}.mb-sm-4{margin-bottom:var(--road-spacing-02)}.mb-sm-8{margin-bottom:var(--road-spacing-03)}.mb-sm-12{margin-bottom:var(--road-spacing-04)}.mb-sm-16{margin-bottom:var(--road-spacing-05)}.mb-sm-24{margin-bottom:var(--road-spacing-06)}.ml-sm-0{margin-left:0}.ml-sm-4{margin-left:var(--road-spacing-02)}.ml-sm-8{margin-left:var(--road-spacing-03)}.ml-sm-12{margin-left:var(--road-spacing-04)}.ml-sm-16{margin-left:var(--road-spacing-05)}.ml-sm-24{margin-left:var(--road-spacing-06)}.p-sm-0{padding:0}.p-sm-4{padding:var(--road-spacing-02)}.p-sm-8{padding:var(--road-spacing-03)}.p-sm-12{padding:var(--road-spacing-04)}.p-sm-16{padding:var(--road-spacing-05)}.p-sm-24{padding:var(--road-spacing-06)}.px-sm-0{padding-right:0;padding-left:0}.px-sm-4{padding-right:var(--road-spacing-02);padding-left:var(--road-spacing-02)}.px-sm-8{padding-right:var(--road-spacing-03);padding-left:var(--road-spacing-03)}.px-sm-12{padding-right:var(--road-spacing-04);padding-left:var(--road-spacing-04)}.px-sm-16{padding-right:var(--road-spacing-05);padding-left:var(--road-spacing-05)}.px-sm-24{padding-right:var(--road-spacing-06);padding-left:var(--road-spacing-06)}.py-sm-0{padding-top:0;padding-bottom:0}.py-sm-4{padding-top:var(--road-spacing-02);padding-bottom:var(--road-spacing-02)}.py-sm-8{padding-top:var(--road-spacing-03);padding-bottom:var(--road-spacing-03)}.py-sm-12{padding-top:var(--road-spacing-04);padding-bottom:var(--road-spacing-04)}.py-sm-16{padding-top:var(--road-spacing-05);padding-bottom:var(--road-spacing-05)}.py-sm-24{padding-top:var(--road-spacing-06);padding-bottom:var(--road-spacing-06)}.pt-sm-0{padding-top:0}.pt-sm-4{padding-top:var(--road-spacing-02)}.pt-sm-8{padding-top:var(--road-spacing-03)}.pt-sm-12{padding-top:var(--road-spacing-04)}.pt-sm-16{padding-top:var(--road-spacing-05)}.pt-sm-24{padding-top:var(--road-spacing-06)}.pr-sm-0{padding-right:0}.pr-sm-4{padding-right:var(--road-spacing-02)}.pr-sm-8{padding-right:var(--road-spacing-03)}.pr-sm-12{padding-right:var(--road-spacing-04)}.pr-sm-16{padding-right:var(--road-spacing-05)}.pr-sm-24{padding-right:var(--road-spacing-06)}.pb-sm-0{padding-bottom:0}.pb-sm-4{padding-bottom:var(--road-spacing-02)}.pb-sm-8{padding-bottom:var(--road-spacing-03)}.pb-sm-12{padding-bottom:var(--road-spacing-04)}.pb-sm-16{padding-bottom:var(--road-spacing-05)}.pb-sm-24{padding-bottom:var(--road-spacing-06)}.pl-sm-0{padding-left:0}.pl-sm-4{padding-left:var(--road-spacing-02)}.pl-sm-8{padding-left:var(--road-spacing-03)}.pl-sm-12{padding-left:var(--road-spacing-04)}.pl-sm-16{padding-left:var(--road-spacing-05)}.pl-sm-24{padding-left:var(--road-spacing-06)}.gap-sm-0{gap:0}.gap-sm-4{gap:var(--road-spacing-02)}.gap-sm-8{gap:var(--road-spacing-03)}.gap-sm-12{gap:var(--road-spacing-04)}.gap-sm-16{gap:var(--road-spacing-05)}.gap-sm-24{gap:var(--road-spacing-06)}}@media (min-width: 768px){.m-md-0{margin:0}.m-md-4{margin:var(--road-spacing-02)}.m-md-8{margin:var(--road-spacing-03)}.m-md-12{margin:var(--road-spacing-04)}.m-md-16{margin:var(--road-spacing-05)}.m-md-24{margin:var(--road-spacing-06)}.m-md-auto{margin:auto}.mt-md-0{margin-top:0}.mt-md-4{margin-top:var(--road-spacing-02)}.mt-md-8{margin-top:var(--road-spacing-03)}.mt-md-12{margin-top:var(--road-spacing-04)}.mt-md-16{margin-top:var(--road-spacing-05)}.mt-md-24{margin-top:var(--road-spacing-06)}.mr-md-0{margin-right:0}.mr-md-4{margin-right:var(--road-spacing-02)}.mr-md-8{margin-right:var(--road-spacing-03)}.mr-md-12{margin-right:var(--road-spacing-04)}.mr-md-16{margin-right:var(--road-spacing-05)}.mr-md-24{margin-right:var(--road-spacing-06)}.mb-md-0{margin-bottom:0}.mb-md-4{margin-bottom:var(--road-spacing-02)}.mb-md-8{margin-bottom:var(--road-spacing-03)}.mb-md-12{margin-bottom:var(--road-spacing-04)}.mb-md-16{margin-bottom:var(--road-spacing-05)}.mb-md-24{margin-bottom:var(--road-spacing-06)}.ml-md-0{margin-left:0}.ml-md-4{margin-left:var(--road-spacing-02)}.ml-md-8{margin-left:var(--road-spacing-03)}.ml-md-12{margin-left:var(--road-spacing-04)}.ml-md-16{margin-left:var(--road-spacing-05)}.ml-md-24{margin-left:var(--road-spacing-06)}.p-md-0{padding:0}.p-md-4{padding:var(--road-spacing-02)}.p-md-8{padding:var(--road-spacing-03)}.p-md-12{padding:var(--road-spacing-04)}.p-md-16{padding:var(--road-spacing-05)}.p-md-24{padding:var(--road-spacing-06)}.px-md-0{padding-right:0;padding-left:0}.px-md-4{padding-right:var(--road-spacing-02);padding-left:var(--road-spacing-02)}.px-md-8{padding-right:var(--road-spacing-03);padding-left:var(--road-spacing-03)}.px-md-12{padding-right:var(--road-spacing-04);padding-left:var(--road-spacing-04)}.px-md-16{padding-right:var(--road-spacing-05);padding-left:var(--road-spacing-05)}.px-md-24{padding-right:var(--road-spacing-06);padding-left:var(--road-spacing-06)}.py-md-0{padding-top:0;padding-bottom:0}.py-md-4{padding-top:var(--road-spacing-02);padding-bottom:var(--road-spacing-02)}.py-md-8{padding-top:var(--road-spacing-03);padding-bottom:var(--road-spacing-03)}.py-md-12{padding-top:var(--road-spacing-04);padding-bottom:var(--road-spacing-04)}.py-md-16{padding-top:var(--road-spacing-05);padding-bottom:var(--road-spacing-05)}.py-md-24{padding-top:var(--road-spacing-06);padding-bottom:var(--road-spacing-06)}.pt-md-0{padding-top:0}.pt-md-4{padding-top:var(--road-spacing-02)}.pt-md-8{padding-top:var(--road-spacing-03)}.pt-md-12{padding-top:var(--road-spacing-04)}.pt-md-16{padding-top:var(--road-spacing-05)}.pt-md-24{padding-top:var(--road-spacing-06)}.pr-md-0{padding-right:0}.pr-md-4{padding-right:var(--road-spacing-02)}.pr-md-8{padding-right:var(--road-spacing-03)}.pr-md-12{padding-right:var(--road-spacing-04)}.pr-md-16{padding-right:var(--road-spacing-05)}.pr-md-24{padding-right:var(--road-spacing-06)}.pb-md-0{padding-bottom:0}.pb-md-4{padding-bottom:var(--road-spacing-02)}.pb-md-8{padding-bottom:var(--road-spacing-03)}.pb-md-12{padding-bottom:var(--road-spacing-04)}.pb-md-16{padding-bottom:var(--road-spacing-05)}.pb-md-24{padding-bottom:var(--road-spacing-06)}.pl-md-0{padding-left:0}.pl-md-4{padding-left:var(--road-spacing-02)}.pl-md-8{padding-left:var(--road-spacing-03)}.pl-md-12{padding-left:var(--road-spacing-04)}.pl-md-16{padding-left:var(--road-spacing-05)}.pl-md-24{padding-left:var(--road-spacing-06)}.gap-md-0{gap:0}.gap-md-4{gap:var(--road-spacing-02)}.gap-md-8{gap:var(--road-spacing-03)}.gap-md-12{gap:var(--road-spacing-04)}.gap-md-16{gap:var(--road-spacing-05)}.gap-md-24{gap:var(--road-spacing-06)}}@media (min-width: 992px){.m-lg-0{margin:0}.m-lg-4{margin:var(--road-spacing-02)}.m-lg-8{margin:var(--road-spacing-03)}.m-lg-12{margin:var(--road-spacing-04)}.m-lg-16{margin:var(--road-spacing-05)}.m-lg-24{margin:var(--road-spacing-06)}.m-lg-auto{margin:auto}.mt-lg-0{margin-top:0}.mt-lg-4{margin-top:var(--road-spacing-02)}.mt-lg-8{margin-top:var(--road-spacing-03)}.mt-lg-12{margin-top:var(--road-spacing-04)}.mt-lg-16{margin-top:var(--road-spacing-05)}.mt-lg-24{margin-top:var(--road-spacing-06)}.mr-lg-0{margin-right:0}.mr-lg-4{margin-right:var(--road-spacing-02)}.mr-lg-8{margin-right:var(--road-spacing-03)}.mr-lg-12{margin-right:var(--road-spacing-04)}.mr-lg-16{margin-right:var(--road-spacing-05)}.mr-lg-24{margin-right:var(--road-spacing-06)}.mb-lg-0{margin-bottom:0}.mb-lg-4{margin-bottom:var(--road-spacing-02)}.mb-lg-8{margin-bottom:var(--road-spacing-03)}.mb-lg-12{margin-bottom:var(--road-spacing-04)}.mb-lg-16{margin-bottom:var(--road-spacing-05)}.mb-lg-24{margin-bottom:var(--road-spacing-06)}.ml-lg-0{margin-left:0}.ml-lg-4{margin-left:var(--road-spacing-02)}.ml-lg-8{margin-left:var(--road-spacing-03)}.ml-lg-12{margin-left:var(--road-spacing-04)}.ml-lg-16{margin-left:var(--road-spacing-05)}.ml-lg-24{margin-left:var(--road-spacing-06)}.p-lg-0{padding:0}.p-lg-4{padding:var(--road-spacing-02)}.p-lg-8{padding:var(--road-spacing-03)}.p-lg-12{padding:var(--road-spacing-04)}.p-lg-16{padding:var(--road-spacing-05)}.p-lg-24{padding:var(--road-spacing-06)}.px-lg-0{padding-right:0;padding-left:0}.px-lg-4{padding-right:var(--road-spacing-02);padding-left:var(--road-spacing-02)}.px-lg-8{padding-right:var(--road-spacing-03);padding-left:var(--road-spacing-03)}.px-lg-12{padding-right:var(--road-spacing-04);padding-left:var(--road-spacing-04)}.px-lg-16{padding-right:var(--road-spacing-05);padding-left:var(--road-spacing-05)}.px-lg-24{padding-right:var(--road-spacing-06);padding-left:var(--road-spacing-06)}.py-lg-0{padding-top:0;padding-bottom:0}.py-lg-4{padding-top:var(--road-spacing-02);padding-bottom:var(--road-spacing-02)}.py-lg-8{padding-top:var(--road-spacing-03);padding-bottom:var(--road-spacing-03)}.py-lg-12{padding-top:var(--road-spacing-04);padding-bottom:var(--road-spacing-04)}.py-lg-16{padding-top:var(--road-spacing-05);padding-bottom:var(--road-spacing-05)}.py-lg-24{padding-top:var(--road-spacing-06);padding-bottom:var(--road-spacing-06)}.pt-lg-0{padding-top:0}.pt-lg-4{padding-top:var(--road-spacing-02)}.pt-lg-8{padding-top:var(--road-spacing-03)}.pt-lg-12{padding-top:var(--road-spacing-04)}.pt-lg-16{padding-top:var(--road-spacing-05)}.pt-lg-24{padding-top:var(--road-spacing-06)}.pr-lg-0{padding-right:0}.pr-lg-4{padding-right:var(--road-spacing-02)}.pr-lg-8{padding-right:var(--road-spacing-03)}.pr-lg-12{padding-right:var(--road-spacing-04)}.pr-lg-16{padding-right:var(--road-spacing-05)}.pr-lg-24{padding-right:var(--road-spacing-06)}.pb-lg-0{padding-bottom:0}.pb-lg-4{padding-bottom:var(--road-spacing-02)}.pb-lg-8{padding-bottom:var(--road-spacing-03)}.pb-lg-12{padding-bottom:var(--road-spacing-04)}.pb-lg-16{padding-bottom:var(--road-spacing-05)}.pb-lg-24{padding-bottom:var(--road-spacing-06)}.pl-lg-0{padding-left:0}.pl-lg-4{padding-left:var(--road-spacing-02)}.pl-lg-8{padding-left:var(--road-spacing-03)}.pl-lg-12{padding-left:var(--road-spacing-04)}.pl-lg-16{padding-left:var(--road-spacing-05)}.pl-lg-24{padding-left:var(--road-spacing-06)}.gap-lg-0{gap:0}.gap-lg-4{gap:var(--road-spacing-02)}.gap-lg-8{gap:var(--road-spacing-03)}.gap-lg-12{gap:var(--road-spacing-04)}.gap-lg-16{gap:var(--road-spacing-05)}.gap-lg-24{gap:var(--road-spacing-06)}}@media (min-width: 1200px){.m-xl-0{margin:0}.m-xl-4{margin:var(--road-spacing-02)}.m-xl-8{margin:var(--road-spacing-03)}.m-xl-12{margin:var(--road-spacing-04)}.m-xl-16{margin:var(--road-spacing-05)}.m-xl-24{margin:var(--road-spacing-06)}.m-xl-auto{margin:auto}.mt-xl-0{margin-top:0}.mt-xl-4{margin-top:var(--road-spacing-02)}.mt-xl-8{margin-top:var(--road-spacing-03)}.mt-xl-12{margin-top:var(--road-spacing-04)}.mt-xl-16{margin-top:var(--road-spacing-05)}.mt-xl-24{margin-top:var(--road-spacing-06)}.mr-xl-0{margin-right:0}.mr-xl-4{margin-right:var(--road-spacing-02)}.mr-xl-8{margin-right:var(--road-spacing-03)}.mr-xl-12{margin-right:var(--road-spacing-04)}.mr-xl-16{margin-right:var(--road-spacing-05)}.mr-xl-24{margin-right:var(--road-spacing-06)}.mb-xl-0{margin-bottom:0}.mb-xl-4{margin-bottom:var(--road-spacing-02)}.mb-xl-8{margin-bottom:var(--road-spacing-03)}.mb-xl-12{margin-bottom:var(--road-spacing-04)}.mb-xl-16{margin-bottom:var(--road-spacing-05)}.mb-xl-24{margin-bottom:var(--road-spacing-06)}.ml-xl-0{margin-left:0}.ml-xl-4{margin-left:var(--road-spacing-02)}.ml-xl-8{margin-left:var(--road-spacing-03)}.ml-xl-12{margin-left:var(--road-spacing-04)}.ml-xl-16{margin-left:var(--road-spacing-05)}.ml-xl-24{margin-left:var(--road-spacing-06)}.p-xl-0{padding:0}.p-xl-4{padding:var(--road-spacing-02)}.p-xl-8{padding:var(--road-spacing-03)}.p-xl-12{padding:var(--road-spacing-04)}.p-xl-16{padding:var(--road-spacing-05)}.p-xl-24{padding:var(--road-spacing-06)}.px-xl-0{padding-right:0;padding-left:0}.px-xl-4{padding-right:var(--road-spacing-02);padding-left:var(--road-spacing-02)}.px-xl-8{padding-right:var(--road-spacing-03);padding-left:var(--road-spacing-03)}.px-xl-12{padding-right:var(--road-spacing-04);padding-left:var(--road-spacing-04)}.px-xl-16{padding-right:var(--road-spacing-05);padding-left:var(--road-spacing-05)}.px-xl-24{padding-right:var(--road-spacing-06);padding-left:var(--road-spacing-06)}.py-xl-0{padding-top:0;padding-bottom:0}.py-xl-4{padding-top:var(--road-spacing-02);padding-bottom:var(--road-spacing-02)}.py-xl-8{padding-top:var(--road-spacing-03);padding-bottom:var(--road-spacing-03)}.py-xl-12{padding-top:var(--road-spacing-04);padding-bottom:var(--road-spacing-04)}.py-xl-16{padding-top:var(--road-spacing-05);padding-bottom:var(--road-spacing-05)}.py-xl-24{padding-top:var(--road-spacing-06);padding-bottom:var(--road-spacing-06)}.pt-xl-0{padding-top:0}.pt-xl-4{padding-top:var(--road-spacing-02)}.pt-xl-8{padding-top:var(--road-spacing-03)}.pt-xl-12{padding-top:var(--road-spacing-04)}.pt-xl-16{padding-top:var(--road-spacing-05)}.pt-xl-24{padding-top:var(--road-spacing-06)}.pr-xl-0{padding-right:0}.pr-xl-4{padding-right:var(--road-spacing-02)}.pr-xl-8{padding-right:var(--road-spacing-03)}.pr-xl-12{padding-right:var(--road-spacing-04)}.pr-xl-16{padding-right:var(--road-spacing-05)}.pr-xl-24{padding-right:var(--road-spacing-06)}.pb-xl-0{padding-bottom:0}.pb-xl-4{padding-bottom:var(--road-spacing-02)}.pb-xl-8{padding-bottom:var(--road-spacing-03)}.pb-xl-12{padding-bottom:var(--road-spacing-04)}.pb-xl-16{padding-bottom:var(--road-spacing-05)}.pb-xl-24{padding-bottom:var(--road-spacing-06)}.pl-xl-0{padding-left:0}.pl-xl-4{padding-left:var(--road-spacing-02)}.pl-xl-8{padding-left:var(--road-spacing-03)}.pl-xl-12{padding-left:var(--road-spacing-04)}.pl-xl-16{padding-left:var(--road-spacing-05)}.pl-xl-24{padding-left:var(--road-spacing-06)}.gap-xl-0{gap:0}.gap-xl-4{gap:var(--road-spacing-02)}.gap-xl-8{gap:var(--road-spacing-03)}.gap-xl-12{gap:var(--road-spacing-04)}.gap-xl-16{gap:var(--road-spacing-05)}.gap-xl-24{gap:var(--road-spacing-06)}}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.font-weight-normal{font-weight:400}.font-weight-bold{font-weight:700}.font-italic{font-style:italic}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-primary{color:var(--road-primary-10)}.text-secondary{color:var(--road-primary-50)}.text-accent{color:var(--road-secondary-50)}.text-info{color:var(--road-on-info-surface)}.text-success{color:var(--road-on-success-surface)}.text-warning{color:var(--road-on-warning-surface)}.text-danger{color:var(--road-on-danger-surface)}.text-gray{color:var(--road-on-surface-weak)}.text-gray-second{color:var(--road-on-surface-extra-weak)}.text-disabled{color:var(--road-on-surface-disabled)}.text-white{--text:var(--road-on-primary);color:var(--road-on-primary)}.bg-primary{background-color:var(--road-primary-variant)}.bg-secondary{background-color:var(--road-secondary)}.bg-accent{background-color:var(--road-secondary-50)}.bg-info{background-color:var(--road-info-surface-inverse)}.bg-success{background-color:var(--road-success-surface-inverse)}.bg-warning{background-color:var(--road-warning-surface-inverse)}.bg-danger{background-color:var(--road-danger-surface-inverse)}.bg-rating{background-color:var(--road-rating)}.bg-light{background-color:var(--road-surface-inverse)}.bg-white{background-color:var(--road-surface)}.border{border:1px solid var(--road-outline)}.border-left{border-left:1px solid var(--road-outline)}.border-top{border-top:1px solid var(--road-outline)}.border-right{border-right:1px solid var(--road-outline)}.border-bottom{border-bottom:1px solid var(--road-outline)}.border-0{border:0 !important}.border-left-0{border-left:0 !important}.border-top-0{border-top:0 !important}.border-right-0{border-right:0 !important}.border-bottom-0{border-bottom:0 !important}.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.position-static{position:static}.position-sticky{position:sticky}.w-full{width:100%}.w-screen{width:100vh}.w-auto{width:auto}.h-full{height:100%}.h-screen{height:100vh}.h-auto{height:auto}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.visible{visibility:visible}.invisible{visibility:hidden}
@@ -1,2 +1,2 @@
1
- import{p as e,b as a}from"./p-f3d586b3.js";export{s as setNonce}from"./p-f3d586b3.js";const o=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};o().then((e=>a(JSON.parse('[["p-1115f970",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"readonly":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]},null,{"value":["onValueChange"]}],[1,"road-item",{"titleItem":[1,"title-item"],"text":[1],"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"layout":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[1,"road-drawer",{"isOpen":[1028,"is-open"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"ariaLabel":[1,"aria-label"],"ariaLabelBack":[1,"aria-label-back"],"ariaLabelClose":[1,"aria-label-close"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]],{"isOpen":["handleOpen"]}],[1,"road-col"],[1,"road-grid"],[1,"road-row"],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"helper":[1],"debounce":[2]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"iconOnly":[516,"icon-only"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group",{"disabled":[4]},null,{"disabled":["handleDisabledChange"]}],[1,"road-label"],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["p-1c5ac353",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["p-8ac960ce",[[2,"road-phone-number-input",{"disabled":[4],"countryData":[16],"language":[1],"codeLabel":[1,"code-label"],"phoneLabel":[1,"phone-label"],"phoneValue":[1,"phone-value"],"countryCode":[1,"country-code"],"errorMessage":[1,"error-message"],"required":[4],"selectedCountry":[32],"selectedCountryCode":[32],"phoneNumber":[32],"countryOptions":[32],"returnObject":[32]},null,{"errorMessage":["updateMessagePosition"]}]]],["p-09bfd80b",[[1,"road-content-card",{"insetImage":[4,"inset-image"]}]]],["p-d0d49c12",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]},null,{"value":["valueChanged"]}]]],["p-5203acea",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]},[[4,"click","handleDocumentClick"]]]]],["p-01cce331",[[1,"road-rating",{"size":[513],"rate":[2],"showreviews":[4],"readonly":[4],"reviews":[2],"reviewsText":[1,"reviews-text"],"url":[1]}]]],["p-acf82462",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["p-2b2856e1",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["p-719c7957",[[1,"road-carousel",{"options":[8],"pager":[4],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]},null,{"options":["optionsChanged"]}]]],["p-ac7b2425",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[1],"helper":[1]},null,{"checked":["checkedChanged"]}]]],["p-e7a82b87",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["p-7a14e5b7",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["p-16ea99f4",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-6ff5ec7c",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]},[[4,"click","handleDocumentClick"]]]]],["p-dcdb5444",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-80b2b1ea",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"],"disabled":[4]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["valueChanged"]}]]],["p-a19e9d73",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-7db968e6",[[1,"road-alert",{"color":[1],"label":[1],"button":[1],"link":[1],"url":[1]}]]],["p-b376be90",[[2,"road-area-code",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1025],"triggerRender":[1026,"trigger-render"],"selectedValue":[32]},null,{"value":["valueChanged"]}]]],["p-4111f5f2",[[1,"road-asset",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"asset":[8],"lazy":[4],"sanitize":[4],"assetSvgContent":[32],"isVisible":[32]},null,{"name":["loadAsset"],"src":["loadAsset"],"asset":["loadAsset"]}]]],["p-dcbb0d20",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["p-6ad5091d",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["p-0fca389a",[[4,"road-carousel-item"]]],["p-25ade729",[[1,"road-flap",{"color":[1],"filled":[4],"size":[513]}]]],["p-a5eee655",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-3bce3bdc",[[1,"road-illustration",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"illustration":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"illustrationSvgContent":[32],"isVisible":[32]},null,{"name":["loadIllustration"],"src":["loadIllustration"],"illustration":["loadIllustration"]}]]],["p-a0cde368",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-73a21ee9",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-ebd19369",[[1,"road-progress",{"value":[2],"numbersteps":[1],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1]}]]],["p-708f262a",[[1,"road-progress-indicator-horizontal",{"color":[513],"numberStep":[2,"number-step"],"stateFirstStep":[1,"state-first-step"],"stateSecondStep":[1,"state-second-step"],"stateThirdStep":[1,"state-third-step"],"urlStep1":[1,"url-step-1"],"urlStep2":[1,"url-step-2"],"urlStep3":[1,"url-step-3"]}]]],["p-054acf61",[[1,"road-progress-indicator-vertical"]]],["p-68599145",[[4,"road-progress-indicator-vertical-item"]]],["p-f90af0e1",[[1,"road-progress-tracker"]]],["p-e42a9ec4",[[4,"road-progress-tracker-item"]]],["p-40ee0f8a",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["p-96abbe85",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025],"helper":[1]},null,{"value":["valueChanged"],"error":["errorChanged"]}]]],["p-10903095",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["p-20b115ed",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]},null,{"selectedTab":["selectedTabChanged"]}]]],["p-4ba769a9",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-73f81e81",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]},null,{"value":["valueChanged"]}]]],["p-c09f4088",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"isOpen":[32],"currentValue":[32],"activeIndex":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[4,"click","onClickOutside"],[8,"keydown","handleKeydown"]]]]],["p-b614a9fb",[[1,"road-skeleton"]]],["p-f6d47cda",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["p-30fa62f4",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]},null,{"checked":["checkedChanged"]}]]],["p-74e359b7",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]},[[8,"roadtabbarchanged","onTabBarChanged"]]]]],["p-faf16a12",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1537,"selected-tab"]},[[0,"roadTabButtonClick","onTabButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-2e7d3440",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"disabled":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["p-d651deea",[[6,"road-table"]]],["p-f64453a3",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-cbe0c628",[[1,"road-tag",{"color":[1],"contrast":[4]}]]],["p-5483109e",[[1,"road-text",{"color":[1]}]]],["p-b2c38586",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"resize":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]},null,{"value":["valueChanged"]}]]],["p-37563bb6",[[2,"road-toggle",{"toggleId":[1,"toggle-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]},null,{"checked":["checkedChanged"]}]]],["p-e2c6d81f",[[1,"road-toolbar-title"]]],["p-25683dc7",[[1,"road-toolbar-title-page"]]],["p-a77727f2",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["p-f0a7c904",[[1,"road-avatar",{"size":[513]}]]],["p-dcbaee2f",[[1,"road-card",{"elevation":[1],"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["p-bfcedcfb",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]},null,{"src":["srcChanged"]}]]]]'),e)));
1
+ import{p as e,b as a}from"./p-f3d586b3.js";export{s as setNonce}from"./p-f3d586b3.js";const o=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};o().then((e=>a(JSON.parse('[["p-1115f970",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"readonly":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]},null,{"value":["onValueChange"]}],[1,"road-item",{"titleItem":[1,"title-item"],"text":[1],"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"layout":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[1,"road-drawer",{"isOpen":[1028,"is-open"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"ariaLabel":[1,"aria-label"],"ariaLabelBack":[1,"aria-label-back"],"ariaLabelClose":[1,"aria-label-close"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]],{"isOpen":["handleOpen"]}],[1,"road-col"],[1,"road-grid"],[1,"road-row"],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"helper":[1],"debounce":[2]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"iconOnly":[516,"icon-only"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group",{"disabled":[4]},null,{"disabled":["handleDisabledChange"]}],[1,"road-label"],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["p-1c5ac353",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["p-8ac960ce",[[2,"road-phone-number-input",{"disabled":[4],"countryData":[16],"language":[1],"codeLabel":[1,"code-label"],"phoneLabel":[1,"phone-label"],"phoneValue":[1,"phone-value"],"countryCode":[1,"country-code"],"errorMessage":[1,"error-message"],"required":[4],"selectedCountry":[32],"selectedCountryCode":[32],"phoneNumber":[32],"countryOptions":[32],"returnObject":[32]},null,{"errorMessage":["updateMessagePosition"]}]]],["p-09bfd80b",[[1,"road-content-card",{"insetImage":[4,"inset-image"]}]]],["p-d0d49c12",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]},null,{"value":["valueChanged"]}]]],["p-5203acea",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]},[[4,"click","handleDocumentClick"]]]]],["p-01cce331",[[1,"road-rating",{"size":[513],"rate":[2],"showreviews":[4],"readonly":[4],"reviews":[2],"reviewsText":[1,"reviews-text"],"url":[1]}]]],["p-acf82462",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["p-2b2856e1",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["p-719c7957",[[1,"road-carousel",{"options":[8],"pager":[4],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]},null,{"options":["optionsChanged"]}]]],["p-ac7b2425",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[1],"helper":[1]},null,{"checked":["checkedChanged"]}]]],["p-e7a82b87",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["p-7a14e5b7",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["p-16ea99f4",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-6ff5ec7c",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]},[[4,"click","handleDocumentClick"]]]]],["p-dcdb5444",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-80b2b1ea",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"],"disabled":[4]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["valueChanged"]}]]],["p-a19e9d73",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-7db968e6",[[1,"road-alert",{"color":[1],"label":[1],"button":[1],"link":[1],"url":[1]}]]],["p-b376be90",[[2,"road-area-code",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1025],"triggerRender":[1026,"trigger-render"],"selectedValue":[32]},null,{"value":["valueChanged"]}]]],["p-4111f5f2",[[1,"road-asset",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"asset":[8],"lazy":[4],"sanitize":[4],"assetSvgContent":[32],"isVisible":[32]},null,{"name":["loadAsset"],"src":["loadAsset"],"asset":["loadAsset"]}]]],["p-dcbb0d20",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["p-6ad5091d",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["p-0fca389a",[[4,"road-carousel-item"]]],["p-25ade729",[[1,"road-flap",{"color":[1],"filled":[4],"size":[513]}]]],["p-a5eee655",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-3bce3bdc",[[1,"road-illustration",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"illustration":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"illustrationSvgContent":[32],"isVisible":[32]},null,{"name":["loadIllustration"],"src":["loadIllustration"],"illustration":["loadIllustration"]}]]],["p-a0cde368",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-73a21ee9",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-ebd19369",[[1,"road-progress",{"value":[2],"numbersteps":[1],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1]}]]],["p-708f262a",[[1,"road-progress-indicator-horizontal",{"color":[513],"numberStep":[2,"number-step"],"stateFirstStep":[1,"state-first-step"],"stateSecondStep":[1,"state-second-step"],"stateThirdStep":[1,"state-third-step"],"urlStep1":[1,"url-step-1"],"urlStep2":[1,"url-step-2"],"urlStep3":[1,"url-step-3"]}]]],["p-054acf61",[[1,"road-progress-indicator-vertical"]]],["p-68599145",[[4,"road-progress-indicator-vertical-item"]]],["p-f90af0e1",[[1,"road-progress-tracker"]]],["p-e42a9ec4",[[4,"road-progress-tracker-item"]]],["p-40ee0f8a",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["p-96abbe85",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025],"helper":[1]},null,{"value":["valueChanged"],"error":["errorChanged"]}]]],["p-10903095",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["p-20b115ed",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]},null,{"selectedTab":["selectedTabChanged"]}]]],["p-4ba769a9",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-73f81e81",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]},null,{"value":["valueChanged"]}]]],["p-c09f4088",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"isOpen":[32],"currentValue":[32],"activeIndex":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[4,"click","onClickOutside"],[8,"keydown","handleKeydown"]]]]],["p-b614a9fb",[[1,"road-skeleton"]]],["p-f6d47cda",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["p-30fa62f4",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]},null,{"checked":["checkedChanged"]}]]],["p-74e359b7",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]},[[8,"roadtabbarchanged","onTabBarChanged"]]]]],["p-faf16a12",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1537,"selected-tab"]},[[0,"roadTabButtonClick","onTabButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-2e7d3440",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"disabled":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["p-d651deea",[[6,"road-table"]]],["p-f64453a3",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-cbe0c628",[[1,"road-tag",{"color":[1],"contrast":[4]}]]],["p-5483109e",[[1,"road-text",{"color":[1]}]]],["p-b2c38586",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"resize":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]},null,{"value":["valueChanged"]}]]],["p-37563bb6",[[2,"road-toggle",{"toggleId":[1,"toggle-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]},null,{"checked":["checkedChanged"]}]]],["p-e2c6d81f",[[1,"road-toolbar-title"]]],["p-25683dc7",[[1,"road-toolbar-title-page"]]],["p-36895fa7",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["p-f0a7c904",[[1,"road-avatar",{"size":[513]}]]],["p-dcbaee2f",[[1,"road-card",{"elevation":[1],"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["p-bfcedcfb",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]},null,{"src":["srcChanged"]}]]]]'),e)));
2
2
  //# sourceMappingURL=roadtrip.esm.js.map
@@ -42,6 +42,12 @@ export declare class Tooltip {
42
42
  private onClick;
43
43
  private onMouseOver;
44
44
  private onMouseOut;
45
+ private isKeyboardNavigation;
46
+ componentDidMount(): void;
47
+ componentDidLoad(): void;
48
+ componentWillUnmount(): void;
49
+ private handleKeyDown;
50
+ private handleMouseDown;
45
51
  private onFocus;
46
52
  private onBlur;
47
53
  private hasTrigger;
package/hydrate/index.js CHANGED
@@ -5943,7 +5943,7 @@ const isSrc$2 = (str) => str.length > 0 && /(\/|\.)/.test(str);
5943
5943
  const isStr$2 = (val) => typeof val === 'string';
5944
5944
  const toLower$2 = (val) => val.toLowerCase();
5945
5945
 
5946
- const assetCss = "/*!@:host*/.sc-road-asset-h{box-sizing:content-box;contain:strict;display:table}/*!@.icon-inner*/.icon-inner.sc-road-asset{width:-moz-fit-content;width:fit-content}/*!@:host svg*/.sc-road-asset-h svg.sc-road-asset{display:block;width:100%;height:100%}";
5946
+ const assetCss = "/*!@:host*/.sc-road-asset-h{box-sizing:content-box;contain:strict;display:table}/*!@.icon-inner*/.icon-inner.sc-road-asset{width:fit-content}/*!@:host svg*/.sc-road-asset-h svg.sc-road-asset{display:block;width:100%;height:100%}";
5947
5947
 
5948
5948
  class Asset {
5949
5949
  constructor(hostRef) {
@@ -37511,7 +37511,7 @@ class ToolbarTitle {
37511
37511
  }; }
37512
37512
  }
37513
37513
 
37514
- const tooltipCss = "/*!@:host*/.sc-road-tooltip-h{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}/*!@:host(:hover)*/.sc-road-tooltip-h:hover{cursor:pointer}/*!@:host([trigger=\"hover\"]) .tooltip*/[trigger=\"hover\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{display:none}@media (min-width: 1200px){/*!@:host([trigger=\"hover\"]) .tooltip*/[trigger=\"hover\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{display:block}}/*!@.tooltip*/.tooltip.sc-road-tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}/*!@:host([contentalign=\"left\"]) .tooltip*/[contentalign=\"left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{text-align:left}/*!@.tooltip.tooltip-text-left::after*/.tooltip.tooltip-text-left.sc-road-tooltip::after{text-align:left}/*!@.tooltip-open*/.tooltip-open.sc-road-tooltip{opacity:1}/*!@:host([data-tooltip-position=\"top\"]) .tooltip*/[data-tooltip-position=\"top\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}/*!@:host([data-tooltip-position=\"top\"]) .tooltip-open*/[data-tooltip-position=\"top\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{left:50%;transform:translateX(-50%) translateY(-100%)}/*!@:host([data-tooltip-position=\"top-left\"]) .tooltip*/[data-tooltip-position=\"top-left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:0%;transform:translateY(-70%)}/*!@:host([data-tooltip-position=\"top-left\"]) .tooltip-open*/[data-tooltip-position=\"top-left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-100%)}/*!@:host([data-tooltip-position=\"top-right\"]) .tooltip*/[data-tooltip-position=\"top-right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:50%;transform:translateY(-70%)}/*!@:host([data-tooltip-position=\"top-right\"]) .tooltip-open*/[data-tooltip-position=\"top-right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{left:100%;transform:translateY(-100%)}/*!@:host([data-tooltip-position=\"left\"]) .tooltip*/[data-tooltip-position=\"left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}/*!@:host([data-tooltip-position=\"left\"]) .tooltip-open*/[data-tooltip-position=\"left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-103%) translateY(-55%)}/*!@:host([data-tooltip-position=\"bottom\"]) .tooltip*/[data-tooltip-position=\"bottom\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom\"]) .tooltip-open*/[data-tooltip-position=\"bottom\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-50%) translateY(-6%)}/*!@:host([data-tooltip-position=\"bottom-left\"]) .tooltip*/[data-tooltip-position=\"bottom-left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open*/[data-tooltip-position=\"bottom-left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-6%)}/*!@:host([data-tooltip-position=\"bottom-right\"]) .tooltip*/[data-tooltip-position=\"bottom-right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open*/[data-tooltip-position=\"bottom-right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-6%)}/*!@:host([data-tooltip-position=\"right\"]) .tooltip*/[data-tooltip-position=\"right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}/*!@:host([data-tooltip-position=\"right\"]) .tooltip-open*/[data-tooltip-position=\"right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-4%) translateY(-55%)}";
37514
+ const tooltipCss = "/*!@:host*/.sc-road-tooltip-h{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}/*!@:host(:hover)*/.sc-road-tooltip-h:hover{cursor:pointer}/*!@:host([trigger=\"hover\"]) .tooltip*/[trigger=\"hover\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{display:none}@media (min-width: 1200px){/*!@:host([trigger=\"hover\"]) .tooltip*/[trigger=\"hover\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{display:block}}/*!@.tooltip*/.tooltip.sc-road-tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}/*!@:host([contentalign=\"left\"]) .tooltip*/[contentalign=\"left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{text-align:left}/*!@.tooltip.tooltip-text-left::after*/.tooltip.tooltip-text-left.sc-road-tooltip::after{text-align:left}/*!@.tooltip-open*/.tooltip-open.sc-road-tooltip{visibility:visible;opacity:1}/*!@:host([data-tooltip-position=\"top\"]) .tooltip*/[data-tooltip-position=\"top\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}/*!@:host([data-tooltip-position=\"top\"]) .tooltip-open*/[data-tooltip-position=\"top\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{left:50%;transform:translateX(-50%) translateY(-100%)}/*!@:host([data-tooltip-position=\"top-left\"]) .tooltip*/[data-tooltip-position=\"top-left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:0%;transform:translateY(-70%)}/*!@:host([data-tooltip-position=\"top-left\"]) .tooltip-open*/[data-tooltip-position=\"top-left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-100%)}/*!@:host([data-tooltip-position=\"top-right\"]) .tooltip*/[data-tooltip-position=\"top-right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:50%;transform:translateY(-70%)}/*!@:host([data-tooltip-position=\"top-right\"]) .tooltip-open*/[data-tooltip-position=\"top-right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{left:100%;transform:translateY(-100%)}/*!@:host([data-tooltip-position=\"left\"]) .tooltip*/[data-tooltip-position=\"left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}/*!@:host([data-tooltip-position=\"left\"]) .tooltip-open*/[data-tooltip-position=\"left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-103%) translateY(-55%)}/*!@:host([data-tooltip-position=\"bottom\"]) .tooltip*/[data-tooltip-position=\"bottom\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom\"]) .tooltip-open*/[data-tooltip-position=\"bottom\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-50%) translateY(-6%)}/*!@:host([data-tooltip-position=\"bottom-left\"]) .tooltip*/[data-tooltip-position=\"bottom-left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open*/[data-tooltip-position=\"bottom-left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-6%)}/*!@:host([data-tooltip-position=\"bottom-right\"]) .tooltip*/[data-tooltip-position=\"bottom-right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open*/[data-tooltip-position=\"bottom-right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-6%)}/*!@:host([data-tooltip-position=\"right\"]) .tooltip*/[data-tooltip-position=\"right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}/*!@:host([data-tooltip-position=\"right\"]) .tooltip-open*/[data-tooltip-position=\"right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-4%) translateY(-55%)}";
37515
37515
 
37516
37516
  /**
37517
37517
  * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.
@@ -37536,13 +37536,20 @@ class Tooltip {
37536
37536
  this.close();
37537
37537
  }
37538
37538
  };
37539
+ this.isKeyboardNavigation = false;
37540
+ this.handleKeyDown = () => {
37541
+ this.isKeyboardNavigation = true;
37542
+ };
37543
+ this.handleMouseDown = () => {
37544
+ this.isKeyboardNavigation = false;
37545
+ };
37539
37546
  this.onFocus = () => {
37540
- if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
37547
+ if (this.isKeyboardNavigation && this.hasTrigger('hover')) {
37541
37548
  this.open();
37542
37549
  }
37543
37550
  };
37544
37551
  this.onBlur = () => {
37545
- if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
37552
+ if (this.isKeyboardNavigation && this.hasTrigger('hover')) {
37546
37553
  this.close();
37547
37554
  }
37548
37555
  };
@@ -37565,6 +37572,19 @@ class Tooltip {
37565
37572
  async close() {
37566
37573
  this.isOpen = false;
37567
37574
  }
37575
+ // Écoute les événements pour détecter le mode d'interaction
37576
+ componentDidMount() {
37577
+ document.addEventListener('keydown', this.handleKeyDown);
37578
+ document.addEventListener('mousedown', this.handleMouseDown);
37579
+ }
37580
+ componentDidLoad() {
37581
+ document.addEventListener('keydown', this.handleKeyDown);
37582
+ document.addEventListener('mousedown', this.handleMouseDown);
37583
+ }
37584
+ componentWillUnmount() {
37585
+ document.removeEventListener('keydown', this.handleKeyDown);
37586
+ document.removeEventListener('mousedown', this.handleMouseDown);
37587
+ }
37568
37588
  hasTrigger(triggerType) {
37569
37589
  const triggers = this.trigger.split(' ');
37570
37590
  return triggers.includes(triggerType);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@roadtrip/components",
3
- "version": "3.29.0",
3
+ "version": "3.30.0",
4
4
  "description": "Web Component library for Roadtrip Design System",
5
5
  "license": "Apache-2.0",
6
6
  "homepage": "https://gitlab.com/mobivia-design/roadtrip/components",
@@ -1,2 +0,0 @@
1
- import{r as t,h as o,H as i,a}from"./p-f3d586b3.js";const s=':host{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}:host(:hover){cursor:pointer}:host([trigger="hover"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger="hover"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}:host([contentalign="left"]) .tooltip{text-align:left}.tooltip.tooltip-text-left::after{text-align:left}.tooltip-open{opacity:1}:host([data-tooltip-position="top"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position="top"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position="top-left"]) .tooltip{left:0%;transform:translateY(-70%)}:host([data-tooltip-position="top-left"]) .tooltip-open{transform:translateY(-100%)}:host([data-tooltip-position="top-right"]) .tooltip{left:50%;transform:translateY(-70%)}:host([data-tooltip-position="top-right"]) .tooltip-open{left:100%;transform:translateY(-100%)}:host([data-tooltip-position="left"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position="left"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position="bottom"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position="bottom"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position="bottom-left"]) .tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position="bottom-left"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position="bottom-right"]) .tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position="bottom-right"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position="right"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position="right"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}';const r=class{constructor(o){t(this,o);this.onClick=()=>{if(this.hasTrigger("click")){this.isOpen?this.close():this.open()}};this.onMouseOver=()=>{if(this.hasTrigger("hover")){this.open()}};this.onMouseOut=()=>{if(this.hasTrigger("hover")){this.close()}};this.onFocus=()=>{if(this.hasTrigger("focus")||this.hasTrigger("hover")){this.open()}};this.onBlur=()=>{if(this.hasTrigger("focus")||this.hasTrigger("hover")){this.close()}};this.tooltipId=`road-tooltip-${++e}`;this.content="";this.position="top";this.contentAlign="center";this.isOpen=false;this.trigger="hover"}async open(){this.isOpen=true}async close(){this.isOpen=false}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}render(){return o(i,{onMouseOver:this.onMouseOver,onMouseOut:this.onMouseOut,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur,tabindex:"0","data-tooltip-position":this.position},o("slot",{"aria-describedby":this.tooltipId}),o("div",{part:"tooltip",id:this.tooltipId,class:{tooltip:true,"tooltip-open":this.isOpen},role:"tooltip","aria-hidden":!this.isOpen?"true":"false"},this.content,o("slot",{name:"tooltip-content"})))}get el(){return a(this)}};let e=0;r.style=s;export{r as road_tooltip};
2
- //# sourceMappingURL=p-a77727f2.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["tooltipCss","Tooltip","this","onClick","hasTrigger","isOpen","close","open","onMouseOver","onMouseOut","onFocus","onBlur","tooltipIds","triggerType","triggers","trigger","split","includes","render","h","Host","tabindex","position","tooltipId","part","id","class","tooltip","role","content","name"],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * Tooltip\n *\n * Index\n * - Tooltip\n * - Position\n */\n\n/**\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n */\n\n/* TOOLTIP\n -------------------- */\n\n:host {\n --max-width: 85vw;\n --z-index: 1;\n --width: max-content;\n\n position: relative;\n display: inline-block;\n}\n\n:host(:hover) {\n cursor: pointer;\n}\n\n\n:host([trigger=\"hover\"]) .tooltip {\n display: none;\n}\n\n@media (min-width: 1200px) {\n\n :host([trigger=\"hover\"]) .tooltip {\n display: block;\n }\n}\n\n.tooltip {\n position: absolute;\n top: -0.5rem;\n left: 50%;\n z-index: 1;\n width: var(--width);\n min-width: 100%;\n max-width: var(--max-width);\n padding: 0.5rem;\n font-family: var(--road-font);\n font-size: var(--road-body-small);\n color: var(--road-on-surface);\n text-align: center;\n pointer-events: none;\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: 0.25rem;\n box-shadow: var(--road-elevation-low);\n opacity: 0;\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n text-align: left;\n}\n\n.tooltip-open {\n opacity: 1;\n}\n\n/* POSITION\n -------------------- */\n\n/**\n * Top\n */\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n left: 50%;\n transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n}\n\n/**\n * Top Left\n */\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n left: 0%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n transform: translateY(-100%);\n}\n\n/**\n * Top Right\n */\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n left: 50%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n left: 100%;\n transform: translateY(-100%);\n}\n\n/**\n * Left\n */\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n top: 50%;\n left: 0%;\n margin-right: 0.5rem;\n transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n transform: translateX(-103%) translateY(-55%);\n}\n\n/**\n * Bottom\n */\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n top: 100%;\n left: 50%;\n margin-top: 0.5rem;\n transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n transform: translateX(-50%) translateY(-6%);\n}\n\n/**\n * Bottom Left\n */\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n top: 100%;\n left: 0;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Bottom Right\n */\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n top: 100%;\n left: 100%;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Right\n */\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n top: 50%;\n left: 100%;\n margin-left: 0.5rem;\n transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /**\n * The id of tooltip\n */\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /**\n * The tooltip's content.\n */\n @Prop() content = '';\n\n /**\n * The position of the tooltip.\n */\n @Prop() position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'left' = 'top';\n\n /**\n * The content align of the tooltip.\n */\n @Prop() contentAlign:\n | 'center'\n | 'left' = 'center';\n\n /**\n * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n */\n @Prop({ mutable: true }) isOpen = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover';\n\n /**\n * Open the tooltip.\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private onFocus = () => {\n if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onBlur = () => {\n if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n tabindex=\"0\" // Makes the element focusable\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"],"mappings":"oDAAA,MAAMA,EAAa,g+E,MCaNC,EAAO,M,yBA8DVC,KAAAC,QAAU,KAChB,GAAID,KAAKE,WAAW,SAAU,CAC5BF,KAAKG,OAASH,KAAKI,QAAUJ,KAAKK,M,GAI9BL,KAAAM,YAAc,KACpB,GAAIN,KAAKE,WAAW,SAAU,CAC5BF,KAAKK,M,GAIDL,KAAAO,WAAa,KACnB,GAAIP,KAAKE,WAAW,SAAU,CAC5BF,KAAKI,O,GAIDJ,KAAAQ,QAAU,KAChB,GAAIR,KAAKE,WAAW,UAAYF,KAAKE,WAAW,SAAU,CACxDF,KAAKK,M,GAIDL,KAAAS,OAAS,KACf,GAAIT,KAAKE,WAAW,UAAYF,KAAKE,WAAW,SAAU,CACxDF,KAAKI,O,kBAjFmB,kBAAkBM,I,aAK5B,G,cAaL,M,kBAOA,S,YAKqB,M,aAOR,O,CAM1B,UAAML,GACJL,KAAKG,OAAS,I,CAOhB,WAAMC,GACJJ,KAAKG,OAAS,K,CAiCR,UAAAD,CAAWS,GACjB,MAAMC,EAAWZ,KAAKa,QAAQC,MAAM,KACpC,OAAOF,EAASG,SAASJ,E,CAG3B,MAAAK,GACE,OACEC,EAACC,EAAI,CACHZ,YAAaN,KAAKM,YAClBC,WAAYP,KAAKO,WACjBN,QAASD,KAAKC,QACdO,QAASR,KAAKQ,QACdC,OAAQT,KAAKS,OACbU,SAAS,I,wBACcnB,KAAKoB,UAE5BH,EAAA,2BAAwBjB,KAAKqB,YAE7BJ,EAAA,OACEK,KAAK,UACLC,GAAIvB,KAAKqB,UACTG,MAAO,CACLC,QAAS,KACT,eAAgBzB,KAAKG,QAEvBuB,KAAK,UAAS,eACA1B,KAAKG,OAAS,OAAS,SAEpCH,KAAK2B,QACNV,EAAA,QAAMW,KAAK,qB,2BAOrB,IAAIlB,EAAa,E"}