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

package/dist/esm/node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directive-helpers.js

@@ -4,34 +4,35 @@ import { _$LH as l } from "./lit-html.js";
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { I: f } = l, m = () => document.createComment(""), u = (e, A, t) => {
+const { I: f } = l, v = (e) => e.strings === void 0, m = () => document.createComment(""), p = (e, i, t) => {
   var o;
-  const $ = e._$AA.parentNode, i = A === void 0 ? e._$AB : A._$AA;
+  const $ = e._$AA.parentNode, r = i === void 0 ? e._$AB : i._$AA;
   if (t === void 0) {
-    const s = $.insertBefore(m(), i), _ = $.insertBefore(m(), i);
-    t = new f(s, _, e, e.options);
+    const A = $.insertBefore(m(), r), _ = $.insertBefore(m(), r);
+    t = new f(A, _, e, e.options);
   } else {
-    const s = t._$AB.nextSibling, _ = t._$AM, a = _ !== e;
+    const A = t._$AB.nextSibling, _ = t._$AM, a = _ !== e;
     if (a) {
-      let r;
-      (o = t._$AQ) == null || o.call(t, e), t._$AM = e, t._$AP !== void 0 && (r = e._$AU) !== _._$AU && t._$AP(r);
+      let s;
+      (o = t._$AQ) == null || o.call(t, e), t._$AM = e, t._$AP !== void 0 && (s = e._$AU) !== _._$AU && t._$AP(s);
     }
-    if (s !== i || a) {
-      let r = t._$AA;
-      for (; r !== s; ) {
-        const d = r.nextSibling;
-        $.insertBefore(r, i), r = d;
+    if (A !== r || a) {
+      let s = t._$AA;
+      for (; s !== A; ) {
+        const d = s.nextSibling;
+        $.insertBefore(s, r), s = d;
       }
     }
   }
   return t;
-}, v = (e, A, t = e) => (e._$AI(A, t), e), c = {}, p = (e, A = c) => e._$AH = A, B = (e) => e._$AH, P = (e) => {
+}, u = (e, i, t = e) => (e._$AI(i, t), e), n = {}, g = (e, i = n) => e._$AH = i, B = (e) => e._$AH, P = (e) => {
   e._$AR(), e._$AA.remove();
 };
 export {
   B as getCommittedValue,
-  u as insertPart,
+  p as insertPart,
+  v as isSingleExpression,
   P as removePart,
-  v as setChildPartValue,
-  p as setCommittedValue
+  u as setChildPartValue,
+  g as setCommittedValue
 };

package/dist/esm/node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directive.js

@@ -3,8 +3,8 @@
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const s = { ATTRIBUTE: 1, CHILD: 2 }, $ = (i) => (...t) => ({ _$litDirective$: i, values: t });
-class _ {
+const s = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4 }, _ = (i) => (...t) => ({ _$litDirective$: i, values: t });
+class $ {
   constructor(t) {
   }
   get _$AU() {
@@ -21,7 +21,7 @@ class _ {
   }
 }
 export {
-  _ as Directive,
+  $ as Directive,
   s as PartType,
-  $ as directive
+  _ as directive
 };

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

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

package/dist/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.62"), 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/esm/utils/PubSub.js

@@ -18,7 +18,7 @@ class e {
     });
   }
 }
-const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.62"), 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/esm/utils/StylesRegistry/StylesRegistry.js

@@ -1,3 +1,5 @@
+import { concurrencyLimit as o } from "../concurrencyLimit.js";
+const h = o(20);
 class s {
   constructor() {
     this.stylePromises = /* @__PURE__ */ new Map(), this.getStyles = async ({
@@ -5,10 +7,10 @@ class s {
       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);
+      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);
     };
   }
   async fetchStyle({ url: e }) {
@@ -27,7 +29,7 @@ class s {
     return s.instance || (s.instance = new s()), s.instance;
   }
 }
-const a = s.getInstance();
+const y = s.getInstance();
 export {
-  a as stylesRegistry
+  y as stylesRegistry
 };

package/dist/esm/utils/concurrencyLimit.js

@@ -0,0 +1,32 @@
+function c(r) {
+  let t = 0;
+  const e = [];
+  function u() {
+    if (t < r) {
+      t++;
+      return;
+    }
+    return new Promise((n) => {
+      e.push(() => {
+        t++, n();
+      });
+    });
+  }
+  function o() {
+    t--;
+    const n = e.shift();
+    n && n();
+  }
+  return async (n) => {
+    const i = u();
+    i && await i;
+    try {
+      return await n();
+    } finally {
+      o();
+    }
+  };
+}
+export {
+  c as concurrencyLimit
+};

package/dist/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-62"), 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/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-62"), 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/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/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/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/dist/types/components/ds-select/ds-select.d.ts

@@ -7,6 +7,7 @@ export declare class DsSelect extends UiKitElement {
     mode: DsSelectAttrs['mode'];
     size: DsSelectAttrs['size'];
     variant: DsSelectAttrs['variant'];
+    readonly: DsSelectAttrs['readonly'];
     private _open;
     private nativeSelect;
     private nativeLabel;
@@ -44,6 +45,7 @@ export declare class DsSelect extends UiKitElement {
         container: boolean;
         open: boolean;
         disabled: boolean;
+        readonly: boolean;
         filled: boolean;
         invalid: boolean;
         error: boolean;

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

@@ -3,4 +3,5 @@ export interface DsSelectAttrs extends CommonAttrs {
     mode?: 'dark' | 'light';
     size?: 'medium' | 'small';
     variant?: 'primary' | 'secondary' | (string & {});
+    readonly?: boolean;
 }

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

@@ -11,6 +11,8 @@ export declare class DsSlider extends DsSlider_base {
     step: DsSliderAttrs['step'];
     initialValueMin: DsSliderAttrs['initial-value-min'];
     initialValueMax: DsSliderAttrs['initial-value-max'];
+    valueMin: DsSliderAttrs['value-min'];
+    valueMax: DsSliderAttrs['value-max'];
     mode: DsSliderAttrs['mode'];
     locale: DsSliderAttrs['locale'];
     localeMatcher: DsSliderAttrs['locale-matcher'];
@@ -30,13 +32,16 @@ export declare class DsSlider extends DsSlider_base {
     inputMinAriaLabel: DsSliderAttrs['input-min-aria-label'];
     inputMaxAriaLabel: DsSliderAttrs['input-max-aria-label'];
     protected track: HTMLInputElement;
-    protected valueMin: number;
-    protected valueMax: number;
+    protected _valueMin: number;
+    protected _valueMax: number;
     protected activeThumb: 'min' | 'max' | null;
     protected animationFrameRequest: number;
     protected editingField?: 'min' | 'max' | null;
     protected keyboardMode: boolean;
     static styles: import("lit").CSSResult[];
+    protected get isRange(): boolean;
+    private isControlled;
+    protected willUpdate(changedProps: PropertyValues): void;
     disconnectedCallback(): void;
     protected firstUpdated(changedProps: PropertyValues): void;
     protected getTrackPct(value: number): number;

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

@@ -29,14 +29,29 @@ type SliderCustomUnit = Omit<NoUnit, 'style'> & {
     'unit-symbol': string;
 };
 type SliderUnitStyle = SliderCurrency | SliderDecimal | SliderPercent | SliderUnit | SliderNoUnit | SliderCustomUnit;
+type UncontrolledMin = {
+    'initial-value-min'?: number;
+    'value-min'?: never;
+};
+type ControlledMin = {
+    'initial-value-min'?: never;
+    'value-min'?: number;
+};
+type UncontrolledMax = {
+    'initial-value-max'?: number;
+    'value-max'?: never;
+};
+type ControlledMax = {
+    'initial-value-max'?: never;
+    'value-max'?: number;
+};
+type SliderValueProps = (UncontrolledMin | ControlledMin) & (UncontrolledMax | ControlledMax);
 export type DsSliderAttrs = CommonAttrs & {
     min?: number;
     max?: number;
     'min-label'?: string;
     'max-label'?: string;
     step?: number;
-    'initial-value-min'?: number;
-    'initial-value-max'?: number;
     mode?: 'dark' | 'light';
     size?: Size | ResponsiveSize;
     disabled?: boolean;
@@ -51,5 +66,5 @@ export type DsSliderAttrs = CommonAttrs & {
     'use-grouping'?: 'auto' | boolean;
     'input-min-aria-label'?: string;
     'input-max-aria-label'?: string;
-} & SliderUnitStyle;
+} & SliderValueProps & SliderUnitStyle;
 export {};

package/dist/types/components/ds-text-input/ds-text-input.d.ts

@@ -9,6 +9,7 @@ export declare class DsTextInput extends DsTextInput_base {
     helperText: DsTextInputAttrs['helper-text'];
     forcedError: DsTextInputAttrs['forced-error'];
     invalidError: DsTextInputAttrs['invalid-error'];
+    readonlyText: DsTextInputAttrs['readonly-text'];
     dataAriaLabelRemoveButton: DsTextInputAttrs['data-aria-label-remove-button'];
     protected handleClickIcon: () => void;
     private get classes();
@@ -17,6 +18,7 @@ export declare class DsTextInput extends DsTextInput_base {
     protected get lengthTemplate(): typeof nothing | import("lit").TemplateResult<1>;
     protected get helperTextTemplate(): typeof nothing | import("lit").TemplateResult<1>;
     protected get forcedErrorTemplate(): typeof nothing | import("lit").TemplateResult<1>;
+    protected get readonlyTextTemplate(): typeof nothing | import("lit").TemplateResult<1>;
     protected get invalidErrorTemplate(): typeof nothing | import("lit").TemplateResult<1>;
 }
 export {};

package/dist/types/components/ds-text-input/ds-text-input.types.d.ts

@@ -4,5 +4,6 @@ export type DsTextInputAttrs = {
     'helper-text'?: string;
     'forced-error'?: string;
     'invalid-error'?: string;
+    'readonly-text'?: string;
     'data-aria-label-remove-button'?: string;
 } & CommonAttrs;

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

@@ -9,6 +9,7 @@ export declare class DsTextarea extends DsTextarea_base {
     helperText: DsTextareaAttrs['helper-text'];
     forcedError: DsTextareaAttrs['forced-error'];
     invalidError: DsTextareaAttrs['invalid-error'];
+    readonlyText: DsTextareaAttrs['readonly-text'];
     mode: DsTextareaAttrs['mode'];
     protected onInputReady(nativeInput: HTMLInputElement | HTMLTextAreaElement): void;
     private get classes();
@@ -16,6 +17,7 @@ export declare class DsTextarea extends DsTextarea_base {
     protected get lengthTemplate(): typeof nothing | import("lit").TemplateResult<1>;
     protected get helperTextTemplate(): typeof nothing | import("lit").TemplateResult<1>;
     protected get forcedErrorTemplate(): typeof nothing | import("lit").TemplateResult<1>;
+    protected get readonlyTextTemplate(): typeof nothing | import("lit").TemplateResult<1>;
     protected get invalidErrorTemplate(): typeof nothing | import("lit").TemplateResult<1>;
 }
 export {};

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

@@ -8,6 +8,7 @@ export type DsTextareaAttrs = {
     'helper-text'?: string;
     'forced-error'?: string;
     'invalid-error'?: string;
+    'readonly-text'?: string;
     mode?: 'dark' | 'light';
 } & CommonAttrs;
 export {};

package/dist/types/mixins/inputStatesMixin.d.ts

@@ -8,6 +8,7 @@ export interface InputStatesInterface {
         invalid: boolean;
         filled: boolean;
         disabled: boolean;
+        readonly: boolean;
     };
     nativeInput: HTMLInputElement | HTMLTextAreaElement | undefined;
 }

package/dist/types/utils/concurrencyLimit.d.ts

@@ -0,0 +1,4 @@
+type Callback<T> = () => Promise<T>;
+type LimitedPromises = <T>(callback: Callback<T>) => Promise<T>;
+export declare function concurrencyLimit(maxConcurrent: number): LimitedPromises;
+export {};

package/dist/types/utils/concurrencyLimit.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist-react/cjs/components/ds-button/ds-button.cjs

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../base/UiKitElement.cjs"),y=require("../../decorators/customUiKitElement.cjs"),b=require("../../mixins/ViewportMixin.cjs"),n=require("../../utils/booleanConverter.cjs"),g=require("../../utils/htmlWithTokens.cjs"),v=require("../../utils/objectConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const o=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 s=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),f=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),$=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.cjs"),u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.cjs"),d=require("./styles/common.styles.cjs");var B=Object.defineProperty,D=Object.getOwnPropertyDescriptor,t=(p,e,r,l)=>{for(var i=l>1?void 0:l?D(e,r):e,h=p.length-1,c;h>=0;h--)(c=p[h])&&(i=(l?c(e,r,i):c(i))||i);return l&&i&&B(e,r,i),i};exports.DsButton=class extends b.ViewportMixin(m.UiKitElement){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}firstUpdated(){this.closestForm=this.closest("form")}get classes(){const e=typeof this.size=="string"?this.size:this.size[this.viewport];return{button:!0,custom:this.htmlTagName==="custom",[e]:!!e,[this.mode]:!!this.mode,[this.variant]:!!this.variant,rounded:this.rounded,disabled:this.disabled||this.loading,destructive:this.destructive,"full-width":this.fullWidth}}handleClick(e){if(this.href||e.preventDefault(),this.closestForm&&this.type==="submit"){const r=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0});this.closestForm.dispatchEvent(r)}}get iconTemplate(){return this.iconName?this.componentFactory.createIcon({class:"icon","icon-name":this.iconName}):o.nothing}get loadingTemplate(){return this.loading?o.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../base/UiKitElement.cjs"),y=require("../../decorators/customUiKitElement.cjs"),g=require("../../mixins/ViewportMixin.cjs"),l=require("../../utils/booleanConverter.cjs"),b=require("../../utils/htmlWithTokens.cjs"),v=require("../../utils/objectConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const e=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 s=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),$=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),f=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.cjs"),u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),n=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.cjs"),m=require("./styles/common.styles.cjs");var B=Object.defineProperty,D=Object.getOwnPropertyDescriptor,t=(p,o,r,a)=>{for(var i=a>1?void 0:a?D(o,r):o,h=p.length-1,c;h>=0;h--)(c=p[h])&&(i=(a?c(o,r,i):c(i))||i);return a&&i&&B(o,r,i),i};exports.DsButton=class extends g.ViewportMixin(d.UiKitElement){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}firstUpdated(){this.closestForm=this.closest("form")}get classes(){const o=typeof this.size=="string"?this.size:this.size[this.viewport];return{button:!0,custom:this.htmlTagName==="custom",[o]:!!o,[this.mode]:!!this.mode,[this.variant]:!!this.variant,rounded:this.rounded,disabled:this.disabled||this.loading,destructive:this.destructive,"full-width":this.fullWidth}}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(r)}}get iconTemplate(){return this.iconName?this.componentFactory.createIcon({class:"icon","icon-name":this.iconName}):e.nothing}get loadingTemplate(){return this.loading?e.html`
             <span class="loading-dots">
                 <span>.</span>
                 <span>.</span>
                 <span>.</span>
             </span>
-        `:o.nothing}get cssTokens(){return g.htmlWithTokens`
+        `:e.nothing}get contentTemplate(){return this.loading&&this.textLoading?e.html`${this.textLoading}`:e.html`<slot></slot>`}get cssTokens(){return b.htmlWithTokens`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -14,43 +14,48 @@
                 :host:has(::slotted(*:disabled)){
                     pointer-events: none;
                 }
-            </style>`}render(){return o.html`
+            </style>`}render(){return e.html`
             ${this.cssTokens}
-            ${$.choose(this.htmlTagName||"button",[["button",()=>{var e;return o.html`
-                        <button
-                            aria-label=${(e=this.textContent)==null?void 0:e.replace(/^\s+|\s+$/g,"")}
-                            class=${u.classMap(this.classes)}
-                            type=${this.type}
-                            @click=${this.handleClick}
-                            ?disabled=${this.disabled}
-                        >
-                            ${a.when(this.iconPosition==="left",()=>o.html` ${this.iconTemplate} `)}
-                            <span class="container">
-                                <slot></slot>
-                                ${this.loadingTemplate}
-                            </span>
-                            ${a.when(this.iconPosition==="right",()=>o.html` ${this.iconTemplate} `)}
-                        </button>
-                    `}],["a",()=>{var e;return o.html`
-                        <a
-                            aria-label=${(e=this.textContent)==null?void 0:e.replace(/^\s+|\s+$/g,"")}
-                            class=${u.classMap(this.classes)}
-                            href=${this.href}
-                            rel=${this.rel}
-                            target=${this.target}
-                            @click=${this.handleClick}
-                            ?disabled=${this.disabled}
-                        >
-                            ${a.when(this.iconPosition==="left",()=>o.html`${this.iconTemplate}`)}
-                            <span class="container">
-                                <slot></slot>
-                                ${this.loadingTemplate}
-                            </span>
-                            ${a.when(this.iconPosition==="right",()=>o.html`${this.iconTemplate}`)}
-                        </a>
-                    `}],["custom",()=>o.html`
+            ${f.choose(this.htmlTagName||"button",[["button",()=>{var o;return e.html`
                         <div class=${u.classMap(this.classes)}>
-                            <slot></slot>
+                            <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}
+                            >
+                                ${n.when(this.iconPosition==="left",()=>e.html` ${this.iconTemplate} `)}
+                                <span class="container">
+                                    ${this.contentTemplate}
+                                    ${this.loadingTemplate}
+                                </span>
+                                ${n.when(this.iconPosition==="right",()=>e.html` ${this.iconTemplate} `)}
+                            </button>
+                        </div>
+                    `}],["a",()=>{var o;return e.html`
+                        <div class=${u.classMap(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}
+                            >
+                                ${n.when(this.iconPosition==="left",()=>e.html`${this.iconTemplate}`)}
+                                <span class="container">
+                                    ${this.contentTemplate}
+                                    ${this.loadingTemplate}
+                                </span>
+                                ${n.when(this.iconPosition==="right",()=>e.html`${this.iconTemplate}`)}
+                            </a>
+                        </div>
+                    `}],["custom",()=>e.html`
+                        <div class=${u.classMap(this.classes)}>
+                            ${n.when(this.iconPosition==="left",()=>e.html`${this.iconTemplate}`)}
+                            ${this.loading&&this.textLoading?e.html`<span class="container">${this.textLoading}${this.loadingTemplate}</span>`:e.html`<slot></slot>${this.loadingTemplate}`}
+                            ${n.when(this.iconPosition==="right",()=>e.html`${this.iconTemplate}`)}
                         </div>
                     `]])}
-        `}};exports.DsButton.styles=[d.buttonStyles,d.textStyles,d.loadingDotsStyles];t([s.property({type:String})],exports.DsButton.prototype,"variant",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"mode",2);t([s.property({type:String,converter:v.objectConverter})],exports.DsButton.prototype,"size",2);t([s.property({type:Boolean,converter:n.booleanConverter})],exports.DsButton.prototype,"disabled",2);t([s.property({type:Boolean,converter:n.booleanConverter})],exports.DsButton.prototype,"destructive",2);t([s.property({type:String,attribute:"icon-name"})],exports.DsButton.prototype,"iconName",2);t([s.property({type:String,attribute:"html-tag-name"})],exports.DsButton.prototype,"htmlTagName",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"href",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"rel",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"target",2);t([s.property({type:String})],exports.DsButton.prototype,"type",2);t([s.property({type:String,attribute:"icon-position"})],exports.DsButton.prototype,"iconPosition",2);t([s.property({type:Boolean,converter:n.booleanConverter})],exports.DsButton.prototype,"rounded",2);t([s.property({type:Boolean,converter:n.booleanConverter,attribute:"full-width"})],exports.DsButton.prototype,"fullWidth",2);t([s.property({type:Boolean,converter:n.booleanConverter})],exports.DsButton.prototype,"loading",2);t([f.state()],exports.DsButton.prototype,"closestForm",2);exports.DsButton=t([y.customUiKitElement("ds-button")],exports.DsButton);
+        `}};exports.DsButton.styles=[m.buttonStyles,m.textStyles,m.loadingDotsStyles];t([s.property({type:String})],exports.DsButton.prototype,"variant",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"mode",2);t([s.property({type:String,converter:v.objectConverter})],exports.DsButton.prototype,"size",2);t([s.property({type:Boolean,converter:l.booleanConverter})],exports.DsButton.prototype,"disabled",2);t([s.property({type:Boolean,converter:l.booleanConverter})],exports.DsButton.prototype,"destructive",2);t([s.property({type:String,attribute:"icon-name"})],exports.DsButton.prototype,"iconName",2);t([s.property({type:String,attribute:"html-tag-name"})],exports.DsButton.prototype,"htmlTagName",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"href",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"rel",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"target",2);t([s.property({type:String})],exports.DsButton.prototype,"type",2);t([s.property({type:String,attribute:"icon-position"})],exports.DsButton.prototype,"iconPosition",2);t([s.property({type:Boolean,converter:l.booleanConverter})],exports.DsButton.prototype,"rounded",2);t([s.property({type:Boolean,converter:l.booleanConverter,attribute:"full-width"})],exports.DsButton.prototype,"fullWidth",2);t([s.property({type:Boolean,converter:l.booleanConverter})],exports.DsButton.prototype,"loading",2);t([s.property({type:String,attribute:"text-loading"})],exports.DsButton.prototype,"textLoading",2);t([$.state()],exports.DsButton.prototype,"closestForm",2);exports.DsButton=t([y.customUiKitElement("ds-button")],exports.DsButton);

package/dist-react/cjs/components/ds-button/styles/common.styles.cjs

@@ -1,4 +1,4 @@
-"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 t=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),i=t.css`
+"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 t=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),e=t.css`
     :host {
         display: contents;
     }
@@ -18,7 +18,45 @@
     .button.full-width {
         width: 100%;
     }
-`,o=t.css`
+
+    .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;
+    }
+`,i=t.css`
     .naked.container {
         display: inline-flex;
     }
@@ -104,4 +142,4 @@
             opacity: 1;
         }
     }
-`;exports.buttonStyles=i;exports.loadingDotsStyles=n;exports.textStyles=o;
+`;exports.buttonStyles=e;exports.loadingDotsStyles=n;exports.textStyles=i;