xv-webcomponents 0.1.44 → 0.1.48

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

@@ -0,0 +1,294 @@
+@charset "UTF-8";
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
+.xv-tile--host {
+  display: contents;
+}
+.xv-tile--host .xv-tile {
+  min-height: 64px;
+  min-width: 128px;
+  border-radius: 3px;
+  border: 1px solid var(--border-tile-02, #ACACAC);
+  outline: 2px solid transparent;
+  background-color: var(--layer-02, #FFF);
+  text-align: left;
+  user-select: none;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "content control" "footer footer" "expandable expandable";
+  display: inline-grid;
+  color: var(--text-primary, #333);
+}
+.xv-tile--host .xv-tile--variant-selectable, .xv-tile--host .xv-tile--variant-expandable, .xv-tile--host .xv-tile--variant-clickable {
+  cursor: pointer;
+  transition: 250ms ease-in-out background-color;
+}
+.xv-tile--host .xv-tile--variant-selectable:hover, .xv-tile--host .xv-tile--variant-expandable:hover, .xv-tile--host .xv-tile--variant-clickable:hover {
+  border-color: var(--border-tile-01, #D1D1D1);
+  background-color: var(--layer-hover-02, #F7F7F7);
+}
+.xv-tile--host .xv-tile--variant-selectable:active, .xv-tile--host .xv-tile--variant-expandable:active, .xv-tile--host .xv-tile--variant-clickable:active {
+  background-color: var(--layer-active-02, #D1D1D1);
+}
+.xv-tile--host .xv-tile--variant-selectable:focus-within, .xv-tile--host .xv-tile--variant-expandable:focus-within, .xv-tile--host .xv-tile--variant-clickable:focus-within {
+  outline-width: 1px;
+  outline-color: var(--focus);
+}
+.xv-tile--host .xv-tile--variant-selectable.selected, .xv-tile--host .xv-tile--variant-expandable.selected, .xv-tile--host .xv-tile--variant-clickable.selected {
+  background-color: var(--layer-selected-02, #E3E3E3);
+}
+.xv-tile--host .xv-tile--variant-selectable.selected:hover, .xv-tile--host .xv-tile--variant-expandable.selected:hover, .xv-tile--host .xv-tile--variant-clickable.selected:hover {
+  background-color: var(--layer-selected-hover-02, #DADADA);
+}
+.xv-tile--host .xv-tile--block {
+  display: grid;
+}
+.xv-tile--host .xv-tile--error {
+  border-color: var(--support-error);
+  outline: 2px solid var(--support-error);
+}
+.xv-tile--host .xv-tile--disabled {
+  border-color: var(--border-disabled, #D1D1D1);
+  background-color: var(--layer-01, #F7F7F7);
+  color: var(--text-disabled, rgba(19, 19, 19, 0.25));
+  user-select: none;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.xv-tile--host .xv-tile_content {
+  grid-area: content;
+  font-style: normal;
+  font-weight: 400;
+  font-size: var(--fz-md, 14px);
+  line-height: 20px;
+  letter-spacing: 0.16px;
+}
+.xv-tile--host .xv-tile_content > * {
+  margin: 0;
+  padding: 0;
+}
+.xv-tile--host .xv-tile_content__title {
+  font-size: 20px;
+  line-height: 28px;
+  letter-spacing: unset;
+}
+.xv-tile--host .xv-tile_content:not(:empty) {
+  padding: var(--spacing-05, 16px);
+}
+.xv-tile--host .xv-tile_control {
+  grid-area: control;
+}
+.xv-tile--host .xv-tile_control:not(:empty) {
+  padding-block: var(--spacing-05, 16px);
+  padding-inline-end: var(--spacing-05, 16px);
+}
+.xv-tile--host .xv-tile_control input[type=checkbox],
+.xv-tile--host .xv-tile_control input[type=radio] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  margin: 0;
+  width: 16px;
+  height: 16px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.xv-tile--host .xv-tile_control input[type=checkbox]:focus,
+.xv-tile--host .xv-tile_control input[type=radio]:focus {
+  outline: 1.4px solid var(--focus);
+}
+.xv-tile--host .xv-tile_control input[type=checkbox]:before, .xv-tile--host .xv-tile_control input[type=checkbox]:after,
+.xv-tile--host .xv-tile_control input[type=radio]:before,
+.xv-tile--host .xv-tile_control input[type=radio]:after {
+  display: inline-block;
+  border-radius: inherit;
+  transition: 200ms ease-in-out border-color, 200ms ease-in-out background-color;
+}
+.xv-tile--host .xv-tile_control input[type=checkbox]:before,
+.xv-tile--host .xv-tile_control input[type=radio]:before {
+  content: "";
+  width: inherit;
+  height: inherit;
+  background-color: #fff;
+  border: 1px solid var(--icon-primary, #131313);
+}
+.xv-tile--host .xv-tile_control input[type=checkbox]:after,
+.xv-tile--host .xv-tile_control input[type=radio]:after {
+  position: absolute;
+}
+.xv-tile--host .xv-tile_control input[type=checkbox]:checked:before,
+.xv-tile--host .xv-tile_control input[type=radio]:checked:before {
+  border-color: var(--background-brand, #97BF0D);
+}
+.xv-tile--host .xv-tile_control input[type=checkbox]:checked:after,
+.xv-tile--host .xv-tile_control input[type=radio]:checked:after {
+  content: "";
+}
+.xv-tile--host .xv-tile_control input[type=checkbox] {
+  border-radius: 2px;
+}
+.xv-tile--host .xv-tile_control input[type=checkbox]:after {
+  width: 5px;
+  height: 8px;
+  border: solid #fff;
+  margin-bottom: 2px;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.xv-tile--host .xv-tile_control input[type=checkbox]:checked:before {
+  background-color: var(--background-brand, #97BF0D);
+}
+.xv-tile--host .xv-tile_control input[type=radio] {
+  border-radius: 50%;
+}
+.xv-tile--host .xv-tile_control input[type=radio]:after {
+  width: 50%;
+  height: 50%;
+  background-color: var(--background-brand, #97BF0D);
+}
+.xv-tile--host .xv-tile_footer {
+  grid-area: footer;
+  display: flex;
+  justify-content: flex-end;
+}
+.xv-tile--host .xv-tile_footer__icon {
+  pointer-events: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  margin: 0;
+  padding: var(--spacing-05, 16px);
+  font-size: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.xv-tile--host .xv-tile_footer__icon:before {
+  content: "";
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+}
+.xv-tile--host .xv-tile_footer__icon.icon--clickable:before {
+  content: "➔";
+}
+.xv-tile--host .xv-tile_footer__icon.icon--expandable:before {
+  width: 12px;
+  height: 12px;
+  border-style: solid;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  transform-origin: center;
+  transition: 200ms ease-in-out transform;
+}
+.xv-tile--host .xv-tile_footer__icon.icon--expandable.open:before {
+  transform: rotate(-135deg);
+}
+.xv-tile--host .xv-tile_expandable {
+  grid-area: expandable;
+  display: none;
+}
+.xv-tile--host .xv-tile_expandable.open {
+  display: block;
+}
+.xv-tile--host .xv-tile_expandable [slot=expandable] {
+  margin: 0;
+  padding-inline: var(--spacing-05, 16px);
+  padding-block-end: var(--spacing-05, 16px);
+}

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

@@ -0,0 +1,264 @@
+import { h, Host } from "@stencil/core";
+export class XvTile {
+    constructor() {
+        this.variant = 'base';
+        this.checked = false;
+        this.handleChange = (e) => {
+            const input = e.target;
+            this.checked = !!input.checked;
+            this.value = input.value;
+            if (this.variant === 'selectable' && !this.multiple) {
+                this.tileChange.emit({
+                    name: this.name,
+                    value: this.value,
+                });
+            }
+        };
+    }
+    tileChangeHandle({ detail }) {
+        const { name, value } = detail || {};
+        if (this.variant !== 'selectable' || this.multiple || name === undefined || value === undefined)
+            return;
+        if (name === this.name && value !== this.value)
+            this.checked = false;
+    }
+    handleClick(e) {
+        if (this.variant !== 'expandable' || this.disabled || (e === null || e === void 0 ? void 0 : e.pointerId) !== -1)
+            return;
+        this.checked = !this.checked;
+    }
+    render() {
+        return (h(Host, { key: 'aa513fd890c464d298e9e5f6049f9cc7dd731fce', class: "xv-tile--host" }, h("label", { key: 'c405c33caa418a67210e0fb4bcdd7702d0df7e8e', class: {
+                [this.el.className]: !!this.el.className,
+                'xv-tile': true,
+                [`xv-tile--variant-${this.variant}`]: !!this.variant,
+                'xv-tile--block': !!this.block,
+                'xv-tile--disabled': !!this.disabled,
+                'selected': !!this.checked,
+                'xv-tile--error': this.error !== undefined,
+            } }, h("div", { key: '8da6196b92bde4aab06589397e081b70e4ef17f6', class: "xv-tile_content" }, this.label && h("h4", { key: 'bb7ffb610d91990552cb7f2db0102ea6db6ee6b7', class: "xv-tile_content__title" }, this.label), h("slot", { key: 'df7193e4be694026561a6585436828c61e241dcc' })), this.variant === 'selectable' && (h("div", { key: '8ba4a9b7d3c40cd746680494a2558561d54127d0', class: "xv-tile_control" }, this.multiple ? (h("input", { type: "checkbox", disabled: this.disabled, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })) : (h("input", { type: "radio", disabled: this.disabled, onChange: this.handleChange, name: this.name, value: this.value, checked: this.checked })))), (this.variant === 'clickable' || this.variant === 'expandable') && (h("div", { key: 'afd84b6c809e8289b479de70b64df81a6612b9fb', class: "xv-tile_footer" }, h("button", { key: '191562618daeefa95d83d7da76999e307586bcf9', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: 'a0d3c277aefcabe53d2cd19f9601f2e30e45541f', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: '546aa0a1e1a33e2fdc5076f1192adab85eb013c1', name: "expandable" })))));
+    }
+    static get is() { return "xv-tile"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-tile.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-tile.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'base' | 'clickable' | 'selectable' | 'expandable'",
+                    "resolved": "\"base\" | \"clickable\" | \"expandable\" | \"selectable\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'base'"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "error": {
+                "type": "boolean",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "attribute": "multiple",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "block": {
+                "type": "boolean",
+                "attribute": "block",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "checked": {
+                "type": "boolean",
+                "attribute": "checked",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tileChange",
+                "name": "tileChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name?: string; value?: string }",
+                    "resolved": "{ name?: string; value?: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "tileChange",
+                "method": "tileChangeHandle",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-tile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-tile.js","sourceRoot":"","sources":["../../../src/components/xv-tile/xv-tile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Event, EventEmitter, Prop, Listen, Element } from '@stencil/core';\n\n@Component({\n  tag: 'xv-tile',\n  styleUrl: 'xv-tile.scss',\n  shadow: false,\n})\nexport class XvTile {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true }) variant: 'base' | 'clickable' | 'selectable' | 'expandable' = 'base';\n  @Prop() label?: string;\n  @Prop() error?: boolean;\n  @Prop() multiple?: boolean;\n  @Prop() disabled?: boolean;\n  @Prop() block?: boolean;\n  @Prop() name?: string;\n  @Prop({ mutable: true }) value?: string;\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  @Event({ bubbles: true, composed: true }) tileChange: EventEmitter<{ name?: string; value?: string }>;\n\n  @Listen('tileChange', { target: 'document' })\n  tileChangeHandle({ detail }: CustomEvent<{ name?: string; value?: string }>) {\n    const { name, value } = detail || {};\n\n    if (this.variant !== 'selectable' || this.multiple || name === undefined || value === undefined) return;\n    if (name === this.name && value !== this.value) this.checked = false;\n  }\n\n  @Listen('click')\n  handleClick(e: PointerEvent) {\n    if (this.variant !== 'expandable' || this.disabled || e?.pointerId !== -1) return;\n    this.checked = !this.checked;\n  }\n\n  private handleChange = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    this.checked = !!input.checked;\n    this.value = input.value;\n\n    if (this.variant === 'selectable' && !this.multiple) {\n      this.tileChange.emit({\n        name: this.name,\n        value: this.value,\n      });\n    }\n  };\n\n  render() {\n    return (\n      <Host class=\"xv-tile--host\">\n        <label class={{\n          [this.el.className]: !!this.el.className,\n          'xv-tile': true,\n          [`xv-tile--variant-${this.variant}`]: !!this.variant,\n          'xv-tile--block': !!this.block,\n          'xv-tile--disabled': !!this.disabled,\n          'selected': !!this.checked,\n          'xv-tile--error': this.error !== undefined,\n        }}>\n          <div class=\"xv-tile_content\">\n            {this.label && <h4 class=\"xv-tile_content__title\">{this.label}</h4>}\n            <slot />\n          </div>\n\n          {this.variant === 'selectable' && (\n            <div class=\"xv-tile_control\">\n              {\n                this.multiple ? (\n                  <input type=\"checkbox\"\n                         disabled={this.disabled}\n                         onChange={this.handleChange}\n                         name={this.name}\n                         value={this.value}\n                         checked={this.checked} />\n                ) : (\n                  <input type=\"radio\"\n                         disabled={this.disabled}\n                         onChange={this.handleChange}\n                         name={this.name}\n                         value={this.value}\n                         checked={this.checked} />\n                )\n              }\n            </div>\n          )}\n\n          {(this.variant === 'clickable' || this.variant === 'expandable') && (\n            <div class=\"xv-tile_footer\">\n              <button\n                class={{ 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked }}\n              />\n            </div>\n          )}\n\n          <div class={{ 'xv-tile_expandable': true, open: this.checked }}>\n            <slot name=\"expandable\" />\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,3 +1,98 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
 :host {
   display: inline-block;
   font-family: inherit;

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

@@ -65,7 +65,7 @@ export class XvToggleTip {
     }
     ;
     render() {
-        return (h(Host, { key: '7b125738966144a7fdafe1ae26d77b72085b8003', class: "xv-toggle-tip" }, h("div", { key: '0fefcfc966714aa98d98672a1727aa2fc6bfadf2', 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: '752b5bf8be01660d12a6911e4a594c69da6b1e0c', name: "trigger" }, h("svg", { key: '6a594cfd8a4ff05d30d70fdda25a01157f6f94ee', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '133a8b6e0f4d04e3c4df60209517191d5fd508fe', 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: 'ee2d9238662f276f76669353139a25867708f625', class: { popover: true }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, h("div", { key: '3c9f9455849855757051aeeac26cba84123f6f7d', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), h("div", { key: 'cfb0da55d009997e002f072b7ff36efaf14fb06f', class: "popover-content" }, h("slot", { key: 'f2dc06851b50ed5002f819e018f2bf191011fbf3', name: "header" }), h("slot", { key: '2dc5b57ffd60fa4586dc43b3e9534e4ede376199', name: "body" }), h("slot", { key: '1c236e27d751fd957fdeaf2605d8b24495b59daf', name: "footer" })))));
+        return (h(Host, { key: '419cbb0aa3acb94490062948486189b777e43907', class: "xv-toggle-tip" }, h("div", { key: 'd58933c2e93c904413f49695f116051fb38e37e7', 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: 'f1595d360eeced838d0b9866f575d2e86fb1bafb', name: "trigger" }, h("svg", { key: 'af481ee44d7e5faefee7ea57b4e16179b86eeb19', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'd754e9968c5339f8acde1c9f460257bd732dd94d', 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: 'e5585115f68f0d4a5a627edd51add36ee37e9089', class: { popover: true }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, h("div", { key: '2c94314275b52b9c5804ebfbf5a90249661af871', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), h("div", { key: '2f20f47cf643fa45a2cd35d7d92b36490d612e4d', class: "popover-content" }, h("slot", { key: '981900fca753ea61fd9a59ba01d7187c0efa3812', name: "header" }), h("slot", { key: 'd39b69c2d67d538eaba8c87a5a48be8407923672', name: "body" }), h("slot", { key: 'd5b51e4d474cc4bb6607dfb32ed997a77ea7274a', name: "footer" })))));
     }
     disconnectedCallback() {
         this.destroyPopper();