@cupra/ui-kit 1.0.0-canary.18 → 1.0.0-canary.19

package/dist/components/base/UiKitElement.js

@@ -21,7 +21,7 @@ const E = C`:host([unresolved]){visibility:hidden}`, h = class c extends y {
     }, this.pubSubTheme = p.subscribe("theme", this.handleChangeTheme);
   }
   get theme() {
-    const e = sessionStorage == null ? void 0 : sessionStorage.getItem(d);
+    const e = typeof sessionStorage < "u" ? sessionStorage == null ? void 0 : sessionStorage.getItem(d) : null;
     return this.contextTheme ?? this.pubSubTheme ?? e;
   }
   connectedCallback() {

package/dist/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/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
+};

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

@@ -0,0 +1,8 @@
+import type { DsBadge } from './ds-badge';
+import './ds-badge';
+import '../ds-theme-provider/ds-theme-provider.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-badge': DsBadge;
+    }
+}

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

@@ -0,0 +1,6 @@
+import type { CommonAttrs } from '../../types/types';
+export interface DsBadgeAttrs extends CommonAttrs {
+    number?: number;
+    variant?: 'base' | 'inverted';
+    size?: 'medium' | 'small';
+}

package/dist/components/ds-badge/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

package/dist/components/ds-badge/styles/common.styles.js

@@ -0,0 +1,9 @@
+import { cssWithTokens as o } from "../../../utils/cssWithTokens.js";
+const t = o`
+    :host {
+        display: inline-flex;
+    }
+`;
+export {
+  t as commonStyles
+};

package/dist/components/ds-badge/styles/cupra-diagonal.styles.d.ts

@@ -0,0 +1 @@
+export declare const cupraDiagonalStyles: import("lit").CSSResult;

package/dist/components/ds-badge/styles/cupra-diagonal.styles.js

@@ -0,0 +1,47 @@
+import { cssWithTokens as e } from "../../../utils/cssWithTokens.js";
+const o = e`
+  .container {
+    border-radius: 50%;
+  }
+
+  .number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--dg-font-family-base);
+    font-weight: 400;
+  }
+
+  .number.size-medium {
+    width: var(--dg-size-24);
+    height: var(--dg-size-24);
+    font-size: var(--dg-font-size-body-s);
+    line-height: var(--dg-font-body-s-medium-line-height);
+  }
+
+  .number.size-small {
+    width: var(--dg-size-16);
+    height: var(--dg-size-16);
+    font-size: var(--dg-font-size-body-xs);
+    line-height: var(--dg-font-body-xs-medium-line-height);
+  }
+
+  .variant-base {
+    color: var(--dg-color-text-strong);
+    background-color: var(--dg-color-bg-base);
+  }
+
+  .variant-inverted {
+    background-color: var(--dg-color-bg-inverted);
+    color: var(--dg-color-text-inverted);
+  }
+
+  .dot {
+    width: var(--dg-size-08);
+    height: var(--dg-size-08);
+    background-color: var(--dg-color-bg-error);
+  }
+`;
+export {
+  o as cupraDiagonalStyles
+};

package/dist/components/ds-icon/ds-icon.js

@@ -1,53 +1,58 @@
 import { UiKitElement as f } from "../base/UiKitElement.js";
 import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
-import { iconsManager as g } from "../../utils/IconsManager.js";
-import { pubSub as y } from "../../utils/PubSub.js";
-import { htmlWithTokens as _ } from "../../utils/htmlWithTokens.js";
+import { iconsManager as y } from "../../utils/IconsManager.js";
+import { pubSub as _ } from "../../utils/PubSub.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 { html as l } 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 { property as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
 import { state as w } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { unsafeHTML as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
+import { unsafeHTML as x } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 import { css as $ } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-var k = Object.defineProperty, x = Object.getOwnPropertyDescriptor, d = (t) => {
+var k = Object.defineProperty, H = Object.getOwnPropertyDescriptor, m = (t) => {
   throw TypeError(t);
-}, n = (t, i, e, r) => {
-  for (var s = r > 1 ? void 0 : r ? x(i, e) : i, h = t.length - 1, p; h >= 0; h--)
-    (p = t[h]) && (s = (r ? p(i, e, s) : p(s)) || s);
-  return r && s && k(i, e, s), s;
-}, v = (t, i, e) => i.has(t) || d("Cannot " + e), m = (t, i, e) => (v(t, i, "read from private field"), i.get(t)), H = (t, i, e) => i.has(t) ? d("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), D = (t, i, e, r) => (v(t, i, "write to private field"), i.set(t, e), e), a;
+}, n = (t, e, i, s) => {
+  for (var r = s > 1 ? void 0 : s ? H(e, i) : e, h = t.length - 1, p; h >= 0; h--)
+    (p = t[h]) && (r = (s ? p(e, i, r) : p(r)) || r);
+  return s && r && k(e, i, r), r;
+}, d = (t, e, i) => e.has(t) || m("Cannot " + i), v = (t, e, i) => (d(t, e, "read from private field"), i ? i.call(t) : e.get(t)), I = (t, e, i) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), D = (t, e, i, s) => (d(t, e, "write to private field"), e.set(t, i), i), N = (t, e, i, s) => ({
+  set _(r) {
+    D(t, e, r);
+  },
+  get _() {
+    return v(t, e, s);
+  }
+}), c;
 let o = class extends f {
   constructor() {
-    super(), this.iconHtml = "", H(this, a), this.getIcon = async () => {
-      var i, e, r;
-      (i = m(this, a)) == null || i.abort(), D(this, a, new AbortController());
-      const t = m(this, a).signal;
-      this.iconHtml = await ((r = (e = g).fetchIcon) == null ? void 0 : r.call(e, this.iconName, { signal: t }));
-    }, y.subscribe("theme", this.getIcon);
+    super(), this.iconHtml = "", I(this, c, 0), this.getIcon = async () => {
+      const t = ++N(this, c)._, e = await y.fetchIcon(this.iconName);
+      t === v(this, c) && (this.iconHtml = e);
+    }, _.subscribe("theme", this.getIcon);
   }
   async updated(t) {
     super.updated(t), (t.has("iconName") || !this.iconHtml) && await this.getIcon();
   }
-  getDimension(t, i, e) {
-    return t ? `${t}px` : i ? "auto" : this.size ? `${this.size}px` : e;
+  getDimension(t, e, i) {
+    return t ? `${t}px` : e ? "auto" : this.size ? `${this.size}px` : i;
   }
   get styleTokens() {
     const t = this.getDimension(
       this.width,
       this.height,
       "var(--private-ds-icon-width, var(--ds-icon-width, 20px))"
-    ), i = this.getDimension(
+    ), e = this.getDimension(
       this.height,
       this.width,
       "var(--private-ds-icon-height, var(--ds-icon-height, 20px))"
     );
-    return _`
+    return g`
             <style>
                 .ds-icon {
                     display: inline-block;
                     width: ${t};
-                    height: ${i};
+                    height: ${e};
                 }
 
                 .ds-icon-color {
@@ -63,11 +68,11 @@ let o = class extends f {
   render() {
     return l`
             ${this.styleTokens}
-            ${this.iconHtml ? b(this.iconHtml) : l`<svg class="ds-icon"></svg>`}
+            ${this.iconHtml ? x(this.iconHtml) : l`<svg class="ds-icon">x</svg>`}
         `;
   }
 };
-a = /* @__PURE__ */ new WeakMap();
+c = /* @__PURE__ */ new WeakMap();
 o.styles = $`
         :host {
             line-height: 0;
@@ -75,19 +80,19 @@ o.styles = $`
         }
     `;
 n([
-  c({ type: String, attribute: "icon-name" })
+  a({ type: String, attribute: "icon-name" })
 ], o.prototype, "iconName", 2);
 n([
-  c({ type: String, attribute: "color" })
+  a({ type: String, attribute: "color" })
 ], o.prototype, "color", 2);
 n([
-  c({ type: Number })
+  a({ type: Number })
 ], o.prototype, "width", 2);
 n([
-  c({ type: Number })
+  a({ type: Number })
 ], o.prototype, "height", 2);
 n([
-  c({ type: Number, attribute: "size" })
+  a({ type: Number, attribute: "size" })
 ], o.prototype, "size", 2);
 n([
   w()

package/dist/components/ds-theme-provider/ds-theme-provider.js

@@ -54,7 +54,7 @@ let m = class extends v {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.0.0-canary.18", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.0.0-canary.19", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");

package/dist/components/index.d.ts

@@ -56,3 +56,4 @@ import './ds-static-box/ds-static-box.ts';
 import './ds-interactive-card/ds-interactive-card.ts';
 import './ds-radio-button-group/ds-radio-button-group.ts';
 import './ds-sidebar-navigation/ds-sidebar-navigation.ts';
+import './ds-badge/ds-badge.ts';

package/dist/index.js

@@ -56,7 +56,8 @@ import "./components/ds-static-box/ds-static-box.js";
 import "./components/ds-interactive-card/ds-interactive-card.js";
 import "./components/ds-radio-button-group/ds-radio-button-group.js";
 import "./components/ds-sidebar-navigation/ds-sidebar-navigation.js";
-import { iconNames as eo } from "./components/ds-icon/iconNames.js";
+import "./components/ds-badge/ds-badge.js";
+import { iconNames as ao } from "./components/ds-icon/iconNames.js";
 export {
-  eo as iconNames
+  ao as iconNames
 };

package/dist/utils/IconsManager.d.ts

@@ -1,12 +1,9 @@
 import type { Icons } from '../components/ds-icon/Icons.type.ts';
 declare class IconsManager {
-    private static instance;
     private icons;
     private theme;
-    private constructor();
+    constructor();
     handleChangeTheme: (theme: string) => void;
-    static getInstance(): IconsManager;
-    private getCachedIcon;
     fetchIcon: (iconName: Icons, requestInit?: RequestInit) => Promise<string>;
     private loadIcon;
 }

package/dist/utils/IconsManager.js

@@ -1,32 +1,38 @@
-import { THEME_STORAGE_KEY as i } from "../core/theme.constants.js";
-import { pubSub as n } from "./PubSub.js";
-class c {
+import { THEME_STORAGE_KEY as r } from "../core/theme.constants.js";
+import { pubSub as l } from "./PubSub.js";
+class f {
   constructor() {
-    this.icons = {}, this.handleChangeTheme = (t) => {
-      this.theme = t;
-      const h = Object.keys(this.icons);
-      this.icons = {}, h.forEach((e) => this.fetchIcon(e));
-    }, this.fetchIcon = async (t, h = {}) => {
-      const e = sessionStorage == null ? void 0 : sessionStorage.getItem(i);
-      !this.theme && e && (this.theme = e);
-      const s = await this.getCachedIcon(t);
-      return s || (this.icons[t] = this.loadIcon(t, h), this.icons[t]);
-    }, n.subscribe("theme", this.handleChangeTheme);
-  }
-  static getInstance() {
-    return c.instance || (c.instance = new c()), c.instance;
-  }
-  getCachedIcon(t) {
-    return this.icons[t];
-  }
-  loadIcon(t, { cache: h = "force-cache", ...e }) {
-    return this.theme ? fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${t}.svg`, {
-      cache: h,
-      ...e
-    }).then((s) => s.text()).catch((s) => ((s == null ? void 0 : s.name) !== "AbortError" && console.error(`Failed to fetch icon "${t}":`, s), "")) : Promise.resolve('<svg class="ds-icon"></svg>');
+    this.icons = {}, this.handleChangeTheme = (s) => {
+      this.theme = s;
+      const o = Object.keys(this.icons);
+      this.icons = {}, o.forEach((t) => this.fetchIcon(t));
+    }, this.fetchIcon = async (s, o = {}) => {
+      const t = typeof sessionStorage < "u" ? sessionStorage == null ? void 0 : sessionStorage.getItem(r) : null;
+      !this.theme && t && (this.theme = t);
+      const e = this.icons[s];
+      if (e) return await e;
+      const n = this.loadIcon(s, o).catch((a) => {
+        throw delete this.icons[s], a;
+      });
+      return this.icons[s] = n, n;
+    }, this.loadIcon = (s, { cache: o = "force-cache", ...t }) => this.theme ? fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${s}.svg`, {
+      cache: o,
+      ...t
+    }).then((e) => e.text()).catch((e) => {
+      if ((e == null ? void 0 : e.name) === "AbortError") throw e;
+      return console.error(`Failed to fetch icon "${s}":`, e), "";
+    }) : Promise.resolve('<svg class="ds-icon"></svg>'), l.subscribe("theme", this.handleChangeTheme);
   }
 }
-const r = c.getInstance();
+const c = Symbol.for("@cupra/ui-kit/icons-manager"), h = globalThis;
+let i = h[c];
+i || (i = new f(), Object.defineProperty(h, c, {
+  value: i,
+  writable: !1,
+  configurable: !1,
+  enumerable: !1
+}));
+const b = i;
 export {
-  r as iconsManager
+  b as iconsManager
 };

package/dist/utils/StylesRegistry/StylesRegistry.js

@@ -5,7 +5,7 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/1.0.0-canary.18/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/1.0.0-canary.19/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
       if (r) return r;
       const i = this.fetchStyle({ url: c }).then((n) => (n || this.stylePromises.delete(c), n));
       return this.stylePromises.set(c, i), this.stylePromises.get(c);

package/dist/utils/cssWithTokens.js

@@ -3,7 +3,7 @@ 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 { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-18"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-19"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist/utils/htmlWithTokens.js

@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 function x(t, ...r) {
-  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-18"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-19"), e = i(o);
   return n`${e}`;
 }
 export {

package/dist-react/components/base/UiKitElement.js

@@ -21,7 +21,7 @@ const E = C`:host([unresolved]){visibility:hidden}`, h = class c extends y {
     }, this.pubSubTheme = p.subscribe("theme", this.handleChangeTheme);
   }
   get theme() {
-    const e = sessionStorage == null ? void 0 : sessionStorage.getItem(d);
+    const e = typeof sessionStorage < "u" ? sessionStorage == null ? void 0 : sessionStorage.getItem(d) : null;
     return this.contextTheme ?? this.pubSubTheme ?? e;
   }
   connectedCallback() {

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
+};

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

@@ -0,0 +1,8 @@
+import type { DsBadge } from './ds-badge';
+import './ds-badge';
+import '../ds-theme-provider/ds-theme-provider.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-badge': DsBadge;
+    }
+}

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

@@ -0,0 +1,6 @@
+import type { CommonAttrs } from '../../types/types';
+export interface DsBadgeAttrs extends CommonAttrs {
+    number?: number;
+    variant?: 'base' | 'inverted';
+    size?: 'medium' | 'small';
+}

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

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

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

@@ -0,0 +1,9 @@
+import { cssWithTokens as o } from "../../../utils/cssWithTokens.js";
+const t = o`
+    :host {
+        display: inline-flex;
+    }
+`;
+export {
+  t as commonStyles
+};

package/dist-react/components/ds-badge/styles/cupra-diagonal.styles.d.ts

@@ -0,0 +1 @@
+export declare const cupraDiagonalStyles: import("lit").CSSResult;

package/dist-react/components/ds-badge/styles/cupra-diagonal.styles.js

@@ -0,0 +1,47 @@
+import { cssWithTokens as e } from "../../../utils/cssWithTokens.js";
+const o = e`
+  .container {
+    border-radius: 50%;
+  }
+
+  .number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--dg-font-family-base);
+    font-weight: 400;
+  }
+
+  .number.size-medium {
+    width: var(--dg-size-24);
+    height: var(--dg-size-24);
+    font-size: var(--dg-font-size-body-s);
+    line-height: var(--dg-font-body-s-medium-line-height);
+  }
+
+  .number.size-small {
+    width: var(--dg-size-16);
+    height: var(--dg-size-16);
+    font-size: var(--dg-font-size-body-xs);
+    line-height: var(--dg-font-body-xs-medium-line-height);
+  }
+
+  .variant-base {
+    color: var(--dg-color-text-strong);
+    background-color: var(--dg-color-bg-base);
+  }
+
+  .variant-inverted {
+    background-color: var(--dg-color-bg-inverted);
+    color: var(--dg-color-text-inverted);
+  }
+
+  .dot {
+    width: var(--dg-size-08);
+    height: var(--dg-size-08);
+    background-color: var(--dg-color-bg-error);
+  }
+`;
+export {
+  o as cupraDiagonalStyles
+};

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

@@ -1,53 +1,58 @@
 import { UiKitElement as f } from "../base/UiKitElement.js";
 import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
-import { iconsManager as g } from "../../utils/IconsManager.js";
-import { pubSub as y } from "../../utils/PubSub.js";
-import { htmlWithTokens as _ } from "../../utils/htmlWithTokens.js";
+import { iconsManager as y } from "../../utils/IconsManager.js";
+import { pubSub as _ } from "../../utils/PubSub.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 { html as l } 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 { property as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
 import { state as w } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { unsafeHTML as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
+import { unsafeHTML as x } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 import { css as $ } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-var k = Object.defineProperty, x = Object.getOwnPropertyDescriptor, d = (t) => {
+var k = Object.defineProperty, H = Object.getOwnPropertyDescriptor, m = (t) => {
   throw TypeError(t);
-}, n = (t, i, e, r) => {
-  for (var s = r > 1 ? void 0 : r ? x(i, e) : i, h = t.length - 1, p; h >= 0; h--)
-    (p = t[h]) && (s = (r ? p(i, e, s) : p(s)) || s);
-  return r && s && k(i, e, s), s;
-}, v = (t, i, e) => i.has(t) || d("Cannot " + e), m = (t, i, e) => (v(t, i, "read from private field"), i.get(t)), H = (t, i, e) => i.has(t) ? d("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), D = (t, i, e, r) => (v(t, i, "write to private field"), i.set(t, e), e), a;
+}, n = (t, e, i, s) => {
+  for (var r = s > 1 ? void 0 : s ? H(e, i) : e, h = t.length - 1, p; h >= 0; h--)
+    (p = t[h]) && (r = (s ? p(e, i, r) : p(r)) || r);
+  return s && r && k(e, i, r), r;
+}, d = (t, e, i) => e.has(t) || m("Cannot " + i), v = (t, e, i) => (d(t, e, "read from private field"), i ? i.call(t) : e.get(t)), I = (t, e, i) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), D = (t, e, i, s) => (d(t, e, "write to private field"), e.set(t, i), i), N = (t, e, i, s) => ({
+  set _(r) {
+    D(t, e, r);
+  },
+  get _() {
+    return v(t, e, s);
+  }
+}), c;
 let o = class extends f {
   constructor() {
-    super(), this.iconHtml = "", H(this, a), this.getIcon = async () => {
-      var i, e, r;
-      (i = m(this, a)) == null || i.abort(), D(this, a, new AbortController());
-      const t = m(this, a).signal;
-      this.iconHtml = await ((r = (e = g).fetchIcon) == null ? void 0 : r.call(e, this.iconName, { signal: t }));
-    }, y.subscribe("theme", this.getIcon);
+    super(), this.iconHtml = "", I(this, c, 0), this.getIcon = async () => {
+      const t = ++N(this, c)._, e = await y.fetchIcon(this.iconName);
+      t === v(this, c) && (this.iconHtml = e);
+    }, _.subscribe("theme", this.getIcon);
   }
   async updated(t) {
     super.updated(t), (t.has("iconName") || !this.iconHtml) && await this.getIcon();
   }
-  getDimension(t, i, e) {
-    return t ? `${t}px` : i ? "auto" : this.size ? `${this.size}px` : e;
+  getDimension(t, e, i) {
+    return t ? `${t}px` : e ? "auto" : this.size ? `${this.size}px` : i;
   }
   get styleTokens() {
     const t = this.getDimension(
       this.width,
       this.height,
       "var(--private-ds-icon-width, var(--ds-icon-width, 20px))"
-    ), i = this.getDimension(
+    ), e = this.getDimension(
       this.height,
       this.width,
       "var(--private-ds-icon-height, var(--ds-icon-height, 20px))"
     );
-    return _`
+    return g`
             <style>
                 .ds-icon {
                     display: inline-block;
                     width: ${t};
-                    height: ${i};
+                    height: ${e};
                 }
 
                 .ds-icon-color {
@@ -63,11 +68,11 @@ let o = class extends f {
   render() {
     return l`
             ${this.styleTokens}
-            ${this.iconHtml ? b(this.iconHtml) : l`<svg class="ds-icon"></svg>`}
+            ${this.iconHtml ? x(this.iconHtml) : l`<svg class="ds-icon">x</svg>`}
         `;
   }
 };
-a = /* @__PURE__ */ new WeakMap();
+c = /* @__PURE__ */ new WeakMap();
 o.styles = $`
         :host {
             line-height: 0;
@@ -75,19 +80,19 @@ o.styles = $`
         }
     `;
 n([
-  c({ type: String, attribute: "icon-name" })
+  a({ type: String, attribute: "icon-name" })
 ], o.prototype, "iconName", 2);
 n([
-  c({ type: String, attribute: "color" })
+  a({ type: String, attribute: "color" })
 ], o.prototype, "color", 2);
 n([
-  c({ type: Number })
+  a({ type: Number })
 ], o.prototype, "width", 2);
 n([
-  c({ type: Number })
+  a({ type: Number })
 ], o.prototype, "height", 2);
 n([
-  c({ type: Number, attribute: "size" })
+  a({ type: Number, attribute: "size" })
 ], o.prototype, "size", 2);
 n([
   w()

package/dist-react/components/ds-theme-provider/ds-theme-provider.js

@@ -54,7 +54,7 @@ let m = class extends v {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.0.0-canary.18", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.0.0-canary.19", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");

package/dist-react/components/index.d.ts

@@ -56,3 +56,4 @@ import './ds-static-box/ds-static-box.ts';
 import './ds-interactive-card/ds-interactive-card.ts';
 import './ds-radio-button-group/ds-radio-button-group.ts';
 import './ds-sidebar-navigation/ds-sidebar-navigation.ts';
+import './ds-badge/ds-badge.ts';

package/dist-react/index.js

@@ -56,7 +56,8 @@ import "./components/ds-static-box/ds-static-box.js";
 import "./components/ds-interactive-card/ds-interactive-card.js";
 import "./components/ds-radio-button-group/ds-radio-button-group.js";
 import "./components/ds-sidebar-navigation/ds-sidebar-navigation.js";
-import { iconNames as eo } from "./components/ds-icon/iconNames.js";
+import "./components/ds-badge/ds-badge.js";
+import { iconNames as ao } from "./components/ds-icon/iconNames.js";
 export {
-  eo as iconNames
+  ao as iconNames
 };

package/dist-react/utils/IconsManager.d.ts

@@ -1,12 +1,9 @@
 import type { Icons } from '../components/ds-icon/Icons.type.ts';
 declare class IconsManager {
-    private static instance;
     private icons;
     private theme;
-    private constructor();
+    constructor();
     handleChangeTheme: (theme: string) => void;
-    static getInstance(): IconsManager;
-    private getCachedIcon;
     fetchIcon: (iconName: Icons, requestInit?: RequestInit) => Promise<string>;
     private loadIcon;
 }

package/dist-react/utils/IconsManager.js

@@ -1,32 +1,38 @@
-import { THEME_STORAGE_KEY as i } from "../core/theme.constants.js";
-import { pubSub as n } from "./PubSub.js";
-class c {
+import { THEME_STORAGE_KEY as r } from "../core/theme.constants.js";
+import { pubSub as l } from "./PubSub.js";
+class f {
   constructor() {
-    this.icons = {}, this.handleChangeTheme = (t) => {
-      this.theme = t;
-      const h = Object.keys(this.icons);
-      this.icons = {}, h.forEach((e) => this.fetchIcon(e));
-    }, this.fetchIcon = async (t, h = {}) => {
-      const e = sessionStorage == null ? void 0 : sessionStorage.getItem(i);
-      !this.theme && e && (this.theme = e);
-      const s = await this.getCachedIcon(t);
-      return s || (this.icons[t] = this.loadIcon(t, h), this.icons[t]);
-    }, n.subscribe("theme", this.handleChangeTheme);
-  }
-  static getInstance() {
-    return c.instance || (c.instance = new c()), c.instance;
-  }
-  getCachedIcon(t) {
-    return this.icons[t];
-  }
-  loadIcon(t, { cache: h = "force-cache", ...e }) {
-    return this.theme ? fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${t}.svg`, {
-      cache: h,
-      ...e
-    }).then((s) => s.text()).catch((s) => ((s == null ? void 0 : s.name) !== "AbortError" && console.error(`Failed to fetch icon "${t}":`, s), "")) : Promise.resolve('<svg class="ds-icon"></svg>');
+    this.icons = {}, this.handleChangeTheme = (s) => {
+      this.theme = s;
+      const o = Object.keys(this.icons);
+      this.icons = {}, o.forEach((t) => this.fetchIcon(t));
+    }, this.fetchIcon = async (s, o = {}) => {
+      const t = typeof sessionStorage < "u" ? sessionStorage == null ? void 0 : sessionStorage.getItem(r) : null;
+      !this.theme && t && (this.theme = t);
+      const e = this.icons[s];
+      if (e) return await e;
+      const n = this.loadIcon(s, o).catch((a) => {
+        throw delete this.icons[s], a;
+      });
+      return this.icons[s] = n, n;
+    }, this.loadIcon = (s, { cache: o = "force-cache", ...t }) => this.theme ? fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${s}.svg`, {
+      cache: o,
+      ...t
+    }).then((e) => e.text()).catch((e) => {
+      if ((e == null ? void 0 : e.name) === "AbortError") throw e;
+      return console.error(`Failed to fetch icon "${s}":`, e), "";
+    }) : Promise.resolve('<svg class="ds-icon"></svg>'), l.subscribe("theme", this.handleChangeTheme);
   }
 }
-const r = c.getInstance();
+const c = Symbol.for("@cupra/ui-kit/icons-manager"), h = globalThis;
+let i = h[c];
+i || (i = new f(), Object.defineProperty(h, c, {
+  value: i,
+  writable: !1,
+  configurable: !1,
+  enumerable: !1
+}));
+const b = i;
 export {
-  r as iconsManager
+  b as iconsManager
 };

package/dist-react/utils/StylesRegistry/StylesRegistry.js

@@ -5,7 +5,7 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/1.0.0-canary.18/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/1.0.0-canary.19/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
       if (r) return r;
       const i = this.fetchStyle({ url: c }).then((n) => (n || this.stylePromises.delete(c), n));
       return this.stylePromises.set(c, i), this.stylePromises.get(c);

package/dist-react/utils/cssWithTokens.js

@@ -3,7 +3,7 @@ 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 { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-18"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-19"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist-react/utils/htmlWithTokens.js

@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 function x(t, ...r) {
-  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-18"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-19"), e = i(o);
   return n`${e}`;
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "1.0.0-canary.18",
+  "version": "1.0.0-canary.19",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",