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

package/dist-react/esm/components/ds-basic-card-image/styles/common.styles.js

@@ -1,13 +1,11 @@
-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 s = 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-basic-card-image/styles/common.styles.ts
+var t = e`
     :host {
         height: 100%;
         width: 100%;
     }
 `;
-export {
-  s as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist-react/esm/components/ds-basic-card-section/ds-basic-card-section.js

@@ -1,52 +1,44 @@
-import { UiKitElement as d } from "../base/UiKitElement.js";
-import { customUiKitElement as l } 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 { nothing as v, html as h } 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 m } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.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 u } from "./styles/common.styles.js";
-var y = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (c, r, o, i) => {
-  for (var e = i > 1 ? void 0 : i ? D(r, o) : r, s = c.length - 1, n; s >= 0; s--)
-    (n = c[s]) && (e = (i ? n(r, o, e) : n(e)) || e);
-  return i && e && y(r, o, e), e;
-};
-let t = class extends d {
-  constructor() {
-    super(...arguments), this.withDivider = !0, this.centered = !0;
-  }
-  get dividerTemplate() {
-    return this.componentFactory.createDivider({
-      class: "divider",
-      variant: "secondary"
-    });
-  }
-  get classes() {
-    return {
-      container: !0,
-      centered: this.centered
-    };
-  }
-  render() {
-    return h`
-            <div part="container" class=${f(this.classes)} data-testid="ds-basic-card-section-container">
+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 { 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 "../ds-divider/ds-divider.js";
+import { commonStyles as l } from "./styles/common.styles.js";
+//#region src/components/ds-basic-card-section/ds-basic-card-section.ts
+var u, d = (u = class extends i {
+	constructor(...e) {
+		super(...e), this.withDivider = !0, this.centered = !0;
+	}
+	get dividerTemplate() {
+		return s`<ds-divider class="divider" variant="secondary"></ds-divider>`;
+	}
+	get classes() {
+		return {
+			container: !0,
+			centered: this.centered
+		};
+	}
+	render() {
+		return t`
+            <div part="container" class=${c(this.classes)} data-testid="ds-basic-card-section-container">
                 <slot></slot>
             </div>
-            ${this.withDivider ? this.dividerTemplate : v}
+            ${this.withDivider ? this.dividerTemplate : e}
         `;
-  }
-};
-t.styles = [u];
-a([
-  m({ type: Boolean, converter: p })
-], t.prototype, "withDivider", 2);
-a([
-  m({ type: Boolean, converter: p })
-], t.prototype, "centered", 2);
-t = a([
-  l("ds-basic-card-section")
-], t);
-export {
-  t as DsBasicCardSection
-};
+	}
+}, u.styles = [l], u);
+r([n({
+	type: Boolean,
+	converter: o
+})], d.prototype, "withDivider", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], d.prototype, "centered", void 0), d = r([a("ds-basic-card-section")], d);
+//#endregion

package/dist-react/esm/components/ds-basic-card-section/styles/common.styles.js

@@ -1,33 +1,21 @@
-import { cssQueries as i } from "../../../utils/cssQueries.js";
-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 p } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const g = p`
+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-basic-card-section/styles/common.styles.ts
+var t = e`
     :host {
         display: flex;
         flex-direction: column;
-        padding: var(--dg-spacing-s-1, 0px) var(--dg-spacing-m-2, 16px);
     }
 
     .container {
         display: flex;
         flex-direction: column;
-        gap: var(--dg-spacing-m-1, 12px);
         height: 100%;
-        padding: var(--dg-spacing-m-4, 24px) var(--dg-spacing-s-1, 0px);
     }
 
     .centered {
         justify-content: center;
     }
-
-    ${i.m} {
-        :host {
-            padding: var(--dg-spacing-s-1, 0px) var(--dg-spacing-m-4, 24px);
-        }
-    }
 `;
-export {
-  g as commonStyles
-};
+//#endregion
+export { t as commonStyles };

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

@@ -0,0 +1,119 @@
+import { E 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 { r as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.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 "../ds-icon/ds-icon.js";
+import { uiKitHtml as a } from "../../utils/uiKitHtml.js";
+import { o } 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-tooltip/ds-tooltip.js";
+import { s, u as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.js";
+import "../ds-breadcrumbs-item/ds-breadcrumbs-item.js";
+import { commonStyles as l } from "./styles/common.styles.js";
+//#region src/components/ds-breadcrumbs/ds-breadcrumbs.ts
+var u, d = [{
+	below: 768,
+	maxItems: 3
+}, {
+	below: 1024,
+	maxItems: 4
+}], f = 5, p = (u = class extends r {
+	constructor(...e) {
+		super(...e), this.items = [], this.maxItems = f, this.itemTag = "ds-breadcrumbs-item", this.onResize = () => {
+			let e = d.find(({ below: e }) => window.innerWidth < e);
+			this.maxItems = (e == null ? void 0 : e.maxItems) ?? f;
+		};
+	}
+	async firstUpdated(e) {
+		super.firstUpdated(e), this.onResize();
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("resize", this.onResize);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("resize", this.onResize);
+	}
+	handleSlotChange(e) {
+		let t = e.target.assignedElements({ flatten: !0 }).filter((e) => e.tagName.toLowerCase().startsWith("ds-breadcrumbs-item"));
+		t.length > 0 && (this.itemTag = t[0].tagName.toLowerCase()), this.items = t.map((e) => {
+			var t, n;
+			return {
+				label: e.getAttribute("label") || ((t = e.textContent) == null ? void 0 : t.trim()) || "",
+				href: e.getAttribute("href") || ((n = e.querySelector("[slot=\"item\"]")) == null ? void 0 : n.getAttribute("href")) || void 0,
+				disabled: e.hasAttribute("disabled"),
+				loading: e.hasAttribute("loading"),
+				selected: e.hasAttribute("selected")
+			};
+		});
+	}
+	get separatorIcon() {
+		return a`<ds-icon class="separator-icon" icon-name="arrow-right" size="24"></ds-icon>`;
+	}
+	itemTemplate(t, n) {
+		let r = t.selected, i = s(this.itemTag), a = r || t.disabled || !t.href ? c`<span slot="item">${t.label}</span>` : c`<a href=${t.href} slot="item">${t.label}</a>`;
+		return c`<li class="breadcrumb-list-item">
+            <${i}
+                ?selected=${r}
+                ?disabled=${t.disabled}
+                ?loading=${t.loading}
+            >
+                ${a}
+            </${i}>
+            ${n ? e : this.separatorIcon}
+        </li>`;
+	}
+	get slotTemplate() {
+		return c`<slot @slotchange=${this.handleSlotChange} style="display: none;"></slot>`;
+	}
+	get overflowMenuTemplate() {
+		return c`<ul class="overflow-menu" role="menu">
+            ${this.items.slice(1, this.items.length - (this.maxItems - 2)).map((e) => c`
+                    <li class="overflow-menu-item" role="none">
+                        <a href=${o(e.href)} class="overflow-menu-link" role="menuitem">${e.label}</a>
+                    </li>
+                `)}
+        </ul>`;
+	}
+	get overflowTriggerTemplate() {
+		return c`<button class="overflow-trigger">
+            <span class="overflow-label">...</span>
+        </button>`;
+	}
+	get tooltipTemplate() {
+		return a`<ds-tooltip class="breadcrumbs-tooltip">
+            ${this.overflowTriggerTemplate}
+            <div slot="content">${this.overflowMenuTemplate}</div>
+        </ds-tooltip>`;
+	}
+	get listTemplate() {
+		let { items: e, maxItems: t } = this;
+		if (e.length <= t) return e.map((t, n) => this.itemTemplate(t, n === e.length - 1));
+		let n = e.slice(e.length - (t - 2));
+		return c`
+            ${this.itemTemplate(e[0], !1)}
+            <li class="breadcrumb-list-item">
+                <div class="overflow-item-wrapper">
+                    ${this.tooltipTemplate}
+                    ${this.separatorIcon}
+                </div>
+            </li>
+            ${n.map((e, t) => this.itemTemplate(e, t === n.length - 1))}
+        `;
+	}
+	render() {
+		return c`
+            ${this.slotTemplate}
+            <nav class="container" aria-label="Breadcrumb">
+                <ol class="breadcrumb-list">
+                    ${this.listTemplate}
+                </ol>
+            </nav>
+        `;
+	}
+}, u.styles = [l], u);
+n([t()], p.prototype, "items", void 0), n([t()], p.prototype, "maxItems", void 0), n([t()], p.prototype, "itemTag", void 0), p = n([i("ds-breadcrumbs")], p);
+//#endregion

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

@@ -0,0 +1,112 @@
+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-breadcrumbs/styles/common.styles.ts
+var t = e`
+    .breadcrumb-list {
+        display: flex;
+        align-items: center;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        flex-wrap: nowrap;
+        gap: var(--ds-spacing-s-3);
+        width: 100%;
+    }
+
+    .breadcrumb-list-item {
+        display: flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-3);
+    }
+
+    .separator-icon {
+        --ui-kit-icon-color: var(--ds-color-text-default-subtlest);
+    }
+
+    .breadcrumbs-tooltip::part(container) {
+        max-height: none;
+        max-width: none;
+        overflow: visible;
+        padding: 0;
+    }
+
+    .overflow-item-wrapper {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-3);
+    }
+
+    .overflow-trigger {
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+
+        &:focus-visible {
+            outline-offset: var(--ds-border-radius-xxs);
+            border-radius: var(--ds-border-radius-xxs);
+            outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        }
+
+        &:disabled {
+            cursor: default;
+
+            .overflow-label {
+                color: var(--ds-color-text-disabled);
+            }
+        }
+    }
+
+    .overflow-label {
+        color: var(--ds-color-text-default-subtlest);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+        font-weight: var(--ds-typography-weight-body-secondary);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+    }
+
+    .overflow-menu {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+    }
+
+    .overflow-menu-item {
+        display: flex;
+        min-height: 40px;
+        padding: var(--ds-spacing-s-5) var(--ds-spacing-m-1);
+        align-items: center;
+        gap: var(--ds-spacing-s-5);
+        align-self: stretch;
+        border-radius: var(--ds-border-radius-none);
+        border-bottom: 1px solid var(--ds-color-border-default-subtle);
+        text-decoration: none;
+
+        &:hover {
+            cursor: pointer;
+            background: var(--ds-color-control-bg-hover);
+        }
+
+        &:focus,
+        &:focus-visible {
+            background: var(--ds-color-control-bg-hover);
+            outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        }
+    }
+
+    .overflow-menu-link {
+        overflow: hidden;
+        color: var(--ds-color-text-default);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font: var(--ds-typography-weight-body-secondary) var(--ds-typography-size-body-m) /
+            var(--ds-typography-height-body-m) var(--ds-typography-family-primary);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        margin: 0;
+        text-decoration: none;
+    }
+`;
+//#endregion
+export { t as commonStyles };

package/dist-react/esm/components/ds-breadcrumbs-item/ds-breadcrumbs-item.js

@@ -0,0 +1,47 @@
+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 { booleanConverter as a } from "../../utils/booleanConverter.js";
+import { e as o } 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 s } from "./styles/common.styles.js";
+//#region src/components/ds-breadcrumbs-item/ds-breadcrumbs-item.ts
+var c, l = (c = class extends r {
+	constructor(...e) {
+		super(...e), this.selected = !1, this.disabled = !1, this.loading = !1;
+	}
+	get classes() {
+		return {
+			"item-wrapper": !0,
+			selected: this.selected,
+			disabled: this.disabled,
+			loading: this.loading
+		};
+	}
+	render() {
+		let t = this.loading ? e`<div class="skeleton-placeholder"></div>` : e`<slot name="item"></slot>`;
+		return e`
+            <div class=${o(this.classes)} part="item-wrapper">
+                ${t}
+            </div>
+        `;
+	}
+}, c.styles = [s], c);
+n([t({
+	type: Boolean,
+	converter: a,
+	reflect: !0
+})], l.prototype, "selected", void 0), n([t({
+	type: Boolean,
+	converter: a,
+	reflect: !0
+})], l.prototype, "disabled", void 0), n([t({
+	type: Boolean,
+	converter: a,
+	reflect: !0
+})], l.prototype, "loading", void 0), l = n([i("ds-breadcrumbs-item")], l);
+//#endregion

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

@@ -0,0 +1,77 @@
+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-breadcrumbs-item/styles/common.styles.ts
+var t = e`
+    .item-wrapper {
+        display: flex;
+        align-items: center;
+        width: fit-content;
+        cursor: default;
+
+        &:focus,
+        &:focus-visible {
+            outline-offset: var(--ds-border-radius-xxs);
+            border-radius: var(--ds-border-radius-xxs);
+            outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        }
+    }
+
+    :host(:not([selected]):not([disabled]):not([loading]):hover) {
+        ::slotted([slot='item']) {
+            color: var(--ds-color-text-default-subtle);
+            cursor: pointer;
+        }
+    }
+
+    ::slotted([slot='item']) {
+        max-width: 208px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        vertical-align: middle;
+        color: var(--ds-color-text-default-subtlest);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+        font-weight: var(--ds-typography-weight-body-secondary);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        text-decoration: none;
+        cursor: default;
+    }
+
+    .selected ::slotted([slot='item']) {
+        color: var(--ds-color-text-selected-subtle);
+        font-weight: var(--ds-typography-weight-body-tertiary);
+    }
+
+    .disabled {
+        ::slotted([slot='item']) {
+            color: var(--ds-color-text-disabled);
+        }
+
+        &:hover {
+            color: var(--ds-color-text-disabled);
+        }
+    }
+
+    @keyframes shimmer {
+        0% {
+            background-position: 200% 0;
+        }
+        100% {
+            background-position: -200% 0;
+        }
+    }
+
+    .loading .skeleton-placeholder {
+        display: block;
+        width: 48px;
+        height: 16px;
+        background: var(--ds-skeleton-bg-color-default);
+        background-size: 200% 100%;
+        animation: shimmer 3s infinite linear;
+    }
+`;
+//#endregion
+export { t as commonStyles };

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

@@ -1,79 +1,68 @@
-import { UiKitElement as a } from "../base/UiKitElement.js";
-import { customUiKitElement as h } from "../../decorators/customUiKitElement.js";
-import { htmlWithTokens as b } from "../../utils/htmlWithTokens.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as p, nothing as d } 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 { classMap as c } 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 f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, t, l, i) => {
-  for (var s = i > 1 ? void 0 : i ? y(t, l) : t, u = e.length - 1, m; u >= 0; u--)
-    (m = e[u]) && (s = (i ? m(t, l, s) : m(s)) || s);
-  return i && s && f(t, l, s), s;
-};
-let r = class extends a {
-  constructor() {
-    super(...arguments), this.mode = "light", this.activeBulletIndex = 0, this.handleClickChunk = (e) => () => {
-      this.activeBulletIndex !== e && (this.activeBulletIndex = e, this.dispatchEvent(
-        new CustomEvent("change", {
-          bubbles: !0,
-          composed: !0,
-          detail: {
-            index: e
-          }
-        })
-      ));
-    };
-  }
-  get bulletsTemplate() {
-    const e = [];
-    for (let t = 0; t < this.bulletsNumber; t++) {
-      const l = {
-        bullet: !0,
-        active: t === this.activeBulletIndex
-      };
-      e.push(p`
-                <div @click=${this.handleClickChunk(t)} class=${c(l)}></div>
+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 { e as o } 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 s } from "./styles/common.styles.js";
+//#region src/components/ds-bullets/ds-bullets.ts
+var c, l = (c = class extends i {
+	constructor(...e) {
+		super(...e), this.mode = "light", this.activeBulletIndex = 0, this.handleClickChunk = (e) => () => {
+			this.activeBulletIndex !== e && (this.activeBulletIndex = e, this.dispatchEvent(new CustomEvent("change", {
+				bubbles: !0,
+				composed: !0,
+				detail: { index: e }
+			})));
+		};
+	}
+	get bulletsTemplate() {
+		let e = [];
+		for (let n = 0; n < this.bulletsNumber; n++) {
+			let r = {
+				bullet: !0,
+				active: n === this.activeBulletIndex
+			};
+			e.push(t`
+                <div @click=${this.handleClickChunk(n)} class=${o(r)}></div>
             `);
-    }
-    return e;
-  }
-  get classes() {
-    return {
-      container: !0,
-      [this.mode]: !0
-    };
-  }
-  get styleTokens() {
-    return b`
+		}
+		return e;
+	}
+	get classes() {
+		return {
+			container: !0,
+			[this.mode]: !0
+		};
+	}
+	get styleTokens() {
+		return t`
                 <style>
                     :host{
                         color-scheme: ${this.mode};
                     }
                 </style>
         `;
-  }
-  render() {
-    return this.bulletsNumber > 0 ? p`
+	}
+	render() {
+		return this.bulletsNumber > 0 ? t`
                   ${this.styleTokens}
-                  <div class=${c(this.classes)}>${this.bulletsTemplate}</div>
-              ` : d;
-  }
-};
-r.styles = [v];
-o([
-  n({ type: String, reflect: !0 })
-], r.prototype, "mode", 2);
-o([
-  n({ type: Number, attribute: "bullets-number" })
-], r.prototype, "bulletsNumber", 2);
-o([
-  n({ type: Number, attribute: "active-bullet-index", reflect: !0 })
-], r.prototype, "activeBulletIndex", 2);
-r = o([
-  h("ds-bullets")
-], r);
-export {
-  r as DsBullets
-};
+                  <div class=${o(this.classes)}>${this.bulletsTemplate}</div>
+              ` : e;
+	}
+}, c.styles = [s], c);
+r([n({
+	type: String,
+	reflect: !0
+})], l.prototype, "mode", void 0), r([n({
+	type: Number,
+	attribute: "bullets-number"
+})], l.prototype, "bulletsNumber", void 0), r([n({
+	type: Number,
+	attribute: "active-bullet-index",
+	reflect: !0
+})], l.prototype, "activeBulletIndex", void 0), l = r([a("ds-bullets")], l);
+//#endregion