xv-webcomponents 0.1.44 → 0.1.46

package/dist/cjs/xv-breadcrumbs-v2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-MLh9SbX2.js');
 
-const xvBreadcrumbsCss = ":host{display:block}";
+const xvBreadcrumbsCss = ".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:block}";
 
 const XvBreadcrumbs = class {
     constructor(hostRef) {

package/dist/cjs/xv-breadcrumbs-v2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"xv-breadcrumbs-v2.entry.cjs.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,sBAAsB;;MCOlC,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;","names":["h","Host"],"sources":["src/components/xv-breadcrumbs/xv-breadcrumbs.scss?tag=xv-breadcrumbs-v2&encapsulation=shadow","src/components/xv-breadcrumbs/xv-breadcrumbs.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'xv-breadcrumbs-v2',\n  styleUrl: 'xv-breadcrumbs.scss',\n  shadow: true,\n})\nexport class XvBreadcrumbs {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"xv-breadcrumbs-v2.entry.cjs.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,kxFAAkxF;;MCO9xF,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;","names":["h","Host"],"sources":["src/components/xv-breadcrumbs/xv-breadcrumbs.scss?tag=xv-breadcrumbs-v2&encapsulation=shadow","src/components/xv-breadcrumbs/xv-breadcrumbs.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'xv-breadcrumbs-v2',\n  styleUrl: 'xv-breadcrumbs.scss',\n  shadow: true,\n})\nexport class XvBreadcrumbs {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/xv-breadcrumbs-v2.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"xv-breadcrumbs-v2.entry.cjs.js","sources":["src/components/xv-breadcrumbs/xv-breadcrumbs.scss?tag=xv-breadcrumbs-v2&encapsulation=shadow","src/components/xv-breadcrumbs/xv-breadcrumbs.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'xv-breadcrumbs-v2',\n  styleUrl: 'xv-breadcrumbs.scss',\n  shadow: true,\n})\nexport class XvBreadcrumbs {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,sBAAsB;;MCOlC,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}
+{"version":3,"file":"xv-breadcrumbs-v2.entry.cjs.js","sources":["src/components/xv-breadcrumbs/xv-breadcrumbs.scss?tag=xv-breadcrumbs-v2&encapsulation=shadow","src/components/xv-breadcrumbs/xv-breadcrumbs.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'xv-breadcrumbs-v2',\n  styleUrl: 'xv-breadcrumbs.scss',\n  shadow: true,\n})\nexport class XvBreadcrumbs {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,kxFAAkxF;;MCO9xF,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/cjs/xv-webcomponents.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["xv-breadcrumbs-v2.cjs",[[1,"xv-breadcrumbs-v2"]]],["xv-accordion-v2_34.cjs",[[1,"xv-data-table-row",{"variant":[1],"name":[1025],"collapse":[1],"collapsable":[516],"checked":[1028],"partial":[1028],"hover":[1028],"header":[4],"footer":[4],"disabled":[4],"readonly":[4],"required":[4],"value":[8],"collapsed":[32]}],[1,"xv-dropdown-v2",{"disabled":[516],"multiple":[516],"required":[516],"loading":[516],"open":[1540],"error":[513],"label":[513],"helper":[513],"warning":[513],"placeholder":[513],"info":[1],"size":[1],"defaultValue":[8,"default-value"],"selected":[32],"selectedMap":[32]},[[0,"itemSelected","handleItemSelected"]],{"open":["openChangeHandle"]}],[1,"xv-file-uploader",{"label":[1],"description":[1],"addText":[1,"add-text"],"variant":[1],"size":[1],"accept":[16],"maxFileSizeMB":[2,"max-file-size-mb"],"maxFiles":[2,"max-files"],"multiple":[4],"disabled":[516],"files":[1040],"loadingStates":[1040,"loading-states"],"error":[1537],"errors":[1040],"dragActive":[32],"errorMessages":[32]}],[65,"xv-number-input-v2",{"label":[1],"placeholder":[513],"name":[513],"value":[1538],"helper":[1],"error":[8],"warning":[8],"step":[2],"max":[2],"min":[2],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-table-v2-row",{"checked":[1540],"partial":[1540],"name":[1537],"value":[520],"hover":[1540],"readonly":[516],"required":[516],"disabled":[516],"header":[516],"variant":[1537]},null,{"checked":["checkedChangeHandle"]}],[0,"xv-header",{"htmlContent":[32],"showLoginModal":[32]}],[1,"xv-tab-v2",{"label":[513],"disabled":[516],"loading":[516],"name":[8]}],[1,"xv-table-v2",{"size":[513],"hover":[516],"loading":[516],"colsSize":[16,"colssize"],"selected":[32],"selectedCount":[32]},[[0,"checkedChange","handleCheckedChange"]],{"colsSize":["setColsSizeTemplate"]}],[1,"xv-tabs-v2",{"active":[1544],"loading":[516],"variant":[1],"emptyMessage":[1,"empty-message"],"tabElements":[32],"showArrows":[32]},[[9,"resize","updateArrowVisibility"]]],[65,"xv-text-input-v2",{"type":[1],"label":[1],"placeholder":[513],"name":[513],"value":[1025],"helper":[1],"error":[8],"warning":[8],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-accordion-v2",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-v2-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-data-table",{"size":[1],"block":[4],"columnWidths":[16,"column-widths"],"hover":[4]}],[1,"xv-data-table-collapse",{"collapsed":[1540],"setCollapsed":[64]}],[1,"xv-dropdown-v2-item",{"disabled":[4],"value":[1544],"selected":[1540]},[[0,"click","handleClick"]]],[0,"xv-footer",{"htmlContent":[32]}],[1,"xv-link-v2",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-modal-v2",{"open":[1540],"permanent":[516],"size":[513],"overflow":[516],"openModal":[64],"closeModal":[64]}],[1,"xv-notification-v2",{"variant":[513],"dismissible":[516]}],[1,"xv-overflow-menu-v2",{"open":[1540],"disabled":[516],"position":[1],"size":[1]},[[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-overflow-menu-v2-item",{"disabled":[516],"value":[520],"variant":[1]},[[0,"click","handleClick"]]],[1,"xv-progress-indicator-v2",{"progress":[514],"variant":[1],"size":[1]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-v2-item",{"status":[1]}],[1,"xv-table-v2-expand",{"open":[1540],"disabled":[516]}],[1,"xv-tag-v2",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-toggle-tip",{"open":[1540],"position":[1],"setPopover":[64]},[[4,"click","handleClickOutside"],[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-data-table-cell",{"name":[1025],"sort":[1537],"multiline":[2],"width":[1],"align":[1]},[[0,"click","handleSort"]]],[1,"xv-login-modal",{"visible":[4],"oauthProviders":[32],"bookNow":[32],"returnUrl":[32],"passwordLoginEnabled":[32],"oauthLoginEnabled":[32],"passwordRegistrationEnabled":[32],"configurationName":[32],"xvMvcConfigName":[32],"contactUrl":[32]}],[1,"xv-table-v2-cell",{"multiline":[516],"name":[1537],"align":[513],"sort":[1537]},[[0,"click","handleSort"]]],[4,"xv-tooltip-v2",{"message":[1],"position":[1],"visible":[32]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"]]],[65,"xv-button-v2",{"label":[513],"variant":[513],"size":[513],"disabled":[516],"loading":[516],"block":[516],"type":[513],"hasLeftIcon":[32],"hasRightIcon":[32],"hasContent":[32]}],[65,"xv-checkbox-v2",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[513],"value":[513],"readonly":[516],"required":[516],"partial":[516],"label":[1],"size":[513],"error":[520],"hasFocus":[32]},null,{"checked":["onCheckedChange"]}],[1,"xv-loader-v2",{"show":[4],"variant":[1],"size":[1]}]]]], options);
+  return index.bootstrapLazy([["xv-breadcrumbs-v2.cjs",[[1,"xv-breadcrumbs-v2"]]],["xv-accordion-v2_34.cjs",[[1,"xv-data-table-row",{"variant":[1],"name":[1025],"collapse":[1],"collapsable":[516],"checked":[1028],"partial":[1028],"hover":[1028],"header":[4],"footer":[4],"disabled":[4],"readonly":[4],"required":[4],"value":[8],"collapsed":[32]}],[1,"xv-dropdown-v2",{"disabled":[516],"multiple":[516],"required":[516],"loading":[516],"open":[1540],"error":[513],"label":[513],"helper":[513],"warning":[513],"placeholder":[513],"info":[1],"size":[1],"defaultValue":[8,"default-value"],"selected":[32],"selectedMap":[32]},[[0,"itemSelected","handleItemSelected"]],{"open":["openChangeHandle"]}],[1,"xv-file-uploader",{"label":[1],"description":[1],"addText":[1,"add-text"],"variant":[1],"size":[1],"accept":[16],"buttonVariant":[1,"button-variant"],"maxFileSizeMB":[2,"max-file-size-mb"],"maxFiles":[2,"max-files"],"multiple":[4],"disabled":[516],"files":[1040],"loadingStates":[1040,"loading-states"],"error":[1537],"errors":[1040],"dragActive":[32],"errorMessages":[32],"clearFiles":[64]}],[65,"xv-number-input-v2",{"label":[1],"placeholder":[513],"name":[513],"value":[1538],"helper":[1],"error":[8],"warning":[8],"step":[2],"max":[2],"min":[2],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-table-v2-row",{"checked":[1540],"partial":[1540],"name":[1537],"value":[520],"hover":[1540],"readonly":[516],"required":[516],"disabled":[516],"header":[516],"variant":[1537]},null,{"checked":["checkedChangeHandle"]}],[1,"xv-data-table",{"size":[1],"block":[4],"loading":[4],"columnWidths":[16,"column-widths"],"hover":[4]}],[0,"xv-header",{"htmlContent":[32],"showLoginModal":[32]}],[1,"xv-modal-v2",{"open":[1540],"permanent":[516],"size":[513],"overflow":[516],"loading":[4],"openModal":[64],"closeModal":[64]}],[1,"xv-tab-v2",{"label":[513],"disabled":[516],"loading":[516],"name":[8]}],[1,"xv-table-v2",{"size":[513],"hover":[516],"loading":[516],"colsSize":[16,"colssize"],"selected":[32],"selectedCount":[32]},[[0,"checkedChange","handleCheckedChange"]],{"colsSize":["setColsSizeTemplate"]}],[1,"xv-tabs-v2",{"active":[1544],"loading":[516],"variant":[1],"emptyMessage":[1,"empty-message"],"tabElements":[32],"showArrows":[32]},[[9,"resize","updateArrowVisibility"]]],[65,"xv-text-input-v2",{"type":[1],"label":[1],"placeholder":[513],"name":[513],"value":[1025],"autocomplete":[1],"helper":[1],"error":[8],"warning":[8],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-accordion-v2",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-v2-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-data-table-collapse",{"collapsed":[1540],"setCollapsed":[64]}],[1,"xv-dropdown-v2-item",{"disabled":[4],"value":[1544],"selected":[1540]},[[0,"click","handleClick"]]],[0,"xv-footer",{"htmlContent":[32]}],[1,"xv-link-v2",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-notification-v2",{"variant":[513],"dismissible":[516]}],[1,"xv-overflow-menu-v2",{"open":[1540],"disabled":[516],"position":[1],"size":[1]},[[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-overflow-menu-v2-item",{"disabled":[516],"value":[520],"variant":[1]},[[0,"click","handleClick"]]],[1,"xv-progress-indicator-v2",{"progress":[514],"variant":[1],"size":[1]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-v2-item",{"status":[1]}],[1,"xv-table-v2-expand",{"open":[1540],"disabled":[516]}],[1,"xv-tag-v2",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-toggle-tip",{"open":[1540],"position":[1],"setPopover":[64]},[[4,"click","handleClickOutside"],[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-data-table-cell",{"name":[1025],"sort":[1537],"multiline":[2],"width":[1],"align":[1],"tooltip":[1]},[[0,"click","handleSort"]]],[1,"xv-login-modal",{"visible":[4],"oauthProviders":[32],"bookNow":[32],"returnUrl":[32],"passwordLoginEnabled":[32],"oauthLoginEnabled":[32],"passwordRegistrationEnabled":[32],"configurationName":[32],"xvMvcConfigName":[32],"contactUrl":[32]}],[1,"xv-table-v2-cell",{"multiline":[516],"name":[1537],"align":[513],"sort":[1537]},[[0,"click","handleSort"]]],[65,"xv-button-v2",{"label":[513],"variant":[513],"size":[513],"disabled":[516],"loading":[516],"block":[516],"type":[513],"hasLeftIcon":[32],"hasRightIcon":[32],"hasContent":[32]}],[65,"xv-checkbox-v2",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[513],"value":[513],"readonly":[516],"required":[516],"partial":[516],"label":[1],"size":[513],"error":[520],"hasFocus":[32]},null,{"checked":["onCheckedChange"]}],[4,"xv-tooltip-v2",{"message":[1],"position":[1],"block":[4],"dashed":[4]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"]]],[1,"xv-loader-v2",{"show":[4],"variant":[1],"size":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/xv-accordion/xv-accordion.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: block;
 }

package/dist/collection/components/xv-accordion-item/xv-accordion-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 {
   border-top: 1px solid var(--border-subtle-01);
   display: flex;

package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.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: block;
 }

package/dist/collection/components/xv-button/xv-button-v2.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;
 }

package/dist/collection/components/xv-card/xv-card.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: flex;
   flex-direction: column;

package/dist/collection/components/xv-checkbox/xv-checkbox.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 {
   --checkbox-size: max(1rem, 16px);
   box-sizing: border-box;