@cupra/ui-kit 2.0.0-canary.63 → 2.0.0-canary.64

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

@@ -1,24 +1,24 @@
-import { UiKitElement as f } from "../base/UiKitElement.js";
-import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
-import { ViewportMixin as g } from "../../mixins/ViewportMixin.js";
-import { booleanConverter as a } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as b } from "../../utils/htmlWithTokens.js";
-import { objectConverter as v } from "../../utils/objectConverter.js";
+import { UiKitElement as g } from "../base/UiKitElement.js";
+import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
+import { ViewportMixin as y } from "../../mixins/ViewportMixin.js";
+import { booleanConverter as l } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as $ } from "../../utils/htmlWithTokens.js";
+import { objectConverter as b } from "../../utils/objectConverter.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 o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { nothing as u, html as s } 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 { state as $ } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { property as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as v } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
 import { choose as T } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
 import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { when as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { buttonStyles as S, textStyles as P, loadingDotsStyles as w } from "./styles/common.styles.js";
-var C = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (i, n, h, l) => {
-  for (var r = l > 1 ? void 0 : l ? x(n, h) : n, c = i.length - 1, m; c >= 0; c--)
-    (m = i[c]) && (r = (l ? m(n, h, r) : m(r)) || r);
-  return l && r && C(n, h, r), r;
+import { when as a } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import { buttonStyles as S, textStyles as x, loadingDotsStyles as P } from "./styles/common.styles.js";
+var w = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (o, r, h, p) => {
+  for (var n = p > 1 ? void 0 : p ? C(r, h) : r, c = o.length - 1, m; c >= 0; c--)
+    (m = o[c]) && (n = (p ? m(r, h, n) : m(n)) || n);
+  return p && n && w(r, h, n), n;
 };
-let t = class extends g(f) {
+let t = class extends y(g) {
   constructor() {
     super(...arguments), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.destructive = !1, this.htmlTagName = "button", this.type = "button", this.iconPosition = "left", this.rounded = !1, this.fullWidth = !1, this.loading = !1;
   }
@@ -26,11 +26,11 @@ let t = class extends g(f) {
     this.closestForm = this.closest("form");
   }
   get classes() {
-    const i = typeof this.size == "string" ? this.size : this.size[this.viewport];
+    const o = typeof this.size == "string" ? this.size : this.size[this.viewport];
     return {
       button: !0,
       custom: this.htmlTagName === "custom",
-      [i]: !!i,
+      [o]: !!o,
       [this.mode]: !!this.mode,
       [this.variant]: !!this.variant,
       rounded: this.rounded,
@@ -39,14 +39,14 @@ let t = class extends g(f) {
       "full-width": this.fullWidth
     };
   }
-  handleClick(i) {
-    if (this.href || i.preventDefault(), this.closestForm && this.type === "submit") {
-      const n = new Event("submit", {
+  handleClick(o) {
+    if (this.href || o.preventDefault(), this.closestForm && this.type === "submit") {
+      const r = new Event("submit", {
         bubbles: !0,
         composed: !0,
         cancelable: !0
       });
-      this.closestForm.dispatchEvent(n);
+      this.closestForm.dispatchEvent(r);
     }
   }
   get iconTemplate() {
@@ -56,7 +56,7 @@ let t = class extends g(f) {
     }) : u;
   }
   get loadingTemplate() {
-    return this.loading ? o`
+    return this.loading ? s`
             <span class="loading-dots">
                 <span>.</span>
                 <span>.</span>
@@ -64,8 +64,11 @@ let t = class extends g(f) {
             </span>
         ` : u;
   }
+  get contentTemplate() {
+    return this.loading && this.textLoading ? s`${this.textLoading}` : s`<slot></slot>`;
+  }
   get cssTokens() {
-    return b`
+    return $`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -78,60 +81,65 @@ let t = class extends g(f) {
             </style>`;
   }
   render() {
-    return o`
+    return s`
             ${this.cssTokens}
             ${T(this.htmlTagName || "button", [
       [
         "button",
         () => {
-          var i;
-          return o`
-                        <button
-                            aria-label=${(i = this.textContent) == null ? void 0 : i.replace(/^\s+|\s+$/g, "")}
-                            class=${d(this.classes)}
-                            type=${this.type}
-                            @click=${this.handleClick}
-                            ?disabled=${this.disabled}
-                        >
-                            ${p(this.iconPosition === "left", () => o` ${this.iconTemplate} `)}
-                            <span class="container">
-                                <slot></slot>
-                                ${this.loadingTemplate}
-                            </span>
-                            ${p(this.iconPosition === "right", () => o` ${this.iconTemplate} `)}
-                        </button>
+          var o;
+          return s`
+                        <div class=${d(this.classes)}>
+                            <button
+                                class="inner"
+                                aria-label=${(o = this.textContent) == null ? void 0 : o.replace(/^\s+|\s+$/g, "")}
+                                type=${this.type}
+                                @click=${this.handleClick}
+                                ?disabled=${this.disabled}
+                            >
+                                ${a(this.iconPosition === "left", () => s` ${this.iconTemplate} `)}
+                                <span class="container">
+                                    ${this.contentTemplate}
+                                    ${this.loadingTemplate}
+                                </span>
+                                ${a(this.iconPosition === "right", () => s` ${this.iconTemplate} `)}
+                            </button>
+                        </div>
                     `;
         }
       ],
       [
         "a",
         () => {
-          var i;
-          return o`
-                        <a
-                            aria-label=${(i = this.textContent) == null ? void 0 : i.replace(/^\s+|\s+$/g, "")}
-                            class=${d(this.classes)}
-                            href=${this.href}
-                            rel=${this.rel}
-                            target=${this.target}
-                            @click=${this.handleClick}
-                            ?disabled=${this.disabled}
-                        >
-                            ${p(this.iconPosition === "left", () => o`${this.iconTemplate}`)}
-                            <span class="container">
-                                <slot></slot>
-                                ${this.loadingTemplate}
-                            </span>
-                            ${p(this.iconPosition === "right", () => o`${this.iconTemplate}`)}
-                        </a>
+          var o;
+          return s`
+                        <div class=${d(this.classes)}>
+                            <a
+                                class="inner"
+                                aria-label=${(o = this.textContent) == null ? void 0 : o.replace(/^\s+|\s+$/g, "")}
+                                href=${this.href}
+                                rel=${this.rel}
+                                target=${this.target}
+                                @click=${this.handleClick}
+                            >
+                                ${a(this.iconPosition === "left", () => s`${this.iconTemplate}`)}
+                                <span class="container">
+                                    ${this.contentTemplate}
+                                    ${this.loadingTemplate}
+                                </span>
+                                ${a(this.iconPosition === "right", () => s`${this.iconTemplate}`)}
+                            </a>
+                        </div>
                     `;
         }
       ],
       [
         "custom",
-        () => o`
+        () => s`
                         <div class=${d(this.classes)}>
-                            <slot></slot>
+                            ${a(this.iconPosition === "left", () => s`${this.iconTemplate}`)}
+                            ${this.loading && this.textLoading ? s`<span class="container">${this.textLoading}${this.loadingTemplate}</span>` : s`<slot></slot>${this.loadingTemplate}`}
+                            ${a(this.iconPosition === "right", () => s`${this.iconTemplate}`)}
                         </div>
                     `
       ]
@@ -139,57 +147,60 @@ let t = class extends g(f) {
         `;
   }
 };
-t.styles = [S, P, w];
+t.styles = [S, x, P];
 e([
-  s({ type: String })
+  i({ type: String })
 ], t.prototype, "variant", 2);
 e([
-  s({ type: String, reflect: !0 })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "mode", 2);
 e([
-  s({ type: String, converter: v })
+  i({ type: String, converter: b })
 ], t.prototype, "size", 2);
 e([
-  s({ type: Boolean, converter: a })
+  i({ type: Boolean, converter: l })
 ], t.prototype, "disabled", 2);
 e([
-  s({ type: Boolean, converter: a })
+  i({ type: Boolean, converter: l })
 ], t.prototype, "destructive", 2);
 e([
-  s({ type: String, attribute: "icon-name" })
+  i({ type: String, attribute: "icon-name" })
 ], t.prototype, "iconName", 2);
 e([
-  s({ type: String, attribute: "html-tag-name" })
+  i({ type: String, attribute: "html-tag-name" })
 ], t.prototype, "htmlTagName", 2);
 e([
-  s({ type: String, reflect: !0 })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "href", 2);
 e([
-  s({ type: String, reflect: !0 })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "rel", 2);
 e([
-  s({ type: String, reflect: !0 })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "target", 2);
 e([
-  s({ type: String })
+  i({ type: String })
 ], t.prototype, "type", 2);
 e([
-  s({ type: String, attribute: "icon-position" })
+  i({ type: String, attribute: "icon-position" })
 ], t.prototype, "iconPosition", 2);
 e([
-  s({ type: Boolean, converter: a })
+  i({ type: Boolean, converter: l })
 ], t.prototype, "rounded", 2);
 e([
-  s({ type: Boolean, converter: a, attribute: "full-width" })
+  i({ type: Boolean, converter: l, attribute: "full-width" })
 ], t.prototype, "fullWidth", 2);
 e([
-  s({ type: Boolean, converter: a })
+  i({ type: Boolean, converter: l })
 ], t.prototype, "loading", 2);
 e([
-  $()
+  i({ type: String, attribute: "text-loading" })
+], t.prototype, "textLoading", 2);
+e([
+  v()
 ], t.prototype, "closestForm", 2);
 t = e([
-  y("ds-button")
+  f("ds-button")
 ], t);
 export {
   t as DsButton

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

@@ -2,7 +2,7 @@ import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@li
 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 e = t`
+const a = t`
     :host {
         display: contents;
     }
@@ -22,6 +22,44 @@ const e = t`
     .button.full-width {
         width: 100%;
     }
+
+    .inner,
+    .custom ::slotted(*) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        gap: var(--ui-kit-button-gap, 0);
+        padding: 0;
+        margin: 0;
+        background: transparent;
+        border: none;
+        color: inherit;
+        font: inherit;
+        text-transform: inherit;
+        letter-spacing: inherit;
+        text-decoration: none;
+        cursor: inherit;
+        outline: none;
+        box-sizing: border-box;
+    }
+
+    .custom ::slotted(*) {
+        width: auto;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .custom ::slotted(*:disabled),
+    .custom.disabled ::slotted(*) {
+        pointer-events: none;
+        cursor: default;
+    }
+
+    .custom ::slotted(*:focus-visible) {
+        outline: none;
+    }
 `, s = t`
     .naked.container {
         display: inline-flex;
@@ -32,7 +70,7 @@ const e = t`
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-`, l = t`
+`, d = t`
     .loading-dots {
         display: inline-flex;
         align-items: baseline;
@@ -110,7 +148,7 @@ const e = t`
     }
 `;
 export {
-  e as buttonStyles,
-  l as loadingDotsStyles,
+  a as buttonStyles,
+  d as loadingDotsStyles,
   s as textStyles
 };

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

@@ -41,11 +41,18 @@ const e = o`
     }
 
     .scroll-button {
+        display: none;
         position: absolute;
         top: 0;
         z-index: 2;
     }
 
+    @media (min-width: 768px) {
+        .scroll-button {
+            display: block;
+        }
+    }
+
     .scroll-button.left {
         left: 0;
     }

package/dist-react/esm/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 = "/2.0.0-canary.63", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/2.0.0-canary.64", 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/esm/utils/IconsManager.js

@@ -25,7 +25,7 @@ class l {
     }), f.subscribe("theme", this.handleChangeTheme);
   }
 }
-const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.63"), h = globalThis;
+const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.64"), h = globalThis;
 let i = h[c];
 i || (i = new l(), Object.defineProperty(h, c, {
   value: i,

package/dist-react/esm/utils/PubSub.js

@@ -18,7 +18,7 @@ class e {
     });
   }
 }
-const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.63"), t = globalThis;
+const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.64"), t = globalThis;
 let b = t[u];
 b || (b = new e(), Object.defineProperty(t, u, {
   value: b,

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

@@ -7,7 +7,7 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/2.0.0-canary.63/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/2.0.0-canary.64/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
       if (r) return r;
       const i = h(() => 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/esm/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-v2-0-0-canary-63"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-64"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist-react/esm/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-v2-0-0-canary-63"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-64"), e = i(o);
   return n`${e}`;
 }
 export {

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

@@ -9,7 +9,7 @@ export declare class DsAccordion extends UiKitElement {
     size: DsAccordionAttrs['size'];
     disabled: DsAccordionAttrs['disabled'];
     _open: boolean;
-    firstUpdated(changedProps: PropertyValues): Promise<void>;
+    willUpdate(changedProps: PropertyValues): void;
     protected get containerClasses(): {
         [x: string]: boolean;
         container: boolean;

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

@@ -19,6 +19,7 @@ export declare class DsButton extends DsButton_base {
     rounded: DsButtonAttrs['rounded'];
     fullWidth: DsButtonAttrs['full-width'];
     loading: DsButtonAttrs['loading'];
+    textLoading: DsButtonAttrs['text-loading'];
     private closestForm;
     protected firstUpdated(): void;
     protected get classes(): {
@@ -33,6 +34,7 @@ export declare class DsButton extends DsButton_base {
     protected handleClick(event: Event): void;
     protected get iconTemplate(): any;
     protected get loadingTemplate(): typeof nothing | import("lit").TemplateResult<1>;
+    protected get contentTemplate(): import("lit").TemplateResult<1>;
     protected get cssTokens(): import("lit").HTMLTemplateResult;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -36,5 +36,6 @@ export type DsButtonAttrs = {
     rounded?: boolean;
     'full-width'?: boolean;
     loading?: boolean;
+    'text-loading'?: string;
 } & HtmlElement & CommonAttrs;
 export {};

package/package.json

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