@cupra/ui-kit 1.0.0-canary.13 → 1.0.0-canary.15

package/dist/components/ds-rating/ds-rating.d.ts

@@ -0,0 +1,14 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-icon/ds-icon.ts';
+import type { DsRatingAttrs } from './ds-rating.types';
+export declare class DsRating extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    value: DsRatingAttrs['value'];
+    disabled: DsRatingAttrs['disabled'];
+    hideRatingText: DsRatingAttrs['hide-rating-text'];
+    private get displayValue();
+    private get classes();
+    private getStarIconName;
+    protected get starsTemplate(): any[];
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/ds-rating/ds-rating.js

@@ -0,0 +1,73 @@
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as h } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as u } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as p } 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 m } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../ds-icon/ds-icon.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, t, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? g(t, r) : t, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (s = (a ? n(t, r, s) : n(s)) || s);
+  return a && s && v(t, r, s), s;
+};
+let i = class extends c {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.hideRatingText = !1;
+  }
+  get displayValue() {
+    if (this.value === void 0 || this.value === null || this.value < 0) return 0;
+    const e = Math.max(0, Math.min(5, this.value)), t = Math.floor(e), r = Number((e - t).toFixed(2));
+    return t + Math.round(r / 0.5) * 0.5;
+  }
+  get classes() {
+    return {
+      container: !0,
+      disabled: this.disabled
+    };
+  }
+  getStarIconName(e, t) {
+    return t >= e ? "star-filled" : t >= e - 0.5 ? "half-star-filled" : "star";
+  }
+  get starsTemplate() {
+    const e = this.displayValue, t = [];
+    for (let r = 1; r <= 5; r++) {
+      const a = this.getStarIconName(r, e);
+      a && t.push(
+        this.componentFactory.createIcon({
+          class: "star-icon",
+          "icon-name": a,
+          size: 16
+        })
+      );
+    }
+    return t;
+  }
+  render() {
+    const e = this.value !== void 0 && this.value >= 0 ? this.value : 0, r = Math.max(0, Math.min(5, e)).toString();
+    return p`
+            <div class=${d(this.classes)} aria-label=${`Rating: ${r} out of 5`} role="img">
+                <div class="stars-wrapper">${this.starsTemplate}</div>
+                ${this.hideRatingText ? "" : p`<span class="rating-text">${r}</span>`}
+            </div>
+        `;
+  }
+};
+i.styles = [f];
+o([
+  m({ type: Number })
+], i.prototype, "value", 2);
+o([
+  m({ type: Boolean, converter: u, reflect: !0 })
+], i.prototype, "disabled", 2);
+o([
+  m({ type: Boolean, converter: u, attribute: "hide-rating-text" })
+], i.prototype, "hideRatingText", 2);
+i = o([
+  h("ds-rating")
+], i);
+export {
+  i as DsRating
+};

package/dist/components/ds-rating/ds-rating.test.d.ts

@@ -0,0 +1,8 @@
+import type { DsRating } from './ds-rating';
+import './ds-rating';
+import '../ds-theme-provider/ds-theme-provider.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-rating': DsRating;
+    }
+}

package/dist/components/ds-rating/ds-rating.types.d.ts

@@ -0,0 +1,6 @@
+import type { CommonAttrs } from '../../types/types.ts';
+export type DsRatingAttrs = {
+    value?: number;
+    disabled?: boolean;
+    'hide-rating-text'?: boolean;
+} & CommonAttrs;

package/dist/components/ds-rating/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

package/dist/components/ds-rating/styles/common.styles.js

@@ -0,0 +1,14 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../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 { css as r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const e = r`
+    .container,
+    .stars-wrapper {
+        display: flex;
+        align-items: center;
+    }
+`;
+export {
+  e as commonStyles
+};

package/dist/components/ds-theme-provider/ds-theme-provider.js

@@ -53,7 +53,7 @@ let m = class extends $ {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.0.0-canary.13", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.0.0-canary.15", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");

package/dist/components/ds-tooltip/ds-tooltip.d.ts

@@ -1,45 +1,59 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
+import { type Placement } from '@floating-ui/dom';
 import { nothing } from 'lit';
 import type { DsTooltipAttrs } from './ds-tooltip.types';
 declare const DsTooltip_base: (new (...args: any[]) => import("../../mixins/ViewportMixin").ViewportInterface) & typeof UiKitElement;
 export declare class DsTooltip extends DsTooltip_base {
     static styles: import("lit").CSSResult[];
     mode: DsTooltipAttrs['mode'];
-    titleText: DsTooltipAttrs['title-text'];
-    bodyText: DsTooltipAttrs['body-text'];
-    position: DsTooltipAttrs['position'];
-    align: DsTooltipAttrs['align'];
-    cancelButtonText: DsTooltipAttrs['cancel-button-text'];
-    confirmButtonText: DsTooltipAttrs['confirm-button-text'];
     show: DsTooltipAttrs['show'];
-    zIndex: DsTooltipAttrs['z-index'];
-    bodyWidth: DsTooltipAttrs['body-width'];
-    protected tooltip: HTMLInputElement;
+    disableHoverListener: DsTooltipAttrs['disable-hover-listener'];
+    disableFocusListener: DsTooltipAttrs['disable-focus-listener'];
+    disablePressListener: DsTooltipAttrs['disable-press-listener'];
+    protected tooltopPlacement: Placement;
+    protected container: HTMLInputElement;
+    protected anchorContainer: HTMLInputElement;
     protected arrow: HTMLInputElement;
-    connectedCallback(): void;
+    private anchorElements;
+    private headerElements;
+    private closeButtonElements;
+    private contentElements;
+    protected usingKeyboard: boolean;
     disconnectedCallback(): void;
-    protected willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    protected updatePosition(): void;
+    protected handleKeyDown: () => void;
+    protected handlePointerDown: () => void;
     protected handleResize: (params?: any) => void | Function;
     protected get arrowClasses(): {
         [x: string]: boolean;
         arrow: boolean;
         'not-positionable': boolean;
     };
-    protected get tooltipClasses(): {
-        [x: string]: string | boolean;
-        tooltip: boolean;
-        complex: string;
+    protected get containerClasses(): {
+        [x: string]: boolean;
+        container: boolean;
+    };
+    protected get headerClasses(): {
+        'header-container': boolean;
+        hidden: boolean;
+    };
+    protected get contentClasses(): {
+        'content-container': boolean;
+        'ds-scroll': boolean;
+        'ds-scroll--size-s': boolean;
+        hidden: boolean;
     };
-    protected get buttonsTemplate(): typeof nothing | import("lit").TemplateResult<1>;
+    protected handleClose: () => void;
+    protected get arrowTemplate(): import("lit").TemplateResult<1>;
     protected get tooltipTemplate(): typeof nothing | import("lit").TemplateResult<1>;
-    private getTooltipWidth;
     protected get styleTokens(): import("lit").HTMLTemplateResult;
+    protected handleAnchorPointerDown: (event: PointerEvent) => void;
+    protected handleAnchorMouseOver: () => void;
+    protected handleAnchorMouseOut: () => void;
+    protected handleAnchorFocusIn: () => void;
+    protected handleAnchorFocusOut: () => void;
+    protected handlePressOutside: (event: MouseEvent) => void;
     render(): import("lit").TemplateResult<1>;
-    protected handleClickSlot(): void;
-    protected handleMouseOver(): void;
-    protected handleMouseOut(): void;
-    protected handleClickCancelButton(): void;
-    protected handleClickConfirmButton(): void;
-    protected handleClickOutside: (event: MouseEvent | TouchEvent) => void;
 }
 export {};

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

@@ -1,95 +1,143 @@
-import { UiKitElement as m } from "../base/UiKitElement.js";
-import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
-import { ViewportMixin as y } from "../../mixins/ViewportMixin.js";
-import { booleanConverter as b } from "../../utils/booleanConverter.js";
-import { debounce as v } from "../../utils/debounce.js";
+import { UiKitElement as w } from "../base/UiKitElement.js";
+import { customUiKitElement as v } from "../../decorators/customUiKitElement.js";
+import { computePosition as y, flip as b, shift as g, offset as P, arrow as E, size as L } from "../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { ViewportMixin as $ } from "../../mixins/ViewportMixin.js";
+import { booleanConverter as c } from "../../utils/booleanConverter.js";
+import { debounce as C } from "../../utils/debounce.js";
 import { htmlWithTokens as x } from "../../utils/htmlWithTokens.js";
 import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as a, html as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { html as p, nothing as O } 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 h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { query as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as g, tooltipStyles as w, arrowStyles as T } from "./styles/common.styles.js";
-var C = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, s = (t, n, r, i) => {
-  for (var o = i > 1 ? void 0 : i ? $(n, r) : n, l = t.length - 1, d; l >= 0; l--)
-    (d = t[l]) && (o = (i ? d(n, r, o) : d(o)) || o);
-  return i && o && C(n, r, o), o;
+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 A } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as m } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as u } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as D } from "./styles/common.styles.js";
+var F = Object.defineProperty, M = Object.getOwnPropertyDescriptor, r = (e, t, o, i) => {
+  for (var n = i > 1 ? void 0 : i ? M(t, o) : t, h = e.length - 1, a; h >= 0; h--)
+    (a = e[h]) && (n = (i ? a(t, o, n) : a(n)) || n);
+  return i && n && F(t, o, n), n;
 };
-let e = class extends y(m) {
+let s = class extends $(w) {
   constructor() {
-    super(...arguments), this.mode = "light", this.titleText = "", this.bodyText = "", this.position = "bottom", this.align = "center", this.show = !1, this.zIndex = 2e3, this.bodyWidth = "unset", this.handleResize = v({ func: () => this.requestUpdate() }), this.handleClickOutside = (t) => {
-      var r;
-      const n = t.target;
-      n !== this && !this.contains(n) && !((r = this.shadowRoot) != null && r.contains(n)) && (this.show = !1);
+    super(...arguments), this.mode = "light", this.show = !1, this.disableHoverListener = !1, this.disableFocusListener = !1, this.disablePressListener = !1, this.usingKeyboard = !1, this.handleKeyDown = () => {
+      this.usingKeyboard = !0;
+    }, this.handlePointerDown = () => {
+      this.usingKeyboard = !1;
+    }, this.handleResize = C({ 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, i, n;
+        !((t = (e = this.container) == null ? void 0 : e.matches) != null && t.call(e, ":hover")) && !((i = (o = this.arrow) == null ? void 0 : o.matches) != null && i.call(o, ":hover")) && !((n = this == null ? void 0 : this.matches) != null && n.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);
     };
   }
-  connectedCallback() {
-    super.connectedCallback(), window.addEventListener("resize", this.handleResize);
-  }
   disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("resize", this.handleResize);
-  }
-  willUpdate(t) {
-    t.has("show") && (this.show ? document.addEventListener("click", this.handleClickOutside) : document.removeEventListener("click", this.handleClickOutside));
+    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) || (y(this.anchorContainer, this.container, {
+        placement: "bottom-start",
+        middleware: [
+          b(),
+          g(),
+          P(8),
+          E({ element: this.arrow }),
+          L({
+            apply({ availableWidth: t, availableHeight: o, elements: i }) {
+              Object.assign(i.floating.style, {
+                maxWidth: `${Math.min(240, t - 8)}px`,
+                maxHeight: `${Math.max(0, o - 8)}px`
+              });
+            }
+          })
+        ]
+      }).then((t) => {
+        const { x: o, y: i, middlewareData: n, placement: h } = t;
+        if (this.tooltopPlacement = h, Object.assign(this.container.style, {
+          left: `${o ?? 0}px`,
+          top: `${i ?? 0}px`
+        }), n.arrow) {
+          const { x: a, y: f } = n.arrow;
+          Object.assign(this.arrow.style, {
+            left: a != null ? `${a}px` : "",
+            top: f != null ? `${f}px` : ""
+          });
+        }
+      }), this.requestUpdate());
+    });
   }
   get arrowClasses() {
-    var t;
+    var e;
     return {
       arrow: !0,
-      [this.position]: !0,
-      [this.align]: !0,
       [this.mode]: !0,
-      "not-positionable": (this == null ? void 0 : this.offsetWidth) > ((t = this.tooltip) == null ? void 0 : t.offsetWidth)
+      "not-positionable": (this == null ? void 0 : this.offsetWidth) > ((e = this.container) == null ? void 0 : e.offsetWidth)
     };
   }
-  get tooltipClasses() {
+  get containerClasses() {
     return {
-      tooltip: !0,
-      [this.position]: !0,
-      [this.align]: !0,
-      [this.mode]: !0,
-      complex: this.cancelButtonText || this.confirmButtonText
+      container: !0,
+      [this.tooltopPlacement]: !!this.tooltopPlacement,
+      [this.mode]: !0
     };
   }
-  get buttonsTemplate() {
-    if (!this.cancelButtonText && !this.confirmButtonText) return a;
-    const t = this.mode === "light" ? "dark" : "light";
-    return c`
-            <div class="buttons-container">
-                ${this.cancelButtonText ? this.componentFactory.createButton({
-      class: "cancel-button",
-      "@click": this.handleClickCancelButton,
-      size: "small",
-      variant: "secondary",
-      mode: t,
-      children: this.cancelButtonText
-    }) : a}
-                ${this.confirmButtonText ? this.componentFactory.createButton({
-      class: "confirm-button",
-      "@click": this.handleClickConfirmButton,
-      size: "small",
-      variant: "primary",
-      mode: t,
-      children: this.confirmButtonText
-    }) : a}
-            </div>
-        `;
+  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 tooltipTemplate() {
-    return this.show ? c`
-                  <div class=${u(this.arrowClasses)} @mouseout="${this.handleMouseOut}"></div>
-                  <div class=${u(this.tooltipClasses)} @mouseout=${this.handleMouseOut}>
-                      ${this.titleText ? c`<div class="title">${this.titleText}</div>` : a}
-                      ${this.bodyText ? c`<div class="body">${this.bodyText}</div>` : a}
-                      ${this.buttonsTemplate}
-                  </div>
-              ` : a;
+  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
+    };
   }
-  getTooltipWidth() {
-    const i = this.offsetLeft + this.scrollLeft + this.clientLeft, o = document.body.clientWidth - i - this.clientWidth;
-    let l;
-    return this.position === "left" ? l = i - 13 : this.position === "right" ? l = o - 13 : this.align === "center" ? l = (i < o ? i : o) * 2 + this.clientWidth : this.align === "start" ? l = document.body.clientWidth - i : this.align === "end" && (l = i + this.clientWidth), `${l - 16 - 32}px`;
+  get arrowTemplate() {
+    return p`
+            <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="17" height="9" viewBox="0 0 17 9" fill="none" class=${d(this.arrowClasses)} @mouseout="${this.handleAnchorMouseOut}">
+                <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"/>
+            </svg>`;
+  }
+  get tooltipTemplate() {
+    return this.show && this.anchorElements.length > 0 ? p`
+                <div id="tooltip" part="container" class=${d(this.containerClasses)} @mouseout=${this.handleAnchorMouseOut}>
+                    <header part="header" class=${d(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=${d(this.contentClasses)}>
+                        <slot @slotchange=${this.updatePosition} name="content"></slot>
+                    </div>
+                    <slot part="image" @slotchange=${this.updatePosition} name="image"></slot>
+                    ${this.arrowTemplate}
+                </div>` : O;
   }
   get styleTokens() {
     return x`
@@ -101,98 +149,72 @@ let e = class extends y(m) {
         `;
   }
   render() {
-    return c`
+    return p`
             <style>
-                .tooltip {
-                    max-width: ${this.getTooltipWidth()};
-                }
-                .tooltip,
-                .arrow {
-                    z-index: ${this.zIndex};
-                }
-                .body {
-                    max-width: ${this.bodyWidth};
+                .anchor {
+                    cursor: ${this.disablePressListener ? "default" : "pointer"};
                 }
             </style>
             ${this.styleTokens}
-            <slot
-                @mouseover="${this.handleMouseOver}"
-                @mouseout="${this.handleMouseOut}"
-                @click=${this.handleClickSlot}
-            ></slot>
-
+            <div 
+                id="button"
+                class="anchor"
+                tabindex="0"
+                @mouseover="${this.handleAnchorMouseOver}"
+                @mouseout="${this.handleAnchorMouseOut}"
+                @pointerdown="${this.handleAnchorPointerDown}"
+                @focusin=${this.handleAnchorFocusIn}
+                @focusout=${this.handleAnchorFocusOut}
+            >
+                <slot></slot>
+            </div>
             ${this.tooltipTemplate}
         `;
   }
-  handleClickSlot() {
-    ["xs", "s", "m"].includes(this.viewport) && (this.show = !this.show);
-  }
-  handleMouseOver() {
-    ["xs", "s", "m"].includes(this.viewport) || (this.show = !0);
-  }
-  handleMouseOut() {
-    ["xs", "s", "m"].includes(this.viewport) || setTimeout(() => {
-      var t, n, r, i, o;
-      !((n = (t = this.tooltip) == null ? void 0 : t.matches) != null && n.call(t, ":hover")) && !((i = (r = this.arrow) == null ? void 0 : r.matches) != null && i.call(r, ":hover")) && !((o = this == null ? void 0 : this.matches) != null && o.call(this, ":hover")) && (this.show = !1);
-    }, 150);
-  }
-  handleClickCancelButton() {
-    this.dispatchEvent(
-      new CustomEvent("click-cancel-button", {
-        bubbles: !0,
-        composed: !0
-      })
-    ), this.show = !1;
-  }
-  handleClickConfirmButton() {
-    this.dispatchEvent(
-      new CustomEvent("click-confirm-button", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
 };
-e.styles = [g, w, T];
-s([
-  h({ type: String, reflect: !0 })
-], e.prototype, "mode", 2);
-s([
-  h({ type: String, attribute: "title-text" })
-], e.prototype, "titleText", 2);
-s([
-  h({ type: String, attribute: "body-text" })
-], e.prototype, "bodyText", 2);
-s([
-  h({ type: String })
-], e.prototype, "position", 2);
-s([
-  h({ type: String })
-], e.prototype, "align", 2);
-s([
-  h({ type: String, attribute: "cancel-button-text" })
-], e.prototype, "cancelButtonText", 2);
-s([
-  h({ type: String, attribute: "confirm-button-text" })
-], e.prototype, "confirmButtonText", 2);
-s([
-  h({ type: Boolean, reflect: !0, converter: b })
-], e.prototype, "show", 2);
-s([
-  h({ type: Number, attribute: "z-index" })
-], e.prototype, "zIndex", 2);
-s([
-  h({ type: String, attribute: "body-width" })
-], e.prototype, "bodyWidth", 2);
-s([
-  p(".tooltip")
-], e.prototype, "tooltip", 2);
-s([
-  p(".arrow")
-], e.prototype, "arrow", 2);
-e = s([
-  f("ds-tooltip")
-], e);
+s.styles = [D];
+r([
+  l({ type: String, reflect: !0 })
+], s.prototype, "mode", 2);
+r([
+  l({ type: Boolean, reflect: !0, converter: c })
+], s.prototype, "show", 2);
+r([
+  l({ type: Boolean, reflect: !0, converter: c, attribute: "disable-hover-listener" })
+], s.prototype, "disableHoverListener", 2);
+r([
+  l({ type: Boolean, reflect: !0, converter: c, attribute: "disable-focus-listener" })
+], s.prototype, "disableFocusListener", 2);
+r([
+  l({ type: Boolean, reflect: !0, converter: c, attribute: "disable-press-listener" })
+], s.prototype, "disablePressListener", 2);
+r([
+  A()
+], s.prototype, "tooltopPlacement", 2);
+r([
+  m(".container")
+], s.prototype, "container", 2);
+r([
+  m("#button")
+], s.prototype, "anchorContainer", 2);
+r([
+  m("#arrow")
+], s.prototype, "arrow", 2);
+r([
+  u({ slot: "" })
+], s.prototype, "anchorElements", 2);
+r([
+  u({ slot: "header" })
+], s.prototype, "headerElements", 2);
+r([
+  u({ slot: "close-button" })
+], s.prototype, "closeButtonElements", 2);
+r([
+  u({ slot: "content" })
+], s.prototype, "contentElements", 2);
+s = r([
+  v("ds-tooltip")
+], s);
 export {
-  e as DsTooltip
+  s as DsTooltip
 };

package/dist/components/ds-tooltip/ds-tooltip.test.d.ts

@@ -0,0 +1,8 @@
+import '../ds-theme-provider/ds-theme-provider.ts';
+import './ds-tooltip.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-tooltip': import('./ds-tooltip').DsTooltip;
+        'ds-theme-provider': HTMLElement;
+    }
+}

package/dist/components/ds-tooltip/ds-tooltip.types.d.ts

@@ -1,13 +1,8 @@
 import type { CommonAttrs } from '../../types/types';
-export interface DsTooltipAttrs extends CommonAttrs {
+export type DsTooltipAttrs = CommonAttrs & {
     mode?: 'dark' | 'light';
-    'title-text'?: string;
-    'body-text'?: string;
-    position?: 'top' | 'right' | 'bottom' | 'left';
-    align?: 'start' | 'center' | 'end';
     show?: boolean;
-    'body-width'?: string;
-    'cancel-button-text'?: string;
-    'confirm-button-text'?: string;
-    'z-index'?: number;
-}
+    'disable-hover-listener'?: boolean;
+    'disable-focus-listener'?: boolean;
+    'disable-press-listener'?: boolean;
+};

package/dist/components/ds-tooltip/styles/common.styles.d.ts

@@ -1,3 +1 @@
 export declare const commonStyles: import("lit").CSSResult;
-export declare const tooltipStyles: import("lit").CSSResult;
-export declare const arrowStyles: import("lit").CSSResult;