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

package/dist/cjs/components/ds-checkbox/ds-checkbox.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../base/UiKitElement.cjs"),l=require("../ds-checkbox-group/ds-checkbox-group.cjs"),b=require("../../decorators/customUiKitElement.cjs"),x=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/controllers/context-consumer.cjs"),m=require("../../mixins/FormAssociatedMixin.cjs"),c=require("../../utils/booleanConverter.cjs"),y=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const o=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),d=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),k=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),v=require("./styles/common.styles.cjs");var C=Object.defineProperty,f=Object.getOwnPropertyDescriptor,e=(h,t,s,n)=>{for(var i=n>1?void 0:n?f(t,s):t,a=h.length-1,p;a>=0;a--)(p=h[a])&&(i=(n?p(t,s,i):p(i))||i);return n&&i&&C(t,s,i),i};exports.DsCheckbox=class extends m.FormAssociatedMixin(u.UiKitElement){constructor(){super(...arguments),this.inputPlacement="left",this.checked=!1,this.required=!1,this._disabled=!1,this.mode="light",this._size="medium",this.helperText="",this.infoText="",this._forcedError="",this.invalidError="",this.indeterminate=!1}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>{this.createContextConsumers([{context:l.checkboxGroupDisabledContext,callback:t=>{this.disabledGroup=t}},{context:l.checkboxGroupErrorContext,callback:t=>{this.errorGroup=t}},{context:l.checkboxGroupSizeContext,callback:t=>{this.sizeGroup=t}}])})}createContextConsumers(t){t.forEach(({context:s,callback:n})=>{new x.ContextConsumer(this,{context:s,callback:n,subscribe:!0})})}get disabled(){return this.disabledGroup??this._disabled}get size(){return this.sizeGroup||this._size}get forcedError(){return this._forcedError}get error(){return this.errorGroup??!!this._forcedError}handleChange(t){const s=t.target;this.checked=s.checked,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.checked,value:this.value}}))}get classes(){return{container:!0,[this.inputPlacement]:!!this.inputPlacement,[this.mode]:!!this.mode,[this.size]:!!this.size,disabled:this.disabled,checked:this.checked,error:this.error}}get iconTemplate(){if(!this.checked)return o.nothing;const t=this.indeterminate?"minus":"check";return this.componentFactory.createIcon({class:"icon","icon-name":t})}get styleTokens(){return y.htmlWithTokens`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../base/UiKitElement.cjs"),l=require("../ds-checkbox-group/ds-checkbox-group.cjs"),b=require("../../decorators/customUiKitElement.cjs"),x=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/controllers/context-consumer.cjs"),m=require("../../mixins/FormAssociatedMixin.cjs"),c=require("../../utils/booleanConverter.cjs"),y=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const o=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),d=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),k=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),v=require("./styles/common.styles.cjs");var C=Object.defineProperty,f=Object.getOwnPropertyDescriptor,t=(h,e,s,n)=>{for(var i=n>1?void 0:n?f(e,s):e,a=h.length-1,p;a>=0;a--)(p=h[a])&&(i=(n?p(e,s,i):p(i))||i);return n&&i&&C(e,s,i),i};exports.DsCheckbox=class extends m.FormAssociatedMixin(u.UiKitElement){constructor(){super(...arguments),this.inputPlacement="left",this.checked=!1,this.required=!1,this._disabled=!1,this.mode="light",this._size="medium",this.helperText="",this.infoText="",this._forcedError="",this.invalidError="",this.indeterminate=!1}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>{this.createContextConsumers([{context:l.checkboxGroupDisabledContext,callback:e=>{this.disabledGroup=e}},{context:l.checkboxGroupErrorContext,callback:e=>{this.errorGroup=e}},{context:l.checkboxGroupSizeContext,callback:e=>{this.sizeGroup=e}}])})}createContextConsumers(e){e.forEach(({context:s,callback:n})=>{new x.ContextConsumer(this,{context:s,callback:n,subscribe:!0})})}get disabled(){return this.disabledGroup??this._disabled}set disabled(e){this._disabled=e}get size(){return this.sizeGroup||this._size}set size(e){this._size=e}get forcedError(){return this._forcedError}set forcedError(e){this._forcedError=e}get error(){return this.errorGroup??!!this._forcedError}handleChange(e){const s=e.target;this.checked=s.checked,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.checked,value:this.value}}))}get classes(){return{container:!0,[this.inputPlacement]:!!this.inputPlacement,[this.mode]:!!this.mode,[this.size]:!!this.size,disabled:this.disabled,checked:this.checked,error:this.error}}get iconTemplate(){if(!this.checked)return o.nothing;const e=this.indeterminate?"minus":"check";return this.componentFactory.createIcon({class:"icon","icon-name":e})}get styleTokens(){return y.htmlWithTokens`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -35,4 +35,4 @@
                     </div>
                 </label>
             </div>
-        `}};exports.DsCheckbox.styles=[v.commonStyles];e([r.property({type:String})],exports.DsCheckbox.prototype,"name",2);e([r.property({type:String})],exports.DsCheckbox.prototype,"value",2);e([r.property({type:String,attribute:"input-placement"})],exports.DsCheckbox.prototype,"inputPlacement",2);e([r.property({type:Boolean,converter:c.booleanConverter,reflect:!0})],exports.DsCheckbox.prototype,"checked",2);e([r.property({type:Boolean,converter:c.booleanConverter})],exports.DsCheckbox.prototype,"required",2);e([r.property({type:Boolean,converter:c.booleanConverter,attribute:"disabled"})],exports.DsCheckbox.prototype,"_disabled",2);e([r.property({type:String,reflect:!0})],exports.DsCheckbox.prototype,"mode",2);e([r.property({type:String,attribute:"size"})],exports.DsCheckbox.prototype,"_size",2);e([r.property({type:String,attribute:"helper-text"})],exports.DsCheckbox.prototype,"helperText",2);e([r.property({type:String,attribute:"info-text"})],exports.DsCheckbox.prototype,"infoText",2);e([r.property({type:String,attribute:"forced-error"})],exports.DsCheckbox.prototype,"_forcedError",2);e([r.property({type:String,attribute:"invalid-error"})],exports.DsCheckbox.prototype,"invalidError",2);e([r.property({type:Boolean,converter:c.booleanConverter})],exports.DsCheckbox.prototype,"indeterminate",2);e([d.state()],exports.DsCheckbox.prototype,"disabledGroup",2);e([d.state()],exports.DsCheckbox.prototype,"errorGroup",2);e([d.state()],exports.DsCheckbox.prototype,"sizeGroup",2);exports.DsCheckbox=e([b.customUiKitElement("ds-checkbox")],exports.DsCheckbox);
+        `}};exports.DsCheckbox.styles=[v.commonStyles];t([r.property({type:String})],exports.DsCheckbox.prototype,"name",2);t([r.property({type:String})],exports.DsCheckbox.prototype,"value",2);t([r.property({type:String,attribute:"input-placement"})],exports.DsCheckbox.prototype,"inputPlacement",2);t([r.property({type:Boolean,converter:c.booleanConverter,reflect:!0})],exports.DsCheckbox.prototype,"checked",2);t([r.property({type:Boolean,converter:c.booleanConverter})],exports.DsCheckbox.prototype,"required",2);t([r.property({type:Boolean,converter:c.booleanConverter,attribute:"disabled"})],exports.DsCheckbox.prototype,"_disabled",2);t([r.property({type:String,reflect:!0})],exports.DsCheckbox.prototype,"mode",2);t([r.property({type:String,attribute:"size"})],exports.DsCheckbox.prototype,"_size",2);t([r.property({type:String,attribute:"helper-text"})],exports.DsCheckbox.prototype,"helperText",2);t([r.property({type:String,attribute:"info-text"})],exports.DsCheckbox.prototype,"infoText",2);t([r.property({type:String,attribute:"forced-error"})],exports.DsCheckbox.prototype,"_forcedError",2);t([r.property({type:String,attribute:"invalid-error"})],exports.DsCheckbox.prototype,"invalidError",2);t([r.property({type:Boolean,converter:c.booleanConverter})],exports.DsCheckbox.prototype,"indeterminate",2);t([d.state()],exports.DsCheckbox.prototype,"disabledGroup",2);t([d.state()],exports.DsCheckbox.prototype,"errorGroup",2);t([d.state()],exports.DsCheckbox.prototype,"sizeGroup",2);exports.DsCheckbox=t([b.customUiKitElement("ds-checkbox")],exports.DsCheckbox);

package/dist/cjs/components/ds-dialog/ds-dialog.cjs

@@ -1,27 +1,20 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../base/UiKitElement.cjs"),v=require("../../decorators/customUiKitElement.cjs"),h=require("../../utils/booleanConverter.cjs"),b=require("../../utils/debounce.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const i=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const l=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),p=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),y=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),d=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),g=require("./styles/common.styles.cjs");var C=Object.defineProperty,D=Object.getOwnPropertyDescriptor,t=(r,e,s,n)=>{for(var o=n>1?void 0:n?D(e,s):e,a=r.length-1,c;a>=0;a--)(c=r[a])&&(o=(n?c(e,s,o):c(o))||o);return n&&o&&C(e,s,o),o};exports.DsDialog=class extends u.UiKitElement{constructor(){super(...arguments),this.lockClose=!1,this.lockScroll=!0,this.open=!1,this.size="medium",this.hasBeenOpened=!1,this.hasScroll=!1,this.debouncedCheckScroll=b.debounce({func:()=>this.checkScroll()}),this.handleCloseButtonClick=()=>{this.handleClose("button")},this.handleBackdropClick=()=>{this.handleClose("backdrop")},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())}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}}dispatchCloseEvents(e){const s=`ds-dialog:close-${e}`;this.dispatchEvent(new Event(s,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("ds-dialog:close",{bubbles:!0,composed:!0}))}handleClose(e){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)}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)}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?i.nothing:i.html`
-            <style>
-                :host {
-                    display: ${this.open?"flex":"none"};
-                }
-            </style>
-
-            <div class=${d.classMap(this.containerClasses)}>
-                <div class="overlay" @click=${this.handleBackdropClick}></div>
-                <dialog
-                    ?open=${this.open}
-                    data-testid="ds-dialog-container"
-                    class=${d.classMap(this.dialogClasses)}
-                    aria-modal="true"
-                    aria-label=${this.dataAriaLabel||i.nothing}
-                    aria-description=${this.dataAriaDescription||i.nothing}
-                >
-                    ${this.lockClose?i.nothing:i.html`<slot name="close-button" @click=${this.handleCloseButtonClick}></slot>`}
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../base/UiKitElement.cjs"),v=require("../../decorators/customUiKitElement.cjs"),h=require("../../utils/booleanConverter.cjs"),g=require("../../utils/debounce.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const o=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const l=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),p=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),d=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),D=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),b=require("./styles/common.styles.cjs");var C=Object.defineProperty,y=Object.getOwnPropertyDescriptor,s=(n,e,t,a)=>{for(var i=a>1?void 0:a?y(e,t):e,r=n.length-1,c;r>=0;r--)(c=n[r])&&(i=(a?c(e,t,i):c(i))||i);return a&&i&&C(e,t,i),i};exports.DsDialog=class extends u.UiKitElement{constructor(){super(...arguments),this.lockClose=!1,this.lockScroll=!0,this.open=!1,this.size="medium",this.hasBeenOpened=!1,this.hasScroll=!1,this.debouncedCheckScroll=g.debounce({func:()=>this.checkScroll()}),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()}}async updated(e){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;(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){const 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.open=!1,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.removeEventListener("click",this.handleHostClick)}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?o.nothing:o.html`
+            <dialog
+                class="dialog"
+                data-testid="ds-dialog-container"
+                aria-label=${this.dataAriaLabel||o.nothing}
+                aria-description=${this.dataAriaDescription||o.nothing}
+                @cancel=${this.handleCancel}
+                @click=${this.handleDialogClick}
+            >
+                <div class=${D.classMap(this.panelClasses)}>
+                    ${this.lockClose?o.nothing:o.html`<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>
-        `}};exports.DsDialog.styles=[g.commonStyles];t([l.property({type:Boolean,converter:h.booleanConverter,attribute:"lock-close"})],exports.DsDialog.prototype,"lockClose",2);t([l.property({type:Boolean,converter:h.booleanConverter,attribute:"lock-scroll"})],exports.DsDialog.prototype,"lockScroll",2);t([l.property({type:Boolean,converter:h.booleanConverter})],exports.DsDialog.prototype,"open",2);t([l.property({type:String})],exports.DsDialog.prototype,"size",2);t([l.property({type:String,attribute:"data-aria-label"})],exports.DsDialog.prototype,"dataAriaLabel",2);t([l.property({type:String,attribute:"data-aria-description"})],exports.DsDialog.prototype,"dataAriaDescription",2);t([p.state()],exports.DsDialog.prototype,"hasBeenOpened",2);t([p.state()],exports.DsDialog.prototype,"hasScroll",2);t([y.query(".content")],exports.DsDialog.prototype,"content",2);exports.DsDialog=t([v.customUiKitElement("ds-dialog")],exports.DsDialog);
+                </div>
+            </dialog>
+        `}};exports.DsDialog.styles=[b.commonStyles];s([l.property({type:Boolean,converter:h.booleanConverter,attribute:"lock-close"})],exports.DsDialog.prototype,"lockClose",2);s([l.property({type:Boolean,converter:h.booleanConverter,attribute:"lock-scroll"})],exports.DsDialog.prototype,"lockScroll",2);s([l.property({type:Boolean,converter:h.booleanConverter})],exports.DsDialog.prototype,"open",2);s([l.property({type:String})],exports.DsDialog.prototype,"size",2);s([l.property({type:String,attribute:"data-aria-label"})],exports.DsDialog.prototype,"dataAriaLabel",2);s([l.property({type:String,attribute:"data-aria-description"})],exports.DsDialog.prototype,"dataAriaDescription",2);s([p.state()],exports.DsDialog.prototype,"hasBeenOpened",2);s([p.state()],exports.DsDialog.prototype,"hasScroll",2);s([d.query(".content")],exports.DsDialog.prototype,"content",2);s([d.query("dialog")],exports.DsDialog.prototype,"nativeDialog",2);exports.DsDialog=s([v.customUiKitElement("ds-dialog")],exports.DsDialog);

package/dist/cjs/components/ds-dialog/styles/common.styles.cjs

@@ -1,33 +1,23 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../../../utils/cssQueries.cjs");require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),i=e.css`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../../../utils/cssQueries.cjs");require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),r=e.css`
     :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;
     }
@@ -69,4 +59,4 @@
             width: 8px;
         }
     }
-`;exports.commonStyles=i;
+`;exports.commonStyles=r;

package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs

@@ -1,4 +1,4 @@
 "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../core/theme.constants.cjs"),p=require("../../decorators/customUiKitElement.cjs"),f=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),y=require("../../utils/PubSub.cjs"),m=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const l=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs"),v=require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs"),h=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),u=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),$=require("../../styles/source/shared/fonts-config.cjs"),T=require("./themeContext.cjs");var b=Object.defineProperty,P=Object.getOwnPropertyDescriptor,d=(a,e,s,o)=>{for(var t=o>1?void 0:o?P(e,s):e,r=a.length-1,n;r>=0;r--)(n=a[r])&&(t=(o?n(e,s,t):n(t))||t);return o&&t&&b(e,s,t),t};exports.DsThemeProvider=class extends v.LitElement{constructor(){super(...arguments),this.loadFonts=!0,this.loadStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}updated(e){super.updated(e),e.has("theme")&&(y.pubSub.publish("theme",this.theme),sessionStorage==null||sessionStorage.setItem(c.THEME_STORAGE_KEY,this.theme),typeof FontFace<"u"&&(document!=null&&document.fonts)&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent("ui-kit:ready",{bubbles:!0,composed:!0}))}))}loadThemeFonts(){var e;(e=$.fontsConfig[this.theme])==null||e.fonts.forEach(s=>{this.loadThemeFont(s)})}async loadThemeFont({weight:e,name:s,file:o}){if(!this.loadFonts)return Promise.resolve();const t=`${s}-${e}`;if(this.loadedFonts.has(t))return;const r=new FontFace(s,`url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.woff2') format('woff2'),
             url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.woff') format('woff'),
             url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.ttf') format('truetype'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.otf') format('opentype')`,{style:"normal",weight:e,display:"swap"});try{await r.load(),document.fonts.add(r),this.loadedFonts.add(t)}catch(n){console.error(`Error loading "${s}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,s)=>{const o="/2.0.0-canary.85",t=`https://ds-assets.cupra.com${o}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${t}"]`))e();else{const r=`ui-kit-theme-${o}`,n=document.getElementById(r),i=document.createElement("link");i.id=r,i.rel="stylesheet",i.href=t,i.onload=()=>e(),i.onerror=()=>s(new Error(`Failed to load theme CSS: ${t}`)),document.head.appendChild(i),n==null||n.remove()}}):Promise.resolve()}render(){return this.cssLoaded?l.html`<slot></slot>`:l.nothing}};d([h.property({type:Boolean,converter:m.booleanConverter,attribute:"load-fonts"})],exports.DsThemeProvider.prototype,"loadFonts",2);d([h.property({type:Boolean,converter:m.booleanConverter,attribute:"load-styles"})],exports.DsThemeProvider.prototype,"loadStyles",2);d([f.provide({context:T.themeContext}),h.property({type:String})],exports.DsThemeProvider.prototype,"theme",2);d([u.state()],exports.DsThemeProvider.prototype,"cssLoaded",2);d([u.state()],exports.DsThemeProvider.prototype,"loadedFonts",2);exports.DsThemeProvider=d([p.customUiKitElement("ds-theme-provider")],exports.DsThemeProvider);
+            url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.otf') format('opentype')`,{style:"normal",weight:e,display:"swap"});try{await r.load(),document.fonts.add(r),this.loadedFonts.add(t)}catch(n){console.error(`Error loading "${s}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,s)=>{const o="/2.0.0-canary.87",t=`https://ds-assets.cupra.com${o}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${t}"]`))e();else{const r=`ui-kit-theme-${o}`,n=document.getElementById(r),i=document.createElement("link");i.id=r,i.rel="stylesheet",i.href=t,i.onload=()=>e(),i.onerror=()=>s(new Error(`Failed to load theme CSS: ${t}`)),document.head.appendChild(i),n==null||n.remove()}}):Promise.resolve()}render(){return this.cssLoaded?l.html`<slot></slot>`:l.nothing}};d([h.property({type:Boolean,converter:m.booleanConverter,attribute:"load-fonts"})],exports.DsThemeProvider.prototype,"loadFonts",2);d([h.property({type:Boolean,converter:m.booleanConverter,attribute:"load-styles"})],exports.DsThemeProvider.prototype,"loadStyles",2);d([f.provide({context:T.themeContext}),h.property({type:String})],exports.DsThemeProvider.prototype,"theme",2);d([u.state()],exports.DsThemeProvider.prototype,"cssLoaded",2);d([u.state()],exports.DsThemeProvider.prototype,"loadedFonts",2);exports.DsThemeProvider=d([p.customUiKitElement("ds-theme-provider")],exports.DsThemeProvider);

package/dist/cjs/utils/IconsManager.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../core/theme.constants.cjs"),l=require("./PubSub.cjs");class u{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;const n=Object.keys(this.icons);this.icons={},n.forEach(s=>this.fetchIcon(s))},this.fetchIcon=async(e,n={})=>{const s=typeof sessionStorage<"u"?sessionStorage==null?void 0:sessionStorage.getItem(r.THEME_STORAGE_KEY):null;!this.theme&&s&&(this.theme=s);const t=this.icons[e];if(t)return await t;const i=this.loadIcon(e,n).catch(a=>{throw delete this.icons[e],a});return this.icons[e]=i,i},this.loadIcon=(e,{cache:n="force-cache",...s})=>!this.theme||typeof fetch>"u"?Promise.resolve('<svg class="ds-icon"></svg>'):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:n,...s}).then(t=>t.text()).catch(t=>{if((t==null?void 0:t.name)==="AbortError")throw t;return console.error(`Failed to fetch icon "${e}":`,t),""}),l.pubSub.subscribe("theme",this.handleChangeTheme)}}const o=Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.85"),h=globalThis;let c=h[o];c||(c=new u,Object.defineProperty(h,o,{value:c,writable:!1,configurable:!1,enumerable:!1}));const f=c;exports.iconsManager=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../core/theme.constants.cjs"),l=require("./PubSub.cjs");class u{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;const n=Object.keys(this.icons);this.icons={},n.forEach(s=>this.fetchIcon(s))},this.fetchIcon=async(e,n={})=>{const s=typeof sessionStorage<"u"?sessionStorage==null?void 0:sessionStorage.getItem(r.THEME_STORAGE_KEY):null;!this.theme&&s&&(this.theme=s);const t=this.icons[e];if(t)return await t;const i=this.loadIcon(e,n).catch(a=>{throw delete this.icons[e],a});return this.icons[e]=i,i},this.loadIcon=(e,{cache:n="force-cache",...s})=>!this.theme||typeof fetch>"u"?Promise.resolve('<svg class="ds-icon"></svg>'):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:n,...s}).then(t=>t.text()).catch(t=>{if((t==null?void 0:t.name)==="AbortError")throw t;return console.error(`Failed to fetch icon "${e}":`,t),""}),l.pubSub.subscribe("theme",this.handleChangeTheme)}}const o=Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.87"),h=globalThis;let c=h[o];c||(c=new u,Object.defineProperty(h,o,{value:c,writable:!1,configurable:!1,enumerable:!1}));const f=c;exports.iconsManager=f;

package/dist/cjs/utils/PubSub.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class u{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(s,r){return this.subscribers[s]||(this.subscribers[s]=[]),this.subscribers[s].push(r),this.lastPublishedData[s]}unsubscribe(s,r){this.subscribers[s]&&(this.subscribers[s]=this.subscribers[s].filter(i=>i!==r))}publish(s,r){this.lastPublishedData[s]=r,this.subscribers[s]&&this.subscribers[s].forEach(i=>{try{i(r)}catch(c){console.error(`Error in subscriber for event "${s}":`,c)}})}}const t=Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.85"),e=globalThis;let b=e[t];b||(b=new u,Object.defineProperty(e,t,{value:b,writable:!1,configurable:!1,enumerable:!1}));const l=b;exports.PubSub=u;exports.pubSub=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class u{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(s,r){return this.subscribers[s]||(this.subscribers[s]=[]),this.subscribers[s].push(r),this.lastPublishedData[s]}unsubscribe(s,r){this.subscribers[s]&&(this.subscribers[s]=this.subscribers[s].filter(i=>i!==r))}publish(s,r){this.lastPublishedData[s]=r,this.subscribers[s]&&this.subscribers[s].forEach(i=>{try{i(r)}catch(c){console.error(`Error in subscriber for event "${s}":`,c)}})}}const t=Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.87"),e=globalThis;let b=e[t];b||(b=new u,Object.defineProperty(e,t,{value:b,writable:!1,configurable:!1,enumerable:!1}));const l=b;exports.PubSub=u;exports.pubSub=l;

package/dist/cjs/utils/StylesRegistry/StylesRegistry.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../concurrencyLimit.cjs"),a=o.concurrencyLimit(20);class s{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:e,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});if(r)return r;const i=a(()=>this.fetchStyle({url:c})).then(n=>(n||this.stylePromises.delete(c),n));return this.stylePromises.set(c,i),this.stylePromises.get(c)}}async fetchStyle({url:e}){try{if(typeof fetch>"u")return;const t=await fetch(e,{cache:"force-cache"});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return s.instance||(s.instance=new s),s.instance}}const h=s.getInstance();exports.stylesRegistry=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../concurrencyLimit.cjs"),a=o.concurrencyLimit(20);class s{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:e,theme:t})=>{if(!t||!e)return;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=a(()=>this.fetchStyle({url:c})).then(n=>(n||this.stylePromises.delete(c),n));return this.stylePromises.set(c,i),this.stylePromises.get(c)}}async fetchStyle({url:e}){try{if(typeof fetch>"u")return;const t=await fetch(e,{cache:"force-cache"});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return s.instance||(s.instance=new s),s.instance}}const h=s.getInstance();exports.stylesRegistry=h;

package/dist/cjs/utils/cssWithTokens.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");function i(r,...t){const s=String.raw({raw:r},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-85"),n=e.unsafeCSS(s);return e.css`${n}`}exports.cssWithTokens=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");function i(r,...t){const s=String.raw({raw:r},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-87"),n=e.unsafeCSS(s);return e.css`${n}`}exports.cssWithTokens=i;

package/dist/cjs/utils/htmlWithTokens.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const i=require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const o=require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.cjs");function a(e,...t){const r=String.raw({raw:e},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-85"),n=o.unsafeHTML(r);return i.html`${n}`}exports.htmlWithTokens=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const i=require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const o=require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.cjs");function a(e,...t){const r=String.raw({raw:e},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-87"),n=o.unsafeHTML(r);return i.html`${n}`}exports.htmlWithTokens=a;

package/dist/esm/components/ds-checkbox/ds-checkbox.js

@@ -11,13 +11,13 @@ import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-
 import { property as i } 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 { classMap as E } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as $ } from "./styles/common.styles.js";
-var C = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (r, o, n, p) => {
-  for (var s = p > 1 ? void 0 : p ? _(o, n) : o, l = r.length - 1, d; l >= 0; l--)
-    (d = r[l]) && (s = (p ? d(o, n, s) : d(s)) || s);
-  return p && s && C(o, n, s), s;
+import { commonStyles as _ } from "./styles/common.styles.js";
+var $ = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (e, o, n, p) => {
+  for (var s = p > 1 ? void 0 : p ? C(o, n) : o, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (s = (p ? d(o, n, s) : d(s)) || s);
+  return p && s && $(o, n, s), s;
 };
-let e = class extends k(u) {
+let t = class extends k(u) {
   constructor() {
     super(...arguments), this.inputPlacement = "left", this.checked = !1, this.required = !1, this._disabled = !1, this.mode = "light", this._size = "medium", this.helperText = "", this.infoText = "", this._forcedError = "", this.invalidError = "", this.indeterminate = !1;
   }
@@ -26,28 +26,28 @@ let e = class extends k(u) {
       this.createContextConsumers([
         {
           context: b,
-          callback: (r) => {
-            this.disabledGroup = r;
+          callback: (e) => {
+            this.disabledGroup = e;
           }
         },
         {
           context: f,
-          callback: (r) => {
-            this.errorGroup = r;
+          callback: (e) => {
+            this.errorGroup = e;
           }
         },
         {
           context: v,
-          callback: (r) => {
-            this.sizeGroup = r;
+          callback: (e) => {
+            this.sizeGroup = e;
           }
         }
       ]);
     });
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  createContextConsumers(r) {
-    r.forEach(({ context: o, callback: n }) => {
+  createContextConsumers(e) {
+    e.forEach(({ context: o, callback: n }) => {
       new x(this, {
         context: o,
         callback: n,
@@ -58,17 +58,26 @@ let e = class extends k(u) {
   get disabled() {
     return this.disabledGroup ?? this._disabled;
   }
+  set disabled(e) {
+    this._disabled = e;
+  }
   get size() {
     return this.sizeGroup || this._size;
   }
+  set size(e) {
+    this._size = e;
+  }
   get forcedError() {
     return this._forcedError;
   }
+  set forcedError(e) {
+    this._forcedError = e;
+  }
   get error() {
     return this.errorGroup ?? !!this._forcedError;
   }
-  handleChange(r) {
-    const o = r.target;
+  handleChange(e) {
+    const o = e.target;
     this.checked = o.checked, this.dispatchEvent(
       new CustomEvent("change", {
         bubbles: !0,
@@ -93,10 +102,10 @@ let e = class extends k(u) {
   }
   get iconTemplate() {
     if (!this.checked) return c;
-    const r = this.indeterminate ? "minus" : "check";
+    const e = this.indeterminate ? "minus" : "check";
     return this.componentFactory.createIcon({
       class: "icon",
-      "icon-name": r
+      "icon-name": e
     });
   }
   get styleTokens() {
@@ -143,58 +152,58 @@ let e = class extends k(u) {
         `;
   }
 };
-e.styles = [$];
-t([
+t.styles = [_];
+r([
   i({ type: String })
-], e.prototype, "name", 2);
-t([
+], t.prototype, "name", 2);
+r([
   i({ type: String })
-], e.prototype, "value", 2);
-t([
+], t.prototype, "value", 2);
+r([
   i({ type: String, attribute: "input-placement" })
-], e.prototype, "inputPlacement", 2);
-t([
+], t.prototype, "inputPlacement", 2);
+r([
   i({ type: Boolean, converter: h, reflect: !0 })
-], e.prototype, "checked", 2);
-t([
+], t.prototype, "checked", 2);
+r([
   i({ type: Boolean, converter: h })
-], e.prototype, "required", 2);
-t([
+], t.prototype, "required", 2);
+r([
   i({ type: Boolean, converter: h, attribute: "disabled" })
-], e.prototype, "_disabled", 2);
-t([
+], t.prototype, "_disabled", 2);
+r([
   i({ type: String, reflect: !0 })
-], e.prototype, "mode", 2);
-t([
+], t.prototype, "mode", 2);
+r([
   i({ type: String, attribute: "size" })
-], e.prototype, "_size", 2);
-t([
+], t.prototype, "_size", 2);
+r([
   i({ type: String, attribute: "helper-text" })
-], e.prototype, "helperText", 2);
-t([
+], t.prototype, "helperText", 2);
+r([
   i({ type: String, attribute: "info-text" })
-], e.prototype, "infoText", 2);
-t([
+], t.prototype, "infoText", 2);
+r([
   i({ type: String, attribute: "forced-error" })
-], e.prototype, "_forcedError", 2);
-t([
+], t.prototype, "_forcedError", 2);
+r([
   i({ type: String, attribute: "invalid-error" })
-], e.prototype, "invalidError", 2);
-t([
+], t.prototype, "invalidError", 2);
+r([
   i({ type: Boolean, converter: h })
-], e.prototype, "indeterminate", 2);
-t([
+], t.prototype, "indeterminate", 2);
+r([
   m()
-], e.prototype, "disabledGroup", 2);
-t([
+], t.prototype, "disabledGroup", 2);
+r([
   m()
-], e.prototype, "errorGroup", 2);
-t([
+], t.prototype, "errorGroup", 2);
+r([
   m()
-], e.prototype, "sizeGroup", 2);
-e = t([
+], t.prototype, "sizeGroup", 2);
+t = r([
   y("ds-checkbox")
-], e);
+], t);
 export {
-  e as DsCheckbox
+  t as DsCheckbox
 };

package/dist/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
 };