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

package/dist/cjs/node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/live.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../lit-html.cjs"),t=require("../directive.cjs"),s=require("../directive-helpers.cjs");/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const l=t.directive(class extends t.Directive{constructor(e){if(super(e),e.type!==t.PartType.PROPERTY&&e.type!==t.PartType.ATTRIBUTE&&e.type!==t.PartType.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!s.isSingleExpression(e))throw Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[r]){if(r===n.noChange||r===n.nothing)return r;const i=e.element,o=e.name;if(e.type===t.PartType.PROPERTY){if(r===i[o])return n.noChange}else if(e.type===t.PartType.BOOLEAN_ATTRIBUTE){if(!!r===i.hasAttribute(o))return n.noChange}else if(e.type===t.PartType.ATTRIBUTE&&i.getAttribute(o)===r+"")return n.noChange;return s.setCommittedValue(e),r}});exports.live=l;

package/dist/cjs/utils/IconsManager.cjs

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

package/dist/cjs/utils/PubSub.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class u{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(s,r){return this.subscribers[s]||(this.subscribers[s]=[]),this.subscribers[s].push(r),this.lastPublishedData[s]}unsubscribe(s,r){this.subscribers[s]&&(this.subscribers[s]=this.subscribers[s].filter(i=>i!==r))}publish(s,r){this.lastPublishedData[s]=r,this.subscribers[s]&&this.subscribers[s].forEach(i=>{try{i(r)}catch(c){console.error(`Error in subscriber for event "${s}":`,c)}})}}const t=Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.62"),e=globalThis;let b=e[t];b||(b=new u,Object.defineProperty(e,t,{value:b,writable:!1,configurable:!1,enumerable:!1}));const l=b;exports.PubSub=u;exports.pubSub=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class u{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(s,r){return this.subscribers[s]||(this.subscribers[s]=[]),this.subscribers[s].push(r),this.lastPublishedData[s]}unsubscribe(s,r){this.subscribers[s]&&(this.subscribers[s]=this.subscribers[s].filter(i=>i!==r))}publish(s,r){this.lastPublishedData[s]=r,this.subscribers[s]&&this.subscribers[s].forEach(i=>{try{i(r)}catch(c){console.error(`Error in subscriber for event "${s}":`,c)}})}}const t=Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.64"),e=globalThis;let b=e[t];b||(b=new u,Object.defineProperty(e,t,{value:b,writable:!1,configurable:!1,enumerable:!1}));const l=b;exports.PubSub=u;exports.pubSub=l;

package/dist/cjs/utils/StylesRegistry/StylesRegistry.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class s{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:e,theme:t})=>{if(!t||!e)return;const r=`https://ds-assets.cupra.com/2.0.0-canary.62/styles/${t}/components/${e}.css`,c=this.getCachedStyleSheetPromise({url:r});if(c)return c;const i=this.fetchStyle({url:r}).then(n=>(n||this.stylePromises.delete(r),n));return this.stylePromises.set(r,i),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>"u")return;const t=await fetch(e,{cache:"force-cache"});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return s.instance||(s.instance=new s),s.instance}}const o=s.getInstance();exports.stylesRegistry=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../concurrencyLimit.cjs"),a=o.concurrencyLimit(20);class s{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:e,theme:t})=>{if(!t||!e)return;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=a(()=>this.fetchStyle({url:c})).then(n=>(n||this.stylePromises.delete(c),n));return this.stylePromises.set(c,i),this.stylePromises.get(c)}}async fetchStyle({url:e}){try{if(typeof fetch>"u")return;const t=await fetch(e,{cache:"force-cache"});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return s.instance||(s.instance=new s),s.instance}}const h=s.getInstance();exports.stylesRegistry=h;

package/dist/cjs/utils/concurrencyLimit.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function c(r){let n=0;const e=[];function u(){if(n<r){n++;return}return new Promise(t=>{e.push(()=>{n++,t()})})}function o(){n--;const t=e.shift();t&&t()}return async t=>{const i=u();i&&await i;try{return await t()}finally{o()}}}exports.concurrencyLimit=c;

package/dist/cjs/utils/cssWithTokens.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");function i(r,...t){const s=String.raw({raw:r},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-62"),n=e.unsafeCSS(s);return e.css`${n}`}exports.cssWithTokens=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");function i(r,...t){const s=String.raw({raw:r},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-64"),n=e.unsafeCSS(s);return e.css`${n}`}exports.cssWithTokens=i;

package/dist/cjs/utils/htmlWithTokens.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const i=require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const o=require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.cjs");function a(e,...t){const r=String.raw({raw:e},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-62"),n=o.unsafeHTML(r);return i.html`${n}`}exports.htmlWithTokens=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const i=require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const o=require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.cjs");function a(e,...t){const r=String.raw({raw:e},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-64"),n=o.unsafeHTML(r);return i.html`${n}`}exports.htmlWithTokens=a;

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

@@ -19,8 +19,8 @@ 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;
+  willUpdate(e) {
+    super.willUpdate(e), e.has("open") && (this._open = this.open);
   }
   get containerClasses() {
     return {
@@ -64,13 +64,13 @@ let o = class extends u {
                 <style>
                     :host{
                         color-scheme: ${this.mode};
-                        pointer-events: ${this.disabled ? "none" : "visible"};
+                        pointer-events: ${this.disabled ? "none" : "auto"};
                     }
                 </style>
         `;
   }
   handleKeyDown(e) {
-    this.disabled && e.preventDefault();
+    this.disabled && (e.preventDefault(), e.stopPropagation());
   }
   handleToggle(e) {
     this._open = e.newState === "open";

package/dist/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/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/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/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