xv-webcomponents 0.1.39 → 0.1.41

package/dist/collection/components/xv-text-input/xv-text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"xv-text-input.js","sourceRoot":"","sources":["../../../src/components/xv-text-input/xv-text-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, h, Host, Element, Prop, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { TextInputStatus } from './_vars';\n\n/**\n * xv-text-input — custom input\n * ti get data you can use default Input event\n * Angular - (input), React - (onInput), Pure - addEventListener('input', e => ...)\n */\n@Component({\n  tag: 'xv-text-input-v2',\n  styleUrl: 'xv-text-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class XvTextInput {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true }) label?: string;\n  @Prop({ reflect: true }) placeholder?: string;\n  @Prop({ reflect: true }) helper: string = '';\n  @Prop({ reflect: true }) name?: string;\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop({ reflect: true }) status: TextInputStatus = TextInputStatus.DEF;\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n  @Event({ eventName: 'valueChange' }) valueChange: EventEmitter<string>;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readonly: boolean = false;\n  @Prop({ reflect: true }) loading: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private handleInput = (e: InputEvent) => {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    this.valueChange.emit(this.value);\n    this.internals.setFormValue(target.value);\n  }\n\n  render() {\n    return (\n      <Host name={this.name} class=\"xv-text-input\" role=\"textbox\" tabindex={this.disabled ? -1 : false}>\n        {this.label && <label class=\"label\">{this.label}</label>}\n\n        <div class=\"control\">\n          <input\n            type=\"text\"\n            class={{ withIcon: this.status !== TextInputStatus.DEF }}\n            readonly={this.readonly}\n            value={this.value}\n            disabled={this.disabled}\n            onInput={this.handleInput}\n            placeholder={this.placeholder}\n          />\n\n          {this.getControlIcon(this.status)}\n        </div>\n\n        {this.helper && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.value);\n  }\n\n  private getControlIcon = (status: TextInputStatus) => {\n    if (this.loading) {\n      return <xv-loader-v2 class=\"control_icon\" size={SIZE_VAR.XS} />\n    }\n    switch (status) {\n      case TextInputStatus.ERROR: {\n        return (\n          <svg class=\"control_icon error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path fill=\"currentColor\"\n                  d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\" />\n          </svg>\n        )\n      }\n      case TextInputStatus.WARNING:\n        return (\n          <svg class=\"control_icon warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path fill=\"currentColor\"\n                  d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\n          </svg>\n        )\n      default: return null;\n    }\n  };\n}\n"]}
+{"version":3,"file":"xv-text-input.js","sourceRoot":"","sources":["../../../src/components/xv-text-input/xv-text-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, h, Host, Prop, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n/**\n * xv-text-input — custom input\n * ti get data you can use default Input event\n * Angular - (input), React - (onInput), Pure - addEventListener('input', e => ...)\n */\n@Component({\n  tag: 'xv-text-input-v2',\n  styleUrl: 'xv-text-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class XvTextInput {\n  @Prop() type: 'text' | 'email' | 'password' | 'url' | 'tel' = 'text';\n  @Prop() label: string;\n  @Prop({ reflect: true }) placeholder?: string;\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) value: string = '';\n  @Event({ eventName: 'valueChange' }) valueChange: EventEmitter<string>;\n  @Prop() helper?: string;\n  @Prop() error?: string | boolean;\n  @Prop() warning?: string | boolean;\n  @Prop() readonly?: boolean;\n  @Prop() disabled?: boolean;\n  @Prop() loading: boolean = false;\n  @Prop() block?: boolean;\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private handleInput = (e: InputEvent) => {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    this.valueChange.emit(this.value);\n    this.internals.setFormValue(target.value);\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: !!this.disabled }}>\n        <label class=\"control\">\n          {this.label && <span class=\"control_label\">{this.label}</span>}\n\n          <div class={{\n            'control_input': true,\n            readonly: !!this.readonly,\n            [this.size]: true,\n            error: !!this.error,\n            warning: !!this.warning,\n          }}>\n            <input\n              type={this.type}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              onInput={this.handleInput}\n              name={this.name}\n              value={this.value}\n            />\n\n            <div class=\"control_input__icons\">\n              {this.loading && <xv-loader-v2 size={SIZE_VAR.XS} />}\n              {!!this.error ? (\n                <span class=\"status-icon error\" aria-hidden=\"true\">!</span>\n              ) : !!this.warning ? (\n                <span class=\"status-icon warning\" aria-hidden=\"true\">⚠</span>\n              ) : null}\n            </div>\n          </div>\n        </label>\n\n\n        {this.helper && <p class=\"message\">{this.helper}</p>}\n        {typeof this.error === 'string' ? (\n          <p class=\"message error\">{this.error}</p>\n        ) : typeof this.warning === 'string' ? (\n          <p class=\"message warning\">{this.warning}</p>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.css

@@ -0,0 +1,95 @@
+:host {
+  display: inline-block;
+  font-family: inherit;
+}
+:host .trigger {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  transition: 250ms ease-in-out color;
+  color: var(--icon-secondary);
+}
+:host .trigger_icon {
+  color: inherit;
+}
+:host .trigger ::slotted([slot=trigger]) {
+  transition: 250ms ease-in-out color;
+  color: var(--icon-secondary);
+}
+:host .trigger:hover, :host .trigger:active,
+:host .trigger ::slotted([slot=trigger]:hover),
+:host .trigger ::slotted([slot=trigger]:active) {
+  color: var(--icon-primary);
+}
+:host .trigger:focus,
+:host .trigger ::slotted([slot=trigger]:focus) {
+  color: var(--focus);
+}
+:host .popover {
+  opacity: 1;
+  z-index: 1000;
+  position: absolute;
+  background-color: var(--background-inverse);
+  color: var(--text-inverse);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  max-width: 288px;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin-top: 8px;
+  flex-direction: column;
+  display: flex;
+}
+:host .popover[data-popper-placement^=top] .popover-tip {
+  bottom: -4px;
+}
+:host .popover[data-popper-placement^=bottom] .popover-tip {
+  top: -4px;
+}
+:host .popover[data-popper-placement^=left] .popover-tip {
+  right: -4px;
+}
+:host .popover[data-popper-placement^=right] .popover-tip {
+  left: -4px;
+}
+:host .popover .popover-tip {
+  width: 10px;
+  height: 10px;
+  background-color: transparent;
+  z-index: -1;
+}
+:host .popover .popover-tip:before {
+  content: "";
+  transform: rotate(45deg);
+  background-color: var(--background-inverse);
+  width: inherit;
+  height: inherit;
+  display: inline-block;
+}
+:host .popover .popover-content {
+  padding: var(--gap-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-04);
+}
+:host .popover .popover-content ::slotted([slot=header]) {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+:host .popover .popover-content ::slotted([slot=body]) {
+  font-size: 0.875rem;
+  color: var(--text-inverse);
+}
+:host .popover .popover-content ::slotted([slot=footer]) {
+  font-size: 0.75rem;
+  color: var(--text-inverse);
+  opacity: 0.8;
+}
+
+:host(:not([open])) .popover {
+  opacity: 0;
+  z-index: -1;
+  user-select: none;
+  pointer-events: none;
+}

package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js

@@ -0,0 +1,201 @@
+import { h, Host } from "@stencil/core";
+import { createPopper } from "@popperjs/core";
+export class XvToggleTip {
+    constructor() {
+        this.open = false;
+        this.position = 'auto';
+        this.destroyPopper = () => {
+            if (this.popperInstance) {
+                this.popperInstance.destroy();
+                this.popperInstance = undefined;
+            }
+        };
+    }
+    openChangeHandle() {
+        if (this.open) {
+            requestAnimationFrame(() => this.createPopper());
+        }
+        else {
+            this.destroyPopper();
+        }
+        this.openChange.emit(this.open);
+    }
+    handleClickOutside(e) {
+        if (this.open && !this.el.contains(e.target)) {
+            this.open = false;
+        }
+    }
+    ;
+    handleKeyDown(e) {
+        if (e.key === 'Escape' && this.open) {
+            this.open = false;
+        }
+    }
+    ;
+    async setPopover(open) {
+        if (open === this.open)
+            return;
+        this.open = open;
+        return this.open;
+    }
+    ;
+    createPopper() {
+        if (!this.triggerEl || !this.popoverEl) {
+            console.warn('XvToggleTip can`t find the trigger or popover container!');
+            return;
+        }
+        this.popperInstance = createPopper(this.triggerEl, this.popoverEl, {
+            placement: this.position,
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 8],
+                    },
+                },
+                {
+                    name: 'preventOverflow',
+                    options: {
+                        boundary: 'viewport',
+                        padding: 8,
+                    },
+                },
+            ],
+        });
+    }
+    ;
+    render() {
+        return (h(Host, { key: '098a12a12ea834fdbe0e05ad416df079991392a9', class: "xv-toggle-tip" }, h("div", { key: '0916aafb4d45b1cc40b3358c56c66e2156fb6e1f', class: "trigger", role: "button", tabindex: "0", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "popover", onClick: () => this.setPopover(!this.open), ref: (el) => (this.triggerEl = el) }, h("slot", { key: '3e848492e91f580a70181779f1ea689f646b9df7', name: "trigger" }, h("svg", { key: 'd9d4c1d33299c5ef0d07d1bcb18e725935b23de3', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '0d0002339eab33a4061d02e4d2108129c4df045d', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))), h("div", { key: 'bdcadfb1cf28b0efe06bad4d8182e736798c5c9c', class: { popover: true }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, h("div", { key: '8a0f4c62e5774f085b7dd155f4858eb967195c8a', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), h("div", { key: '76e30305c8a0147c8dffcba69666f81ddf8943f6', class: "popover-content" }, h("slot", { key: 'a1082ff655a936449a14560771f0b8d1b09c83b5', name: "header" }), h("slot", { key: 'dab04aa698b7169d2ddce0326f7ac8ab5911f48a', name: "body" }), h("slot", { key: 'a31ece6410d5dd8eb16fcf059713e460f1e58e1f', name: "footer" })))));
+    }
+    disconnectedCallback() {
+        this.destroyPopper();
+    }
+    static get is() { return "xv-toggle-tip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-toggle-tip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-toggle-tip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "attribute": "position",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@popperjs/core",
+                            "id": "node_modules::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'auto'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "openChange",
+                "name": "openChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setPopover": {
+                "complexType": {
+                    "signature": "(open: boolean) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "open",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChangeHandle"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClickOutside",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-toggle-tip.js.map

package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-toggle-tip.js","sourceRoot":"","sources":["../../../src/components/xv-toggle-tip/xv-toggle-tip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Event, Prop, Listen, Watch, Method, Element, Component, Host, EventEmitter } from '@stencil/core';\nimport { createPopper, Instance, Placement } from '@popperjs/core';\n\n@Component({\n  tag: 'xv-toggle-tip',\n  styleUrl: 'xv-toggle-tip.scss',\n  shadow: true,\n})\nexport class XvToggleTip {\n  @Element() el: HTMLElement;\n\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n  @Prop() position: Placement = 'auto';\n  @Event({ eventName: 'openChange' }) openChange: EventEmitter<boolean>;\n\n  private triggerEl!: HTMLElement;\n  private popoverEl!: HTMLElement;\n  private popperInstance?: Instance;\n\n  @Watch('open')\n  openChangeHandle() {\n    if (this.open) {\n      requestAnimationFrame(() => this.createPopper());\n    } else {\n      this.destroyPopper();\n    }\n    this.openChange.emit(this.open);\n  }\n\n  @Listen('click', { target: 'document' })\n  handleClickOutside(e: MouseEvent) {\n    if (this.open && !this.el.contains(e.target as Node)) {\n      this.open = false;\n    }\n  };\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Escape' && this.open) {\n      this.open = false;\n    }\n  };\n\n  @Method()\n  async setPopover(open: boolean) {\n    if (open === this.open) return;\n    this.open = open;\n\n    return this.open;\n  };\n\n  private createPopper() {\n    if (!this.triggerEl || !this.popoverEl) {\n      console.warn('XvToggleTip can`t find the trigger or popover container!');\n      return;\n    }\n\n    this.popperInstance = createPopper(this.triggerEl, this.popoverEl, {\n      placement: this.position,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [0, 8],\n          },\n        },\n        {\n          name: 'preventOverflow',\n          options: {\n            boundary: 'viewport',\n            padding: 8,\n          },\n        },\n      ],\n    });\n  };\n\n  private destroyPopper = () => {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = undefined;\n    }\n  };\n\n  render() {\n    return (\n      <Host class=\"xv-toggle-tip\">\n        <div\n          class=\"trigger\"\n          role=\"button\"\n          tabindex=\"0\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls=\"popover\"\n          onClick={() => this.setPopover(!this.open)}\n          ref={(el) => (this.triggerEl = el)}\n        >\n          <slot name=\"trigger\">\n            <svg class=\"trigger_icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width={16} height={16}>\n              <path\n                fill=\"currentColor\"\n                d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"\n              />\n            </svg>\n          </slot>\n        </div>\n\n        <div\n          class={{ popover: true }}\n          role=\"tooltip\"\n          tabindex=\"-1\"\n          ref={(el) => (this.popoverEl = el)}\n        >\n          <div class=\"popover-tip\" part=\"tip\" data-popper-arrow=\"\"></div>\n          <div class=\"popover-content\">\n            <slot name=\"header\"></slot>\n            <slot name=\"body\"></slot>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  disconnectedCallback() {\n    this.destroyPopper();\n  }\n}\n"]}

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

@@ -1,159 +1,43 @@
 :host {
   position: relative;
-  display: inline-block;
-  cursor: pointer;
-  line-height: 0.5;
+  display: contents;
 }
 
-/* General styles for tooltip */
-:host::before,
-:host::after {
+.xv-tooltip[role=tooltip] {
   position: absolute;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.2s ease-in-out 0.5s, transform 0.2s ease-in-out 0.5s;
-  z-index: 10;
-}
-
-/* Tooltip */
-:host::before {
-  content: attr(tooltip);
-  background: var(--background-inverse, #333);
-  color: var(--icon-inverse, #fff);
-  padding: var(--gap-sm, 5px) var(--gap-md, 16px);
-  border-radius: 2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 70vw;
-  font-family: var(--fz-body, Tahoma);
-  font-size: var(fz-md, 14px);
-  font-weight: 400;
-  line-height: 18px;
-  letter-spacing: 0.16px;
-}
-
-:host([multiline])::before {
-  white-space: normal;
-  min-width: 300px;
+  background-color: var(--background-inverse);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-md);
+  z-index: 999;
+  max-width: min(400px, 90vw);
+  overflow: visible;
+}
+.xv-tooltip[role=tooltip] [data-popper-arrow] {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: transparent;
+  z-index: -1;
 }
-
-/* Arrow */
-:host::after {
+.xv-tooltip[role=tooltip] [data-popper-arrow]:before {
   content: "";
-  border: 6px solid transparent;
-}
-
-/* Show Tooltip and arrow */
-:host(:hover)::before,
-:host(:hover)::after,
-:host(:focus)::before,
-:host(:focus)::after {
-  opacity: 1;
-  visibility: visible;
-}
-
-/* Tooltip positions */
-:host(.xv-tooltip_top)::before {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-5px);
-}
-
-:host(.xv-tooltip_top)::after {
-  bottom: 100%;
-  left: 50%;
-  border-top-color: var(--background-inverse, #333);
-  transform: translateX(-50%) translateY(5px);
-}
-
-:host(.xv-tooltip_top-left)::before {
-  bottom: 100%;
-  left: 0;
-  transform: translateY(-5px);
-}
-
-:host(.xv-tooltip_top-left)::after {
-  bottom: 100%;
-  left: 10px;
-  border-top-color: black;
-  transform: translateY(5px);
-}
-
-:host(.xv-tooltip_top-right)::before {
-  bottom: 100%;
-  right: 0;
-  transform: translateY(-5px);
-}
-
-:host(.xv-tooltip_top-right)::after {
-  bottom: 100%;
-  right: 10px;
-  border-top-color: var(--background-inverse, #333);
-  transform: translateY(5px);
-}
-
-:host(.xv-tooltip_bottom)::before {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%) translateY(5px);
-}
-
-:host(.xv-tooltip_bottom)::after {
-  top: 100%;
-  left: 50%;
-  border-bottom-color: black;
-  transform: translateX(-50%) translateY(-5px);
-}
-
-:host(.xv-tooltip_bottom-left)::before {
-  top: 100%;
-  left: 0;
-  transform: translateY(5px);
-}
-
-:host(.xv-tooltip_bottom-left)::after {
-  top: 100%;
-  left: 10px;
-  border-bottom-color: var(--background-inverse, #333);
-  transform: translateY(-5px);
+  transform: rotate(45deg);
+  background-color: var(--background-inverse);
+  width: inherit;
+  height: inherit;
+  display: inline-block;
 }
-
-:host(.xv-tooltip_bottom-right)::before {
-  top: 100%;
-  right: 0;
-  transform: translateY(5px);
+.xv-tooltip[role=tooltip][data-popper-placement^=top] [data-popper-arrow] {
+  bottom: 1px;
 }
-
-:host(.xv-tooltip_bottom-right)::after {
-  top: 100%;
-  right: 10px;
-  border-bottom-color: var(--background-inverse, #333);
-  transform: translateY(-5px);
+.xv-tooltip[role=tooltip][data-popper-placement^=bottom] [data-popper-arrow] {
+  top: -10px;
 }
-
-:host(.xv-tooltip_left)::before {
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%) translateX(-5px);
+.xv-tooltip[role=tooltip][data-popper-placement^=left] [data-popper-arrow] {
+  right: -4px;
 }
-
-:host(.xv-tooltip_left)::after {
-  right: 100%;
-  top: 50%;
-  border-left-color: var(--background-inverse, #333);
-  transform: translateY(-50%) translateX(5px);
-}
-
-:host(.xv-tooltip_right)::before {
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%) translateX(5px);
-}
-
-:host(.xv-tooltip_right)::after {
-  left: 100%;
-  top: 50%;
-  border-right-color: var(--background-inverse, #333);
-  transform: translateY(-50%) translateX(-5px);
+.xv-tooltip[role=tooltip][data-popper-placement^=right] [data-popper-arrow] {
+  left: -4px;
 }