xv-webcomponents 1.22.1 → 1.22.2-qa.0

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

@@ -1,130 +1,3 @@
-.xv-container {
-  width: 100%;
-  max-width: 1170px;
-  margin-inline: auto;
-}
-@media (min-width: 576px) {
-  .xv-container {
-    max-width: 540px;
-  }
-}
-@media (min-width: 768px) {
-  .xv-container {
-    max-width: 720px;
-  }
-}
-@media (min-width: 992px) {
-  .xv-container {
-    max-width: 960px;
-    padding-inline: var(--bs-gutter-x, 0.75rem);
-  }
-}
-@media (min-width: 1200px) {
-  .xv-container {
-    max-width: 1140px;
-  }
-}
-@media (min-width: 1400px) {
-  .xv-container {
-    max-width: 1320px;
-  }
-}
-
-.xv-tooltip[role=tooltip] {
-  position: absolute;
-  background-color: var(--background-inverse, #333333);
-  color: var(--text-on-color);
-  padding: var(--spacing-03) var(--spacing-04);
-  border-radius: 3px;
-  font-size: var(--fz-sm);
-  z-index: 999;
-  min-width: min(150px, 90vw);
-  max-width: min(400px, 90vw);
-}
-.xv-tooltip[role=tooltip]::after {
-  content: "";
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
-  bottom: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 5px 5px 0 5px;
-  border-color: var(--background-inverse, black) transparent transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
-  bottom: -5px;
-  left: 12px;
-  border-width: 5px 5px 0 5px;
-  border-color: var(--background-inverse, black) transparent transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
-  bottom: -5px;
-  right: 12px;
-  border-width: 5px 5px 0 5px;
-  border-color: var(--background-inverse, black) transparent transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
-  top: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent var(--background-inverse, black) transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
-  top: -5px;
-  left: 12px;
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent var(--background-inverse, black) transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
-  top: -5px;
-  right: 12px;
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent var(--background-inverse, black) transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
-  top: 50%;
-  right: -5px;
-  transform: translateY(-50%);
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent var(--background-inverse, black);
-}
-.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
-  top: 12px;
-  right: -5px;
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent var(--background-inverse, black);
-}
-.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
-  bottom: 12px;
-  right: -5px;
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent var(--background-inverse, black);
-}
-.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
-  top: 50%;
-  left: -5px;
-  transform: translateY(-50%);
-  border-width: 5px 5px 5px 0;
-  border-color: transparent var(--background-inverse, black) transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
-  top: 12px;
-  left: -5px;
-  border-width: 5px 5px 5px 0;
-  border-color: transparent var(--background-inverse, black) transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
-  bottom: 12px;
-  left: -5px;
-  border-width: 5px 5px 5px 0;
-  border-color: transparent var(--background-inverse, black) transparent transparent;
-}
-
 .xv-breadcrumbs {
   display: block;
   max-width: 100%;

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class XvBreadcrumbs {
     render() {
-        return (h("div", { key: 'acc7010fa89c56d0b614227aac9e233d1b114439', class: "xv-breadcrumbs" }, h("div", { key: 'e0b80660e0a22f8ce0005de787fcefa1e98df60b', class: "xv-breadcrumbs__container" }, h("slot", { key: 'e2a6d981bc4e72bd967491f1e49773c2cf5123c4' }))));
+        return (h("div", { key: '9755c5e5f0802a1efbddffc6f6f2018147b8ffce', class: "xv-breadcrumbs" }, h("div", { key: '36cd6772a9cbe1b9c4f49a55f3c6e27d418a50fc', class: "xv-breadcrumbs__container" }, h("slot", { key: 'cef6a3c3d55767a6232c6067336d92cb41113f1d' }))));
     }
     static get is() { return "xv-breadcrumbs-v2"; }
     static get originalStyleUrls() {

package/dist/collection/components/xv-button/xv-button-v2.css

@@ -1,130 +1,3 @@
-.xv-container {
-  width: 100%;
-  max-width: 1170px;
-  margin-inline: auto;
-}
-@media (min-width: 576px) {
-  .xv-container {
-    max-width: 540px;
-  }
-}
-@media (min-width: 768px) {
-  .xv-container {
-    max-width: 720px;
-  }
-}
-@media (min-width: 992px) {
-  .xv-container {
-    max-width: 960px;
-    padding-inline: var(--bs-gutter-x, 0.75rem);
-  }
-}
-@media (min-width: 1200px) {
-  .xv-container {
-    max-width: 1140px;
-  }
-}
-@media (min-width: 1400px) {
-  .xv-container {
-    max-width: 1320px;
-  }
-}
-
-.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 {
   --xv-button-font-weight: 600;
   display: inline-block;

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

@@ -44,7 +44,7 @@ export class XvButton {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '0b4741e866dfbb0117f2742e44085bf23d43cd3b' }, h("button", { key: '37c3f64732c91255257502a1c8d97c2befd1038c', class: {
+        return (h(Host, { key: 'fba11c0f184ccf501ac868e7db8541c1831b77d7' }, h("button", { key: '9783c96ce88d62a906203ec07700b81951d573af', class: {
                 'xv-button': true,
                 'xv-button--active': this.active,
                 [`xv-button--${this.variant}`]: !!this.variant,
@@ -55,7 +55,7 @@ export class XvButton {
                 'xv-button--icon-left': this.hasLeftIcon,
                 'xv-button--icon-right': this.hasRightIcon,
                 'xv-button--icon-only': !this.hasContent,
-            }, part: "button", title: (_a = this.el) === null || _a === void 0 ? void 0 : _a.title, value: this.value, name: this.name, onClick: this.handleClick, type: this.type, disabled: this.disabled || this.loading, "aria-disabled": this.disabled ? 'true' : undefined, "aria-pressed": this.active ? 'true' : undefined, "aria-label": ((_b = this.el) === null || _b === void 0 ? void 0 : _b.ariaLabel) || 'XV button' }, this.loading && (h("xv-loader-v2", { key: '8f9c1e0fc5dd12e2274ff0811bbd28998a8125e7', class: "xv-button__loader", size: this.size !== SIZE_VAR.XL ? this.size : SIZE_VAR.LG })), h("span", { key: '84c7fbe1ad877d8ecf2c32c4ee2b768331148dd5', class: "xv-button__icon xv-button__icon--left" }, h("slot", { key: '2d09347c947e6986c0549052c4498d55a9f1922e', name: "icon-left", onSlotchange: this.handleSlotChangeLeft })), h("span", { key: 'abef513bf0445f069bfe14dc4def3b1ef5d36deb', class: "xv-button__label" }, h("slot", { key: 'badaca4a0d972bfb54d816bef2e2b0605a069757', onSlotchange: this.handleSlotChangeContent }, this.label)), h("span", { key: '93eb382ec484b5f2e46faa5b9ca25cbbb78236bf', class: "xv-button__icon xv-button__icon--right" }, h("slot", { key: '0b1b9645e5ddfe0652dfbfda3d4795dea1f7ba70', name: "icon-right", onSlotchange: this.handleSlotChangeRight })))));
+            }, part: "button", title: (_a = this.el) === null || _a === void 0 ? void 0 : _a.title, value: this.value, name: this.name, onClick: this.handleClick, type: this.type, disabled: this.disabled || this.loading, "aria-disabled": this.disabled ? 'true' : undefined, "aria-pressed": this.active ? 'true' : undefined, "aria-label": ((_b = this.el) === null || _b === void 0 ? void 0 : _b.ariaLabel) || 'XV button' }, this.loading && (h("xv-loader-v2", { key: '8d8a79349f84395901fc1fa72317308588876446', class: "xv-button__loader", size: this.size !== SIZE_VAR.XL ? this.size : SIZE_VAR.LG })), h("span", { key: '50169ff5514713c3bbbc88391b76be3347c0f9b7', class: "xv-button__icon xv-button__icon--left" }, h("slot", { key: '52e7455112b8fc7fb4ee0eceb1d688fc9f152f0a', name: "icon-left", onSlotchange: this.handleSlotChangeLeft })), h("span", { key: '737e1299d74237a86f05dcc17a64c8b40e6b84e8', class: "xv-button__label" }, h("slot", { key: '4df615791319755854d0a1c764e198ba57e3ca44', onSlotchange: this.handleSlotChangeContent }, this.label)), h("span", { key: 'a9f2c26b062a66936d06a351ae07b0fc45cb6206', class: "xv-button__icon xv-button__icon--right" }, h("slot", { key: '054be184e477bf14580a7a8e6eff544518650070', name: "icon-right", onSlotchange: this.handleSlotChangeRight })))));
     }
     static get is() { return "xv-button-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-button-group/xv-button-group.css

@@ -1,130 +1,3 @@
-.xv-container {
-  width: 100%;
-  max-width: 1170px;
-  margin-inline: auto;
-}
-@media (min-width: 576px) {
-  .xv-container {
-    max-width: 540px;
-  }
-}
-@media (min-width: 768px) {
-  .xv-container {
-    max-width: 720px;
-  }
-}
-@media (min-width: 992px) {
-  .xv-container {
-    max-width: 960px;
-    padding-inline: var(--bs-gutter-x, 0.75rem);
-  }
-}
-@media (min-width: 1200px) {
-  .xv-container {
-    max-width: 1140px;
-  }
-}
-@media (min-width: 1400px) {
-  .xv-container {
-    max-width: 1320px;
-  }
-}
-
-.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;
 }

package/dist/collection/components/xv-button-group/xv-button-group.js

@@ -89,7 +89,7 @@ export class XvButtonGroup {
         });
     }
     render() {
-        return (h(Host, { key: '173e1e09cd6a12d8f3058395914ddeceb8c12b2c', role: "group" }, h("slot", { key: 'ed963d11b49624d4f9e7144c6a9421449bfb27c4', onSlotchange: () => this.syncActive() })));
+        return (h(Host, { key: '75f76838e6231856ae785c86258856c5a47cbc61', role: "group" }, h("slot", { key: '35e8caa705a672a5fe2933b6bb96dd73c938e64c', onSlotchange: () => this.syncActive() })));
     }
     static get is() { return "xv-button-group-v2"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,130 +1,3 @@
-.xv-container {
-  width: 100%;
-  max-width: 1170px;
-  margin-inline: auto;
-}
-@media (min-width: 576px) {
-  .xv-container {
-    max-width: 540px;
-  }
-}
-@media (min-width: 768px) {
-  .xv-container {
-    max-width: 720px;
-  }
-}
-@media (min-width: 992px) {
-  .xv-container {
-    max-width: 960px;
-    padding-inline: var(--bs-gutter-x, 0.75rem);
-  }
-}
-@media (min-width: 1200px) {
-  .xv-container {
-    max-width: 1140px;
-  }
-}
-@media (min-width: 1400px) {
-  .xv-container {
-    max-width: 1320px;
-  }
-}
-
-.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-card/xv-card.js

@@ -4,7 +4,7 @@ export class XvCard {
         this.variant = 'vertical';
     }
     render() {
-        return (h(Host, { key: 'debeef927ae357d90bc496b616ae851ac7d2a2bf', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: 'e5797327edf341eabd431d5da99c29076527bb53', class: "xv-card_media" }, h("slot", { key: '74711e7ab0ee8ea2398c6db897d2e07b44a5ecbe', name: "media" }, this.media && h("img", { key: 'f8d0e9bbc2bc85e826d6ba1d15ba05dfb0df293e', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: '384f1af6ce89280bf780603434622b52bd4cfd2d', class: "xv-card_content" }, h("div", { key: '1d4d31575cd1f2bd29156b98c4fcebe8735d9b6d', class: "xv-card_header" }, h("slot", { key: 'c234c229570dbe3adea5539be538d30b76b94dc4', name: "header" }, this.header && h("p", { key: 'd1276aa41d2d7448e9dcde8353a386d41c4b896a', class: "xv-card_header__content" }, this.header))), h("div", { key: '05e03cc8ee98ced05a24af018e0e0a6e56041f58', class: "xv-card_body" }, h("slot", { key: '56fc5e21bf601688e70b25600f1beb2578396778', name: "body" }, this.body && h("p", { key: '8d4dce44c752cbd2bd91657174e5a278868113e2', class: "xv-card_body__content" }, this.header))), h("div", { key: 'd556eaa66c876154b9e918bf662492792db96a5a', class: "xv-card_footer" }, h("slot", { key: 'c101c5341266e0b24ec9e66756b0f60894c6ff12', name: "footer" }, this.footer)))));
+        return (h(Host, { key: 'e727e80c64728a3cdf809ac14df0d8a209a9e1ac', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: '4f7d067fc749b3c0b6a7f9b697095291ca9ebc19', class: "xv-card_media" }, h("slot", { key: '7a9756035ed1154bd8c97b344ace21dfe7d68054', name: "media" }, this.media && h("img", { key: '4d6eda9d66a993a51a6252accbd5a2bf9398cbdc', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: '1998a64d875197acc6d7739ea8daaba0a1233fff', class: "xv-card_content" }, h("div", { key: '79cb4a95662f405d1dcf2af50ff62a361c06930b', class: "xv-card_header" }, h("slot", { key: '33761912c88f7f3ec517709bdee61c806b56a32a', name: "header" }, this.header && h("p", { key: 'ece5395203308cd0f4991594a5d2f69d72e8cbaa', class: "xv-card_header__content" }, this.header))), h("div", { key: 'ccee6405aafcec8f45eea2feb725a4a452dc77bd', class: "xv-card_body" }, h("slot", { key: 'b135f8d40a2a11b815a25c8138cac779b0ce5389', name: "body" }, this.body && h("p", { key: '5e64fc46e61bc0c3bf0d2f65775eb5527077307d', class: "xv-card_body__content" }, this.header))), h("div", { key: '722203cf13b7ef8ca87ca7283624d2928769d90b', class: "xv-card_footer" }, h("slot", { key: 'b3ee59c1c3e1c03a2e9152d48817dfd8f3c01887', name: "footer" }, this.footer)))));
     }
     static get is() { return "xv-card-v2"; }
     static get encapsulation() { return "shadow"; }