xv-webcomponents 0.1.26 → 0.1.28

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

@@ -0,0 +1,79 @@
+:host(.xv-tabs) {
+  display: flex;
+  flex-direction: column;
+}
+:host(.xv-tabs) .tab-headers {
+  display: flex;
+}
+:host(.xv-tabs) .tab-headers button {
+  background: none;
+  padding: 11px var(--gap-md, 16px);
+  cursor: pointer;
+  font: inherit;
+  transition: border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;
+  position: relative;
+  border: 2px solid transparent;
+  border-bottom-color: var(--border-border-subtle-01, #D1D1D1);
+  background-blend-mode: multiply;
+  color: var(--text-secondary, #515151);
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-md, 14px);
+  line-height: 18px;
+  letter-spacing: 0.16px;
+  height: 40px;
+  white-space: nowrap;
+}
+:host(.xv-tabs) .tab-headers button:after {
+  content: "";
+  position: absolute;
+  transition: background-color 0.3s ease, width 0.3s ease;
+  top: 100%;
+  left: 0;
+  right: 0;
+  width: 0;
+  height: 2px;
+  background-color: var(--interactive-01, #273435);
+}
+:host(.xv-tabs) .tab-headers button:focus {
+  outline: none;
+  border: 2px solid var(--border-border-subtle-01, #D1D1D1);
+}
+:host(.xv-tabs) .tab-headers button:hover {
+  border-bottom-color: var(--border-strong-01, #8B8B8B);
+}
+:host(.xv-tabs) .tab-headers button.active {
+  color: var(--text-primary, #333);
+  font-weight: 700;
+}
+:host(.xv-tabs) .tab-headers button.active:after {
+  width: 100%;
+}
+:host(.xv-tabs) .tab-headers button.active:focus {
+  border-color: var(--interactive-01, #273435);
+}
+:host(.xv-tabs) .tab-headers button:disabled {
+  color: var(--text-on-color-disabled, #8B8B8B);
+  border-bottom-color: var(--border-disabled, #D1D1D1);
+  cursor: not-allowed;
+}
+:host(.xv-tabs) .tab-headers button:disabled:after {
+  background-color: var(--border-disabled, #D1D1D1);
+}
+:host(.xv-tabs) .tab-content-wrapper {
+  position: relative;
+  overflow: hidden;
+  transition: height 0.3s ease;
+  padding: var(--gap-md, 16px);
+}
+:host(.xv-tabs) ::slotted(xv-tab-v2) {
+  position: absolute;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  width: 100%;
+  pointer-events: none;
+}
+:host(.xv-tabs) ::slotted(xv-tab-v2.active) {
+  position: relative;
+  opacity: 1;
+  pointer-events: auto;
+}

package/dist/collection/components/xv-tabs/xv-tabs.js

@@ -0,0 +1,158 @@
+import { Host, h } from "@stencil/core";
+import { TAB_TAGS, TABS_VATIANT } from "./_vars";
+export class XvTabs {
+    constructor() {
+        /**
+         * Index of active tab
+         */
+        this.active = 0;
+        /**
+         * Variant of tabs from TABS_VATIANT enum
+         */
+        this.variant = TABS_VATIANT.DEFAULT;
+        /**
+         * for animate the tab content
+         */
+        this.height = 0;
+        /**
+         * local variable for tab labels collection
+         */
+        this.tabElements = [];
+    }
+    /**
+     * Watch active tab changes to animate content height
+     */
+    onActiveTabChanged() {
+        this.setHeight();
+    }
+    collectTabs() {
+        if (!this.tabElements.length) {
+            this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
+        }
+    }
+    updateTabClasses() {
+        this.tabElements.forEach((tab, i) => {
+            tab.classList.toggle('active', i === this.active);
+        });
+    }
+    setHeight() {
+        requestAnimationFrame(() => {
+            var _a;
+            const tab = this.tabElements[this.active];
+            if (tab) {
+                const content = (_a = tab.shadowRoot) === null || _a === void 0 ? void 0 : _a.host;
+                this.height = (content === null || content === void 0 ? void 0 : content.scrollHeight) || 0;
+            }
+        });
+    }
+    handleTabClick(index) {
+        if (index === this.active)
+            return;
+        this.active = index;
+        this.setHeight();
+        this.tabSelect.emit(this.active);
+    }
+    render() {
+        return (h(Host, { key: '490001d8e74c759e11a2fc99c545d0a3429465f6', class: "xv-tabs", variant: this.variant }, h("div", { key: 'bd5210a9e26775c56b14fb4d0a330ed472033403', class: "tab-headers", role: "tablist" }, this.tabElements.map((tab, index) => (h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: { active: index === this.active }, onClick: () => this.handleTabClick(index) }, tab.getAttribute('label') || `Tab ${index + 1}`)))), h("div", { key: '0e15189ae37d5ac1431545df44a4c6500694a2fc', class: "tab-content-wrapper", style: { height: `${this.height}px` }, role: "tabpanel", tabindex: -1 }, h("slot", { key: '18dc32e8d6f6576b355786d6c959582df87a59b5' }))));
+    }
+    componentWillLoad() {
+        this.collectTabs();
+        this.setHeight();
+    }
+    componentDidRender() {
+        this.updateTabClasses();
+    }
+    static get is() { return "xv-tabs-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-tabs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of active tab"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": true,
+                "defaultValue": "0"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TABS_VATIANT",
+                    "resolved": "TABS_VATIANT",
+                    "references": {
+                        "TABS_VATIANT": {
+                            "location": "import",
+                            "path": "./_vars",
+                            "id": "src/components/xv-tabs/_vars.ts::TABS_VATIANT"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant of tabs from TABS_VATIANT enum"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "TABS_VATIANT.DEFAULT"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "height": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tabSelect",
+                "name": "tabSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emit event to outside"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "active",
+                "methodName": "onActiveTabChanged"
+            }];
+    }
+}
+//# sourceMappingURL=xv-tabs.js.map

package/dist/collection/components/xv-tabs/xv-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-tabs.js","sourceRoot":"","sources":["../../../src/components/xv-tabs/xv-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, State, Watch, Prop, Event, EventEmitter } from '@stencil/core';\nimport { TAB_TAGS, TABS_VATIANT } from './_vars';\n\n@Component({\n  tag: 'xv-tabs-v2',\n  styleUrl: 'xv-tabs.scss',\n  shadow: true,\n})\nexport class XvTabs {\n  @Element() el: HTMLElement;\n  /**\n   * Index of active tab\n   */\n  @Prop({ reflect: true, mutable: true }) active: number = 0;\n  /**\n   * Variant of tabs from TABS_VATIANT enum\n   */\n  @Prop() variant: TABS_VATIANT = TABS_VATIANT.DEFAULT;\n  /**\n   * for animate the tab content\n   */\n  @State() height: number = 0;\n  /**\n   * Emit event to outside\n   */\n  @Event() tabSelect: EventEmitter<number>;\n  /**\n   * local variable for tab labels collection\n   */\n  private tabElements: HTMLElement[] = [];\n  /**\n   * Watch active tab changes to animate content height\n   */\n  @Watch('active')\n  onActiveTabChanged() {\n    this.setHeight();\n  }\n\n  private collectTabs() {\n    if (!this.tabElements.length) {\n      this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));\n    }\n  }\n\n  private updateTabClasses() {\n    this.tabElements.forEach((tab, i) => {\n      tab.classList.toggle('active', i === this.active);\n    });\n  }\n\n  private setHeight() {\n    requestAnimationFrame(() => {\n      const tab = this.tabElements[this.active];\n      if (tab) {\n        const content = tab.shadowRoot?.host;\n        this.height = content?.scrollHeight || 0;\n      }\n    });\n  }\n\n  private handleTabClick(index: number) {\n    if (index === this.active) return;\n\n    this.active = index;\n    this.setHeight();\n    this.tabSelect.emit(this.active);\n  }\n\n  render() {\n    return (\n      <Host class=\"xv-tabs\" variant={this.variant}>\n        <div class=\"tab-headers\" role=\"tablist\">\n          {this.tabElements.map((tab, index) => (\n            <button\n              role=\"tab\"\n              disabled={!!tab.getAttribute('disabled') || !!(tab as any)?.disabled}\n              class={{ active: index === this.active }}\n              onClick={() => this.handleTabClick(index)}\n            >\n              {tab.getAttribute('label') || `Tab ${index + 1}`}\n            </button>\n          ))}\n        </div>\n\n        <div\n          class=\"tab-content-wrapper\"\n          style={{ height: `${this.height}px` }}\n          role=\"tabpanel\"\n          tabindex={-1}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.collectTabs();\n    this.setHeight();\n  }\n\n  componentDidRender() {\n    this.updateTabClasses();\n  }\n}\n"]}

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

@@ -0,0 +1,97 @@
+@charset "UTF-8";
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 1000px;
+  background-color: var(--background);
+  color: var(--text-primary);
+  font-family: var(--ff-body, inherit);
+}
+:host .xv-tag_content {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: inherit;
+  font-family: var(--ff-body);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host .xv-tag_close {
+  box-sizing: border-box;
+  text-decoration: none;
+  border: none;
+  background-color: inherit;
+  outline: none;
+  border-spacing: 0;
+  list-style: none outside none;
+  margin: 0;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 62px;
+  width: 15px;
+  height: 15px;
+  text-align: left;
+  color: inherit;
+  text-indent: 0;
+  transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;
+}
+:host .xv-tag_close:hover {
+  cursor: pointer;
+  filter: brightness(80%);
+}
+:host .xv-tag_close:active {
+  opacity: 0.7;
+}
+:host .xv-tag_close:focus {
+  outline: 1px solid currentColor;
+}
+:host .xv-tag_close:after {
+  overflow: hidden;
+  width: inherit;
+  height: inherit;
+  color: inherit;
+  font-size: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  content: "×";
+}
+
+:host(.sm) {
+  font-size: var(--fz-sm);
+}
+
+:host(.md) {
+  font-size: var(--fz-md);
+}
+:host(.md) .xv-tag_content {
+  line-height: 24px;
+}
+:host(.md) .xv-tag_close {
+  height: 24px;
+  width: 24px;
+}
+
+:host(.lg) {
+  font-size: var(--fz-lg);
+}
+:host(.lg) .xv-tag_content {
+  line-height: 26px;
+}
+:host(.lg) .xv-tag_close {
+  height: 26px;
+  width: 26px;
+}
+
+:host(.disabled) {
+  pointer-events: none;
+  background-color: var(--layer-01);
+  color: var(--text-disabled);
+}

package/dist/collection/components/xv-tag/xv-tag.js

@@ -0,0 +1,158 @@
+import { Host, h } from "@stencil/core";
+export class XvTag {
+    constructor() {
+        this.size = 'md';
+        this.color = '';
+        this.bg = '';
+        this.disabled = false;
+        this.closeable = false;
+    }
+    closeHandler(e) {
+        if (this.disabled)
+            return;
+        this.closeClick.emit(e);
+    }
+    render() {
+        return (h(Host, { key: 'cca59dceeb566fa038234f7962be22424dc9a35e', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '5d7bedbbbb7ce916b1aa5efda7cebe957b985762', class: "xv-tag_content" }, h("slot", { key: '300db1eecac2be8508b328cd869599af162c04a8' })), this.closeable && (h("button", { key: '4d7eacbb1d380ecf664780e4466129327563bace', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
+    }
+    static get is() { return "xv-tag-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-tag.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "bg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "bg",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "closeable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "closeable",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeClick",
+                "name": "closeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PointerEvent",
+                    "resolved": "PointerEvent",
+                    "references": {
+                        "PointerEvent": {
+                            "location": "global",
+                            "id": "global::PointerEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xv-tag.js.map

package/dist/collection/components/xv-tag/xv-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-tag.js","sourceRoot":"","sources":["../../../src/components/xv-tag/xv-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,KAAK;IALlB;QAMU,SAAI,GAAuB,IAAI,CAAC;QAChC,UAAK,GAAW,EAAE,CAAC;QACnB,OAAE,GAAW,EAAE,CAAC;QAChB,aAAQ,GAAY,KAAK,CAAC;QAC1B,cAAS,GAAY,KAAK,CAAC;KAwBpC;IArBC,YAAY,CAAC,CAAe;QAC1B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,EACjD,KAAK,EAAE,UAAU,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE;YAE/D,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,8DAAa,CACT;YACL,IAAI,CAAC,SAAS,IAAI,CACjB,+DAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAC,cAAc,GAAU,CAC9E,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xv-tag-v2',\n  styleUrl: 'xv-tag.scss',\n  shadow: true,\n})\nexport class XvTag {\n  @Prop() size: 'sm' | 'md' | 'lg' = 'md';\n  @Prop() color: string = '';\n  @Prop() bg: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() closeable: boolean = false;\n  @Event() closeClick: EventEmitter<PointerEvent>;\n\n  closeHandler(e: PointerEvent) {\n    if (this.disabled) return;\n\n    this.closeClick.emit(e);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{ color: this.color, background: this.bg }}\n        class={`xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}`}\n      >\n        <div class=\"xv-tag_content\">\n          <slot></slot>\n        </div>\n        {this.closeable && (\n          <button onClick={this.closeHandler.bind(this)} class=\"xv-tag_close\"></button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,154 @@
+:host {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  line-height: 0.5;
+}
+
+/* General styles for tooltip */
+:host::before,
+:host::after {
+  position: absolute;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+  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;
+}
+
+/* Arrow */
+:host::after {
+  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);
+}
+
+:host(.xv-tooltip_bottom-right)::before {
+  top: 100%;
+  right: 0;
+  transform: translateY(5px);
+}
+
+:host(.xv-tooltip_bottom-right)::after {
+  top: 100%;
+  right: 10px;
+  border-bottom-color: var(--background-inverse, #333);
+  transform: translateY(-5px);
+}
+
+:host(.xv-tooltip_left)::before {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(-5px);
+}
+
+: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);
+}