@cupra/ui-kit 1.0.0-canary.9 → 1.0.0

package/dist/components/ds-toggle-switch/ds-toggle-switch.js

@@ -0,0 +1,100 @@
+import { UiKitElement as d } from "../base/UiKitElement.js";
+import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as n } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as m } 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 f } 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 i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.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 b } from "./styles/common.styles.js";
+var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (h, l, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? y(l, o) : l, a = h.length - 1, c; a >= 0; a--)
+    (c = h[a]) && (t = (r ? c(l, o, t) : c(t)) || t);
+  return r && t && k(l, o, t), t;
+};
+let e = class extends d {
+  constructor() {
+    super(...arguments), this.size = "medium", this.checked = !1, this.disabled = !1, this.mode = "light";
+  }
+  handleClick() {
+    this.checked = !this.checked, this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          checked: this.checked
+        }
+      })
+    );
+  }
+  handleClickOff() {
+    this.checked && this.handleClick();
+  }
+  handleClickOn() {
+    this.checked || this.handleClick();
+  }
+  get styleTokens() {
+    return m`
+            <style>
+                :host {
+                    color-scheme: ${this.mode};
+                }
+            </style>
+        `;
+  }
+  get labelClasses() {
+    return {
+      container: !0,
+      [this.size]: !!this.size,
+      checked: this.checked,
+      disabled: this.disabled,
+      [this.mode]: !!this.mode
+    };
+  }
+  render() {
+    return f`
+            ${this.styleTokens}
+            <div class=${u(this.labelClasses)} @click=${this.handleClick}>
+                <slot name="off" @click=${this.handleClickOff}></slot>
+                <slot name="label"></slot>
+                <button
+                    class="track-container"
+                    type="button"
+                    role="switch"
+                    aria-checked=${this.checked}
+                    aria-label=${this.dataAriaLabel}
+                    data-action="aria-switch"
+                    ?disabled=${this.disabled}
+                >
+                    <span class="track"></span>
+                    <span class="fill"></span>
+                    <span class="dot"></span>
+                </button>
+                <slot name="on" @click=${this.handleClickOn}></slot>
+            </div>
+        `;
+  }
+};
+e.styles = [b];
+s([
+  i({ type: String })
+], e.prototype, "size", 2);
+s([
+  i({ type: Boolean, converter: n, reflect: !0 })
+], e.prototype, "checked", 2);
+s([
+  i({ type: Boolean, converter: n, reflect: !0 })
+], e.prototype, "disabled", 2);
+s([
+  i({ type: String, reflect: !0 })
+], e.prototype, "mode", 2);
+s([
+  i({ type: String, attribute: "data-aria-label" })
+], e.prototype, "dataAriaLabel", 2);
+e = s([
+  p("ds-toggle-switch")
+], e);
+export {
+  e as DsToggleSwitch
+};

package/dist/components/ds-toggle-switch/styles/common.styles.js

@@ -0,0 +1,47 @@
+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 t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const s = t`
+    .container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    ::slotted([slot='on']),
+    ::slotted([slot='off']) {
+        cursor: pointer;
+        transition: color 200ms ease-in-out;
+    }
+
+    .track-container {
+        display: inline-flex;
+        justify-content: flex-start;
+        align-items: center;
+        position: relative;
+        background: transparent;
+        border: none;
+        outline: none;
+        padding: 0;
+        cursor: pointer;
+    }
+
+    .fill {
+        transition: width 200ms ease-in-out;
+        position: absolute;
+        left: 0;
+        top: 50%;
+    }
+
+    .dot {
+        border-radius: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        transition: left 200ms ease-in-out;
+    }
+`;
+export {
+  s as commonStyles
+};

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

@@ -1,45 +1,60 @@
 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;
+    private tooltipId;
+    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

@@ -0,0 +1,234 @@
+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"/>
+            </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`
+            <style>
+                :host {
+                    color-scheme: ${this.mode};
+                }
+            </style>
+        `;
+  }
+  render() {
+    return m`
+            <style>
+                .anchor {
+                    cursor: ${this.disablePressListener ? "default" : "pointer"};
+                }
+            </style>
+            ${this.styleTokens}
+            <div
+                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"
+                @mouseover="${this.handleAnchorMouseOver}"
+                @mouseout="${this.handleAnchorMouseOut}"
+                @pointerdown="${this.handleAnchorPointerDown}"
+                @focusin=${this.handleAnchorFocusIn}
+                @focusout=${this.handleAnchorFocusOut}
+            >
+                <slot></slot>
+            </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
+};

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;

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

@@ -0,0 +1,130 @@
+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 t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const i = t`
+    :host {
+        position: relative;
+        display: inline-block;
+        width: fit-content;
+    }
+
+    .title {
+        text-align: left;
+    }
+
+    .body {
+        text-align: left;
+    }
+
+    .buttons-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        justify-content: flex-end;
+    }
+
+    ::slotted([slot='content']) {
+        text-align: left;
+    }
+
+    .container {
+        white-space: normal;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5, 8px);
+        align-self: stretch;
+
+        z-index: var(--ds-z-index-tooltip, 1300);
+
+        position: absolute;
+        width: max-content;
+    }
+
+    ::slotted([slot='image']) {
+        width: 100%;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .header-container {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .header-container.hidden,
+    .content-container.hidden {
+        display: none;
+    }
+
+    .content-container {
+        overflow: auto;
+    }
+
+    ::slotted([slot='header']) {
+        flex: 1 1 auto;
+    }
+
+    ::slotted([slot='close-button']) {
+        flex: 0 0 auto;
+        margin-left: auto;
+    }
+
+    .arrow {
+        position: absolute;
+        z-index: var(--ds-z-index-tooltip, 1300);
+    }
+
+    .ds-tooltip-arrow-background {
+        fill: var(--ds-tooltip-arrow-background-color);
+    }
+
+    .ds-tooltip-arrow-border {
+        stroke: var(--ds-tooltip-arrow-border-color);
+    }
+
+    .anchor {
+        line-height: 0;
+        outline: none;
+        width: fit-content;
+    }
+
+    .top .arrow,
+    .top-start .arrow,
+    .top-end .arrow {
+        bottom: 0;
+        margin-bottom: -9px;
+        transform: rotate(180deg);
+    }
+
+    .bottom .arrow,
+    .bottom-start .arrow,
+    .bottom-end .arrow {
+        top: 0;
+        margin-top: -9px;
+        transform: rotate(0deg);
+    }
+
+    .left .arrow,
+    .left-start .arrow,
+    .left-end .arrow {
+        right: 0;
+        margin-right: -9px;
+        transform: rotate(90deg);
+    }
+
+    .right .arrow,
+    .right-start .arrow,
+    .right-end .arrow {
+        left: 0;
+        margin-left: -9px;
+        transform: rotate(270deg);
+    }
+`;
+export {
+  i as commonStyles
+};

package/dist/components/index.d.ts

@@ -21,15 +21,17 @@ import './ds-loader-dots/ds-loader-dots.ts';
 import './ds-loader-logo/ds-loader-logo.ts';
 import './ds-loader-spinner/ds-loader-spinner.ts';
 import './ds-logo/ds-logo.ts';
+import './ds-main-title/ds-main-title.ts';
 import './ds-map-pin/ds-map-pin.ts';
 import './ds-modal/ds-modal.ts';
 import './ds-password-input/ds-password-input.ts';
 import './ds-picker-item/ds-picker-item.ts';
 import './ds-portal/ds-portal.ts';
 import './ds-progress-bar/ds-progress-bar.ts';
+import './ds-radio/ds-radio.ts';
 import './ds-radio-button/ds-radio-button.ts';
 import './ds-radio-group/ds-radio-group.ts';
-import './ds-radio/ds-radio.ts';
+import './ds-rating/ds-rating.ts';
 import './ds-search-input/ds-search-input.ts';
 import './ds-search/ds-search.ts';
 import './ds-secondary-navigation/ds-secondary-navigation.ts';
@@ -54,3 +56,4 @@ import './ds-static-box/ds-static-box.ts';
 import './ds-interactive-card/ds-interactive-card.ts';
 import './ds-radio-button-group/ds-radio-button-group.ts';
 import './ds-sidebar-navigation/ds-sidebar-navigation.ts';
+import './ds-badge/ds-badge.ts';

package/dist/core/theme.constants.d.ts

@@ -0,0 +1 @@
+export declare const THEME_STORAGE_KEY: "@cupra/ui-kit/theme";

package/dist/core/theme.constants.js

@@ -0,0 +1,4 @@
+const t = "@cupra/ui-kit/theme";
+export {
+  t as THEME_STORAGE_KEY
+};