@cupra/ui-kit 2.0.0-canary.23 → 2.0.0-canary.231

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

@@ -1,112 +1,123 @@
-import { cssWithTokens as t } from "../../../utils/cssWithTokens.js";
-const o = t`
-    .content {
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-list-item/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .content {
         display: flex;
         align-items: center;
-        padding: var(--dg-size-08) 0;
-        font-family: var(--dg-font-family-base);
+        padding: var(--ds-sizing-08) 0;
+        font-family: var(--ds-typography-family-primary);
         font-weight: 400;
-        gap: var(--dg-size-08);
+        gap: var(--ds-sizing-08);
     }
-    
-    .container {
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
         display: flex;
-        gap: var(--dg-size-08);
+        gap: var(--ds-sizing-08);
     }
-    
-    .container-text {
-        padding-right: var(--dg-size-24);
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container-text {
+        padding-right: var(--ds-sizing-24);
     }
-    
-    .content.info-variant,
-    .content.action-variant {
-        padding: var(--dg-size-08);
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .content.info-variant,
+    :host([data-ui-kit-theme='cupra-diagonal']) .content.action-variant {
+        padding: var(--ds-sizing-08);
     }
-    
-    ::slotted([slot="input-left"]),
-    ::slotted([slot="input-right"]) {
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='input-left']),
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='input-right']) {
         width: unset;
     }
-    
-    ::slotted([slot="primary-text"]) {
-        color: var(--dg-global-color-neutral-10);
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='primary-text']) {
+        color: var(--ds-color-neutral-10);
     }
-    
-    ::slotted([slot="primary-subtext"]),
-    ::slotted([slot="secondary-text"]),
-    ::slotted([slot="description-text"]) {
-        color: var(--dg-global-color-neutral-60);
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='primary-subtext']),
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='secondary-text']),
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='description-text']) {
+        color: var(--ds-color-neutral-60);
     }
-    
-    ::slotted([slot="description-text"]) {
-        padding-top: var(--dg-size-08);
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='description-text']) {
+        padding-top: var(--ds-sizing-08);
     }
-    
-    :host([size="medium"]) ::slotted([slot="image-square"]) {
-        width: var(--dg-size-48);
-        height: var(--dg-size-48);
+
+    :host([size='large'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='image-square']) {
+        width: var(--ds-sizing-48);
+        height: var(--ds-sizing-48);
     }
-    
-    :host([size="small"]) ::slotted([slot="image-square"]) {
-        width: var(--dg-size-32);
-        height: var(--dg-size-32);
+
+    :host([size='medium'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='image-square']) {
+        width: var(--ds-sizing-32);
+        height: var(--ds-sizing-32);
     }
-    
-    ::slotted([slot="image-wide"]) {
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='image-wide']) {
+        -o-object-fit: cover;
         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 {
+
+    :host([size='large'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='image-wide']) {
+        width: var(--ds-sizing-96);
+        height: var(--ds-sizing-48);
+    }
+
+    :host([size='medium'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='image-wide']) {
+        width: var(--ds-sizing-64);
+        height: var(--ds-sizing-32);
+    }
+
+    :host([size='medium'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='primary-text']),
+    :host([size='medium'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='secondary-text']),
+    :host([size='medium'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='description-text']),
+    :host([size='medium'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='primary-subtext']),
+    :host([size='medium'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    :host([size='large'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='primary-text']),
+    :host([size='large'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='secondary-text']),
+    :host([size='large'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='description-text']),
+    :host([size='large'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='primary-subtext']),
+    :host([size='large'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    :host([size='small'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='primary-text']),
+    :host([size='small'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='secondary-text']),
+    :host([size='small'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='description-text']),
+    :host([size='small'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='primary-subtext']),
+    :host([size='small'][data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .content:hover {
+        background: var(--ds-color-control-bg-hover);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .content:active {
+        background: var(--ds-color-control-bg-pressed);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .content:focus-visible {
+        outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        background-color: var(--ds-color-control-bg-hover);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .selected {
+        background: var(--ds-color-control-bg-default);
+        border-left: var(--ds-sizing-04) solid var(--ds-color-border-selected);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled {
         opacity: 0.25;
         pointer-events: none;
     }
 `;
-export {
-  o as cupraDiagonalStyles
-};
+//#endregion
+export { t as cupraDiagonalStyles };

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

@@ -0,0 +1,123 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-list-item/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .content {
+        display: flex;
+        align-items: center;
+        padding: var(--ds-sizing-08) 0;
+        font-family: var(--ds-typography-family-primary);
+        font-weight: 400;
+        gap: var(--ds-sizing-08);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        display: flex;
+        gap: var(--ds-sizing-08);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container-text {
+        padding-right: var(--ds-sizing-24);
+    }
+
+    :host([data-ui-kit-theme='seat']) .content.info-variant,
+    :host([data-ui-kit-theme='seat']) .content.action-variant {
+        padding: var(--ds-sizing-08);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='input-left']),
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='input-right']) {
+        width: unset;
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='primary-text']) {
+        color: var(--ds-color-text-default-subtlest, #484848);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='primary-subtext']),
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='secondary-text']),
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='description-text']) {
+        color: var(--ds-color-text-default-subtle, #565656);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='description-text']) {
+        padding-top: var(--ds-sizing-08);
+    }
+
+    :host([size='large'][data-ui-kit-theme='seat']) ::slotted([slot='image-square']) {
+        width: var(--ds-sizing-48);
+        height: var(--ds-sizing-48);
+    }
+
+    :host([size='medium'][data-ui-kit-theme='seat']) ::slotted([slot='image-square']) {
+        width: var(--ds-sizing-32);
+        height: var(--ds-sizing-32);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='image-wide']) {
+        -o-object-fit: cover;
+        object-fit: cover;
+    }
+
+    :host([size='large'][data-ui-kit-theme='seat']) ::slotted([slot='image-wide']) {
+        width: var(--ds-sizing-96);
+        height: var(--ds-sizing-48);
+    }
+
+    :host([size='medium'][data-ui-kit-theme='seat']) ::slotted([slot='image-wide']) {
+        width: var(--ds-sizing-64);
+        height: var(--ds-sizing-32);
+    }
+
+    :host([size='medium'][data-ui-kit-theme='seat']) ::slotted([slot='primary-text']),
+    :host([size='medium'][data-ui-kit-theme='seat']) ::slotted([slot='secondary-text']),
+    :host([size='medium'][data-ui-kit-theme='seat']) ::slotted([slot='description-text']),
+    :host([size='medium'][data-ui-kit-theme='seat']) ::slotted([slot='primary-subtext']),
+    :host([size='medium'][data-ui-kit-theme='seat']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    :host([size='large'][data-ui-kit-theme='seat']) ::slotted([slot='primary-text']),
+    :host([size='large'][data-ui-kit-theme='seat']) ::slotted([slot='secondary-text']),
+    :host([size='large'][data-ui-kit-theme='seat']) ::slotted([slot='description-text']),
+    :host([size='large'][data-ui-kit-theme='seat']) ::slotted([slot='primary-subtext']),
+    :host([size='large'][data-ui-kit-theme='seat']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    :host([size='small'][data-ui-kit-theme='seat']) ::slotted([slot='primary-text']),
+    :host([size='small'][data-ui-kit-theme='seat']) ::slotted([slot='secondary-text']),
+    :host([size='small'][data-ui-kit-theme='seat']) ::slotted([slot='description-text']),
+    :host([size='small'][data-ui-kit-theme='seat']) ::slotted([slot='primary-subtext']),
+    :host([size='small'][data-ui-kit-theme='seat']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    :host([data-ui-kit-theme='seat']) .content:hover {
+        background: var(--ds-color-control-bg-hover);
+    }
+
+    :host([data-ui-kit-theme='seat']) .content:active {
+        background: var(--ds-color-control-bg-pressed);
+    }
+
+    :host([data-ui-kit-theme='seat']) .content:focus-visible {
+        outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        background-color: var(--ds-color-control-bg-hover);
+    }
+
+    :host([data-ui-kit-theme='seat']) .selected {
+        background: var(--ds-color-control-bg-default);
+        border-left: var(--ds-sizing-04) solid var(--ds-color-border-selected);
+    }
+
+    :host([data-ui-kit-theme='seat']) .disabled {
+        opacity: 0.25;
+        pointer-events: none;
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist/esm/components/ds-loader-bar/ds-loader-bar.js

@@ -1,23 +1,16 @@
-import { DsBaseProgressBar as l } from "../base/ds-base-progress-bar/ds-base-progress-bar.js";
-import { customUiKitElement as i } 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 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 { commonStyles as f } from "./styles/common.styles.js";
-var _ = Object.getOwnPropertyDescriptor, c = Object.getPrototypeOf, g = Reflect.get, v = (r, t, s, m) => {
-  for (var o = m > 1 ? void 0 : m ? _(t, s) : t, a = r.length - 1, p; a >= 0; a--)
-    (p = r[a]) && (o = p(o) || o);
-  return o;
-}, u = (r, t, s) => g(c(r), s, t);
-let e = class extends l {
-  render() {
-    return this.show ? this.barTemplate : n;
-  }
-};
-e.styles = [...u(e, e, "styles"), f];
-e = v([
-  i("ds-loader-bar", { skipTagAsComponentName: !0 })
-], e);
-export {
-  e as DsLoaderBar
-};
+import { nothing as e } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+import t from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import { customUiKitElement as n } from "../../decorators/customUiKitElement.js";
+import { DsBaseProgressBar as r } from "../base/ds-base-progress-bar/ds-base-progress-bar.js";
+import { commonStyles as i } from "./styles/common.styles.js";
+import a from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/superPropGet.js";
+//#region src/components/ds-loader-bar/ds-loader-bar.ts
+var o = class extends r {
+	render() {
+		return this.show ? this.barTemplate : e;
+	}
+}, s = (o.styles = [...a(o, "styles", o), i], o);
+s = t([n("ds-loader-bar")], s);
+//#endregion
+export { s as DsLoaderBar };

package/dist/esm/components/ds-loader-bar/styles/common.styles.js

@@ -1,8 +1,7 @@
-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 n = r`
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-loader-bar/styles/common.styles.ts
+var t = e`
     .fill {
         width: 33%;
         transform: translateX(-100%);
@@ -18,6 +17,5 @@ const n = r`
         }
     }
 `;
-export {
-  n as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist/esm/components/ds-loader-dots/ds-loader-dots.js

@@ -1,62 +1,63 @@
-import { UiKitElement as a } from "../base/UiKitElement.js";
-import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as h } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as c } from "../../utils/htmlWithTokens.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as f, html as v } 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 y } 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 g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (n, s, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? _(s, i) : s, m = n.length - 1, l; m >= 0; m--)
-    (l = n[m]) && (t = (o ? l(s, i, t) : l(t)) || t);
-  return o && t && g(s, i, t), t;
-};
-let e = class extends a {
-  constructor() {
-    super(...arguments), this.show = !1, this.mode = "light", this.size = "large";
-  }
-  get classes() {
-    return {
-      container: !0,
-      [this.size]: !0,
-      [this.mode]: !!this.mode
-    };
-  }
-  get styleTokens() {
-    return c`
+import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
+import r from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import { classMap as s } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
+import { ifDefined as c } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.js";
+import { commonStyles as l } from "./styles/common.styles.js";
+import { cupraStyles as u } from "./styles/cupra.styles.js";
+//#region src/components/ds-loader-dots/ds-loader-dots.ts
+var d = class extends i {
+	constructor(...e) {
+		super(...e), this.show = !1, this.mode = "light", this.size = "large";
+	}
+	get classes() {
+		return {
+			container: !0,
+			[this.size]: !0,
+			[this.mode]: !!this.mode
+		};
+	}
+	get styleTokens() {
+		return e`
                 <style>
                     :host {
                         color-scheme: ${this.mode};
                     }
                 </style>
         `;
-  }
-  render() {
-    return this.show ? v`
+	}
+	render() {
+		return this.show ? e`
                   ${this.styleTokens}
-                  <div class=${y(this.classes)}>
+                  <div
+                      class=${s(this.classes)}
+                      role=${c(this.dataAriaLabel ? "img" : void 0)}
+                      aria-label=${c(this.dataAriaLabel)}
+                      aria-hidden=${c(this.dataAriaLabel ? void 0 : "true")}
+                  >
                       <div class="dot first"></div>
                       <div class="dot middle"></div>
                       <div class="dot last"></div>
                   </div>
-              ` : f;
-  }
-};
-e.styles = [u];
-r([
-  p({ type: Boolean, converter: h })
-], e.prototype, "show", 2);
-r([
-  p({ type: String, reflect: !0 })
-], e.prototype, "mode", 2);
-r([
-  p({ type: String })
-], e.prototype, "size", 2);
-e = r([
-  d("ds-loader-dots")
-], e);
-export {
-  e as DsLoaderDots
-};
+              ` : t;
+	}
+}, f = (d.styles = [l, u], d);
+r([n({
+	type: Boolean,
+	converter: o
+})], f.prototype, "show", void 0), r([n({
+	type: String,
+	reflect: !0
+})], f.prototype, "mode", void 0), r([n({ type: String })], f.prototype, "size", void 0), r([n({
+	type: String,
+	attribute: "data-aria-label"
+})], f.prototype, "dataAriaLabel", void 0), f = r([a("ds-loader-dots")], f);
+//#endregion
+export { f as DsLoaderDots };

package/dist/esm/components/ds-loader-dots/styles/common.styles.js

@@ -1,19 +1,21 @@
-import { cssWithTokens as i } from "../../../utils/cssWithTokens.js";
-const t = i`
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-loader-dots/styles/common.styles.ts
+var t = e`
     .container {
         display: inline-flex;
         justify-content: center;
         align-items: center;
     }
-    
+
     .dot.middle {
         animation-delay: 0.4s;
     }
-    
+
     .dot.last {
         animation-delay: 0.8s;
     }
-    
+
     .dot {
         border-radius: 50%;
         animation-name: loader;
@@ -24,12 +26,19 @@ const t = i`
     }
 
     @keyframes loader {
-        0% { opacity: 1 }
-        18% { opacity: 0.2 }
-        82% { opacity: 0.6 }
-        100% { opacity: 1 }
+        0% {
+            opacity: 1;
+        }
+        18% {
+            opacity: 0.2;
+        }
+        82% {
+            opacity: 0.6;
+        }
+        100% {
+            opacity: 1;
+        }
     }
 `;
-export {
-  t as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist/esm/components/ds-loader-dots/styles/cupra.styles.js

@@ -0,0 +1,34 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-loader-dots/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container.large {
+        gap: 0.375rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .container.medium {
+        gap: 0.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .container.small {
+        gap: 0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .large .dot {
+        width: 1rem;
+        height: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .medium .dot {
+        width: 0.75rem;
+        height: 0.75rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .small .dot {
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .dot {
+        background-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .dot {
+        background-color: var(--ds-color-white);
+    }
+`;
+//#endregion
+export { t as cupraStyles };