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

package/dist/esm/components/ds-table-row/ds-table-row.js

@@ -1,13 +1,13 @@
 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 { commonStyles as a } from "./styles/common.styles.js";
 //#region src/components/ds-table-row/ds-table-row.ts
-var o = class extends r {
+var o = class extends t {
 	constructor(...e) {
 		super(...e), this.columnCount = 0;
 	}
@@ -23,10 +23,10 @@ var o = class extends r {
         `;
 	}
 }, s = (o.styles = [a], o);
-n([t({
+r([n({
 	type: Number,
 	reflect: !0,
 	attribute: "data-column-count"
-})], s.prototype, "columnCount", void 0), s = n([i("ds-table-row")], s);
+})], s.prototype, "columnCount", void 0), s = r([i("ds-table-row")], s);
 //#endregion
 export { s as DsTableRow };

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

@@ -15,9 +15,13 @@ import { ifDefined as d } 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 "../ds-icon-button/ds-icon-button.js";
 import { commonStyles as f, navigationStyles as p, panelsStyles as m, tabsStyles as h } from "./styles/common.styles.js";
-import { themeConfig as g } from "./theme-config.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";
+import { themeConfig as b } from "./theme-config.js";
 //#region src/components/ds-tabs/ds-tabs.ts
-var _ = class extends o {
+var x = class extends o {
 	constructor(...e) {
 		super(...e), this._selectedTab = void 0, this._selectedTabState = 0, this.mode = "light", this.variant = "primary", this.size = "large", this.disabled = !1, this.focusedTabIndex = -1, this.handleKeyDown = (e) => {
 			if (!(this.focusedTabIndex < 0)) switch (e.key) {
@@ -84,7 +88,7 @@ var _ = class extends o {
 	getScrollButtonTemplate(e, n) {
 		var r;
 		if (!this.theme || e === "left" && !this.hasScrollLeft || e === "right" && !this.hasScrollRight) return t;
-		let i = `arrow-${e}`, a = (r = g[this.theme]) == null ? void 0 : r["icon-button-variant"];
+		let i = `arrow-${e}`, a = (r = b[this.theme]) == null ? void 0 : r["icon-button-variant"];
 		return l`<ds-icon-button
             class=${`nav-arrow ${e}`}
             data-aria-label=${`nav-arrow-${e}`}
@@ -176,25 +180,29 @@ var _ = class extends o {
             </div>
         `;
 	}
-}, v = (_.styles = [
+}, S = (x.styles = [
 	f,
 	p,
 	h,
-	m
-], _);
+	m,
+	g,
+	y,
+	_,
+	v
+], x);
 a([n({
 	type: Number,
 	attribute: "selected-tab",
 	reflect: !0
-})], v.prototype, "_selectedTab", void 0), a([r()], v.prototype, "_selectedTabState", void 0), a([n({
+})], S.prototype, "_selectedTab", void 0), a([r()], S.prototype, "_selectedTabState", void 0), a([n({
 	type: String,
 	reflect: !0
-})], v.prototype, "mode", void 0), a([n({
+})], S.prototype, "mode", void 0), a([n({
 	type: String,
 	reflect: !0
-})], v.prototype, "variant", void 0), a([n({ type: String })], v.prototype, "size", void 0), a([n({
+})], S.prototype, "variant", void 0), a([n({ type: String })], S.prototype, "size", void 0), a([n({
 	type: Boolean,
 	converter: c
-})], v.prototype, "disabled", void 0), a([r()], v.prototype, "focusedTabIndex", void 0), a([i("nav")], v.prototype, "nav", void 0), a([r()], v.prototype, "tabs", void 0), a([r()], v.prototype, "panels", void 0), a([r()], v.prototype, "hasScrollLeft", void 0), a([r()], v.prototype, "hasScrollRight", void 0), v = a([s("ds-tabs")], v);
+})], S.prototype, "disabled", void 0), a([r()], S.prototype, "focusedTabIndex", void 0), a([i("nav")], S.prototype, "nav", void 0), a([r()], S.prototype, "tabs", void 0), a([r()], S.prototype, "panels", void 0), a([r()], S.prototype, "hasScrollLeft", void 0), a([r()], S.prototype, "hasScrollRight", void 0), S = a([s("ds-tabs")], S);
 //#endregion
-export { v as DsTabs };
+export { S as DsTabs };

package/dist/esm/components/ds-tabs/styles/cupra-diagonal.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/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-blur {
+        position: relative;
+        isolation: isolate;
+        overflow: visible;
+        background: transparent;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .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='cupra-diagonal']) {
+        display: block;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .nav-container {
+        --ui-kit-private-blur-background: transparent;
+        --ui-kit-private-blur-size: 2.5rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) nav {
+        position: relative;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) nav:focus {
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .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='cupra-diagonal']) .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='cupra-diagonal']) ::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='cupra-diagonal']) .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='cupra-diagonal']) .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='cupra-diagonal']) ::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='cupra-diagonal']) :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='cupra-diagonal']) ::slotted([slot='tab']):active {
+        color: var(--ds-color-text-default);
+        border-bottom-color: var(--ds-color-control-border-default);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='tab'][selected]) {
+        -webkit-text-stroke-width: 0.05rem;
+        color: var(--ds-color-text-default);
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::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='cupra-diagonal']) .secondary ::slotted([slot='tab']:first-child) {
+        margin-right: 0.0625rem;
+        text-transform: uppercase;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .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='cupra-diagonal']) .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='cupra-diagonal']) .nav-arrow {
+        position: absolute;
+        z-index: 1;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .nav-arrow.left {
+        left: 0;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .nav-arrow.right {
+        right: 0;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        max-width: 20rem;
+    }
+
+    @media (min-width: 480px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .container {
+            max-width: 30rem;
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .container {
+            max-width: 44rem;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .container {
+            max-width: 39.375rem;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .container {
+            max-width: 56rem;
+        }
+    }
+
+    @media (min-width: 1920px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .container {
+            max-width: 75rem;
+        }
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .xsmall {
+        max-width: 20rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        max-width: 30rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        max-width: 44rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        max-width: 39.375rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        max-width: 56rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        max-width: 75rem;
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

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

@@ -0,0 +1,91 @@
+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/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .light nav {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark nav {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) nav {
+        border-radius: 0;
+        background-color: transparent;
+        gap: 1.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='tab']) {
+        padding: 0.25rem 1rem;
+        letter-spacing: 0px;
+        border-radius: 0px;
+        background-color: transparent;
+    }
+    :host([data-ui-kit-theme='cupra']) .large ::slotted([slot='tab']) {
+        font: var(--ds-font-cupra-light-30-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .small ::slotted([slot='tab']) {
+        font: var(--ds-font-cupra-light-20-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .light ::slotted([slot='tab']) {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark ::slotted([slot='tab']) {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .light ::slotted([slot='tab'][selected]) {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark ::slotted([slot='tab'][selected]) {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .light ::slotted([slot='tab']:hover) {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark ::slotted([slot='tab']:hover) {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .light ::slotted([slot='tab']:focus-visible) {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark ::slotted([slot='tab']:focus-visible) {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='tab'][selected]) {
+        background-color: transparent;
+        -webkit-text-stroke-width: 0.05625rem;
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='tab']:hover) {
+        background-color: transparent;
+        -webkit-text-stroke-width: 0.05625rem;
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='tab']:focus-visible) {
+        background-color: transparent;
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='tab'])::after {
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='tab'][selected])::after {
+        transform: scaleX(1);
+    }
+    :host([data-ui-kit-theme='cupra']) .nav-arrow {
+        display: block;
+    }
+
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='tab']):after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 0.0625rem;
+        width: 100%;
+        display: block;
+        content: '';
+        transform: scaleX(0);
+        transition: transform 200ms ease-in-out;
+    }
+
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='tab'][selected]):after {
+        transition: transform 200ms ease-in-out;
+    }
+`;
+//#endregion
+export { t as cupraStyles };

package/dist/esm/components/ds-tabs/styles/seat-legacy.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-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .ds-blur {
+        position: relative;
+        isolation: isolate;
+        overflow: visible;
+        background: transparent;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .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-legacy']) {
+        display: block;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .nav-container {
+        --ui-kit-private-blur-background: transparent;
+        --ui-kit-private-blur-size: 2.5rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) nav {
+        position: relative;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) nav:focus {
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .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-legacy']) .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-legacy']) ::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-legacy']) .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-legacy']) .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-legacy']) ::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-legacy']) :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-legacy']) ::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-legacy']) ::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-legacy']) ::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-legacy']) .secondary ::slotted([slot='tab']:first-child) {
+        margin-right: 0.0625rem;
+        text-transform: uppercase;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .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-legacy']) .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-legacy']) .nav-arrow {
+        position: absolute;
+        z-index: 1;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .nav-arrow.left {
+        left: 0;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .nav-arrow.right {
+        right: 0;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        max-width: 20rem;
+    }
+
+    @media (min-width: 480px) {
+        :host([data-ui-kit-theme='seat-legacy']) .container {
+            max-width: 30rem;
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat-legacy']) .container {
+            max-width: 44rem;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        :host([data-ui-kit-theme='seat-legacy']) .container {
+            max-width: 39.375rem;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='seat-legacy']) .container {
+            max-width: 56rem;
+        }
+    }
+
+    @media (min-width: 1920px) {
+        :host([data-ui-kit-theme='seat-legacy']) .container {
+            max-width: 75rem;
+        }
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .xsmall {
+        max-width: 20rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        max-width: 30rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        max-width: 44rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        max-width: 39.375rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        max-width: 56rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        max-width: 75rem;
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };