@cupra/ui-kit 2.0.0-canary.22 → 2.0.0-canary.221

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

@@ -1,86 +1,77 @@
-import { UiKitElement as u } from "../base/UiKitElement.js";
-import { commonStyles as f } from "./styles/common.styles.js";
-import { themeConfig as m } from "./theme-config.js";
-import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as d } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as g } 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 h, 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 r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { classMap as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-var _ = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, t, a, n) => {
-  for (var s = n > 1 ? void 0 : n ? $(t, a) : t, l = e.length - 1, p; l >= 0; l--)
-    (p = e[l]) && (s = (n ? p(t, a, s) : p(s)) || s);
-  return n && s && _(t, a, s), s;
-};
-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;
-  }
-  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 h;
-    const e = (t = m[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 h;
-    const e = (t = m[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`
+import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
+import i from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import { UiKitElement as a } from "../base/UiKitElement.js";
+import { commonStyles as o } from "./styles/common.styles.js";
+import { themeConfig as s } from "./theme-config.js";
+import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
+import { booleanConverter as l } from "../../utils/booleanConverter.js";
+import { uiKitHtml as u } from "../../utils/uiKitHtml.js";
+import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
+import { ifDefined as f } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.js";
+//#region src/components/ds-accordion/ds-accordion.ts
+var p = class extends a {
+	constructor(...e) {
+		super(...e), this.maxHeight = 300, this.open = !1, this.mode = "light", this.size = "large", this.disabled = !1, this.showDivider = !0, 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 e;
+		if (!this.theme) return t;
+		let n = (e = s[this.theme]) == null ? void 0 : e["icon-names"], r = this.expandedIconName || (n == null ? void 0 : n.open) || "minus";
+		return u`<ds-icon class="icon open-icon" role="presentation" icon-name=${f(r)}></ds-icon>`;
+	}
+	get closeIconTemplate() {
+		var e;
+		if (!this.theme) return t;
+		let n = (e = s[this.theme]) == null ? void 0 : e["icon-names"], r = this.collapseIconName || (n == null ? void 0 : n.close) || "plus";
+		return u`<ds-icon class="icon close-icon" role="presentation" icon-name=${f(r)}></ds-icon>`;
+	}
+	get styleTokens() {
+		return e`
                 <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 v`
+	}
+	handleKeyDown(e) {
+		this.disabled && (e.preventDefault(), e.stopPropagation());
+	}
+	handleToggle(e) {
+		this._open = e.newState === "open";
+	}
+	render() {
+		return e`
             ${this.styleTokens}
 
             <details
-                class=${c(this.containerClasses)}
+                class=${d(this.containerClasses)}
                 aria-disabled=${!!this.disabled}
                 ?open=${this.open}
                 @keydown=${this.handleKeyDown}
@@ -93,32 +84,33 @@ let o = class extends u {
                 </summary>
                 <slot name="content"></slot>
             </details>
-            <div class=${c(this.dividerClasses)}></div>
+            ${this.showDivider ? e`<div class=${d(this.dividerClasses)}></div>` : t}
         `;
-  }
-};
-o.styles = [f];
-i([
-  r({ type: Number, attribute: "max-height" })
-], o.prototype, "maxHeight", 2);
-i([
-  r({ type: Boolean, converter: d, reflect: !0 })
-], o.prototype, "open", 2);
-i([
-  r({ type: String, reflect: !0 })
-], o.prototype, "mode", 2);
-i([
-  r({ type: String })
-], o.prototype, "size", 2);
-i([
-  r({ type: Boolean, converter: d })
-], o.prototype, "disabled", 2);
-i([
-  b()
-], o.prototype, "_open", 2);
-o = i([
-  y("ds-accordion")
-], o);
-export {
-  o as DsAccordion
-};
+	}
+}, m = (p.styles = [o], p);
+i([n({
+	type: Number,
+	attribute: "max-height"
+})], m.prototype, "maxHeight", void 0), i([n({
+	type: Boolean,
+	converter: l,
+	reflect: !0
+})], m.prototype, "open", void 0), i([n({
+	type: String,
+	reflect: !0
+})], m.prototype, "mode", void 0), i([n({ type: String })], m.prototype, "size", void 0), i([n({
+	type: Boolean,
+	converter: l
+})], m.prototype, "disabled", void 0), i([n({
+	type: Boolean,
+	attribute: "show-divider",
+	converter: l
+})], m.prototype, "showDivider", void 0), i([n({
+	type: String,
+	attribute: "collapse-icon-name"
+})], m.prototype, "collapseIconName", void 0), i([n({
+	type: String,
+	attribute: "expanded-icon-name"
+})], m.prototype, "expandedIconName", void 0), i([r()], m.prototype, "_open", void 0), m = i([c("ds-accordion")], m);
+//#endregion
+export { m as DsAccordion };

package/dist-react/esm/components/ds-accordion/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 e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const s = e`
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-accordion/styles/common.styles.ts
+var t = e`
     :host {
         display: block;
         width: 100%;
@@ -59,6 +58,5 @@ const s = e`
         }
     }
 `;
-export {
-  s as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist-react/esm/components/ds-accordion/theme-config.js

@@ -1,26 +1,26 @@
-const n = {
-  cupra: {
-    "icon-names": {
-      open: "minus",
-      close: "plus"
-    },
-    "icon-button-variant": "secondary"
-  },
-  "cupra-diagonal": {
-    "icon-names": {
-      open: "arrow-up",
-      close: "arrow-down"
-    },
-    "icon-button-variant": "primary"
-  },
-  seat: {
-    "icon-names": {
-      open: "minus",
-      close: "plus"
-    },
-    "icon-button-variant": "secondary"
-  }
-};
-export {
-  n as themeConfig
+//#region src/components/ds-accordion/theme-config.ts
+var e = {
+	cupra: {
+		"icon-names": {
+			open: "minus",
+			close: "plus"
+		},
+		"icon-button-variant": "secondary"
+	},
+	"cupra-diagonal": {
+		"icon-names": {
+			open: "arrow-up",
+			close: "arrow-down"
+		},
+		"icon-button-variant": "primary"
+	},
+	seat: {
+		"icon-names": {
+			open: "arrow-up",
+			close: "arrow-down"
+		},
+		"icon-button-variant": "primary"
+	}
 };
+//#endregion
+export { e as themeConfig };

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

@@ -1,102 +1,90 @@
-import { UiKitElement as c } from "../base/UiKitElement.js";
-import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as g } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as f } from "../../utils/htmlWithTokens.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 p } 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 { queryAssignedElements as y } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { classMap as $ } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { ifDefined as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
-import { commonStyles as b } from "./styles/common.styles.js";
-var v = Object.defineProperty, I = Object.getOwnPropertyDescriptor, r = (e, s, o, a) => {
-  for (var t = a > 1 ? void 0 : a ? I(s, o) : s, n = e.length - 1, m; n >= 0; n--)
-    (m = e[n]) && (t = (a ? m(s, o, t) : m(t)) || t);
-  return a && t && v(s, o, t), t;
-};
-let i = class extends c {
-  constructor() {
-    super(...arguments), this.size = "medium", this.disabled = !1;
-  }
-  get iconTemplate() {
-    return this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": "user"
-    });
-  }
-  get initialsTemplate() {
-    const e = this.getInitialsFromName(this.name);
-    return d`<span class="initials" aria-hidden="true">${e}</span>`;
-  }
-  getInitialsFromName(e) {
-    return e ? e.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((s) => s[0]).join("").toUpperCase() : "";
-  }
-  get classes() {
-    return {
-      container: !0,
-      disabled: this.disabled,
-      [this.size]: !0,
-      [`mode-${this.mode}`]: !0
-    };
-  }
-  get hasImage() {
-    return Array.isArray(this.assignedImages) && this.assignedImages.length > 0;
-  }
-  get mode() {
-    var e;
-    return this.hasImage ? "media" : (e = this.name) != null && e.trim() ? "text" : "icon";
-  }
-  handleSlotChange() {
-    this.requestUpdate();
-  }
-  get styleTokens() {
-    return f`
+import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { queryAssignedElements as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
+import i from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import { UiKitElement as a } from "../base/UiKitElement.js";
+import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
+import { booleanConverter as s } from "../../utils/booleanConverter.js";
+import { uiKitHtml as c } from "../../utils/uiKitHtml.js";
+import { classMap as l } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
+import { ifDefined as u } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.js";
+import { commonStyles as d } from "./styles/common.styles.js";
+//#region src/components/ds-avatar/ds-avatar.ts
+var f = class extends a {
+	constructor(...e) {
+		super(...e), this.size = "medium", this.disabled = !1;
+	}
+	get iconTemplate() {
+		return c`<ds-icon class="icon" icon-name="user"></ds-icon>`;
+	}
+	get initialsTemplate() {
+		let t = this.getInitialsFromName(this.name);
+		return e`<span class="initials" aria-hidden="true">${t}</span>`;
+	}
+	getInitialsFromName(e) {
+		return e ? e.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((e) => e[0]).join("").toUpperCase() : "";
+	}
+	get classes() {
+		return {
+			container: !0,
+			disabled: this.disabled,
+			[this.size]: !0,
+			[`mode-${this.mode}`]: !0
+		};
+	}
+	get hasImage() {
+		return Array.isArray(this.assignedImages) && this.assignedImages.length > 0;
+	}
+	get mode() {
+		var e;
+		return this.hasImage ? "media" : (e = this.name) != null && e.trim() ? "text" : "icon";
+	}
+	handleSlotChange() {
+		this.requestUpdate();
+	}
+	get styleTokens() {
+		return e`
             <style>
                 :host{
                     pointer-events: ${this.disabled ? "none" : "auto"};
                 }
             </style>
         `;
-  }
-  handleKeyDown(e) {
-    this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.click());
-  }
-  render() {
-    return d`
+	}
+	handleKeyDown(e) {
+		this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.click());
+	}
+	render() {
+		return e`
             ${this.styleTokens}
             <div
-                class=${$(this.classes)}
-                title=${h(this.name)}
+                class=${l(this.classes)}
+                title=${u(this.name)}
                 aria-label=${`Open ${this.name ? this.name + "'s " : ""}profile menu`}
-                aria-disabled=${h(this.disabled ? "true" : void 0)}
+                aria-disabled=${u(this.disabled ? "true" : void 0)}
                 role="button"
                 tabindex=${this.disabled ? -1 : 0}
                 @keydown=${this.handleKeyDown}
             >
-                ${this.mode === "icon" ? this.iconTemplate : p}
-                ${this.mode === "text" ? this.initialsTemplate : p}
+                ${this.mode === "icon" ? this.iconTemplate : t}
+                ${this.mode === "text" ? this.initialsTemplate : t}
                 <div class="media" aria-hidden=${String(this.mode !== "media")}><slot name="media" @slotchange=${this.handleSlotChange}></slot></div>
             </div>
         `;
-  }
-};
-i.styles = [b];
-r([
-  l({ type: String })
-], i.prototype, "size", 2);
-r([
-  l({ type: String })
-], i.prototype, "name", 2);
-r([
-  l({ type: Boolean, converter: g, reflect: !0 })
-], i.prototype, "disabled", 2);
-r([
-  y({ slot: "media", selector: "img" })
-], i.prototype, "assignedImages", 2);
-i = r([
-  u("ds-avatar")
-], i);
-export {
-  i as DsAvatar
-};
+	}
+}, p = (f.styles = [d], f);
+i([n({ type: String })], p.prototype, "size", void 0), i([n({ type: String })], p.prototype, "name", void 0), i([n({
+	type: Boolean,
+	converter: s,
+	reflect: !0
+})], p.prototype, "disabled", void 0), i([r({
+	slot: "media",
+	selector: "img"
+})], p.prototype, "assignedImages", void 0), p = i([o("ds-avatar")], p);
+//#endregion
+export { p as DsAvatar };

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

@@ -1,12 +1,131 @@
-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 o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const p = o`
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-avatar/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
+
+    .container {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--ds-border-radius-full);
+        background: var(--ds-icon-button-bg-color-rounded-default);
+        user-select: none;
+        cursor: pointer;
+        overflow: hidden;
+        transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
+        flex: 0 0 auto;
+    }
+
+    .container:not(.disabled):hover {
+        background: var(--ds-icon-button-bg-color-rounded-hover);
+    }
+
+    .container:not(.disabled):active {
+        background: var(--ds-icon-button-bg-color-rounded-pressed);
+    }
+
+    .container:focus-visible {
+        outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        outline-offset: 2px;
+        background: var(--ds-icon-button-bg-color-rounded-focus);
+    }
+
+    .container.disabled {
+        background: var(--ds-icon-button-bg-color-rounded-disabled);
+    }
+
+    .container.large {
+        width: var(--ds-sizing-48);
+        height: var(--ds-sizing-48);
+    }
+
+    .container.medium {
+        width: var(--ds-sizing-40);
+        height: var(--ds-sizing-40);
+    }
+
+    .container.small {
+        width: var(--ds-sizing-36);
+        height: var(--ds-sizing-36);
+    }
+
+    .container .icon {
+        --ui-kit-icon-color: var(--ds-icon-button-icon-color-quaternary-default);
+    }
+
+    .container.large .icon {
+        --ui-kit-icon-width: var(--ds-sizing-24);
+        --ui-kit-icon-height: var(--ds-sizing-24);
+    }
+    .container.medium .icon {
+        --ui-kit-icon-width: var(--ds-sizing-20);
+        --ui-kit-icon-height: var(--ds-sizing-20);
+    }
+    .container.small .icon {
+        --ui-kit-icon-width: var(--ds-sizing-16);
+        --ui-kit-icon-height: var(--ds-sizing-16);
+    }
+
+    .container.disabled .icon {
+        --ui-kit-icon-color: var(--ds-icon-button-icon-color-quaternary-disabled);
+    }
+
+    .container .initials {
+        overflow: hidden;
+        color: var(--ds-color-text-default-static);
+        text-align: center;
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: var(--ds-typography-weight-body-secondary);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+    }
+
+    .container.large .initials {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+    }
+    .container.medium .initials {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+    .container.small .initials {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .container.disabled .initials {
+        color: var(--ds-color-text-disabled);
+    }
+
+    ::slotted(img[slot='media']) {
+        width: 100%;
+        object-fit: cover;
+        display: block;
+    }
+
+    .mode-media.container {
+        filter: brightness(1);
+    }
+
+    .mode-media.container:not(.disabled):hover {
+        filter: brightness(0.6);
+    }
+
+    .mode-media.container:not(.disabled):active {
+        filter: brightness(1.3) saturate(0.7);
+    }
+
+    .mode-media.container:focus-visible {
+        filter: brightness(0.6);
+    }
+
+    .mode-media.container.disabled {
+        filter: grayscale(1);
+    }
 `;
-export {
-  p as commonStyles
-};
+//#endregion
+export { t as commonStyles };