xv-webcomponents 0.1.44 → 0.1.48

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: '06abb2a0caeb44966b1a70f8268d2d81bf948ec6', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: 'aecaed309692e7ffaa5883b21cbfeb461afc7fde', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: '4c455aa59c2b9daead69dd3ddd34ce3f14f2f5d9', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: '681c7e3ed3da8d5a17ea4c45007ef3f05a17ae33', class: "modal" }, h("button", { key: 'b354b9b77ff4698d7709dd797f0a0dd90ba9afce', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: '44c708a55bc92abb11aa2e69d0143060ae4438df', class: "modal_header" }, h("slot", { key: '5302a4c8f57d40daf9328bb64450ce28218b8639', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: '4565fc0c5e5cc2f8ab8b4af09ac7fb5a87555557', class: "modal_header__title" }, this.el.title))), h("div", { key: 'c0606a1649777d9abd111b5bf4af58f0a2ee04d6', class: { 'modal_content': true, overflow: this.overflow } }, h("slot", { key: '2a0e12ebc1a51fd01b158c3930b00015fdaaf252' })), h("div", { key: 'dfa474f53eef5e9cf48b21b74b4450e761a2a6ae', class: "modal_footer" }, h("slot", { key: 'd23b33797b367c77ddbaa730bc13bcaa3d492aee', name: "footer" })), !!this.loading && (h("div", { key: '32d68b8b6bd981e17626fd706d3b750a81da2e08', class: "loading" }, h("xv-loader-v2", { key: '56c37d9cdfdb4bf7c7452e1e813d58a4f3cef1f5', 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;
@@ -20,7 +115,7 @@
   display: flex;
   flex-direction: column;
   row-gap: var(--spacing-06, 24px);
-  word-break: break-all;
+  word-break: break-word;
 }
 :host .content_title {
   text-align: left;

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: 'e34b6db6aa817d60458169cddd7606174d849dc2', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), h("div", { key: 'a292ba34994258458b02ddc6e2cb012a2a729366', class: "content" }, h("div", { key: 'a432611a51b0ad58e2258f0dd602ffceca801016', class: "content_wrapper" }, this.el.title && h("h5", { key: 'a3bcb4aab491f3d331a52ca70706c49bbef13a9b', class: "content_title" }, this.el.title), h("slot", { key: '434cc453bf5e347e973a9ef3303a5fa4d7d34047' })), h("slot", { key: 'b136fd271b44bd07714e2c4ee91beae3bee33f69', name: "footer" })), this.dismissible && h("button", { key: 'eaf75a33ecb101ea9ca9c4111d2e22d50af56ec2', 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: '7a0f52001d3207ca3a832b8f5d3f7b6688011fc1', class: { disabled: !!this.disabled } }, h("label", { key: '2a39a80c29a7ec4a1df78d1024b51b323c2463ad', class: "control" }, this.label && h("span", { key: '280cbcb901336958a56385b3a40ca40ba95b26ff', class: "control_label" }, this.label), h("div", { key: 'fbdf8584b631667a24e2cf02d1936963bda57370', 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: '8f76d4723c9cda3a4b9ef9d7922836f694bd4a29', 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: '7c7729225ffab05d2649e607ab764b0062426d05', 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: 'ee4135d3699310e79aae069bd8117dc2e4e60bae', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: '48f157bedce8c7503bea9e33513fcc7f7781ba3c', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: 'df439a010360f68c7136a25c2ee9bfe2cd758995' }), h("xv-button-v2", { key: '01065c3fb19e840b7db792467f5e449ff11915a6', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: '11c3577d28eebb44c804f4ff5717c8fd0a8f40a8', slot: "icon-left", class: "status-icon" }, "+"))))), this.helper && h("p", { key: '547859327426600ac0d6b33ef7277c5aefbff345', 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: '39ed800716df91f37e1e22ab2ab62a9a2963ef33', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: 'a7a0c9c1961492c0168e72bd130f30b4ec627c64' })));
     }
     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: '5e3f5cc27fb7c9ea539c3f98abf0563ea99c40ad', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, h("button", { key: 'a3005123e361a685dbadf21e4a4d8ff45188e2a3', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("svg", { key: 'c594a4eab6e6e73533fef006ac9e4edd6ed60a53', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { key: '445a29a156b2e688ee4c42861b10cbdc063880d9', 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: '7e0a95e0d5e154e0a1107b4f3c2a8623e9e0b93b', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: '1311647140aa4800c074940290ff08481698d39c' }))));
     }
     componentDidLoad() {
         this.openChangeHandle();