@cupra/ui-kit 2.0.0-canary.17 → 2.0.0-canary.171

package/dist-react/esm/components/ds-chip/ds-chip.js

@@ -1,40 +1,38 @@
-import { UiKitElement as h } from "../base/UiKitElement.js";
-import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as d } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as m } from "../../utils/htmlWithTokens.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as u, html as y } 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 f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.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 v } from "./styles/common.styles.js";
-var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (e, l, r, s) => {
-  for (var o = s > 1 ? void 0 : s ? k(l, r) : l, a = e.length - 1, c; a >= 0; a--)
-    (c = e[a]) && (o = (s ? c(l, r, o) : c(o)) || o);
-  return s && o && g(l, r, o), o;
-};
-let t = class extends h {
-  constructor() {
-    super(...arguments), this.mode = "light", this.size = "large", this.selected = !1, this.deselectable = !1, this.slottedText = "";
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e);
-    const r = this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 });
-    this.slottedText = r.filter((s) => s.nodeType === Node.TEXT_NODE).map((s) => s.textContent.trim()).join(" ");
-  }
-  get classes() {
-    return {
-      container: !0,
-      "ds-blur": !0,
-      [this.size]: !0,
-      [this.mode]: !!this.mode,
-      selected: this.selected,
-      deselectable: this.deselectable
-    };
-  }
-  get styleTokens() {
-    return m`
+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 "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
+import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { e as c } 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 l } 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 { commonStyles as u } from "./styles/common.styles.js";
+//#region src/components/ds-chip/ds-chip.ts
+var d, f = (d = class extends i {
+	constructor(...e) {
+		super(...e), this.mode = "light", this.size = "large", this.selected = !1, this.deselectable = !1, this.slottedText = "", this.handleSlotChange = (e) => {
+			let t = e.target.assignedNodes({ flatten: !0 });
+			this.slottedText = t.filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => e.textContent.trim()).join(" "), this.requestUpdate();
+		};
+	}
+	get classes() {
+		return {
+			container: !0,
+			"ds-blur": !0,
+			[this.size]: !0,
+			[this.mode]: !!this.mode,
+			selected: this.selected,
+			deselectable: this.deselectable
+		};
+	}
+	get styleTokens() {
+		return t`
                 <style>
                     :host{
                         color-scheme: ${this.mode};
@@ -42,90 +40,77 @@ let t = class extends h {
                     }
                 </style>
         `;
-  }
-  handleClick() {
-    this.selected || this.dispatchEvent(
-      new CustomEvent("select", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          value: this.value
-        }
-      })
-    );
-  }
-  handleKeyDown(e) {
-    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
-  }
-  handleClickIcon(e) {
-    e.stopImmediatePropagation(), !(!this.deselectable || !this.selected) && this.dispatchEvent(
-      new CustomEvent("deselect", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          value: this.value
-        }
-      })
-    );
-  }
-  handleKeyDownIcon(e) {
-    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClickIcon(e));
-  }
-  get iconTemplate() {
-    if (!this.selected || !this.deselectable) return u;
-    const e = this.mode === "light" ? "dark" : "light";
-    return this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": "cross",
-      "data-testid": "ds-chip-icon",
-      "@click": this.handleClickIcon,
-      "@keydown": this.handleKeyDownIcon,
-      role: "button",
-      "aria-label": `deselect ${this.slottedText}`,
-      tabindex: "0",
-      mode: e
-    });
-  }
-  render() {
-    return y`
+	}
+	handleClick() {
+		this.selected || this.dispatchEvent(new CustomEvent("select", {
+			bubbles: !0,
+			composed: !0,
+			detail: { value: this.value }
+		}));
+	}
+	handleKeyDown(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
+	}
+	handleClickIcon(e) {
+		e.stopImmediatePropagation(), !(!this.deselectable || !this.selected) && this.dispatchEvent(new CustomEvent("deselect", {
+			bubbles: !0,
+			composed: !0,
+			detail: { value: this.value }
+		}));
+	}
+	handleKeyDownIcon(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClickIcon(e));
+	}
+	get leadingIconTemplate() {
+		return this.iconName ? s`<ds-icon class="icon" icon-name=${l(this.iconName)}></ds-icon>` : e;
+	}
+	get iconTemplate() {
+		return !this.selected || !this.deselectable ? e : s`<ds-icon
+            class="icon"
+            icon-name="cross"
+            mode=${this.mode === "light" ? "dark" : "light"}
+            data-testid="ds-chip-icon"
+            @click=${this.handleClickIcon}
+            @keydown=${this.handleKeyDownIcon}
+            role="button"
+            aria-label=${`deselect ${this.slottedText}`}
+            tabindex="0"
+        ></ds-icon>`;
+	}
+	render() {
+		return t`
             ${this.styleTokens}
             <div
                 role="button"
                 aria-label=${`chip ${this.slottedText}`}
                 tabindex="0"
                 data-testid="ds-chip-container"
-                class=${b(this.classes)}
+                class=${c(this.classes)}
                 @click=${this.handleClick}
                 @keydown=${this.handleKeyDown}
             >
-                <slot></slot>
+                ${this.leadingIconTemplate}
+                <slot @slotchange=${this.handleSlotChange}></slot>
                 ${this.iconTemplate}
             </div>
         `;
-  }
-};
-t.styles = [v];
-i([
-  n({ type: String })
-], t.prototype, "value", 2);
-i([
-  n({ type: String, reflect: !0 })
-], t.prototype, "mode", 2);
-i([
-  n({ type: String, reflect: !0 })
-], t.prototype, "size", 2);
-i([
-  n({ type: Boolean, converter: d, reflect: !0 })
-], t.prototype, "selected", 2);
-i([
-  n({ type: Boolean, converter: d })
-], t.prototype, "deselectable", 2);
-i([
-  f()
-], t.prototype, "slottedText", 2);
-t = i([
-  p("ds-chip")
-], t);
-export {
-  t as DsChip
-};
+	}
+}, d.styles = [u], d);
+r([n({ type: String })], f.prototype, "value", void 0), r([n({
+	type: String,
+	reflect: !0
+})], f.prototype, "mode", void 0), r([n({
+	type: String,
+	reflect: !0
+})], f.prototype, "size", void 0), r([n({
+	type: Boolean,
+	converter: o,
+	reflect: !0
+})], f.prototype, "selected", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], f.prototype, "deselectable", void 0), r([n({
+	type: String,
+	attribute: "icon-name"
+})], f.prototype, "iconName", void 0), f = r([a("ds-chip")], f);
+//#endregion

package/dist-react/esm/components/ds-chip/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 e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const r = e`
+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-chip/styles/common.styles.ts
+var t = e`
     :host {
         display: inline-block;
     }
@@ -20,6 +19,5 @@ const r = e`
         pointer-events: visible;
     }
 `;
-export {
-  r as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist-react/esm/components/ds-chips/ds-chips.js

@@ -1,100 +1,99 @@
-import { UiKitElement as p } from "../base/UiKitElement.js";
-import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
-import { arrayConverter as m } from "../../utils/arrayConverter.js";
-import { booleanConverter as u } 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 C, html as v } 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 o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { queryAssignedElements as S } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.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 } from "./styles/common.styles.js";
-var g = Object.defineProperty, z = Object.getOwnPropertyDescriptor, h = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? z(t, s) : t, a = e.length - 1, c; a >= 0; a--)
-    (c = e[a]) && (r = (i ? c(t, s, r) : c(r)) || r);
-  return i && r && g(t, s, r), r;
-};
-let l = class extends p {
-  constructor() {
-    super(...arguments), this.multiChoice = null, this.size = "medium", this.mode = "light", this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
-      this.handleScrollNav();
-    }), this.handleScrollNav = () => {
-      var t, s, i, r;
-      const e = ((t = this.chipsContainer) == null ? void 0 : t.scrollLeft) + ((s = this.chipsContainer) == null ? void 0 : s.clientWidth);
-      this.hasScrollLeft = ((i = this.chipsContainer) == null ? void 0 : i.scrollLeft) > 0, this.hasScrollRight = e < ((r = this.chipsContainer) == null ? void 0 : r.scrollWidth);
-    }, this.handleScrollLeft = () => {
-      this.chipsContainer.scrollBy({ left: -150, behavior: "smooth" });
-    }, this.handleScrollRight = () => {
-      this.chipsContainer.scrollBy({ left: 150, behavior: "smooth" });
-    };
-  }
-  firstUpdated() {
-    this.handleScrollNav(), this.resizeObserver.observe(this.chipsContainer), this.chips.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.chipsContainer.addEventListener("scroll", this.handleScrollNav);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScrollNav), this.chipsContainer.removeEventListener("scroll", this.handleScrollNav);
-  }
-  getScrollButtonTemplate(e, t) {
-    if (e === "left" && !this.hasScrollLeft || e === "right" && !this.hasScrollRight)
-      return C;
-    const s = `arrow-${e}`;
-    return this.componentFactory.createIconButton({
-      class: `scroll-button ${e}`,
-      "data-testid": `scroll-button-${e}`,
-      "data-aria-label": `scroll-button-${e}`,
-      "@click": t,
-      size: this.size || "large",
-      "icon-name": s,
-      variant: "naked",
-      mode: this.mode
-    });
-  }
-  updated(e) {
-    super.updated(e), (e.has("selectedChips") || e.has("multiChoice") || e.has("size") || e.has("mode")) && this.updateChildChips();
-  }
-  updateChildChips() {
-    var e;
-    (e = this.chips) == null || e.forEach((t) => {
-      var s, i;
-      t.size = this.size, t.selected = (i = (s = this.selectedChips) == null ? void 0 : s.includes) == null ? void 0 : i.call(s, t.value), t.deselectable = !!this.multiChoice, t.mode = this.mode;
-    });
-  }
-  get chipsContainerClasses() {
-    return {
-      "chips-container": !0,
-      "scroll-left": this.hasScrollLeft,
-      "scroll-right": this.hasScrollRight
-    };
-  }
-  handleSelect(e) {
-    var s, i;
-    let t;
-    this.multiChoice && !((i = (s = this.selectedChips) == null ? void 0 : s.includes) != null && i.call(s, e.detail.value)) ? t = [...this.selectedChips || [], e.detail.value] : t = [e.detail.value], this.selectedChips = t, this.updateChildChips(), this.dispatchEvent(
-      new CustomEvent("ds-chips:change", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          selectedChips: t
-        }
-      })
-    );
-  }
-  handleDeselect(e) {
-    const t = [...(this.selectedChips || []).filter((s) => s !== e.detail.value)];
-    this.selectedChips = t, this.updateChildChips(), this.dispatchEvent(
-      new CustomEvent("ds-chips:change", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          selectedChips: t
-        }
-      })
-    );
-  }
-  render() {
-    return v`
+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.133.0/helpers/esm/decorate.js";
+import { UiKitElement as s } from "../base/UiKitElement.js";
+import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as l } from "../../utils/booleanConverter.js";
+import { uiKitHtml as u } from "../../utils/uiKitHtml.js";
+import { e as d } 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 f } 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 { arrayConverter as p } from "../../utils/arrayConverter.js";
+import { commonStyles as m } from "./styles/common.styles.js";
+//#region src/components/ds-chips/ds-chips.ts
+var h, g = (h = class extends s {
+	constructor(...e) {
+		super(...e), this.multiChoice = null, this.size = "medium", this.mode = "light", this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
+			this.handleScrollNav();
+		}), this.handleScrollNav = () => {
+			var e, t, n, r;
+			let i = ((e = this.chipsContainer) == null ? void 0 : e.scrollLeft) + ((t = this.chipsContainer) == null ? void 0 : t.clientWidth);
+			this.hasScrollLeft = ((n = this.chipsContainer) == null ? void 0 : n.scrollLeft) > 0, this.hasScrollRight = i < ((r = this.chipsContainer) == null ? void 0 : r.scrollWidth);
+		}, this.handleScrollLeft = () => {
+			this.chipsContainer.scrollBy({
+				left: -150,
+				behavior: "smooth"
+			});
+		}, this.handleScrollRight = () => {
+			this.chipsContainer.scrollBy({
+				left: 150,
+				behavior: "smooth"
+			});
+		};
+	}
+	firstUpdated() {
+		this.handleScrollNav(), this.resizeObserver.observe(this.chipsContainer), this.chips.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.chipsContainer.addEventListener("scroll", this.handleScrollNav);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScrollNav), this.chipsContainer.removeEventListener("scroll", this.handleScrollNav);
+	}
+	getScrollButtonTemplate(t, n) {
+		if (t === "left" && !this.hasScrollLeft || t === "right" && !this.hasScrollRight) return e;
+		let r = `arrow-${t}`;
+		return u`<ds-icon-button
+            class=${`scroll-button ${t}`}
+            data-testid=${`scroll-button-${t}`}
+            data-aria-label=${`scroll-button-${t}`}
+            @click=${n}
+            size=${this.size || "large"}
+            icon-name=${r}
+            variant="rounded"
+            mode=${f(this.mode)}
+        ></ds-icon-button>`;
+	}
+	updated(e) {
+		super.updated(e), (e.has("selectedChips") || e.has("multiChoice") || e.has("size") || e.has("mode")) && this.updateChildChips();
+	}
+	updateChildChips() {
+		var e;
+		(e = this.chips) == null || e.forEach((e) => {
+			var t, n;
+			e.size = this.size, e.selected = (t = this.selectedChips) == null || (n = t.includes) == null ? void 0 : n.call(t, e.value), e.deselectable = !!this.multiChoice, e.mode = this.mode;
+		});
+	}
+	get chipsContainerClasses() {
+		return {
+			"chips-container": !0,
+			"scroll-left": this.hasScrollLeft,
+			"scroll-right": this.hasScrollRight
+		};
+	}
+	handleSelect(e) {
+		var t, n;
+		let r;
+		r = this.multiChoice && !(!((t = this.selectedChips) == null || (n = t.includes) == null) && n.call(t, e.detail.value)) ? [...this.selectedChips || [], e.detail.value] : [e.detail.value], this.selectedChips = r, this.updateChildChips(), this.dispatchEvent(new CustomEvent("ds-chips:change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { selectedChips: r }
+		}));
+	}
+	handleDeselect(e) {
+		let t = [...(this.selectedChips || []).filter((t) => t !== e.detail.value)];
+		this.selectedChips = t, this.updateChildChips(), this.dispatchEvent(new CustomEvent("ds-chips:change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { selectedChips: t }
+		}));
+	}
+	render() {
+		return t`
             <div
                 class="container"
                 data-testid="ds-chips-container"
@@ -102,42 +101,25 @@ let l = class extends p {
                 @deselect=${this.handleDeselect}
             >
                 ${this.getScrollButtonTemplate("left", this.handleScrollLeft)}
-                <nav tabindex="0" class=${b(this.chipsContainerClasses)}>
+                <nav tabindex="0" class=${d(this.chipsContainerClasses)}>
                     <slot @slotchange=${this.updateChildChips}></slot>
                 </nav>
                 ${this.getScrollButtonTemplate("right", this.handleScrollRight)}
             </div>
         `;
-  }
-};
-l.styles = [y];
-h([
-  o({ type: Array, attribute: "selected-chips", converter: m, reflect: !0 })
-], l.prototype, "selectedChips", 2);
-h([
-  o({ type: Boolean, attribute: "multi-choice", converter: u })
-], l.prototype, "multiChoice", 2);
-h([
-  o({ type: String })
-], l.prototype, "size", 2);
-h([
-  o({ type: String, reflect: !0 })
-], l.prototype, "mode", 2);
-h([
-  n()
-], l.prototype, "hasScrollLeft", 2);
-h([
-  n()
-], l.prototype, "hasScrollRight", 2);
-h([
-  S({ slot: "" })
-], l.prototype, "chips", 2);
-h([
-  f(".chips-container")
-], l.prototype, "chipsContainer", 2);
-l = h([
-  d("ds-chips")
-], l);
-export {
-  l as DsChips
-};
+	}
+}, h.styles = [m], h);
+o([n({
+	type: Array,
+	attribute: "selected-chips",
+	converter: p,
+	reflect: !0
+})], g.prototype, "selectedChips", void 0), o([n({
+	type: Boolean,
+	attribute: "multi-choice",
+	converter: l
+})], g.prototype, "multiChoice", void 0), o([n({ type: String })], g.prototype, "size", void 0), o([n({
+	type: String,
+	reflect: !0
+})], g.prototype, "mode", void 0), o([r()], g.prototype, "hasScrollLeft", void 0), o([r()], g.prototype, "hasScrollRight", void 0), o([a({ slot: "" })], g.prototype, "chips", void 0), o([i(".chips-container")], g.prototype, "chipsContainer", void 0), g = o([c("ds-chips")], g);
+//#endregion

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

@@ -1,14 +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 a = 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-chips/styles/common.styles.ts
+var t = e`
     .container {
         display: inline-flex;
         position: relative;
         max-width: 100%;
         position: relative;
-        --ds-chips-fade-width: 54px;
     }
 
     .chips-container {
@@ -20,40 +18,6 @@ const a = t`
         scroll-behavior: smooth;
     }
 
-    .chips-container.scroll-left:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: var(--ds-chips-fade-width);
-        height: 100%;
-        pointer-events: none;
-        background: linear-gradient(
-            to right,
-            var(--ds-chips-fade-color) 0%,
-            var(--ds-chips-fade-color) 40%,
-            rgba(255, 255, 255, 0) 100%
-        );
-        z-index: var(--ds-z-index-default, 1);
-    }
-
-    .chips-container.scroll-right:after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: var(--ds-chips-fade-width);
-        height: 100%;
-        pointer-events: none;
-        background: linear-gradient(
-            to left,
-            var(--ds-chips-fade-color) 0%,
-            var(--ds-chips-fade-color) 40%,
-            rgba(255, 255, 255, 0) 100%
-        );
-        z-index: var(--ds-z-index-default, 1);
-    }
-
     //.chips-container.scroll-left.scroll-right {
     //    mask-image: linear-gradient(
     //        to right,
@@ -76,8 +40,10 @@ const a = t`
     }
 
     .scroll-button {
+        display: block;
         position: absolute;
-        top: 0;
+        top: 50%;
+        transform: translateY(-50%);
         z-index: 2;
     }
 
@@ -89,6 +55,5 @@ const a = t`
         right: 0;
     }
 `;
-export {
-  a as commonStyles
-};
+//#endregion
+export { t as commonStyles };