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

package/dist/esm/components/ds-list-item/styles/cupra-diagonal.styles.js

@@ -0,0 +1,112 @@
+import { cssWithTokens as t } from "../../../utils/cssWithTokens.js";
+const o = t`
+    .content {
+        display: flex;
+        align-items: center;
+        padding: var(--dg-size-08) 0;
+        font-family: var(--dg-font-family-base);
+        font-weight: 400;
+        gap: var(--dg-size-08);
+    }
+    
+    .container {
+        display: flex;
+        gap: var(--dg-size-08);
+    }
+    
+    .container-text {
+        padding-right: var(--dg-size-24);
+    }
+    
+    .content.info-variant,
+    .content.action-variant {
+        padding: var(--dg-size-08);
+    }
+    
+    ::slotted([slot="input-left"]),
+    ::slotted([slot="input-right"]) {
+        width: unset;
+    }
+    
+    ::slotted([slot="primary-text"]) {
+        color: var(--dg-global-color-neutral-10);
+    }
+    
+    ::slotted([slot="primary-subtext"]),
+    ::slotted([slot="secondary-text"]),
+    ::slotted([slot="description-text"]) {
+        color: var(--dg-global-color-neutral-60);
+    }
+    
+    ::slotted([slot="description-text"]) {
+        padding-top: var(--dg-size-08);
+    }
+    
+    :host([size="medium"]) ::slotted([slot="image-square"]) {
+        width: var(--dg-size-48);
+        height: var(--dg-size-48);
+    }
+    
+    :host([size="small"]) ::slotted([slot="image-square"]) {
+        width: var(--dg-size-32);
+        height: var(--dg-size-32);
+    }
+    
+    ::slotted([slot="image-wide"]) {
+        object-fit: cover;
+    }
+    
+    :host([size="medium"]) ::slotted([slot="image-wide"]) {
+        width: var(--dg-size-96);
+        height: var(--dg-size-48);
+    }
+    
+    :host([size="small"]) ::slotted([slot="image-wide"]) {
+        width: var(--dg-size-64);
+        height: var(--dg-size-32);
+    }
+    
+    :host([size="small"]) ::slotted([slot="primary-text"]),
+    :host([size="small"]) ::slotted([slot="secondary-text"]),
+    :host([size="small"]) ::slotted([slot="description-text"]),
+    :host([size="small"]) ::slotted([slot="primary-subtext"]),
+    :host([size="small"]) ::slotted([slot="aside"]) {
+        font-size: var(--dg-font-size-body-m);
+        line-height: var(--dg-font-body-xs-medium-line-height);
+    }
+    
+    :host([size="medium"]) ::slotted([slot="primary-text"]),
+    :host([size="medium"]) ::slotted([slot="secondary-text"]),
+    :host([size="medium"]) ::slotted([slot="description-text"]),
+    :host([size="medium"]) ::slotted([slot="primary-subtext"]),
+    :host([size="medium"]) ::slotted([slot="aside"]) {
+        font-size: var(--dg-font-size-body-l);
+        line-height: var(--dg-font-body-s-medium-line-height);
+    }
+    
+    .content:hover {
+        background: var(--dg-color-field-bg-hover);
+    }
+    
+    .content:active {
+        background: var(--dg-button-bg-color-action-pressed);
+    }
+    
+    .content:focus-visible {
+        outline: var(--dg-border-width-02) solid var(--dg-outline-color-focus);
+        background-color: var(--dg-color-field-bg-focus);
+    }
+
+    .selected {
+        background: var(--dg-button-bg-color-action-hover);
+        border-left: var(--dg-size-04) solid var(--dg-color-field-bg-selected);
+    }
+
+    .disabled {
+        opacity: 0.25;
+        pointer-events: none;
+    }
+`;
+export {
+  o as cupraDiagonalStyles
+};

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

@@ -1,30 +1,33 @@
-import { UiKitElement as u } from "../base/UiKitElement.js";
-import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
-import { inputStatesMixin as c } from "../../mixins/inputStatesMixin.js";
-import { validateMaxLength as f } from "../../utils/validateMaxLength.js";
+import { UiKitElement as m } from "../base/UiKitElement.js";
+import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
+import { ViewportMixin as c } from "../../mixins/ViewportMixin.js";
+import { inputStatesMixin as f } from "../../mixins/inputStatesMixin.js";
+import { objectConverter as v } from "../../utils/objectConverter.js";
+import { validateMaxLength as x } from "../../utils/validateMaxLength.js";
 import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as n, nothing as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { html as a, nothing as l } 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 p } 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 x } from "./styles/common.styles.js";
-var g = Object.defineProperty, E = Object.getOwnPropertyDescriptor, a = (r, e, o, i) => {
-  for (var s = i > 1 ? void 0 : i ? E(e, o) : e, h = r.length - 1, d; h >= 0; h--)
-    (d = r[h]) && (s = (i ? d(e, o, s) : d(s)) || s);
-  return i && s && g(e, o, s), s;
+import { classMap as g } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as E } from "./styles/common.styles.js";
+var y = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (t, e, o, i) => {
+  for (var s = i > 1 ? void 0 : i ? S(e, o) : e, h = t.length - 1, d; h >= 0; h--)
+    (d = t[h]) && (s = (i ? d(e, o, s) : d(s)) || s);
+  return i && s && y(e, o, s), s;
 };
-let t = class extends c(u) {
+let r = class extends f(c(m)) {
   constructor() {
     super(...arguments), this.keyboardMode = !1, this.size = "medium", this.helperText = "", this.forcedError = "", this.invalidError = "", this.mode = "light";
   }
-  onInputReady(r) {
-    r.classList.add("ds-scroll");
+  onInputReady(t) {
+    t.classList.add("ds-scroll");
   }
   get classes() {
+    const t = typeof this.size == "string" ? this.size : this.size[this.viewport];
     return {
       container: !0,
       error: !!this.forcedError,
-      [this.size]: !!this.size,
+      [t]: !!t,
       [this.mode]: !!this.mode,
       disabled: this.inputStates.disabled,
       filled: this.inputStates.filled,
@@ -34,8 +37,8 @@ let t = class extends c(u) {
     };
   }
   render() {
-    return n`
-            <div class=${v(this.classes)}>
+    return a`
+            <div class=${g(this.classes)}>
                 <div class="input-container">
                     <slot></slot>
                 </div>
@@ -50,38 +53,38 @@ let t = class extends c(u) {
   }
   get lengthTemplate() {
     var e, o, i;
-    const r = (o = (e = this.nativeInput) == null ? void 0 : e.maxLength) == null ? void 0 : o.toString();
-    return f(r) ? n`<span class="char-counter">${((i = this.inputStates.currentValue) == null ? void 0 : i.length) || 0}/${r}</span>` : l;
+    const t = (o = (e = this.nativeInput) == null ? void 0 : e.maxLength) == null ? void 0 : o.toString();
+    return x(t) ? a`<span class="char-counter">${((i = this.inputStates.currentValue) == null ? void 0 : i.length) || 0}/${t}</span>` : l;
   }
   get helperTextTemplate() {
-    return this.forcedError || this.inputStates.invalid && this.invalidError ? l : n`<span class="support-text helper-text">${this.helperText}</span>`;
+    return this.forcedError || this.inputStates.invalid && this.invalidError ? l : a`<span class="support-text helper-text">${this.helperText}</span>`;
   }
   get forcedErrorTemplate() {
-    return this.forcedError ? n`<span class="support-text error-text forced-error">${this.forcedError}</span>` : l;
+    return this.forcedError ? a`<span class="support-text error-text forced-error">${this.forcedError}</span>` : l;
   }
   get invalidErrorTemplate() {
-    return this.forcedError || !this.inputStates.invalid || !this.invalidError ? l : n`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
+    return this.forcedError || !this.inputStates.invalid || !this.invalidError ? l : a`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
   }
 };
-t.styles = [x];
-a([
-  p({ type: String })
-], t.prototype, "size", 2);
-a([
+r.styles = [E];
+n([
+  p({ type: String, converter: v })
+], r.prototype, "size", 2);
+n([
   p({ type: String, attribute: "helper-text" })
-], t.prototype, "helperText", 2);
-a([
+], r.prototype, "helperText", 2);
+n([
   p({ type: String, attribute: "forced-error" })
-], t.prototype, "forcedError", 2);
-a([
+], r.prototype, "forcedError", 2);
+n([
   p({ type: String, attribute: "invalid-error" })
-], t.prototype, "invalidError", 2);
-a([
+], r.prototype, "invalidError", 2);
+n([
   p({ type: String })
-], t.prototype, "mode", 2);
-t = a([
-  m("ds-textarea")
-], t);
+], r.prototype, "mode", 2);
+r = n([
+  u("ds-textarea")
+], r);
 export {
-  t as DsTextarea
+  r as DsTextarea
 };

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

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

@@ -64,7 +64,9 @@ import "./components/ds-toggle-button/ds-toggle-button.js";
 import "./components/ds-toggle-switch/ds-toggle-switch.js";
 import "./components/ds-tooltip/ds-tooltip.js";
 import "./components/ds-media-control/ds-media-control.js";
-import { iconNames as bo } from "./components/ds-icon/iconNames.js";
+import "./components/ds-list-item/ds-list-item.js";
+import "./components/ds-list/ds-list.js";
+import { iconNames as ho } from "./components/ds-icon/iconNames.js";
 export {
-  bo as iconNames
+  ho as iconNames
 };

package/dist/esm/utils/IconsManager.js

@@ -1,39 +1,39 @@
 import { THEME_STORAGE_KEY as r } from "../core/theme.constants.js";
-import { pubSub as l } from "./PubSub.js";
-class f {
+import { pubSub as f } from "./PubSub.js";
+class l {
   constructor() {
     this.icons = {}, this.handleChangeTheme = (e) => {
       if (this.theme === e) return;
       this.theme = e;
-      const i = Object.keys(this.icons);
-      this.icons = {}, i.forEach((s) => this.fetchIcon(s));
-    }, this.fetchIcon = async (e, i = {}) => {
+      const n = Object.keys(this.icons);
+      this.icons = {}, n.forEach((s) => this.fetchIcon(s));
+    }, this.fetchIcon = async (e, n = {}) => {
       const s = typeof sessionStorage < "u" ? sessionStorage == null ? void 0 : sessionStorage.getItem(r) : null;
       !this.theme && s && (this.theme = s);
       const t = this.icons[e];
       if (t) return await t;
-      const o = this.loadIcon(e, i).catch((a) => {
+      const o = this.loadIcon(e, n).catch((a) => {
         throw delete this.icons[e], a;
       });
       return this.icons[e] = o, o;
-    }, this.loadIcon = (e, { cache: i = "force-cache", ...s }) => this.theme ? fetch == null ? void 0 : fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`, {
-      cache: i,
+    }, this.loadIcon = (e, { cache: n = "force-cache", ...s }) => !this.theme || typeof fetch > "u" ? Promise.resolve('<svg class="ds-icon"></svg>') : fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`, {
+      cache: n,
       ...s
     }).then((t) => t.text()).catch((t) => {
       if ((t == null ? void 0 : t.name) === "AbortError") throw t;
       return console.error(`Failed to fetch icon "${e}":`, t), "";
-    }) : Promise.resolve('<svg class="ds-icon"></svg>'), l.subscribe("theme", this.handleChangeTheme);
+    }), f.subscribe("theme", this.handleChangeTheme);
   }
 }
-const c = Symbol.for("@cupra/ui-kit/icons-manager/1.1.0-canary.13"), h = globalThis;
-let n = h[c];
-n || (n = new f(), Object.defineProperty(h, c, {
-  value: n,
+const c = Symbol.for("@cupra/ui-kit/icons-manager/1.1.0-canary.15"), h = globalThis;
+let i = h[c];
+i || (i = new l(), Object.defineProperty(h, c, {
+  value: i,
   writable: !1,
   configurable: !1,
   enumerable: !1
 }));
-const b = n;
+const g = i;
 export {
-  b as iconsManager
+  g as iconsManager
 };

package/dist/esm/utils/PubSub.js

@@ -18,7 +18,7 @@ class e {
     });
   }
 }
-const u = Symbol.for("@cupra/ui-kit/pubsub/1.1.0-canary.13"), t = globalThis;
+const u = Symbol.for("@cupra/ui-kit/pubsub/1.1.0-canary.15"), t = globalThis;
 let b = t[u];
 b || (b = new e(), Object.defineProperty(t, u, {
   value: b,

package/dist/esm/utils/StylesRegistry/StylesRegistry.js

@@ -5,15 +5,16 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/1.1.0-canary.13/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
-      if (r) return r;
-      const i = this.fetchStyle({ url: c }).then((n) => (n || this.stylePromises.delete(c), n));
-      return this.stylePromises.set(c, i), this.stylePromises.get(c);
+      const r = `https://ds-assets.cupra.com/1.1.0-canary.15/styles/${t}/components/${e}.css`, c = this.getCachedStyleSheetPromise({ url: r });
+      if (c) return c;
+      const i = this.fetchStyle({ url: r }).then((n) => (n || this.stylePromises.delete(r), n));
+      return this.stylePromises.set(r, i), this.stylePromises.get(r);
     };
   }
   async fetchStyle({ url: e }) {
     try {
-      const t = await (fetch == null ? void 0 : fetch(e, { cache: "force-cache" }));
+      if (typeof fetch > "u") return;
+      const t = await fetch(e, { cache: "force-cache" });
       if (t.ok) return t.text();
     } catch (t) {
       console.error(`Failed to fetch Style Sheet "${e}":`, t);

package/dist/esm/utils/cssWithTokens.js

@@ -3,7 +3,7 @@ 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 { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-13"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-15"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist/esm/utils/htmlWithTokens.js

@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 function x(t, ...r) {
-  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-13"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-15"), e = i(o);
   return n`${e}`;
 }
 export {

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

@@ -0,0 +1,10 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+export declare class DsList extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    size: 'small' | 'medium';
+    protected get classes(): {
+        [x: string]: boolean;
+        'ds-list': boolean;
+    };
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/types/components/ds-list/ds-list.test.d.ts

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

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

@@ -0,0 +1,4 @@
+import type { CommonAttrs } from '../../types/types';
+export interface DsListAttrs extends CommonAttrs {
+    size?: 'small' | 'medium';
+}

package/dist/types/components/ds-list/styles/common.styles.d.ts

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

package/dist/types/components/ds-list/styles/cupra-diagonal.styles.d.ts

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

package/dist/types/components/ds-list-item/ds-list-item.d.ts

@@ -0,0 +1,20 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+export declare class DsListItem extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    variant: 'selection' | 'action' | 'info';
+    selected: boolean;
+    disabled: boolean;
+    size: 'small' | 'medium';
+    protected get classes(): {
+        [x: string]: boolean;
+        content: boolean;
+        selected: boolean;
+        disabled: boolean;
+    };
+    connectedCallback(): void;
+    private renderSelectionTemplate;
+    private renderActionTemplate;
+    private renderInfoTemplate;
+    private renderByTemplate;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/types/components/ds-list-item/ds-list-item.test.d.ts

@@ -0,0 +1,8 @@
+import type { DsListItem } from './ds-list-item';
+import './ds-list-item';
+import '../ds-list/ds-list';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-list-item': DsListItem;
+    }
+}

package/dist/types/components/ds-list-item/ds-list-item.types.d.ts

@@ -0,0 +1,7 @@
+import type { CommonAttrs } from '../../types/types';
+export interface DsListItemAttrs extends CommonAttrs {
+    variant?: 'selection' | 'action' | 'info';
+    selected?: boolean;
+    disabled?: boolean;
+    size?: 'small' | 'medium';
+}

package/dist/types/components/ds-list-item/styles/common.styles.d.ts

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

package/dist/types/components/ds-list-item/styles/cupra-diagonal.styles.d.ts

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

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

@@ -1,7 +1,7 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
 import { nothing } from 'lit';
 import type { DsTextareaAttrs } from './ds-textarea.types.ts';
-declare const DsTextarea_base: (new (...args: any[]) => import("../../mixins/inputStatesMixin.ts").InputStatesInterface) & typeof UiKitElement;
+declare const DsTextarea_base: (new (...args: any[]) => import("../../mixins/inputStatesMixin.ts").InputStatesInterface) & (new (...args: any[]) => import("../../mixins/ViewportMixin.ts").ViewportInterface) & typeof UiKitElement;
 export declare class DsTextarea extends DsTextarea_base {
     static styles: import("lit").CSSResult[];
     private keyboardMode;

package/dist/types/components/index.d.ts

@@ -64,3 +64,5 @@ 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';
+import './ds-list-item/ds-list-item.ts';
+import './ds-list/ds-list.ts';

package/dist-react/cjs/components/ds-list/ds-list.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../base/UiKitElement.cjs"),c=require("../../decorators/customUiKitElement.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const m=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),p=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),v=require("./styles/common.styles.cjs"),y=require("./styles/cupra-diagonal.styles.cjs");var D=Object.defineProperty,d=Object.getOwnPropertyDescriptor,n=(r,t,i,s)=>{for(var e=s>1?void 0:s?d(t,i):t,l=r.length-1,o;l>=0;l--)(o=r[l])&&(e=(s?o(t,i,e):o(e))||e);return s&&e&&D(t,i,e),e};exports.DsList=class extends u.UiKitElement{constructor(){super(...arguments),this.size="medium"}get classes(){return{"ds-list":!0,[`size-${this.size}`]:!0}}render(){return a.html`
+            <div class=${p.classMap(this.classes)}>
+                <slot name="title"></slot>
+                <slot name="subtitle"></slot>
+                <div role="list">
+                    <slot name="list-item"></slot>
+                </div>
+            </div>
+        `}};exports.DsList.styles=[v.commonStyles,y.cupraDiagonalStyles];n([m.property({type:String,reflect:!0})],exports.DsList.prototype,"size",2);exports.DsList=n([c.customUiKitElement("ds-list")],exports.DsList);

package/dist-react/cjs/components/ds-list/styles/common.styles.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../utils/cssWithTokens.cjs"),o=t.cssWithTokens`
+    :host {
+        display: block;
+        width: fit-content;
+        padding: 16px 0;
+    }
+`;exports.commonStyles=o;

package/dist-react/cjs/components/ds-list/styles/cupra-diagonal.styles.cjs

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../utils/cssWithTokens.cjs"),e=t.cssWithTokens`
+    .ds-list {
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--dg-size-16);
+        font-family: var(--dg-font-family-base);
+    }
+
+    ::slotted([slot="title"]) {
+        color: var(--dg-global-color-neutral-10);
+        font-weight: 400;
+    }
+
+    ::slotted([slot="subtitle"]) {
+        color: var(--dg-global-color-neutral-60);
+        font-weight: 400;
+    }
+    
+    :host([size="small"]) ::slotted([slot="title"]) {
+        font-size: var(--dg-font-size-body-m);
+        line-height: var(--dg-font-body-xs-medium-line-height);
+    }
+
+    :host([size="medium"]) ::slotted([slot="title"]) {
+        font-size: var(--dg-font-size-body-l);
+        line-height: var(--dg-font-body-s-medium-line-height);
+    }
+
+    :host([size="small"]) ::slotted([slot="subtitle"]) {
+        font-size: var(--dg-font-size-body-m);
+        line-height: var(--dg-font-body-xs-medium-line-height);
+    }
+
+    :host([size="medium"]) ::slotted([slot="subtitle"]) {
+        font-size: var(--dg-font-size-body-l);
+        line-height: var(--dg-font-body-s-medium-line-height);
+    }
+`;exports.cupraDiagonalStyles=e;

package/dist-react/cjs/components/ds-list-item/ds-list-item.cjs

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../base/UiKitElement.cjs"),d=require("../../decorators/customUiKitElement.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const s=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const l=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),p=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),u=require("./styles/common.styles.cjs"),h=require("./styles/cupra-diagonal.styles.cjs");var y=Object.defineProperty,v=Object.getOwnPropertyDescriptor,r=(o,t,i,n)=>{for(var e=n>1?void 0:n?v(t,i):t,a=o.length-1,c;a>=0;a--)(c=o[a])&&(e=(n?c(t,i,e):c(e))||e);return n&&e&&y(t,i,e),e};exports.DsListItem=class extends m.UiKitElement{constructor(){super(...arguments),this.variant="selection",this.selected=!1,this.disabled=!1,this.size="medium"}get classes(){return{content:!0,[this.size]:!0,[`${this.variant}-variant`]:!0,selected:this.selected,disabled:this.disabled}}connectedCallback(){var t;if((t=super.connectedCallback)==null||t.call(this),!this.hasAttribute("size")){const i=this.closest("ds-list");i&&(this.size=i.size)}}renderSelectionTemplate(){return s.html`
+            <slot name="input-left"></slot>
+            <slot name="icon"></slot>
+            <div class="container-text">
+                <slot name="primary-text"></slot>
+                <slot name="description-text"></slot>
+            </div>
+            <slot name="secondary-text"></slot>
+            <slot name="input-right"></slot>
+        `}renderActionTemplate(){return s.html`
+            <slot name="image-square"></slot>
+            <slot name="image-wide"></slot>
+            <slot name="icon-left"></slot>
+            <div class="container-text">
+                <slot name="primary-text"></slot>
+                <slot name="description-text"></slot>
+            </div>
+            <slot name="secondary-text"></slot>
+            <slot name="icon-right"></slot>
+        `}renderInfoTemplate(){return s.html`
+            <slot name="icon"></slot>
+            <div class="container-text">
+                <div class="container">
+                    <slot name="primary-text"></slot>
+                    <slot name="primary-subtext"></slot>
+                </div>
+                <slot name="description-text"></slot>
+            </div>
+            <slot name="aside"></slot>
+        `}renderByTemplate(){switch(this.variant){case"selection":return this.renderSelectionTemplate();case"action":return this.renderActionTemplate();case"info":return this.renderInfoTemplate();default:return s.nothing}}render(){const t=this.variant!=="info";return s.html`
+            <li class=${p.classMap(this.classes)} role="listitem" tabindex="0" ?aria-disabled=${this.disabled}>
+                ${this.renderByTemplate()}
+            </li>
+
+            ${t?s.html`<ds-divider orientation="horizontal" variant="primary"></ds-divider>`:s.nothing}
+        `}};exports.DsListItem.styles=[u.commonStyles,h.cupraDiagonalStyles];r([l.property({type:String,reflect:!0})],exports.DsListItem.prototype,"variant",2);r([l.property({type:Boolean,reflect:!0})],exports.DsListItem.prototype,"selected",2);r([l.property({type:Boolean,reflect:!0})],exports.DsListItem.prototype,"disabled",2);r([l.property({type:String,reflect:!0})],exports.DsListItem.prototype,"size",2);exports.DsListItem=r([d.customUiKitElement("ds-list-item")],exports.DsListItem);

package/dist-react/cjs/components/ds-list-item/styles/common.styles.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../utils/cssWithTokens.cjs"),o=t.cssWithTokens`
+    :host {
+        display: block;
+        width: fit-content;
+    }
+`;exports.commonStyles=o;