@cupra/ui-kit 2.0.0-canary.87 → 2.0.0-canary.89

package/dist-react/esm/components/ds-secondary-navigation/ds-secondary-navigation.js

@@ -1,106 +1,100 @@
-import { UiKitElement as f } from "../base/UiKitElement.js";
-import { customUiKitElement as x } from "../../decorators/customUiKitElement.js";
-import { ViewportMixin as v } from "../../mixins/ViewportMixin.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as l, nothing as a } 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 h } 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 g } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { queryAssignedElements as w } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { styleMap as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
-import { commonStyles as y } from "./styles/common.styles.js";
-var S = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (e, t, s, r) => {
-  for (var i = r > 1 ? void 0 : r ? b(t, s) : t, d = e.length - 1, m; d >= 0; d--)
-    (m = e[d]) && (i = (r ? m(t, s, i) : m(i)) || i);
-  return r && i && S(t, s, i), i;
-};
-let o = class extends v(f) {
-  constructor() {
-    super(...arguments), this.dropdownButtonText = "Menu", this.textTransform = "none", this.keepDropdownButtonText = !1, this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
-      this.handleScroll();
-    }), this.handleScroll = () => {
-      var t, s, r, i;
-      const e = ((t = this.itemsContainer) == null ? void 0 : t.scrollLeft) + ((s = this.itemsContainer) == null ? void 0 : s.clientWidth);
-      this.hasScrollLeft = ((r = this.itemsContainer) == null ? void 0 : r.scrollLeft) > 0, this.hasScrollRight = e < ((i = this.itemsContainer) == null ? void 0 : i.scrollWidth);
-    };
-  }
-  updated(e) {
-    super.updated(e), e.has("viewport") && this.updateCtas(), e.has("selectedIndex") && this.updateSelectedItem();
-  }
-  firstUpdated(e) {
-    var t;
-    super.firstUpdated(e), this.handleScroll(), this.resizeObserver.observe(this.itemsContainer), window.addEventListener("resize", this.handleScroll), (t = this.itemsContainer) == null || t.addEventListener("scroll", this.handleScroll);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScroll);
-  }
-  get selectedItemText() {
-    var e, t, s;
-    return this.keepDropdownButtonText ? this.dropdownButtonText : ((s = (t = (e = this.items) == null ? void 0 : e[this.selectedIndex]) == null ? void 0 : t.textContent) == null ? void 0 : s.trim()) || this.dropdownButtonText;
-  }
-  get classes() {
-    return {
-      nav: !0,
-      "ds-blur": !0,
-      "scroll-left": this.hasScrollLeft,
-      "scroll-right": this.hasScrollRight
-    };
-  }
-  toggleItemsDropdown() {
-    this.openItems = !this.openItems, this.openItems && (this.openCtas = !1);
-  }
-  toggleActionsDropdown() {
-    this.openCtas = !this.openCtas, this.openCtas && (this.openItems = !1);
-  }
-  closeDropdowns() {
-    this.openItems = !1;
-  }
-  handleItemsSlotChange() {
-    this.updateSelectedItem();
-  }
-  handleActionsSlotChange() {
-    this.updateCtas();
-  }
-  updateSelectedItem() {
-    var e;
-    (e = this.items) == null || e.forEach((t, s) => {
-      s === this.selectedIndex ? t.classList.add("selected") : t.classList.remove("selected");
-    });
-  }
-  updateCtas() {
-    var e;
-    (e = this.ctas) == null || e.forEach((t) => {
-      ["xxl", "xl"].includes(this.viewport) ? t == null || t.setAttribute("size", "large") : t == null || t.setAttribute("size", "medium");
-    });
-  }
-  handleItemClick(e) {
-    var r, i;
-    const t = e.target, s = ((r = this.items) == null ? void 0 : r.indexOf(t)) ?? -1;
-    if (s !== -1) {
-      this.selectedIndex = s, this.updateSelectedItem();
-      const d = ((i = t.textContent) == null ? void 0 : i.trim()) || t.getAttribute("data-label") || "";
-      this.dispatchEvent(
-        new CustomEvent("ds-secondary-navigation:select", {
-          detail: {
-            index: s,
-            label: d
-          },
-          bubbles: !0,
-          composed: !0
-        })
-      ), this.closeDropdowns();
-    }
-  }
-  get textTransformStyle() {
-    return { textTransform: this.textTransform };
-  }
-  render() {
-    return l`
+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 { o as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as o } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UiKitElement as s } from "../base/UiKitElement.js";
+import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import { e as l } 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 { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
+import { o as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+//#region src/components/ds-secondary-navigation/ds-secondary-navigation.ts
+var p = class extends u(s) {
+	constructor(...e) {
+		super(...e), this.dropdownButtonText = "Menu", this.textTransform = "none", this.keepDropdownButtonText = !1, this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
+			this.handleScroll();
+		}), this.handleScroll = () => {
+			let e = this.itemsContainer?.scrollLeft + this.itemsContainer?.clientWidth;
+			this.hasScrollLeft = this.itemsContainer?.scrollLeft > 0, this.hasScrollRight = e < this.itemsContainer?.scrollWidth;
+		};
+	}
+	static {
+		this.styles = [f];
+	}
+	updated(e) {
+		super.updated(e), e.has("viewport") && this.updateCtas(), e.has("selectedIndex") && this.updateSelectedItem();
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.handleScroll(), this.resizeObserver.observe(this.itemsContainer), window.addEventListener("resize", this.handleScroll), this.itemsContainer?.addEventListener("scroll", this.handleScroll);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScroll);
+	}
+	get selectedItemText() {
+		return this.keepDropdownButtonText ? this.dropdownButtonText : this.items?.[this.selectedIndex]?.textContent?.trim() || this.dropdownButtonText;
+	}
+	get classes() {
+		return {
+			nav: !0,
+			"ds-blur": !0,
+			"scroll-left": this.hasScrollLeft,
+			"scroll-right": this.hasScrollRight
+		};
+	}
+	toggleItemsDropdown() {
+		this.openItems = !this.openItems, this.openItems && (this.openCtas = !1);
+	}
+	toggleActionsDropdown() {
+		this.openCtas = !this.openCtas, this.openCtas && (this.openItems = !1);
+	}
+	closeDropdowns() {
+		this.openItems = !1;
+	}
+	handleItemsSlotChange() {
+		this.updateSelectedItem();
+	}
+	handleActionsSlotChange() {
+		this.updateCtas();
+	}
+	updateSelectedItem() {
+		this.items?.forEach((e, t) => {
+			t === this.selectedIndex ? e.classList.add("selected") : e.classList.remove("selected");
+		});
+	}
+	updateCtas() {
+		this.ctas?.forEach((e) => {
+			["xxl", "xl"].includes(this.viewport) ? e?.setAttribute("size", "large") : e?.setAttribute("size", "medium");
+		});
+	}
+	handleItemClick(e) {
+		let t = e.target, n = this.items?.indexOf(t) ?? -1;
+		if (n !== -1) {
+			this.selectedIndex = n, this.updateSelectedItem();
+			let e = t.textContent?.trim() || t.getAttribute("data-label") || "";
+			this.dispatchEvent(new CustomEvent("ds-secondary-navigation:select", {
+				detail: {
+					index: n,
+					label: e
+				},
+				bubbles: !0,
+				composed: !0
+			})), this.closeDropdowns();
+		}
+	}
+	get textTransformStyle() {
+		return { textTransform: this.textTransform };
+	}
+	render() {
+		return t`
             ${this.backdropTemplate}
             <div class="container gutter">
-                <nav data-testid="ds-secondary-navigation-container" class=${u(this.classes)}>
+                <nav data-testid="ds-secondary-navigation-container" class=${l(this.classes)}>
                     ${this.itemsTemplate}
                     ${this.itemsDropdownButtonTemplate}
                     ${this.actionsTemplate}
@@ -110,134 +104,139 @@ let o = class extends v(f) {
                 ${this.actionsDropdownTemplate}
             </div>
         `;
-  }
-  get itemsTemplate() {
-    return ["l", "xl", "xxl"].includes(this.viewport) ? l`
+	}
+	get itemsTemplate() {
+		return [
+			"l",
+			"xl",
+			"xxl"
+		].includes(this.viewport) ? t`
             <div class="items-container">
-                <div style=${p(this.textTransformStyle)}>
+                <div style=${d(this.textTransformStyle)}>
                     <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
                 </div>
             </div>
-        ` : a;
-  }
-  get actionsTemplate() {
-    const e = ["xxs", "xs", "s"].includes(this.viewport);
-    return !["m", "l", "xl", "xxl"].includes(this.viewport) && !(e && !this.shouldShowActionsDropdown) ? a : l`
-            <div class="actions-container" style=${p(this.textTransformStyle)}>
+        ` : e;
+	}
+	get actionsTemplate() {
+		let n = [
+			"xxs",
+			"xs",
+			"s"
+		].includes(this.viewport);
+		return ![
+			"m",
+			"l",
+			"xl",
+			"xxl"
+		].includes(this.viewport) && !(n && !this.shouldShowActionsDropdown) ? e : t`
+            <div class="actions-container" style=${d(this.textTransformStyle)}>
                 <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
             </div>
         `;
-  }
-  get iconTemplate() {
-    return this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.openItems ? "arrow-down" : "arrow-up",
-      size: 20
-    });
-  }
-  get itemsDropdownButtonTemplate() {
-    return ["xxs", "xs", "s", "m"].includes(this.viewport) ? l`
+	}
+	get iconTemplate() {
+		return this.componentFactory.createIcon({
+			class: "icon",
+			"icon-name": this.openItems ? "arrow-down" : "arrow-up",
+			size: 20
+		});
+	}
+	get itemsDropdownButtonTemplate() {
+		return [
+			"xxs",
+			"xs",
+			"s",
+			"m"
+		].includes(this.viewport) ? t`
             <button
                 class="items-dropdown-button"
                 @click=${this.toggleItemsDropdown}
                 aria-expanded=${this.openItems}
                 aria-haspopup="true"
-                style=${p(this.textTransformStyle)}
+                style=${d(this.textTransformStyle)}
             >
                 <span>${this.selectedItemText}</span>
                 ${this.iconTemplate}
             </button>
-        ` : a;
-  }
-  get itemsDropdownTemplate() {
-    return ["xxs", "xs", "s", "m"].includes(this.viewport) ? l`
+        ` : e;
+	}
+	get itemsDropdownTemplate() {
+		return [
+			"xxs",
+			"xs",
+			"s",
+			"m"
+		].includes(this.viewport) ? t`
             <div
-                class=${u({
-      gutter: !0,
-      "dropdown-container": !0,
-      "items-dropdown": !0,
-      open: this.openItems
-    })}
+                class=${l({
+			gutter: !0,
+			"dropdown-container": !0,
+			"items-dropdown": !0,
+			open: this.openItems
+		})}
                 role="menu"
                 aria-hidden=${!this.openItems}
             >
-                <div class="dropdown ds-blur" style=${p(this.textTransformStyle)}>
+                <div class="dropdown ds-blur" style=${d(this.textTransformStyle)}>
                     <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
                 </div>
             </div>
-        ` : a;
-  }
-  get actionsDropdownButtonTemplate() {
-    return !["xxs", "xs", "s"].includes(this.viewport) || !this.shouldShowActionsDropdown ? a : this.componentFactory.createIconButton({
-      class: "nav-arrow",
-      "data-aria-label": "open actions dropdown",
-      "@click": this.toggleActionsDropdown,
-      size: "medium",
-      "icon-name": "triple-dot-v"
-    });
-  }
-  get actionsDropdownTemplate() {
-    return !["xxs", "xs", "s"].includes(this.viewport) || !this.shouldShowActionsDropdown ? a : l`
+        ` : e;
+	}
+	get actionsDropdownButtonTemplate() {
+		return ![
+			"xxs",
+			"xs",
+			"s"
+		].includes(this.viewport) || !this.shouldShowActionsDropdown ? e : this.componentFactory.createIconButton({
+			class: "nav-arrow",
+			"data-aria-label": "open actions dropdown",
+			"@click": this.toggleActionsDropdown,
+			size: "medium",
+			"icon-name": "triple-dot-v"
+		});
+	}
+	get actionsDropdownTemplate() {
+		return ![
+			"xxs",
+			"xs",
+			"s"
+		].includes(this.viewport) || !this.shouldShowActionsDropdown ? e : t`
             <div
-                class=${u({
-      gutter: !0,
-      "dropdown-container": !0,
-      "actions-dropdown": !0,
-      open: this.openCtas
-    })}
+                class=${l({
+			gutter: !0,
+			"dropdown-container": !0,
+			"actions-dropdown": !0,
+			open: this.openCtas
+		})}
                 role="menu"
                 aria-hidden=${!this.openCtas}
             >
-                <div class="dropdown ds-blur" style=${p(this.textTransformStyle)}>
+                <div class="dropdown ds-blur" style=${d(this.textTransformStyle)}>
                     <slot name="actions"></slot>
                 </div>
             </div>
         `;
-  }
-  get backdropTemplate() {
-    return !this.openItems && !this.openCtas ? a : l`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`;
-  }
-  get shouldShowActionsDropdown() {
-    return this.ctas.length > 1;
-  }
-};
-o.styles = [y];
-n([
-  h({ type: String, attribute: "dropdown-button-text" })
-], o.prototype, "dropdownButtonText", 2);
-n([
-  h({ type: Number, attribute: "selected-index" })
-], o.prototype, "selectedIndex", 2);
-n([
-  h({ type: String, attribute: "text-transform" })
-], o.prototype, "textTransform", 2);
-n([
-  h({ type: Boolean, attribute: "keep-dropdown-button-text" })
-], o.prototype, "keepDropdownButtonText", 2);
-n([
-  c()
-], o.prototype, "openItems", 2);
-n([
-  c()
-], o.prototype, "openCtas", 2);
-n([
-  c()
-], o.prototype, "hasScrollLeft", 2);
-n([
-  c()
-], o.prototype, "hasScrollRight", 2);
-n([
-  w({ slot: "items" })
-], o.prototype, "items", 2);
-n([
-  w({ slot: "actions" })
-], o.prototype, "ctas", 2);
-n([
-  g(".items-container")
-], o.prototype, "itemsContainer", 2);
-o = n([
-  x("ds-secondary-navigation")
-], o);
-export {
-  o as DsSecondaryNavigation
+	}
+	get backdropTemplate() {
+		return !this.openItems && !this.openCtas ? e : t`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`;
+	}
+	get shouldShowActionsDropdown() {
+		return this.ctas.length > 1;
+	}
 };
+o([n({
+	type: String,
+	attribute: "dropdown-button-text"
+})], p.prototype, "dropdownButtonText", void 0), o([n({
+	type: Number,
+	attribute: "selected-index"
+})], p.prototype, "selectedIndex", void 0), o([n({
+	type: String,
+	attribute: "text-transform"
+})], p.prototype, "textTransform", void 0), o([n({
+	type: Boolean,
+	attribute: "keep-dropdown-button-text"
+})], p.prototype, "keepDropdownButtonText", void 0), o([r()], p.prototype, "openItems", void 0), o([r()], p.prototype, "openCtas", void 0), o([r()], p.prototype, "hasScrollLeft", void 0), o([r()], p.prototype, "hasScrollRight", void 0), o([a({ slot: "items" })], p.prototype, "items", void 0), o([a({ slot: "actions" })], p.prototype, "ctas", void 0), o([i(".items-container")], p.prototype, "itemsContainer", void 0), p = o([c("ds-secondary-navigation")], p);
+//#endregion

package/dist-react/esm/components/ds-secondary-navigation/styles/common.styles.js

@@ -1,12 +1,10 @@
-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 o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const p = o`
+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-secondary-navigation/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
 `;
-export {
-  p as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist-react/esm/components/ds-segmented-control/ds-segmented-control.js

@@ -1,71 +1,59 @@
-import { UiKitElement as d } from "../base/UiKitElement.js";
-import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as p } from "../../utils/booleanConverter.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as m } 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 c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { queryAssignedElements as h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { classMap as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as g } from "./styles/common.styles.js";
-var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (t, o, s, r) => {
-  for (var e = r > 1 ? void 0 : r ? y(o, s) : o, i = t.length - 1, n; i >= 0; i--)
-    (n = t[i]) && (e = (r ? n(o, s, e) : n(e)) || e);
-  return r && e && v(o, s, e), e;
-};
-let l = class extends d {
-  constructor() {
-    super(...arguments), this.size = "medium", this.fullWidth = !1;
-  }
-  get classes() {
-    return {
-      container: !0,
-      [this.size]: !0,
-      "full-width": this.fullWidth
-    };
-  }
-  firstUpdated() {
-    this.addEventListener("change", () => this.updateCheckedStates()), this.addEventListener("focusin", (t) => this.updateFocusState(t, !0)), this.addEventListener("focusout", (t) => this.updateFocusState(t, !1)), this.updateCheckedStates();
-  }
-  updateCheckedStates() {
-    this.slottedElements.forEach((t) => {
-      if (t.tagName === "LABEL") {
-        const o = t, s = this.querySelector(`#${o.htmlFor}`);
-        s && o.classList.toggle("checked", s.checked);
-      }
-    });
-  }
-  updateFocusState(t, o) {
-    const s = t.target, r = s.matches(":focus-visible"), e = this.slottedElements.find(
-      (i) => i.tagName === "LABEL" && i.htmlFor === s.id
-    );
-    e && e.classList.toggle("focused", r);
-  }
-  render() {
-    return m`
-            <fieldset class=${f(this.classes)}>
+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 { o as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import { e as s } 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 { commonStyles as c } from "./styles/common.styles.js";
+//#region src/components/ds-segmented-control/ds-segmented-control.ts
+var l = class extends i {
+	constructor(...e) {
+		super(...e), this.size = "medium", this.fullWidth = !1;
+	}
+	static {
+		this.styles = [c];
+	}
+	get classes() {
+		return {
+			container: !0,
+			[this.size]: !0,
+			"full-width": this.fullWidth
+		};
+	}
+	firstUpdated() {
+		this.addEventListener("change", () => this.updateCheckedStates()), this.addEventListener("focusin", (e) => this.updateFocusState(e, !0)), this.addEventListener("focusout", (e) => this.updateFocusState(e, !1)), this.updateCheckedStates();
+	}
+	updateCheckedStates() {
+		this.slottedElements.forEach((e) => {
+			if (e.tagName === "LABEL") {
+				let t = e, n = this.querySelector(`#${t.htmlFor}`);
+				n && t.classList.toggle("checked", n.checked);
+			}
+		});
+	}
+	updateFocusState(e, t) {
+		let n = e.target, r = n.matches(":focus-visible"), i = this.slottedElements.find((e) => e.tagName === "LABEL" && e.htmlFor === n.id);
+		i && i.classList.toggle("focused", r);
+	}
+	render() {
+		return e`
+            <fieldset class=${s(this.classes)}>
                 <slot @slotchange=${this.updateCheckedStates}></slot>
             </fieldset>
         `;
-  }
-};
-l.styles = [g];
-a([
-  c({ type: String })
-], l.prototype, "size", 2);
-a([
-  c({
-    type: Boolean,
-    converter: p,
-    attribute: "full-width"
-  })
-], l.prototype, "fullWidth", 2);
-a([
-  h({ slot: "", flatten: !0 })
-], l.prototype, "slottedElements", 2);
-l = a([
-  u("ds-segmented-control")
-], l);
-export {
-  l as DsSegmentedControl
+	}
 };
+r([t({ type: String })], l.prototype, "size", void 0), r([t({
+	type: Boolean,
+	converter: o,
+	attribute: "full-width"
+})], l.prototype, "fullWidth", void 0), r([n({
+	slot: "",
+	flatten: !0
+})], l.prototype, "slottedElements", void 0), l = r([a("ds-segmented-control")], l);
+//#endregion

package/dist-react/esm/components/ds-segmented-control/styles/common.styles.js

@@ -1,8 +1,7 @@
-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-segmented-control/styles/common.styles.ts
+var t = e`
     :host {
         display: flex;
         flex: 1 1 auto;
@@ -51,6 +50,5 @@ const n = t`
         flex-shrink: 0;
     }
 `;
-export {
-  n as commonStyles
-};
+//#endregion
+export { t as commonStyles };