@roadtrip/components 2.21.0

package/dist/collection/components/tooltip/tooltip.css

@@ -0,0 +1,102 @@
+/**
+ * @prop --max-width: The maximum width of the tooltip.
+ * @prop --z-index: The z-index of the tooltip.
+ * @prop --width: width of the tooltip.
+ */
+
+:host {
+  --max-width: 16rem;
+  --z-index: 1;
+  --width: max-content;
+
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip {
+  position: absolute;
+  top: -0.5rem;
+  left: 50%;
+  z-index: 1;
+  width: var(--width);
+  max-width: var(--max-width);
+  padding: 0.5rem;
+  font-family: var(--font);
+  font-size: 0.75rem;
+  color: var(--text);
+  text-align: center;
+  pointer-events: none;
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+  transform: translateX(-50%) translateY(-100%);
+}
+
+.tooltip-open {
+  opacity: 1;
+}
+
+/* TOOLTIP POSITION
+ -------------------- */
+
+/**
+ * Top position
+ */
+
+: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%);
+}
+
+/**
+ * Left position
+ */
+
+:host([data-tooltip-position="left"]) .tooltip {
+  top: 50%;
+  left: 0%;
+  margin-left: -0.5rem;
+  transform: translateX(-94%) translateY(-55%);
+}
+
+:host([data-tooltip-position="left"]) .tooltip-open {
+  transform: translateX(-100%) translateY(-55%);
+}
+
+/**
+ * Bottom position
+ */
+
+:host([data-tooltip-position="bottom"]) .tooltip {
+  top: 100%;
+  left: 50%;
+  margin-top: 0.375rem;
+  transform: translateX(-50%) translateY(-40%);
+}
+
+:host([data-tooltip-position="bottom"]) .tooltip-open {
+  transform: translateX(-50%) translateY(0);
+}
+
+/**
+ * Right position
+ */
+
+: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(0) translateY(-55%);
+}

package/dist/collection/components/tooltip/tooltip.js

@@ -0,0 +1,209 @@
+import { Component, Host, h, Prop, Method, Element } from '@stencil/core';
+/**
+ * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.
+ *
+ * @part tooltip - tooltip container
+ */
+export class Tooltip {
+  constructor() {
+    /**
+     * The id of tooltip
+     */
+    this.tooltipId = `road-tooltip-${++tooltipIds}`;
+    /**
+     * The tooltip's content.
+     */
+    this.content = '';
+    /**
+     * The position of the tooltip.
+     */
+    this.position = 'top';
+    /**
+     * Indicates whether or not the tooltip is open. You can use this or the open/close methods.
+     */
+    this.isOpen = false;
+    /**
+     * Controls how the tooltip is activated. Possible options include `click`, `hover`. Multiple
+     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+     * programmatically.
+     */
+    this.trigger = 'hover';
+    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();
+      }
+    };
+  }
+  /**
+   * Shows the tooltip.
+   */
+  async open() {
+    this.isOpen = true;
+  }
+  /**
+   * Shows the tooltip.
+   */
+  async close() {
+    this.isOpen = false;
+  }
+  hasTrigger(triggerType) {
+    const triggers = this.trigger.split(' ');
+    return triggers.includes(triggerType);
+  }
+  render() {
+    return (h(Host, { onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, "data-tooltip-position": this.position },
+      h("slot", { "aria-describedby": this.tooltipId }),
+      h("div", { part: "tooltip", id: this.tooltipId, class: {
+          tooltip: true,
+          'tooltip-open': this.isOpen,
+        }, role: "tooltip", "aria-hidden": !this.isOpen },
+        this.content,
+        h("slot", { name: "tooltip-content" }))));
+  }
+  static get is() { return "road-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["tooltip.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["tooltip.css"]
+  }; }
+  static get properties() { return {
+    "tooltipId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The id of tooltip"
+      },
+      "attribute": "tooltip-id",
+      "reflect": false,
+      "defaultValue": "`road-tooltip-${++tooltipIds}`"
+    },
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The tooltip's content."
+      },
+      "attribute": "content",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'top'\n    | 'right'\n    | 'bottom'\n    | 'left'",
+        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The position of the tooltip."
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "'top'"
+    },
+    "isOpen": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether or not the tooltip is open. You can use this or the open/close methods."
+      },
+      "attribute": "is-open",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "trigger": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Controls how the tooltip is activated. Possible options include `click`, `hover`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically."
+      },
+      "attribute": "trigger",
+      "reflect": false,
+      "defaultValue": "'hover'"
+    }
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Shows the tooltip.",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Shows the tooltip.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}
+let tooltipIds = 0;

package/dist/collection/components/tooltip/tooltip.stories.js

@@ -0,0 +1,67 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Indicators/Tooltip',
+  component: 'road-tooltip',
+};
+
+export const Playground = (args) => html`
+  <road-tooltip is-open="${args['is-open']}" content="${args.content}" position="${args.position}" trigger="${args.trigger}">
+    <road-button class="mb-0">
+      <road-icon name="alert-info" color="secondary"></road-icon>
+    </road-button>
+  </road-tooltip>
+`;
+Playground.args = {
+  content: 'Fit & small tooltip',
+  'is-open': false,
+  position: 'right',
+  trigger: 'hover',
+};
+Playground.argTypes = {
+  'is-open': {
+    control: 'boolean',
+  },
+  content: {
+    control: 'text',
+  },
+  position: {
+    options: ['top', 'left', 'bottom', 'right'],
+    control: {
+      type: 'radio',
+    },
+  },
+  trigger: {
+    options: ['hover', 'click'],
+    control: {
+      type: 'select',
+    },
+  },
+};
+
+export const MouseOver = () => html`
+  <road-tooltip position="bottom" style="width: 100%;--width: 95%;--max-width: 100%;">
+  <road-item class="bg-light mb-16">
+    <road-avatar class="flex-shrink-0 mr-16">
+      <road-icon lazy size="3x" name="brake"></road-icon>
+    </road-avatar>
+    <road-label>
+      <p class="h9 mb-8">Braking</p>
+      <p class="m-0">(6 skills)</p>
+    </road-label>
+  </road-item>
+  <div class="text-content text-left mb-0" slot="tooltip-content">
+    Attelage<br/>
+    Vidange<br/>
+    Filtres<br/>
+  </div>
+</road-tooltip>
+`;
+
+export const Click = () => html`
+  <road-tooltip content="Fit & small tooltip" position="right" trigger="click">
+  <road-button class="mb-0">
+    <road-icon name="alert-info" color="secondary"></road-icon>
+  </road-button>
+</road-tooltip>
+`;

package/dist/collection/components/utilities/border.stories.js

@@ -0,0 +1,39 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Utilities/Border',
+};
+
+export const Additive = () => html`
+  <div class="border" 
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);"></div>
+
+  <div class="border-left" 
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);"></div>
+
+  <div class="border-top" 
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);"></div>
+
+  <div class="border-right" 
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);"></div>
+
+  <div class="border-bottom" 
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);"></div>
+`;
+
+export const Subtractive = () => html`
+  <div class="border-0" 
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);border: 1px solid var(--border);"></div>
+
+  <div class="border-left-0" 
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);border: 1px solid var(--border);"></div>
+
+  <div class="border-top-0" 
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);border: 1px solid var(--border);"></div>
+
+  <div class="border-right-0" 
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);border: 1px solid var(--border);"></div>
+
+  <div class="border-bottom-0" 
+    style="display: inline-block;width: 5rem;height: 5rem;margin: .25rem;background-color: var(--background-second);border: 1px solid var(--border);"></div>
+`;

package/dist/collection/components/utilities/color.stories.js

@@ -0,0 +1,27 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Utilities/Colors',
+};
+
+export const TextColors = () => html`
+  <p class="text-primary">.text-primary</p>
+  <p class="text-secondary">.text-secondary</p>
+  <p class="text-success">.text-success</p>
+  <p class="text-warning">.text-warning</p>
+  <p class="text-danger">.text-danger</p>
+  <p class="text-gray">.text-gray</p>
+  <p class="text-gray-second">.text-gray-second</p>
+  <p class="text-disabled">.text-disabled</p>
+  <p class="text-white bg-dark">.text-white</p>
+`;
+
+export const BackgroundColors = () => html`
+  <p class="bg-primary text-white pl-16 pt-16 pb-16">.bg-primary</p>
+  <p class="bg-secondary text-white pl-16 pt-16 pb-16">.bg-secondary</p>
+  <p class="bg-success text-white pl-16 pt-16 pb-16">.bg-success</p>
+  <p class="bg-warning text-dark pl-16 pt-16 pb-16">.bg-warning</p>
+  <p class="bg-danger text-white pl-16 pt-16 pb-16">.bg-danger</p>
+  <p class="bg-light pl-16 pt-16 pb-16">.bg-light</p>
+  <p class="bg-white pl-16 pt-16 pb-16">.bg-white</p>
+`;

package/dist/collection/components/utilities/flexbox.stories.js

@@ -0,0 +1,72 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Utilities/Flexbox',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const JustifyContent = () => html`
+<div class="d-flex justify-content-start mt-16 mb-16 bg-light">
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+</div>
+
+<div class="d-flex justify-content-end mt-16 mb-16 bg-light">
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+</div>
+
+<div class="d-flex justify-content-center mt-16 mb-16 bg-light">
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+</div>
+
+<div class="d-flex justify-content-between mt-16 mb-16 bg-light">
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+</div>
+
+<div class="d-flex justify-content-around mt-16 mb-16 bg-light">
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+</div>
+`;
+
+export const AlignItems = () => html`
+  <div class="d-flex align-items-start mt-16 mb-16 bg-light" style="height: 100px">
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  </div>
+
+  <div class="d-flex align-items-end mt-16 mb-16 bg-light" style="height: 100px">
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  </div>
+
+  <div class="d-flex align-items-center mt-16 mb-16 bg-light" style="height: 100px">
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  </div>
+
+  <div class="d-flex align-items-baseline mt-16 mb-16 bg-light" style="height: 100px">
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  </div>
+
+  <div class="d-flex align-items-stretch mt-16 mb-16 bg-light" style="height: 100px">
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+    <div class="bg-secondary text-white pt-16 pb-16 pl-16 pr-16">Flex item</div>
+  </div>
+`;

package/dist/collection/components/utilities/text.stories.js

@@ -0,0 +1,29 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Utilities/Text',
+};
+
+export const Alignement = () => html`
+  <p class="text-left">Text left</p>
+  <p class="text-center">Text center</p>
+  <p class="text-right">Text right</p>
+`;
+
+export const Transformation = () => html`
+  <p class="text-lowercase">Lowercased text.</p>
+  <p class="text-uppercase">Uppercased text.</p>
+  <p class="text-capitalize">capitalized text.</p>
+`;
+
+export const Weight = () => html`
+  <p class="font-weight-bold">Bold text.</p>
+  <p class="font-weight-normal">Normal weight text.</p>
+  <p class="font-italic">Italic text.</p>
+`;
+
+export const Truncate = () => html`
+  <div class="text-truncate" style="width: 120px">
+    This text is too long so it will end with 3 dots
+  </div>
+`;

package/dist/collection/components/utilities/typography.stories.js

@@ -0,0 +1,23 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Utilities/Typography',
+};
+
+export const Heading = () => html`
+  <p class="h1">Heading 1</p>
+  <p class="h2">Heading 2</p>
+  <p class="h3">Heading 3</p>
+  <p class="h4">Heading 4</p>
+  <p class="h5">Heading 5</p>
+  <p class="h6">Heading 6</p>
+  <p class="h7">Heading 7</p>
+  <p class="h8">Heading 8</p>
+  <p class="h9">Heading 9</p>
+`;
+
+export const Content = () => html`
+  <p class="text-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique interdum elementum. Curabitur volutpat orci nulla, sed scelerisque est tincidunt eget. Fusce dolor tortor, porta sit amet mauris id, molestie viverra urna.</p>
+  <p class="text-small">Small text content lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique interdum elementum. Curabitur volutpat orci nulla, sed scelerisque est tincidunt eget. Fusce dolor tortor, porta sit amet mauris id, molestie viverra urna.</p>
+  <p class="text-legal">Legal text content lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique interdum elementum. Curabitur volutpat orci nulla, sed scelerisque est tincidunt eget. Fusce dolor tortor, porta sit amet mauris id, molestie viverra urna.</p>
+`;

package/dist/collection/global/app.js

@@ -0,0 +1,4 @@
+import { setMode } from '@stencil/core';
+setMode(elm => {
+  return elm.mode || elm.getAttribute('mode') || 'light';
+});

package/dist/collection/index.js

@@ -0,0 +1 @@
+export { addIcons } from './components/icon/utils';

package/dist/collection/utils/polyfill.js

@@ -0,0 +1,6 @@
+"use strict";
+// @ts-ignore
+if (window.applyFocusVisiblePolyfill == null) {
+  // @ts-ignore
+  import('focus-visible');
+}

package/dist/esm/app-7b5384c5.js

@@ -0,0 +1,5 @@
+import { s as setMode } from './index-42b74371.js';
+
+setMode(elm => {
+  return elm.mode || elm.getAttribute('mode') || 'light';
+});

package/dist/esm/css-shim-a7f418e3.js

@@ -0,0 +1,4 @@
+/*
+ Stencil Client Patch Esm v2.8.0 | MIT Licensed | https://stenciljs.com
+ */
+var __assign=function(){return (__assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var s in t=arguments[r])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)},StyleNode=function(){this.start=0,this.end=0,this.previous=null,this.parent=null,this.rules=null,this.parsedCssText="",this.cssText="",this.atRule=!1,this.type=0,this.keyframesName="",this.selector="",this.parsedSelector="";};function parse(e){return parseCss(lex(e=clean(e)),e)}function clean(e){return e.replace(RX.comments,"").replace(RX.port,"")}function lex(e){var t=new StyleNode;t.start=0,t.end=e.length;for(var r=t,n=0,s=e.length;n<s;n++)if(e[n]===OPEN_BRACE){r.rules||(r.rules=[]);var o=r,a=o.rules[o.rules.length-1]||null;(r=new StyleNode).start=n+1,r.parent=o,r.previous=a,o.rules.push(r);}else e[n]===CLOSE_BRACE&&(r.end=n+1,r=r.parent||t);return t}function parseCss(e,t){var r=t.substring(e.start,e.end-1);if(e.parsedCssText=e.cssText=r.trim(),e.parent){var n=e.previous?e.previous.end:e.parent.start;r=(r=(r=_expandUnicodeEscapes(r=t.substring(n,e.start-1))).replace(RX.multipleSpaces," ")).substring(r.lastIndexOf(";")+1);var s=e.parsedSelector=e.selector=r.trim();e.atRule=0===s.indexOf(AT_START),e.atRule?0===s.indexOf(MEDIA_START)?e.type=types.MEDIA_RULE:s.match(RX.keyframesRule)&&(e.type=types.KEYFRAMES_RULE,e.keyframesName=e.selector.split(RX.multipleSpaces).pop()):0===s.indexOf(VAR_START)?e.type=types.MIXIN_RULE:e.type=types.STYLE_RULE;}var o=e.rules;if(o)for(var a=0,i=o.length,l=void 0;a<i&&(l=o[a]);a++)parseCss(l,t);return e}function _expandUnicodeEscapes(e){return e.replace(/\\([0-9a-f]{1,6})\s/gi,(function(){for(var e=arguments[1],t=6-e.length;t--;)e="0"+e;return "\\"+e}))}var types={STYLE_RULE:1,KEYFRAMES_RULE:7,MEDIA_RULE:4,MIXIN_RULE:1e3},OPEN_BRACE="{",CLOSE_BRACE="}",RX={comments:/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,port:/@import[^;]*;/gim,customProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,mixinProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,mixinApply:/@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,varApply:/[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,keyframesRule:/^@[^\s]*keyframes/,multipleSpaces:/\s+/g},VAR_START="--",MEDIA_START="@media",AT_START="@";function findRegex(e,t,r){e.lastIndex=0;var n=t.substring(r).match(e);if(n){var s=r+n.index;return {start:s,end:s+n[0].length}}return null}var VAR_USAGE_START=/\bvar\(/,VAR_ASSIGN_START=/\B--[\w-]+\s*:/,COMMENTS=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,TRAILING_LINES=/^[\t ]+\n/gm;function resolveVar(e,t,r){return e[t]?e[t]:r?executeTemplate(r,e):""}function findVarEndIndex(e,t){for(var r=0,n=t;n<e.length;n++){var s=e[n];if("("===s)r++;else if(")"===s&&--r<=0)return n+1}return n}function parseVar(e,t){var r=findRegex(VAR_USAGE_START,e,t);if(!r)return null;var n=findVarEndIndex(e,r.start),s=e.substring(r.end,n-1).split(","),o=s[0],a=s.slice(1);return {start:r.start,end:n,propName:o.trim(),fallback:a.length>0?a.join(",").trim():void 0}}function compileVar(e,t,r){var n=parseVar(e,r);if(!n)return t.push(e.substring(r,e.length)),e.length;var s=n.propName,o=null!=n.fallback?compileTemplate(n.fallback):void 0;return t.push(e.substring(r,n.start),(function(e){return resolveVar(e,s,o)})),n.end}function executeTemplate(e,t){for(var r="",n=0;n<e.length;n++){var s=e[n];r+="string"==typeof s?s:s(t);}return r}function findEndValue(e,t){for(var r=!1,n=!1,s=t;s<e.length;s++){var o=e[s];if(r)n&&'"'===o&&(r=!1),n||"'"!==o||(r=!1);else if('"'===o)r=!0,n=!0;else if("'"===o)r=!0,n=!1;else {if(";"===o)return s+1;if("}"===o)return s}}return s}function removeCustomAssigns(e){for(var t="",r=0;;){var n=findRegex(VAR_ASSIGN_START,e,r),s=n?n.start:e.length;if(t+=e.substring(r,s),!n)break;r=findEndValue(e,s);}return t}function compileTemplate(e){var t=0;e=removeCustomAssigns(e=e.replace(COMMENTS,"")).replace(TRAILING_LINES,"");for(var r=[];t<e.length;)t=compileVar(e,r,t);return r}function resolveValues(e){var t={};e.forEach((function(e){e.declarations.forEach((function(e){t[e.prop]=e.value;}));}));for(var r={},n=Object.entries(t),s=function(e){var t=!1;if(n.forEach((function(e){var n=e[0],s=executeTemplate(e[1],r);s!==r[n]&&(r[n]=s,t=!0);})),!t)return "break"},o=0;o<10;o++){if("break"===s())break}return r}function getSelectors(e,t){if(void 0===t&&(t=0),!e.rules)return [];var r=[];return e.rules.filter((function(e){return e.type===types.STYLE_RULE})).forEach((function(e){var n=getDeclarations(e.cssText);n.length>0&&e.parsedSelector.split(",").forEach((function(e){e=e.trim(),r.push({selector:e,declarations:n,specificity:computeSpecificity(),nu:t});})),t++;})),r}function computeSpecificity(e){return 1}var IMPORTANT="!important",FIND_DECLARATIONS=/(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;function getDeclarations(e){for(var t,r=[];t=FIND_DECLARATIONS.exec(e.trim());){var n=normalizeValue(t[2]),s=n.value,o=n.important;r.push({prop:t[1].trim(),value:compileTemplate(s),important:o});}return r}function normalizeValue(e){var t=(e=e.replace(/\s+/gim," ").trim()).endsWith(IMPORTANT);return t&&(e=e.substr(0,e.length-IMPORTANT.length).trim()),{value:e,important:t}}function getActiveSelectors(e,t,r){var n=[],s=getScopesForElement(t,e);return r.forEach((function(e){return n.push(e)})),s.forEach((function(e){return n.push(e)})),sortSelectors(getSelectorsForScopes(n).filter((function(t){return matches(e,t.selector)})))}function getScopesForElement(e,t){for(var r=[];t;){var n=e.get(t);n&&r.push(n),t=t.parentElement;}return r}function getSelectorsForScopes(e){var t=[];return e.forEach((function(e){t.push.apply(t,e.selectors);})),t}function sortSelectors(e){return e.sort((function(e,t){return e.specificity===t.specificity?e.nu-t.nu:e.specificity-t.specificity})),e}function matches(e,t){return ":root"===t||"html"===t||e.matches(t)}function parseCSS(e){var t=parse(e),r=compileTemplate(e);return {original:e,template:r,selectors:getSelectors(t),usesCssVars:r.length>1}}function addGlobalStyle(e,t){if(e.some((function(e){return e.styleEl===t})))return !1;var r=parseCSS(t.textContent);return r.styleEl=t,e.push(r),!0}function updateGlobalScopes(e){var t=resolveValues(getSelectorsForScopes(e));e.forEach((function(e){e.usesCssVars&&(e.styleEl.textContent=executeTemplate(e.template,t));}));}function reScope(e,t){var r=e.template.map((function(r){return "string"==typeof r?replaceScope(r,e.scopeId,t):r})),n=e.selectors.map((function(r){return __assign(__assign({},r),{selector:replaceScope(r.selector,e.scopeId,t)})}));return __assign(__assign({},e),{template:r,selectors:n,scopeId:t})}function replaceScope(e,t,r){return e=replaceAll(e,"\\."+t,"."+r)}function replaceAll(e,t,r){return e.replace(new RegExp(t,"g"),r)}function loadDocument(e,t){return loadDocumentStyles(e,t),loadDocumentLinks(e,t).then((function(){updateGlobalScopes(t);}))}function startWatcher(e,t){"undefined"!=typeof MutationObserver&&new MutationObserver((function(){loadDocumentStyles(e,t)&&updateGlobalScopes(t);})).observe(document.head,{childList:!0});}function loadDocumentLinks(e,t){for(var r=[],n=e.querySelectorAll('link[rel="stylesheet"][href]:not([data-no-shim])'),s=0;s<n.length;s++)r.push(addGlobalLink(e,t,n[s]));return Promise.all(r)}function loadDocumentStyles(e,t){return Array.from(e.querySelectorAll("style:not([data-styles]):not([data-no-shim])")).map((function(e){return addGlobalStyle(t,e)})).some(Boolean)}function addGlobalLink(e,t,r){var n=r.href;return fetch(n).then((function(e){return e.text()})).then((function(s){if(hasCssVariables(s)&&r.parentNode){hasRelativeUrls(s)&&(s=fixRelativeUrls(s,n));var o=e.createElement("style");o.setAttribute("data-styles",""),o.textContent=s,addGlobalStyle(t,o),r.parentNode.insertBefore(o,r),r.remove();}})).catch((function(e){console.error(e);}))}var CSS_VARIABLE_REGEXP=/[\s;{]--[-a-zA-Z0-9]+\s*:/m;function hasCssVariables(e){return e.indexOf("var(")>-1||CSS_VARIABLE_REGEXP.test(e)}var CSS_URL_REGEXP=/url[\s]*\([\s]*['"]?(?!(?:https?|data)\:|\/)([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;function hasRelativeUrls(e){return CSS_URL_REGEXP.lastIndex=0,CSS_URL_REGEXP.test(e)}function fixRelativeUrls(e,t){var r=t.replace(/[^/]*$/,"");return e.replace(CSS_URL_REGEXP,(function(e,t){var n=r+t;return e.replace(t,n)}))}var CustomStyle=function(){function e(e,t){this.win=e,this.doc=t,this.count=0,this.hostStyleMap=new WeakMap,this.hostScopeMap=new WeakMap,this.globalScopes=[],this.scopesMap=new Map,this.didInit=!1;}return e.prototype.i=function(){var e=this;return this.didInit||!this.win.requestAnimationFrame?Promise.resolve():(this.didInit=!0,new Promise((function(t){e.win.requestAnimationFrame((function(){startWatcher(e.doc,e.globalScopes),loadDocument(e.doc,e.globalScopes).then((function(){return t()}));}));})))},e.prototype.addLink=function(e){var t=this;return addGlobalLink(this.doc,this.globalScopes,e).then((function(){t.updateGlobal();}))},e.prototype.addGlobalStyle=function(e){addGlobalStyle(this.globalScopes,e)&&this.updateGlobal();},e.prototype.createHostStyle=function(e,t,r,n){if(this.hostScopeMap.has(e))throw new Error("host style already created");var s=this.registerHostTemplate(r,t,n),o=this.doc.createElement("style");return o.setAttribute("data-no-shim",""),s.usesCssVars?n?(o["s-sc"]=t=s.scopeId+"-"+this.count,o.textContent="/*needs update*/",this.hostStyleMap.set(e,o),this.hostScopeMap.set(e,reScope(s,t)),this.count++):(s.styleEl=o,s.usesCssVars||(o.textContent=executeTemplate(s.template,{})),this.globalScopes.push(s),this.updateGlobal(),this.hostScopeMap.set(e,s)):o.textContent=r,o},e.prototype.removeHost=function(e){var t=this.hostStyleMap.get(e);t&&t.remove(),this.hostStyleMap.delete(e),this.hostScopeMap.delete(e);},e.prototype.updateHost=function(e){var t=this.hostScopeMap.get(e);if(t&&t.usesCssVars&&t.isScoped){var r=this.hostStyleMap.get(e);if(r){var n=resolveValues(getActiveSelectors(e,this.hostScopeMap,this.globalScopes));r.textContent=executeTemplate(t.template,n);}}},e.prototype.updateGlobal=function(){updateGlobalScopes(this.globalScopes);},e.prototype.registerHostTemplate=function(e,t,r){var n=this.scopesMap.get(t);return n||((n=parseCSS(e)).scopeId=t,n.isScoped=r,this.scopesMap.set(t,n)),n},e}();!function(e){!e||e.__cssshim||e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")||(e.__cssshim=new CustomStyle(e,e.document));}("undefined"!=typeof window&&window);