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

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

@@ -0,0 +1,222 @@
+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-tabs/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .ds-blur {
+        position: relative;
+        isolation: isolate;
+        overflow: visible;
+        background: transparent;
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-blur::before {
+        content: '';
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background: var(--ui-kit-private-blur-background);
+        -webkit-backdrop-filter: blur(var(--ui-kit-private-blur-size));
+        backdrop-filter: blur(var(--ui-kit-private-blur-size));
+        border-radius: var(--ui-kit-private-blur-border-radius, inherit);
+        border: var(--ui-kit-private-blur-border, inherit);
+        pointer-events: none;
+        z-index: -1;
+        will-change: filter;
+    }
+
+    :host([data-ui-kit-theme='seat']) {
+        display: block;
+    }
+
+    :host([data-ui-kit-theme='seat']) .nav-container {
+        --ui-kit-private-blur-background: transparent;
+        --ui-kit-private-blur-size: 2.5rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) nav {
+        position: relative;
+    }
+
+    :host([data-ui-kit-theme='seat']) nav:focus {
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) .secondary .nav-container {
+        --ui-kit-private-blur-background: var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.302));
+        --ui-kit-private-blur-size: 3.75rem;
+        --ui-kit-private-blur-border-radius: var(--ds-border-radius-xxs, 4px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .secondary nav {
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        box-shadow: 0 0.25rem 0.25rem 0 var(--ds-opacity-black-20, rgba(9, 9, 11, 0.2));
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='tab']) {
+        font-family: var(--ds-typography-family-primary), sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        color: var(--ds-color-text-default);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        z-index: 1;
+        background: none;
+        border-bottom: 1px solid var(--ds-field-border-color-default);
+        padding: var(--ui-kit-private-tab-vertical-padding) var(--ui-kit-private-tab-horizontal-padding);
+    }
+
+    :host([data-ui-kit-theme='seat']) .medium ::slotted([slot='tab']) {
+        --ui-kit-private-tab-vertical-padding: var(--ds-spacing-s-5);
+        --ui-kit-private-tab-horizontal-padding: var(--ds-spacing-m-1);
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    :host([data-ui-kit-theme='seat']) .large ::slotted([slot='tab']) {
+        --ui-kit-private-tab-vertical-padding: var(--ds-spacing-m-1);
+        --ui-kit-private-tab-horizontal-padding: var(--ds-spacing-m-3);
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='tab']:hover) {
+        background: var(--ui-kit-tabs-tab-background-hover, var(--ds-color-control-bg-hover));
+        color: var(--ds-color-text-default);
+        border-bottom-color: var(--ds-field-border-color-default);
+    }
+
+    :host([data-ui-kit-theme='seat']) :not(.disabled) ::slotted([slot='tab']:focus-visible) {
+        box-shadow: inset 0 0 0 0.125rem var(--ds-color-border-focus-ring);
+        outline: none;
+        background: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='tab']):active {
+        color: var(--ds-color-text-default);
+        border-bottom-color: var(--ds-color-control-border-default);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='tab'][selected]) {
+        -webkit-text-stroke-width: 0.05rem;
+        color: var(--ds-color-text-default);
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='tab'][selected])::before {
+        content: '';
+        position: absolute;
+        width: auto;
+        height: 0.25rem;
+        border-radius: var(--ds-border-radius-xs) var(--ds-border-radius-xs) 0 0;
+        background: var(--ui-kit-tabs-indicator-background, var(--ds-color-surface-selected));
+        transform: none;
+        pointer-events: none;
+        z-index: 0;
+        bottom: 0;
+        left: var(--ui-kit-private-tab-horizontal-padding);
+        right: var(--ui-kit-private-tab-horizontal-padding);
+    }
+
+    :host([data-ui-kit-theme='seat']) .secondary ::slotted([slot='tab']:first-child) {
+        margin-right: 0.0625rem;
+        text-transform: uppercase;
+    }
+
+    :host([data-ui-kit-theme='seat']) .secondary ::slotted([slot='tab']:first-child)::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        margin-right: -0.0625rem;
+        width: 0.0625rem;
+        height: 2rem;
+        border-radius: var(--ds-border-radius-00, 0);
+        background: var(--ds-divider-bg-color-primary, rgba(250, 250, 250, 0.1));
+    }
+
+    :host([data-ui-kit-theme='seat']) .disabled ::slotted([slot='tab']) {
+        color: var(--ds-color-text-disabled, #5a5c67);
+        background: none;
+        border-bottom-color: var(--ds-field-border-color-disabled);
+        pointer-events: none;
+        cursor: default;
+    }
+
+    :host([data-ui-kit-theme='seat']) .nav-arrow {
+        position: absolute;
+        z-index: 1;
+    }
+
+    :host([data-ui-kit-theme='seat']) .nav-arrow.left {
+        left: 0;
+    }
+
+    :host([data-ui-kit-theme='seat']) .nav-arrow.right {
+        right: 0;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        max-width: 20rem;
+    }
+
+    @media (min-width: 480px) {
+        :host([data-ui-kit-theme='seat']) .container {
+            max-width: 30rem;
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat']) .container {
+            max-width: 44rem;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        :host([data-ui-kit-theme='seat']) .container {
+            max-width: 39.375rem;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='seat']) .container {
+            max-width: 56rem;
+        }
+    }
+
+    @media (min-width: 1920px) {
+        :host([data-ui-kit-theme='seat']) .container {
+            max-width: 75rem;
+        }
+    }
+
+    :host([data-ui-kit-theme='seat']) .xsmall {
+        max-width: 20rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        max-width: 30rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        max-width: 44rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        max-width: 39.375rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        max-width: 56rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        max-width: 75rem;
+    }
+`;
+//#endregion
+export { t as seatStyles };

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

@@ -15,8 +15,12 @@ import { ifDefined as u } from "../../node_modules/.pnpm/lit-html@3.3.3/node_mod
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.js";
 import { when as d } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.js";
 import { commonStyles as f, iconStyles as p } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as m } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as h } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as g } from "./styles/seat-legacy.styles.js";
+import { seatStyles as _ } from "./styles/seat.styles.js";
 //#region src/components/ds-tag/ds-tag.ts
-var m = class extends a {
+var v = class extends a {
 	constructor(...e) {
 		super(...e), this.show = !0, this.clickableIcon = !1, this.iconPosition = "left";
 	}
@@ -52,26 +56,33 @@ var m = class extends a {
                 </div>
             ` : t;
 	}
-}, h = (m.styles = [f, p], m);
+}, y = (v.styles = [
+	f,
+	p,
+	m,
+	_,
+	h,
+	g
+], v);
 i([n({
 	type: Boolean,
 	converter: s
-})], h.prototype, "show", void 0), i([n({
+})], y.prototype, "show", void 0), i([n({
 	type: Boolean,
 	converter: s,
 	attribute: "clickable-icon"
-})], h.prototype, "clickableIcon", void 0), i([n({
+})], y.prototype, "clickableIcon", void 0), i([n({
 	type: String,
 	attribute: "icon-name"
-})], h.prototype, "iconName", void 0), i([n({
+})], y.prototype, "iconName", void 0), i([n({
 	type: String,
 	attribute: "icon-position"
-})], h.prototype, "iconPosition", void 0), i([n({
+})], y.prototype, "iconPosition", void 0), i([n({
 	type: String,
 	attribute: "color"
-})], h.prototype, "color", void 0), i([n({
+})], y.prototype, "color", void 0), i([n({
 	type: String,
 	attribute: "variant"
-})], h.prototype, "variant", void 0), i([r()], h.prototype, "onClickHandler", void 0), h = i([o("ds-tag")], h);
+})], y.prototype, "variant", void 0), i([r()], y.prototype, "onClickHandler", void 0), y = i([o("ds-tag")], y);
 //#endregion
-export { h as DsTag };
+export { y as DsTag };

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

@@ -0,0 +1,76 @@
+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-tag/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        padding: var(--ds-spacing-s-3, 4px) var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-l, 20px);
+        gap: var(--ds-spacing-s-4, 6px);
+        font: 400 var(--ds-typography-size-body-s, 12px) / var(--ds-typography-height-body-s, 16px)
+            var(--ds-typography-family-primary);
+        letter-spacing: var(--ds-typography-letter-spacing-base, 0.5px);
+        color: var(--ui-kit-private-tag-color);
+        background-color: var(--ui-kit-private-tag-background-color);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.moonlate,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.default {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-default, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-default, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-default, #404759);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.white,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.contrast {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-contrast, #09090b);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-contrast, #09090b);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-contrast, #f3f4f6);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.copper,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.accent-02 {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-accent-02, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-accent-02, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-accent-02, #885a3b);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.rio-green,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.accent-03 {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-accent-03, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-accent-03, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-accent-03, #505643);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.electric,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.accent-01 {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-accent-01, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-accent-01, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-accent-01, #0e6261);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.yellow,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.warning {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-warning, #09090b);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-warning, #09090b);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-warning, #ffdf8f);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.red,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.error {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-error, #09090b);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-error, #09090b);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-error, #ff918f);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.green,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.success {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-success, #09090b);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-success, #09090b);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-success, #d9fccf);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.subtle {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-subtle, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-subtle, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-subtle, #09090b4d);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.black,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-disabled, #aeaeb7);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-disabled, #aeaeb7);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-disabled, #34353c);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

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

@@ -0,0 +1,48 @@
+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-tag/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        padding: 0.25rem 0.5rem;
+        border-radius: 2px;
+        gap: 0.25rem;
+        font: var(--ds-font-cupra-light-20-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.black {
+        background-color: var(--ds-color-black);
+        color: var(--ds-color-white);
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.petrol {
+        background-color: var(--ds-color-petrol-100);
+        color: var(--ds-color-white);
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.copper {
+        background-color: var(--ds-color-copper-100);
+        color: var(--ds-color-white);
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.grey {
+        background-color: var(--ds-color-dark-grey);
+        color: var(--ds-color-white);
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.white {
+        background-color: var(--ds-color-white);
+        color: var(--ds-color-black);
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.desert {
+        background-color: var(--ds-color-desert-sand-100);
+        color: var(--ds-color-black);
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.orange {
+        background-color: var(--ds-color-orange-50);
+        color: var(--ds-color-black);
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+`;
+//#endregion
+export { t as cupraStyles };

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

@@ -0,0 +1,26 @@
+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-tag/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        padding: var(--dg-spacing-s-3) var(--dg-spacing-s-5);
+        border-radius: var(--dg-border-radius-02);
+        gap: var(--dg-spacing-s-3);
+        font: 500 var(--dg-font-size-body-s) / var(--dg-font-height-body-s) var(--dg-font-family-base);
+        color: var(--dg-color-text-strong);
+        --ui-kit-icon-color: var(--dg-color-text-strong);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.moonlate {
+        background-color: var(--dg-tag-bg-color-moonslate);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.white {
+        background-color: var(--dg-tag-bg-color-white);
+        color: var(--dg-color-text-inverted);
+        --ui-kit-icon-color: var(--dg-color-text-inverted);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.copper {
+        background-color: var(--dg-tag-bg-color-copper);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

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

@@ -0,0 +1,76 @@
+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-tag/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .container {
+        padding: var(--ds-spacing-s-3, 4px) var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-l, 20px);
+        gap: var(--ds-spacing-s-4, 6px);
+        font: 400 var(--ds-typography-size-body-s, 12px) / var(--ds-typography-height-body-s, 16px)
+            var(--ds-typography-family-primary);
+        letter-spacing: var(--ds-typography-letter-spacing-base, 0.5px);
+        color: var(--ui-kit-private-tag-color);
+        background-color: var(--ui-kit-private-tag-background-color);
+    }
+    :host([data-ui-kit-theme='seat']) .container.moonlate,
+    :host([data-ui-kit-theme='seat']) .container.default {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-default, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-default, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-default, #404759);
+    }
+    :host([data-ui-kit-theme='seat']) .container.white,
+    :host([data-ui-kit-theme='seat']) .container.contrast {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-contrast, #09090b);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-contrast, #09090b);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-contrast, #f3f4f6);
+    }
+    :host([data-ui-kit-theme='seat']) .container.copper,
+    :host([data-ui-kit-theme='seat']) .container.accent-02 {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-accent-02, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-accent-02, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-accent-02, #885a3b);
+    }
+    :host([data-ui-kit-theme='seat']) .container.rio-green,
+    :host([data-ui-kit-theme='seat']) .container.accent-03 {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-accent-03, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-accent-03, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-accent-03, #505643);
+    }
+    :host([data-ui-kit-theme='seat']) .container.electric,
+    :host([data-ui-kit-theme='seat']) .container.accent-01 {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-accent-01, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-accent-01, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-accent-01, #0e6261);
+    }
+    :host([data-ui-kit-theme='seat']) .container.yellow,
+    :host([data-ui-kit-theme='seat']) .container.warning {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-warning, #09090b);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-warning, #09090b);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-warning, #ffdf8f);
+    }
+    :host([data-ui-kit-theme='seat']) .container.red,
+    :host([data-ui-kit-theme='seat']) .container.error {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-error, #09090b);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-error, #09090b);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-error, #ff918f);
+    }
+    :host([data-ui-kit-theme='seat']) .container.green,
+    :host([data-ui-kit-theme='seat']) .container.success {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-success, #09090b);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-success, #09090b);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-success, #d9fccf);
+    }
+    :host([data-ui-kit-theme='seat']) .container.subtle {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-subtle, #fafafa);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-subtle, #fafafa);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-subtle, #09090b4d);
+    }
+    :host([data-ui-kit-theme='seat']) .container.black,
+    :host([data-ui-kit-theme='seat']) .container.disabled {
+        --ui-kit-private-tag-color: var(--ds-tag-text-color-disabled, #aeaeb7);
+        --ui-kit-icon-color: var(--ds-tag-icon-color-disabled, #aeaeb7);
+        --ui-kit-private-tag-background-color: var(--ds-tag-bg-color-disabled, #34353c);
+    }
+`;
+//#endregion
+export { t as seatStyles };

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

@@ -16,8 +16,12 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/static-html.js";
 import { styleMap as f } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/style-map.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/style-map.js";
 import { commonStyles as p } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as m } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as h } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as g } from "./styles/seat-legacy.styles.js";
+import { seatStyles as _ } from "./styles/seat.styles.js";
 //#region src/components/ds-text/ds-text.ts
-var m, h = /* @__PURE__ */ new Set([
+var v, y = /* @__PURE__ */ new Set([
 	"span",
 	"p",
 	"strong",
@@ -31,7 +35,7 @@ var m, h = /* @__PURE__ */ new Set([
 	"h4",
 	"h5",
 	"h6"
-]), g = (m = class extends c(i) {
+]), b = (v = class extends c(i) {
 	constructor(...e) {
 		super(...e), this.size = "medium", this.emphasis = "secondary", this.variant = "body", this.htmlTagName = "span", this.mode = "light";
 	}
@@ -48,8 +52,11 @@ var m, h = /* @__PURE__ */ new Set([
 			uppercase: this.uppercase
 		};
 	}
+	onSlotChange() {
+		this.requestUpdate();
+	}
 	render() {
-		let t = (this.htmlTagName ?? "").toLowerCase(), n = h.has(t) ? t : "span", r = d(n);
+		let t = (this.htmlTagName ?? "").toLowerCase(), n = y.has(t) ? t : "span", r = d(n);
 		return u`
             <${r} 
                 part="container" 
@@ -58,30 +65,36 @@ var m, h = /* @__PURE__ */ new Set([
                 style=${f({ color: this.color || "var(--ui-kit-private-text-color)" })}
             >
                 ${this.value ? this.value : e}
-                <slot></slot>
+                <slot @slotchange=${this.onSlotChange}></slot>
             </${r}>
         `;
 	}
-}, m.styles = [p], m);
+}, v.styles = [
+	p,
+	m,
+	_,
+	h,
+	g
+], v);
 r([t({
 	type: String,
 	converter: l
-})], g.prototype, "size", void 0), r([t({ type: String })], g.prototype, "emphasis", void 0), r([t({ type: String })], g.prototype, "variant", void 0), r([t({
+})], b.prototype, "size", void 0), r([t({ type: String })], b.prototype, "emphasis", void 0), r([t({ type: String })], b.prototype, "variant", void 0), r([t({
 	type: String,
 	attribute: "html-tag-name"
-})], g.prototype, "htmlTagName", void 0), r([t({ type: String })], g.prototype, "value", void 0), r([t({
+})], b.prototype, "htmlTagName", void 0), r([t({ type: String })], b.prototype, "value", void 0), r([t({
 	type: String,
 	reflect: !0
-})], g.prototype, "mode", void 0), r([t({
+})], b.prototype, "mode", void 0), r([t({
 	type: String,
 	reflect: !0
-})], g.prototype, "color", void 0), r([t({
+})], b.prototype, "color", void 0), r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], g.prototype, "uppercase", void 0), r([n({
+})], b.prototype, "uppercase", void 0), r([n({
 	slot: "",
 	flatten: !0
-})], g.prototype, "slotedNodes", void 0), g = r([a("ds-text")], g);
+})], b.prototype, "slotedNodes", void 0), b = r([a("ds-text")], b);
 //#endregion
-export { g as DsText };
+export { b as DsText };