@cupra/ui-kit 2.0.0-canary.23 → 2.0.0-canary.231

package/dist/esm/components/ds-toggle-switch/styles/seat.styles.js

@@ -0,0 +1,193 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-toggle-switch/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .container {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+        --ui-kit-private-dot-gap: 0.1875rem;
+        cursor: pointer;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.disabled {
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.medium {
+        min-height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-2, 2px) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.large {
+        min-height: var(--ds-sizing-48, 48px);
+        padding: var(--ds-spacing-s-2, 2px) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:active:not(.disabled) {
+        border-radius: var(--ds-border-radius-xs);
+        background: var(--ds-switch-bg-color-pressed, rgba(195, 195, 203, 0.1));
+        --ui-kit-private-dot-gap: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:not(.disabled):hover {
+        --ui-kit-private-dot-gap: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='label']) {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+        pointer-events: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary, 'cupra-screen'), sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.large ::slotted([slot='label']) {
+        font-size: var(--ds-typography-size-body-l, 16px);
+        line-height: var(--ds-typography-height-body-l, 24px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.medium ::slotted([slot='label']) {
+        font-size: var(--ds-typography-size-body-m, 14px);
+        line-height: var(--ds-typography-height-body-m, 20px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.disabled ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:not(.checked):not(.disabled) ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.checked:not(.disabled) ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) .track-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-switch-border-color-default, #aeaeb7);
+        background: none;
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) .medium .track-container {
+        width: var(--ds-sizing-32, 32px);
+        height: var(--ds-sizing-20, 20px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .large .track-container {
+        width: var(--ds-sizing-40, 40px);
+        height: var(--ds-sizing-24, 24px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.checked .track-container {
+        border-color: var(--ds-switch-border-color-selected, rgba(250, 250, 250, 0.3));
+        background: var(--ui-kit-toggle-switch-background, var(--ds-switch-bg-color-selected, #b2764d));
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.disabled .track-container {
+        border-color: var(--ds-switch-border-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.checked.disabled .track-container {
+        background: var(--ui-kit-toggle-switch-background-disabled, var(--ds-switch-bg-color-disabled, #34353c));
+    }
+
+    :host([data-ui-kit-theme='seat']) .track-container:focus-visible {
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.1875rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .dot {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        transition:
+            left 150ms ease,
+            width 150ms ease,
+            height 150ms ease;
+        left: var(--ui-kit-private-dot-gap);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.checked .dot {
+        left: calc(100% - var(--ui-kit-private-dot-gap) - var(--ui-kit-private-dot-size));
+    }
+
+    :host([data-ui-kit-theme='seat']) .medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-08, 8px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) .large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.checked.medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.checked.large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:not(.disabled):hover.medium .dot,
+    :host([data-ui-kit-theme='seat']) .container:active:not(.disabled).medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:not(.disabled):hover.medium.checked .dot,
+    :host([data-ui-kit-theme='seat']) .container:active:not(.disabled).medium.checked .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:not(.disabled):hover.large .dot,
+    :host([data-ui-kit-theme='seat']) .container:active:not(.disabled).large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:not(.disabled):hover.large.checked .dot,
+    :host([data-ui-kit-theme='seat']) .container:active:not(.disabled).large.checked .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-20, 20px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.disabled .dot {
+        background: var(--ds-switch-icon-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.disabled.checked .dot {
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist/esm/components/ds-tooltip/ds-tooltip.js

@@ -1,161 +1,175 @@
-import { UiKitElement as y } from "../base/UiKitElement.js";
-import { customUiKitElement as v } from "../../decorators/customUiKitElement.js";
-import { computePosition as g, flip as $, shift as P, offset as L, arrow as E, size as C } from "../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { ViewportMixin as x } from "../../mixins/ViewportMixin.js";
-import { booleanConverter as u } from "../../utils/booleanConverter.js";
-import { debounce as O } from "../../utils/debounce.js";
-import { htmlWithTokens as A } from "../../utils/htmlWithTokens.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as m, nothing as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { queryAssignedElements as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { classMap as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as M } from "./styles/common.styles.js";
-var D = Object.defineProperty, F = Object.getOwnPropertyDescriptor, r = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? F(t, o) : t, h = e.length - 1, a; h >= 0; h--)
-    (a = e[h]) && (i = (n ? a(t, o, i) : a(i)) || i);
-  return n && i && D(t, o, i), i;
-};
-let s = class extends x(y) {
-  constructor() {
-    super(...arguments), this.mode = "light", this.show = !1, this.disableHoverListener = !1, this.disableFocusListener = !1, this.disablePressListener = !1, this.tooltipId = `ds-tooltip-${Date.now()}-${Math.floor(Math.random() * 1e6)}`, this.usingKeyboard = !1, this.handleKeyDown = () => {
-      this.usingKeyboard = !0;
-    }, this.handlePointerDown = () => {
-      this.usingKeyboard = !1;
-    }, this.handleResize = O({ func: () => this.requestUpdate() }), this.handleClose = () => {
-      this.show = !1;
-    }, this.handleAnchorPointerDown = (e) => {
-      this.disablePressListener || e.button === 0 && (this.show = !this.show);
-    }, this.handleAnchorMouseOver = () => {
-      this.disableHoverListener || (this.show = !0);
-    }, this.handleAnchorMouseOut = () => {
-      this.disableHoverListener || setTimeout(() => {
-        var e, t, o, n, i;
-        !((t = (e = this.container) == null ? void 0 : e.matches) != null && t.call(e, ":hover")) && !((n = (o = this.arrow) == null ? void 0 : o.matches) != null && n.call(o, ":hover")) && !((i = this == null ? void 0 : this.matches) != null && i.call(this, ":hover")) && (this.show = !1);
-      }, 150);
-    }, this.handleAnchorFocusIn = () => {
-      this.usingKeyboard && (this.disableFocusListener || (this.show = !0));
-    }, this.handleAnchorFocusOut = () => {
-      this.usingKeyboard && (this.disableFocusListener || (this.show = !1));
-    }, this.handlePressOutside = (e) => {
-      var o;
-      if (this.disablePressListener || e.button !== 0) return;
-      const t = e.target;
-      t === this || this.contains(t) || (o = this.shadowRoot) != null && o.contains(t) || this.anchorElements[0] === t || this.anchorElements[0].contains(t) || (this.show = !1);
-    };
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("resize", this.handleResize), document.removeEventListener("pointerdown", this.handlePressOutside), document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("pointerdown", this.handlePointerDown);
-  }
-  updated(e) {
-    document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("pointerdown", this.handlePointerDown), this.updatePosition(), e.has("show") && (this.show ? (window.addEventListener("resize", this.handleResize), document.addEventListener("pointerdown", this.handlePressOutside)) : (window.removeEventListener("resize", this.handleResize), document.removeEventListener("pointerdown", this.handlePressOutside)));
-  }
-  updatePosition() {
-    requestAnimationFrame(() => {
-      var e;
-      !this.anchorContainer || !this.container || !this.show || !((e = this.anchorElements) != null && e[0]) || !(this.anchorContainer instanceof Element) || !(this.container instanceof Element) || !(this.arrow instanceof Element) || (g(this.anchorContainer, this.container, {
-        placement: "bottom-start",
-        middleware: [
-          $(),
-          P(),
-          L(8),
-          E({ element: this.arrow }),
-          C({
-            apply({ availableWidth: t, availableHeight: o, elements: n }) {
-              Object.assign(n.floating.style, {
-                maxWidth: `${Math.min(240, t - 8)}px`,
-                maxHeight: `${Math.max(0, o - 8)}px`
-              });
-            }
-          })
-        ]
-      }).then((t) => {
-        const { x: o, y: n, middlewareData: i, placement: h } = t;
-        if (this.tooltopPlacement = h, Object.assign(this.container.style, {
-          left: `${o ?? 0}px`,
-          top: `${n ?? 0}px`
-        }), i.arrow) {
-          const { x: a, y: w } = i.arrow;
-          Object.assign(this.arrow.style, {
-            left: a != null ? `${a}px` : "",
-            top: w != null ? `${w}px` : ""
-          });
-        }
-      }), this.requestUpdate());
-    });
-  }
-  get arrowClasses() {
-    var e;
-    return {
-      arrow: !0,
-      [this.mode]: !0,
-      "not-positionable": (this == null ? void 0 : this.offsetWidth) > ((e = this.container) == null ? void 0 : e.offsetWidth)
-    };
-  }
-  get containerClasses() {
-    return {
-      container: !0,
-      [this.tooltopPlacement]: !!this.tooltopPlacement,
-      [this.mode]: !0
-    };
-  }
-  get headerClasses() {
-    var e, t;
-    return {
-      "header-container": !0,
-      hidden: ((e = this.headerElements) == null ? void 0 : e.length) === 0 && ((t = this.closeButtonElements) == null ? void 0 : t.length) === 0
-    };
-  }
-  get contentClasses() {
-    var e;
-    return {
-      "content-container": !0,
-      "ds-scroll": !0,
-      "ds-scroll--size-s": !0,
-      hidden: ((e = this.contentElements) == null ? void 0 : e.length) === 0
-    };
-  }
-  get arrowTemplate() {
-    return m`
-            <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="17" height="9" viewBox="0 0 17 9" fill="none" class=${c(this.arrowClasses)} @mouseout="${this.handleAnchorMouseOut}" aria-hidden="true" focusable="false">
-                <path d="M5.77946 4.38048L0.5 9L16 9L11.1427 4.46656C9.88663 3.29419 9.25858 2.708 8.48883 2.69565C7.71909 2.68329 7.07255 3.24902 5.77946 4.38048Z" fill="#26262C" class="ds-tooltip-arrow-background"/>
-                <path d="M0.5 8.5L5.89467 4.11683C7.1398 3.10516 7.76236 2.59933 8.49029 2.6109C9.21822 2.62246 9.8244 3.14782 11.0368 4.19853L16 8.5" stroke="#FAFAFA" stroke-opacity="0.3" stroke-linecap="round" class="ds-tooltip-arrow-border"/>
+import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
+import o from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import { UiKitElement as s } from "../base/UiKitElement.js";
+import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as l } from "../../utils/booleanConverter.js";
+import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
+import { debounce as d } from "../../utils/debounce.js";
+import { arrow as f, computePosition as p, flip as m, offset as h, shift as g, size as _ } from "../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { commonStyles as v } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as y } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as b } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as x } from "./styles/seat-legacy.styles.js";
+import { seatStyles as S } from "./styles/seat.styles.js";
+//#region src/components/ds-tooltip/ds-tooltip.ts
+var C = class extends s {
+	constructor(...e) {
+		super(...e), this.mode = "light", this.show = !1, this.disableHoverListener = !1, this.disableFocusListener = !1, this.disablePressListener = !1, this.tooltipId = `ds-tooltip-${Date.now()}-${Math.floor(Math.random() * 1e6)}`, this.usingKeyboard = !1, this.handleKeyDown = () => {
+			this.usingKeyboard = !0;
+		}, this.handlePointerDown = () => {
+			this.usingKeyboard = !1;
+		}, this.handleTooltipPointerDown = (e) => {
+			e.stopImmediatePropagation();
+		}, this.handleContainerSlotChange = () => {
+			this.requestUpdate();
+		}, this.handleResize = d({ func: () => this.requestUpdate() }), this.handleClose = () => {
+			this.show = !1;
+		}, this.handleAnchorPointerDown = (e) => {
+			this.disablePressListener || e.button === 0 && (this.show = !this.show);
+		}, this.handleAnchorMouseOver = () => {
+			this.disableHoverListener || (this.show = !0);
+		}, this.handleAnchorMouseOut = () => {
+			this.disableHoverListener || setTimeout(() => {
+				var e, t, n, r, i, a;
+				!((e = this.container) != null && (t = e.matches) != null && t.call(e, ":hover")) && !((n = this.arrow) != null && (r = n.matches) != null && r.call(n, ":hover")) && !((i = this) != null && (a = i.matches) != null && a.call(i, ":hover")) && (this.show = !1);
+			}, 150);
+		}, this.handleAnchorFocusIn = () => {
+			this.usingKeyboard && (this.disableFocusListener || (this.show = !0));
+		}, this.handleAnchorFocusOut = () => {
+			this.usingKeyboard && (this.disableFocusListener || (this.show = !1));
+		}, this.handlePressOutside = (e) => {
+			var t;
+			if (this.disablePressListener || e.button !== 0) return;
+			let n = e.target;
+			n === this || this.contains(n) || (t = this.shadowRoot) != null && t.contains(n) || this.anchorElements[0] === n || this.anchorElements[0].contains(n) || (this.show = !1);
+		};
+	}
+	disconnectedCallback() {
+		var e;
+		super.disconnectedCallback(), (e = this.container) != null && e.matches(":popover-open") && this.container.hidePopover(), window.removeEventListener("resize", this.handleResize), document.removeEventListener("pointerdown", this.handlePressOutside), document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("pointerdown", this.handlePointerDown);
+	}
+	updated(e) {
+		var t, n;
+		super.updated(e), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("pointerdown", this.handlePointerDown), this.show && (t = this.container) != null && t.isConnected && !this.container.matches(":popover-open") ? this.container.showPopover() : !this.show && (n = this.container) != null && n.isConnected && this.container.matches(":popover-open") && this.container.hidePopover(), this.updatePosition(), e.has("show") && (this.show ? (window.addEventListener("resize", this.handleResize), document.addEventListener("pointerdown", this.handlePressOutside)) : (window.removeEventListener("resize", this.handleResize), document.removeEventListener("pointerdown", this.handlePressOutside)));
+	}
+	updatePosition() {
+		requestAnimationFrame(() => {
+			var e;
+			this.anchorContainer && this.container && this.show && (e = this.anchorElements) != null && e[0] && this.anchorContainer instanceof Element && this.container instanceof Element && this.arrow instanceof Element && (p(this.anchorContainer, this.container, {
+				strategy: "fixed",
+				placement: "bottom-start",
+				middleware: [
+					h(({ placement: e }) => ({
+						mainAxis: 8,
+						crossAxis: e.endsWith("-end") ? 8 : -8
+					})),
+					m({ crossAxis: !0 }),
+					g(),
+					f({
+						element: this.arrow,
+						padding: 12
+					}),
+					_({ apply({ availableWidth: e, availableHeight: t, elements: n }) {
+						Object.assign(n.floating.style, {
+							maxWidth: `${Math.min(240, e - 8)}px`,
+							maxHeight: `${Math.max(0, t - 8)}px`
+						});
+					} })
+				]
+			}).then((e) => {
+				let { x: t, y: n, middlewareData: r, placement: i } = e;
+				if (this.tooltopPlacement = i, Object.assign(this.container.style, {
+					left: `${t ?? 0}px`,
+					top: `${n ?? 0}px`
+				}), r.arrow) {
+					let { x: e, y: t } = r.arrow;
+					Object.assign(this.arrow.style, {
+						left: e == null ? "" : `${e}px`,
+						top: t == null ? "" : `${t}px`
+					});
+				}
+			}), this.requestUpdate());
+		});
+	}
+	get arrowClasses() {
+		var e, t;
+		return {
+			arrow: !0,
+			[this.mode]: !0,
+			"not-positionable": ((e = this) == null ? void 0 : e.offsetWidth) > ((t = this.container) == null ? void 0 : t.offsetWidth)
+		};
+	}
+	get containerClasses() {
+		return {
+			container: !0,
+			[this.tooltopPlacement]: !!this.tooltopPlacement,
+			[this.mode]: !0
+		};
+	}
+	get headerClasses() {
+		var e, t;
+		return {
+			"header-container": !0,
+			hidden: ((e = this.headerElements) == null ? void 0 : e.length) === 0 && ((t = this.closeButtonElements) == null ? void 0 : t.length) === 0
+		};
+	}
+	get contentClasses() {
+		var e;
+		return {
+			"content-container": !0,
+			"ds-scroll": !0,
+			"ds-scroll--size-s": !0,
+			hidden: ((e = this.contentElements) == null ? void 0 : e.length) === 0
+		};
+	}
+	get arrowTemplate() {
+		return e`
+            <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="17" height="9" viewBox="0 0 17 9" fill="none" class=${u(this.arrowClasses)} @mouseout="${this.handleAnchorMouseOut}" aria-hidden="true" focusable="false">
+                <path d="M5.77946 4.38048L0.5 9L16 9L11.1427 4.46656C9.88663 3.29419 9.25858 2.708 8.48883 2.69565C7.71909 2.68329 7.07255 3.24902 5.77946 4.38048Z" class="ds-tooltip-arrow-background"/>
+                <path d="M0.5 8.5L5.89467 4.11683C7.1398 3.10516 7.76236 2.59933 8.49029 2.6109C9.21822 2.62246 9.8244 3.14782 11.0368 4.19853L16 8.5" stroke-opacity="1" stroke-linecap="round" class="ds-tooltip-arrow-border"/>
             </svg>`;
-  }
-  get tooltipTemplate() {
-    return this.show && this.anchorElements.length > 0 ? m`
-                <div
-                    id=${this.tooltipId}
-                    part="container"
-                    class=${c(this.containerClasses)}
-                    @mouseout=${this.handleAnchorMouseOut}
-                    role="tooltip"
-                >
-                    <header part="header" class=${c(this.headerClasses)}>
-                        <slot @slotchange=${this.updatePosition} name="header"></slot>
-                        <slot @slotchange=${this.updatePosition} name="close-button" @click=${this.handleClose}></slot>
-                    </header>
-                    <div part="content" class=${c(this.contentClasses)}>
-                        <slot @slotchange=${this.updatePosition} name="content"></slot>
-                    </div>
-                    <slot part="image" @slotchange=${this.updatePosition} name="image"></slot>
-                    ${this.arrowTemplate}
-                </div>` : d;
-  }
-  get styleTokens() {
-    return A`
+	}
+	get tooltipTemplate() {
+		return e`
+            <div
+                id=${this.tooltipId}
+                part="container"
+                class=${u(this.containerClasses)}
+                popover="manual"
+                @mouseout=${this.handleAnchorMouseOut}
+                role="tooltip"
+                @pointerdown=${this.handleTooltipPointerDown}
+            >
+                <header part="header" class=${u(this.headerClasses)}>
+                    <slot @slotchange=${this.handleContainerSlotChange} name="header"></slot>
+                    <slot @slotchange=${this.handleContainerSlotChange} name="close-button" @click=${this.handleClose}></slot>
+                </header>
+                <div part="content" class=${u(this.contentClasses)}>
+                    <slot @slotchange=${this.handleContainerSlotChange} name="content"></slot>
+                </div>
+                <slot part="image" @slotchange=${this.updatePosition} name="image"></slot>
+                ${this.arrowTemplate}
+            </div>
+        `;
+	}
+	get styleTokens() {
+		return e`
             <style>
                 :host {
                     color-scheme: ${this.mode};
                 }
             </style>
         `;
-  }
-  render() {
-    return m`
+	}
+	render() {
+		return e`
             <style>
                 .anchor {
                     cursor: ${this.disablePressListener ? "default" : "pointer"};
@@ -166,11 +180,11 @@ let s = class extends x(y) {
                 id="button"
                 class="anchor"
                 tabindex="0"
-                role=${this.disablePressListener ? d : "button"}
-                aria-controls=${this.tooltipId}
-                aria-expanded=${this.disablePressListener ? d : String(this.show)}
-                aria-describedby=${this.show ? this.tooltipId : d}
-                aria-label="open tooltip"
+                role=${this.disablePressListener ? t : "button"}
+                aria-controls=${this.disablePressListener ? t : this.tooltipId}
+                aria-expanded=${this.disablePressListener ? t : String(this.show)}
+                aria-describedby=${this.show ? this.tooltipId : t}
+                aria-label=${this.disablePressListener ? t : "open tooltip"}
                 @mouseover="${this.handleAnchorMouseOver}"
                 @mouseout="${this.handleAnchorMouseOut}"
                 @pointerdown="${this.handleAnchorPointerDown}"
@@ -181,54 +195,36 @@ let s = class extends x(y) {
             </div>
             ${this.tooltipTemplate}
         `;
-  }
-};
-s.styles = [M];
-r([
-  l({ type: String, reflect: !0 })
-], s.prototype, "mode", 2);
-r([
-  l({ type: Boolean, reflect: !0, converter: u })
-], s.prototype, "show", 2);
-r([
-  l({ type: Boolean, reflect: !0, converter: u, attribute: "disable-hover-listener" })
-], s.prototype, "disableHoverListener", 2);
-r([
-  l({ type: Boolean, reflect: !0, converter: u, attribute: "disable-focus-listener" })
-], s.prototype, "disableFocusListener", 2);
-r([
-  l({ type: Boolean, reflect: !0, converter: u, attribute: "disable-press-listener" })
-], s.prototype, "disablePressListener", 2);
-r([
-  b()
-], s.prototype, "tooltopPlacement", 2);
-r([
-  b()
-], s.prototype, "tooltipId", 2);
-r([
-  f(".container")
-], s.prototype, "container", 2);
-r([
-  f("#button")
-], s.prototype, "anchorContainer", 2);
-r([
-  f("#arrow")
-], s.prototype, "arrow", 2);
-r([
-  p({ slot: "" })
-], s.prototype, "anchorElements", 2);
-r([
-  p({ slot: "header" })
-], s.prototype, "headerElements", 2);
-r([
-  p({ slot: "close-button" })
-], s.prototype, "closeButtonElements", 2);
-r([
-  p({ slot: "content" })
-], s.prototype, "contentElements", 2);
-s = r([
-  v("ds-tooltip")
-], s);
-export {
-  s as DsTooltip
-};
+	}
+}, w = (C.styles = [
+	v,
+	y,
+	S,
+	b,
+	x
+], C);
+o([n({
+	type: String,
+	reflect: !0
+})], w.prototype, "mode", void 0), o([n({
+	type: Boolean,
+	reflect: !0,
+	converter: l
+})], w.prototype, "show", void 0), o([n({
+	type: Boolean,
+	reflect: !0,
+	converter: l,
+	attribute: "disable-hover-listener"
+})], w.prototype, "disableHoverListener", void 0), o([n({
+	type: Boolean,
+	reflect: !0,
+	converter: l,
+	attribute: "disable-focus-listener"
+})], w.prototype, "disableFocusListener", void 0), o([n({
+	type: Boolean,
+	reflect: !0,
+	converter: l,
+	attribute: "disable-press-listener"
+})], w.prototype, "disablePressListener", void 0), o([r()], w.prototype, "tooltopPlacement", void 0), o([r()], w.prototype, "tooltipId", void 0), o([i(".container")], w.prototype, "container", void 0), o([i("#button")], w.prototype, "anchorContainer", void 0), o([i("#arrow")], w.prototype, "arrow", void 0), o([a({ slot: "" })], w.prototype, "anchorElements", void 0), o([a({ slot: "header" })], w.prototype, "headerElements", void 0), o([a({ slot: "close-button" })], w.prototype, "closeButtonElements", void 0), o([a({ slot: "content" })], w.prototype, "contentElements", void 0), w = o([c("ds-tooltip")], w);
+//#endregion
+export { w as DsTooltip };