@cupra/ui-kit 2.0.0-canary.85 → 2.0.0-canary.87

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

@@ -1,56 +1,61 @@
-import { UiKitElement as v } from "../base/UiKitElement.js";
+import { UiKitElement as m } from "../base/UiKitElement.js";
 import { customUiKitElement as b } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as d } from "../../utils/booleanConverter.js";
-import { debounce as y } from "../../utils/debounce.js";
+import { booleanConverter as p } from "../../utils/booleanConverter.js";
+import { debounce as f } 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 r, html as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { nothing as n, html 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 { state as m } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.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 C } from "./styles/common.styles.js";
-var k = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (e, o, a, n) => {
-  for (var i = n > 1 ? void 0 : n ? w(o, a) : o, c = e.length - 1, h; c >= 0; c--)
-    (h = e[c]) && (i = (n ? h(o, a, i) : h(i)) || i);
-  return n && i && k(o, a, i), i;
+import { property as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as v } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as u } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.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 g } from "./styles/common.styles.js";
+var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (e, t, r, l) => {
+  for (var o = l > 1 ? void 0 : l ? y(t, r) : t, c = e.length - 1, h; c >= 0; c--)
+    (h = e[c]) && (o = (l ? h(t, r, o) : h(o)) || o);
+  return l && o && k(t, r, o), o;
 };
-let t = class extends v {
+let s = class extends m {
   constructor() {
-    super(...arguments), this.lockClose = !1, this.lockScroll = !0, this.open = !1, this.size = "medium", this.hasBeenOpened = !1, this.hasScroll = !1, this.debouncedCheckScroll = y({ func: () => this.checkScroll() }), this.handleCloseButtonClick = () => {
+    super(...arguments), this.lockClose = !1, this.lockScroll = !0, this.open = !1, this.size = "medium", this.hasBeenOpened = !1, this.hasScroll = !1, this.debouncedCheckScroll = f({ func: () => this.checkScroll() }), this.handleCloseButtonClick = () => {
       this.handleClose("button");
-    }, this.handleBackdropClick = () => {
-      this.handleClose("backdrop");
+    }, 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();
-    }, this.handleKeyDown = (e) => {
-      this.open && e.key === "Escape" && this.handleClose("escape");
     };
   }
   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());
+    super.updated(e), !this.hasBeenOpened && e.has("open") && this.open && (this.hasBeenOpened = !0), e.has("open") && (this.handleResizeObserver(), this.syncNativeDialogState()), e.has("open") && this.open && (await this.updateComplete, this.requestUpdate());
+  }
+  syncNativeDialogState() {
+    this.nativeDialog && (this.open ? this.openNativeDialog() : this.closeNativeDialog());
+  }
+  openNativeDialog() {
+    var e, t;
+    this.nativeDialog.open || (t = (e = this.nativeDialog).showModal) == null || t.call(e);
+  }
+  closeNativeDialog() {
+    var e, t;
+    this.nativeDialog.open && ((t = (e = this.nativeDialog).close) == null || t.call(e));
   }
   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
-    };
+    (e = this.resizeObserver) == null || e.disconnect(), this.content && (this.resizeObserver.observe(this.content), await new Promise(requestAnimationFrame), this.checkScroll());
   }
-  get dialogClasses() {
+  get panelClasses() {
     return {
-      dialog: !0,
+      panel: !0,
+      "with-scroll": this.open && this.hasScroll,
       [this.size]: !!this.size
     };
   }
   dispatchCloseEvents(e) {
-    const o = `ds-dialog:close-${e}`;
+    const t = `ds-dialog:close-${e}`;
     this.dispatchEvent(
-      new Event(o, {
+      new Event(t, {
         bubbles: !0,
         composed: !0
       })
@@ -65,77 +70,73 @@ let t = class extends v {
     this.lockClose || (this.open = !1, this.dispatchCloseEvents(e));
   }
   connectedCallback() {
-    super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown), this.resizeObserver = new ResizeObserver(this.debouncedCheckScroll), this.handleResizeObserver(), this.addEventListener("click", this.handleHostClick);
+    super.connectedCallback(), this.resizeObserver = new ResizeObserver(this.debouncedCheckScroll), this.handleResizeObserver(), this.addEventListener("click", this.handleHostClick);
   }
   disconnectedCallback() {
     var e;
-    super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown), this.lockScroll && (document.body.style.overflow = ""), (e = this.resizeObserver) == null || e.disconnect(), this.removeEventListener("click", this.handleHostClick);
+    super.disconnectedCallback(), (e = this.resizeObserver) == null || e.disconnect(), this.removeEventListener("click", this.handleHostClick);
   }
   checkScroll() {
-    var e, o;
-    this.hasScroll = ((e = this.content) == null ? void 0 : e.scrollHeight) > ((o = this.content) == null ? void 0 : o.clientHeight);
+    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 ? r : p`
-            <style>
-                :host {
-                    display: ${this.open ? "flex" : "none"};
-                }
-            </style>
-
-            <div class=${u(this.containerClasses)}>
-                <div class="overlay" @click=${this.handleBackdropClick}></div>
-                <dialog
-                    ?open=${this.open}
-                    data-testid="ds-dialog-container"
-                    class=${u(this.dialogClasses)}
-                    aria-modal="true"
-                    aria-label=${this.dataAriaLabel || r}
-                    aria-description=${this.dataAriaDescription || r}
-                >
-                    ${this.lockClose ? r : p`<slot name="close-button" @click=${this.handleCloseButtonClick}></slot>`}
+    return !this.hasBeenOpened && !this.open ? n : d`
+            <dialog
+                class="dialog"
+                data-testid="ds-dialog-container"
+                aria-label=${this.dataAriaLabel || n}
+                aria-description=${this.dataAriaDescription || n}
+                @cancel=${this.handleCancel}
+                @click=${this.handleDialogClick}
+            >
+                <div class=${C(this.panelClasses)}>
+                    ${this.lockClose ? n : d`<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 = [C];
-s([
-  l({ type: Boolean, converter: d, attribute: "lock-close" })
-], t.prototype, "lockClose", 2);
-s([
-  l({ type: Boolean, converter: d, attribute: "lock-scroll" })
-], t.prototype, "lockScroll", 2);
-s([
-  l({ type: Boolean, converter: d })
-], t.prototype, "open", 2);
-s([
-  l({ type: String })
-], t.prototype, "size", 2);
-s([
-  l({ type: String, attribute: "data-aria-label" })
-], t.prototype, "dataAriaLabel", 2);
-s([
-  l({ type: String, attribute: "data-aria-description" })
-], t.prototype, "dataAriaDescription", 2);
-s([
-  m()
-], t.prototype, "hasBeenOpened", 2);
-s([
-  m()
-], t.prototype, "hasScroll", 2);
-s([
-  f(".content")
-], t.prototype, "content", 2);
-t = s([
+s.styles = [g];
+i([
+  a({ type: Boolean, converter: p, attribute: "lock-close" })
+], s.prototype, "lockClose", 2);
+i([
+  a({ type: Boolean, converter: p, attribute: "lock-scroll" })
+], s.prototype, "lockScroll", 2);
+i([
+  a({ type: Boolean, converter: p })
+], s.prototype, "open", 2);
+i([
+  a({ type: String })
+], s.prototype, "size", 2);
+i([
+  a({ type: String, attribute: "data-aria-label" })
+], s.prototype, "dataAriaLabel", 2);
+i([
+  a({ type: String, attribute: "data-aria-description" })
+], s.prototype, "dataAriaDescription", 2);
+i([
+  v()
+], s.prototype, "hasBeenOpened", 2);
+i([
+  v()
+], s.prototype, "hasScroll", 2);
+i([
+  u(".content")
+], s.prototype, "content", 2);
+i([
+  u("dialog")
+], s.prototype, "nativeDialog", 2);
+s = i([
   b("ds-dialog")
-], t);
+], s);
 export {
-  t as DsDialog
+  s as DsDialog
 };

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

@@ -2,37 +2,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 i } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const c = i`
+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`
     :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;
     }
@@ -76,5 +66,5 @@ const c = i`
     }
 `;
 export {
-  c as commonStyles
+  a as commonStyles
 };

package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js

@@ -54,7 +54,7 @@ let m = class extends v {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/2.0.0-canary.85", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/2.0.0-canary.87", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");

package/dist-react/esm/utils/IconsManager.js

@@ -25,7 +25,7 @@ class l {
     }), f.subscribe("theme", this.handleChangeTheme);
   }
 }
-const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.85"), h = globalThis;
+const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.87"), h = globalThis;
 let i = h[c];
 i || (i = new l(), Object.defineProperty(h, c, {
   value: i,

package/dist-react/esm/utils/PubSub.js

@@ -18,7 +18,7 @@ class e {
     });
   }
 }
-const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.85"), t = globalThis;
+const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.87"), t = globalThis;
 let b = t[u];
 b || (b = new e(), Object.defineProperty(t, u, {
   value: b,

package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js

@@ -7,7 +7,7 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/2.0.0-canary.85/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/2.0.0-canary.87/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
       if (r) return r;
       const i = h(() => this.fetchStyle({ url: c })).then((n) => (n || this.stylePromises.delete(c), n));
       return this.stylePromises.set(c, i), this.stylePromises.get(c);

package/dist-react/esm/utils/cssWithTokens.js

@@ -3,7 +3,7 @@ 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 { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-85"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-87"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist-react/esm/utils/htmlWithTokens.js

@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 function x(t, ...r) {
-  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-85"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-87"), e = i(o);
   return n`${e}`;
 }
 export {

package/dist-react/types/components/ds-checkbox/ds-checkbox.d.ts

@@ -26,8 +26,11 @@ export declare class DsCheckbox extends DsCheckbox_base {
         callback: any;
     }>): void;
     get disabled(): boolean;
+    set disabled(value: boolean);
     get size(): DsCheckboxAttrs['size'];
+    set size(value: DsCheckboxAttrs['size']);
     protected get forcedError(): DsCheckboxAttrs['forced-error'];
+    protected set forcedError(value: DsCheckboxAttrs['forced-error']);
     protected get error(): boolean;
     private handleChange;
     protected get classes(): {

package/dist-react/types/components/ds-dialog/ds-dialog.d.ts

@@ -14,20 +14,23 @@ export declare class DsDialog extends UiKitElement {
     hasBeenOpened: boolean;
     hasScroll: boolean;
     protected content: HTMLInputElement;
+    private nativeDialog;
     private resizeObserver;
     private debouncedCheckScroll;
     updated(changedProperties: PropertyValues): Promise<void>;
+    private syncNativeDialogState;
+    private openNativeDialog;
+    private closeNativeDialog;
     handleResizeObserver(): Promise<void>;
-    private get containerClasses();
-    private get dialogClasses();
+    private get panelClasses();
     private dispatchCloseEvents;
     private handleClose;
     private handleCloseButtonClick;
-    private handleBackdropClick;
+    private handleDialogClick;
+    private handleCancel;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private handleHostClick;
-    private handleKeyDown;
     private checkScroll;
     render(): typeof nothing | import("lit").TemplateResult<1>;
 }

package/dist-react/types/components/ds-theme-provider/themeContext.d.ts

@@ -1,4 +1,4 @@
-export type Theme = 'cupra' | 'cupra-diagonal' | 'seat';
+export type Theme = 'cupra' | 'cupra-diagonal' | 'seat' | 'seat-legacy';
 export declare const themeContext: {
     __context__: Theme;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "2.0.0-canary.85",
+  "version": "2.0.0-canary.87",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",