@cupra/ui-kit 1.1.0-canary.3 → 1.1.0-canary.5

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-media-control/ds-media-control.d.ts

@@ -0,0 +1,17 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import type { DsMediaControlAttrs } from './ds-media-control.types.ts';
+export declare class DsMediaControl extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    state: DsMediaControlAttrs['state'];
+    size: DsMediaControlAttrs['size'];
+    progress: DsMediaControlAttrs['progress'];
+    private get normalizedProgress();
+    protected get classes(): Record<string, boolean>;
+    private get iconSize();
+    private get iconName();
+    private get iconTemplate();
+    private handleToggle;
+    private onKeyDown;
+    private get progressTemplate();
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/ds-media-control/ds-media-control.js

@@ -0,0 +1,107 @@
+import { UiKitElement as u } 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 { 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 l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as g } 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 y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (e, s, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? v(s, r) : s, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (t = (o ? n(s, r, t) : n(t)) || t);
+  return o && t && y(s, r, t), t;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.state = "pause", this.size = "medium", this.progress = 0, this.handleToggle = (e) => {
+      e.stopPropagation();
+      const s = this.state === "play" ? "pause" : "play";
+      this.state = s;
+      const r = s === "play" ? "ds-media-control:play" : "ds-media-control:pause";
+      this.dispatchEvent(new CustomEvent(r, { bubbles: !0, composed: !0 }));
+    }, this.onKeyDown = (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleToggle(e));
+    };
+  }
+  get normalizedProgress() {
+    const e = Number(this.progress ?? 0);
+    return Number.isNaN(e) ? 0 : Math.min(100, Math.max(0, e));
+  }
+  get classes() {
+    return {
+      container: !0,
+      [this.size]: !!this.size,
+      [this.state]: !!this.state
+    };
+  }
+  get iconSize() {
+    switch (this.size) {
+      case "large":
+        return 24;
+      case "small":
+        return 16;
+      default:
+        return 20;
+    }
+  }
+  get iconName() {
+    return this.state === "play" ? "pause" : "play";
+  }
+  get iconTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this.iconName,
+      size: this.iconSize
+    });
+  }
+  get progressTemplate() {
+    const e = this.size === "large" ? 46 : this.size === "small" ? 30 : 38, r = e / 2 - 2 / 2, o = r - 1, t = 2 * Math.PI * r, a = this.normalizedProgress / 100, n = t.toFixed(3), m = (t * (1 - a)).toFixed(3), h = `${-e / 2} ${-e / 2} ${e} ${e}`;
+    return p`
+            <svg part="progress" class="progress" viewBox="${h}" aria-hidden="true" focusable="false">
+                <circle
+                    class="indicator"
+                    cx="0"
+                    cy="0"
+                    r="${o}"
+                    fill="none"
+                    stroke-dasharray="${n}"
+                    stroke-dashoffset="${m}"
+                    vector-effect="non-scaling-stroke"
+                ></circle>
+            </svg>
+        `;
+  }
+  render() {
+    const e = this.state === "play" ? "pause" : "play";
+    return p`
+            <div
+                part="container"
+                class=${g(this.classes)}
+                role="button"
+                tabindex="0"
+                aria-label=${`${e} media ${this.size}`}
+                @click=${this.handleToggle}
+                @keydown=${this.onKeyDown}
+            >
+                ${this.progressTemplate}
+                ${this.iconTemplate}
+            </div>
+        `;
+  }
+};
+i.styles = [f];
+c([
+  l({ type: String, reflect: !0 })
+], i.prototype, "state", 2);
+c([
+  l({ type: String, reflect: !0 })
+], i.prototype, "size", 2);
+c([
+  l({ type: Number, reflect: !0 })
+], i.prototype, "progress", 2);
+i = c([
+  d("ds-media-control")
+], i);
+export {
+  i as DsMediaControl
+};

package/dist/components/ds-media-control/ds-media-control.test.d.ts

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

package/dist/components/ds-media-control/ds-media-control.types.d.ts

@@ -0,0 +1,8 @@
+import { CommonAttrs } from '../../types/types.ts';
+export type state = 'play' | 'pause';
+export type size = 'large' | 'medium' | 'small';
+export type DsMediaControlAttrs = {
+    state?: state;
+    size?: size;
+    progress?: number;
+} & CommonAttrs;

package/dist/components/ds-media-control/styles/common.styles.d.ts

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

package/dist/components/ds-media-control/styles/common.styles.js

@@ -0,0 +1,54 @@
+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 s = r`
+    :host {
+        display: contents;
+    }
+
+    [part='container'] {
+        position: relative;
+        display: inline-grid;
+        place-items: center;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        background: var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.3));
+        user-select: none;
+        cursor: pointer;
+        outline: none;
+    }
+
+    .container.small {
+        width: 32px;
+        height: 32px;
+    }
+    .container.medium {
+        width: 40px;
+        height: 40px;
+    }
+    .container.large {
+        width: 48px;
+        height: 48px;
+    }
+
+    .progress {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+    }
+
+    .progress .indicator {
+        stroke: var(--ds-icon-color);
+        stroke-width: 1.5px;
+        transform: rotate(-90deg);
+    }
+
+    [part='container']:focus-visible {
+        box-shadow: 0 0 0 2px var(--ds-color-focus-ring, rgba(255, 255, 255, 0.6));
+    }
+`;
+export {
+  s 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.3", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.1.0-canary.5", 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/index.d.ts

@@ -1,6 +1,10 @@
 import './ds-accordion/ds-accordion.ts';
 import './ds-avatar/ds-avatar.ts';
 import './ds-badge/ds-badge.ts';
+import './ds-basic-card/ds-basic-card.ts';
+import './ds-basic-card-image/ds-basic-card-image.ts';
+import './ds-basic-card-header/ds-basic-card-header.ts';
+import './ds-basic-card-section/ds-basic-card-section.ts';
 import './ds-bullets/ds-bullets.ts';
 import './ds-button/ds-button.ts';
 import './ds-carousel-indicator/ds-carousel-indicator.ts';
@@ -59,3 +63,4 @@ import './ds-toast-message/ds-toast-message.ts';
 import './ds-toggle-button/ds-toggle-button.ts';
 import './ds-toggle-switch/ds-toggle-switch.ts';
 import './ds-tooltip/ds-tooltip.ts';
+import './ds-media-control/ds-media-control.ts';