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

package/dist-react/esm/components/ds-icon-button/ds-icon-button.js

@@ -1,47 +1,54 @@
-import { UiKitElement as c } from "../base/UiKitElement.js";
-import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
-import { ViewportMixin as b } from "../../mixins/ViewportMixin.js";
-import { booleanConverter as u } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as y } from "../../utils/htmlWithTokens.js";
-import { objectConverter as f } 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 g, html 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 { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { choose as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-import { classMap as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { buttonStyles as $ } from "./styles/common.styles.js";
-var S = Object.defineProperty, T = Object.getOwnPropertyDescriptor, e = (i, o, l, a) => {
-  for (var s = a > 1 ? void 0 : a ? T(o, l) : o, p = i.length - 1, m; p >= 0; p--)
-    (m = i[p]) && (s = (a ? m(o, l, s) : m(s)) || s);
-  return a && s && S(o, l, s), s;
-};
-let t = class extends b(c) {
-  constructor() {
-    super(...arguments), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.htmlTagName = "button";
-  }
-  get iconTemplate() {
-    return this.iconName ? this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.iconName
-    }) : g;
-  }
-  handleClick(i) {
-    this.href || i.preventDefault();
-  }
-  get classes() {
-    const i = typeof this.size == "string" ? this.size : this.size[this.viewport];
-    return {
-      button: !0,
-      custom: this.htmlTagName === "custom",
-      disabled: this.disabled,
-      [i]: !!i,
-      [this.mode]: !!this.mode,
-      [this.variant]: !!this.variant
-    };
-  }
-  get variantColorTokens() {
-    return y`
+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 "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
+import r from "../../_virtual/_@oxc-project_runtime@0.148.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 { classMap as c } 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 l } 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 { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
+import { objectConverter as d } from "../../utils/objectConverter.js";
+import { choose as f } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/choose.js";
+import { buttonStyles as p } from "./styles/common.styles.js";
+//#region src/components/ds-icon-button/ds-icon-button.ts
+var m = class extends u(i) {
+	constructor(...e) {
+		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.htmlTagName = "button";
+	}
+	get iconTemplate() {
+		return this.iconName ? s`<ds-icon class="icon" icon-name=${l(this.iconName)}></ds-icon>` : t;
+	}
+	handleClick(e) {
+		this.href || e.preventDefault();
+	}
+	handleCustomClick(e) {
+		var t;
+		let n = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot"), r = n == null ? void 0 : n.assignedElements()[0];
+		r && !r.contains(e.composedPath()[0]) && (e.stopPropagation(), r.click());
+	}
+	get classes() {
+		let e = typeof this.size == "string" ? this.size : this.size[this.viewport], t = !!(this.customBackground || this.customColor);
+		return {
+			button: !0,
+			[`tag-${this.htmlTagName}`]: !0,
+			[`variant-${this.variant}`]: !0,
+			custom: t,
+			disabled: this.disabled,
+			[e]: !!e,
+			[this.mode]: !!this.mode
+		};
+	}
+	updated(e) {
+		super.updated(e), this.customBackground ? this.style.setProperty("--ui-kit-private-button-custom-bg", this.customBackground) : this.style.removeProperty("--ui-kit-private-button-custom-bg"), this.customColor ? this.style.setProperty("--ui-kit-private-button-custom-color", this.customColor) : this.style.removeProperty("--ui-kit-private-button-custom-color");
+	}
+	get variantColorTokens() {
+		return e`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -49,34 +56,25 @@ let t = class extends b(c) {
                 }
             </style>
         `;
-  }
-  render() {
-    return n`
-            <style>
-                :host {
-                    pointer-events: ${this.disabled ? "none" : "visible"};
-                }
-            </style>
+	}
+	render() {
+		return e`
             ${this.variantColorTokens}
-            ${v(this.htmlTagName || "button", [
-      [
-        "button",
-        () => n`
+            ${f(this.htmlTagName || "button", [
+			["button", () => e`
                         <button
                             ?disabled=${this.disabled}
-                            class=${h(this.classes)}
+                            class=${c(this.classes)}
                             aria-label=${this.dataAriaLabel}
+                            aria-pressed=${l(this.dataAriaPressed)}
                         >
                             ${this.iconTemplate}
                         </button>
-                    `
-      ],
-      [
-        "a",
-        () => n`
+                    `],
+			["a", () => e`
                         <a
                             ?disabled=${this.disabled}
-                            class=${h(this.classes)}
+                            class=${c(this.classes)}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
@@ -85,54 +83,55 @@ let t = class extends b(c) {
                         >
                             ${this.iconTemplate}
                         </a>
-                    `
-      ],
-      [
-        "custom",
-        () => n`
-                        <div class=${h(this.classes)}>
+                    `],
+			["custom", () => e`
+                        <div class=${c(this.classes)} @click=${this.handleCustomClick}>
                             <slot></slot>
                         </div>
-                    `
-      ]
-    ])}
+                    `]
+		])}
         `;
-  }
-};
-t.styles = [$];
-e([
-  r({ type: String })
-], t.prototype, "variant", 2);
-e([
-  r({ type: String, reflect: !0 })
-], t.prototype, "mode", 2);
-e([
-  r({ type: String, converter: f })
-], t.prototype, "size", 2);
-e([
-  r({ type: Boolean, converter: u })
-], t.prototype, "disabled", 2);
-e([
-  r({ type: String, attribute: "icon-name" })
-], t.prototype, "iconName", 2);
-e([
-  r({ type: String, attribute: "html-tag-name" })
-], t.prototype, "htmlTagName", 2);
-e([
-  r({ type: String, attribute: "data-aria-label" })
-], t.prototype, "dataAriaLabel", 2);
-e([
-  r({ type: String, reflect: !0 })
-], t.prototype, "href", 2);
-e([
-  r({ type: String, reflect: !0 })
-], t.prototype, "rel", 2);
-e([
-  r({ type: String, reflect: !0 })
-], t.prototype, "target", 2);
-t = e([
-  d("ds-icon-button")
-], t);
-export {
-  t as DsIconButton
-};
+	}
+}, h = (m.styles = [p], m);
+r([n({
+	type: String,
+	reflect: !0
+})], h.prototype, "variant", void 0), r([n({
+	type: String,
+	attribute: "custom-background"
+})], h.prototype, "customBackground", void 0), r([n({
+	type: String,
+	attribute: "custom-color"
+})], h.prototype, "customColor", void 0), r([n({
+	type: String,
+	reflect: !0
+})], h.prototype, "mode", void 0), r([n({
+	type: String,
+	converter: d
+})], h.prototype, "size", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], h.prototype, "disabled", void 0), r([n({
+	type: String,
+	attribute: "icon-name"
+})], h.prototype, "iconName", void 0), r([n({
+	type: String,
+	attribute: "html-tag-name"
+})], h.prototype, "htmlTagName", void 0), r([n({
+	type: String,
+	attribute: "data-aria-label"
+})], h.prototype, "dataAriaLabel", void 0), r([n({
+	type: String,
+	attribute: "data-aria-pressed"
+})], h.prototype, "dataAriaPressed", void 0), r([n({
+	type: String,
+	reflect: !0
+})], h.prototype, "href", void 0), r([n({
+	type: String,
+	reflect: !0
+})], h.prototype, "rel", void 0), r([n({
+	type: String,
+	reflect: !0
+})], h.prototype, "target", void 0), h = r([a("ds-icon-button")], h);
+//#endregion
+export { h as DsIconButton };

package/dist-react/esm/components/ds-icon-button/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 t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const s = t`
+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-icon-button/styles/common.styles.ts
+var t = e`
     :host {
         display: inline-flex;
     }
@@ -19,6 +18,5 @@ const s = t`
         padding: 0;
     }
 `;
-export {
-  s as buttonStyles
-};
+//#endregion
+export { t as buttonStyles };

package/dist-react/esm/components/ds-icon-button-group/ds-icon-button-group.js

@@ -0,0 +1,19 @@
+import { html as e } 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 t from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import { UiKitElement as n } from "../base/UiKitElement.js";
+import { customUiKitElement as r } from "../../decorators/customUiKitElement.js";
+import { commonStyles as i } from "./styles/common.styles.js";
+//#region src/components/ds-icon-button-group/ds-icon-button-group.ts
+var a = class extends n {
+	render() {
+		return e`
+            <div part="container" class="container">
+                <slot></slot>
+            </div>
+        `;
+	}
+}, o = (a.styles = [i], a);
+o = t([r("ds-icon-button-group")], o);
+//#endregion
+export { o as DsIconButtonGroup };

package/dist-react/esm/components/ds-icon-button-group/styles/common.styles.js

@@ -0,0 +1,28 @@
+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-icon-button-group/styles/common.styles.ts
+var t = e`
+    :host {
+        display: inline-flex;
+    }
+
+    .container {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-1, 0px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-icon-button-border-color-secondary-default, #5a5c67);
+        border-radius: var(--ds-border-radius-xs, 6px);
+        overflow: hidden;
+    }
+
+    .container {
+        background-image: linear-gradient(
+            179.78deg,
+            var(--ds-color-interaction-subtle-alternative-bg-default-start) 0.73%,
+            var(--ds-color-interaction-subtle-alternative-bg-default-mid) 84.63%,
+            var(--ds-color-interaction-subtle-alternative-bg-default-end) 99.44%
+        );
+    }
+`;
+//#endregion
+export { t as commonStyles };

package/dist-react/esm/components/ds-inline-alert/ds-inline-alert.js

@@ -1,101 +1,92 @@
-import { UiKitElement as m } from "../base/UiKitElement.js";
-import { customUiKitElement as h } 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 d, html 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 n } 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 { when as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { inlineAlertStyles as v } from "./styles/common.styles.js";
-var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, i, l, o) => {
-  for (var e = o > 1 ? void 0 : o ? g(i, l) : i, a = t.length - 1, c; a >= 0; a--)
-    (c = t[a]) && (e = (o ? c(i, l, e) : c(e)) || e);
-  return o && e && y(i, l, e), e;
-};
-let s = class extends m {
-  constructor() {
-    super(...arguments), this.status = "default", this.title = "", this.text = "", this.show = !0;
-  }
-  getIconName() {
-    switch (this.status) {
-      case "success":
-        return "check-mark-circle";
-      case "error":
-        return "cross-circle";
-      case "warning":
-        return "exclamation-mark-circle";
-      case "info":
-        return "info-circle";
-      default:
-        return "chat-bubble";
-    }
-  }
-  handleClickCloseButton() {
-    const t = new CustomEvent("inline-alert:close", {
-      bubbles: !0,
-      composed: !0
-    });
-    this.dispatchEvent(t), this.show = !1;
-  }
-  get inlineAlertClasses() {
-    return {
-      container: !0,
-      [this.status || "default"]: !0,
-      show: this.show
-    };
-  }
-  get iconTemplate() {
-    return this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.getIconName(),
-      size: 24
-    });
-  }
-  get closeButtonTemplate() {
-    return this.componentFactory.createIconButton({
-      "data-aria-label": "close-button",
-      "@click": this.handleClickCloseButton,
-      "icon-name": "cross",
-      variant: "naked",
-      size: "medium"
-    });
-  }
-  render() {
-    return this.show ? p`
-            <div class=${f(this.inlineAlertClasses)} part="container">
+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 { 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 "../ds-icon-button/ds-icon-button.js";
+import { when as d } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.js";
+import { inlineAlertStyles as f } from "./styles/common.styles.js";
+//#region src/components/ds-inline-alert/ds-inline-alert.ts
+var p = class extends a {
+	constructor(...e) {
+		super(...e), this.status = "default", this.title = "", this.text = "", this.showClose = !0, this._show = void 0, this._showState = !0;
+	}
+	get show() {
+		return this._show ?? this._showState;
+	}
+	set show(e) {
+		this._show = e;
+	}
+	getIconName() {
+		switch (this.status) {
+			case "success": return "check-mark-circle";
+			case "error": return "cross-circle";
+			case "warning": return "exclamation-mark-circle";
+			case "info": return "info-circle";
+			default: return "chat-bubble";
+		}
+	}
+	handleClickCloseButton() {
+		let e = new CustomEvent("inline-alert:close", {
+			bubbles: !0,
+			composed: !0
+		});
+		this.dispatchEvent(e), this._showState = !1;
+	}
+	get inlineAlertClasses() {
+		return {
+			container: !0,
+			[this.status || "default"]: !0,
+			show: this.show
+		};
+	}
+	get iconTemplate() {
+		return c`<ds-icon class="icon" icon-name=${u(this.getIconName())} size="24"></ds-icon>`;
+	}
+	get closeButtonTemplate() {
+		return this.showClose ? c`<ds-icon-button
+            data-aria-label="close-button"
+            @click=${this.handleClickCloseButton}
+            icon-name="cross"
+            variant="naked"
+            size="medium"
+        ></ds-icon-button>` : t;
+	}
+	render() {
+		return this.show ? e`
+            <div class=${l(this.inlineAlertClasses)} part="container">
                 ${this.iconTemplate}
                 <div class="content">
                     <div class="header">
-                        ${u(this.title, () => p`<div class="title">${this.title}</div>`)}
-                        ${u(this.text, () => p`<div class="message">${this.text}</div>`)}
+                        ${d(this.title, () => e`<div class="title">${this.title}</div>`)}
+                        ${d(this.text, () => e`<div class="message">${this.text}</div>`)}
                     </div>
                     <slot></slot>
                 </div>
                 ${this.closeButtonTemplate}
             </div>
-        ` : d;
-  }
-};
-s.styles = [v];
-r([
-  n({ type: String })
-], s.prototype, "status", 2);
-r([
-  n({ type: String })
-], s.prototype, "title", 2);
-r([
-  n({ type: String })
-], s.prototype, "text", 2);
-r([
-  n({
-    type: Boolean,
-    converter: (t) => t !== null && t !== "false",
-    reflect: !0
-  })
-], s.prototype, "show", 2);
-s = r([
-  h("ds-inline-alert")
-], s);
-export {
-  s as DsInlineAlert
-};
+        ` : t;
+	}
+}, m = (p.styles = [f], p);
+i([n({ type: String })], m.prototype, "status", void 0), i([n({ type: String })], m.prototype, "title", void 0), i([n({ type: String })], m.prototype, "text", void 0), i([n({
+	attribute: "show-close",
+	type: Boolean,
+	converter: s,
+	reflect: !0
+})], m.prototype, "showClose", void 0), i([n({
+	type: Boolean,
+	attribute: "show",
+	converter: s
+})], m.prototype, "_show", void 0), i([r()], m.prototype, "_showState", void 0), m = i([o("ds-inline-alert")], m);
+//#endregion
+export { m as DsInlineAlert };

package/dist-react/esm/components/ds-inline-alert/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 a } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const s = a`
+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-inline-alert/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
@@ -10,9 +9,9 @@ const s = a`
     .container {
         display: none;
         align-items: flex-start;
-        gap: var(--ds-spacing-m-1, 12px);
-        padding: var(--ds-spacing-m-3, 20px) var(--ds-spacing-m-2, 16px);
-        border-radius: var(--ds-button-border-radius-base, 6px);
+        gap: var(--ds-spacing-s-5, 8px);
+        padding: var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-s, 8px);
         background: var(--ds-color-surface-container-default, rgba(250, 250, 250, 0.05));
         box-shadow: 0 4px 4px 0 var(--ds-opacity-black-20, rgba(9, 9, 11, 0.2));
         width: 100%;
@@ -39,6 +38,5 @@ const s = a`
         gap: 4px;
     }
 `;
-export {
-  s as inlineAlertStyles
-};
+//#endregion
+export { t as inlineAlertStyles };