xv-webcomponents 0.1.46 → 0.1.50

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: 'b56eb653b4304687a52dbd4170d9e1c785a8b306', class: "xv-tile--host" }, h("label", { key: 'af9e8fdaa26842171b89572abc3d14f97a382e0a', 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: '785c9290968abaac787883b92549d377528e489a', class: "xv-tile_content" }, this.label && h("h4", { key: '19db9c53db9e0ba81f2681d6dbc9d203a98f33f4', class: "xv-tile_content__title" }, this.label), h("slot", { key: '12057212809b88894ed9cf019553e8983c6be664' })), this.variant === 'selectable' && (h("div", { key: '3737948f18557c0c8a3542b434b818cc60e08c6a', 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: 'e328d2f4ad5a235ef9fcc3c69a517c254194c338', class: "xv-tile_footer" }, h("button", { key: '8e161569383baf39a27e2349c04a284463db897e', class: { 'xv-tile_footer__icon': true, [`icon--${this.variant}`]: true, open: this.checked } }))), h("div", { key: '5eebc585a7e97a1dda8ff83d3a4e767f8beb9723', class: { 'xv-tile_expandable': true, open: this.checked } }, h("slot", { key: '3a9a500a80675d7bf31235591a2bd33ba67eb34e', 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.js

@@ -65,7 +65,7 @@ export class XvToggleTip {
     }
     ;
     render() {
-        return (h(Host, { key: '2e23427e02ed7c7104abc395c0228ef0b92a0d75', class: "xv-toggle-tip" }, h("div", { key: 'b61e58ee108e50e77cd341cd014ba0780c5c1129', 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: 'd0942dc751d7e8d7058c8366e31cf1d6fdb9e3db', name: "trigger" }, h("svg", { key: '6a4124cc390fcb026e1eec12e42c5f9d359ee173', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'deb8d8c392d11da810b0c3773b13582df908d271', 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: '328c25f9e43b543de8f9df77a348dc05be7d3465', class: { popover: true }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, h("div", { key: '56293ddc5d30e193cf38e2acdb21bda5775d1cb9', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), h("div", { key: '33b2336d4eb7b3abdd43275f2cc84fc8414a5331', class: "popover-content" }, h("slot", { key: '2fef31884a109f29054ce5a8ec17828e39ac2266', name: "header" }), h("slot", { key: '80b82c5803946994a5d6373285b6a7a125335d28', name: "body" }), h("slot", { key: 'ae23a80af4bb2ac0805984f57b3a8672750d7ebd', name: "footer" })))));
+        return (h(Host, { key: 'b774fc0ba1062b8da6d53aed3a47d70ae957fb50', class: "xv-toggle-tip" }, h("div", { key: '0ed385b35de518b4d463ad46f3f28eb4fba2396a', 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: 'f8069c9c48bdfa0be4d832a454e1c2a46c07bdcd', name: "trigger" }, h("svg", { key: 'ba99258f8bec90079a6c438eedc7a894b1e7b31c', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'b4b38d16ae860008654845035bac652101151ee8', 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: 'd031b15596a4c5ea78b3fe17a5b7005bd9bd9fbc', class: { popover: true }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, h("div", { key: 'c8ba70ee15dfd264e2034d6418a71102744f32be', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), h("div", { key: '263f4c552b917e444624ac990bb06abd720e3057', class: "popover-content" }, h("slot", { key: 'b514248df9831c5248a2a9385267f38f1b6385b9', name: "header" }), h("slot", { key: '5182da0a61cce3a1ab989ac9b42b1083e72d2f80', name: "body" }), h("slot", { key: '56de0e8516895830d58e1e9b93fd86d94821b172', name: "footer" })))));
     }
     disconnectedCallback() {
         this.destroyPopper();

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

@@ -38,11 +38,11 @@ export class XvTooltip {
         this.destroyTooltip();
     }
     render() {
-        return (h(Host, { key: 'a31731405df8b7c320cf6ae0bcefea0595fd1449', role: "tooltip", class: {
+        return (h(Host, { key: '72b3331937cd2f49e4fadce31fa44adfd8facf4f', role: "tooltip", class: {
                 'xv-tooltip-wrapper': true,
                 [`xv-tooltip-wrapper__block`]: !!this.block,
                 [`xv-tooltip-wrapper__dashed`]: !!this.dashed,
-            } }, h("slot", { key: '250e1f32fa6d59ad7e57027677b65b8e51da7756' }, h("svg", { key: '16a1db6965a2cdd69558ac0d9980bab1f9378542', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '5404bdc0afab8af4d6b1f9f1d19ac99ae29c3c53', 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("slot", { key: 'd6277459bf37571156356a091f5e315228060763' }, h("svg", { key: '54bcd09a848a75a122c29ab2fdf78323482ace91', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '41badb1b28e75684daf5c114b07fdf744a24f6a9', 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" })))));
     }
     static get is() { return "xv-tooltip-v2"; }
     static get originalStyleUrls() {