xv-webcomponents 0.1.44 → 0.1.46

package/dist/collection/components/xv-modal/xv-modal.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-flex;
 }
@@ -64,6 +159,19 @@
 :host .modal_close:active {
   opacity: 0.3;
 }
+:host .modal .loading {
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+}
 
 :host([open]) .backdrop {
   opacity: 1;

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

@@ -58,7 +58,7 @@ export class XvModal {
     }
     render() {
         var _a;
-        return (h(Host, { key: '227d7c8432c263024eb14ebcc906d45d01845143', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: 'e9c1c83f4d5e3a1ddfa765b17129ea13dce96582', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: '3a5b9b557925edb299ce386e289f60d87cbf9341', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: '77e793861e33d77ca59c5f3bc89e1a6d83b8ba38', class: "modal" }, h("button", { key: '5534a1306535847efa5c77d393323ca93d9b33f3', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: 'c3dee869a2be046d2e216730fc122da92c21920d', class: "modal_header" }, h("slot", { key: '42c0d657d261841a8fcb6461a079e06b5b1d2fad', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: '48aae8d010464e9a06c92699ad9e1dfe5feb0e04', class: "modal_header__title" }, this.el.title))), h("div", { key: '4cb0e7c1fed672df57dc86e4ebc53859d9695d0d', class: { 'modal_content': true, overflow: this.overflow } }, h("slot", { key: '1df966114775ee209cab1311350cb9d005abae0c' })), h("div", { key: 'fc246530cac2cedb24a3b8be81e710cecd7b18fc', class: "modal_footer" }, h("slot", { key: '5b00a76e35824e041d8f891ca4e40ec27d72290f', name: "footer" }))))));
+        return (h(Host, { key: '2fe817b5afe354f4fefd9bdd4efde9956936b0d2', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: 'e7d2514be603ac04a401f6fab9e8135d9fc02dfc', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: 'aa2faf03935125e6ab2156b9c2909485a829e7ed', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: 'b21b739d5f3b03a5cf6345bb2de370f306e2a763', class: "modal" }, h("button", { key: '3f7c775b5145bd6dec8478b625dec78f84b38e9a', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: '53a5b436a40f4e3b3c85db0bf94d6e96f0d297fe', class: "modal_header" }, h("slot", { key: 'a9f44d4b9cab25b39f2780b85ba06b7b19c57b72', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: '3c8aeae5ad36dc00ce02badf5c9c7f54f55083a5', class: "modal_header__title" }, this.el.title))), h("div", { key: 'f8d57aacd10b4d20521c25ca71d87d6ccc5a3145', class: { 'modal_content': true, overflow: this.overflow } }, h("slot", { key: '1522095e46206cb1738c29dc4c02fb0bb288f490' })), h("div", { key: '50578184ddd5d3b7284f1c5f78d76c1c84bfa73a', class: "modal_footer" }, h("slot", { key: 'fc76f6ea53b69c11446be8394e0ceb6caa9c9e5a', name: "footer" })), !!this.loading && (h("div", { key: '99f0045bd17cfd3d891b8134858b655b1cb6cb48', class: "loading" }, h("xv-loader-v2", { key: '0440f5a5e82f2f2061425e26ebf85386afe6bb67', size: SIZE_VAR.LG })))))));
     }
     disconnectedCallback() {
         this.removeTriggerListener();
@@ -162,6 +162,25 @@ export class XvModal {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "true"
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Modal loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"xv-modal.js","sourceRoot":"","sources":["../../../src/components/xv-modal/xv-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-modal-v2',\n  styleUrl: 'xv-modal.scss',\n  shadow: true,\n})\nexport class XvModal {\n  @Element() el: HTMLElement;\n  /**\n   * Is modal opened\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n  /**\n   * If true then modal not be closed on backdrop click\n   */\n  @Prop({ reflect: true }) permanent: boolean = false;\n  /**\n   * Size of modal. But max size is 90% view width\n   */\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\n  /**\n   * When need scroll modal content\n   */\n  @Prop({ reflect: true }) overflow: boolean = true;\n\n  @Event({ eventName: 'openChange' }) openChange!: EventEmitter<boolean>;\n\n  private triggerEl: HTMLElement | null = null;\n\n  @Method()\n  async openModal() {\n    this.open = true;\n    this.openChange?.emit(this.open);\n    return this.open\n  };\n\n  @Method()\n  async closeModal() {\n    this.open = false;\n    this.openChange?.emit(this.open);\n    return this.open\n  }\n\n  private onBackdropClick = async (e: MouseEvent) => {\n    if (this.permanent) return;\n    // click on backdrop\n    if (e.target === e.currentTarget) {\n      await this.closeModal();\n    }\n  };\n\n  private removeTriggerListener = () => {\n    this.triggerEl?.removeEventListener('click', this.openModal.bind(this));\n  };\n\n  private setupTrigger = () => {\n    this.removeTriggerListener();\n    const slot = this.el.shadowRoot.querySelector('slot[name=\"trigger\"]') as HTMLSlotElement;\n\n    if (slot) {\n      const assigned = slot.assignedElements();\n      if (assigned.length > 0) {\n        this.triggerEl = assigned[0] as HTMLElement;\n        this.triggerEl.addEventListener('click', this.openModal.bind(this));\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"dialog\" size={this.size} id={this.el.id}>\n        <slot name=\"trigger\" onSlotchange={this.setupTrigger} />\n\n        <div class={{ backdrop: true }} onClick={this.onBackdropClick}>\n          <div class=\"modal\">\n            <button class=\"modal_close\" onClick={this.closeModal.bind(this)}>&times;</button>\n            <div class=\"modal_header\">\n              <slot name=\"header\">\n                {this.el?.title && <h5 class=\"modal_header__title\">{this.el.title}</h5>}\n              </slot>\n            </div>\n\n            <div class={{ 'modal_content': true, overflow: this.overflow }}>\n              <slot />\n            </div>\n\n            <div class=\"modal_footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  disconnectedCallback() {\n    this.removeTriggerListener();\n  }\n}\n"]}
+{"version":3,"file":"xv-modal.js","sourceRoot":"","sources":["../../../src/components/xv-modal/xv-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-modal-v2',\n  styleUrl: 'xv-modal.scss',\n  shadow: true,\n})\nexport class XvModal {\n  @Element() el: HTMLElement;\n  /**\n   * Is modal opened\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n  /**\n   * If true then modal not be closed on backdrop click\n   */\n  @Prop({ reflect: true }) permanent: boolean = false;\n  /**\n   * Size of modal. But max size is 90% view width\n   */\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\n  /**\n   * When need scroll modal content\n   */\n  @Prop({ reflect: true }) overflow: boolean = true;\n  /**\n   * Modal loading state\n   */\n  @Prop() loading?: boolean;\n\n  @Event({ eventName: 'openChange' }) openChange!: EventEmitter<boolean>;\n\n  private triggerEl: HTMLElement | null = null;\n\n  @Method()\n  async openModal() {\n    this.open = true;\n    this.openChange?.emit(this.open);\n    return this.open\n  };\n\n  @Method()\n  async closeModal() {\n    this.open = false;\n    this.openChange?.emit(this.open);\n    return this.open\n  }\n\n  private onBackdropClick = async (e: MouseEvent) => {\n    if (this.permanent) return;\n    // click on backdrop\n    if (e.target === e.currentTarget) {\n      await this.closeModal();\n    }\n  };\n\n  private removeTriggerListener = () => {\n    this.triggerEl?.removeEventListener('click', this.openModal.bind(this));\n  };\n\n  private setupTrigger = () => {\n    this.removeTriggerListener();\n    const slot = this.el.shadowRoot.querySelector('slot[name=\"trigger\"]') as HTMLSlotElement;\n\n    if (slot) {\n      const assigned = slot.assignedElements();\n      if (assigned.length > 0) {\n        this.triggerEl = assigned[0] as HTMLElement;\n        this.triggerEl.addEventListener('click', this.openModal.bind(this));\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"dialog\" size={this.size} id={this.el.id}>\n        <slot name=\"trigger\" onSlotchange={this.setupTrigger} />\n\n        <div class={{ backdrop: true }} onClick={this.onBackdropClick}>\n          <div class=\"modal\">\n            <button class=\"modal_close\" onClick={this.closeModal.bind(this)}>&times;</button>\n            <div class=\"modal_header\">\n              <slot name=\"header\">\n                {this.el?.title && <h5 class=\"modal_header__title\">{this.el.title}</h5>}\n              </slot>\n            </div>\n\n            <div class={{ 'modal_content': true, overflow: this.overflow }}>\n              <slot />\n            </div>\n\n            <div class=\"modal_footer\">\n              <slot name=\"footer\" />\n            </div>\n\n            {!!this.loading && (\n              <div class=\"loading\">\n                <xv-loader-v2 size={SIZE_VAR.LG} />\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  disconnectedCallback() {\n    this.removeTriggerListener();\n  }\n}\n"]}

package/dist/collection/components/xv-notification/xv-notification.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 {
   --notification-icon-size: 20px;
   display: flex;

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

@@ -25,7 +25,7 @@ export class XvNotification {
         };
     }
     render() {
-        return (h(Host, { key: '828674420130a41adc1c21b7dac6ba7795142871', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), h("div", { key: '2f863367c6952b1974607f577d33d69a572b83ac', class: "content" }, h("div", { key: 'df968f2dc944bf7b8cad543fb64a3c9d124a11ff', class: "content_wrapper" }, this.el.title && h("h5", { key: '200f8de5f706f7b4318cb94b9966a6171d56e2f5', class: "content_title" }, this.el.title), h("slot", { key: '76e93f53912a25d9240b82434e05466bf16902b3' })), h("slot", { key: '0403b90c0e139d214356519a33c0c546e03953a0', name: "footer" })), this.dismissible && h("button", { key: '70f8219f0b7c2dc897d0bb36ea5c7c7fb7aa3288', class: "close", onClick: this.closeHandle })));
+        return (h(Host, { key: '6a355a59d18e50c04501766a370b0baacf5c2944', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), h("div", { key: '15f3fc782f6b188f7de37538d023def32e09b0af', class: "content" }, h("div", { key: 'd86f0c248d26be14152fae477066a7453d07ffd8', class: "content_wrapper" }, this.el.title && h("h5", { key: 'caf315e339f97462ca3de9e0fc9a56097a756649', class: "content_title" }, this.el.title), h("slot", { key: '36ccf639210efeb77a396baecb20da7b50597e95' })), h("slot", { key: '9fa1f1712e976dbfd6652c9ddaa142bc237ec76d', name: "footer" })), this.dismissible && h("button", { key: 'd8dfc3ab44174215b2244281e9bf00ac15cb6775', class: "close", onClick: this.closeHandle })));
     }
     static get is() { return "xv-notification-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-number-input/xv-number-input.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;
   text-align: left;

package/dist/collection/components/xv-number-input/xv-number-input.js

@@ -32,12 +32,12 @@ export class XvNumberInput {
         this.valueChange.emit(this.value);
     }
     render() {
-        return (h(Host, { key: '9e9d338c9ff5f2191a7b93d75473455fcd0595e3', class: { disabled: !!this.disabled } }, h("label", { key: '94743e62549da23b3c63280d9a228bb7bab4dc86', class: "control" }, this.label && h("span", { key: 'a7feadfdb33ac4305a58b0634fafdfab56293a1e', class: "control_label" }, this.label), h("div", { key: '7e87334966533108284fad892e219c3d6e320da0', class: {
+        return (h(Host, { key: 'a082fb47d598b1edeafdc2a862848d8cff6e6f25', class: { disabled: !!this.disabled } }, h("label", { key: '3ab0c3e1afe57c2ebcd5ed4a2d506faf99126935', class: "control" }, this.label && h("span", { key: '5e58b0e9ccf75d685b640b89547e0e5ac9a8d843', class: "control_label" }, this.label), h("div", { key: '11cb8faff1e7c00339407b047bad51181a8ec5c3', class: {
                 'control_input': true,
                 readonly: !!this.readonly,
                 error: !!this.error,
                 warning: !!this.warning
-            } }, h("input", { key: 'b241be77f4f61110fc00911bacf58f493a6dc648', type: "number", placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value }), h("div", { key: '4c13d73fa8ad210f1561ca9d924dc37b5d25f058', class: "control_input__icons" }, this.loading ? (h("xv-loader-v2", { size: SIZE_VAR.XS })) : !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, h("xv-button-v2", { key: 'ded5d2e74f4ff8544d025ce2862422ac69f54f9b', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: '84bebcdd58a31c59d52685c589361532033074ba', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: 'ec34eb763fd84994fd3dde49dbb53c5472ff46ed' }), h("xv-button-v2", { key: '2275bbefc228ab1147c002c204b93da04d2b001e', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: 'c64d970edf867832d6ee74354df55aa1cf151007', slot: "icon-left", class: "status-icon" }, "+"))))), this.helper && h("p", { key: 'b463bea86f2fa93c89072898796d03a9cd6c03bd', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
+            } }, h("input", { key: '4079726083bff4bd415713a5c912c33571fe65b8', type: "number", placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value }), h("div", { key: 'db0fa3d79c9b15bc7ba0a6df0d2f5b340b38dbe0', class: "control_input__icons" }, this.loading ? (h("xv-loader-v2", { size: SIZE_VAR.XS })) : !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, h("xv-button-v2", { key: 'cfa5ff73b4ad0bec8b05139b02746728bd88245d', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: 'a02294c4aa18f2c916e5bb17e3e44acbbe30ff55', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: '49121201128a98b750d38cc22eba4d45432ab139' }), h("xv-button-v2", { key: 'c1ecee75abafcc10bae0a5c8264ed01bc81ac789', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: '7b00e8e79b6bd52538e8abb9bc1791f56b033d78', slot: "icon-left", class: "status-icon" }, "+"))))), this.helper && h("p", { key: '9d561bca00186a645565f49774672b985eba78c0', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
     }
     static get is() { return "xv-number-input-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.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 {
   flex: 1;
   display: inline-block;

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js

@@ -11,7 +11,7 @@ export class XvOverflowMenuItem {
         this.itemClick.emit({ event, value: this.value });
     }
     render() {
-        return (h(Host, { key: '3dd2a5251f385c53432fbe4964cfa6b506bea62e', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: 'c140fd224ff48c962a85401003d6fc94091d7b05' })));
+        return (h(Host, { key: 'd2e14d42b6ac805cca0c9279d846b87a7063f917', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: 'a780ed8ae845f343bf3e89a6e8f53a6fabc5000e' })));
     }
     static get is() { return "xv-overflow-menu-v2-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.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 {
   --overflow-menu-size: 40px;
   --overflow-menu-item-padding: 11px 16px;

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js

@@ -48,7 +48,7 @@ export class XvOverflowMenu {
         }
     }
     render() {
-        return (h(Host, { key: '49562a0f5cdd0ffc9d07c175f02133ebf91379f8', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, h("button", { key: '512bfdab373dd6f91d747cd780588d743e995aba', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("svg", { key: 'ae162d6550bc87396f6f3307e15c3990b417768c', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { key: '25c4542139eec20f7e04892baab53347901450ec', d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" }))), h("div", { key: '4595e1d6334852bc13d9a1ead5534f1947a6697a', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: '83c2cabf49ca7cb8e5c9e51526eae1d1b7202380' }))));
+        return (h(Host, { key: '9367648e7aae89ffda9ce8ea39d6be31cdb0720e', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, h("button", { key: 'cf5025a26836258b19a048c4ccdb9d7f7bd890b2', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("svg", { key: 'e1f14e57d637a9e9d46cea4ebd1bd7d1074d01d1', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { key: '481e99f7912d4d2bd1f406f5fa1e19036e82f381', d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" }))), h("div", { key: 'b212a19312609771699c1d309ee40c8e3fa50184', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: 'c30cd523e9102d3fbfbdaa28b28fec0e4e569235' }))));
     }
     componentDidLoad() {
         this.openChangeHandle();