@cupra/ui-kit 2.0.0-canary.17 → 2.0.0-canary.171

package/dist/esm/components/ds-list-item/ds-list-item.js

@@ -1,39 +1,37 @@
-import { UiKitElement as p } from "../base/UiKitElement.js";
-import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as i, nothing as d } 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 l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as h } from "./styles/common.styles.js";
-import { cupraDiagonalStyles as v } from "./styles/cupra-diagonal.styles.js";
-var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (t, e, a, n) => {
-  for (var s = n > 1 ? void 0 : n ? x(e, a) : e, m = t.length - 1, c; m >= 0; m--)
-    (c = t[m]) && (s = (n ? c(e, a, s) : c(s)) || s);
-  return n && s && y(e, a, s), s;
-};
-let r = class extends p {
-  constructor() {
-    super(...arguments), this.variant = "selection", this.selected = !1, this.disabled = !1, this.size = "medium";
-  }
-  get classes() {
-    return {
-      content: !0,
-      [this.size]: !0,
-      [`${this.variant}-variant`]: !0,
-      selected: this.selected,
-      disabled: this.disabled
-    };
-  }
-  connectedCallback() {
-    var t;
-    if ((t = super.connectedCallback) == null || t.call(this), !this.hasAttribute("size")) {
-      const e = this.closest("ds-list");
-      e && (this.size = e.size);
-    }
-  }
-  renderSelectionTemplate() {
-    return i`
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
+import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { commonStyles as c } from "./styles/common.styles.js";
+//#region src/components/ds-list-item/ds-list-item.ts
+var l, u = (l = class extends i {
+	constructor(...e) {
+		super(...e), this.variant = "selection", this.selected = !1, this.disabled = !1, this.size = "large";
+	}
+	get classes() {
+		return {
+			content: !0,
+			[this.size]: !0,
+			[`${this.variant}-variant`]: !0,
+			selected: this.selected,
+			disabled: this.disabled
+		};
+	}
+	connectedCallback() {
+		var e;
+		if ((e = super.connectedCallback) == null || e.call(this), !this.hasAttribute("size")) {
+			let e = this.closest("ds-list");
+			e && (this.size = e.size);
+		}
+	}
+	renderSelectionTemplate() {
+		return t`
             <slot name="input-left"></slot>
             <slot name="icon"></slot>
             <div class="container-text">
@@ -43,9 +41,9 @@ let r = class extends p {
             <slot name="secondary-text"></slot>
             <slot name="input-right"></slot>
         `;
-  }
-  renderActionTemplate() {
-    return i`
+	}
+	renderActionTemplate() {
+		return t`
             <slot name="image-square"></slot>
             <slot name="image-wide"></slot>
             <slot name="icon-left"></slot>
@@ -56,9 +54,9 @@ let r = class extends p {
             <slot name="secondary-text"></slot>
             <slot name="icon-right"></slot>
         `;
-  }
-  renderInfoTemplate() {
-    return i`
+	}
+	renderInfoTemplate() {
+		return t`
             <slot name="icon"></slot>
             <div class="container-text">
                 <div class="container">
@@ -69,46 +67,37 @@ let r = class extends p {
             </div>
             <slot name="aside"></slot>
         `;
-  }
-  renderByTemplate() {
-    switch (this.variant) {
-      case "selection":
-        return this.renderSelectionTemplate();
-      case "action":
-        return this.renderActionTemplate();
-      case "info":
-        return this.renderInfoTemplate();
-      default:
-        return d;
-    }
-  }
-  render() {
-    const t = this.variant !== "info";
-    return i`
-            <li class=${f(this.classes)} role="listitem" tabindex="0" ?aria-disabled=${this.disabled}>
+	}
+	renderByTemplate() {
+		switch (this.variant) {
+			case "selection": return this.renderSelectionTemplate();
+			case "action": return this.renderActionTemplate();
+			case "info": return this.renderInfoTemplate();
+			default: return e;
+		}
+	}
+	render() {
+		let n = this.variant !== "info";
+		return t`
+            <li class=${s(this.classes)} role="listitem" tabindex="0" ?aria-disabled=${this.disabled}>
                 ${this.renderByTemplate()}
             </li>
 
-            ${t ? i`<ds-divider orientation="horizontal" variant="primary"></ds-divider>` : d}
+            ${n ? o`<ds-divider orientation="horizontal" variant="primary" role="presentation"></ds-divider>` : e}
         `;
-  }
-};
-r.styles = [h, v];
-o([
-  l({ type: String, reflect: !0 })
-], r.prototype, "variant", 2);
-o([
-  l({ type: Boolean, reflect: !0 })
-], r.prototype, "selected", 2);
-o([
-  l({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-o([
-  l({ type: String, reflect: !0 })
-], r.prototype, "size", 2);
-r = o([
-  u("ds-list-item")
-], r);
-export {
-  r as DsListItem
-};
+	}
+}, l.styles = [c], l);
+r([n({
+	type: String,
+	reflect: !0
+})], u.prototype, "variant", void 0), r([n({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "selected", void 0), r([n({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), r([n({
+	type: String,
+	reflect: !0
+})], u.prototype, "size", void 0), u = r([a("ds-list-item")], u);
+//#endregion

package/dist/esm/components/ds-list-item/styles/common.styles.js

@@ -1,10 +1,11 @@
-import { cssWithTokens as o } from "../../../utils/cssWithTokens.js";
-const s = o`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-list-item/styles/common.styles.ts
+var t = e`
     :host {
         display: block;
         width: fit-content;
     }
 `;
-export {
-  s as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist/esm/components/ds-loader-bar/ds-loader-bar.js

@@ -1,23 +1,15 @@
-import { DsBaseProgressBar as l } from "../base/ds-base-progress-bar/ds-base-progress-bar.js";
-import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as n } 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 { commonStyles as f } from "./styles/common.styles.js";
-var _ = Object.getOwnPropertyDescriptor, c = Object.getPrototypeOf, g = Reflect.get, v = (r, t, s, m) => {
-  for (var o = m > 1 ? void 0 : m ? _(t, s) : t, a = r.length - 1, p; a >= 0; a--)
-    (p = r[a]) && (o = p(o) || o);
-  return o;
-}, u = (r, t, s) => g(c(r), s, t);
-let e = class extends l {
-  render() {
-    return this.show ? this.barTemplate : n;
-  }
-};
-e.styles = [...u(e, e, "styles"), f];
-e = v([
-  i("ds-loader-bar", { skipTagAsComponentName: !0 })
-], e);
-export {
-  e as DsLoaderBar
-};
+import { E as e } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { customUiKitElement as n } from "../../decorators/customUiKitElement.js";
+import { DsBaseProgressBar as r } from "../base/ds-base-progress-bar/ds-base-progress-bar.js";
+import { commonStyles as i } from "./styles/common.styles.js";
+import { _superPropGet as a } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/superPropGet.js";
+//#region src/components/ds-loader-bar/ds-loader-bar.ts
+var o, s = (o = class extends r {
+	render() {
+		return this.show ? this.barTemplate : e;
+	}
+}, o.styles = [...a(o, "styles", o), i], o);
+s = t([n("ds-loader-bar", { skipTagAsComponentName: !0 })], s);
+//#endregion

package/dist/esm/components/ds-loader-bar/styles/common.styles.js

@@ -1,8 +1,7 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-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 r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const n = r`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-loader-bar/styles/common.styles.ts
+var t = e`
     .fill {
         width: 33%;
         transform: translateX(-100%);
@@ -18,6 +17,5 @@ const n = r`
         }
     }
 `;
-export {
-  n as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist/esm/components/ds-loader-dots/ds-loader-dots.js

@@ -1,62 +1,61 @@
-import { UiKitElement as a } from "../base/UiKitElement.js";
-import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as h } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as c } from "../../utils/htmlWithTokens.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as f, html as v } 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 { classMap as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as u } from "./styles/common.styles.js";
-var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (n, s, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? _(s, i) : s, m = n.length - 1, l; m >= 0; m--)
-    (l = n[m]) && (t = (o ? l(s, i, t) : l(t)) || t);
-  return o && t && g(s, i, t), t;
-};
-let e = class extends a {
-  constructor() {
-    super(...arguments), this.show = !1, this.mode = "light", this.size = "large";
-  }
-  get classes() {
-    return {
-      container: !0,
-      [this.size]: !0,
-      [this.mode]: !!this.mode
-    };
-  }
-  get styleTokens() {
-    return c`
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { o as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import { commonStyles as l } from "./styles/common.styles.js";
+//#region src/components/ds-loader-dots/ds-loader-dots.ts
+var u, d = (u = class extends i {
+	constructor(...e) {
+		super(...e), this.show = !1, this.mode = "light", this.size = "large";
+	}
+	get classes() {
+		return {
+			container: !0,
+			[this.size]: !0,
+			[this.mode]: !!this.mode
+		};
+	}
+	get styleTokens() {
+		return t`
                 <style>
                     :host {
                         color-scheme: ${this.mode};
                     }
                 </style>
         `;
-  }
-  render() {
-    return this.show ? v`
+	}
+	render() {
+		return this.show ? t`
                   ${this.styleTokens}
-                  <div class=${y(this.classes)}>
+                  <div
+                      class=${s(this.classes)}
+                      role=${c(this.dataAriaLabel ? "img" : void 0)}
+                      aria-label=${c(this.dataAriaLabel)}
+                      aria-hidden=${c(this.dataAriaLabel ? void 0 : "true")}
+                  >
                       <div class="dot first"></div>
                       <div class="dot middle"></div>
                       <div class="dot last"></div>
                   </div>
-              ` : f;
-  }
-};
-e.styles = [u];
-r([
-  p({ type: Boolean, converter: h })
-], e.prototype, "show", 2);
-r([
-  p({ type: String, reflect: !0 })
-], e.prototype, "mode", 2);
-r([
-  p({ type: String })
-], e.prototype, "size", 2);
-e = r([
-  d("ds-loader-dots")
-], e);
-export {
-  e as DsLoaderDots
-};
+              ` : e;
+	}
+}, u.styles = [l], u);
+r([n({
+	type: Boolean,
+	converter: o
+})], d.prototype, "show", void 0), r([n({
+	type: String,
+	reflect: !0
+})], d.prototype, "mode", void 0), r([n({ type: String })], d.prototype, "size", void 0), r([n({
+	type: String,
+	attribute: "data-aria-label"
+})], d.prototype, "dataAriaLabel", void 0), d = r([a("ds-loader-dots")], d);
+//#endregion

package/dist/esm/components/ds-loader-dots/styles/common.styles.js

@@ -1,19 +1,21 @@
-import { cssWithTokens as i } from "../../../utils/cssWithTokens.js";
-const t = i`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-loader-dots/styles/common.styles.ts
+var t = e`
     .container {
         display: inline-flex;
         justify-content: center;
         align-items: center;
     }
-    
+
     .dot.middle {
         animation-delay: 0.4s;
     }
-    
+
     .dot.last {
         animation-delay: 0.8s;
     }
-    
+
     .dot {
         border-radius: 50%;
         animation-name: loader;
@@ -24,12 +26,19 @@ const t = i`
     }
 
     @keyframes loader {
-        0% { opacity: 1 }
-        18% { opacity: 0.2 }
-        82% { opacity: 0.6 }
-        100% { opacity: 1 }
+        0% {
+            opacity: 1;
+        }
+        18% {
+            opacity: 0.2;
+        }
+        82% {
+            opacity: 0.6;
+        }
+        100% {
+            opacity: 1;
+        }
     }
 `;
-export {
-  t as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist/esm/components/ds-loader-logo/ds-loader-logo.js

@@ -1,37 +1,35 @@
-import { UiKitElement as h } from "../base/UiKitElement.js";
-import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as d } 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 a, nothing as m } 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 i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { commonStyles as f } from "./ds-loader-logo.styles.js";
-var u = Object.defineProperty, v = Object.getOwnPropertyDescriptor, t = (l, r, n, s) => {
-  for (var o = s > 1 ? void 0 : s ? v(r, n) : r, p = l.length - 1, c; p >= 0; p--)
-    (c = l[p]) && (o = (s ? c(r, n, o) : c(o)) || o);
-  return s && o && u(r, n, o), o;
-};
-let e = class extends h {
-  constructor() {
-    super(...arguments), this.show = !1, this.zIndex = 2e3, this.iconName = "logo";
-  }
-  get styleTokens() {
-    return a`
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
+import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { o as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import { commonStyles as l } from "./ds-loader-logo.styles.js";
+//#region src/components/ds-loader-logo/ds-loader-logo.ts
+var u, d = (u = class extends i {
+	constructor(...e) {
+		super(...e), this.show = !1, this.zIndex = 2e3, this.iconName = "logo";
+	}
+	get styleTokens() {
+		return t`
                 <style>
                     :host {
-                        --ds-icon-color: ${this.color || "var(--ds-loader-logo-icon-color)"};
+                        --ui-kit-icon-color: ${this.color || "var(--ui-kit-private-loader-logo-icon-color)"};
                     }
                 </style>
         `;
-  }
-  get iconTemplate() {
-    return this.iconName ? this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.iconName
-    }) : m;
-  }
-  render() {
-    return this.show ? a`
+	}
+	get iconTemplate() {
+		return this.iconName ? s`<ds-icon class="icon" icon-name=${c(this.iconName)}></ds-icon>` : e;
+	}
+	render() {
+		return this.show ? t`
                   <style>
                       .backdrop {
                           z-index: ${this.zIndex};
@@ -41,25 +39,17 @@ let e = class extends h {
                   <div class="backdrop">
                       <div class="container">${this.iconTemplate}</div>
                   </div>
-              ` : m;
-  }
-};
-e.styles = [f];
-t([
-  i({ type: Boolean, converter: d })
-], e.prototype, "show", 2);
-t([
-  i({ type: Number, attribute: "z-index" })
-], e.prototype, "zIndex", 2);
-t([
-  i({ type: String, attribute: "icon-name" })
-], e.prototype, "iconName", 2);
-t([
-  i({ type: String })
-], e.prototype, "color", 2);
-e = t([
-  y("ds-loader-logo")
-], e);
-export {
-  e as DsLoaderLogo
-};
+              ` : e;
+	}
+}, u.styles = [l], u);
+r([n({
+	type: Boolean,
+	converter: o
+})], d.prototype, "show", void 0), r([n({
+	type: Number,
+	attribute: "z-index"
+})], d.prototype, "zIndex", void 0), r([n({
+	type: String,
+	attribute: "icon-name"
+})], d.prototype, "iconName", void 0), r([n({ type: String })], d.prototype, "color", void 0), d = r([a("ds-loader-logo")], d);
+//#endregion

package/dist/esm/components/ds-loader-logo/ds-loader-logo.styles.js

@@ -1,8 +1,7 @@
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-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 i = t`
+import { i as e } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-loader-logo/ds-loader-logo.styles.ts
+var t = e`
     .backdrop {
         display: flex;
         position: fixed;
@@ -62,6 +61,5 @@ const i = t`
         z-index: 0;
     }
 `;
-export {
-  i as commonStyles
-};
+//#endregion
+export { t as commonStyles };