xv-webcomponents 0.1.20 → 0.1.23

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

@@ -0,0 +1,245 @@
+import { Host, h } from "@stencil/core";
+import { TABLE_COLOR_SCHEMA, TABLE_SIZE } from "./defs";
+export class XvTable {
+    constructor() {
+        /**
+         * Set current color schema type of enum TABLE_COLOR_SCHEMA
+         * Possible options 'zebra'
+         */
+        this.colorSchema = TABLE_COLOR_SCHEMA.DEF;
+        /**
+         * If table is expandable fields
+         */
+        this.expandable = false;
+        /**
+         * Table size
+         * enum TABLE_SIZE
+         */
+        this.size = TABLE_SIZE.MEDIUM;
+        /**
+         * Add checkbox selection to the table
+         */
+        this.selectable = false;
+        this.selectedRows = new Map();
+        this.handleCheckedChange = (e) => {
+            const { name, value, checked } = e.detail;
+            if (checked) {
+                this.selectedRows.set(name, { name, value });
+            }
+            else {
+                this.selectedRows.delete(name);
+            }
+            this.changeSelection.emit(Array.from(this.selectedRows.values()));
+        };
+    }
+    setRowPropsHandler() {
+        const rows = Array
+            .from(this.el.childNodes)
+            .filter((node) => node.nodeType === Node.ELEMENT_NODE &&
+            ((node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-ROW` || (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`));
+        let visualIndex = 0;
+        rows.forEach((node, i) => {
+            var _a;
+            const row = node;
+            const isHeaderRow = (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`;
+            if (this.selectable) {
+                let name = row.getAttribute('selection-name');
+                if (!name) {
+                    name = isHeaderRow ? 'header' : `xv-table-row-${i}`;
+                    row.setAttribute('selection-name', name);
+                }
+                if (row.hasAttribute('checked')) {
+                    this.selectedRows.set(name, {
+                        name,
+                        value: (_a = row.getAttribute('value')) !== null && _a !== void 0 ? _a : undefined,
+                    });
+                }
+            }
+            if (isHeaderRow)
+                return;
+            switch (this.colorSchema) {
+                case TABLE_COLOR_SCHEMA.ZEBRA:
+                    const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';
+                    if (row.hasAttribute('expandable') && rows[i + 1]) {
+                        row.setAttribute(stripe, '');
+                    }
+                    else {
+                        visualIndex++;
+                        row.setAttribute(stripe, '');
+                    }
+                    break;
+                default:
+                    row.removeAttribute('odd');
+                    row.removeAttribute('even');
+            }
+        });
+    }
+    render() {
+        return (h(Host, { key: '514ec9bc5e8baa2ba10d6362ad99adbeb80da6ae', size: this.size, selectable: this.selectable }, (this.el.title || this.description) && (h("div", { key: '085ee0a2f2154d8f59d5a904982ce3b535f56fb9', class: "caption" }, this.el.title && h("h5", { key: '7950e00138afefca12f9ccae625556ce785af0d8', class: "caption_title" }, this.el.title), this.description && h("p", { key: 'c8b88da8bd0fcc90782d2a785b61cdfab03cd6f9', class: "caption_description" }, this.description))), h("slot", { key: '6f54c35517ca01861836b6606e0b25177c6ba5b7' })));
+    }
+    componentWillLoad() {
+        this.setRowPropsHandler();
+        this.el.addEventListener('checkedChange', this.handleCheckedChange);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('checkedChange', this.handleCheckedChange);
+    }
+    static get is() { return "xv-table-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Table caption description"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": false
+            },
+            "colorSchema": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TABLE_COLOR_SCHEMA",
+                    "resolved": "TABLE_COLOR_SCHEMA.DEF | TABLE_COLOR_SCHEMA.ZEBRA",
+                    "references": {
+                        "TABLE_COLOR_SCHEMA": {
+                            "location": "import",
+                            "path": "./defs",
+                            "id": "src/components/xv-table/defs.ts::TABLE_COLOR_SCHEMA"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set current color schema type of enum TABLE_COLOR_SCHEMA\r\nPossible options 'zebra'"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color-schema",
+                "reflect": false,
+                "defaultValue": "TABLE_COLOR_SCHEMA.DEF"
+            },
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If table is expandable fields"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expandable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TABLE_SIZE",
+                    "resolved": "TABLE_SIZE.EXTRA_LARGE | TABLE_SIZE.EXTRA_SMALL | TABLE_SIZE.LARGE | TABLE_SIZE.MEDIUM | TABLE_SIZE.SMALL",
+                    "references": {
+                        "TABLE_SIZE": {
+                            "location": "import",
+                            "path": "./defs",
+                            "id": "src/components/xv-table/defs.ts::TABLE_SIZE"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Table size\r\nenum TABLE_SIZE"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "TABLE_SIZE.MEDIUM"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add checkbox selection to the table"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selectable",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedRows": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeSelection",
+                "name": "changeSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string, value?: any }[]",
+                    "resolved": "{ name: string; value?: any; }[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "colorSchema",
+                "methodName": "setRowPropsHandler"
+            }];
+    }
+}
+//# sourceMappingURL=xv-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table.js","sourceRoot":"","sources":["../../../src/components/xv-table/xv-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State } from '@stencil/core';\r\nimport { TABLE_COLOR_SCHEMA, TABLE_SIZE, TableSelectionEvent } from './defs';\r\n\r\n@Component({\r\n  tag: 'xv-table-v2',\r\n  styleUrl: 'xv-table.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTable {\r\n  @Element() el: HTMLElement;\r\n  /**\r\n   * Table caption description\r\n   */\r\n  @Prop() description: string;\r\n  /**\r\n   * Set current color schema type of enum TABLE_COLOR_SCHEMA\r\n   * Possible options 'zebra'\r\n   */\r\n  @Prop({ attribute: 'color-schema' }) colorSchema: TABLE_COLOR_SCHEMA = TABLE_COLOR_SCHEMA.DEF;\r\n  /**\r\n   * If table is expandable fields\r\n   */\r\n  @Prop() expandable: boolean = false;\r\n  /**\r\n   * Table size\r\n   * enum TABLE_SIZE\r\n   */\r\n  @Prop() size: TABLE_SIZE = TABLE_SIZE.MEDIUM;\r\n  /**\r\n   * Add checkbox selection to the table\r\n   */\r\n  @Prop() selectable: boolean = false;\r\n\r\n  @State() selectedRows = new Map<string, { name: string, value?: string }>();\r\n\r\n  @Event() changeSelection: EventEmitter<{ name: string, value?: any }[]>;\r\n\r\n  @Watch('colorSchema')\r\n  setRowPropsHandler() {\r\n    const rows = Array\r\n      .from(this.el.childNodes)\r\n      .filter((node) =>\r\n        node.nodeType === Node.ELEMENT_NODE &&\r\n        ((node as any)?.tagName === `${this.el.tagName}-ROW` || (node as any)?.tagName === `${this.el.tagName}-HEADER-ROW`)\r\n      );\r\n    let visualIndex = 0;\r\n\r\n    rows.forEach((node, i) => {\r\n      const row = (node as HTMLElement);\r\n      const isHeaderRow = (node as any)?.tagName === `${this.el.tagName}-HEADER-ROW`;\r\n\r\n      if (this.selectable) {\r\n        let name = row.getAttribute('selection-name');\r\n\r\n        if (!name) {\r\n          name = isHeaderRow ? 'header' : `xv-table-row-${i}`;\r\n          row.setAttribute('selection-name', name);\r\n        }\r\n\r\n        if (row.hasAttribute('checked')) {\r\n          this.selectedRows.set(name, {\r\n            name,\r\n            value: row.getAttribute('value') ?? undefined,\r\n          })\r\n        }\r\n      }\r\n\r\n      if (isHeaderRow) return;\r\n\r\n      switch (this.colorSchema) {\r\n        case TABLE_COLOR_SCHEMA.ZEBRA:\r\n          const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';\r\n          if (row.hasAttribute('expandable') && rows[i + 1]) {\r\n            row.setAttribute(stripe, '');\r\n          } else {\r\n            visualIndex++;\r\n            row.setAttribute(stripe, '');\r\n          }\r\n          break;\r\n        default:\r\n          row.removeAttribute('odd');\r\n          row.removeAttribute('even');\r\n      }\r\n    });\r\n  }\r\n\r\n  private handleCheckedChange = (e: TableSelectionEvent) => {\r\n    const { name, value, checked } = e.detail;\r\n\r\n    if (checked) {\r\n      this.selectedRows.set(name, { name, value });\r\n    } else {\r\n      this.selectedRows.delete(name);\r\n    }\r\n\r\n    this.changeSelection.emit(Array.from(this.selectedRows.values()));\r\n  }\r\n\r\n    render() {\r\n    return (\r\n      <Host size={this.size} selectable={this.selectable}>\r\n        {(this.el.title || this.description) && (\r\n          <div class=\"caption\">\r\n            {this.el.title && <h5 class=\"caption_title\">{this.el.title}</h5>}\r\n            {this.description && <p class=\"caption_description\">{this.description}</p>}\r\n          </div>\r\n        )}\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.setRowPropsHandler();\r\n    this.el.addEventListener('checkedChange', this.handleCheckedChange as any);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.el.removeEventListener('checkedChange', this.handleCheckedChange as any);\r\n  }\r\n}\r\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: 'c0ea1021e75dc02e77853d6dc8d6bd9f00258251', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '5d1d2a536312719ca7f093a711e2536ac1db085a', class: "xv-tag_content" }, h("slot", { key: '51c232b76ecd2216387eefc1321cfc22ad32cabb' })), this.closeable && (h("button", { key: '5e815c7c566e1a05d2b2c585a6cc8ec9b67e1565', 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';\r\n\r\n@Component({\r\n  tag: 'xv-tag-v2',\r\n  styleUrl: 'xv-tag.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTag {\r\n  @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n  @Prop() color: string = '';\r\n  @Prop() bg: string = '';\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() closeable: boolean = false;\r\n  @Event() closeClick: EventEmitter<PointerEvent>;\r\n\r\n  closeHandler(e: PointerEvent) {\r\n    if (this.disabled) return;\r\n\r\n    this.closeClick.emit(e);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        style={{ color: this.color, background: this.bg }}\r\n        class={`xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}`}\r\n      >\r\n        <div class=\"xv-tag_content\">\r\n          <slot></slot>\r\n        </div>\r\n        {this.closeable && (\r\n          <button onClick={this.closeHandler.bind(this)} class=\"xv-tag_close\"></button>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\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);
+}