@cupra/ui-kit 2.0.0-canary.62 → 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-select/ds-select.js

@@ -1,30 +1,31 @@
-import { UiKitElement as f } from "../base/UiKitElement.js";
-import { customUiKitElement as S } from "../../decorators/customUiKitElement.js";
+import { UiKitElement as y } from "../base/UiKitElement.js";
+import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as S } from "../../utils/booleanConverter.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 y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { html as c, nothing as O } 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 p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as O } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { property as h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
 import { queryAssignedElements as v } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
 import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import { SelectKeyboardController as m } from "./controllers/SelectKeyboardController.js";
-import { commonStyles as b } from "./styles/common.styles.js";
-var x = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (e, t, i, o) => {
-  for (var a = o > 1 ? void 0 : o ? I(t, i) : t, l = e.length - 1, r; l >= 0; l--)
+import { commonStyles as x } from "./styles/common.styles.js";
+var I = Object.defineProperty, C = Object.getOwnPropertyDescriptor, n = (e, t, i, o) => {
+  for (var a = o > 1 ? void 0 : o ? C(t, i) : t, l = e.length - 1, r; l >= 0; l--)
     (r = e[l]) && (a = (o ? r(t, i, a) : r(a)) || a);
-  return o && a && x(t, i, a), a;
+  return o && a && I(t, i, a), a;
 };
-let s = class extends f {
+let s = class extends y {
   constructor() {
-    super(...arguments), this.mode = "light", this.size = "medium", this.variant = "primary", this._open = !1, this.nativeSelect = null, this.nativeLabel = null, this.nativeOptions = [], this.activeIndex = -1, this.hasForcedError = !1, this.handleMutations = (e) => {
+    super(...arguments), this.mode = "light", this.size = "medium", this.variant = "primary", this.readonly = !1, this._open = !1, this.nativeSelect = null, this.nativeLabel = null, this.nativeOptions = [], this.activeIndex = -1, this.hasForcedError = !1, this.handleMutations = (e) => {
       e.forEach((t) => {
         t.type === "childList" && this.syncNativeOptions();
       }), this.requestUpdate();
     }, this.syncNativeOptions = () => {
       this.nativeOptions = Array.from(this.nativeSelect.options);
     }, this.handleOpen = () => {
-      this._open = !0, this.activeIndex = this.findSelectedOptionIndex(), this.focusDisplaySelect();
+      this.readonly || (this._open = !0, this.activeIndex = this.findSelectedOptionIndex(), this.focusDisplaySelect());
     }, this.handleClose = () => {
       this._open = !1;
     }, this.handleClickDisplaySelect = () => {
@@ -125,6 +126,7 @@ let s = class extends f {
       container: !0,
       open: this._open,
       disabled: !!((e = this.nativeSelect) != null && e.disabled),
+      readonly: !!this.readonly,
       filled: !!((i = (t = this.nativeOptions) == null ? void 0 : t.find((a) => a.selected && !a.hidden)) != null && i.selected),
       invalid: !((o = this.nativeSelect) != null && o.validity.valid),
       error: this.hasForcedError,
@@ -140,12 +142,13 @@ let s = class extends f {
     return this._open;
   }
   render() {
-    return d`
+    return c`
             <slot @slotchange=${this.initializeNativeSelect}></slot>
             <div class=${u(this.containerClasses)}>
                 ${this.displaySelectTemplate}
                 ${this.optionsContainerTemplate}
                 <slot name="helper-text"></slot>
+                <slot name="readonly-text"></slot>
                 <slot name="forced-error" @slotchange=${this.handleChangeForcedError}></slot>
                 <slot name="invalid-error"></slot>
             </div>
@@ -164,10 +167,10 @@ let s = class extends f {
       if (l.nodeType !== 3)
         return r;
       if (l.textContent.trim() === "") return "";
-      const h = document.createElement("span");
-      return h.classList.add("text"), h.appendChild(r), h;
+      const p = document.createElement("span");
+      return p.classList.add("text"), p.appendChild(r), p;
     });
-    return d`
+    return c`
             <div class="select-outline">
                 <div class="select-container">
                     <label id="display-label" class="label">${(o = this.nativeLabel) == null ? void 0 : o.innerText}</label>
@@ -195,17 +198,17 @@ let s = class extends f {
     return this._open && this.activeIndex >= 0 ? `${s.ARIA_OPTION_PREFIX}${this.nativeOptions[this.activeIndex].value}` : "";
   }
   get optionsContainerTemplate() {
-    return d`
+    return c`
             <div id="options-container" class="options-container" role="listbox">
                 ${this.nativeOptions.map(
-      (e, t) => e.hidden ? y : this.renderOptionClone(e, t)
+      (e, t) => e.hidden ? O : this.renderOptionClone(e, t)
     )}
             </div>
         `;
   }
   renderOptionClone(e, t) {
     const i = Array.from(e.childNodes).map((o) => o.cloneNode(!0));
-    return d`
+    return c`
             <div
                 id="${s.ARIA_OPTION_PREFIX}${e.value}"
                 class=${u({
@@ -225,34 +228,37 @@ let s = class extends f {
         `;
   }
 };
-s.styles = [b];
+s.styles = [x];
 s.ARIA_OPTION_PREFIX = "option-";
 n([
-  p({ type: String })
+  h({ type: String })
 ], s.prototype, "mode", 2);
 n([
-  p({ type: String })
+  h({ type: String })
 ], s.prototype, "size", 2);
 n([
-  p({ type: String })
+  h({ type: String })
 ], s.prototype, "variant", 2);
 n([
-  c()
+  h({ type: Boolean, converter: S, reflect: !0 })
+], s.prototype, "readonly", 2);
+n([
+  d()
 ], s.prototype, "_open", 2);
 n([
-  c()
+  d()
 ], s.prototype, "nativeSelect", 2);
 n([
-  c()
+  d()
 ], s.prototype, "nativeLabel", 2);
 n([
-  c()
+  d()
 ], s.prototype, "nativeOptions", 2);
 n([
-  c()
+  d()
 ], s.prototype, "activeIndex", 2);
 n([
-  c()
+  d()
 ], s.prototype, "hasForcedError", 2);
 n([
   v({ slot: "", selector: "select", flatten: !0 })
@@ -264,10 +270,10 @@ n([
   v({ slot: "forced-error", flatten: !0 })
 ], s.prototype, "forcedError", 2);
 n([
-  O(".select")
+  b(".select")
 ], s.prototype, "displaySelect", 2);
 s = n([
-  S("ds-select")
+  f("ds-select")
 ], s);
 export {
   s as DsSelect