@cupra/ui-kit 2.0.0-canary.236 → 2.0.0-canary.238

package/dist/esm/components/ds-date-picker/styles/common.styles.js

@@ -5,6 +5,206 @@ var t = e`
     :host {
         display: contents;
     }
+
+    :host:has(.disabled),
+    :host:has(.readonly) {
+        pointer-events: none;
+    }
+
+    :host .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 .container.focus-visible {
+        outline: 0.125rem solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.125rem;
+    }
+
+    :host ::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 .large ::slotted(label) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    :host .medium ::slotted(label) {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    :host .disabled ::slotted(label) {
+        color: var(--ds-field-text-color-label-disabled, #5a5c67);
+    }
+
+    :host .readonly ::slotted(label) {
+        color: var(--ds-field-text-color-label-default, #c3c3cb);
+    }
+
+    :host ::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 .focus:not(.filled) ::slotted(input) {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host .filled ::slotted(input) {
+        color: var(--ds-field-text-color-input-default, #fafafa);
+    }
+
+    :host ::slotted(input:disabled) {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host .readonly ::slotted(input) {
+        color: var(--ds-field-text-color-placeholder-default, #c3c3cb);
+    }
+
+    :host .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 .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 .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 .medium .input-container {
+        padding-left: var(--ds-spacing-s-5);
+    }
+
+    :host .input-container > div {
+        flex: 1 1 auto;
+    }
+
+    :host .input-container:hover,
+    :host .focus-visible .input-container {
+        background: var(--ds-field-bg-color-hover, rgba(195, 195, 203, 0.1));
+    }
+
+    :host .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 .filled .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-filled, #fafafa);
+    }
+
+    :host .container.error .input-container,
+    :host .container.invalid .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-error, #ff403d);
+    }
+
+    :host .disabled .input-container,
+    :host .disabled.error .input-container,
+    :host .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 .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 .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 .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 .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 .support-text {
+        flex: 1 1 auto;
+    }
+
+    :host .helper-text,
+    :host .readonly-text {
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+    }
+
+    :host .error-text {
+        color: var(--ds-field-text-color-caption-error, #ff403d);
+    }
+
+    :host .disabled .support-text {
+        color: var(--ds-field-text-color-caption-disabled, #5a5c67);
+    }
+
+    :host .readonly .support-text {
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+    }
+
+    :host .calendar-dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 10;
+        margin-top: var(--ds-spacing-s-3, 4px);
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist/esm/components/ds-list-item/ds-list-item.js

@@ -9,10 +9,8 @@ import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
 import { classMap as s } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
 import { commonStyles as c } from "./styles/common.styles.js";
-import { cupraDiagonalStyles as l } from "./styles/cupra-diagonal.styles.js";
-import { seatStyles as u } from "./styles/seat.styles.js";
 //#region src/components/ds-list-item/ds-list-item.ts
-var d = class extends i {
+var l = class extends i {
 	constructor(...e) {
 		super(...e), this.variant = "selection", this.selected = !1, this.disabled = !1, this.size = "large";
 	}
@@ -88,23 +86,19 @@ var d = class extends i {
             ${n ? o`<ds-divider orientation="horizontal" variant="primary" role="presentation"></ds-divider>` : t}
         `;
 	}
-}, f = (d.styles = [
-	c,
-	l,
-	u
-], d);
+}, u = (l.styles = [c], l);
 r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "variant", void 0), r([n({
+})], u.prototype, "variant", void 0), r([n({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "selected", void 0), r([n({
+})], u.prototype, "selected", void 0), r([n({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "disabled", void 0), r([n({
+})], u.prototype, "disabled", void 0), r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "size", void 0), f = r([a("ds-list-item")], f);
+})], u.prototype, "size", void 0), u = r([a("ds-list-item")], u);
 //#endregion
-export { f as DsListItem };
+export { u as DsListItem };

package/dist/esm/components/ds-list-item/styles/common.styles.js

@@ -6,6 +6,123 @@ var t = e`
         display: block;
         width: fit-content;
     }
+
+    :host .content {
+        display: flex;
+        align-items: center;
+        padding: var(--ds-sizing-08) 0;
+        font-family: var(--ds-typography-family-primary);
+        font-weight: 400;
+        gap: var(--ds-sizing-08);
+    }
+
+    :host .container {
+        display: flex;
+        gap: var(--ds-sizing-08);
+    }
+
+    :host .container-text {
+        padding-right: var(--ds-sizing-24);
+    }
+
+    :host .content.info-variant,
+    :host .content.action-variant {
+        padding: var(--ds-sizing-08);
+    }
+
+    :host ::slotted([slot='input-left']),
+    :host ::slotted([slot='input-right']) {
+        width: unset;
+    }
+
+    :host ::slotted([slot='primary-text']) {
+        color: var(--ds-color-text-default-subtlest);
+    }
+
+    :host ::slotted([slot='primary-subtext']),
+    :host ::slotted([slot='secondary-text']),
+    :host ::slotted([slot='description-text']) {
+        color: var(--ds-color-text-default-subtle);
+    }
+
+    :host ::slotted([slot='description-text']) {
+        padding-top: var(--ds-sizing-08);
+    }
+
+    :host([size='large']) ::slotted([slot='image-square']) {
+        width: var(--ds-sizing-48);
+        height: var(--ds-sizing-48);
+    }
+
+    :host([size='medium']) ::slotted([slot='image-square']) {
+        width: var(--ds-sizing-32);
+        height: var(--ds-sizing-32);
+    }
+
+    :host ::slotted([slot='image-wide']) {
+        -o-object-fit: cover;
+        object-fit: cover;
+    }
+
+    :host([size='large']) ::slotted([slot='image-wide']) {
+        width: var(--ds-sizing-96);
+        height: var(--ds-sizing-48);
+    }
+
+    :host([size='medium']) ::slotted([slot='image-wide']) {
+        width: var(--ds-sizing-64);
+        height: var(--ds-sizing-32);
+    }
+
+    :host([size='medium']) ::slotted([slot='primary-text']),
+    :host([size='medium']) ::slotted([slot='secondary-text']),
+    :host([size='medium']) ::slotted([slot='description-text']),
+    :host([size='medium']) ::slotted([slot='primary-subtext']),
+    :host([size='medium']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    :host([size='large']) ::slotted([slot='primary-text']),
+    :host([size='large']) ::slotted([slot='secondary-text']),
+    :host([size='large']) ::slotted([slot='description-text']),
+    :host([size='large']) ::slotted([slot='primary-subtext']),
+    :host([size='large']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    :host([size='small']) ::slotted([slot='primary-text']),
+    :host([size='small']) ::slotted([slot='secondary-text']),
+    :host([size='small']) ::slotted([slot='description-text']),
+    :host([size='small']) ::slotted([slot='primary-subtext']),
+    :host([size='small']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    :host .content:hover {
+        background: var(--ds-color-control-bg-hover);
+    }
+
+    :host .content:active {
+        background: var(--ds-color-control-bg-pressed);
+    }
+
+    :host .content:focus-visible {
+        outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        background-color: var(--ds-color-control-bg-hover);
+    }
+
+    :host .selected {
+        background: var(--ds-color-control-bg-default);
+        border-left: var(--ds-sizing-04) solid var(--ds-color-border-selected);
+    }
+
+    :host .disabled {
+        opacity: 0.25;
+        pointer-events: none;
+    }
 `;
 //#endregion
 export { t as commonStyles };

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

@@ -53,7 +53,7 @@ var f = class extends a {
 		}
 	}
 	loadThemeStyles() {
-		let e = "/2.0.0-canary.236";
+		let e = "/2.0.0-canary.238";
 		return this.loadUnusedStyles && this.applyUnusedStyles(e), this.loadStyles ? new Promise((t, n) => {
 			let r = `https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;
 			if (document.head.querySelector(`link[href="${r}"]`)) t();

package/dist/esm/decorators/customUiKitElement.js

@@ -8,7 +8,7 @@ function e(e) {
 		(n = globalThis) != null && (n = n.customElements) != null && n.get(a) || (r = globalThis) == null || (r = r.customElements) == null || (i = r.define) == null || i.call(r, a, class extends t {
 			connectedCallback() {
 				var n;
-				(n = t.prototype.connectedCallback) == null || n.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.236"), this.setAttribute("data-ui-kit-component-name", e);
+				(n = t.prototype.connectedCallback) == null || n.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.238"), this.setAttribute("data-ui-kit-component-name", e);
 			}
 		});
 	};

package/dist/esm/utils/IconsManager.js

@@ -26,7 +26,7 @@ var n = class {
 			return console.error(`Failed to fetch icon "${e}":`, t), "";
 		}), t.subscribe("theme", this.handleChangeTheme);
 	}
-}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.236"), i = globalThis, a = i[r];
+}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.238"), i = globalThis, a = i[r];
 a || (a = new n(), Object.defineProperty(i, r, {
 	value: a,
 	writable: !1,

package/dist/esm/utils/PubSub.js

@@ -18,7 +18,7 @@ var e = class {
 			}
 		});
 	}
-}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.236"), n = globalThis, r = n[t];
+}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.238"), n = globalThis, r = n[t];
 r || (r = new e(), Object.defineProperty(n, t, {
 	value: r,
 	writable: !1,

package/dist/esm/utils/version.js

@@ -1,4 +1,4 @@
 //#region src/utils/version.ts
-var e = "2.0.0-canary.236", t = `--v${e.replaceAll(".", "-")}`;
+var e = "2.0.0-canary.238", t = `--v${e.replaceAll(".", "-")}`;
 //#endregion
 export { e as VERSION, t as VERSION_TAG_SUFFIX };

package/dist-react/cjs/components/ds-chips/styles/common.styles.cjs

@@ -10,23 +10,12 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         box-sizing: border-box;
         display: inline-flex;
         justify-content: flex-start;
-        overflow-y: auto;
+        overflow-x: auto;
+        overflow-y: hidden;
         scrollbar-width: none;
         scroll-behavior: smooth;
     }
 
-    //.chips-container.scroll-left.scroll-right {
-    //    mask-image: linear-gradient(
-    //        to right,
-    //        rgba(0, 0, 0, 0) 0px,
-    //        rgba(0, 0, 0, 0) 32px,
-    //        rgba(0, 0, 0, 1) 48px,
-    //        rgba(0, 0, 0, 1) calc(100% - 48px),
-    //        rgba(0, 0, 0, 0) calc(100% - 32px),
-    //        rgba(0, 0, 0, 0) 100%
-    //    );
-    //}
-
     .chips-container::-webkit-scrollbar {
         display: none;
     }

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

@@ -6,6 +6,5 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='cupra-diagonal']) .chips-container {
         gap: 0.5rem;
         border-radius: var(--ds-border-radius-full, 100000px);
-        overflow: hidden;
     }
 `;exports.cupraDiagonalStyles=t;

package/dist-react/cjs/components/ds-chips/styles/seat.styles.cjs

@@ -6,6 +6,5 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='seat']) .chips-container {
         gap: 0.5rem;
         border-radius: var(--ds-border-radius-full, 100000px);
-        overflow: hidden;
     }
 `;exports.seatStyles=t;

package/dist-react/cjs/components/ds-date-picker/ds-date-picker.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");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const r=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs"),o=require("../../utils/uiKitHtml.cjs"),s=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 c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs"),require("../ds-icon-button/ds-icon-button.cjs");const l=require("../../mixins/inputStatesMixin.cjs"),u=require("./styles/common.styles.cjs"),d=require("./styles/cupra-diagonal.styles.cjs"),f=require("./styles/seat.styles.cjs");var p=class extends l.inputStatesMixin(i.UiKitElement){constructor(...e){super(...e),this.size=`large`,this.helperText=``,this.forcedError=``,this.invalidError=``,this.readonlyText=``,this.dataAriaLabelCalendarButton=``,this.isExpanded=!1,this.syncCalendarValue=()=>{let e=this.calendarElement;if(e){var t;e.value=((t=this.nativeInput)==null?void 0:t.value)||void 0}},this.handleCalendarButtonClick=()=>{this.inputStates.disabled||this.inputStates.readonly||(this.isExpanded=!this.isExpanded)},this.handleCalendarChange=e=>{e.stopPropagation();let t=e.detail.value;this.nativeInput&&(this.nativeInput.value=t,this.nativeInput.dispatchEvent(new Event(`input`,{bubbles:!0}))),this.isExpanded=!1},this.handleDocumentClick=e=>{this.isExpanded&&!this.contains(e.target)&&(this.isExpanded=!1)}}get calendarElement(){return this.querySelector(`[slot="calendar"]`)}onInputReady(e){this.syncCalendarValue(),e.addEventListener(`input`,this.syncCalendarValue)}connectedCallback(){super.connectedCallback(),this.classList.add(`ds-date-picker`),document.addEventListener(`click`,this.handleDocumentClick),this.addEventListener(`ds-calendar-change`,this.handleCalendarChange),m.injectNativeInputStyles()}static injectNativeInputStyles(){if(m.nativeStylesInjected)return;m.nativeStylesInjected=!0;let e=document.createElement(`style`);e.textContent=[`.ds-date-picker input[type="date"]::-webkit-calendar-picker-indicator { display: none !important; }`,`.ds-date-picker input[type="date"]::-webkit-inner-spin-button { display: none !important; }`].join(`
+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");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const r=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs"),o=require("../../utils/uiKitHtml.cjs"),s=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 c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs"),require("../ds-icon-button/ds-icon-button.cjs");const l=require("../../mixins/inputStatesMixin.cjs"),u=require("./styles/common.styles.cjs");var d=class extends l.inputStatesMixin(i.UiKitElement){constructor(...e){super(...e),this.size=`large`,this.helperText=``,this.forcedError=``,this.invalidError=``,this.readonlyText=``,this.dataAriaLabelCalendarButton=``,this.isExpanded=!1,this.syncCalendarValue=()=>{let e=this.calendarElement;if(e){var t;e.value=((t=this.nativeInput)==null?void 0:t.value)||void 0}},this.handleCalendarButtonClick=()=>{this.inputStates.disabled||this.inputStates.readonly||(this.isExpanded=!this.isExpanded)},this.handleCalendarChange=e=>{e.stopPropagation();let t=e.detail.value;this.nativeInput&&(this.nativeInput.value=t,this.nativeInput.dispatchEvent(new Event(`input`,{bubbles:!0}))),this.isExpanded=!1},this.handleDocumentClick=e=>{this.isExpanded&&!this.contains(e.target)&&(this.isExpanded=!1)}}get calendarElement(){return this.querySelector(`[slot="calendar"]`)}onInputReady(e){this.syncCalendarValue(),e.addEventListener(`input`,this.syncCalendarValue)}connectedCallback(){super.connectedCallback(),this.classList.add(`ds-date-picker`),document.addEventListener(`click`,this.handleDocumentClick),this.addEventListener(`ds-calendar-change`,this.handleCalendarChange),f.injectNativeInputStyles()}static injectNativeInputStyles(){if(f.nativeStylesInjected)return;f.nativeStylesInjected=!0;let e=document.createElement(`style`);e.textContent=[`.ds-date-picker input[type="date"]::-webkit-calendar-picker-indicator { display: none !important; }`,`.ds-date-picker input[type="date"]::-webkit-inner-spin-button { display: none !important; }`].join(`
 `),document.head.appendChild(e)}disconnectedCallback(){var e;super.disconnectedCallback(),document.removeEventListener(`click`,this.handleDocumentClick),this.removeEventListener(`ds-calendar-change`,this.handleCalendarChange),(e=this.nativeInput)==null||e.removeEventListener(`input`,this.syncCalendarValue)}get classes(){return{container:!0,error:!!this.forcedError,[this.size]:!!this.size,disabled:this.inputStates.disabled,readonly:this.inputStates.readonly,filled:this.inputStates.filled,invalid:this.inputStates.invalid,focus:this.inputStates.focus,"focus-visible":this.inputStates.focusVisible,expanded:this.isExpanded}}render(){return e.html`
             <div class=${s.classMap(this.classes)}>
                 <div class="input-container">
@@ -7,9 +7,7 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                 </div>
                 ${this.calendarDropdownTemplate}
                 <div class="footer">
-                    ${this.readonlyTextTemplate}
-                    ${this.helperTextTemplate}
-                    ${this.forcedErrorTemplate}
+                    ${this.readonlyTextTemplate} ${this.helperTextTemplate} ${this.forcedErrorTemplate}
                     ${this.invalidErrorTemplate}
                 </div>
             </div>
@@ -25,4 +23,4 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
             variant="naked"
             @click=${this.handleCalendarButtonClick}
             data-aria-label=${this.dataAriaLabelCalendarButton||`open calendar`}
-        ></ds-icon-button>`}get helperTextTemplate(){return this.inputStates.readonly||this.forcedError||this.inputStates.invalid&&this.invalidError?e.nothing:e.html`<span class="support-text helper-text">${this.helperText}</span>`}get forcedErrorTemplate(){return this.inputStates.readonly||!this.forcedError?e.nothing:e.html`<span class="support-text error-text forced-error">${this.forcedError}</span>`}get readonlyTextTemplate(){return!this.inputStates.readonly||!this.readonlyText?e.nothing:e.html`<span class="support-text readonly-text">${this.readonlyText}</span>`}get invalidErrorTemplate(){return this.inputStates.readonly||this.forcedError||!this.inputStates.invalid||!this.invalidError?e.nothing:e.html`<span class="support-text error-text invalid-error">${this.invalidError}</span>`}},m=p,h=(p.styles=[u.commonStyles,d.cupraDiagonalStyles,f.seatStyles],p.nativeStylesInjected=!1,p);r.default([t.property({type:String})],h.prototype,`size`,void 0),r.default([t.property({type:String,attribute:`helper-text`})],h.prototype,`helperText`,void 0),r.default([t.property({type:String,attribute:`forced-error`})],h.prototype,`forcedError`,void 0),r.default([t.property({type:String,attribute:`invalid-error`})],h.prototype,`invalidError`,void 0),r.default([t.property({type:String,attribute:`readonly-text`})],h.prototype,`readonlyText`,void 0),r.default([t.property({type:String,attribute:`data-aria-label-calendar-button`})],h.prototype,`dataAriaLabelCalendarButton`,void 0),r.default([n.state()],h.prototype,`isExpanded`,void 0),h=m=r.default([a.customUiKitElement(`ds-date-picker`)],h),Object.defineProperty(exports,"DsDatePicker",{enumerable:!0,get:function(){return h}});
+        ></ds-icon-button>`}get helperTextTemplate(){return this.inputStates.readonly||this.forcedError||this.inputStates.invalid&&this.invalidError?e.nothing:e.html`<span class="support-text helper-text">${this.helperText}</span>`}get forcedErrorTemplate(){return this.inputStates.readonly||!this.forcedError?e.nothing:e.html`<span class="support-text error-text forced-error">${this.forcedError}</span>`}get readonlyTextTemplate(){return!this.inputStates.readonly||!this.readonlyText?e.nothing:e.html`<span class="support-text readonly-text">${this.readonlyText}</span>`}get invalidErrorTemplate(){return this.inputStates.readonly||this.forcedError||!this.inputStates.invalid||!this.invalidError?e.nothing:e.html`<span class="support-text error-text invalid-error">${this.invalidError}</span>`}},f=d,p=(d.styles=[u.commonStyles],d.nativeStylesInjected=!1,d);r.default([t.property({type:String})],p.prototype,`size`,void 0),r.default([t.property({type:String,attribute:`helper-text`})],p.prototype,`helperText`,void 0),r.default([t.property({type:String,attribute:`forced-error`})],p.prototype,`forcedError`,void 0),r.default([t.property({type:String,attribute:`invalid-error`})],p.prototype,`invalidError`,void 0),r.default([t.property({type:String,attribute:`readonly-text`})],p.prototype,`readonlyText`,void 0),r.default([t.property({type:String,attribute:`data-aria-label-calendar-button`})],p.prototype,`dataAriaLabelCalendarButton`,void 0),r.default([n.state()],p.prototype,`isExpanded`,void 0),p=f=r.default([a.customUiKitElement(`ds-date-picker`)],p),Object.defineProperty(exports,"DsDatePicker",{enumerable:!0,get:function(){return p}});