@cupra/ui-kit 2.0.0-canary.230 → 2.0.0-canary.232

package/dist-react/cjs/components/ds-date-picker/styles/cupra-diagonal.styles.cjs

@@ -0,0 +1,202 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host([data-ui-kit-theme='cupra-diagonal']):has(.disabled),
+    :host([data-ui-kit-theme='cupra-diagonal']):has(.readonly) {
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        position: relative;
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-3);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.focus-visible {
+        outline: 0.125rem solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.125rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(label) {
+        color: var(--ds-field-text-color-label-default, #c3c3cb);
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large ::slotted(label) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium ::slotted(label) {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled ::slotted(label) {
+        color: var(--ds-field-text-color-label-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .readonly ::slotted(label) {
+        color: var(--ds-field-text-color-label-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(input) {
+        width: 100%;
+        box-sizing: border-box;
+        flex: 1 0 0;
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+        color-scheme: dark;
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        border: none;
+        outline: none;
+        background: transparent;
+        cursor: text;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .focus:not(.filled) ::slotted(input) {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .filled ::slotted(input) {
+        color: var(--ds-field-text-color-input-default, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(input:disabled) {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .readonly ::slotted(input) {
+        color: var(--ds-field-text-color-placeholder-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large ::slotted(input) {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+        height: var(--ds-sizing-48, 48px);
+        padding: var(--ds-spacing-m-1) 0;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium ::slotted(input) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+        height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-5) 0;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .input-container {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        width: 100%;
+        padding: var(--ds-spacing-s-5) var(--ds-spacing-s-5) 0 var(--ds-spacing-m-1);
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-radius: var(--ds-border-radius-xxs) var(--ds-border-radius-xxs) var(--ds-border-radius-none)
+            var(--ds-border-radius-none);
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-default, #aeaeb7);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .input-container {
+        padding-left: var(--ds-spacing-s-5);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .input-container > div {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .input-container:hover,
+    :host([data-ui-kit-theme='cupra-diagonal']) .focus-visible .input-container {
+        background: var(--ds-field-bg-color-hover, rgba(195, 195, 203, 0.1));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .focus:not(.focus-visible) .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-selected, #b2764d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .filled .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-filled, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.error .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.invalid .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-error, #ff403d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled.error .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled.invalid .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .readonly .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-default, #aeaeb7);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .footer {
+        box-sizing: border-box;
+        display: flex;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: var(--ds-spacing-s-5, 8px);
+        overflow: hidden;
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .footer {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+        padding: var(--ds-spacing-s-1, 0) var(--ds-spacing-s-5, 8px) var(--ds-spacing-s-1, 0)
+            var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .footer {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+        padding: var(--ds-spacing-s-1, 0) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .support-text {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .helper-text,
+    :host([data-ui-kit-theme='cupra-diagonal']) .readonly-text {
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .error-text {
+        color: var(--ds-field-text-color-caption-error, #ff403d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled .support-text {
+        color: var(--ds-field-text-color-caption-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .readonly .support-text {
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .calendar-dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 10;
+        margin-top: var(--ds-spacing-s-3, 4px);
+    }
+`;exports.cupraDiagonalStyles=t;

package/dist-react/cjs/components/ds-date-picker/styles/seat.styles.cjs

@@ -0,0 +1,201 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host([data-ui-kit-theme='seat']):has(.disabled),
+    :host([data-ui-kit-theme='seat']):has(.readonly) {
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        position: relative;
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-3);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.focus-visible {
+        outline: 0.125rem solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.125rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted(label) {
+        color: var(--ds-field-text-color-label-default, #c3c3cb);
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat']) .large ::slotted(label) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    :host([data-ui-kit-theme='seat']) .medium ::slotted(label) {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    :host([data-ui-kit-theme='seat']) .disabled ::slotted(label) {
+        color: var(--ds-field-text-color-label-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .readonly ::slotted(label) {
+        color: var(--ds-field-text-color-label-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted(input) {
+        width: 100%;
+        box-sizing: border-box;
+        flex: 1 0 0;
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        border: none;
+        outline: none;
+        background: transparent;
+        cursor: text;
+    }
+
+    :host([data-ui-kit-theme='seat']) .focus:not(.filled) ::slotted(input) {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .filled ::slotted(input) {
+        color: var(--ds-field-text-color-input-default, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted(input:disabled) {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .readonly ::slotted(input) {
+        color: var(--ds-field-text-color-placeholder-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) .large ::slotted(input) {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+        height: var(--ds-sizing-48, 48px);
+        padding: var(--ds-spacing-m-1) 0;
+    }
+
+    :host([data-ui-kit-theme='seat']) .medium ::slotted(input) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+        height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-5) 0;
+    }
+
+    :host([data-ui-kit-theme='seat']) .input-container {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        width: 100%;
+        padding: var(--ds-spacing-s-5) var(--ds-spacing-s-5) 0 var(--ds-spacing-m-1);
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-radius: var(--ds-border-radius-xxs) var(--ds-border-radius-xxs) var(--ds-border-radius-none)
+            var(--ds-border-radius-none);
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-default, #aeaeb7);
+    }
+
+    :host([data-ui-kit-theme='seat']) .medium .input-container {
+        padding-left: var(--ds-spacing-s-5);
+    }
+
+    :host([data-ui-kit-theme='seat']) .input-container > div {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='seat']) .input-container:hover,
+    :host([data-ui-kit-theme='seat']) .focus-visible .input-container {
+        background: var(--ds-field-bg-color-hover, rgba(195, 195, 203, 0.1));
+    }
+
+    :host([data-ui-kit-theme='seat']) .focus:not(.focus-visible) .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-selected, #b2764d);
+    }
+
+    :host([data-ui-kit-theme='seat']) .filled .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-filled, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.error .input-container,
+    :host([data-ui-kit-theme='seat']) .container.invalid .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-error, #ff403d);
+    }
+
+    :host([data-ui-kit-theme='seat']) .disabled .input-container,
+    :host([data-ui-kit-theme='seat']) .disabled.error .input-container,
+    :host([data-ui-kit-theme='seat']) .disabled.invalid .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .readonly .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-default, #aeaeb7);
+    }
+
+    :host([data-ui-kit-theme='seat']) .footer {
+        box-sizing: border-box;
+        display: flex;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: var(--ds-spacing-s-5, 8px);
+        overflow: hidden;
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='seat']) .large .footer {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+        padding: var(--ds-spacing-s-1, 0) var(--ds-spacing-s-5, 8px) var(--ds-spacing-s-1, 0)
+            var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .medium .footer {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+        padding: var(--ds-spacing-s-1, 0) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .support-text {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='seat']) .helper-text,
+    :host([data-ui-kit-theme='seat']) .readonly-text {
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) .error-text {
+        color: var(--ds-field-text-color-caption-error, #ff403d);
+    }
+
+    :host([data-ui-kit-theme='seat']) .disabled .support-text {
+        color: var(--ds-field-text-color-caption-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .readonly .support-text {
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) .calendar-dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 10;
+        margin-top: var(--ds-spacing-s-3, 4px);
+    }
+`;exports.seatStyles=t;

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

@@ -1,4 +1,4 @@
-const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const i=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),a=require("../base/UiKitElement.cjs"),o=require("../../decorators/customUiKitElement.cjs"),s=require("../../utils/booleanConverter.cjs"),c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const l=require("../../utils/debounce.cjs"),u=require("../../utils/scrollLock.cjs"),d=require("./styles/common.styles.cjs");var f=class extends a.UiKitElement{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=l.debounce({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?(u.scrollLock.lock(),this.scrollLocked=!0):this.scrollLocked&&(u.scrollLock.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&&(u.scrollLock.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.nothing:e.html`
+const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const i=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),a=require("../base/UiKitElement.cjs"),o=require("../../decorators/customUiKitElement.cjs"),s=require("../../utils/booleanConverter.cjs"),c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const l=require("../../utils/debounce.cjs"),u=require("../../utils/scrollLock.cjs"),d=require("./styles/common.styles.cjs"),f=require("./styles/cupra-diagonal.styles.cjs"),p=require("./styles/seat-legacy.styles.cjs"),m=require("./styles/seat.styles.cjs");var h=class extends a.UiKitElement{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=l.debounce({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?(u.scrollLock.lock(),this.scrollLocked=!0):this.scrollLocked&&(u.scrollLock.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&&(u.scrollLock.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.nothing:e.html`
             <dialog
                 class="dialog"
                 data-testid="ds-dialog-container"
@@ -17,4 +17,4 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                     </div>
                 </div>
             </dialog>
-        `}},p=(f.styles=[d.commonStyles],f);i.default([t.property({type:Boolean,converter:s.booleanConverter,attribute:`lock-close`})],p.prototype,`lockClose`,void 0),i.default([t.property({type:Boolean,converter:s.booleanConverter,attribute:`lock-scroll`})],p.prototype,`lockScroll`,void 0),i.default([t.property({type:Boolean,attribute:`open`,converter:s.booleanConverter})],p.prototype,`_open`,void 0),i.default([n.state()],p.prototype,`_openState`,void 0),i.default([t.property({type:String})],p.prototype,`size`,void 0),i.default([t.property({type:String,attribute:`data-aria-label`})],p.prototype,`dataAriaLabel`,void 0),i.default([t.property({type:String,attribute:`data-aria-description`})],p.prototype,`dataAriaDescription`,void 0),i.default([n.state()],p.prototype,`hasBeenOpened`,void 0),i.default([n.state()],p.prototype,`hasScroll`,void 0),i.default([r.query(`.content`)],p.prototype,`content`,void 0),i.default([r.query(`dialog`)],p.prototype,`nativeDialog`,void 0),p=i.default([o.customUiKitElement(`ds-dialog`)],p),Object.defineProperty(exports,"DsDialog",{enumerable:!0,get:function(){return p}});
+        `}},g=(h.styles=[d.commonStyles,f.cupraDiagonalStyles,m.seatStyles,p.seatLegacyStyles],h);i.default([t.property({type:Boolean,converter:s.booleanConverter,attribute:`lock-close`})],g.prototype,`lockClose`,void 0),i.default([t.property({type:Boolean,converter:s.booleanConverter,attribute:`lock-scroll`})],g.prototype,`lockScroll`,void 0),i.default([t.property({type:Boolean,attribute:`open`,converter:s.booleanConverter})],g.prototype,`_open`,void 0),i.default([n.state()],g.prototype,`_openState`,void 0),i.default([t.property({type:String})],g.prototype,`size`,void 0),i.default([t.property({type:String,attribute:`data-aria-label`})],g.prototype,`dataAriaLabel`,void 0),i.default([t.property({type:String,attribute:`data-aria-description`})],g.prototype,`dataAriaDescription`,void 0),i.default([n.state()],g.prototype,`hasBeenOpened`,void 0),i.default([n.state()],g.prototype,`hasScroll`,void 0),i.default([r.query(`.content`)],g.prototype,`content`,void 0),i.default([r.query(`dialog`)],g.prototype,`nativeDialog`,void 0),g=i.default([o.customUiKitElement(`ds-dialog`)],g),Object.defineProperty(exports,"DsDialog",{enumerable:!0,get:function(){return g}});

package/dist-react/cjs/components/ds-dialog/styles/cupra-diagonal.styles.cjs

@@ -0,0 +1,96 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host([data-ui-kit-theme='cupra-diagonal']) .dialog {
+        box-sizing: border-box;
+        padding: var(--ds-spacing-m-2);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .dialog::backdrop {
+        background-color: var(--ds-color-bg-overlay);
+        -webkit-backdrop-filter: blur(0.75rem);
+        backdrop-filter: blur(0.75rem);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .panel {
+        background: transparent;
+        border: none;
+        display: flex;
+        gap: var(--ds-spacing-s-5);
+        flex-direction: column;
+        align-items: flex-end;
+        box-sizing: border-box;
+        width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .content-container {
+        flex: 1 1 auto;
+        align-self: stretch;
+        padding: var(--ds-spacing-layout-l) var(--ds-spacing-m-3);
+        border-radius: var(--ds-border-radius-m);
+        background-color: var(--ds-color-surface-elevated);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .with-scroll .content {
+        padding-right: var(--ds-spacing-layout-s);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ds-spacing-layout-s);
+        flex: 1;
+        overflow: auto;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='footer']) {
+        flex-shrink: 0;
+        margin-top: var(--ds-spacing-layout-m);
+    }
+
+    @media (min-width: 480px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .dialog {
+            padding: var(--ds-spacing-m-2) var(--ds-spacing-m-4);
+        }
+        :host([data-ui-kit-theme='cupra-diagonal']) .content-container {
+            padding: var(--ds-spacing-layout-l);
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-2);
+        }
+        :host([data-ui-kit-theme='cupra-diagonal']) .panel {
+            flex-direction: row-reverse;
+            align-items: flex-start;
+        }
+        :host([data-ui-kit-theme='cupra-diagonal']) .panel.small {
+            width: 32.75rem;
+        }
+        :host([data-ui-kit-theme='cupra-diagonal']) .panel.medium {
+            width: 41.75rem;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-4);
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-9);
+        }
+        :host([data-ui-kit-theme='cupra-diagonal']) .panel.large {
+            width: 78.5rem;
+        }
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll::-webkit-scrollbar-thumb,
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll-global *::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-color: var(--ds-opacity-white-70);
+    }
+`;exports.cupraDiagonalStyles=t;

package/dist-react/cjs/components/ds-dialog/styles/seat-legacy.styles.cjs

@@ -0,0 +1,100 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host([data-ui-kit-theme='seat-legacy']) .dialog {
+        box-sizing: border-box;
+        padding: var(--ds-spacing-m-2);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .dialog::backdrop {
+        background-color: var(--ds-color-bg-overlay);
+        -webkit-backdrop-filter: blur(0.75rem);
+        backdrop-filter: blur(0.75rem);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .panel {
+        background: transparent;
+        border: none;
+        display: flex;
+        gap: var(--ds-spacing-s-5);
+        flex-direction: column;
+        align-items: flex-end;
+        box-sizing: border-box;
+        width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .content-container {
+        flex: 1 1 auto;
+        align-self: stretch;
+        padding: var(--ds-spacing-layout-l) var(--ds-spacing-m-3);
+        border-radius: var(--ds-border-radius-m);
+        background-color: var(--ds-color-surface-elevated);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .with-scroll .content {
+        padding-right: var(--ds-spacing-layout-s);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ds-spacing-layout-s);
+        flex: 1;
+        overflow: auto;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='footer']) {
+        flex-shrink: 0;
+        margin-top: var(--ds-spacing-layout-m);
+    }
+
+    @media (min-width: 480px) {
+        :host([data-ui-kit-theme='seat-legacy']) .dialog {
+            padding: var(--ds-spacing-m-2) var(--ds-spacing-m-4);
+        }
+        :host([data-ui-kit-theme='seat-legacy']) .content-container {
+            padding: var(--ds-spacing-layout-l);
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat-legacy']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-2);
+        }
+        :host([data-ui-kit-theme='seat-legacy']) .panel {
+            flex-direction: row-reverse;
+            align-items: flex-start;
+        }
+        :host([data-ui-kit-theme='seat-legacy']) .panel.small {
+            width: 32.75rem;
+        }
+        :host([data-ui-kit-theme='seat-legacy']) .panel.medium {
+            width: 41.75rem;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        :host([data-ui-kit-theme='seat-legacy']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-4);
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='seat-legacy']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-9);
+        }
+        :host([data-ui-kit-theme='seat-legacy']) .panel.large {
+            width: 78.5rem;
+        }
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll::-webkit-scrollbar-thumb,
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll-global *::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-color: var(--ds-opacity-white-70);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='close-button']) {
+        --dg-icon-button-border-radius-base: var(--dg-border-radius-full);
+    }
+`;exports.seatLegacyStyles=t;