@cupra/ui-kit 2.0.0-canary.230 → 2.0.0-canary.232

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

@@ -6,8 +6,9 @@ import { customUiKitElement as r } from "../../decorators/customUiKitElement.js"
 import { classMap as i } 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 { commonStyles as a } from "./styles/common.styles.js";
+import { seatLegacyStyles as o } from "./styles/seat-legacy.styles.js";
 //#region src/components/ds-basic-card-image/ds-basic-card-image.ts
-var o = class extends n {
+var s = class extends n {
 	get classes() {
 		return { "image-wrapper": !0 };
 	}
@@ -22,7 +23,7 @@ var o = class extends n {
             </div>
         `;
 	}
-}, s = (o.styles = [a], o);
-s = t([r("ds-basic-card-image")], s);
+}, c = (s.styles = [a, o], s);
+c = t([r("ds-basic-card-image")], c);
 //#endregion
-export { s as DsBasicCardImage };
+export { c as DsBasicCardImage };

package/dist-react/esm/components/ds-basic-card-image/styles/seat-legacy.styles.js

@@ -0,0 +1,10 @@
+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-basic-card-image/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='image']) {
+        background: var(--dg-global-color-pure-white-100, #ffffff);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

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

@@ -11,8 +11,11 @@ import { classMap as c } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modu
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
 import "../ds-divider/ds-divider.js";
 import { commonStyles as l } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as u } from "./styles/cupra-diagonal.styles.js";
+import { seatLegacyStyles as d } from "./styles/seat-legacy.styles.js";
+import { seatStyles as f } from "./styles/seat.styles.js";
 //#region src/components/ds-basic-card-section/ds-basic-card-section.ts
-var u = class extends i {
+var p = class extends i {
 	constructor(...e) {
 		super(...e), this.withDivider = !0, this.centered = !0;
 	}
@@ -33,13 +36,18 @@ var u = class extends i {
             ${this.withDivider ? this.dividerTemplate : t}
         `;
 	}
-}, d = (u.styles = [l], u);
+}, m = (p.styles = [
+	l,
+	u,
+	f,
+	d
+], p);
 r([n({
 	type: Boolean,
 	converter: o
-})], d.prototype, "withDivider", void 0), r([n({
+})], m.prototype, "withDivider", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], d.prototype, "centered", void 0), d = r([a("ds-basic-card-section")], d);
+})], m.prototype, "centered", void 0), m = r([a("ds-basic-card-section")], m);
 //#endregion
-export { d as DsBasicCardSection };
+export { m as DsBasicCardSection };

package/dist-react/esm/components/ds-basic-card-section/styles/cupra-diagonal.styles.js

@@ -0,0 +1,29 @@
+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-basic-card-section/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) {
+        padding: var(--ds-spacing-s-1, 0px) var(--ds-spacing-m-2, 16px);
+        color: var(--ds-color-text-default);
+        font: 350 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        gap: var(--ds-spacing-m-1, 12px);
+        padding: var(--ds-spacing-m-4, 24px) var(--ds-spacing-s-1, 0px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .divider {
+        background-image: linear-gradient(90deg, var(--ds-opacity-white-30) 40%, var(--ds-opacity-grey-00) 100%);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) {
+            padding: var(--ds-spacing-s-1, 0px) var(--ds-spacing-m-4, 24px);
+        }
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist-react/esm/components/ds-basic-card-section/styles/seat-legacy.styles.js

@@ -0,0 +1,32 @@
+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-basic-card-section/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) {
+        padding: var(--dg-spacing-s-1, 0px) var(--dg-spacing-m-2, 16px);
+        color: var(--dg-color-text-strong);
+        font: 350 var(--dg-font-size-body-l) / var(--dg-font-height-body-l) var(--dg-font-family-base);
+        letter-spacing: var(--dg-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        gap: var(--dg-spacing-m-1, 12px);
+        padding: var(--dg-spacing-m-4, 24px) var(--dg-spacing-s-1, 0px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .divider {
+        background-image: linear-gradient(
+            90deg,
+            var(--dg-global-opacity-white-30) 40%,
+            var(--dg-global-opacity-grey-00) 100%
+        );
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat-legacy']) {
+            padding: var(--dg-spacing-s-1, 0px) var(--dg-spacing-m-4, 24px);
+        }
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

package/dist-react/esm/components/ds-basic-card-section/styles/seat.styles.js

@@ -0,0 +1,29 @@
+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-basic-card-section/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) {
+        padding: var(--ds-spacing-s-1, 0px) var(--ds-spacing-m-2, 16px);
+        color: var(--ds-color-text-default);
+        font: 350 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        gap: var(--ds-spacing-m-1, 12px);
+        padding: var(--ds-spacing-m-4, 24px) var(--ds-spacing-s-1, 0px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .divider {
+        background-image: linear-gradient(90deg, var(--ds-opacity-white-30) 40%, var(--ds-opacity-grey-00) 100%);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat']) {
+            padding: var(--ds-spacing-s-1, 0px) var(--ds-spacing-m-4, 24px);
+        }
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist-react/esm/components/ds-breadcrumbs/ds-breadcrumbs.js

@@ -1,9 +1,9 @@
 import { nothing as e } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as t } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
-import { state as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import { state as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import n from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as r } from "../base/UiKitElement.js";
+import r from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
 import "../ds-icon/ds-icon.js";
 import { uiKitHtml as a } from "../../utils/uiKitHtml.js";
@@ -21,7 +21,7 @@ var u, d = [{
 }, {
 	below: 1024,
 	maxItems: 4
-}], f = 5, p = (u = class extends r {
+}], f = 5, p = (u = class extends t {
 	constructor(...e) {
 		super(...e), this.items = [], this.maxItems = f, this.itemTag = "ds-breadcrumbs-item", this.onResize = () => {
 			let e = d.find(({ below: e }) => window.innerWidth < e);
@@ -116,6 +116,6 @@ var u, d = [{
         `;
 	}
 }, u.styles = [l], u);
-n([t()], p.prototype, "items", void 0), n([t()], p.prototype, "maxItems", void 0), n([t()], p.prototype, "itemTag", void 0), p = n([i("ds-breadcrumbs")], p);
+r([n()], p.prototype, "items", void 0), r([n()], p.prototype, "maxItems", void 0), r([n()], p.prototype, "itemTag", void 0), p = r([i("ds-breadcrumbs")], p);
 //#endregion
 export { p as DsBreadcrumbs };

package/dist-react/esm/components/ds-breadcrumbs-item/ds-breadcrumbs-item.js

@@ -1,16 +1,16 @@
 import { html as e } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as t } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
-import { property as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.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 n from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as r } from "../base/UiKitElement.js";
+import r from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as a } from "../../utils/booleanConverter.js";
 import { classMap as o } 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 { commonStyles as s } from "./styles/common.styles.js";
 //#region src/components/ds-breadcrumbs-item/ds-breadcrumbs-item.ts
-var c = class extends r {
+var c = class extends t {
 	constructor(...e) {
 		super(...e), this.selected = !1, this.disabled = !1, this.loading = !1;
 	}
@@ -31,18 +31,18 @@ var c = class extends r {
         `;
 	}
 }, l = (c.styles = [s], c);
-n([t({
+r([n({
 	type: Boolean,
 	converter: a,
 	reflect: !0
-})], l.prototype, "selected", void 0), n([t({
+})], l.prototype, "selected", void 0), r([n({
 	type: Boolean,
 	converter: a,
 	reflect: !0
-})], l.prototype, "disabled", void 0), n([t({
+})], l.prototype, "disabled", void 0), r([n({
 	type: Boolean,
 	converter: a,
 	reflect: !0
-})], l.prototype, "loading", void 0), l = n([i("ds-breadcrumbs-item")], l);
+})], l.prototype, "loading", void 0), l = r([i("ds-breadcrumbs-item")], l);
 //#endregion
 export { l as DsBreadcrumbsItem };

package/dist-react/esm/components/ds-bullets/ds-bullets.js

@@ -8,8 +8,9 @@ import { customUiKitElement as a } from "../../decorators/customUiKitElement.js"
 import { classMap as o } 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 { commonStyles as s } from "./styles/common.styles.js";
+import { cupraStyles as c } from "./styles/cupra.styles.js";
 //#region src/components/ds-bullets/ds-bullets.ts
-var c = class extends i {
+var l = class extends i {
 	constructor(...e) {
 		super(...e), this.mode = "light", this.activeBulletIndex = 0, this.handleClickChunk = (e) => () => {
 			this.activeBulletIndex !== e && (this.activeBulletIndex = e, this.dispatchEvent(new CustomEvent("change", {
@@ -53,17 +54,17 @@ var c = class extends i {
                   <div class=${o(this.classes)}>${this.bulletsTemplate}</div>
               ` : t;
 	}
-}, l = (c.styles = [s], c);
+}, u = (l.styles = [s, c], l);
 r([n({
 	type: String,
 	reflect: !0
-})], l.prototype, "mode", void 0), r([n({
+})], u.prototype, "mode", void 0), r([n({
 	type: Number,
 	attribute: "bullets-number"
-})], l.prototype, "bulletsNumber", void 0), r([n({
+})], u.prototype, "bulletsNumber", void 0), r([n({
 	type: Number,
 	attribute: "active-bullet-index",
 	reflect: !0
-})], l.prototype, "activeBulletIndex", void 0), l = r([a("ds-bullets")], l);
+})], u.prototype, "activeBulletIndex", void 0), u = r([a("ds-bullets")], u);
 //#endregion
-export { l as DsBullets };
+export { u as DsBullets };

package/dist-react/esm/components/ds-bullets/styles/cupra.styles.js

@@ -0,0 +1,27 @@
+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-bullets/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        gap: 0.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .bullet {
+        width: 1.25rem;
+        height: 0.125rem;
+        padding: 0.5rem 0;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .bullet {
+        background-color: var(--ds-color-medium-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .bullet {
+        background-color: var(--ds-color-dark-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .light .bullet.active {
+        background-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .bullet.active {
+        background-color: var(--ds-color-white);
+    }
+`;
+//#endregion
+export { t as cupraStyles };

package/dist-react/esm/components/ds-button/ds-button.js

@@ -15,8 +15,12 @@ import { objectConverter as u } from "../../utils/objectConverter.js";
 import { choose as d } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/choose.js";
 import { when as f } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.js";
 import { buttonStyles as p, loadingDotsStyles as m, textStyles as h } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as g } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as _ } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as v } from "./styles/seat-legacy.styles.js";
+import { seatStyles as y } from "./styles/seat.styles.js";
 //#region src/components/ds-button/ds-button.ts
-var g = class extends l(i) {
+var b = class extends l(i) {
 	constructor(...e) {
 		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.destructive = !1, this.htmlTagName = "button", this.type = "button", this.iconPosition = "left", this.rounded = !1, this.fullWidth = !1, this.loading = !1;
 	}
@@ -133,57 +137,61 @@ var g = class extends l(i) {
 		])}
         `;
 	}
-}, _ = (g.styles = [
+}, x = (b.styles = [
 	p,
 	h,
-	m
-], g);
+	m,
+	g,
+	y,
+	_,
+	v
+], b);
 r([n({
 	type: String,
 	reflect: !0
-})], _.prototype, "variant", void 0), r([n({
+})], x.prototype, "variant", void 0), r([n({
 	type: String,
 	reflect: !0
-})], _.prototype, "mode", void 0), r([n({
+})], x.prototype, "mode", void 0), r([n({
 	type: String,
 	converter: u
-})], _.prototype, "size", void 0), r([n({
+})], x.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], _.prototype, "disabled", void 0), r([n({
+})], x.prototype, "disabled", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], _.prototype, "destructive", void 0), r([n({
+})], x.prototype, "destructive", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], _.prototype, "iconName", void 0), r([n({
+})], x.prototype, "iconName", void 0), r([n({
 	type: String,
 	attribute: "html-tag-name"
-})], _.prototype, "htmlTagName", void 0), r([n({
+})], x.prototype, "htmlTagName", void 0), r([n({
 	type: String,
 	reflect: !0
-})], _.prototype, "href", void 0), r([n({
+})], x.prototype, "href", void 0), r([n({
 	type: String,
 	reflect: !0
-})], _.prototype, "rel", void 0), r([n({
+})], x.prototype, "rel", void 0), r([n({
 	type: String,
 	reflect: !0
-})], _.prototype, "target", void 0), r([n({ type: String })], _.prototype, "type", void 0), r([n({
+})], x.prototype, "target", void 0), r([n({ type: String })], x.prototype, "type", void 0), r([n({
 	type: String,
 	attribute: "icon-position"
-})], _.prototype, "iconPosition", void 0), r([n({
+})], x.prototype, "iconPosition", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], _.prototype, "rounded", void 0), r([n({
+})], x.prototype, "rounded", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "full-width"
-})], _.prototype, "fullWidth", void 0), r([n({
+})], x.prototype, "fullWidth", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], _.prototype, "loading", void 0), r([n({
+})], x.prototype, "loading", void 0), r([n({
 	type: String,
 	attribute: "text-loading"
-})], _.prototype, "textLoading", void 0), _ = r([a("ds-button")], _);
+})], x.prototype, "textLoading", void 0), x = r([a("ds-button")], x);
 //#endregion
-export { _ as DsButton };
+export { x as DsButton };