@daikin-oss/design-system-web-components 2.0.0 → 2.0.1-next.1

package/dist/es/components/calendar/daikin-calendar.js

@@ -1,296 +1,270 @@
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html, nothing } from "lit";
-import { state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { repeat } from "lit/directives/repeat.js";
 import { DDSElement } from "../../base/dds-element.js";
-import "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
+import { property as property$1 } from "../../base/dds-property.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { ddsElement } from "../../base/decorators.js";
-import "../../base/define.js";
-import tailwindStyles from "../../tailwind.css.js";
-import { tryParseDateFromProperty, parseDateFromProperty, cloneDate, isMonthOutOfRange, getDateByMonthOffsetClamped, formatDateForProperty, clampDate, isSameYearMonth, createDateClamped, calcWeeksOnCalendar, toFirstDayOfMonth, isDateOutOfRange, cvaIconButton, getTodayForProperty, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE } from "../../utils/calendar-common.js";
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
+import { calcWeeksOnCalendar, clampDate, cloneDate, createDateClamped, cvaIconButton, formatDateForProperty, getDateByMonthOffsetClamped, getTodayForProperty, isDateOutOfRange, isMonthOutOfRange, isSameYearMonth, parseDateFromProperty, toFirstDayOfMonth, tryParseDateFromProperty } from "../../utils/calendar-common.js";
 import { scrollIntoViewOnlyParent } from "../../utils/scroller.js";
 import "../icon-button/daikin-icon-button.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const MONTHS = {
-  en: [
-    ["Jan", "January"],
-    ["Feb", "February"],
-    ["Mar", "March"],
-    ["Apr", "April"],
-    ["May", "May"],
-    ["Jun", "June"],
-    ["Jul", "July"],
-    ["Aug", "August"],
-    ["Sep", "September"],
-    ["Oct", "October"],
-    ["Nov", "November"],
-    ["Dec", "December"]
-  ],
-  ja: [
-    ["1月", "1月"],
-    ["2月", "2月"],
-    ["3月", "3月"],
-    ["4月", "4月"],
-    ["5月", "5月"],
-    ["6月", "6月"],
-    ["7月", "7月"],
-    ["8月", "8月"],
-    ["9月", "9月"],
-    ["10月", "10月"],
-    ["11月", "11月"],
-    ["12月", "12月"]
-  ]
+import { css, html, nothing, unsafeCSS } from "lit";
+import { state } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/components/calendar/daikin-calendar.ts
+/**
+* The months.
+*/
+var MONTHS = {
+	en: [
+		["Jan", "January"],
+		["Feb", "February"],
+		["Mar", "March"],
+		["Apr", "April"],
+		["May", "May"],
+		["Jun", "June"],
+		["Jul", "July"],
+		["Aug", "August"],
+		["Sep", "September"],
+		["Oct", "October"],
+		["Nov", "November"],
+		["Dec", "December"]
+	],
+	ja: [
+		["1月", "1月"],
+		["2月", "2月"],
+		["3月", "3月"],
+		["4月", "4月"],
+		["5月", "5月"],
+		["6月", "6月"],
+		["7月", "7月"],
+		["8月", "8月"],
+		["9月", "9月"],
+		["10月", "10月"],
+		["11月", "11月"],
+		["12月", "12月"]
+	]
 };
-const DAYS = {
-  en: [
-    ["Sun", "Sunday"],
-    ["Mon", "Monday"],
-    ["Tue", "Tuesday"],
-    ["Wed", "Wednesday"],
-    ["Thu", "Thursday"],
-    ["Fri", "Friday"],
-    ["Sat", "Saturday"]
-  ],
-  ja: [
-    ["日", "日曜日"],
-    ["月", "月曜日"],
-    ["火", "火曜日"],
-    ["水", "水曜日"],
-    ["木", "木曜日"],
-    ["金", "金曜日"],
-    ["土", "土曜日"]
-  ]
+/**
+* The days of the week.
+*/
+var DAYS = {
+	en: [
+		["Sun", "Sunday"],
+		["Mon", "Monday"],
+		["Tue", "Tuesday"],
+		["Wed", "Wednesday"],
+		["Thu", "Thursday"],
+		["Fri", "Friday"],
+		["Sat", "Saturday"]
+	],
+	ja: [
+		["日", "日曜日"],
+		["月", "月曜日"],
+		["火", "火曜日"],
+		["水", "水曜日"],
+		["木", "木曜日"],
+		["金", "金曜日"],
+		["土", "土曜日"]
+	]
 };
-const cvaContentButton = cva(
-  [
-    "flex",
-    "items-center",
-    "justify-center",
-    "rounded-full",
-    "text-sm",
-    "outline-solid",
-    "outline-2",
-    "outline-offset-2",
-    "outline-transparent",
-    "focus-visible:outline-ddt-color-common-border-focus",
-    "enabled:bg-(--color-primary)",
-    "disabled:text-ddt-color-common-disabled"
-  ],
-  {
-    variants: {
-      date: {
-        false: ["w-[calc((100%-3rem)/3)]", "h-8", "px-2"],
-        true: ["size-8"]
-      },
-      variant: {
-        default: [
-          "enabled:text-ddt-color-common-neutral-default",
-          "enabled:hover:text-ddt-color-common-neutral-hover",
-          "enabled:active:text-ddt-color-common-neutral-press",
-          "enabled:hover:[--color-primary:var(--dds-color-common-surface-neutral-hover)]",
-          "enabled:active:[--color-primary:var(--dds-color-common-surface-neutral-press)]"
-        ],
-        selected: [
-          "enabled:text-ddt-color-common-text-inverse",
-          "[--color-primary:var(--dds-color-common-brand-default)]",
-          "hover:[--color-primary:var(--dds-color-common-brand-hover)]",
-          "active:[--color-primary:var(--dds-color-common-brand-press)]"
-        ],
-        today: [
-          "enabled:text-ddt-color-common-neutral-default",
-          "enabled:hover:text-ddt-color-common-neutral-hover",
-          "enabled:active:text-ddt-color-common-neutral-press",
-          "enabled:border",
-          "enabled:border-ddt-color-common-neutral-default",
-          "enabled:hover:[--color-primary:var(--dds-color-common-surface-neutral-hover)]",
-          "enabled:active:[--color-primary:var(--dds-color-common-surface-neutral-press)]"
-        ]
-      }
-    }
-  }
-);
+var cvaContentButton = cva([
+	"flex",
+	"items-center",
+	"justify-center",
+	"rounded-full",
+	"text-sm",
+	"outline-solid",
+	"outline-2",
+	"outline-offset-2",
+	"outline-transparent",
+	"focus-visible:outline-ddt-color-common-border-focus",
+	"enabled:bg-(--color-primary)",
+	"disabled:text-ddt-color-common-disabled"
+], { variants: {
+	date: {
+		false: [
+			"w-[calc((100%-3rem)/3)]",
+			"h-8",
+			"px-2"
+		],
+		true: ["size-8"]
+	},
+	variant: {
+		default: [
+			"enabled:text-ddt-color-common-neutral-default",
+			"enabled:hover:text-ddt-color-common-neutral-hover",
+			"enabled:active:text-ddt-color-common-neutral-press",
+			"enabled:hover:[--color-primary:var(--dds-color-common-surface-neutral-hover)]",
+			"enabled:active:[--color-primary:var(--dds-color-common-surface-neutral-press)]"
+		],
+		selected: [
+			"enabled:text-ddt-color-common-text-inverse",
+			"[--color-primary:var(--dds-color-common-brand-default)]",
+			"hover:[--color-primary:var(--dds-color-common-brand-hover)]",
+			"active:[--color-primary:var(--dds-color-common-brand-press)]"
+		],
+		today: [
+			"enabled:text-ddt-color-common-neutral-default",
+			"enabled:hover:text-ddt-color-common-neutral-hover",
+			"enabled:active:text-ddt-color-common-neutral-press",
+			"enabled:border",
+			"enabled:border-ddt-color-common-neutral-default",
+			"enabled:hover:[--color-primary:var(--dds-color-common-surface-neutral-hover)]",
+			"enabled:active:[--color-primary:var(--dds-color-common-surface-neutral-press)]"
+		]
+	}
+} });
 function getToday() {
-  return parseDateFromProperty(getTodayForProperty());
+	return parseDateFromProperty(getTodayForProperty());
 }
 function getNextFocusDateByKey(date, event) {
-  const cloned = cloneDate(date);
-  const offset = {
-    ArrowUp: -7,
-    ArrowRight: 1,
-    ArrowDown: 7,
-    ArrowLeft: -1
-  }[event.key];
-  if (offset) {
-    cloned.setUTCDate(cloned.getUTCDate() + offset);
-    return cloned;
-  }
-  switch (event.key) {
-    case "Home":
-      cloned.setUTCDate(cloned.getUTCDate() - cloned.getUTCDay());
-      return cloned;
-    case "End":
-      cloned.setUTCDate(cloned.getUTCDate() + (6 - cloned.getUTCDay()));
-      return cloned;
-    case "PageUp":
-      return event.shiftKey ? getDateByMonthOffsetClamped(cloned, -12) : getDateByMonthOffsetClamped(cloned, -1);
-    case "PageDown":
-      return event.shiftKey ? getDateByMonthOffsetClamped(cloned, 12) : getDateByMonthOffsetClamped(cloned, 1);
-  }
-  return null;
+	const cloned = cloneDate(date);
+	const offset = {
+		ArrowUp: -7,
+		ArrowRight: 1,
+		ArrowDown: 7,
+		ArrowLeft: -1
+	}[event.key];
+	if (offset) {
+		cloned.setUTCDate(cloned.getUTCDate() + offset);
+		return cloned;
+	}
+	switch (event.key) {
+		case "Home":
+			cloned.setUTCDate(cloned.getUTCDate() - cloned.getUTCDay());
+			return cloned;
+		case "End":
+			cloned.setUTCDate(cloned.getUTCDate() + (6 - cloned.getUTCDay()));
+			return cloned;
+		case "PageUp": return event.shiftKey ? getDateByMonthOffsetClamped(cloned, -12) : getDateByMonthOffsetClamped(cloned, -1);
+		case "PageDown": return event.shiftKey ? getDateByMonthOffsetClamped(cloned, 12) : getDateByMonthOffsetClamped(cloned, 1);
+	}
+	return null;
 }
-let DaikinCalendar = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this.value = "";
-    this.defaultValue = null;
-    this.locale = null;
-    this.view = "day";
-    this._lastFocusedDate = null;
-    this._dateToBeFocused = null;
-    this._viewDate = getToday();
-  }
-  /**
-   * The locale used for calendar text.
-   * If not provided, the component uses the browser locale and falls back to English for unsupported locales.
-   * Currently, only English (`en`) and Japanese (`ja`) are supported.
-   */
-  get _locale() {
-    const raw = String(this.locale ?? navigator.language);
-    const base = raw.split("-")[0].toLowerCase();
-    return base === "ja" ? "ja" : "en";
-  }
-  get _value() {
-    return tryParseDateFromProperty(this.value);
-  }
-  get _min() {
-    return tryParseDateFromProperty(this.min) ?? parseDateFromProperty(DEFAULT_MIN_DATE);
-  }
-  get _max() {
-    return tryParseDateFromProperty(this.max) ?? parseDateFromProperty(DEFAULT_MAX_DATE);
-  }
-  get _defaultValue() {
-    return tryParseDateFromProperty(this.defaultValue ?? "");
-  }
-  /**
-   * The date that serves as the basis for the current view.
-   */
-  get viewDate() {
-    return cloneDate(this._viewDate);
-  }
-  _emitSelect() {
-    this.dispatchEvent(
-      new Event("select", {
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  _emitSelecting() {
-    this.dispatchEvent(
-      new Event("selecting", {
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  _canNavigateMonth(date, offset) {
-    return !isMonthOutOfRange(
-      getDateByMonthOffsetClamped(date, offset),
-      this._min,
-      this._max
-    );
-  }
-  _navigateMonth(date, offset) {
-    this._viewDate = getDateByMonthOffsetClamped(date, offset);
-    this._lastFocusedDate = null;
-  }
-  _handleCalendarClick(date) {
-    this.value = formatDateForProperty(date);
-    this._emitSelect();
-  }
-  _handleMonthClick() {
-    this.view = this.view != "year" ? "year" : "month";
-    this.dispatchEvent(new Event("view-change", { bubbles: true }));
-  }
-  _handleYearAndMonthPickerClick(date) {
-    this.view = this.view === "year" ? "month" : "day";
-    this._viewDate = cloneDate(date);
-    this.value = formatDateForProperty(clampDate(date, this._min, this._max));
-    this.dispatchEvent(new Event("view-change", { bubbles: true }));
-    this._emitSelecting();
-  }
-  _handleCalendarKeyDown(event) {
-    const focused = (this.shadowRoot ?? this.ownerDocument).activeElement;
-    const focusedDateValue = focused == null ? void 0 : focused.dataset.date;
-    if (!focusedDateValue) {
-      return;
-    }
-    const focusedDate = parseDateFromProperty(focusedDateValue);
-    const nextFocusDate = getNextFocusDateByKey(focusedDate, event);
-    if (!nextFocusDate) {
-      return;
-    }
-    event.preventDefault();
-    const dateToBeFocused = clampDate(nextFocusDate, this._min, this._max);
-    const dateButton = this.renderRoot.querySelector(
-      `[data-type=day][data-date="${formatDateForProperty(dateToBeFocused)}"]`
-    );
-    if (dateButton && isSameYearMonth(dateToBeFocused, focusedDate)) {
-      this._lastFocusedDate = dateToBeFocused;
-      dateButton.focus();
-    } else {
-      this._dateToBeFocused = dateToBeFocused;
-      this._navigateMonth(
-        this._viewDate,
-        dateToBeFocused.getUTCFullYear() * 12 + dateToBeFocused.getUTCMonth() - (focusedDate.getUTCFullYear() * 12 + focusedDate.getUTCMonth())
-      );
-    }
-  }
-  _handleYearAndMonthPickerKeyDown(event) {
-    const offset = {
-      ArrowUp: -3,
-      ArrowRight: 1,
-      ArrowDown: 3,
-      ArrowLeft: -1
-    }[event.key];
-    if (!offset) {
-      return;
-    }
-    event.preventDefault();
-    const focused = (this.shadowRoot ?? this.ownerDocument).activeElement;
-    if (!focused) {
-      return;
-    }
-    const buttons = Array.from(
-      this.renderRoot.querySelectorAll(
-        `[data-type="${this.view}"]`
-      )
-    );
-    const focusedIndex = buttons.findIndex((button) => button === focused);
-    if (focusedIndex === -1) {
-      return;
+var DaikinCalendar = class DaikinCalendar extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.defaultValue = null;
+		this.locale = null;
+		this.view = "day";
+		this._lastFocusedDate = null;
+		this._dateToBeFocused = null;
+		this._viewDate = getToday();
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: block;
+      width: fit-content;
+      height: fit-content;
     }
-    const newIndex = (focusedIndex + offset + buttons.length) % buttons.length;
-    buttons[newIndex].focus();
-  }
-  _createCalendarHeaderLabel(month, year) {
-    const locale = this._locale;
-    const monthLabel = MONTHS[locale][month][1];
-    return locale === "ja" ? `${year}年 ${monthLabel}` : `${monthLabel} ${year}`;
-  }
-  _createYearAndMonthPickerContainer(children) {
-    return html`<div class="w-full h-72">
+  `;
+	}
+	/**
+	* The locale used for calendar text.
+	* If not provided, the component uses the browser locale and falls back to English for unsupported locales.
+	* Currently, only English (`en`) and Japanese (`ja`) are supported.
+	*/
+	get _locale() {
+		return (this.locale ?? navigator.language).split("-")[0].toLowerCase() === "ja" ? "ja" : "en";
+	}
+	get _value() {
+		return tryParseDateFromProperty(this.value);
+	}
+	get _min() {
+		return tryParseDateFromProperty(this.min) ?? parseDateFromProperty("1900-01-01");
+	}
+	get _max() {
+		return tryParseDateFromProperty(this.max) ?? parseDateFromProperty("2099-12-31");
+	}
+	get _defaultValue() {
+		return tryParseDateFromProperty(this.defaultValue ?? "");
+	}
+	/**
+	* The date that serves as the basis for the current view.
+	*/
+	get viewDate() {
+		return cloneDate(this._viewDate);
+	}
+	_emitSelect() {
+		this.dispatchEvent(new Event("select", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_emitSelecting() {
+		this.dispatchEvent(new Event("selecting", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_canNavigateMonth(date, offset) {
+		return !isMonthOutOfRange(getDateByMonthOffsetClamped(date, offset), this._min, this._max);
+	}
+	_navigateMonth(date, offset) {
+		this._viewDate = getDateByMonthOffsetClamped(date, offset);
+		this._lastFocusedDate = null;
+	}
+	_handleCalendarClick(date) {
+		this.value = formatDateForProperty(date);
+		this._emitSelect();
+	}
+	_handleMonthClick() {
+		this.view = this.view != "year" ? "year" : "month";
+		this.dispatchEvent(new Event("view-change", { bubbles: true }));
+	}
+	_handleYearAndMonthPickerClick(date) {
+		this.view = this.view === "year" ? "month" : "day";
+		this._viewDate = cloneDate(date);
+		this.value = formatDateForProperty(clampDate(date, this._min, this._max));
+		this.dispatchEvent(new Event("view-change", { bubbles: true }));
+		this._emitSelecting();
+	}
+	_handleCalendarKeyDown(event) {
+		const focusedDateValue = (this.shadowRoot ?? this.ownerDocument).activeElement?.dataset.date;
+		if (!focusedDateValue) return;
+		const focusedDate = parseDateFromProperty(focusedDateValue);
+		const nextFocusDate = getNextFocusDateByKey(focusedDate, event);
+		if (!nextFocusDate) return;
+		event.preventDefault();
+		const dateToBeFocused = clampDate(nextFocusDate, this._min, this._max);
+		const dateButton = this.renderRoot.querySelector(`[data-type=day][data-date="${formatDateForProperty(dateToBeFocused)}"]`);
+		if (dateButton && isSameYearMonth(dateToBeFocused, focusedDate)) {
+			this._lastFocusedDate = dateToBeFocused;
+			dateButton.focus();
+		} else {
+			this._dateToBeFocused = dateToBeFocused;
+			this._navigateMonth(this._viewDate, dateToBeFocused.getUTCFullYear() * 12 + dateToBeFocused.getUTCMonth() - (focusedDate.getUTCFullYear() * 12 + focusedDate.getUTCMonth()));
+		}
+	}
+	_handleYearAndMonthPickerKeyDown(event) {
+		const offset = {
+			ArrowUp: -3,
+			ArrowRight: 1,
+			ArrowDown: 3,
+			ArrowLeft: -1
+		}[event.key];
+		if (!offset) return;
+		event.preventDefault();
+		const focused = (this.shadowRoot ?? this.ownerDocument).activeElement;
+		if (!focused) return;
+		const buttons = Array.from(this.renderRoot.querySelectorAll(`[data-type="${this.view}"]`));
+		const focusedIndex = buttons.findIndex((button) => button === focused);
+		if (focusedIndex === -1) return;
+		buttons[(focusedIndex + offset + buttons.length) % buttons.length].focus();
+	}
+	_createCalendarHeaderLabel(month, year) {
+		const locale = this._locale;
+		const monthLabel = MONTHS[locale][month][1];
+		return locale === "ja" ? `${year}年 ${monthLabel}` : `${monthLabel} ${year}`;
+	}
+	_createYearAndMonthPickerContainer(children) {
+		return html`<div class="w-full h-72">
       <div
         role="radiogroup"
         class="flex justify-start items-start flex-wrap gap-[1rem_1.5rem] w-full max-h-full pt-4 px-4 pb-4 overflow-auto"
@@ -299,21 +273,14 @@ let DaikinCalendar = class extends DDSElement {
         ${children}
       </div>
     </div>`;
-  }
-  _createYearAndMonthPickerButton({
-    type,
-    disabled,
-    today,
-    selected,
-    focusable,
-    date,
-    text,
-    label
-  }) {
-    const variant = selected ? "selected" : today ? "today" : "default";
-    return html`<button
+	}
+	_createYearAndMonthPickerButton({ type, disabled, today, selected, focusable, date, text, label }) {
+		return html`<button
       type="button"
-      class=${cvaContentButton({ variant, date: false })}
+      class=${cvaContentButton({
+			variant: selected ? "selected" : today ? "today" : "default",
+			date: false
+		})}
       ?disabled=${disabled}
       role="radio"
       aria-checked=${selected}
@@ -325,175 +292,117 @@ let DaikinCalendar = class extends DDSElement {
     >
       ${text}
     </button>`;
-  }
-  _createYearPicker({
-    viewDate,
-    value,
-    min,
-    max
-  }) {
-    const selectedYear = value == null ? void 0 : value.getUTCFullYear();
-    const todayYear = getToday().getUTCFullYear();
-    const focusableYear = selectedYear ?? todayYear;
-    const years = Array.from(
-      { length: max.getUTCFullYear() - min.getUTCFullYear() + 1 },
-      (_, index) => index + min.getUTCFullYear()
-    );
-    return this._createYearAndMonthPickerContainer(
-      html`${repeat(
-        years,
-        (year) => year,
-        (year) => {
-          const date = createDateClamped(
-            year,
-            viewDate.getUTCMonth(),
-            viewDate.getUTCDate()
-          );
-          return this._createYearAndMonthPickerButton({
-            type: "year",
-            disabled: false,
-            today: year === todayYear,
-            selected: year === selectedYear,
-            focusable: year === focusableYear,
-            date: clampDate(date, min, max),
-            text: String(year)
-          });
-        }
-      )}`
-    );
-  }
-  _createMonthPicker({
-    viewDate,
-    value,
-    min,
-    max
-  }) {
-    const today = getToday();
-    const year = viewDate.getUTCFullYear();
-    const selectedMonth = (value == null ? void 0 : value.getUTCFullYear()) === viewDate.getUTCFullYear() ? value.getUTCMonth() : void 0;
-    const todayMonth = year === today.getUTCFullYear() ? today.getUTCMonth() : void 0;
-    const focusableMonth = selectedMonth ?? todayMonth ?? (isSameYearMonth(min, viewDate) ? min.getUTCMonth() : 0);
-    return this._createYearAndMonthPickerContainer(
-      html`${repeat(
-        MONTHS[this._locale],
-        ([abbr]) => abbr,
-        ([abbr, full], month) => {
-          const date = createDateClamped(
-            viewDate.getUTCFullYear(),
-            month,
-            viewDate.getUTCDate()
-          );
-          return this._createYearAndMonthPickerButton({
-            type: "month",
-            disabled: isMonthOutOfRange(date, min, max),
-            today: month === todayMonth,
-            selected: month === selectedMonth,
-            focusable: month === focusableMonth,
-            date: clampDate(date, min, max),
-            text: abbr,
-            label: full
-          });
-        }
-      )}`
-    );
-  }
-  _createDatePicker({
-    viewDate,
-    value,
-    min,
-    max
-  }) {
-    const today = getToday();
-    const weeks = calcWeeksOnCalendar(
-      viewDate.getUTCFullYear(),
-      viewDate.getUTCMonth()
-    );
-    const focusable = (
-      // If the last focused date is in the same month as the view date, use it as the focusable date.
-      this._lastFocusedDate && isSameYearMonth(viewDate, this._lastFocusedDate) ? this._lastFocusedDate : (
-        // If the value is in the same month as the view date, use it as the focusable date.
-        value && isSameYearMonth(viewDate, value) ? value : (
-          // If today's date is in the same month as the view date, use it as the focusable date.
-          isSameYearMonth(viewDate, today) ? today : (
-            // Otherwise, use the first day of the month (clamped).
-            clampDate(toFirstDayOfMonth(viewDate), min, max)
-          )
-        )
-      )
-    );
-    return html`<div class="flex flex-col gap-2 w-full h-72" role="grid">
+	}
+	_createYearPicker({ viewDate, value, min, max }) {
+		const selectedYear = value?.getUTCFullYear();
+		const todayYear = getToday().getUTCFullYear();
+		const focusableYear = selectedYear ?? todayYear;
+		const years = Array.from({ length: max.getUTCFullYear() - min.getUTCFullYear() + 1 }, (_, index) => index + min.getUTCFullYear());
+		return this._createYearAndMonthPickerContainer(html`${repeat(years, (year) => year, (year) => {
+			const date = createDateClamped(year, viewDate.getUTCMonth(), viewDate.getUTCDate());
+			return this._createYearAndMonthPickerButton({
+				type: "year",
+				disabled: false,
+				today: year === todayYear,
+				selected: year === selectedYear,
+				focusable: year === focusableYear,
+				date: clampDate(date, min, max),
+				text: String(year)
+			});
+		})}`);
+	}
+	_createMonthPicker({ viewDate, value, min, max }) {
+		const today = getToday();
+		const year = viewDate.getUTCFullYear();
+		/** Currently selected month from 0 to 11 */
+		const selectedMonth = value?.getUTCFullYear() === viewDate.getUTCFullYear() ? value.getUTCMonth() : void 0;
+		/** Today's month from 0 to 11 */
+		const todayMonth = year === today.getUTCFullYear() ? today.getUTCMonth() : void 0;
+		/** Month that has tab stops from 0 to 11 */
+		const focusableMonth = selectedMonth ?? todayMonth ?? (isSameYearMonth(min, viewDate) ? min.getUTCMonth() : 0);
+		return this._createYearAndMonthPickerContainer(html`${repeat(MONTHS[this._locale], ([abbr]) => abbr, ([abbr, full], month) => {
+			const date = createDateClamped(viewDate.getUTCFullYear(), month, viewDate.getUTCDate());
+			return this._createYearAndMonthPickerButton({
+				type: "month",
+				disabled: isMonthOutOfRange(date, min, max),
+				today: month === todayMonth,
+				selected: month === selectedMonth,
+				focusable: month === focusableMonth,
+				date: clampDate(date, min, max),
+				text: abbr,
+				label: full
+			});
+		})}`);
+	}
+	_createDatePicker({ viewDate, value, min, max }) {
+		const today = getToday();
+		const weeks = calcWeeksOnCalendar(viewDate.getUTCFullYear(), viewDate.getUTCMonth());
+		/**
+		* The date that can receive focus within the calendar.
+		* Each calendar has exactly one date that can be focused.
+		*/
+		const focusable = this._lastFocusedDate && isSameYearMonth(viewDate, this._lastFocusedDate) ? this._lastFocusedDate : value && isSameYearMonth(viewDate, value) ? value : isSameYearMonth(viewDate, today) ? today : clampDate(toFirstDayOfMonth(viewDate), min, max);
+		return html`<div class="flex flex-col gap-2 w-full h-72" role="grid">
       <div class="flex gap-1 flex-wrap w-full px-4" role="row">
-        ${repeat(
-      DAYS[this._locale],
-      ([abbr]) => abbr,
-      ([abbr, full]) => html`<div
+        ${repeat(DAYS[this._locale], ([abbr]) => abbr, ([abbr, full]) => html`<div
               class="flex justify-center items-center size-8 text-ddt-color-common-text-secondary text-xs font-bold leading-[1.3]"
               role="columnheader"
               aria-label=${full}
             >
               ${abbr}
-            </div>`
-    )}
+            </div>`)}
       </div>
       <div
         class="flex flex-col gap-2 flex-wrap w-full px-4 pb-4"
         role="rowgroup"
         @keydown=${this._handleCalendarKeyDown}
       >
-        ${repeat(
-      weeks,
-      (week) => week[0].getTime(),
-      (week) => html`<div class="flex gap-1" role="row">
-              ${repeat(
-        week,
-        (date) => date.getTime(),
-        (date) => html`<button
+        ${repeat(weeks, (week) => week[0].getTime(), (week) => html`<div class="flex gap-1" role="row">
+              ${repeat(week, (date) => date.getTime(), (date) => html`<button
                     type="button"
                     class=${cvaContentButton({
-          variant: date.getTime() === (value == null ? void 0 : value.getTime()) ? "selected" : date.getTime() === today.getTime() ? "today" : "default",
-          date: true
-        })}
+			variant: date.getTime() === value?.getTime() ? "selected" : date.getTime() === today.getTime() ? "today" : "default",
+			date: true
+		})}
                     role="gridcell"
                     ?disabled=${isDateOutOfRange(date, min, max)}
                     tabindex=${date.getTime() === focusable.getTime() ? nothing : -1}
                     aria-current=${date.getTime() === today.getTime() ? "date" : nothing}
-                    aria-selected=${date.getTime() === (value == null ? void 0 : value.getTime())}
+                    aria-selected=${date.getTime() === value?.getTime()}
                     data-type="day"
                     data-date=${formatDateForProperty(date)}
                     @click=${() => this._handleCalendarClick(date)}
                   >
                     ${date.getUTCDate()}
-                  </button>`
-      )}
-            </div>`
-    )}
+                  </button>`)}
+            </div>`)}
       </div>
     </div>`;
-  }
-  render() {
-    const viewDate = this._viewDate;
-    const value = this._value;
-    const view = this.view;
-    const year = viewDate.getUTCFullYear();
-    const month = viewDate.getUTCMonth();
-    const headerLabel = this._createCalendarHeaderLabel(month, year);
-    const pulldownLabel = {
-      year: "Switch to month view",
-      month: "Switch to year view",
-      day: "Switch to year view"
-    }[view];
-    const renderState = {
-      viewDate,
-      value,
-      min: this._min,
-      max: this._max
-    };
-    const picker = {
-      year: this._createYearPicker,
-      month: this._createMonthPicker,
-      day: this._createDatePicker
-    }[view].call(this, renderState);
-    return html`<div
+	}
+	render() {
+		const viewDate = this._viewDate;
+		const value = this._value;
+		const view = this.view;
+		const year = viewDate.getUTCFullYear();
+		const month = viewDate.getUTCMonth();
+		const headerLabel = this._createCalendarHeaderLabel(month, year);
+		const pulldownLabel = {
+			year: "Switch to month view",
+			month: "Switch to year view",
+			day: "Switch to year view"
+		}[view];
+		const renderState = {
+			viewDate,
+			value,
+			min: this._min,
+			max: this._max
+		};
+		const picker = {
+			year: this._createYearPicker,
+			month: this._createMonthPicker,
+			day: this._createDatePicker
+		}[view].call(this, renderState);
+		return html`<div
       class="flex items-stretch flex-col gap-2 w-70 h-max pt-3 bg-ddt-color-common-background-default outline-solid outline-1 -outline-offset-1 outline-ddt-color-divider rounded-sm"
     >
       <div class="flex justify-between items-center pl-4 pr-3">
@@ -513,9 +422,9 @@ let DaikinCalendar = class extends DDSElement {
           >
             <span
               class=${cvaIconButton({
-      intent: "pulldown",
-      rotate: view === "year" ? "inverse" : "default"
-    })}
+			intent: "pulldown",
+			rotate: view === "year" ? "inverse" : "default"
+		})}
             ></span>
           </daikin-icon-button>
         </div>
@@ -544,81 +453,59 @@ let DaikinCalendar = class extends DDSElement {
       </div>
       ${picker}
     </div>`;
-  }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("defaultValue") || changedProperties.has("value")) {
-      const base = this._value ?? this._defaultValue ?? getToday();
-      if (this._viewDate.getTime() !== base.getTime()) {
-        this._viewDate = cloneDate(base);
-      }
-    }
-  }
-  updated(changedProperties) {
-    if (this._dateToBeFocused != null) {
-      const dateButton = this.renderRoot.querySelector(
-        `[data-type=day][data-date="${formatDateForProperty(this._dateToBeFocused)}"]`
-      );
-      if (dateButton) {
-        this._lastFocusedDate = this._dateToBeFocused;
-        dateButton.focus();
-      }
-      this._dateToBeFocused = null;
-    }
-    if (changedProperties.get("view") != null) {
-      const baseSelector = `[data-type="${this.view}"]`;
-      const target = this.renderRoot.querySelector(
-        `${baseSelector}[aria-checked=true], ${baseSelector}[aria-selected=true]`
-      ) ?? this.renderRoot.querySelector(
-        `${baseSelector}[aria-current]`
-      ) ?? this.renderRoot.querySelector(`${baseSelector}:enabled`);
-      if (target) {
-        if (this.view === "year" || this.view === "month") {
-          scrollIntoViewOnlyParent(target, "vertical", true);
-        }
-        target.focus();
-      }
-    }
-  }
-};
-DaikinCalendar.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: block;
-      width: fit-content;
-      height: fit-content;
-    }
-  `;
-__decorateClass([
-  property({ type: String })
-], DaikinCalendar.prototype, "value", 2);
-__decorateClass([
-  property({ type: String, reflect: true, fallbackValue: "1900-01-01" })
-], DaikinCalendar.prototype, "min", 2);
-__decorateClass([
-  property({ type: String, reflect: true, fallbackValue: "2099-12-31" })
-], DaikinCalendar.prototype, "max", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "default-value" })
-], DaikinCalendar.prototype, "defaultValue", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinCalendar.prototype, "locale", 2);
-__decorateClass([
-  property({ type: String, attribute: false })
-], DaikinCalendar.prototype, "view", 2);
-__decorateClass([
-  state()
-], DaikinCalendar.prototype, "_lastFocusedDate", 2);
-__decorateClass([
-  state()
-], DaikinCalendar.prototype, "_dateToBeFocused", 2);
-__decorateClass([
-  state()
-], DaikinCalendar.prototype, "_viewDate", 2);
-DaikinCalendar = __decorateClass([
-  ddsElement("daikin-calendar")
-], DaikinCalendar);
-export {
-  DaikinCalendar
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("defaultValue") || changedProperties.has("value")) {
+			const base = this._value ?? this._defaultValue ?? getToday();
+			if (this._viewDate.getTime() !== base.getTime()) this._viewDate = cloneDate(base);
+		}
+	}
+	updated(changedProperties) {
+		if (this._dateToBeFocused != null) {
+			const dateButton = this.renderRoot.querySelector(`[data-type=day][data-date="${formatDateForProperty(this._dateToBeFocused)}"]`);
+			if (dateButton) {
+				this._lastFocusedDate = this._dateToBeFocused;
+				dateButton.focus();
+			}
+			this._dateToBeFocused = null;
+		}
+		if (changedProperties.get("view") != null) {
+			const baseSelector = `[data-type="${this.view}"]`;
+			const target = this.renderRoot.querySelector(`${baseSelector}[aria-checked=true], ${baseSelector}[aria-selected=true]`) ?? this.renderRoot.querySelector(`${baseSelector}[aria-current]`) ?? this.renderRoot.querySelector(`${baseSelector}:enabled`);
+			if (target) {
+				if (this.view === "year" || this.view === "month") scrollIntoViewOnlyParent(target, "vertical", true);
+				target.focus();
+			}
+		}
+	}
 };
+__decorate([property$1({ type: String })], DaikinCalendar.prototype, "value", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "1900-01-01"
+})], DaikinCalendar.prototype, "min", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "2099-12-31"
+})], DaikinCalendar.prototype, "max", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	attribute: "default-value"
+})], DaikinCalendar.prototype, "defaultValue", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true
+})], DaikinCalendar.prototype, "locale", void 0);
+__decorate([property$1({
+	type: String,
+	attribute: false
+})], DaikinCalendar.prototype, "view", void 0);
+__decorate([state()], DaikinCalendar.prototype, "_lastFocusedDate", void 0);
+__decorate([state()], DaikinCalendar.prototype, "_dateToBeFocused", void 0);
+__decorate([state()], DaikinCalendar.prototype, "_viewDate", void 0);
+DaikinCalendar = __decorate([ddsElement("daikin-calendar")], DaikinCalendar);
+//#endregion
+export { DaikinCalendar };