@cupra/ui-kit 1.0.0-canary.8 → 1.0.0

package/dist-react/components/base/ds-base-input/styles/cupra.styles.js

@@ -0,0 +1,124 @@
+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 r } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const o = r`
+    .container {
+        padding: 16px 0 0 0;
+    }
+    .inner-container {
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        margin-top: 4px;
+    }
+    .light .inner-container {
+        border-bottom-color: var(--ds-color-dark-grey);
+    }
+    .dark .inner-container {
+        border-bottom-color: var(--ds-color-medium-grey);
+    }
+    .success.light .inner-container {
+        border-bottom-color: var(--ds-color-green-100);
+    }
+    .success.dark .inner-container {
+        border-bottom-color: var(--ds-color-green-100);
+    }
+    :focus.light .inner-container {
+        border-bottom-color: var(--ds-color-black);
+    }
+    .focused.dark .inner-container {
+        border-bottom-color: var(--ds-color-light-grey);
+    }
+    .error.light .inner-container {
+        border-bottom-color: #b50303;
+    }
+    .error.dark .inner-container {
+        border-bottom-color: #ec8b8b;
+    }
+    .disabled.light .inner-container {
+        border-bottom-color: var(--ds-color-medium-grey);
+    }
+    .disabled.dark .inner-container {
+        border-bottom-color: var(--ds-color-dark-grey);
+    }
+    .input-field {
+        padding: 0 0 8px 0;
+    }
+    .large .input-field {
+        font: var(--ds-font-cupra-light-30-title);
+    }
+    .small .input-field {
+        font: var(--ds-font-cupra-light-20-title);
+    }
+    .light .input-field {
+        color: var(--ds-color-black);
+    }
+    .dark .input-field {
+        color: var(--ds-color-white);
+    }
+    .disabled.light .input-field {
+        color: var(--ds-color-off-white);
+    }
+    .disabled.dark .input-field {
+        color: var(--ds-color-grey);
+    }
+    .error-text {
+        font: var(--ds-font-cupra-light-10);
+        margin-top: 4px;
+    }
+    .light .error-text {
+        color: #b50303;
+    }
+    .dark .error-text {
+        color: #ec8b8b;
+    }
+    .helper-text {
+        font: var(--ds-font-cupra-light-10);
+        margin-top: 4px;
+    }
+    .light .helper-text {
+        color: var(--ds-color-grey);
+    }
+    .dark .helper-text {
+        color: var(--ds-color-off-white);
+    }
+    .disabled.light .helper-text {
+        color: var(--ds-color-off-white);
+    }
+    .disabled.dark .helper-text {
+        color: var(--ds-color-grey);
+    }
+    .large .label {
+        font: var(--ds-font-cupra-light-30-title);
+    }
+    .small .label {
+        font: var(--ds-font-cupra-light-20-title);
+    }
+    .light .label {
+        color: var(--ds-color-grey);
+    }
+    .dark .label {
+        color: var(--ds-color-off-white);
+    }
+    .disabled.light .label {
+        color: var(--ds-color-off-white);
+    }
+    .disabled.dark .label {
+        color: var(--ds-color-grey);
+    }
+    .light .icon {
+        --ds-icon-color: var(--ds-color-dark-grey);
+    }
+    .dark .icon {
+        --ds-icon-color: var(--ds-color-light-grey);
+    }
+    .disabled.light .icon {
+        --ds-icon-color: var(--ds-color-medium-grey);
+    }
+    .disabled.dark .icon {
+        --ds-icon-color: var(--ds-color-dark-grey);
+    }
+`, d = [o];
+export {
+  d as cupraStyles
+};

package/dist-react/components/base/ds-base-progress-bar/ds-base-progress-bar.js

@@ -0,0 +1,64 @@
+import { DsUiElement as n } from "../DsUiElement.js";
+import { booleanConverter as h } from "../../../utils/booleanConverter.js";
+import { htmlWithTokens as c } 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 f } 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 s } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as y } 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";
+import { cupraDiagonalStyles as d } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as v } from "./styles/cupra.styles.js";
+import { seatStyles as g } from "./styles/seat.styles.js";
+var S = Object.defineProperty, i = (m, l, p, k) => {
+  for (var t = void 0, o = m.length - 1, a; o >= 0; o--)
+    (a = m[o]) && (t = a(l, p, t) || t);
+  return t && S(l, p, t), t;
+};
+const r = class r extends n {
+  constructor() {
+    super(...arguments), this.show = !1, this.mode = "light", this.size = "large";
+  }
+  get classes() {
+    return {
+      track: !0,
+      [this.size]: !0,
+      [this.mode]: !!this.mode
+    };
+  }
+  get styleTokens() {
+    return c`
+            <style>
+                :host {
+                    color-scheme: ${this.mode};
+                }
+            </style>
+        `;
+  }
+  get barTemplate() {
+    return f`
+            ${this.styleTokens}
+            <div class=${y(this.classes)}>
+                <div class="fill"></div>
+            </div>
+        `;
+  }
+};
+r.styles = [u], r.themesStyles = {
+  cupra: v,
+  "cupra-diagonal": d,
+  seat: g
+};
+let e = r;
+i([
+  s({ type: Boolean, converter: h })
+], e.prototype, "show");
+i([
+  s({ type: String, reflect: !0 })
+], e.prototype, "mode");
+i([
+  s({ type: String })
+], e.prototype, "size");
+export {
+  e as DsBaseProgressBar
+};

package/dist-react/components/base/ds-base-progress-bar/styles/common.styles.js

@@ -0,0 +1,22 @@
+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`
+    .track {
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .fill {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        display: block;
+    }
+`;
+export {
+  p as commonStyles
+};

package/dist-react/components/base/ds-base-progress-bar/styles/cupra-diagonal.styles.js

@@ -0,0 +1,27 @@
+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 r = o`
+    .track.large {
+        height: 4px;
+    }
+    .track.small {
+        height: 2px;
+    }
+    .track.light {
+        background-color: var(--ds-color-off-white);
+    }
+    .track.dark {
+        background-color: var(--ds-color-off-white);
+    }
+    .light .fill {
+        background-color: var(--ds-color-black);
+    }
+    .dark .fill {
+        background-color: var(--ds-color-white);
+    }
+`, i = [r];
+export {
+  i as cupraDiagonalStyles
+};

package/dist-react/components/base/ds-base-progress-bar/styles/cupra.styles.js

@@ -0,0 +1,27 @@
+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 r = o`
+    .track.large {
+        height: 4px;
+    }
+    .track.small {
+        height: 2px;
+    }
+    .track.light {
+        background-color: var(--ds-color-off-white);
+    }
+    .track.dark {
+        background-color: var(--ds-color-off-white);
+    }
+    .light .fill {
+        background-color: var(--ds-color-black);
+    }
+    .dark .fill {
+        background-color: var(--ds-color-white);
+    }
+`, i = [r];
+export {
+  i as cupraStyles
+};

package/dist-react/components/base/ds-base-progress-bar/styles/seat.styles.js

@@ -0,0 +1,8 @@
+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 t = o``, p = [t];
+export {
+  p as seatStyles
+};

package/dist-react/components/ds-accordion/ds-accordion.js

@@ -0,0 +1,124 @@
+import { UiKitElement as u } from "../base/UiKitElement.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+import { themeConfig as m } from "./theme-config.js";
+import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as d } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as g } 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 h, 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 r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { classMap as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+var _ = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, t, a, n) => {
+  for (var s = n > 1 ? void 0 : n ? $(t, a) : t, l = e.length - 1, p; l >= 0; l--)
+    (p = e[l]) && (s = (n ? p(t, a, s) : p(s)) || s);
+  return n && s && _(t, a, s), s;
+};
+let o = class extends u {
+  constructor() {
+    super(...arguments), this.maxHeight = 300, this.open = !1, this.mode = "light", this.size = "medium", this.disabled = !1, this._open = !1;
+  }
+  async firstUpdated(e) {
+    super.firstUpdated(e), await this.updateComplete, this._open = this.open;
+  }
+  get containerClasses() {
+    return {
+      container: !0,
+      disabled: this.disabled,
+      open: this._open,
+      [this.size]: !0,
+      [this.mode]: !!this.mode
+    };
+  }
+  get dividerClasses() {
+    return {
+      divider: !0,
+      [this.mode]: !!this.mode
+    };
+  }
+  get openIconTemplate() {
+    var t;
+    if (!this.theme) return h;
+    const e = (t = m[this.theme]) == null ? void 0 : t["icon-names"];
+    return this.componentFactory.createIcon({
+      class: "icon open-icon",
+      role: "image",
+      "aria-hidden": "true",
+      "icon-name": (e == null ? void 0 : e.open) || "minus"
+    });
+  }
+  get closeIconTemplate() {
+    var t;
+    if (!this.theme) return h;
+    const e = (t = m[this.theme]) == null ? void 0 : t["icon-names"];
+    return this.componentFactory.createIcon({
+      class: "icon close-icon",
+      role: "image",
+      "aria-hidden": "true",
+      "icon-name": (e == null ? void 0 : e.close) || "plus"
+    });
+  }
+  get styleTokens() {
+    return g`
+                <style>
+                    :host{
+                        color-scheme: ${this.mode};
+                        pointer-events: ${this.disabled ? "none" : "visible"};
+                    }
+                </style>
+        `;
+  }
+  handleKeyDown(e) {
+    this.disabled && e.preventDefault();
+  }
+  handleToggle(e) {
+    this._open = e.newState === "open";
+  }
+  render() {
+    return v`
+            ${this.styleTokens}
+
+            <details
+                class=${c(this.containerClasses)}
+                aria-disabled=${!!this.disabled}
+                ?open=${this.open}
+                @keydown=${this.handleKeyDown}
+                @toggle=${this.handleToggle}
+            >
+                <summary class="title">
+                    <slot name="title"></slot>
+                    ${this.openIconTemplate}
+                    ${this.closeIconTemplate}
+                </summary>
+                <slot name="content"></slot>
+            </details>
+            <div class=${c(this.dividerClasses)}></div>
+        `;
+  }
+};
+o.styles = [f];
+i([
+  r({ type: Number, attribute: "max-height" })
+], o.prototype, "maxHeight", 2);
+i([
+  r({ type: Boolean, converter: d, reflect: !0 })
+], o.prototype, "open", 2);
+i([
+  r({ type: String, reflect: !0 })
+], o.prototype, "mode", 2);
+i([
+  r({ type: String })
+], o.prototype, "size", 2);
+i([
+  r({ type: Boolean, converter: d })
+], o.prototype, "disabled", 2);
+i([
+  b()
+], o.prototype, "_open", 2);
+o = i([
+  y("ds-accordion")
+], o);
+export {
+  o as DsAccordion
+};

package/dist-react/components/ds-accordion/styles/common.styles.js

@@ -0,0 +1,64 @@
+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 s = e`
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    summary {
+        list-style: none;
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
+    }
+
+    summary::marker {
+        content: none;
+    }
+
+    .title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .open .close-icon,
+    .open-icon {
+        display: none;
+    }
+
+    .open .open-icon,
+    .close-icon {
+        display: block;
+    }
+
+    details {
+        @media (prefers-reduced-motion: no-preference) {
+            interpolate-size: allow-keywords;
+        }
+
+        &::details-content {
+            opacity: 0;
+            block-size: 0;
+            overflow-y: clip;
+            transition:
+                content-visibility 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete,
+                opacity 0.3s cubic-bezier(0, 0, 0.2, 1),
+                block-size 0.3s cubic-bezier(0, 0, 0.2, 1);
+        }
+
+        &[open]::details-content {
+            opacity: 1;
+            block-size: auto;
+        }
+    }
+`;
+export {
+  s as commonStyles
+};

package/dist-react/components/ds-accordion/theme-config.js

@@ -0,0 +1,26 @@
+const n = {
+  cupra: {
+    "icon-names": {
+      open: "minus",
+      close: "plus"
+    },
+    "icon-button-variant": "secondary"
+  },
+  "cupra-diagonal": {
+    "icon-names": {
+      open: "arrow-up",
+      close: "arrow-down"
+    },
+    "icon-button-variant": "primary"
+  },
+  seat: {
+    "icon-names": {
+      open: "minus",
+      close: "plus"
+    },
+    "icon-button-variant": "secondary"
+  }
+};
+export {
+  n as themeConfig
+};

package/dist-react/components/ds-avatar/ds-avatar.js

@@ -0,0 +1,102 @@
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as g } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as f } 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 d, nothing as p } 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 l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { queryAssignedElements as y } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { classMap as $ } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { ifDefined as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import { commonStyles as b } from "./styles/common.styles.js";
+var v = Object.defineProperty, I = Object.getOwnPropertyDescriptor, r = (e, s, o, a) => {
+  for (var t = a > 1 ? void 0 : a ? I(s, o) : s, n = e.length - 1, m; n >= 0; n--)
+    (m = e[n]) && (t = (a ? m(s, o, t) : m(t)) || t);
+  return a && t && v(s, o, t), t;
+};
+let i = class extends c {
+  constructor() {
+    super(...arguments), this.size = "medium", this.disabled = !1;
+  }
+  get iconTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": "user"
+    });
+  }
+  get initialsTemplate() {
+    const e = this.getInitialsFromName(this.name);
+    return d`<span class="initials" aria-hidden="true">${e}</span>`;
+  }
+  getInitialsFromName(e) {
+    return e ? e.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((s) => s[0]).join("").toUpperCase() : "";
+  }
+  get classes() {
+    return {
+      container: !0,
+      disabled: this.disabled,
+      [this.size]: !0,
+      [`mode-${this.mode}`]: !0
+    };
+  }
+  get hasImage() {
+    return Array.isArray(this.assignedImages) && this.assignedImages.length > 0;
+  }
+  get mode() {
+    var e;
+    return this.hasImage ? "media" : (e = this.name) != null && e.trim() ? "text" : "icon";
+  }
+  handleSlotChange() {
+    this.requestUpdate();
+  }
+  get styleTokens() {
+    return f`
+            <style>
+                :host{
+                    pointer-events: ${this.disabled ? "none" : "auto"};
+                }
+            </style>
+        `;
+  }
+  handleKeyDown(e) {
+    this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.click());
+  }
+  render() {
+    return d`
+            ${this.styleTokens}
+            <div
+                class=${$(this.classes)}
+                title=${h(this.name)}
+                aria-label=${`Open ${this.name ? this.name + "'s " : ""}profile menu`}
+                aria-disabled=${h(this.disabled ? "true" : void 0)}
+                role="button"
+                tabindex=${this.disabled ? -1 : 0}
+                @keydown=${this.handleKeyDown}
+            >
+                ${this.mode === "icon" ? this.iconTemplate : p}
+                ${this.mode === "text" ? this.initialsTemplate : p}
+                <div class="media" aria-hidden=${String(this.mode !== "media")}><slot name="media" @slotchange=${this.handleSlotChange}></slot></div>
+            </div>
+        `;
+  }
+};
+i.styles = [b];
+r([
+  l({ type: String })
+], i.prototype, "size", 2);
+r([
+  l({ type: String })
+], i.prototype, "name", 2);
+r([
+  l({ type: Boolean, converter: g, reflect: !0 })
+], i.prototype, "disabled", 2);
+r([
+  y({ slot: "media", selector: "img" })
+], i.prototype, "assignedImages", 2);
+i = r([
+  u("ds-avatar")
+], i);
+export {
+  i as DsAvatar
+};

package/dist-react/components/ds-avatar/styles/common.styles.js

@@ -0,0 +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 o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const p = o`
+    :host {
+        display: contents;
+    }
+`;
+export {
+  p as commonStyles
+};

package/dist-react/components/ds-badge/ds-badge.d.ts

@@ -0,0 +1,18 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import { nothing } from 'lit';
+import type { DsBadgeAttrs } from './ds-badge.types.js';
+export declare class DsBadge extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    number?: number;
+    variant: DsBadgeAttrs['variant'];
+    size: DsBadgeAttrs['size'];
+    protected get hasNumber(): boolean;
+    protected get classes(): {
+        [x: string]: boolean;
+        container: boolean;
+        dot: boolean;
+        number: boolean;
+    };
+    protected get contentTemplate(): typeof nothing | import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist-react/components/ds-badge/ds-badge.js

@@ -0,0 +1,53 @@
+import { UiKitElement as h } from "../base/UiKitElement.js";
+import { customUiKitElement as l } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as b, html as u } 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 a } 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 f } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as v } from "./styles/cupra-diagonal.styles.js";
+var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (p, r, m, s) => {
+  for (var t = s > 1 ? void 0 : s ? g(r, m) : r, o = p.length - 1, n; o >= 0; o--)
+    (n = p[o]) && (t = (s ? n(r, m, t) : n(t)) || t);
+  return s && t && y(r, m, t), t;
+};
+let e = class extends h {
+  constructor() {
+    super(...arguments), this.variant = "base", this.size = "medium";
+  }
+  get hasNumber() {
+    return typeof this.number == "number" && !Number.isNaN(this.number);
+  }
+  get classes() {
+    return {
+      container: !0,
+      dot: !this.hasNumber,
+      number: this.hasNumber,
+      [`variant-${this.variant}`]: !0,
+      [`size-${this.size}`]: !0
+    };
+  }
+  get contentTemplate() {
+    return this.hasNumber ? u`${this.number}` : b;
+  }
+  render() {
+    return u` <div class=${c(this.classes)}>${this.contentTemplate}</div> `;
+  }
+};
+e.styles = [f, v];
+i([
+  a({ type: Number })
+], e.prototype, "number", 2);
+i([
+  a({ type: String })
+], e.prototype, "variant", 2);
+i([
+  a({ type: String })
+], e.prototype, "size", 2);
+e = i([
+  l("ds-badge")
+], e);
+export {
+  e as DsBadge
+};