@cupra/ui-kit 2.0.0-canary.18 → 2.0.0-canary.181

package/dist/esm/components/ds-table/styles/common.styles.js

@@ -0,0 +1,45 @@
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-table/styles/common.styles.ts
+var t = e`
+    :host {
+        display: contents;
+    }
+
+    .table-wrapper {
+        display: grid;
+        grid-template-columns: var(
+            --ui-kit-table-row-grid-template-columns,
+            var(--ui-kit-private-table-grid-template-columns-default)
+        );
+        grid-auto-flow: row;
+        grid-auto-columns: 1fr;
+        width: 100%;
+        border-radius: var(--ds-border-radius-s);
+        overflow: hidden;
+        border: 1px solid var(--ds-color-border-default-subtle);
+        background-color: var(--ds-color-bg-default);
+    }
+
+    .header {
+        display: contents;
+    }
+
+    .body {
+        display: contents;
+    }
+
+    .empty-state {
+        grid-column: 1 / -1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: var(--ds-sizing-24);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-s);
+        color: var(--ds-color-text-subtle);
+    }
+`;
+//#endregion
+export { t as commonStyles };

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

@@ -0,0 +1,26 @@
+import { x as e } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as r } from "../base/UiKitElement.js";
+import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
+import { commonStyles as a } from "./styles/common.styles.js";
+//#region src/components/ds-table-cell/ds-table-cell.ts
+var o, s = (o = class extends r {
+	constructor(...e) {
+		super(...e), this.variant = "default";
+	}
+	render() {
+		return e`
+            <div class="cell" role="cell">
+                <slot></slot>
+            </div>
+        `;
+	}
+}, o.styles = [a], o);
+n([t({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), s = n([i("ds-table-cell")], s);
+//#endregion

package/dist/esm/components/ds-table-cell/styles/common.styles.js

@@ -0,0 +1,50 @@
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-table-cell/styles/common.styles.ts
+var t = e`
+    :host {
+        display: table-cell;
+        box-sizing: border-box;
+    }
+
+    :host {
+        display: contents;
+    }
+
+    .cell {
+        display: flex;
+        align-items: center;
+        gap: var(--ds-sizing-08);
+        padding: var(--ds-sizing-12);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        color: var(--ds-color-text-default);
+        border-top: 1px solid var(--ds-color-border-default-subtle);
+        border-left: 1px solid var(--ds-color-border-default-subtle);
+        box-sizing: border-box;
+    }
+
+    :host(:first-child) .cell {
+        border-left: none;
+    }
+
+    :host([variant='header']) .cell {
+        background-color: var(--ds-color-bg-default);
+        font-weight: var(--ds-typography-weight-body-primary);
+        border-top: none;
+    }
+
+    :host([variant='default']) .cell {
+        background-color: var(--ds-color-surface-default-subtlest);
+        font-weight: var(--ds-typography-weight-body-tertiary);
+    }
+
+    :host([variant='alternative']) .cell {
+        background-color: var(--ds-color-surface-default-subtle);
+        font-weight: var(--ds-typography-weight-body-tertiary);
+    }
+`;
+//#endregion
+export { t as commonStyles };

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

@@ -0,0 +1,31 @@
+import { x as e } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as r } from "../base/UiKitElement.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, s = (o = class extends r {
+	constructor(...e) {
+		super(...e), this.columnCount = 0;
+	}
+	handleSlotChange(e) {
+		let t = e.target.assignedElements({ flatten: !0 });
+		this.columnCount = t.length;
+	}
+	render() {
+		return e`
+            <div class="row" role="row">
+                <slot @slotchange=${this.handleSlotChange}></slot>
+            </div>
+        `;
+	}
+}, o.styles = [a], o);
+n([t({
+	type: Number,
+	reflect: !0,
+	attribute: "data-column-count"
+})], s.prototype, "columnCount", void 0), s = n([i("ds-table-row")], s);
+//#endregion

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

@@ -0,0 +1,18 @@
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-table-row/styles/common.styles.ts
+var t = e`
+    :host {
+        display: table-row;
+    }
+
+    :host {
+        display: contents;
+    }
+
+    .row {
+        display: contents;
+    }
+`;
+//#endregion
+export { t as commonStyles };

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

@@ -1,157 +1,174 @@
-import { UiKitElement as u } from "../base/UiKitElement.js";
-import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as v } from "../../utils/booleanConverter.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as m, html as g } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as S } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as y, navigationStyles as T, tabsStyles as x, panelsStyles as L } from "./styles/common.styles.js";
-import { themeConfig as E } from "./theme-config.js";
-var w = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (t, e, s, i) => {
-  for (var a = i > 1 ? void 0 : i ? A(e, s) : e, o = t.length - 1, h; o >= 0; o--)
-    (h = t[o]) && (a = (i ? h(e, s, a) : h(a)) || a);
-  return i && a && w(e, s, a), a;
-};
-let r = class extends u {
-  constructor() {
-    super(...arguments), this.selectedTab = 0, this.mode = "light", this.variant = "primary", this.size = "large", this.disabled = !1, this.focusedTabIndex = -1, this.handleKeyDown = (t) => {
-      var e, s, i, a;
-      if (!(this.focusedTabIndex < 0))
-        switch (t.key) {
-          case "ArrowRight":
-          case "Right":
-            t.preventDefault(), this.focusedTabIndex + 1 < ((e = this.tabs) == null ? void 0 : e.length) && (this.focusedTabIndex += 1, (s = this.tabs[this.focusedTabIndex]) == null || s.focus());
-            break;
-          case "ArrowLeft":
-          case "Left":
-            t.preventDefault(), this.focusedTabIndex - 1 >= 0 && (this.focusedTabIndex -= 1, (i = this.tabs[this.focusedTabIndex]) == null || i.focus());
-            break;
-          case "Enter":
-          case " ":
-            t.preventDefault(), this.focusedTabIndex >= 0 && this.focusedTabIndex < ((a = this.tabs) == null ? void 0 : a.length) && this.handleChangeSelectedTab(this.focusedTabIndex);
-            break;
-        }
-    }, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
-      this.handleScrollNav();
-    }), this.handleScrollNav = () => {
-      var e, s, i, a;
-      const t = ((e = this.nav) == null ? void 0 : e.scrollLeft) + ((s = this.nav) == null ? void 0 : s.clientWidth);
-      this.hasScrollLeft = ((i = this.nav) == null ? void 0 : i.scrollLeft) > 0, this.hasScrollRight = t < ((a = this.nav) == null ? void 0 : a.scrollWidth);
-    }, this.handleScrollLeft = () => {
-      this.nav.scrollBy({ left: -150, behavior: "smooth" });
-    }, this.handleScrollRight = () => {
-      this.nav.scrollBy({ left: 150, behavior: "smooth" });
-    }, this.handleFocus = (t) => {
-      var i;
-      const e = t.target, s = ((i = this.tabs) == null ? void 0 : i.findIndex((a) => a === e)) ?? -1;
-      if (s < 0 || this.disabled) {
-        t.preventDefault();
-        return;
-      }
-      this.focusedTabIndex = s;
-    }, this.handleBlur = () => {
-      this.focusedTabIndex = -1;
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.tabs = Array.from(this.querySelectorAll("[slot=tab]")), this.panels = Array.from(this.querySelectorAll("[slot=panel]"));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScrollNav);
-  }
-  getScrollButtonTemplate(t, e) {
-    var a;
-    if (!this.theme || t === "left" && !this.hasScrollLeft || t === "right" && !this.hasScrollRight)
-      return m;
-    const s = `arrow-${t}`, i = (a = E[this.theme]) == null ? void 0 : a["icon-button-variant"];
-    return this.componentFactory.createIconButton({
-      class: `nav-arrow ${t}`,
-      "data-aria-label": `nav-arrow-${t}`,
-      "@click": e,
-      size: ["xxsmall", "xsmall", "small"].includes(this.size) ? "medium" : "large",
-      "icon-name": s,
-      mode: this.mode,
-      variant: i
-    });
-  }
-  firstUpdated() {
-    this.handleScrollNav(), this.resizeObserver.observe(this.nav), this.tabs.forEach((t) => this.resizeObserver.observe(t)), window.addEventListener("resize", this.handleScrollNav), this.nav.addEventListener("scroll", this.handleScrollNav), this.setTabsFocusable();
-  }
-  updated(t) {
-    if (super.updated(t), t.has("selectedTab") && this.selectTab(this.selectedTab), t.has("variant")) {
-      const e = this.variant === "secondary" || this.variant === "primary" ? this.variant : "primary";
-      this.variant !== e && (this.variant = e);
-    }
-    this.setupTabAccessibility();
-  }
-  handleTabsSlotchange(t) {
-    this.tabs = t.target.assignedNodes({ flatten: !0 }), this.setTabsFocusable();
-  }
-  handlePanelSlotchange(t) {
-    this.panels = t.target.assignedNodes({ flatten: !0 }), this.setTabsFocusable();
-  }
-  setTabsFocusable() {
-    var t;
-    (t = this.tabs) == null || t.forEach((e) => {
-      e.setAttribute("tabindex", "0");
-    });
-  }
-  selectTab(t) {
-    var s, i, a, o, h;
-    (s = this.tabs) == null || s.forEach((d, f) => {
-      d.removeAttribute("selected"), d.setAttribute("aria-selected", f === t ? "true" : "false");
-    }), (i = this.tabs[t]) == null || i.setAttribute("selected", ""), this.panels.forEach((d) => d.removeAttribute("selected")), (a = this.panels[t]) == null || a.setAttribute("selected", "");
-    const e = (o = this.tabs) == null ? void 0 : o[this.selectedTab];
-    this.nav.scrollLeft = (e == null ? void 0 : e.offsetLeft) - ((h = this.nav) == null ? void 0 : h.offsetWidth) / 2;
-  }
-  setupTabAccessibility() {
-    var t;
-    (t = this.tabs) == null || t.forEach((e, s) => {
-      e.setAttribute("role", "tab"), e.setAttribute("tabindex", s === this.selectedTab && !this.disabled ? "0" : "-1"), e.addEventListener("focus", this.handleFocus), e.addEventListener("blur", this.handleBlur);
-    });
-  }
-  handleChangeSelectedTab(t) {
-    this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          selectedTab: t
-        }
-      })
-    ), this.selectedTab = t;
-  }
-  handleSelect(t) {
-    let e;
-    this.tabs.forEach((s, i) => {
-      (s === t.target || s.contains(t.target)) && (e = i);
-    }), !(typeof e != "number" || e === this.selectedTab) && this.handleChangeSelectedTab(e);
-  }
-  get classes() {
-    return {
-      container: !0,
-      [this.size]: !0,
-      [this.mode]: !0,
-      [this.variant]: !0,
-      disabled: this.disabled
-    };
-  }
-  get navContainerClasses() {
-    return {
-      "nav-container": !0,
-      "scroll-left": this.hasScrollLeft,
-      "scroll-right": this.hasScrollRight
-    };
-  }
-  render() {
-    return g`
-            <div part="container" class=${b(this.classes)}>
-                <div class=${b(this.navContainerClasses)}>
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { e as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as o } from "../base/UiKitElement.js";
+import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as c } from "../../utils/booleanConverter.js";
+import { uiKitHtml as l } from "../../utils/uiKitHtml.js";
+import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { o as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/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";
+//#region src/components/ds-tabs/ds-tabs.ts
+var _, v = (_ = 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) {
+				case "ArrowRight":
+				case "Right":
+					var t;
+					if (e.preventDefault(), this.focusedTabIndex + 1 < ((t = this.tabs) == null ? void 0 : t.length)) {
+						var n;
+						this.focusedTabIndex += 1, (n = this.tabs[this.focusedTabIndex]) == null || n.focus();
+					}
+					break;
+				case "ArrowLeft":
+				case "Left":
+					if (e.preventDefault(), this.focusedTabIndex - 1 >= 0) {
+						var r;
+						--this.focusedTabIndex, (r = this.tabs[this.focusedTabIndex]) == null || r.focus();
+					}
+					break;
+				case "Enter":
+				case " ":
+					var i;
+					e.preventDefault(), this.focusedTabIndex >= 0 && this.focusedTabIndex < ((i = this.tabs) == null ? void 0 : i.length) && this.handleChangeSelectedTab(this.focusedTabIndex);
+					break;
+				default: break;
+			}
+		}, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
+			this.handleScrollNav();
+		}), this.handleScrollNav = () => {
+			var e, t, n, r;
+			let i = ((e = this.nav) == null ? void 0 : e.scrollLeft) + ((t = this.nav) == null ? void 0 : t.clientWidth);
+			this.hasScrollLeft = ((n = this.nav) == null ? void 0 : n.scrollLeft) > 0, this.hasScrollRight = i < ((r = this.nav) == null ? void 0 : r.scrollWidth);
+		}, this.handleScrollLeft = () => {
+			this.nav.scrollBy({
+				left: -150,
+				behavior: "smooth"
+			});
+		}, this.handleScrollRight = () => {
+			this.nav.scrollBy({
+				left: 150,
+				behavior: "smooth"
+			});
+		}, this.handleFocus = (e) => {
+			var t;
+			let n = e.target, r = ((t = this.tabs) == null ? void 0 : t.findIndex((e) => e === n)) ?? -1;
+			if (r < 0 || this.disabled) {
+				e.preventDefault();
+				return;
+			}
+			this.focusedTabIndex = r;
+		}, this.handleBlur = () => {
+			this.focusedTabIndex = -1;
+		};
+	}
+	get selectedTab() {
+		return this._selectedTab ?? this._selectedTabState;
+	}
+	set selectedTab(e) {
+		this._selectedTab = e;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.tabs = Array.from(this.querySelectorAll("[slot=tab]")), this.panels = Array.from(this.querySelectorAll("[slot=panel]"));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScrollNav);
+	}
+	getScrollButtonTemplate(t, n) {
+		var r;
+		if (!this.theme || t === "left" && !this.hasScrollLeft || t === "right" && !this.hasScrollRight) return e;
+		let i = `arrow-${t}`, a = (r = g[this.theme]) == null ? void 0 : r["icon-button-variant"];
+		return l`<ds-icon-button
+            class=${`nav-arrow ${t}`}
+            data-aria-label=${`nav-arrow-${t}`}
+            @click=${n}
+            size=${this.size === "medium" ? "medium" : "large"}
+            icon-name=${i}
+            mode=${d(this.mode)}
+            variant=${d(a)}
+        ></ds-icon-button>`;
+	}
+	firstUpdated() {
+		this.handleScrollNav(), this.resizeObserver.observe(this.nav), this.tabs.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.nav.addEventListener("scroll", this.handleScrollNav), this.setTabsFocusable();
+	}
+	updated(e) {
+		if (super.updated(e), (e.has("_selectedTab") || e.has("_selectedTabState")) && this.selectTab(this.selectedTab), e.has("variant")) {
+			let e = this.variant === "secondary" || this.variant === "primary" ? this.variant : "primary";
+			this.variant !== e && (this.variant = e);
+		}
+		this.setupTabAccessibility();
+	}
+	handleTabsSlotchange(e) {
+		this.tabs = e.target.assignedNodes({ flatten: !0 }), this.setTabsFocusable();
+	}
+	handlePanelSlotchange(e) {
+		this.panels = e.target.assignedNodes({ flatten: !0 }), this.setTabsFocusable();
+	}
+	setTabsFocusable() {
+		var e;
+		(e = this.tabs) == null || e.forEach((e) => {
+			e.setAttribute("tabindex", "0");
+		});
+	}
+	selectTab(e) {
+		var t, n, r, i, a;
+		(t = this.tabs) == null || t.forEach((t, n) => {
+			t.removeAttribute("selected"), t.setAttribute("aria-selected", n === e ? "true" : "false");
+		}), (n = this.tabs[e]) == null || n.setAttribute("selected", ""), this.panels.forEach((e) => e.removeAttribute("selected")), (r = this.panels[e]) == null || r.setAttribute("selected", "");
+		let o = (i = this.tabs) == null ? void 0 : i[this.selectedTab];
+		this.nav.scrollLeft = (o == null ? void 0 : o.offsetLeft) - ((a = this.nav) == null ? void 0 : a.offsetWidth) / 2;
+	}
+	setupTabAccessibility() {
+		var e;
+		(e = this.tabs) == null || e.forEach((e, t) => {
+			e.setAttribute("role", "tab"), e.setAttribute("tabindex", t === this.selectedTab && !this.disabled ? "0" : "-1"), e.addEventListener("focus", this.handleFocus), e.addEventListener("blur", this.handleBlur);
+		});
+	}
+	handleChangeSelectedTab(e) {
+		this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { selectedTab: e }
+		})), this._selectedTabState = e, this._selectedTab = void 0;
+	}
+	handleSelect(e) {
+		let t;
+		this.tabs.forEach((n, r) => {
+			(n === e.target || n.contains(e.target)) && (t = r);
+		}), !(typeof t != "number" || t === this.selectedTab) && this.handleChangeSelectedTab(t);
+	}
+	get classes() {
+		return {
+			container: !0,
+			[this.size]: !0,
+			[this.mode]: !0,
+			[this.variant]: !0,
+			disabled: this.disabled
+		};
+	}
+	get navContainerClasses() {
+		return {
+			"nav-container": !0,
+			"ds-blur": !0,
+			"scroll-left": this.hasScrollLeft,
+			"scroll-right": this.hasScrollRight
+		};
+	}
+	render() {
+		return t`
+            <div part="container" class=${u(this.classes)}>
+                <div class=${u(this.navContainerClasses)}>
                     ${this.getScrollButtonTemplate("left", this.handleScrollLeft)}
-                    <nav tabindex="-1" role="tablist" @scroll=${this.handleScrollNav} @keydown=${this.handleKeyDown}>
+                    <nav tabindex="0" role="tablist" @scroll=${this.handleScrollNav} @keydown=${this.handleKeyDown}>
                         <slot @slotchange=${this.handleTabsSlotchange} name="tab" @click=${this.handleSelect}></slot>
                     </nav>
                     ${this.getScrollButtonTemplate("right", this.handleScrollRight)}
@@ -159,45 +176,25 @@ let r = class extends u {
                 <slot @slotchange=${this.handlePanelSlotchange} name="panel"></slot>
             </div>
         `;
-  }
-};
-r.styles = [y, T, x, L];
-l([
-  n({ type: Number, attribute: "selected-tab", reflect: !0 })
-], r.prototype, "selectedTab", 2);
-l([
-  n({ type: String, reflect: !0 })
-], r.prototype, "mode", 2);
-l([
-  n({ type: String, reflect: !0 })
-], r.prototype, "variant", 2);
-l([
-  n({ type: String })
-], r.prototype, "size", 2);
-l([
-  n({ type: Boolean, converter: v })
-], r.prototype, "disabled", 2);
-l([
-  c()
-], r.prototype, "focusedTabIndex", 2);
-l([
-  S("nav")
-], r.prototype, "nav", 2);
-l([
-  c()
-], r.prototype, "tabs", 2);
-l([
-  c()
-], r.prototype, "panels", 2);
-l([
-  c()
-], r.prototype, "hasScrollLeft", 2);
-l([
-  c()
-], r.prototype, "hasScrollRight", 2);
-r = l([
-  p("ds-tabs")
-], r);
-export {
-  r as DsTabs
-};
+	}
+}, _.styles = [
+	f,
+	p,
+	h,
+	m
+], _);
+a([n({
+	type: Number,
+	attribute: "selected-tab",
+	reflect: !0
+})], v.prototype, "_selectedTab", void 0), a([r()], v.prototype, "_selectedTabState", void 0), a([n({
+	type: String,
+	reflect: !0
+})], v.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({
+	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);
+//#endregion

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

@@ -1,13 +1,12 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const n = t`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-tabs/styles/common.styles.ts
+var t = e`
     :host {
         display: block;
         width: 100%;
     }
-`, i = t`
+`, n = e`
     nav {
         display: flex;
         justify-content: flex-start;
@@ -63,7 +62,7 @@ const n = t`
     .nav-container:hover .nav-arrow {
         visibility: visible;
     }
-`, l = t`
+`, r = e`
     ::slotted([slot='tab']) {
         white-space: nowrap;
         -webkit-user-select: none;
@@ -81,7 +80,7 @@ const n = t`
     ::slotted([slot='tab'][selected]) {
         cursor: auto;
     }
-`, s = t`
+`, i = e`
     ::slotted([slot='panel']) {
         display: none;
     }
@@ -89,9 +88,5 @@ const n = t`
         display: block;
     }
 `;
-export {
-  n as commonStyles,
-  i as navigationStyles,
-  s as panelsStyles,
-  l as tabsStyles
-};
+//#endregion
+export { t as commonStyles, n as navigationStyles, i as panelsStyles, r as tabsStyles };