@carbon/web-components 2.60.0 → 2.61.0

package/es/components/date-picker/next/components/calendar-renderer.js

@@ -0,0 +1,278 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "../../../../globals/settings.js";
+import { carbonElement } from "../../../../globals/decorators/carbon-element.js";
+import __decorate from "../../../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import iconLoader from "../../../../globals/internal/icon-loader.js";
+import date_picker_default from "./date-picker.scss.js";
+import { LitElement, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import ChevronRight16 from "@carbon/icons/es/chevron--right/16.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import ChevronLeft16 from "@carbon/icons/es/chevron--left/16.js";
+import { generateCalendarGrid, getFullDateLabel, getMonthYearLabel, getWeekdayLabels } from "@carbon/utilities/date-picker";
+//#region src/components/date-picker/next/components/calendar-renderer.ts
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* Calendar renderer for date picker.
+* Replaces Flatpickr's calendar UI with a lightweight, framework-agnostic implementation.
+*
+* @element cds-preview-date-picker-calendar
+* @fires cds-preview-date-picker-calendar-date-select - Fired when a date is selected
+* @fires cds-preview-date-picker-calendar-month-change - Fired when the month changes
+*/
+let CDSDatePickerCalendar = class CDSDatePickerCalendar extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._currentMonth = Temporal.Now.plainDateISO().toPlainYearMonth();
+		this.selectedDates = [];
+		this.rangeMode = false;
+		this.dateFormat = "m/d/Y";
+		this.locale = "en-US";
+	}
+	/**
+	* Navigate to previous month
+	*/
+	_handlePrevMonth() {
+		this._currentMonth = this._currentMonth.subtract({ months: 1 });
+		this._dispatchMonthChange();
+	}
+	/**
+	* Navigate to next month
+	*/
+	_handleNextMonth() {
+		this._currentMonth = this._currentMonth.add({ months: 1 });
+		this._dispatchMonthChange();
+	}
+	/**
+	* Handle date selection
+	* @param {Temporal.PlainDate} date - The date to select
+	*/
+	_handleDateSelect(date) {
+		if (this._isDateDisabled(date)) return;
+		this.dispatchEvent(new CustomEvent(`cds-preview-date-picker-calendar-date-select`, {
+			bubbles: true,
+			composed: true,
+			detail: { date }
+		}));
+	}
+	/**
+	* Dispatch month change event
+	*/
+	_dispatchMonthChange() {
+		this.dispatchEvent(new CustomEvent(`cds-preview-date-picker-calendar-month-change`, {
+			bubbles: true,
+			composed: true,
+			detail: { month: this._currentMonth }
+		}));
+	}
+	/**
+	* Check if a date is disabled
+	* @param {Temporal.PlainDate} date - The date to check
+	*/
+	_isDateDisabled(date) {
+		if (this.minDate && Temporal.PlainDate.compare(date, this.minDate) < 0) return true;
+		if (this.maxDate && Temporal.PlainDate.compare(date, this.maxDate) > 0) return true;
+		return false;
+	}
+	/**
+	* Check if previous month navigation should be disabled
+	*/
+	_isPrevMonthDisabled() {
+		if (!this.minDate) return false;
+		const prevMonth = this._currentMonth.subtract({ months: 1 });
+		const prevMonthLastDay = prevMonth.toPlainDate({ day: prevMonth.daysInMonth });
+		return Temporal.PlainDate.compare(prevMonthLastDay, this.minDate) < 0;
+	}
+	/**
+	* Check if next month navigation should be disabled
+	*/
+	_isNextMonthDisabled() {
+		if (!this.maxDate) return false;
+		const nextMonthFirstDay = this._currentMonth.add({ months: 1 }).toPlainDate({ day: 1 });
+		return Temporal.PlainDate.compare(nextMonthFirstDay, this.maxDate) > 0;
+	}
+	/**
+	* Check if a date is selected
+	* @param {Temporal.PlainDate} date - The date to check
+	*/
+	_isDateSelected(date) {
+		return this.selectedDates.some((selected) => {
+			if (!selected || typeof selected !== "object" || !("year" in selected)) return false;
+			return Temporal.PlainDate.compare(selected, date) === 0;
+		});
+	}
+	/**
+	* Check if a date is in range (for range mode)
+	* @param {Temporal.PlainDate} date - The date to check
+	*/
+	_isDateInRange(date) {
+		if (!this.rangeMode) return false;
+		if (this.selectedDates.length === 2) {
+			const [start, end] = this.selectedDates.sort((a, b) => Temporal.PlainDate.compare(a, b));
+			return Temporal.PlainDate.compare(date, start) >= 0 && Temporal.PlainDate.compare(date, end) <= 0;
+		}
+		const previewDate = this._hoveredDate || this.focusedDate;
+		if (this.selectedDates.length === 1 && previewDate) {
+			if (this.minDate && Temporal.PlainDate.compare(previewDate, this.minDate) < 0 || this.maxDate && Temporal.PlainDate.compare(previewDate, this.maxDate) > 0) return false;
+			const [rangeStart, rangeEnd] = [this.selectedDates[0], previewDate].sort((a, b) => Temporal.PlainDate.compare(a, b));
+			return Temporal.PlainDate.compare(date, rangeStart) >= 0 && Temporal.PlainDate.compare(date, rangeEnd) <= 0;
+		}
+		return false;
+	}
+	/**
+	* Check if a date is focused (for keyboard navigation)
+	* @param {Temporal.PlainDate} date - The date to check
+	*/
+	_isDateFocused(date) {
+		if (!this.focusedDate) return false;
+		return Temporal.PlainDate.compare(date, this.focusedDate) === 0;
+	}
+	/**
+	* Handle mouse enter on a date
+	* @param {Temporal.PlainDate} date - The date being hovered
+	*/
+	_handleDateMouseEnter(date) {
+		if (this.rangeMode && this.selectedDates.length === 1) this._hoveredDate = date;
+	}
+	/**
+	* Handle mouse leave on a date
+	*/
+	_handleDateMouseLeave() {
+		this._hoveredDate = void 0;
+	}
+	/**
+	* Render the calendar header with month/year and navigation
+	*/
+	_renderHeader() {
+		const monthName = getMonthYearLabel(this._currentMonth.toPlainDate({ day: 1 }), this.locale);
+		const isPrevDisabled = this._isPrevMonthDisabled();
+		const isNextDisabled = this._isNextMonthDisabled();
+		return html`
+      <div class="${"cds"}--date-picker__month">
+        <button
+          type="button"
+          class="${"cds"}--date-picker__month-nav ${"cds"}--date-picker__month-nav--prev"
+          tabindex="-1"
+          ?disabled="${isPrevDisabled}"
+          @click="${this._handlePrevMonth}"
+          aria-label="Previous month">
+          ${iconLoader(ChevronLeft16)}
+        </button>
+        <div class="${"cds"}--date-picker__current-month">
+          <span class="cur-month">${monthName}</span>
+        </div>
+        <button
+          type="button"
+          class="${"cds"}--date-picker__month-nav ${"cds"}--date-picker__month-nav--next"
+          tabindex="-1"
+          ?disabled="${isNextDisabled}"
+          @click="${this._handleNextMonth}"
+          aria-label="Next month">
+          ${iconLoader(ChevronRight16)}
+        </button>
+      </div>
+    `;
+	}
+	/**
+	* Render the weekday headers
+	*/
+	_renderWeekdays() {
+		return html`
+      <div class="${"cds"}--date-picker__weekdays">
+        ${getWeekdayLabels(this.locale).map((day) => html`
+            <span class="${"cds"}--date-picker__weekday">${day}</span>
+          `)}
+      </div>
+    `;
+	}
+	/**
+	* Render the calendar days grid
+	*/
+	_renderDays() {
+		const currentMonthValue = this._currentMonth.month;
+		return html`
+      <div class="${"cds"}--date-picker__days" role="grid">
+        ${generateCalendarGrid(this._currentMonth.toPlainDate({ day: 1 }), this.minDate ?? null, this.maxDate ?? null).flat().map(({ date, isCurrentMonth, isDisabled, isToday }) => {
+			const isSelected = this._isDateSelected(date);
+			const isInRange = this._isDateInRange(date);
+			const isFocused = this._isDateFocused(date);
+			return html`
+            <button
+              type="button"
+              class="${classMap({
+				[`cds--date-picker__day`]: true,
+				prevMonthDay: !isCurrentMonth && date.month < currentMonthValue,
+				nextMonthDay: !isCurrentMonth && date.month > currentMonthValue,
+				disabled: isDisabled,
+				selected: isSelected,
+				inRange: isInRange,
+				today: isToday && !isSelected,
+				"no-border": isToday && isSelected,
+				focused: isFocused
+			})}"
+              tabindex="-1"
+              ?disabled="${isDisabled}"
+              @click="${() => this._handleDateSelect(date)}"
+              @mouseenter="${() => this._handleDateMouseEnter(date)}"
+              @mouseleave="${() => this._handleDateMouseLeave()}"
+              aria-label="${getFullDateLabel(date, this.locale)}"
+              aria-current="${ifDefined(isToday ? "date" : void 0)}">
+              ${date.day}
+            </button>
+          `;
+		})}
+      </div>
+    `;
+	}
+	/**
+	* Lifecycle method called when properties change
+	* @param {PropertyValues} changedProperties - Changed properties
+	*/
+	updated(changedProperties) {
+		if (changedProperties.has("viewDate") && this.viewDate) this._currentMonth = Temporal.PlainYearMonth.from({
+			year: this.viewDate.year,
+			month: this.viewDate.month
+		});
+	}
+	/**
+	* Renders the calendar component
+	*/
+	render() {
+		return html`
+      <div class="${"cds"}--date-picker__calendar" tabindex="0">
+        ${this._renderHeader()} ${this._renderWeekdays()} ${this._renderDays()}
+      </div>
+    `;
+	}
+	static {
+		this.styles = date_picker_default;
+	}
+};
+__decorate([state()], CDSDatePickerCalendar.prototype, "_currentMonth", void 0);
+__decorate([property({ type: Array })], CDSDatePickerCalendar.prototype, "selectedDates", void 0);
+__decorate([property({ type: Object })], CDSDatePickerCalendar.prototype, "viewDate", void 0);
+__decorate([property({ type: Object })], CDSDatePickerCalendar.prototype, "focusedDate", void 0);
+__decorate([state()], CDSDatePickerCalendar.prototype, "_hoveredDate", void 0);
+__decorate([property({ type: Object })], CDSDatePickerCalendar.prototype, "minDate", void 0);
+__decorate([property({ type: Object })], CDSDatePickerCalendar.prototype, "maxDate", void 0);
+__decorate([property({ type: Boolean })], CDSDatePickerCalendar.prototype, "rangeMode", void 0);
+__decorate([property({ type: String })], CDSDatePickerCalendar.prototype, "dateFormat", void 0);
+__decorate([property({ type: String })], CDSDatePickerCalendar.prototype, "locale", void 0);
+CDSDatePickerCalendar = __decorate([carbonElement(`cds-preview-date-picker-calendar`)], CDSDatePickerCalendar);
+var calendar_renderer_default = CDSDatePickerCalendar;
+//#endregion
+export { calendar_renderer_default as default };
+
+//# sourceMappingURL=calendar-renderer.js.map

package/es/components/date-picker/next/components/calendar-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-renderer.js","names":["end","styles","customElement"],"sources":["../../../../../src/components/date-picker/next/components/calendar-renderer.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../../../globals/settings';\nimport { carbonElement as customElement } from '../../../../globals/decorators/carbon-element';\nimport ChevronLeft16 from '@carbon/icons/es/chevron--left/16.js';\nimport ChevronRight16 from '@carbon/icons/es/chevron--right/16.js';\nimport { iconLoader } from '../../../../globals/internal/icon-loader';\nimport {\n  generateCalendarGrid,\n  getFullDateLabel,\n  getMonthYearLabel,\n  getWeekdayLabels,\n} from '@carbon/utilities/date-picker';\nimport styles from './date-picker.scss?lit';\n\n/**\n * Calendar renderer for date picker.\n * Replaces Flatpickr's calendar UI with a lightweight, framework-agnostic implementation.\n *\n * @element cds-preview-date-picker-calendar\n * @fires cds-preview-date-picker-calendar-date-select - Fired when a date is selected\n * @fires cds-preview-date-picker-calendar-month-change - Fired when the month changes\n */\n@customElement(`${prefix}-preview-date-picker-calendar`)\nclass CDSDatePickerCalendar extends LitElement {\n  /**\n   * The currently displayed month (Temporal.PlainYearMonth)\n   */\n  @state()\n  private _currentMonth: Temporal.PlainYearMonth =\n    Temporal.Now.plainDateISO().toPlainYearMonth();\n\n  /**\n   * The selected date(s)\n   */\n  @property({ type: Array })\n  selectedDates: Temporal.PlainDate[] = [];\n\n  /**\n   * The view date from the state machine (used to sync calendar month)\n   */\n  @property({ type: Object })\n  viewDate?: Temporal.PlainDate;\n\n  /**\n   * The focused date for keyboard navigation\n   */\n  @property({ type: Object })\n  focusedDate?: Temporal.PlainDate | null;\n\n  /**\n   * The currently hovered date (for range preview)\n   */\n  @state()\n  private _hoveredDate?: Temporal.PlainDate;\n\n  /**\n   * The minimum selectable date\n   */\n  @property({ type: Object })\n  minDate?: Temporal.PlainDate;\n\n  /**\n   * The maximum selectable date\n   */\n  @property({ type: Object })\n  maxDate?: Temporal.PlainDate;\n\n  /**\n   * Whether range selection is enabled\n   */\n  @property({ type: Boolean })\n  rangeMode = false;\n\n  /**\n   * The date format for display\n   */\n  @property({ type: String })\n  dateFormat = 'm/d/Y';\n\n  /**\n   * Locale for date formatting\n   */\n  @property({ type: String })\n  locale = 'en-US';\n\n  /**\n   * Navigate to previous month\n   */\n  private _handlePrevMonth() {\n    this._currentMonth = this._currentMonth.subtract({ months: 1 });\n    this._dispatchMonthChange();\n  }\n\n  /**\n   * Navigate to next month\n   */\n  private _handleNextMonth() {\n    this._currentMonth = this._currentMonth.add({ months: 1 });\n    this._dispatchMonthChange();\n  }\n\n  /**\n   * Handle date selection\n   * @param {Temporal.PlainDate} date - The date to select\n   */\n  private _handleDateSelect(date: Temporal.PlainDate) {\n    if (this._isDateDisabled(date)) {\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(`${prefix}-preview-date-picker-calendar-date-select`, {\n        bubbles: true,\n        composed: true,\n        detail: { date },\n      })\n    );\n  }\n\n  /**\n   * Dispatch month change event\n   */\n  private _dispatchMonthChange() {\n    this.dispatchEvent(\n      new CustomEvent(`${prefix}-preview-date-picker-calendar-month-change`, {\n        bubbles: true,\n        composed: true,\n        detail: { month: this._currentMonth },\n      })\n    );\n  }\n\n  /**\n   * Check if a date is disabled\n   * @param {Temporal.PlainDate} date - The date to check\n   */\n  private _isDateDisabled(date: Temporal.PlainDate): boolean {\n    if (this.minDate && Temporal.PlainDate.compare(date, this.minDate) < 0) {\n      return true;\n    }\n    if (this.maxDate && Temporal.PlainDate.compare(date, this.maxDate) > 0) {\n      return true;\n    }\n    return false;\n  }\n\n  /**\n   * Check if previous month navigation should be disabled\n   */\n  private _isPrevMonthDisabled(): boolean {\n    if (!this.minDate) {\n      return false;\n    }\n    // Disable if going to previous month would be before minDate's month\n    const prevMonth = this._currentMonth.subtract({ months: 1 });\n    const prevMonthLastDay = prevMonth.toPlainDate({\n      day: prevMonth.daysInMonth,\n    });\n    return Temporal.PlainDate.compare(prevMonthLastDay, this.minDate) < 0;\n  }\n\n  /**\n   * Check if next month navigation should be disabled\n   */\n  private _isNextMonthDisabled(): boolean {\n    if (!this.maxDate) {\n      return false;\n    }\n    // Disable if going to next month would be after maxDate's month\n    const nextMonth = this._currentMonth.add({ months: 1 });\n    const nextMonthFirstDay = nextMonth.toPlainDate({ day: 1 });\n    return Temporal.PlainDate.compare(nextMonthFirstDay, this.maxDate) > 0;\n  }\n\n  /**\n   * Check if a date is selected\n   * @param {Temporal.PlainDate} date - The date to check\n   */\n  private _isDateSelected(date: Temporal.PlainDate): boolean {\n    return this.selectedDates.some((selected) => {\n      if (!selected || typeof selected !== 'object' || !('year' in selected)) {\n        return false;\n      }\n      return Temporal.PlainDate.compare(selected, date) === 0;\n    });\n  }\n\n  /**\n   * Check if a date is in range (for range mode)\n   * @param {Temporal.PlainDate} date - The date to check\n   */\n  private _isDateInRange(date: Temporal.PlainDate): boolean {\n    if (!this.rangeMode) {\n      return false;\n    }\n\n    // Case 1: Both dates are selected (final range)\n    if (this.selectedDates.length === 2) {\n      const [start, end] = this.selectedDates.sort((a, b) =>\n        Temporal.PlainDate.compare(a, b)\n      );\n\n      return (\n        Temporal.PlainDate.compare(date, start) >= 0 &&\n        Temporal.PlainDate.compare(date, end) <= 0\n      );\n    }\n\n    // Case 2: One date selected, show preview range with hovered or focused date\n    const previewDate = this._hoveredDate || this.focusedDate;\n    if (this.selectedDates.length === 1 && previewDate) {\n      // Don't show range preview if the preview date is disabled\n      const isPreviewDisabled =\n        (this.minDate &&\n          Temporal.PlainDate.compare(previewDate, this.minDate) < 0) ||\n        (this.maxDate &&\n          Temporal.PlainDate.compare(previewDate, this.maxDate) > 0);\n\n      if (isPreviewDisabled) {\n        return false;\n      }\n\n      const start = this.selectedDates[0];\n      const end = previewDate;\n\n      // Sort to handle both forward and backward selection\n      const [rangeStart, rangeEnd] = [start, end].sort((a, b) =>\n        Temporal.PlainDate.compare(a, b)\n      );\n\n      return (\n        Temporal.PlainDate.compare(date, rangeStart) >= 0 &&\n        Temporal.PlainDate.compare(date, rangeEnd) <= 0\n      );\n    }\n\n    return false;\n  }\n\n  /**\n   * Check if a date is focused (for keyboard navigation)\n   * @param {Temporal.PlainDate} date - The date to check\n   */\n  private _isDateFocused(date: Temporal.PlainDate): boolean {\n    if (!this.focusedDate) {\n      return false;\n    }\n    return Temporal.PlainDate.compare(date, this.focusedDate) === 0;\n  }\n\n  /**\n   * Handle mouse enter on a date\n   * @param {Temporal.PlainDate} date - The date being hovered\n   */\n  private _handleDateMouseEnter(date: Temporal.PlainDate) {\n    // Only track hover in range mode when selecting end date\n    if (this.rangeMode && this.selectedDates.length === 1) {\n      this._hoveredDate = date;\n    }\n  }\n\n  /**\n   * Handle mouse leave on a date\n   */\n  private _handleDateMouseLeave() {\n    // Clear hovered date\n    this._hoveredDate = undefined;\n  }\n\n  /**\n   * Render the calendar header with month/year and navigation\n   */\n  private _renderHeader() {\n    const monthName = getMonthYearLabel(\n      this._currentMonth.toPlainDate({ day: 1 }),\n      this.locale\n    );\n\n    const isPrevDisabled = this._isPrevMonthDisabled();\n    const isNextDisabled = this._isNextMonthDisabled();\n\n    return html`\n      <div class=\"${prefix}--date-picker__month\">\n        <button\n          type=\"button\"\n          class=\"${prefix}--date-picker__month-nav ${prefix}--date-picker__month-nav--prev\"\n          tabindex=\"-1\"\n          ?disabled=\"${isPrevDisabled}\"\n          @click=\"${this._handlePrevMonth}\"\n          aria-label=\"Previous month\">\n          ${iconLoader(ChevronLeft16)}\n        </button>\n        <div class=\"${prefix}--date-picker__current-month\">\n          <span class=\"cur-month\">${monthName}</span>\n        </div>\n        <button\n          type=\"button\"\n          class=\"${prefix}--date-picker__month-nav ${prefix}--date-picker__month-nav--next\"\n          tabindex=\"-1\"\n          ?disabled=\"${isNextDisabled}\"\n          @click=\"${this._handleNextMonth}\"\n          aria-label=\"Next month\">\n          ${iconLoader(ChevronRight16)}\n        </button>\n      </div>\n    `;\n  }\n\n  /**\n   * Render the weekday headers\n   */\n  private _renderWeekdays() {\n    const weekdays = getWeekdayLabels(this.locale);\n\n    return html`\n      <div class=\"${prefix}--date-picker__weekdays\">\n        ${weekdays.map(\n          (day) => html`\n            <span class=\"${prefix}--date-picker__weekday\">${day}</span>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * Render the calendar days grid\n   */\n  private _renderDays() {\n    const currentMonthValue = this._currentMonth.month;\n\n    const days = generateCalendarGrid(\n      this._currentMonth.toPlainDate({ day: 1 }),\n      this.minDate ?? null,\n      this.maxDate ?? null\n    ).flat();\n\n    return html`\n      <div class=\"${prefix}--date-picker__days\" role=\"grid\">\n        ${days.map(({ date, isCurrentMonth, isDisabled, isToday }) => {\n          const isSelected = this._isDateSelected(date);\n          const isInRange = this._isDateInRange(date);\n          const isFocused = this._isDateFocused(date);\n\n          const dayClasses = classMap({\n            [`${prefix}--date-picker__day`]: true,\n            prevMonthDay: !isCurrentMonth && date.month < currentMonthValue,\n            nextMonthDay: !isCurrentMonth && date.month > currentMonthValue,\n            disabled: isDisabled,\n            selected: isSelected,\n            inRange: isInRange,\n            today: isToday && !isSelected,\n            'no-border': isToday && isSelected,\n            focused: isFocused,\n          });\n\n          return html`\n            <button\n              type=\"button\"\n              class=\"${dayClasses}\"\n              tabindex=\"-1\"\n              ?disabled=\"${isDisabled}\"\n              @click=\"${() => this._handleDateSelect(date)}\"\n              @mouseenter=\"${() => this._handleDateMouseEnter(date)}\"\n              @mouseleave=\"${() => this._handleDateMouseLeave()}\"\n              aria-label=\"${getFullDateLabel(date, this.locale)}\"\n              aria-current=\"${ifDefined(isToday ? 'date' : undefined)}\">\n              ${date.day}\n            </button>\n          `;\n        })}\n      </div>\n    `;\n  }\n\n  /**\n   * Lifecycle method called when properties change\n   * @param {PropertyValues} changedProperties - Changed properties\n   */\n  updated(changedProperties: PropertyValues) {\n    // Sync calendar month with viewDate from state machine\n    if (changedProperties.has('viewDate') && this.viewDate) {\n      // Create PlainYearMonth from PlainDate\n      this._currentMonth = Temporal.PlainYearMonth.from({\n        year: this.viewDate.year,\n        month: this.viewDate.month,\n      });\n    }\n  }\n\n  /**\n   * Renders the calendar component\n   */\n  render() {\n    return html`\n      <div class=\"${prefix}--date-picker__calendar\" tabindex=\"0\">\n        ${this._renderHeader()} ${this._renderWeekdays()} ${this._renderDays()}\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSDatePickerCalendar;\n"],"mappings":"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"}

package/es/components/date-picker/next/components/date-picker-input-skeleton.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+import { DATE_PICKER_INPUT_KIND } from '../../defs';
+/**
+ * Skeleton version of the input box for date picker.
+ */
+declare class CDSDatePickerInputSkeleton extends LitElement {
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel: boolean;
+    /**
+     * * @deprecated use `range` instead
+     * Date picker input kind. Corresponds to the attribute with the same name.
+     */
+    kind: DATE_PICKER_INPUT_KIND;
+    /**
+     * Specify whether the skeleton should be of range date picker.
+     */
+    range: boolean;
+    /**
+     * Renders the component template.
+     *
+     * @returns {TemplateResult} The template result
+     */
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSDatePickerInputSkeleton;
+//# sourceMappingURL=date-picker-input-skeleton.d.ts.map

package/es/components/date-picker/next/components/date-picker-input-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-input-skeleton.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/next/components/date-picker-input-skeleton.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAIpD;;GAEG;AACH,cACM,0BAA2B,SAAQ,UAAU;IACjD;;OAEG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,IAAI,yBAAiC;IAErC;;OAEG;IAEH,KAAK,UAAS;IAEd;;;;OAIG;IACH,MAAM;IAqBN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,0BAA0B,CAAC"}

package/es/components/date-picker/next/components/date-picker-input-skeleton.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "../../../../globals/settings.js";
+import { carbonElement } from "../../../../globals/decorators/carbon-element.js";
+import __decorate from "../../../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import "../../defs.js";
+import date_picker_default from "./date-picker.scss.js";
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/date-picker/next/components/date-picker-input-skeleton.ts
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* Skeleton version of the input box for date picker.
+*/
+let CDSDatePickerInputSkeleton = class CDSDatePickerInputSkeleton extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.hideLabel = false;
+		this.kind = "simple";
+		this.range = false;
+	}
+	/**
+	* Renders the component template.
+	*
+	* @returns {TemplateResult} The template result
+	*/
+	render() {
+		const { hideLabel, range } = this;
+		return html`
+      <div class="${"cds"}--date-picker-input-skeleton-container">
+        ${!hideLabel ? html`<span class="${"cds"}--label"></span>` : null}
+        <div class="${"cds"}--date-picker__input ${"cds"}--skeleton"></div>
+      </div>
+      ${range ? html`
+            <div class="${"cds"}--date-picker-input-skeleton-container">
+              ${!hideLabel ? html`<span class="${"cds"}--label"></span>` : null}
+              <div
+                class="${"cds"}--date-picker__input ${"cds"}--skeleton"></div>
+            </div>
+          ` : null}
+    `;
+	}
+	static {
+		this.styles = date_picker_default;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "hide-label"
+})], CDSDatePickerInputSkeleton.prototype, "hideLabel", void 0);
+__decorate([property({ reflect: true })], CDSDatePickerInputSkeleton.prototype, "kind", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "range"
+})], CDSDatePickerInputSkeleton.prototype, "range", void 0);
+CDSDatePickerInputSkeleton = __decorate([carbonElement(`cds-preview-date-picker-input-skeleton`)], CDSDatePickerInputSkeleton);
+var date_picker_input_skeleton_default = CDSDatePickerInputSkeleton;
+//#endregion
+export { date_picker_input_skeleton_default as default };
+
+//# sourceMappingURL=date-picker-input-skeleton.js.map

package/es/components/date-picker/next/components/date-picker-input-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-input-skeleton.js","names":["styles","customElement"],"sources":["../../../../../src/components/date-picker/next/components/date-picker-input-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../../../globals/settings';\nimport { DATE_PICKER_INPUT_KIND } from '../../defs';\nimport styles from './date-picker.scss?lit';\nimport { carbonElement as customElement } from '../../../../globals/decorators/carbon-element';\n\n/**\n * Skeleton version of the input box for date picker.\n */\n@customElement(`${prefix}-preview-date-picker-input-skeleton`)\nclass CDSDatePickerInputSkeleton extends LitElement {\n  /**\n   * Specify whether the label should be hidden, or not\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  /**\n   * * @deprecated use `range` instead\n   * Date picker input kind. Corresponds to the attribute with the same name.\n   */\n  @property({ reflect: true })\n  kind = DATE_PICKER_INPUT_KIND.SIMPLE;\n\n  /**\n   * Specify whether the skeleton should be of range date picker.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'range' })\n  range = false;\n\n  /**\n   * Renders the component template.\n   *\n   * @returns {TemplateResult} The template result\n   */\n  render() {\n    const { hideLabel, range } = this;\n    return html`\n      <div class=\"${prefix}--date-picker-input-skeleton-container\">\n        ${!hideLabel ? html`<span class=\"${prefix}--label\"></span>` : null}\n        <div class=\"${prefix}--date-picker__input ${prefix}--skeleton\"></div>\n      </div>\n      ${range\n        ? html`\n            <div class=\"${prefix}--date-picker-input-skeleton-container\">\n              ${!hideLabel\n                ? html`<span class=\"${prefix}--label\"></span>`\n                : null}\n              <div\n                class=\"${prefix}--date-picker__input ${prefix}--skeleton\"></div>\n            </div>\n          `\n        : null}\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSDatePickerInputSkeleton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,6BAAA,MACM,mCAAmC,WAAW;;;mBAKtC;;eAaJ;;;;;;;CAOR,SAAS;EACP,MAAM,EAAE,WAAW,UAAU;EAC7B,OAAO,IAAI;0BACY;UACjB,CAAC,YAAY,IAAI,gBAAA,MAAuB,oBAAoB,KAAK;4BAC9C,uBAAA,MAA8B;;QAEnD,QACE,IAAI;gCACmB;gBACjB,CAAC,YACC,IAAI,gBAAA,MAAuB,oBAC3B,KAAK;;+BAES,uBAAA,MAA8B;;cAGpD,KAAK;;CAEb;;gBAEgBA;;AAClB;YA3CG,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAa,CAAC,CAAA,GAAA,2BAAA,WAAA,aAAA,KAAA,CAAA;YAOlE,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,2BAAA,WAAA,QAAA,KAAA,CAAA;YAM1B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAQ,CAAC,CAAA,GAAA,2BAAA,WAAA,SAAA,KAAA,CAAA;yCAlB/DC,cAAc,wCAA8C,CAAA,GAAA,0BAAA;AAkD7D,IAAA,qCAAe"}

package/es/components/date-picker/next/components/date-picker-input.d.ts

@@ -0,0 +1,196 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+import { INPUT_SIZE, DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND } from '../../defs';
+export { DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND };
+declare const CDSDatePickerInput_base: (new (...args: any[]) => {
+    focus(): void;
+}) & typeof LitElement;
+/**
+ * The input box for date picker.
+ *
+ * @element cds-preview-date-picker-input
+ */
+declare class CDSDatePickerInput extends CDSDatePickerInput_base {
+    /**
+     * `true` if there is an AI Label.
+     */
+    private _hasAILabel;
+    /**
+     * Handles `slotchange` event.
+     *
+     * @param {object} root0 - Event object
+     * @param {EventTarget} root0.target - The event target
+     */
+    protected _handleAILabelSlotChange({ target }: Event): void;
+    /**
+     * Handles `click` event on the calendar icon button.
+     * Dispatches a custom event and does NOT move focus to the text input,
+     * matching the React implementation where the icon is a separate button.
+     *
+     * @param {MouseEvent} event - The click event.
+     */
+    private _handleIconButtonClick;
+    /**
+     * Handles `click` event on `<input>` in the shadow DOM.
+     * Dispatches a custom event so the parent date picker can reopen the calendar
+     * when the input already has focus (clicking a focused input does not fire
+     * a new `focus` event, so a dedicated click event is required).
+     */
+    private _handleInputClick;
+    /**
+     * Handles `input` event on `<input>` in the shadow DOM.
+     *
+     * @param {Event} event - The event.
+     * @param {HTMLInputElement} event.target - The event target.
+     */
+    private _handleInput;
+    /**
+     * Handles `focus` event on `<input>` in the shadow DOM.
+     */
+    private _handleFocus;
+    /**
+     * Handles `blur` event on `<input>` in the shadow DOM.
+     */
+    private _handleBlur;
+    /**
+     * @returns The template for the calendar icon button.
+     * Rendered as a focusable-false button (tabindex="-1") so clicking it does
+     * not move focus to the text input — matching the React implementation.
+     */
+    private _renderIcon;
+    /**
+     * `true` if there is helper text content.
+     */
+    protected _hasHelperText: boolean;
+    /**
+     * Handles `slotchange` event on the default `<slot>`.
+     *
+     * @param {object} root0 - Event object
+     * @param {EventTarget} root0.target - The event target
+     */
+    protected _handleSlotChange({ target }: Event): void;
+    /**
+     * The `<input>`, used for Flatpickr to grab.
+     */
+    input: HTMLInputElement;
+    /**
+     * The color scheme.
+     */
+    colorScheme: DATE_PICKER_INPUT_COLOR_SCHEME;
+    /**
+     * `true` if the check box should be disabled.
+     */
+    disabled: boolean;
+    /**
+     * `true` if the label should be hidden.
+     */
+    hideLabel: boolean;
+    /**
+     * Controls the invalid state and visibility of the `validityMessage`.
+     */
+    invalid: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText: string;
+    /**
+     * Date picker input kind.
+     */
+    kind: DATE_PICKER_INPUT_KIND;
+    /**
+     * The label text.
+     */
+    labelText: string;
+    /**
+     * The `pattern` attribute for the `<input>` in the shadow DOM.
+     */
+    pattern: string;
+    /**
+     * The placeholder text.
+     */
+    placeholder: string;
+    /**
+     * Specify if the component should be read-only
+     */
+    readonly: boolean;
+    /**
+     * `true` if the value is required.
+     */
+    required: boolean;
+    /**
+     * true to use the short version.
+     */
+    short: boolean;
+    /**
+     * Vertical size of this date picker input.
+     */
+    size: INPUT_SIZE;
+    /**
+     * The `type` attribute for the `<input>` in the shadow DOM.
+     */
+    type: string;
+    /**
+     * The value.
+     */
+    value: string;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText: string;
+    /**
+     * Renders the component template.
+     *
+     * @returns {TemplateResult} The template result
+     */
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Lifecycle method called after component updates.
+     */
+    updated(): void;
+    /**
+     * The default value for `pattern` property.
+     */
+    static defaultPattern: string;
+    /**
+     * The default value for `type` property.
+     */
+    static defaultType: string;
+    /**
+     * A selector that will return the parent date picker.
+     */
+    static get selectorParent(): string;
+    /**
+     * A selector that will return the slug item.
+     *
+     * remove in v12
+     */
+    static get slugItem(): string;
+    /**
+     * A selector that will return the AI Label item.
+     */
+    static get aiLabelItem(): string;
+    /**
+     * The name of the custom event fired when the input is clicked.
+     */
+    static get inputClickEventName(): string;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: any;
+}
+export default CDSDatePickerInput;
+//# sourceMappingURL=date-picker-input.d.ts.map

package/es/components/date-picker/next/components/date-picker-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-input.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/next/components/date-picker-input.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EACL,UAAU,EACV,8BAA8B,EAC9B,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAQpB,OAAO,EAAE,8BAA8B,EAAE,sBAAsB,EAAE,CAAC;;;;AAElE;;;;GAIG;AACH,cACM,kBAAmB,SAAQ,uBAAsB;IACrD;;OAEG;IACH,OAAO,CAAC,WAAW,CAAS;IAE5B;;;;;OAKG;IACH,SAAS,CAAC,wBAAwB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAoBpD;;;;;;OAMG;IACH,OAAO,CAAC,sBAAsB;IAU9B;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB,CAUvB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,YAAY;IAKpB;;OAEG;IACH,OAAO,CAAC,YAAY,CAWlB;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAWjB;IAEF;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAenB;;OAEG;IAEH,SAAS,CAAC,cAAc,UAAS;IAEjC;;;;;OAKG;IACH,SAAS,CAAC,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAW7C;;OAEG;IAEH,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;OAEG;IAEH,WAAW,iCAA0C;IAErD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,IAAI,yBAAiC;IAErC;;OAEG;IAEH,SAAS,EAAG,MAAM,CAAC;IAEnB;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAG,MAAM,CAAC;IAErB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,UAAS;IAEd;;OAEG;IAEH,IAAI,aAAqB;IAEzB;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,QAAQ,SAAM;IAEd;;;;OAIG;IACH,MAAM;IA6HN;;OAEG;IACH,OAAO;IAmBP;;OAEG;IACH,MAAM,CAAC,cAAc,SAAkC;IAEvD;;OAEG;IACH,MAAM,CAAC,WAAW,SAAU;IAE5B;;OAEG;IACH,MAAM,KAAK,cAAc,WAExB;IAED;;;;OAIG;IACH,MAAM,KAAK,QAAQ,WAElB;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,kBAAkB,CAAC"}