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

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

@@ -1,10 +1,10 @@
 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 { state as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as r } 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 r from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as i } from "../base/UiKitElement.js";
+import i from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
 import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
 import { classMap as s } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
@@ -17,7 +17,7 @@ import { repeat as u } from "../../node_modules/.pnpm/lit-html@3.3.3/node_module
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/repeat.js";
 import { containerStyles as d, toastStyles as f } from "./styles/common.styles.js";
 //#region src/components/ds-toast/ds-toast.ts
-var p = class extends i {
+var p = class extends t {
 	constructor(...e) {
 		super(...e), this.position = "top-right", this.toasts = [], this.unsubscribe = null;
 	}
@@ -69,6 +69,6 @@ var p = class extends i {
         `;
 	}
 }, m = (p.styles = [d, f], p);
-r([t({ type: String })], m.prototype, "position", void 0), r([n()], m.prototype, "toasts", void 0), m = r([a("ds-toast")], m);
+i([n({ type: String })], m.prototype, "position", void 0), i([r()], m.prototype, "toasts", void 0), m = i([a("ds-toast")], m);
 //#endregion
 export { m as DsToast };

package/dist/esm/components/ds-toast-message/ds-toast-message.js

@@ -1,9 +1,9 @@
 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 "../ds-icon/ds-icon.js";
 import { uiKitHtml as a } from "../../utils/uiKitHtml.js";
@@ -16,7 +16,7 @@ import { when as c } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/
 import "../ds-link-button/ds-link-button.js";
 import { toastMessageStyles as l } from "./styles/common.styles.js";
 //#region src/components/ds-toast-message/ds-toast-message.ts
-var u = class extends r {
+var u = class extends t {
 	constructor(...e) {
 		super(...e), this.status = "default", this.dataId = "", this.title = "", this.text = "";
 	}
@@ -94,19 +94,19 @@ var u = class extends r {
         `;
 	}
 }, d = (u.styles = [l], u);
-n([t({
+r([n({
 	type: String,
 	reflect: !0
-})], d.prototype, "status", void 0), n([t({
+})], d.prototype, "status", void 0), r([n({
 	type: String,
 	attribute: "data-id",
 	reflect: !0
-})], d.prototype, "dataId", void 0), n([t({
+})], d.prototype, "dataId", void 0), r([n({
 	type: String,
 	reflect: !0
-})], d.prototype, "title", void 0), n([t({
+})], d.prototype, "title", void 0), r([n({
 	type: String,
 	reflect: !0
-})], d.prototype, "text", void 0), n([t({ attribute: !1 })], d.prototype, "action", void 0), d = n([i("ds-toast-message")], d);
+})], d.prototype, "text", void 0), r([n({ attribute: !1 })], d.prototype, "action", void 0), d = r([i("ds-toast-message")], d);
 //#endregion
 export { d as DsToastMessage };

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

@@ -61,9 +61,6 @@ n([t({
 })], c.prototype, "uncheckedText", void 0), n([t({
 	type: Boolean,
 	converter: i
-})], c.prototype, "rounded", void 0), c = n([r("ds-toggle-button", {
-	skipTagAsComponentName: !0,
-	extendComponentNames: ["ds-button"]
-})], c);
+})], c.prototype, "rounded", void 0), c = n([r("ds-toggle-button")], c);
 //#endregion
 export { c as DsToggleButton };

package/dist/esm/components/ds-toggle-switch/ds-toggle-switch.js

@@ -11,8 +11,12 @@ 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 { commonStyles as c } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as l } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as u } from "./styles/cupra.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-toggle-switch/ds-toggle-switch.ts
-var l = class extends i {
+var p = class extends i {
 	constructor(...e) {
 		super(...e), this.size = "medium", this._checked = void 0, this._checkedState = !1, this.disabled = !1, this.mode = "light";
 	}
@@ -80,22 +84,28 @@ var l = class extends i {
             </div>
         `;
 	}
-}, u = (l.styles = [c], l);
-r([t({ type: String })], u.prototype, "size", void 0), r([t({
+}, m = (p.styles = [
+	c,
+	l,
+	f,
+	u,
+	d
+], p);
+r([t({ type: String })], m.prototype, "size", void 0), r([t({
 	type: Boolean,
 	attribute: "checked",
 	converter: o,
 	reflect: !0
-})], u.prototype, "_checked", void 0), r([n()], u.prototype, "_checkedState", void 0), r([t({
+})], m.prototype, "_checked", void 0), r([n()], m.prototype, "_checkedState", void 0), r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], u.prototype, "disabled", void 0), r([t({
+})], m.prototype, "disabled", void 0), r([t({
 	type: String,
 	reflect: !0
-})], u.prototype, "mode", void 0), r([t({
+})], m.prototype, "mode", void 0), r([t({
 	type: String,
 	attribute: "data-aria-label"
-})], u.prototype, "dataAriaLabel", void 0), u = r([a("ds-toggle-switch")], u);
+})], m.prototype, "dataAriaLabel", void 0), m = r([a("ds-toggle-switch")], m);
 //#endregion
-export { u as DsToggleSwitch };
+export { m as DsToggleSwitch };

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

@@ -0,0 +1,193 @@
+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-toggle-switch/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+        --ui-kit-private-dot-gap: 0.1875rem;
+        cursor: pointer;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled {
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.medium {
+        min-height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-2, 2px) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.large {
+        min-height: var(--ds-sizing-48, 48px);
+        padding: var(--ds-spacing-s-2, 2px) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active:not(.disabled) {
+        border-radius: var(--ds-border-radius-xs);
+        background: var(--ds-switch-bg-color-pressed, rgba(195, 195, 203, 0.1));
+        --ui-kit-private-dot-gap: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:not(.disabled):hover {
+        --ui-kit-private-dot-gap: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='label']) {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+        pointer-events: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary, 'cupra-screen'), sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.large ::slotted([slot='label']) {
+        font-size: var(--ds-typography-size-body-l, 16px);
+        line-height: var(--ds-typography-height-body-l, 24px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.medium ::slotted([slot='label']) {
+        font-size: var(--ds-typography-size-body-m, 14px);
+        line-height: var(--ds-typography-height-body-m, 20px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:not(.checked):not(.disabled) ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.checked:not(.disabled) ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .track-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-switch-border-color-default, #aeaeb7);
+        background: none;
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .track-container {
+        width: var(--ds-sizing-32, 32px);
+        height: var(--ds-sizing-20, 20px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .track-container {
+        width: var(--ds-sizing-40, 40px);
+        height: var(--ds-sizing-24, 24px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.checked .track-container {
+        border-color: var(--ds-switch-border-color-selected, rgba(250, 250, 250, 0.3));
+        background: var(--ui-kit-toggle-switch-background, var(--ds-switch-bg-color-selected, #b2764d));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled .track-container {
+        border-color: var(--ds-switch-border-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.checked.disabled .track-container {
+        background: var(--ui-kit-toggle-switch-background-disabled, var(--ds-switch-bg-color-disabled, #34353c));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .track-container:focus-visible {
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.1875rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .dot {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        transition:
+            left 150ms ease,
+            width 150ms ease,
+            height 150ms ease;
+        left: var(--ui-kit-private-dot-gap);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.checked .dot {
+        left: calc(100% - var(--ui-kit-private-dot-gap) - var(--ui-kit-private-dot-size));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-08, 8px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.checked.medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.checked.large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:not(.disabled):hover.medium .dot,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active:not(.disabled).medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:not(.disabled):hover.medium.checked .dot,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active:not(.disabled).medium.checked .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:not(.disabled):hover.large .dot,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active:not(.disabled).large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:not(.disabled):hover.large.checked .dot,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active:not(.disabled).large.checked .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-20, 20px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled .dot {
+        background: var(--ds-switch-icon-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled.checked .dot {
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist/esm/components/ds-toggle-switch/styles/cupra.styles.js

@@ -0,0 +1,88 @@
+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-toggle-switch/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        gap: 0.75rem;
+        display: flex;
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='on']) {
+        font: var(--ds-font-cupra-regular-20-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .light ::slotted([slot='on']) {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark ::slotted([slot='on']) {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .checked.light ::slotted([slot='on']) {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .checked.dark ::slotted([slot='on']) {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='off']) {
+        font: var(--ds-font-cupra-regular-20-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .light ::slotted([slot='off']) {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark ::slotted([slot='off']) {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .checked.light ::slotted([slot='off']) {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .checked.dark ::slotted([slot='off']) {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .track-container {
+        width: 3.5rem;
+        height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .track {
+        width: 100%;
+        height: 0.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .track {
+        background-color: var(--ds-color-medium-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .track {
+        background-color: var(--ds-color-dark-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .fill {
+        width: 0;
+        height: 0.25rem;
+        margin-top: -0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .checked .fill {
+        width: calc(100% - 0.625rem);
+    }
+    :host([data-ui-kit-theme='cupra']) .light .fill {
+        background-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .fill {
+        background-color: var(--ds-color-desert-sand-100);
+    }
+    :host([data-ui-kit-theme='cupra']) .dot {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .dot {
+        background-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .light.checked .dot {
+        background-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .dot {
+        background-color: var(--ds-color-desert-sand-100);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark.checked .dot {
+        background-color: var(--ds-color-desert-sand-100);
+    }
+    :host([data-ui-kit-theme='cupra']) .checked .dot {
+        left: calc(100% - 1.25rem);
+    }
+`;
+//#endregion
+export { t as cupraStyles };

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

@@ -0,0 +1,193 @@
+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-toggle-switch/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+        --ui-kit-private-dot-gap: 0.1875rem;
+        cursor: pointer;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.disabled {
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium {
+        min-height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-2, 2px) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.large {
+        min-height: var(--ds-sizing-48, 48px);
+        padding: var(--ds-spacing-s-2, 2px) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:active:not(.disabled) {
+        border-radius: var(--ds-border-radius-xs);
+        background: var(--ds-switch-bg-color-pressed, rgba(195, 195, 203, 0.1));
+        --ui-kit-private-dot-gap: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.disabled):hover {
+        --ui-kit-private-dot-gap: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='label']) {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+        pointer-events: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary, 'cupra-screen'), sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.large ::slotted([slot='label']) {
+        font-size: var(--ds-typography-size-body-l, 16px);
+        line-height: var(--ds-typography-height-body-l, 24px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium ::slotted([slot='label']) {
+        font-size: var(--ds-typography-size-body-m, 14px);
+        line-height: var(--ds-typography-height-body-m, 20px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.disabled ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.checked):not(.disabled) ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.checked:not(.disabled) ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .track-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-switch-border-color-default, #aeaeb7);
+        background: none;
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .medium .track-container {
+        width: var(--ds-sizing-32, 32px);
+        height: var(--ds-sizing-20, 20px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .large .track-container {
+        width: var(--ds-sizing-40, 40px);
+        height: var(--ds-sizing-24, 24px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.checked .track-container {
+        border-color: var(--ds-switch-border-color-selected, rgba(250, 250, 250, 0.3));
+        background: var(--ui-kit-toggle-switch-background, var(--ds-switch-bg-color-selected, #b2764d));
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.disabled .track-container {
+        border-color: var(--ds-switch-border-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.checked.disabled .track-container {
+        background: var(--ui-kit-toggle-switch-background-disabled, var(--ds-switch-bg-color-disabled, #34353c));
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .track-container:focus-visible {
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.1875rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .dot {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        transition:
+            left 150ms ease,
+            width 150ms ease,
+            height 150ms ease;
+        left: var(--ui-kit-private-dot-gap);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.checked .dot {
+        left: calc(100% - var(--ui-kit-private-dot-gap) - var(--ui-kit-private-dot-size));
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-08, 8px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.checked.medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.checked.large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.disabled):hover.medium .dot,
+    :host([data-ui-kit-theme='seat-legacy']) .container:active:not(.disabled).medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.disabled):hover.medium.checked .dot,
+    :host([data-ui-kit-theme='seat-legacy']) .container:active:not(.disabled).medium.checked .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.disabled):hover.large .dot,
+    :host([data-ui-kit-theme='seat-legacy']) .container:active:not(.disabled).large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.disabled):hover.large.checked .dot,
+    :host([data-ui-kit-theme='seat-legacy']) .container:active:not(.disabled).large.checked .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-20, 20px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.disabled .dot {
+        background: var(--ds-switch-icon-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.disabled.checked .dot {
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };