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

package/dist-react/esm/components/ds-dialog-fullscreen/ds-dialog-fullscreen.js

@@ -1,70 +1,76 @@
-import { UiKitElement as p } from "../base/UiKitElement.js";
-import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as a } from "../../utils/booleanConverter.js";
+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 { r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { e as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as o } from "../base/UiKitElement.js";
+import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as c } from "../../utils/booleanConverter.js";
+import { e as l } 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 { debounce as u } from "../../utils/debounce.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 b } 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 h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as y } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { classMap as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as k } from "./styles/common.styles.js";
-var w = Object.defineProperty, O = Object.getOwnPropertyDescriptor, n = (e, t, l, r) => {
-  for (var s = r > 1 ? void 0 : r ? O(t, l) : t, i = e.length - 1, c; i >= 0; i--)
-    (c = e[i]) && (s = (r ? c(t, l, s) : c(s)) || s);
-  return r && s && w(t, l, s), s;
-};
-let o = class extends p {
-  constructor() {
-    super(...arguments), this.lockScroll = !0, this.open = !1, this.hasBeenOpened = !1, this.hasScroll = !1, this.debouncedCheckScroll = u({ func: () => this.checkScroll() }), this.handleKeyDown = (e) => {
-      this.open && e.key === "Escape" && this.handleClose();
-    };
-  }
-  async updated(e) {
-    super.updated(e), !this.hasBeenOpened && e.has("open") && this.open && (this.hasBeenOpened = !0), e.has("open") && this.handleResizeObserver(), e.has("open") && this.open && (await this.updateComplete, this.requestUpdate());
-  }
-  async handleResizeObserver() {
-    var e;
-    this.lockScroll && (document.getElementById("storybook-root") || (document.body.style.overflow = this.open ? "hidden" : "")), (e = this.resizeObserver) == null || e.disconnect(), this.content && (this.resizeObserver.observe(this.content), await new Promise(requestAnimationFrame), this.checkScroll());
-  }
-  get containerClasses() {
-    return {
-      "container-fullscreen": !0,
-      close: !this.open,
-      "with-scroll": this.open && this.hasScroll
-    };
-  }
-  handleClose() {
-    this.open = !1, this.dispatchEvent(
-      new Event("ds-dialog-fullscreen:close", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  connectedCallback() {
-    super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown), this.resizeObserver = new ResizeObserver(this.debouncedCheckScroll), this.handleResizeObserver();
-  }
-  disconnectedCallback() {
-    var e;
-    super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown), this.lockScroll && (document.getElementById("storybook-root") || (document.body.style.overflow = "")), (e = this.resizeObserver) == null || e.disconnect();
-  }
-  checkScroll() {
-    var e, t;
-    this.hasScroll = ((e = this.content) == null ? void 0 : e.scrollHeight) > ((t = this.content) == null ? void 0 : t.clientHeight);
-  }
-  render() {
-    return !this.hasBeenOpened && !this.open ? f : b`
+import { commonStyles as d } from "./styles/common.styles.js";
+//#region src/components/ds-dialog-fullscreen/ds-dialog-fullscreen.ts
+var f, p = (f = class extends o {
+	constructor(...e) {
+		super(...e), this.lockClose = !1, this.lockScroll = !0, this._open = void 0, this._openState = !1, this.hasScroll = !1, this.hasBeenOpened = !1, this.debouncedCheckScroll = u({ func: () => this.checkScroll() }), this.handleKeyDown = (e) => {
+			this.open && e.key === "Escape" && this.handleClose();
+		};
+	}
+	get open() {
+		return this._open ?? this._openState;
+	}
+	set open(e) {
+		this._open = e;
+	}
+	willUpdate(e) {
+		super.willUpdate(e), !this.hasBeenOpened && (e.has("_open") || e.has("_openState")) && this.open && (this.hasBeenOpened = !0);
+	}
+	updated(e) {
+		super.updated(e), (e.has("_open") || e.has("_openState")) && this.handleResizeObserver();
+	}
+	async handleResizeObserver() {
+		var e;
+		this.lockScroll && (document.getElementById("storybook-root") || (document.body.style.overflow = this.open ? "hidden" : "")), (e = this.resizeObserver) == null || e.disconnect(), this.content && (this.resizeObserver.observe(this.content), await new Promise(requestAnimationFrame), this.checkScroll());
+	}
+	get containerClasses() {
+		return {
+			"container-fullscreen": !0,
+			close: !this.open,
+			"with-scroll": this.open && this.hasScroll
+		};
+	}
+	handleClose() {
+		this.lockClose || (this._openState = !1, this._open = void 0, this.dispatchEvent(new Event("ds-dialog-fullscreen:close", {
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown), this.resizeObserver = new ResizeObserver(this.debouncedCheckScroll), this.handleResizeObserver();
+	}
+	disconnectedCallback() {
+		var e;
+		super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown), this.lockScroll && (document.getElementById("storybook-root") || (document.body.style.overflow = "")), (e = this.resizeObserver) == null || e.disconnect();
+	}
+	checkScroll() {
+		var e, t;
+		let n = ((e = this.content) == null ? void 0 : e.scrollHeight) > ((t = this.content) == null ? void 0 : t.clientHeight);
+		n !== this.hasScroll && (this.hasScroll = n);
+	}
+	render() {
+		return !this.hasBeenOpened && !this.open ? e : t`
             <style>
                 :host {
                     display: ${this.open ? "flex" : "none"};
                 }
             </style>
 
-            <div class=${v(this.containerClasses)}>
+            <div class=${l(this.containerClasses)}>
                 <dialog ?open=${this.open} data-testid="ds-dialog-fullscreen-container" class="dialog-fullscreen">
-                    <slot name="close-button" @click=${this.handleClose}></slot>
+                    ${this.lockClose ? e : t`<slot name="close-button" @click=${this.handleClose}></slot>`}
                     <div class="content-container-fullscreen">
                         <div tabindex="0" class="content-fullscreen ds-scroll">
                             <slot @slotchange=${this.handleResizeObserver}></slot>
@@ -72,27 +78,19 @@ let o = class extends p {
                 </dialog>
             </div>
         `;
-  }
-};
-o.styles = [k];
-n([
-  h({ type: Boolean, converter: a, attribute: "lock-scroll" })
-], o.prototype, "lockScroll", 2);
-n([
-  h({ type: Boolean, converter: a })
-], o.prototype, "open", 2);
-n([
-  d()
-], o.prototype, "hasBeenOpened", 2);
-n([
-  d()
-], o.prototype, "hasScroll", 2);
-n([
-  y(".content")
-], o.prototype, "content", 2);
-o = n([
-  m("ds-dialog-fullscreen")
-], o);
-export {
-  o as DsDialogFullscreen
-};
+	}
+}, f.styles = [d], f);
+a([n({
+	type: Boolean,
+	converter: c,
+	attribute: "lock-close"
+})], p.prototype, "lockClose", void 0), a([n({
+	type: Boolean,
+	converter: c,
+	attribute: "lock-scroll"
+})], p.prototype, "lockScroll", void 0), a([n({
+	type: Boolean,
+	attribute: "open",
+	converter: c
+})], p.prototype, "_open", void 0), a([r()], p.prototype, "_openState", void 0), a([r()], p.prototype, "hasScroll", void 0), a([i(".content")], p.prototype, "content", void 0), p = a([s("ds-dialog-fullscreen")], p);
+//#endregion

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

@@ -1,9 +1,8 @@
-import { cssQueries as l } from "../../../utils/cssQueries.js";
-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 c = 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";
+import { cssQueries as t } from "../../../utils/cssQueries.js";
+//#region src/components/ds-dialog-fullscreen/styles/common.styles.ts
+var n = e`
     :host {
         transition: display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
     }
@@ -24,7 +23,6 @@ const c = r`
         justify-content: center;
         align-items: center;
         z-index: var(--ds-z-index-modal);
-        background-color: var(--dg-color-bg-modal);
         transition:
             opacity 0.3s cubic-bezier(0, 0, 0.2, 1),
             display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
@@ -57,9 +55,7 @@ const c = r`
 
     .ds-scroll::-webkit-scrollbar-thumb,
     .ds-scroll-global *::-webkit-scrollbar-thumb {
-        border-radius: var(--dg-border-radius-full);
         background-clip: padding-box;
-        background-color: var(--dg-global-opacity-white-70);
     }
 
     .ds-scroll::-webkit-scrollbar-track,
@@ -67,7 +63,7 @@ const c = r`
         background-color: transparent;
     }
 
-    ${l.xs} {
+    ${t.xs} {
         .ds-scroll::-webkit-scrollbar,
         .ds-scroll-global *::-webkit-scrollbar {
             height: 4px;
@@ -75,7 +71,7 @@ const c = r`
         }
     }
 
-    ${l.m} {
+    ${t.m} {
         .ds-scroll::-webkit-scrollbar,
         .ds-scroll-global *::-webkit-scrollbar {
             height: 8px;
@@ -83,6 +79,5 @@ const c = r`
         }
     }
 `;
-export {
-  c as commonStyles
-};
+//#endregion
+export { n as commonStyles };

package/dist-react/esm/components/ds-dialog-header/ds-dialog-header.js

@@ -1,46 +1,41 @@
-import { UiKitElement as c } from "../base/UiKitElement.js";
-import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
-import { htmlWithTokens as h } 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 d, html as u } 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 y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as f } from "./styles/common.styles.js";
-var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, s = (m, i, o, r) => {
-  for (var t = r > 1 ? void 0 : r ? g(i, o) : i, n = m.length - 1, a; n >= 0; n--)
-    (a = m[n]) && (t = (r ? a(i, o, t) : a(t)) || t);
-  return r && t && v(i, o, t), t;
-};
-let e = class extends c {
-  constructor() {
-    super(...arguments), this.title = "primary", this.iconSize = 32;
-  }
-  get classes() {
-    return {
-      container: !0
-    };
-  }
-  get styleTokens() {
-    return h`
+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 { 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 { 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-dialog-header/ds-dialog-header.ts
+var u, d = (u = class extends i {
+	constructor(...e) {
+		super(...e), this.title = "primary", this.iconSize = 32;
+	}
+	get classes() {
+		return { container: !0 };
+	}
+	get styleTokens() {
+		return t`
                 <style>
                     :host{
                         grid-area: header;
                     }
                 </style>
         `;
-  }
-  get iconTemplate() {
-    return this.iconName ? this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.iconName,
-      size: this.iconSize
-    }) : d;
-  }
-  render() {
-    return u`
+	}
+	get iconTemplate() {
+		return this.iconName ? o`<ds-icon class="icon" icon-name=${c(this.iconName)} size=${c(this.iconSize)}></ds-icon>` : e;
+	}
+	render() {
+		return t`
             ${this.styleTokens}
-            <div data-testid="ds-dialog-header-container" class=${y(this.classes)}>
+            <div data-testid="ds-dialog-header-container" class=${s(this.classes)}>
                 <div class="title-container">
                     ${this.iconTemplate}
                     <div class="title">${this.title}</div>
@@ -48,21 +43,13 @@ let e = class extends c {
                 <slot name="subtitle"></slot>
             </div>
         `;
-  }
-};
-e.styles = [f];
-s([
-  l({ type: String })
-], e.prototype, "title", 2);
-s([
-  l({ type: String, attribute: "icon-name" })
-], e.prototype, "iconName", 2);
-s([
-  l({ type: Number, attribute: "icon-size" })
-], e.prototype, "iconSize", 2);
-e = s([
-  p("ds-dialog-header")
-], e);
-export {
-  e as DsDialogHeader
-};
+	}
+}, u.styles = [l], u);
+r([n({ type: String })], d.prototype, "title", void 0), r([n({
+	type: String,
+	attribute: "icon-name"
+})], d.prototype, "iconName", void 0), r([n({
+	type: Number,
+	attribute: "icon-size"
+})], d.prototype, "iconSize", void 0), d = r([a("ds-dialog-header")], d);
+//#endregion

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

@@ -1,12 +1,10 @@
-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 { 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-dialog-header/styles/common.styles.ts
+var t = e`
     :host {
         display: block;
     }
 `;
-export {
-  p as commonStyles
-};
+//#endregion
+export { t as commonStyles };

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

@@ -1,58 +1,44 @@
-import { UiKitElement as l } from "../base/UiKitElement.js";
-import { customUiKitElement as h } from "../../decorators/customUiKitElement.js";
-import { htmlWithTokens as y } 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 c } 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 m } 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 { orientationStyles as v } from "./styles/common.styles.js";
-var d = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (p, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? u(e, s) : e, n = p.length - 1, a; n >= 0; n--)
-    (a = p[n]) && (t = (i ? a(e, s, t) : a(t)) || t);
-  return i && t && d(e, s, t), t;
-};
-let r = class extends l {
-  constructor() {
-    super(...arguments), this.orientation = "horizontal", this.variant = "primary", this.mode = "light";
-  }
-  get classes() {
-    return {
-      divider: !0,
-      [this.orientation]: !!this.orientation,
-      [this.variant]: !!this.variant,
-      [this.mode]: !!this.mode
-    };
-  }
-  get styleTokens() {
-    return y`
+import { x 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 { n as t } 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 n } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as r } from "../base/UiKitElement.js";
+import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
+import { e as a } 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 { orientationStyles as o } from "./styles/common.styles.js";
+//#region src/components/ds-divider/ds-divider.ts
+var s, c = (s = class extends r {
+	constructor(...e) {
+		super(...e), this.orientation = "horizontal", this.variant = "primary", this.mode = "light";
+	}
+	get classes() {
+		return {
+			divider: !0,
+			[this.orientation]: !!this.orientation,
+			[this.variant]: !!this.variant,
+			[this.mode]: !!this.mode
+		};
+	}
+	get styleTokens() {
+		return e`
             <style>
                 :host{
                     color-scheme: ${this.mode};
                 }
             </style>
         `;
-  }
-  render() {
-    return c`
+	}
+	render() {
+		return e`
             ${this.styleTokens}
-            <hr aria-orientation=${this.orientation} class=${f(this.classes)} />
+            <hr aria-orientation=${this.orientation} class=${a(this.classes)} />
         `;
-  }
-};
-r.styles = [v];
-o([
-  m({ type: String })
-], r.prototype, "orientation", 2);
-o([
-  m({ type: String })
-], r.prototype, "variant", 2);
-o([
-  m({ type: String, reflect: !0 })
-], r.prototype, "mode", 2);
-r = o([
-  h("ds-divider")
-], r);
-export {
-  r as DsDivider
-};
+	}
+}, s.styles = [o], s);
+n([t({ type: String })], c.prototype, "orientation", void 0), n([t({ type: String })], c.prototype, "variant", void 0), n([t({
+	type: String,
+	reflect: !0
+})], c.prototype, "mode", void 0), c = n([i("ds-divider")], c);
+//#endregion

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

@@ -1,13 +1,11 @@
-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 m = 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-divider/styles/common.styles.ts
+var t = e`
     .divider {
         border: none;
         margin: 0;
     }
 `;
-export {
-  m as orientationStyles
-};
+//#endregion
+export { t as orientationStyles };