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

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

@@ -0,0 +1,109 @@
+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-text/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        --ui-kit-private-text-color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary, 'cupra-screen');
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-display.emphasis-primary {
+        font-weight: var(--ds-typography-weight-display-primary, 300);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.emphasis-primary {
+        font-weight: var(--ds-typography-weight-headline-primary, 300);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.emphasis-secondary {
+        font-weight: var(--ds-typography-weight-headline-secondary, 400);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.emphasis-primary {
+        font-weight: var(--ds-typography-weight-body-primary, 400);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.emphasis-secondary {
+        font-weight: var(--ds-typography-weight-body-secondary, 350);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.emphasis-tertiary {
+        font-weight: var(--ds-typography-weight-body-tertiary, 500);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-display.size-large {
+        font-size: var(--ds-typography-size-display-l, 40px);
+        line-height: var(--ds-typography-height-display-l, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-l, 1px);
+        text-transform: uppercase;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-display.size-medium {
+        font-size: var(--ds-typography-size-display-m, 40px);
+        line-height: var(--ds-typography-height-display-m, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-l, 1px);
+        text-transform: uppercase;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.size-xlarge {
+        font-size: var(--ds-typography-size-headline-xl, 40px);
+        line-height: var(--ds-typography-height-headline-xl, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.size-large {
+        font-size: var(--ds-typography-size-headline-l, 40px);
+        line-height: var(--ds-typography-height-headline-l, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.size-medium {
+        font-size: var(--ds-typography-size-headline-m, 32px);
+        line-height: var(--ds-typography-height-headline-m, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.size-small {
+        font-size: var(--ds-typography-size-headline-s, 24px);
+        line-height: var(--ds-typography-height-headline-s, 32px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.size-xsmall {
+        font-size: var(--ds-typography-size-headline-xs, 18px);
+        line-height: var(--ds-typography-height-headline-xs, 26px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-headline.size-xxsmall {
+        font-size: var(--ds-typography-size-headline-xxs, 16px);
+        line-height: var(--ds-typography-height-headline-xxs, 24px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.size-large {
+        font-size: var(--ds-typography-size-body-l, 16px);
+        line-height: var(--ds-typography-height-body-l, 24px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.size-medium {
+        font-size: var(--ds-typography-size-body-m, 14px);
+        line-height: var(--ds-typography-height-body-m, 20px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.size-small {
+        font-size: var(--ds-typography-size-body-s, 12px);
+        line-height: var(--ds-typography-height-body-s, 16px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-body.size-xsmall {
+        font-size: var(--ds-typography-size-body-xs, 10px);
+        line-height: var(--ds-typography-height-body-xs, 14px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist/esm/components/ds-text/styles/cupra.styles.js

@@ -0,0 +1,115 @@
+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-text/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        font-family: var(--ds-typeface-font-family-cupra-screen);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.mode-light {
+        --ui-kit-private-text-color: var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.mode-dark {
+        --ui-kit-private-text-color: white;
+    }
+
+    /* Emphasis variants */
+    :host([data-ui-kit-theme='cupra']) .variant-display.emphasis-primary {
+        font-weight: 300;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-headline.emphasis-primary {
+        font-weight: 300;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-headline.emphasis-secondary {
+        font-weight: 400;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-body.emphasis-primary {
+        font-weight: 400;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-body.emphasis-secondary {
+        font-weight: 350;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-body.emphasis-tertiary {
+        font-weight: 500;
+    }
+
+    /* Variant and size combinations */
+    /* Display variant */
+    :host([data-ui-kit-theme='cupra']) .variant-display.size-large {
+        font-size: var(--ds-font-size-display-l, 40px);
+        line-height: var(--ds-font-height-display-l, 40px);
+        letter-spacing: var(--ds-font-letter-spacing-l, 1px);
+        text-transform: uppercase;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-display.size-medium {
+        font-size: var(--ds-font-size-display-m, 40px);
+        line-height: var(--ds-font-height-display-m, 40px);
+        letter-spacing: var(--ds-font-letter-spacing-l, 1px);
+        text-transform: uppercase;
+    }
+
+    /* Headline variant */
+    :host([data-ui-kit-theme='cupra']) .variant-headline.size-xlarge {
+        font-size: var(--ds-font-size-headline-xl, 40px);
+        line-height: var(--ds-font-height-headline-xl, 40px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-headline.size-large {
+        font-size: var(--ds-font-size-headline-l, 40px);
+        line-height: var(--ds-font-height-headline-l, 40px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-headline.size-medium {
+        font-size: var(--ds-font-size-headline-m, 32px);
+        line-height: var(--ds-font-height-headline-m, 40px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-headline.size-small {
+        font-size: var(--ds-font-size-headline-s, 24px);
+        line-height: var(--ds-font-height-headline-s, 32px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-headline.size-xsmall {
+        font-size: var(--ds-font-size-headline-xs, 18px);
+        line-height: var(--ds-font-height-headline-xs, 26px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    /* Body variant */
+    :host([data-ui-kit-theme='cupra']) .variant-body.size-large {
+        font-size: var(--ds-font-size-body-l, 16px);
+        line-height: var(--ds-font-height-body-l, 24px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-body.size-medium {
+        font-size: var(--ds-font-size-body-m, 14px);
+        line-height: var(--ds-font-height-body-m, 20px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-body.size-small {
+        font-size: var(--ds-font-size-body-s, 12px);
+        line-height: var(--ds-font-height-body-s, 16px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .variant-body.size-xsmall {
+        font-size: var(--ds-font-size-body-xs, 10px);
+        line-height: var(--ds-font-height-body-xs, 14px);
+        letter-spacing: var(--ds-font-letter-spacing-m, 0.5px);
+    }
+`;
+//#endregion
+export { t as cupraStyles };

package/dist/esm/components/ds-text/styles/seat-legacy.styles.js

@@ -0,0 +1,83 @@
+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-text/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        --ui-kit-private-text-color: var(--dg-color-text-strong);
+        font-family: var(--dg-font-family-base);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.emphasis-primary {
+        font-weight: 700;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.emphasis-secondary {
+        font-weight: 700;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.emphasis-tertiary {
+        font-weight: 700;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.emphasis-primary {
+        font-weight: 400;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.emphasis-secondary {
+        font-weight: 400;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.emphasis-tertiary {
+        font-weight: 500;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.size-large {
+        font-size: var(--dg-font-size-headline-l);
+        line-height: var(--dg-font-height-headline-l);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.size-medium {
+        font-size: var(--dg-font-size-headline-m);
+        line-height: var(--dg-font-height-headline-m);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.size-small {
+        font-size: var(--dg-font-size-headline-s);
+        line-height: var(--dg-font-height-headline-s);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-headline.size-xsmall {
+        font-size: var(--dg-font-size-headline-xs);
+        line-height: var(--dg-font-height-headline-xs);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.size-large {
+        font-size: var(--dg-font-size-body-l);
+        line-height: var(--dg-font-height-body-l);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.size-medium {
+        font-size: var(--dg-font-size-body-m);
+        line-height: var(--dg-font-height-body-m);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.size-small {
+        font-size: var(--dg-font-size-body-s);
+        line-height: var(--dg-font-height-body-s);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .variant-body.size-xsmall {
+        font-size: var(--dg-font-size-body-xs);
+        line-height: var(--dg-font-height-body-xs);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

package/dist/esm/components/ds-text/styles/seat.styles.js

@@ -0,0 +1,109 @@
+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-text/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .container {
+        --ui-kit-private-text-color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary, 'cupra-screen');
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-display.emphasis-primary {
+        font-weight: var(--ds-typography-weight-display-primary, 300);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-headline.emphasis-primary {
+        font-weight: var(--ds-typography-weight-headline-primary, 300);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-headline.emphasis-secondary {
+        font-weight: var(--ds-typography-weight-headline-secondary, 400);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-body.emphasis-primary {
+        font-weight: var(--ds-typography-weight-body-primary, 400);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-body.emphasis-secondary {
+        font-weight: var(--ds-typography-weight-body-secondary, 350);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-body.emphasis-tertiary {
+        font-weight: var(--ds-typography-weight-body-tertiary, 500);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-display.size-large {
+        font-size: var(--ds-typography-size-display-l, 40px);
+        line-height: var(--ds-typography-height-display-l, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-l, 1px);
+        text-transform: uppercase;
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-display.size-medium {
+        font-size: var(--ds-typography-size-display-m, 40px);
+        line-height: var(--ds-typography-height-display-m, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-l, 1px);
+        text-transform: uppercase;
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-headline.size-xlarge {
+        font-size: var(--ds-typography-size-headline-xl, 40px);
+        line-height: var(--ds-typography-height-headline-xl, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-headline.size-large {
+        font-size: var(--ds-typography-size-headline-l, 40px);
+        line-height: var(--ds-typography-height-headline-l, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-headline.size-medium {
+        font-size: var(--ds-typography-size-headline-m, 32px);
+        line-height: var(--ds-typography-height-headline-m, 40px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-headline.size-small {
+        font-size: var(--ds-typography-size-headline-s, 24px);
+        line-height: var(--ds-typography-height-headline-s, 32px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-headline.size-xsmall {
+        font-size: var(--ds-typography-size-headline-xs, 18px);
+        line-height: var(--ds-typography-height-headline-xs, 26px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-headline.size-xxsmall {
+        font-size: var(--ds-typography-size-headline-xxs, 16px);
+        line-height: var(--ds-typography-height-headline-xxs, 24px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-body.size-large {
+        font-size: var(--ds-typography-size-body-l, 16px);
+        line-height: var(--ds-typography-height-body-l, 24px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-body.size-medium {
+        font-size: var(--ds-typography-size-body-m, 14px);
+        line-height: var(--ds-typography-height-body-m, 20px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-body.size-small {
+        font-size: var(--ds-typography-size-body-s, 12px);
+        line-height: var(--ds-typography-height-body-s, 16px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .variant-body.size-xsmall {
+        font-size: var(--ds-typography-size-body-xs, 10px);
+        line-height: var(--ds-typography-height-body-xs, 14px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist/esm/components/ds-text-input/ds-text-input.js

@@ -14,8 +14,11 @@ import "../ds-icon-button/ds-icon-button.js";
 import { inputStatesMixin as l } from "../../mixins/inputStatesMixin.js";
 import { validateMaxLength as u } from "../../utils/validateMaxLength.js";
 import { commonStyles as d } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as f } from "./styles/cupra-diagonal.styles.js";
+import { seatLegacyStyles as p } from "./styles/seat-legacy.styles.js";
+import { seatStyles as m } from "./styles/seat.styles.js";
 //#region src/components/ds-text-input/ds-text-input.ts
-var f = class extends l(i) {
+var h = class extends l(i) {
 	constructor(...e) {
 		super(...e), this.keyboardMode = !1, this.size = "large", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.dataAriaLabelRemoveButton = "", this.hideClearButton = !1, this.handleClickIcon = () => {
 			this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach((e) => this.nativeInput.dispatchEvent(new Event(e, {
@@ -83,25 +86,30 @@ var f = class extends l(i) {
 	get invalidErrorTemplate() {
 		return this.inputStates.readonly || this.forcedError || !this.inputStates.invalid || !this.invalidError ? t : e`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
 	}
-}, p = (f.styles = [d], f);
-r([n({ type: String })], p.prototype, "size", void 0), r([n({
+}, g = (h.styles = [
+	d,
+	f,
+	m,
+	p
+], h);
+r([n({ type: String })], g.prototype, "size", void 0), r([n({
 	type: String,
 	attribute: "helper-text"
-})], p.prototype, "helperText", void 0), r([n({
+})], g.prototype, "helperText", void 0), r([n({
 	type: String,
 	attribute: "forced-error"
-})], p.prototype, "forcedError", void 0), r([n({
+})], g.prototype, "forcedError", void 0), r([n({
 	type: String,
 	attribute: "invalid-error"
-})], p.prototype, "invalidError", void 0), r([n({
+})], g.prototype, "invalidError", void 0), r([n({
 	type: String,
 	attribute: "readonly-text"
-})], p.prototype, "readonlyText", void 0), r([n({
+})], g.prototype, "readonlyText", void 0), r([n({
 	type: String,
 	attribute: "data-aria-label-remove-button"
-})], p.prototype, "dataAriaLabelRemoveButton", void 0), r([n({
+})], g.prototype, "dataAriaLabelRemoveButton", void 0), r([n({
 	type: Boolean,
 	attribute: "hide-clear-button"
-})], p.prototype, "hideClearButton", void 0), p = r([a("ds-text-input")], p);
+})], g.prototype, "hideClearButton", void 0), g = r([a("ds-text-input")], g);
 //#endregion
-export { p as DsTextInput };
+export { g as DsTextInput };