@cupra/ui-kit 2.0.0-canary.18 → 2.0.0-canary.181

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

@@ -1,110 +1,135 @@
-import { UiKitElement as m } from "../base/UiKitElement.js";
-import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as d } from "../../utils/booleanConverter.js";
-import { debounce as v } 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 y } 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 c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { classMap as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as w } from "./styles/common.styles.js";
-var O = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (e, s, r, n) => {
-  for (var o = n > 1 ? void 0 : n ? C(s, r) : s, l = e.length - 1, a; l >= 0; l--)
-    (a = e[l]) && (o = (n ? a(s, r, o) : a(o)) || o);
-  return n && o && O(s, r, o), o;
-};
-let t = class extends m {
-  constructor() {
-    super(...arguments), this.lockScroll = !0, this.open = !1, this.size = "medium", this.hasBeenOpened = !1, this.hasScroll = !1, this.debouncedCheckScroll = v({ 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.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: !0,
-      close: !this.open,
-      "with-scroll": this.open && this.hasScroll
-    };
-  }
-  get dialogClasses() {
-    return {
-      dialog: !0,
-      [this.size]: !!this.size
-    };
-  }
-  handleClose() {
-    this.open = !1, this.dispatchEvent(
-      new Event("ds-dialog: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.body.style.overflow = ""), (e = this.resizeObserver) == null || e.disconnect();
-  }
-  checkScroll() {
-    var e, s;
-    this.hasScroll = ((e = this.content) == null ? void 0 : e.scrollHeight) > ((s = this.content) == null ? void 0 : s.clientHeight);
-  }
-  render() {
-    return !this.hasBeenOpened && !this.open ? f : y`
-            <style>
-                :host {
-                    display: ${this.open ? "flex" : "none"};
-                }
-            </style>
-
-            <div class=${h(this.containerClasses)}>
-                <div class="overlay" @click=${this.handleClose}></div>
-                <dialog ?open=${this.open} data-testid="ds-dialog-container" class=${h(this.dialogClasses)}>
-                    <slot name="close-button" @click=${this.handleClose}></slot>
+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 { scrollLock as d } from "../../utils/scrollLock.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+//#region src/components/ds-dialog/ds-dialog.ts
+var p, m = (p = class extends o {
+	constructor(...e) {
+		super(...e), this.lockClose = !1, this.lockScroll = !0, this._open = void 0, this._openState = !1, this.size = "medium", this.hasBeenOpened = !1, this.hasScroll = !1, this.debouncedCheckScroll = u({ func: () => this.checkScroll() }), this.scrollLocked = !1, this.handleCloseButtonClick = () => {
+			this.handleClose("button");
+		}, this.handleDialogClick = (e) => {
+			e.target === this.nativeDialog && this.handleClose("backdrop");
+		}, this.handleCancel = (e) => {
+			e.preventDefault(), this.lockClose || this.handleClose("escape");
+		}, this.handleHostClick = (e) => {
+			e.stopPropagation();
+		};
+	}
+	get open() {
+		return this._open ?? this._openState;
+	}
+	set open(e) {
+		this._open = e;
+	}
+	updated(e) {
+		super.updated(e), !this.hasBeenOpened && (e.has("_open") || e.has("_openState")) && this.open && (this.hasBeenOpened = !0), (e.has("_open") || e.has("_openState")) && (this.open || (this.hasScroll = !1), this.handleResizeObserver(), this.syncNativeDialogState(), this.syncScrollLock());
+	}
+	syncScrollLock() {
+		this.open && this.lockScroll ? (d.lock(), this.scrollLocked = !0) : this.scrollLocked && (d.unlock(), this.scrollLocked = !1);
+	}
+	syncNativeDialogState() {
+		this.nativeDialog && (this.open ? this.openNativeDialog() : this.closeNativeDialog());
+	}
+	openNativeDialog() {
+		if (!this.nativeDialog.open) {
+			var e, t;
+			(e = (t = this.nativeDialog).showModal) == null || e.call(t);
+		}
+	}
+	closeNativeDialog() {
+		if (this.nativeDialog.open) {
+			var e, t;
+			(e = (t = this.nativeDialog).close) == null || e.call(t);
+		}
+	}
+	async handleResizeObserver() {
+		var e;
+		(e = this.resizeObserver) == null || e.disconnect(), this.content && (this.resizeObserver.observe(this.content), await new Promise(requestAnimationFrame), this.checkScroll());
+	}
+	get panelClasses() {
+		return {
+			panel: !0,
+			"with-scroll": this.open && this.hasScroll,
+			[this.size]: !!this.size
+		};
+	}
+	dispatchCloseEvents(e) {
+		let t = `ds-dialog:close-${e}`;
+		this.dispatchEvent(new Event(t, {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new Event("ds-dialog:close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleClose(e) {
+		this.lockClose || (this._openState = !1, this._open = void 0, this.dispatchCloseEvents(e));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.resizeObserver = new ResizeObserver(this.debouncedCheckScroll), this.handleResizeObserver(), this.addEventListener("click", this.handleHostClick);
+	}
+	disconnectedCallback() {
+		var e;
+		super.disconnectedCallback(), (e = this.resizeObserver) == null || e.disconnect(), this.scrollLocked && (d.unlock(), this.scrollLocked = !1), this.removeEventListener("click", this.handleHostClick);
+	}
+	checkScroll() {
+		if (!this.hasScroll) {
+			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 ? e : t`
+            <dialog
+                class="dialog"
+                data-testid="ds-dialog-container"
+                aria-label=${this.dataAriaLabel || e}
+                aria-description=${this.dataAriaDescription || e}
+                @cancel=${this.handleCancel}
+                @click=${this.handleDialogClick}
+            >
+                <div class=${l(this.panelClasses)}>
+                    ${this.lockClose ? e : t`<slot name="close-button" @click=${this.handleCloseButtonClick}></slot>`}
                     <div class="content-container">
                         <div tabindex="0" class="content ds-scroll">
                             <slot @slotchange=${this.handleResizeObserver}></slot>
                         </div>
                         <slot name="footer"></slot>
                     </div>
-                </dialog>
-            </div>
+                </div>
+            </dialog>
         `;
-  }
-};
-t.styles = [w];
-i([
-  c({ type: Boolean, converter: d, attribute: "lock-scroll" })
-], t.prototype, "lockScroll", 2);
-i([
-  c({ type: Boolean, converter: d })
-], t.prototype, "open", 2);
-i([
-  c({ type: String })
-], t.prototype, "size", 2);
-i([
-  p()
-], t.prototype, "hasBeenOpened", 2);
-i([
-  p()
-], t.prototype, "hasScroll", 2);
-i([
-  b(".content")
-], t.prototype, "content", 2);
-t = i([
-  u("ds-dialog")
-], t);
-export {
-  t as DsDialog
-};
+	}
+}, p.styles = [f], p);
+a([n({
+	type: Boolean,
+	converter: c,
+	attribute: "lock-close"
+})], m.prototype, "lockClose", void 0), a([n({
+	type: Boolean,
+	converter: c,
+	attribute: "lock-scroll"
+})], m.prototype, "lockScroll", void 0), a([n({
+	type: Boolean,
+	attribute: "open",
+	converter: c
+})], m.prototype, "_open", void 0), a([r()], m.prototype, "_openState", void 0), a([n({ type: String })], m.prototype, "size", void 0), a([n({
+	type: String,
+	attribute: "data-aria-label"
+})], m.prototype, "dataAriaLabel", void 0), a([n({
+	type: String,
+	attribute: "data-aria-description"
+})], m.prototype, "dataAriaDescription", void 0), a([r()], m.prototype, "hasBeenOpened", void 0), a([r()], m.prototype, "hasScroll", void 0), a([i(".content")], m.prototype, "content", void 0), a([i("dialog")], m.prototype, "nativeDialog", void 0), m = a([s("ds-dialog")], m);
+//#endregion

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

@@ -1,38 +1,27 @@
-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 o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const a = 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";
+import { cssQueries as t } from "../../../utils/cssQueries.js";
+//#region src/components/ds-dialog/styles/common.styles.ts
+var n = e`
     :host {
-        transition: display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
+        display: contents;
     }
 
-    .container.close {
-        display: none;
-        opacity: 0;
-    }
-
-    .container {
-        position: fixed;
-        top: 0;
-        left: 0;
+    .dialog[open] {
+        max-width: none;
+        max-height: none;
+        border: none;
+        background: transparent;
+        overflow: visible;
         width: 100dvw;
         height: 100dvh;
+        box-sizing: border-box;
         display: flex;
         justify-content: center;
         align-items: center;
-        z-index: var(--ds-z-index-modal);
-        transition:
-            opacity 0.3s cubic-bezier(0, 0, 0.2, 1),
-            display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
-        opacity: 1;
-        @starting-style {
-            opacity: 0;
-        }
     }
 
-    .dialog {
+    .panel {
         padding: 0;
         position: relative;
     }
@@ -43,6 +32,10 @@ const a = o`
         overflow: hidden;
     }
 
+    .content:focus {
+        outline: none;
+    }
+
     .ds-scroll::-webkit-scrollbar,
     .ds-scroll-global *::-webkit-scrollbar {
         appearance: none;
@@ -51,9 +44,7 @@ const a = o`
 
     .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,
@@ -61,7 +52,7 @@ const a = o`
         background-color: transparent;
     }
 
-    ${l.xs} {
+    ${t.xs} {
         .ds-scroll::-webkit-scrollbar,
         .ds-scroll-global *::-webkit-scrollbar {
             height: 4px;
@@ -69,7 +60,7 @@ const a = o`
         }
     }
 
-    ${l.m} {
+    ${t.m} {
         .ds-scroll::-webkit-scrollbar,
         .ds-scroll-global *::-webkit-scrollbar {
             height: 8px;
@@ -77,6 +68,5 @@ const a = o`
         }
     }
 `;
-export {
-  a as commonStyles
-};
+//#endregion
+export { n as commonStyles };

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

@@ -1,46 +1,35 @@
-import { UiKitElement as a } from "../base/UiKitElement.js";
-import { customUiKitElement as n } from "../../decorators/customUiKitElement.js";
-import { htmlWithTokens as d } 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 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 { classMap as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as y } from "./styles/common.styles.js";
-var g = Object.getOwnPropertyDescriptor, f = (o, r, m, l) => {
-  for (var t = l > 1 ? void 0 : l ? g(r, m) : r, e = o.length - 1, i; e >= 0; e--)
-    (i = o[e]) && (t = i(t) || t);
-  return t;
-};
-let s = class extends a {
-  get classes() {
-    return {
-      container: !0
-    };
-  }
-  get styleTokens() {
-    return d`
+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 { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as n } from "../base/UiKitElement.js";
+import { customUiKitElement as r } from "../../decorators/customUiKitElement.js";
+import { e as i } 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 a } from "./styles/common.styles.js";
+//#region src/components/ds-dialog-body/ds-dialog-body.ts
+var o, s = (o = class extends n {
+	get classes() {
+		return { container: !0 };
+	}
+	get styleTokens() {
+		return e`
                 <style>
                     :host{
                         grid-area: body;
                     }
                 </style>
         `;
-  }
-  render() {
-    return p`
+	}
+	render() {
+		return e`
             ${this.styleTokens}
-            <div data-testid="ds-dialog-body-container" class=${c(this.classes)}>
+            <div data-testid="ds-dialog-body-container" class=${i(this.classes)}>
                 <slot name="description"></slot>
                 <slot name="image"></slot>
                 <slot></slot>
             </div>
         `;
-  }
-};
-s.styles = [y];
-s = f([
-  n("ds-dialog-body")
-], s);
-export {
-  s as DsDialogBody
-};
+	}
+}, o.styles = [a], o);
+s = t([r("ds-dialog-body")], s);
+//#endregion

package/dist-react/esm/components/ds-dialog-body/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-body/styles/common.styles.ts
+var t = e`
     :host {
         display: inline-block;
     }
 `;
-export {
-  p as commonStyles
-};
+//#endregion
+export { t as commonStyles };

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

@@ -1,47 +1,35 @@
-import { UiKitElement as p } from "../base/UiKitElement.js";
-import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as v } from "../../utils/booleanConverter.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as c, html 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 f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as u } 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";
-var D = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (l, r, i, e) => {
-  for (var t = e > 1 ? void 0 : e ? g(r, i) : r, s = l.length - 1, a; s >= 0; s--)
-    (a = l[s]) && (t = (e ? a(r, i, t) : a(t)) || t);
-  return e && t && D(r, i, t), t;
-};
-let o = class extends p {
-  constructor() {
-    super(...arguments), this.withDivider = !0;
-  }
-  get classes() {
-    return {
-      container: !0
-    };
-  }
-  render() {
-    return m`
-            <div data-testid="ds-dialog-footer-container" class=${u(this.classes)}>
-                ${this.withDivider ? m`<div class="divider"></div>` : 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 { commonStyles as c } from "./styles/common.styles.js";
+//#region src/components/ds-dialog-footer/ds-dialog-footer.ts
+var l, u = (l = class extends i {
+	constructor(...e) {
+		super(...e), this.withDivider = !0;
+	}
+	get classes() {
+		return { container: !0 };
+	}
+	render() {
+		return t`
+            <div data-testid="ds-dialog-footer-container" class=${s(this.classes)}>
+                ${this.withDivider ? t`<div class="divider"></div>` : e}
                 <slot></slot>
                 <slot name="actions"></slot>
             </div>
         `;
-  }
-};
-o.styles = [h];
-n([
-  f({
-    type: Boolean,
-    attribute: "with-divider",
-    converter: v
-  })
-], o.prototype, "withDivider", 2);
-o = n([
-  d("ds-dialog-footer")
-], o);
-export {
-  o as DsDialogFooter
-};
+	}
+}, l.styles = [c], l);
+r([n({
+	type: Boolean,
+	attribute: "with-divider",
+	converter: o
+})], u.prototype, "withDivider", void 0), u = r([a("ds-dialog-footer")], u);
+//#endregion

package/dist-react/esm/components/ds-dialog-footer/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 o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.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-dialog-footer/styles/common.styles.ts
+var t = e`
     :host {
         display: flex;
     }
@@ -11,6 +10,5 @@ const s = o`
         width: 100%;
     }
 `;
-export {
-  s as commonStyles
-};
+//#endregion
+export { t as commonStyles };