@cupra/ui-kit 1.1.0-canary.2 → 1.1.0-canary.4

package/dist/components/ds-basic-card/ds-basic-card.d.ts

@@ -0,0 +1,9 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import { DsBasicCardAttrs } from './ds-basic-card.types.ts';
+export declare class DsBasicCard extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    variant: DsBasicCardAttrs['variant'];
+    private get classes();
+    protected handleClick(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/ds-basic-card/ds-basic-card.js

@@ -0,0 +1,58 @@
+import { UiKitElement as p } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as m, html as n } 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 u } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+var h = Object.defineProperty, b = Object.getOwnPropertyDescriptor, l = (c, r, a, e) => {
+  for (var t = e > 1 ? void 0 : e ? b(r, a) : r, i = c.length - 1, o; i >= 0; i--)
+    (o = c[i]) && (t = (e ? o(r, a, t) : o(t)) || t);
+  return e && t && h(r, a, t), t;
+};
+let s = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "default";
+  }
+  get classes() {
+    return {
+      "card-wrapper": !0,
+      subgrid: !0,
+      [this.variant]: !!this.variant
+    };
+  }
+  handleClick() {
+    this.dispatchEvent(
+      new Event("ds-basic-card:click", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return n`
+            <article
+                part="card-wrapper"
+                class="${v(this.classes)}"
+                @click=${this.handleClick}
+                data-testid="ds-basic-card-container"
+            >
+                <div>${this.variant === "featured" ? n`<slot name="featured-text"></slot>` : m}</div>
+                <div class="container subgrid">
+                    <slot></slot>
+                </div>
+            </article>
+        `;
+  }
+};
+s.styles = [f];
+l([
+  u({ type: String })
+], s.prototype, "variant", 2);
+s = l([
+  d("ds-basic-card")
+], s);
+export {
+  s as DsBasicCard
+};

package/dist/components/ds-basic-card/ds-basic-card.types.d.ts

@@ -0,0 +1,4 @@
+import { CommonAttrs } from '../../types/types';
+export type DsBasicCardAttrs = {
+    variant?: 'default' | 'featured';
+} & CommonAttrs;

package/dist/components/ds-basic-card/styles/common.styles.d.ts

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

package/dist/components/ds-basic-card/styles/common.styles.js

@@ -0,0 +1,38 @@
+import { cssQueries as r } from "../../../utils/cssQueries.js";
+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 s } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const e = s`
+    :host {
+        row-gap: 0;
+        display: grid;
+        grid-template-rows: subgrid;
+        grid-row: span 7;
+    }
+
+    .subgrid {
+        display: grid;
+        grid-template-rows: subgrid;
+        grid-row: span 7;
+    }
+
+    .container {
+        cursor: pointer;
+        overflow: hidden;
+    }
+
+    ::slotted([slot='featured-text']) {
+        pointer-events: none;
+        padding: var(--dg-spacing-s-5, 8px) var(--dg-spacing-m-2, 16px);
+    }
+
+    ${r.m} {
+        ::slotted([slot='featured-text']) {
+            padding: var(--dg-spacing-s-5, 8px) var(--dg-spacing-m-4, 24px);
+        }
+    }
+`;
+export {
+  e as commonStyles
+};

package/dist/components/ds-basic-card-header/ds-basic-card-header.d.ts

@@ -0,0 +1,7 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+export declare class DsBasicCardHeader extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    protected get dividerTemplate(): any;
+    private get classes();
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/ds-basic-card-header/ds-basic-card-header.js

@@ -0,0 +1,51 @@
+import { UiKitElement as l } from "../base/UiKitElement.js";
+import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as m } 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 { classMap as n } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as c } from "./styles/common.styles.js";
+var h = Object.getOwnPropertyDescriptor, v = (a, s, d, i) => {
+  for (var e = i > 1 ? void 0 : i ? h(s, d) : s, t = a.length - 1, o; t >= 0; t--)
+    (o = a[t]) && (e = o(e) || e);
+  return e;
+};
+let r = class extends l {
+  get dividerTemplate() {
+    return this.componentFactory.createDivider({
+      class: "divider",
+      variant: "secondary"
+    });
+  }
+  get classes() {
+    return {
+      "header-wrapper": !0
+    };
+  }
+  render() {
+    return m`
+            <header
+                part="header-wrapper"
+                class="${n(this.classes)}"
+                data-testid="ds-basic-card-header-container"
+            >
+                <div class="header-content">
+                    <div class="title-wrapper" part="title-container">
+                        <slot name="title" part="title"></slot>
+                        <slot name="description" part="description"></slot>
+                    </div>
+                    <slot name="meta" part="meta"></slot>
+                </div>
+                <slot name="sub-header" part="sub-header"></slot>
+                ${this.dividerTemplate}
+            </header>
+        `;
+  }
+};
+r.styles = [c];
+r = v([
+  p("ds-basic-card-header")
+], r);
+export {
+  r as DsBasicCardHeader
+};

package/dist/components/ds-basic-card-header/ds-basic-card-header.types.d.ts

@@ -0,0 +1,2 @@
+import { CommonAttrs } from '../../types/types';
+export type DsBasicCardHeaderAttrs = {} & CommonAttrs;

package/dist/components/ds-basic-card-header/styles/common.styles.d.ts

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

package/dist/components/ds-basic-card-header/styles/common.styles.js

@@ -0,0 +1,57 @@
+import { cssQueries as p } from "../../../utils/cssQueries.js";
+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 i } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const d = i`
+    :host {
+        padding: var(--dg-spacing-m-2, 16px) var(--dg-spacing-m-2, 16px) 0px var(--dg-spacing-m-2, 16px);
+    }
+
+    .header-wrapper {
+        align-items: flex-start;
+        align-self: stretch;
+        display: flex;
+        flex-direction: column;
+        gap: var(--dg-spacing-m-1, 12px);
+        height: 100%;
+    }
+
+    .header-content {
+        display: flex;
+        gap: var(--dg-spacing-m-1, 8px);
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    .title-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: var(--dg-spacing-s-5, 8px);
+        width: 100%;
+    }
+
+    ::slotted([slot='title']) {
+        width: 100%;
+    }
+
+    ::slotted([slot='sub-header']) {
+        display: flex;
+        gap: var(--dg-spacing-m-1, 12px);
+        flex-direction: column;
+    }
+
+    .divider {
+        margin-top: auto;
+        width: 100%;
+    }
+
+    ${p.m} {
+        :host {
+            padding: var(--dg-spacing-m-2, 16px) var(--dg-spacing-m-4, 24px) 0px var(--dg-spacing-m-4, 24px);
+        }
+    }
+`;
+export {
+  d as commonStyles
+};

package/dist/components/ds-basic-card-image/ds-basic-card-image.d.ts

@@ -0,0 +1,6 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+export declare class DsBasicCardImage extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    private get classes();
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/ds-basic-card-image/ds-basic-card-image.js

@@ -0,0 +1,37 @@
+import { UiKitElement as p } from "../base/UiKitElement.js";
+import { customUiKitElement as l } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as c } 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 { classMap as n } 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 g = Object.getOwnPropertyDescriptor, f = (s, a, o, i) => {
+  for (var r = i > 1 ? void 0 : i ? g(a, o) : a, e = s.length - 1, m; e >= 0; e--)
+    (m = s[e]) && (r = m(r) || r);
+  return r;
+};
+let t = class extends p {
+  get classes() {
+    return {
+      "image-wrapper": !0
+    };
+  }
+  render() {
+    return c`
+            <div
+                part="image-wrapper"
+                class="${n(this.classes)}"
+                data-testid="ds-basic-card-image-container"
+            >
+               <slot></slot>
+            </div>
+        `;
+  }
+};
+t.styles = [d];
+t = f([
+  l("ds-basic-card-image")
+], t);
+export {
+  t as DsBasicCardImage
+};

package/dist/components/ds-basic-card-image/ds-basic-card-image.types.d.ts

@@ -0,0 +1,2 @@
+import { CommonAttrs } from '../../types/types';
+export type DsBasicCardImageAttrs = {} & CommonAttrs;

package/dist/components/ds-basic-card-image/styles/common.styles.d.ts

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

package/dist/components/ds-basic-card-image/styles/common.styles.js

@@ -0,0 +1,13 @@
+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 o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const s = o`
+    :host {
+        height: 100%;
+        width: 100%;
+    }
+`;
+export {
+  s as commonStyles
+};

package/dist/components/ds-basic-card-section/ds-basic-card-section.d.ts

@@ -0,0 +1,10 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import { DsBasicCardSectionAttrs } from './ds-basic-card-section.types.ts';
+export declare class DsBasicCardSection extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    withDivider: DsBasicCardSectionAttrs['divider'];
+    centered: DsBasicCardSectionAttrs['centered'];
+    protected get dividerTemplate(): any;
+    private get classes();
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/ds-basic-card-section/ds-basic-card-section.js

@@ -0,0 +1,52 @@
+import { UiKitElement as d } from "../base/UiKitElement.js";
+import { customUiKitElement as l } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as p } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as v, html as h } 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 f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as u } from "./styles/common.styles.js";
+var y = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (c, r, o, i) => {
+  for (var e = i > 1 ? void 0 : i ? D(r, o) : r, s = c.length - 1, n; s >= 0; s--)
+    (n = c[s]) && (e = (i ? n(r, o, e) : n(e)) || e);
+  return i && e && y(r, o, e), e;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.withDivider = !0, this.centered = !0;
+  }
+  get dividerTemplate() {
+    return this.componentFactory.createDivider({
+      class: "divider",
+      variant: "secondary"
+    });
+  }
+  get classes() {
+    return {
+      container: !0,
+      centered: this.centered
+    };
+  }
+  render() {
+    return h`
+            <div part="container" class=${f(this.classes)} data-testid="ds-basic-card-section-container">
+                <slot></slot>
+            </div>
+            ${this.withDivider ? this.dividerTemplate : v}
+        `;
+  }
+};
+t.styles = [u];
+a([
+  m({ type: Boolean, converter: p })
+], t.prototype, "withDivider", 2);
+a([
+  m({ type: Boolean, converter: p })
+], t.prototype, "centered", 2);
+t = a([
+  l("ds-basic-card-section")
+], t);
+export {
+  t as DsBasicCardSection
+};

package/dist/components/ds-basic-card-section/ds-basic-card-section.types.d.ts

@@ -0,0 +1,5 @@
+import { CommonAttrs } from '../../types/types';
+export type DsBasicCardSectionAttrs = {
+    centered?: boolean;
+    withDivider?: boolean;
+} & CommonAttrs;

package/dist/components/ds-basic-card-section/styles/common.styles.d.ts

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

package/dist/components/ds-basic-card-section/styles/common.styles.js

@@ -0,0 +1,33 @@
+import { cssQueries as i } from "../../../utils/cssQueries.js";
+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 p } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const g = p`
+    :host {
+        display: flex;
+        flex-direction: column;
+        padding: var(--dg-spacing-s-1, 0px) var(--dg-spacing-m-2, 16px);
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--dg-spacing-m-1, 12px);
+        height: 100%;
+        padding: var(--dg-spacing-m-4, 24px) var(--dg-spacing-s-1, 0px);
+    }
+
+    .centered {
+        justify-content: center;
+    }
+
+    ${i.m} {
+        :host {
+            padding: var(--dg-spacing-s-1, 0px) var(--dg-spacing-m-4, 24px);
+        }
+    }
+`;
+export {
+  g as commonStyles
+};

package/dist/components/ds-dialog-fullscreen/ds-dialog-fullscreen.d.ts

@@ -0,0 +1,21 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import { type PropertyValues, nothing } from 'lit';
+import type { DsDialogFullscreenAttrs } from './ds-dialog-fullscreen.types.ts';
+export declare class DsDialogFullscreen extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    open: DsDialogFullscreenAttrs['open'];
+    hasBeenOpened: boolean;
+    hasScroll: boolean;
+    protected content: HTMLInputElement;
+    private resizeObserver;
+    private debouncedCheckScroll;
+    updated(changedProperties: PropertyValues): Promise<void>;
+    handleResizeObserver(): Promise<void>;
+    private get containerClasses();
+    private handleClose;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleKeyDown;
+    private checkScroll;
+    render(): typeof nothing | import("lit").TemplateResult<1>;
+}

package/dist/components/ds-dialog-fullscreen/ds-dialog-fullscreen.js

@@ -0,0 +1,95 @@
+import { UiKitElement as h } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as p } from "../../utils/booleanConverter.js";
+import { debounce as m } from "../../utils/debounce.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as u, 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 v } 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 b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { classMap as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as w } from "./styles/common.styles.js";
+var O = Object.defineProperty, C = Object.getOwnPropertyDescriptor, n = (e, s, i, r) => {
+  for (var t = r > 1 ? void 0 : r ? C(s, i) : s, l = e.length - 1, c; l >= 0; l--)
+    (c = e[l]) && (t = (r ? c(s, i, t) : c(t)) || t);
+  return r && t && O(s, i, t), t;
+};
+let o = class extends h {
+  constructor() {
+    super(...arguments), this.open = !1, this.hasBeenOpened = !1, this.hasScroll = !1, this.debouncedCheckScroll = m({ func: () => this.checkScroll() }), this.handleKeyDown = (e) => {
+      this.open && e.key === "Escape" && this.handleClose();
+    };
+  }
+  async updated(e) {
+    super.updated(e), !this.hasBeenOpened && e.has("open") && this.open && (this.hasBeenOpened = !0), e.has("open") && this.handleResizeObserver(), e.has("open") && this.open && (await this.updateComplete, this.requestUpdate());
+  }
+  async handleResizeObserver() {
+    var e;
+    document.body.style.overflow = this.open ? "hidden" : "", (e = this.resizeObserver) == null || e.disconnect(), this.content && (this.resizeObserver.observe(this.content), await new Promise(requestAnimationFrame), this.checkScroll());
+  }
+  get containerClasses() {
+    return {
+      "container-fullscreen": !0,
+      close: !this.open,
+      "with-scroll": this.open && this.hasScroll
+    };
+  }
+  handleClose() {
+    this.open = !1, this.dispatchEvent(
+      new Event("ds-dialog-fullscreen:close", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown), this.resizeObserver = new ResizeObserver(this.debouncedCheckScroll), this.handleResizeObserver();
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown), document.body.style.overflow = "", (e = this.resizeObserver) == null || e.disconnect();
+  }
+  checkScroll() {
+    var e, s;
+    this.hasScroll = ((e = this.content) == null ? void 0 : e.scrollHeight) > ((s = this.content) == null ? void 0 : s.clientHeight);
+  }
+  render() {
+    return !this.hasBeenOpened && !this.open ? u : f`
+            <style>
+                :host {
+                    display: ${this.open ? "flex" : "none"};
+                }
+            </style>
+
+            <div class=${y(this.containerClasses)}>
+                <dialog ?open=${this.open} data-testid="ds-dialog-fullscreen-container" class="dialog-fullscreen">
+                    <slot name="close-button" @click=${this.handleClose}></slot>
+                    <div class="content-container-fullscreen">
+                        <div tabindex="0" class="content-fullscreen ds-scroll">
+                            <slot @slotchange=${this.handleResizeObserver}></slot>
+                        </div>
+                </dialog>
+            </div>
+        `;
+  }
+};
+o.styles = [w];
+n([
+  v({ type: Boolean, converter: p })
+], o.prototype, "open", 2);
+n([
+  a()
+], o.prototype, "hasBeenOpened", 2);
+n([
+  a()
+], o.prototype, "hasScroll", 2);
+n([
+  b(".content")
+], o.prototype, "content", 2);
+o = n([
+  d("ds-dialog-fullscreen")
+], o);
+export {
+  o as DsDialogFullscreen
+};

package/dist/components/ds-dialog-fullscreen/ds-dialog-fullscreen.types.d.ts

@@ -0,0 +1,4 @@
+import type { CommonAttrs } from '../../types/types';
+export type DsDialogFullscreenAttrs = {
+    open?: boolean;
+} & CommonAttrs;

package/dist/components/ds-dialog-fullscreen/styles/common.styles.d.ts

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

package/dist/components/ds-dialog-fullscreen/styles/common.styles.js

@@ -0,0 +1,88 @@
+import { cssQueries as l } from "../../../utils/cssQueries.js";
+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 c = r`
+    :host {
+        transition: display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
+    }
+
+    .container-fullscreen.close {
+        display: none;
+        opacity: 0;
+    }
+
+    .container-fullscreen {
+        position: fixed;
+        top: 0;
+        left: 0;
+        padding: 0;
+        width: 100dvw;
+        height: 100dvh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: var(--ds-z-index-modal);
+        background-color: var(--dg-color-bg-modal);
+        transition:
+            opacity 0.3s cubic-bezier(0, 0, 0.2, 1),
+            display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
+        opacity: 1;
+        @starting-style {
+            opacity: 0;
+        }
+    }
+
+    .dialog-fullscreen {
+        padding: 0;
+        position: relative;
+    }
+
+    .content-container-fullscreen {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .ds-scroll::-webkit-scrollbar,
+    .ds-scroll-global *::-webkit-scrollbar {
+        appearance: none;
+        display: initial;
+    }
+
+    .ds-scroll::-webkit-scrollbar-thumb,
+    .ds-scroll-global *::-webkit-scrollbar-thumb {
+        border-radius: var(--dg-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--dg-global-opacity-white-70);
+    }
+
+    .ds-scroll::-webkit-scrollbar-track,
+    .ds-scroll-global *::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    ${l.xs} {
+        .ds-scroll::-webkit-scrollbar,
+        .ds-scroll-global *::-webkit-scrollbar {
+            height: 4px;
+            width: 4px;
+        }
+    }
+
+    ${l.m} {
+        .ds-scroll::-webkit-scrollbar,
+        .ds-scroll-global *::-webkit-scrollbar {
+            height: 8px;
+            width: 8px;
+        }
+    }
+`;
+export {
+  c as commonStyles
+};

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

@@ -54,7 +54,7 @@ let m = class extends v {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.1.0-canary.2", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.1.0-canary.4", 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");