@cupra/ui-kit 2.0.0-canary.24 → 2.0.0-canary.241

package/dist-react/esm/components/ds-button/styles/seat.styles.js

@@ -0,0 +1,281 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-button/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .button {
+        text-transform: var(--ui-kit-button-text-transform, var(--ui-kit-private-button-text-transform, none));
+        border-radius: var(--ds-button-border-radius-base, 6px);
+        outline-color: transparent;
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+        border-style: none;
+        border-width: var(--ui-kit-button-border-width, var(--ui-kit-private-button-border-width, 0));
+        font-size: var(--ui-kit-button-font-size, var(--ui-kit-private-button-font-size));
+        line-height: var(--ui-kit-button-line-height, var(--ui-kit-private-button-line-height));
+        font-weight: var(--ui-kit-button-font-weight, var(--ui-kit-private-button-font-weight));
+        font-family: var(--ui-kit-button-font-family, var(--ui-kit-private-button-font-family));
+        background: var(--ui-kit-button-background, var(--ui-kit-private-button-bg));
+        color: var(--ui-kit-button-color, var(--ui-kit-private-button-color));
+        border-color: var(
+            --ui-kit-button-border-color,
+            var(--ui-kit-button-color, var(--ui-kit-private-button-border-color))
+        );
+        --ui-kit-icon-color: var(--ui-kit-button-color, var(--ui-kit-private-button-color));
+        transition: var(
+            --ui-kit-button-transition,
+            background-color 0.3s cubic-bezier(0, 0, 0.2, 1),
+            color 0.3s cubic-bezier(0, 0, 0.2, 1),
+            border-color 0.3s cubic-bezier(0, 0, 0.2, 1)
+        );
+    }
+    :host([data-ui-kit-theme='seat']) .button.large {
+        height: var(--ds-sizing-48, 48px);
+        padding: var(--ds-spacing-m-1, 12px) var(--ds-spacing-m-2, 16px);
+        gap: var(--ds-spacing-s-5, 8px);
+        --ui-kit-private-button-gap: var(--ds-spacing-s-5, 8px);
+        --ui-kit-private-button-font-size: var(--ds-typography-size-body-l);
+        --ui-kit-private-button-line-height: var(--ds-typography-height-body-l);
+        --ui-kit-private-button-font-weight: 500;
+        --ui-kit-private-button-font-family: var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='seat']) .button.medium {
+        height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-5, 8px) var(--ds-spacing-m-1, 12px);
+        gap: var(--ds-spacing-s-4, 6px);
+        --ui-kit-private-button-gap: var(--ds-spacing-s-4, 6px);
+        --ui-kit-private-button-font-size: var(--ds-typography-size-body-m);
+        --ui-kit-private-button-line-height: var(--ds-typography-height-body-m);
+        --ui-kit-private-button-font-weight: 500;
+        --ui-kit-private-button-font-family: var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='seat']) .button.small {
+        height: var(--ds-sizing-36, 36px);
+        padding: var(--ds-spacing-s-4, 6px) var(--ds-spacing-m-1, 12px);
+        gap: var(--ds-spacing-s-4, 6px);
+        --ui-kit-private-button-gap: var(--ds-spacing-s-4, 6px);
+        --ui-kit-private-button-font-size: var(--ds-typography-size-body-m);
+        --ui-kit-private-button-line-height: var(--ds-typography-height-body-m);
+        --ui-kit-private-button-font-weight: 500;
+        --ui-kit-private-button-font-family: var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='seat']) .button:has(:focus-visible) {
+        background: var(--ui-kit-button-background-focus, var(--ui-kit-private-button-bg));
+        outline-width: var(--ds-button-border-width-base, 2px);
+        outline-offset: 0.125rem;
+        outline-color: var(--ds-button-outline-color-focus, #6b8494);
+    }
+    :host([data-ui-kit-theme='seat']) .button:hover {
+        background: var(--ui-kit-button-background-hover, var(--ui-kit-private-button-bg));
+        color: var(--ui-kit-button-color-hover, var(--ui-kit-private-button-color));
+        border-color: var(
+            --ui-kit-button-border-color-hover,
+            var(--ui-kit-button-color-hover, var(--ui-kit-private-button-border-color))
+        );
+        --ui-kit-icon-color: var(--ui-kit-button-color-hover, var(--ui-kit-private-button-color));
+    }
+    :host([data-ui-kit-theme='seat']) .button:active {
+        background: var(--ui-kit-button-background-active, var(--ui-kit-private-button-bg));
+        color: var(--ui-kit-button-color-active, var(--ui-kit-private-button-color));
+        border-color: var(
+            --ui-kit-button-border-color-active,
+            var(--ui-kit-button-color-active, var(--ui-kit-private-button-border-color))
+        );
+        --ui-kit-icon-color: var(--ui-kit-button-color-active, var(--ui-kit-private-button-color));
+    }
+    :host([data-ui-kit-theme='seat']) .button.disabled {
+        background: var(--ui-kit-button-background-disabled, var(--ui-kit-private-button-bg));
+        color: var(--ui-kit-button-color-disabled, var(--ui-kit-private-button-color));
+        border-color: var(
+            --ui-kit-button-border-color-disabled,
+            var(--ui-kit-button-color-disabled, var(--ui-kit-private-button-border-color))
+        );
+        --ui-kit-icon-color: var(--ui-kit-button-color-disabled, var(--ui-kit-private-button-color));
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-primary {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-primary-default);
+        --ui-kit-private-button-color: var(--ds-button-text-color-primary-default);
+        --ui-kit-private-button-border-color: transparent;
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-secondary {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-secondary-default);
+        --ui-kit-private-button-color: var(--ds-button-text-color-secondary-default);
+        --ui-kit-private-button-border-color: var(--ds-button-border-color-secondary-default);
+        --ui-kit-private-button-border-width: var(--ds-button-border-width-base, 2px);
+        border-style: solid;
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-tertiary {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-tertiary-default);
+        --ui-kit-private-button-color: var(--ds-button-text-color-tertiary-default);
+        --ui-kit-private-button-border-color: transparent;
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-naked {
+        --ui-kit-private-button-bg: transparent;
+        --ui-kit-private-button-color: var(--ds-button-text-color-naked-default, #a7b5be);
+        --ui-kit-private-button-border-color: transparent;
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-primary.destructive {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-primary-destructive-default);
+        --ui-kit-private-button-color: var(--ds-button-text-color-primary-destructive-default);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-secondary.destructive {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-secondary-destructive-default);
+        --ui-kit-private-button-color: var(--ds-button-text-color-secondary-destructive-default);
+        --ui-kit-private-button-border-color: var(--ds-button-border-color-secondary-destructive-default);
+        border-style: solid;
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-naked.destructive {
+        --ui-kit-private-button-bg: transparent;
+        --ui-kit-private-button-color: var(--ds-button-text-color-naked-destructive-default, #ff6966);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-primary:hover {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-primary-hover);
+        --ui-kit-private-button-color: var(--ds-button-text-color-primary-hover);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-secondary:hover {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-secondary-hover);
+        --ui-kit-private-button-color: var(--ds-button-text-color-secondary-hover);
+        --ui-kit-private-button-border-color: var(--ds-button-border-color-secondary-hover);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-tertiary:hover {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-tertiary-hover);
+        --ui-kit-private-button-color: var(--ds-button-text-color-tertiary-hover);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-naked:hover {
+        --ui-kit-private-button-bg: transparent;
+        --ui-kit-private-button-color: var(--ds-button-text-color-naked-hover, #8ea1ae);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-primary.destructive:hover {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-primary-destructive-hover);
+        --ui-kit-private-button-color: var(--ds-button-text-color-primary-destructive-hover);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-secondary.destructive:hover {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-secondary-destructive-hover);
+        --ui-kit-private-button-color: var(--ds-button-text-color-secondary-destructive-hover);
+        --ui-kit-private-button-border-color: var(--ds-button-border-color-secondary-destructive-hover);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-naked.destructive:hover {
+        --ui-kit-private-button-bg: transparent;
+        --ui-kit-private-button-color: var(--ds-button-text-color-naked-destructive-hover, #ff403d);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-primary:has(:focus-visible) {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-primary-focus);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-secondary:has(:focus-visible) {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-secondary-focus);
+        --ui-kit-private-button-border-color: var(--ds-button-border-color-secondary-focus);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-tertiary:has(:focus-visible) {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-tertiary-focus);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-naked:has(:focus-visible) {
+        --ui-kit-private-button-bg: transparent;
+        --ui-kit-private-button-color: var(--ds-button-text-color-naked-focus, #8ea1ae);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-primary.destructive:has(:focus-visible) {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-primary-destructive-focus);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-naked.destructive:has(:focus-visible) {
+        --ui-kit-private-button-bg: transparent;
+        --ui-kit-private-button-color: var(--ds-button-text-color-naked-destructive-focus, #ff403d);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-primary:active {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-primary-pressed);
+        --ui-kit-private-button-color: var(--ds-button-text-color-primary-pressed);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-secondary:active {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-secondary-pressed);
+        --ui-kit-private-button-color: var(--ds-button-text-color-secondary-pressed);
+        --ui-kit-private-button-border-color: var(--ds-button-border-color-secondary-pressed);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-tertiary:active {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-tertiary-pressed);
+        --ui-kit-private-button-color: var(--ds-button-text-color-tertiary-pressed);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-naked:active {
+        --ui-kit-private-button-bg: transparent;
+        --ui-kit-private-button-color: var(--ds-button-text-color-naked-pressed, #f9fafb);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-primary.destructive:active {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-primary-destructive-pressed);
+        --ui-kit-private-button-color: var(--ds-button-text-color-primary-destructive-pressed);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-secondary.destructive:active {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-secondary-destructive-pressed);
+        --ui-kit-private-button-color: var(--ds-button-text-color-secondary-destructive-pressed);
+        --ui-kit-private-button-border-color: var(--ds-button-border-color-secondary-destructive-pressed);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-naked.destructive:active {
+        --ui-kit-private-button-bg: transparent;
+        --ui-kit-private-button-color: var(--ds-button-text-color-naked-destructive-pressed, #eb0400);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-primary.disabled {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-primary-disabled);
+        --ui-kit-private-button-color: var(--ds-button-text-color-primary-disabled);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-secondary.disabled {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-secondary-disabled);
+        --ui-kit-private-button-color: var(--ds-button-text-color-secondary-disabled);
+        --ui-kit-private-button-border-color: var(--ds-button-border-color-secondary-disabled);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-tertiary.disabled {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-tertiary-disabled);
+        --ui-kit-private-button-color: var(--ds-button-text-color-tertiary-disabled);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-naked.disabled {
+        --ui-kit-private-button-bg: transparent;
+        --ui-kit-private-button-color: var(--ds-button-text-color-naked-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-primary.destructive.disabled {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-primary-destructive-disabled);
+        --ui-kit-private-button-color: var(--ds-button-text-color-primary-destructive-disabled);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-secondary.destructive.disabled {
+        --ui-kit-private-button-bg: var(--ds-button-bg-color-secondary-destructive-disabled);
+        --ui-kit-private-button-color: var(--ds-button-text-color-secondary-destructive-disabled);
+        --ui-kit-private-button-border-color: var(--ds-button-border-color-secondary-destructive-disabled);
+    }
+    :host([data-ui-kit-theme='seat']) .button.variant-naked.destructive.disabled {
+        --ui-kit-private-button-bg: transparent;
+        --ui-kit-private-button-color: var(--ds-button-text-color-naked-destructive-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) ::slotted(a),
+    :host([data-ui-kit-theme='seat']) ::slotted(button) {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        background: transparent;
+        border: none;
+        padding: 0;
+        color: var(--ui-kit-button-color, var(--ui-kit-private-button-color));
+        font: inherit;
+        cursor: pointer;
+        text-decoration: none;
+        text-transform: inherit;
+        letter-spacing: inherit;
+    }
+    :host([data-ui-kit-theme='seat']) .large ::slotted(*) {
+        --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+    }
+    :host([data-ui-kit-theme='seat']) .medium ::slotted(*) {
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+    :host([data-ui-kit-theme='seat']) .small ::slotted(*) {
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+    :host([data-ui-kit-theme='seat']) .large .icon {
+        --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+    }
+    :host([data-ui-kit-theme='seat']) .medium .icon {
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+    :host([data-ui-kit-theme='seat']) .small .icon {
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+`;
+//#endregion
+export { t as seatStyles };

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

@@ -0,0 +1,351 @@
+import { pubSub as e } from "../../utils/PubSub.js";
+import { html as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as n } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
+import a from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
+import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
+import { getDirectionSign as s } from "../../utils/getDirection/getDirection.js";
+import { uiKitHtml as c } from "../../utils/uiKitHtml.js";
+import { classMap as l } 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 { ifDefined as u } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.js";
+import "../ds-icon-button/ds-icon-button.js";
+import "../ds-calendar-day/ds-calendar-day.js";
+import { numberArrayConverter as d, stringArrayConverter as f } from "../../utils/arrayConverter.js";
+import { resolveLang as p } from "../../utils/resolveLang/resolveLang.js";
+import { commonStyles as m } from "./styles/common.styles.js";
+import { getTargetDayIndex as h } from "./utils/getTargetDayIndex/getTargetDayIndex.js";
+//#region src/components/ds-calendar/ds-calendar.ts
+var g = class extends n {
+	constructor(...e) {
+		super(...e), this.variant = "plane", this.size = "large", this.locale = "en-US", this.weekdayFormat = "two-letters", this.firstDayOfWeek = 1, this.disabledDates = [], this.disabledWeekdays = [], this._viewDate = /* @__PURE__ */ new Date(), this._value = null, this._initialValueApplied = !1, this._viewDateInitialized = !1, this.handleLangChange = () => {
+			this.locale === "auto" && this.requestUpdate();
+		};
+	}
+	get selectedDate() {
+		if (this.value) {
+			let e = this.parseDate(this.value);
+			if (e) return e;
+		}
+		return this._value;
+	}
+	get viewDate() {
+		return this._viewDate;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), e.unsubscribe("lang", this.handleLangChange);
+	}
+	connectedCallback() {
+		super.connectedCallback(), e.subscribe("lang", this.handleLangChange), this.applyInitialValue();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), (!this._viewDateInitialized || e.has("value") || e.has("viewDateAttr")) && (this._viewDateInitialized = !0, this.initializeViewDate());
+	}
+	applyInitialValue() {
+		if (!this._initialValueApplied && (this._initialValueApplied = !0, this.initialValue)) {
+			let e = this.parseDate(this.initialValue);
+			e && (this._value = e);
+		}
+	}
+	initializeViewDate() {
+		if (this.viewDateAttr) {
+			let e = this.parseDate(this.viewDateAttr);
+			e && (this._viewDate = e);
+		} else if (this.value) {
+			let e = this.parseDate(this.value);
+			e && (this._viewDate = new Date(e));
+		} else this._viewDate = this._value ? new Date(this._value) : /* @__PURE__ */ new Date();
+	}
+	parseDate(e) {
+		let t = e.split("-");
+		if (t.length >= 2) {
+			let e = Number.parseInt(t[0], 10), n = Number.parseInt(t[1], 10) - 1, r = t.length >= 3 ? Number.parseInt(t[2], 10) : 1, i = new Date(e, n, r);
+			if (!Number.isNaN(i.getTime())) return i;
+		}
+		return null;
+	}
+	get calendarClasses() {
+		return {
+			calendar: !0,
+			[this.variant]: !0,
+			[this.size]: !0
+		};
+	}
+	get resolvedLocale() {
+		return this.locale === "auto" ? p(this) : this.locale;
+	}
+	formatWeekday(e, t) {
+		let n = e.format(t);
+		return this.weekdayFormat === "two-letters" ? n.slice(0, 2) : n;
+	}
+	get weekdayNames() {
+		let e = new Intl.DateTimeFormat(this.resolvedLocale, {
+			weekday: this.weekdayFormat === "narrow" ? "narrow" : "short",
+			calendar: "gregory"
+		}), t = [], n = new Date(2024, 0, 1);
+		for (; n.getDay() !== this.firstDayOfWeek;) n.setDate(n.getDate() + 1);
+		for (let r = 0; r < 7; r++) {
+			let i = new Date(n);
+			i.setDate(n.getDate() + r), t.push(this.formatWeekday(e, i));
+		}
+		return t;
+	}
+	get monthYearLabel() {
+		return new Intl.DateTimeFormat(this.resolvedLocale, {
+			month: "long",
+			year: "numeric",
+			calendar: "gregory"
+		}).format(this._viewDate);
+	}
+	getDaysInMonth(e, t) {
+		return new Date(e, t + 1, 0).getDate();
+	}
+	getFirstDayOfMonth(e, t) {
+		return new Date(e, t, 1).getDay();
+	}
+	get calendarDays() {
+		let e = this._viewDate.getFullYear(), t = this._viewDate.getMonth(), n = /* @__PURE__ */ new Date();
+		n.setHours(0, 0, 0, 0);
+		let r = this.getDaysInMonth(e, t), i = this.getFirstDayOfMonth(e, t) - this.firstDayOfWeek;
+		i < 0 && (i += 7);
+		let a = [], o = t === 0 ? 11 : t - 1, s = t === 0 ? e - 1 : e, c = this.getDaysInMonth(s, o);
+		for (let e = i - 1; e >= 0; e--) {
+			let t = c - e, r = new Date(s, o, t);
+			a.push(this.createCalendarDay(r, !1, n));
+		}
+		for (let i = 1; i <= r; i++) {
+			let r = new Date(e, t, i);
+			a.push(this.createCalendarDay(r, !0, n));
+		}
+		let l = 42 - a.length, u = t === 11 ? 0 : t + 1, d = t === 11 ? e + 1 : e;
+		for (let e = 1; e <= l; e++) {
+			let t = new Date(d, u, e);
+			a.push(this.createCalendarDay(t, !1, n));
+		}
+		return a;
+	}
+	createCalendarDay(e, t, n) {
+		e.setHours(0, 0, 0, 0);
+		let r = e.getDate(), i = e.getMonth(), a = e.getFullYear(), o = r === n.getDate() && i === n.getMonth() && a === n.getFullYear(), s = this.selectedDate;
+		return {
+			day: r,
+			month: i,
+			year: a,
+			date: e,
+			isCurrentMonth: t,
+			isToday: o,
+			isSelected: s ? r === s.getDate() && i === s.getMonth() && a === s.getFullYear() : !1,
+			isDisabled: !t || this.isDateDisabled(e)
+		};
+	}
+	isDateDisabled(e) {
+		if (this.minDate) {
+			let t = new Date(this.minDate);
+			if (t.setHours(0, 0, 0, 0), e < t) return !0;
+		}
+		if (this.maxDate) {
+			let t = new Date(this.maxDate);
+			if (t.setHours(0, 0, 0, 0), e > t) return !0;
+		}
+		if (this.disabledWeekdays && this.disabledWeekdays.length > 0) {
+			let t = e.getDay();
+			if (this.disabledWeekdays.some((e) => e === t)) return !0;
+		}
+		if (this.disabledDates && this.disabledDates.length > 0) {
+			let t = `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+			if (this.disabledDates.includes(t)) return !0;
+		}
+		return !1;
+	}
+	handlePrevMonth() {
+		let e = new Date(this._viewDate);
+		e.setMonth(e.getMonth() - 1), this._viewDate = e;
+	}
+	handleNextMonth() {
+		let e = new Date(this._viewDate);
+		e.setMonth(e.getMonth() + 1), this._viewDate = e;
+	}
+	get tabStopIndex() {
+		let e = this.calendarDays, t = e.findIndex((e) => e.isSelected && !e.isDisabled);
+		return t === -1 ? e.findIndex((e) => !e.isDisabled) : t;
+	}
+	focusDayAt(e) {
+		var t, n;
+		let r = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("ds-calendar-day"), i = r == null ? void 0 : r[e];
+		i == null || (n = i.shadowRoot) == null || (n = n.querySelector("button")) == null || n.focus();
+	}
+	changeMonthKeepingDay(e) {
+		let t = this._viewDate.getDate(), n = new Date(this._viewDate.getFullYear(), this._viewDate.getMonth() + e, 1), r = this.getDaysInMonth(n.getFullYear(), n.getMonth());
+		n.setDate(Math.min(t, r)), this._viewDate = n;
+	}
+	async moveFocusToViewDate() {
+		await this.updateComplete;
+		let e = this.calendarDays.findIndex((e) => e.isCurrentMonth && e.day === this._viewDate.getDate());
+		this.focusDayAt(e);
+	}
+	handleGridKeyDown(e) {
+		var t;
+		if (e.key === "PageUp" || e.key === "PageDown") {
+			e.preventDefault(), this.changeMonthKeepingDay(e.key === "PageUp" ? -1 : 1), this.moveFocusToViewDate();
+			return;
+		}
+		let n = Array.from(((t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("ds-calendar-day")) ?? []).indexOf(e.target);
+		if (n === -1) return;
+		let r = h({
+			key: e.key,
+			currentIndex: n,
+			directionSign: s(this)
+		});
+		if (r === null) return;
+		e.preventDefault();
+		let i = this.calendarDays[r];
+		i && !i.isDisabled && this.focusDayAt(r);
+	}
+	handleDayChange(e) {
+		var t;
+		e.stopPropagation();
+		let n = e.target;
+		if (!n || !n.tagName.toLowerCase().startsWith("ds-calendar-day")) return;
+		let r = n.tagName.toLowerCase(), i = Array.from(((t = this.shadowRoot) == null ? void 0 : t.querySelectorAll(r)) || []).indexOf(n);
+		if (i === -1) return;
+		let a = this.calendarDays[i];
+		if (!a || a.isDisabled) return;
+		this._value = a.date, this._viewDate = new Date(a.date);
+		let o = `${a.date.getFullYear()}-${String(a.date.getMonth() + 1).padStart(2, "0")}-${String(a.date.getDate()).padStart(2, "0")}`;
+		this.dispatchEvent(new CustomEvent("ds-calendar-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				value: o,
+				date: a.date
+			}
+		}));
+	}
+	get navButtonSize() {
+		return this.size === "medium" ? "small" : "medium";
+	}
+	get prevButtonTemplate() {
+		return c`<ds-icon-button
+            class="nav-button"
+            icon-name="arrow-left"
+            mirror
+            data-aria-label=${this.dataAriaLabelPreviousMonth || "Previous month"}
+            @click=${this.handlePrevMonth}
+            variant="naked"
+            size=${u(this.navButtonSize)}
+        ></ds-icon-button>`;
+	}
+	get nextButtonTemplate() {
+		return c`<ds-icon-button
+            class="nav-button"
+            icon-name="arrow-right"
+            mirror
+            data-aria-label=${this.dataAriaLabelNextMonth || "Next month"}
+            @click=${this.handleNextMonth}
+            variant="naked"
+            size=${u(this.navButtonSize)}
+        ></ds-icon-button>`;
+	}
+	get weekdaysTemplate() {
+		return t`
+            <div class="weekdays">
+                ${this.weekdayNames.map((e) => t`<div class="weekday">${e}</div>`)}
+            </div>
+        `;
+	}
+	get daysTemplate() {
+		let e = this.calendarDays, n = this.tabStopIndex, r = [];
+		for (let t = 0; t < e.length; t += 7) r.push(e.slice(t, t + 7));
+		return t`
+            <div
+                class="days-grid"
+                role="grid"
+                @ds-calendar-day-change=${this.handleDayChange}
+                @keydown=${this.handleGridKeyDown}
+            >
+                ${r.map((r) => t`
+                        <div class="days-row" role="row">
+                            ${r.map((t) => c`<ds-calendar-day
+                                    .tabStop=${e.indexOf(t) === n}
+                                    day=${t.day}
+                                    size=${u(this.size)}
+                                    ?disabled=${t.isDisabled}
+                                    ?selected=${t.isSelected}
+                                    ?today=${t.isToday}
+                                    ?outside-month=${!t.isCurrentMonth}
+                                ></ds-calendar-day>`)}
+                        </div>
+                    `)}
+            </div>
+        `;
+	}
+	render() {
+		return t`
+            <div class=${l(this.calendarClasses)} role="application" aria-label=${this.dataAriaLabel || "Calendar"}>
+                <div class="header">
+                    ${this.prevButtonTemplate}
+                    <div class="month-year" aria-live="polite">${this.monthYearLabel}</div>
+                    ${this.nextButtonTemplate}
+                </div>
+                ${this.weekdaysTemplate} ${this.daysTemplate}
+            </div>
+        `;
+	}
+}, _ = (g.styles = [m], g);
+a([r({
+	type: String,
+	attribute: "data-aria-label-previous-month"
+})], _.prototype, "dataAriaLabelPreviousMonth", void 0), a([r({
+	type: String,
+	attribute: "data-aria-label-next-month"
+})], _.prototype, "dataAriaLabelNextMonth", void 0), a([r({
+	type: String,
+	attribute: "data-aria-label"
+})], _.prototype, "dataAriaLabel", void 0), a([r({
+	type: String,
+	reflect: !0
+})], _.prototype, "value", void 0), a([r({
+	type: String,
+	reflect: !0
+})], _.prototype, "variant", void 0), a([r({
+	type: String,
+	reflect: !0
+})], _.prototype, "size", void 0), a([r({
+	type: String,
+	reflect: !0
+})], _.prototype, "locale", void 0), a([r({
+	type: String,
+	reflect: !0,
+	attribute: "weekday-format"
+})], _.prototype, "weekdayFormat", void 0), a([r({
+	type: Number,
+	reflect: !0,
+	attribute: "first-day-of-week"
+})], _.prototype, "firstDayOfWeek", void 0), a([r({
+	type: String,
+	reflect: !0,
+	attribute: "min-date"
+})], _.prototype, "minDate", void 0), a([r({
+	type: String,
+	reflect: !0,
+	attribute: "max-date"
+})], _.prototype, "maxDate", void 0), a([r({
+	attribute: "disabled-dates",
+	converter: f
+})], _.prototype, "disabledDates", void 0), a([r({
+	attribute: "disabled-weekdays",
+	converter: d
+})], _.prototype, "disabledWeekdays", void 0), a([r({
+	type: String,
+	reflect: !0,
+	attribute: "view-date"
+})], _.prototype, "viewDateAttr", void 0), a([r({
+	type: String,
+	attribute: "initial-value"
+})], _.prototype, "initialValue", void 0), a([i()], _.prototype, "_viewDate", void 0), a([i()], _.prototype, "_value", void 0), _ = a([o("ds-calendar")], _);
+//#endregion
+export { _ as DsCalendar };