@carbon/web-components 2.60.0 → 2.61.0-rc.0

package/es/components/date-picker/next/adapters/web-component-adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-component-adapter.js","names":[],"sources":["../../../../../src/components/date-picker/next/adapters/web-component-adapter.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 { DatePickerStateMachine } from '@carbon/utilities/date-picker';\nimport {\n  DatePickerState,\n  DatePickerEvent,\n} from '@carbon/utilities/date-picker';\nimport { dateToPlainDate } from '@carbon/utilities/date-picker';\nimport type {\n  DatePickerContext,\n  StateTransition,\n  DateSelectPayload,\n} from '@carbon/utilities/date-picker';\nimport type CDSDatePicker from '../components/date-picker';\n\n/**\n * Adapter configuration\n */\nexport interface AdapterConfig {\n  /** The date picker component instance */\n  component: CDSDatePicker;\n  /** Initial context values */\n  initialContext?: Partial<DatePickerContext>;\n  /** Callback when state changes */\n  onStateChange?: (transition: StateTransition) => void;\n  /** Callback when the calendar should open */\n  onCalendarOpen?: () => void;\n  /** Callback when the calendar should close */\n  onCalendarClose?: () => void;\n  /** Callback when the date is selected */\n  onDateSelect?: (context: DatePickerContext) => void;\n}\n\n/**\n * Web Component Adapter\n * Bridges the state machine with the Web Component implementation\n */\nexport class WebComponentAdapter {\n  private machine: DatePickerStateMachine;\n  private component: CDSDatePicker;\n  private config: AdapterConfig;\n  private unsubscribe?: () => void;\n\n  /**\n   * Create a new adapter\n   *\n   * @param {AdapterConfig} config - Adapter configuration\n   */\n  constructor(config: AdapterConfig) {\n    this.config = config;\n    this.component = config.component;\n    this.machine = new DatePickerStateMachine(config.initialContext);\n\n    // Subscribe to state changes\n    this.unsubscribe = this.machine.subscribe((transition) => {\n      this.handleStateChange(transition);\n    });\n  }\n\n  /**\n   * Send an event to the state machine\n   *\n   * @param {string} event - Event type\n   * @param {unknown} payload - Event payload\n   * @returns Updated context\n   */\n  public send(event: string, payload?: unknown): DatePickerContext {\n    return this.machine.send(event, payload);\n  }\n\n  /**\n   * Get the current state\n   *\n   * @returns Current state\n   */\n  public getState(): DatePickerState {\n    return this.machine.getState();\n  }\n\n  /**\n   * Get the current context\n   *\n   * @returns Current context\n   */\n  public getContext(): DatePickerContext {\n    return this.machine.getContext();\n  }\n\n  /**\n   * Update context directly\n   *\n   * @param {Partial<DatePickerContext>} updates - Context updates\n   * @returns Updated context\n   */\n  public updateContext(updates: Partial<DatePickerContext>): DatePickerContext {\n    return this.machine.updateContext(updates);\n  }\n\n  /**\n   * Check if a transition is valid\n   *\n   * @param {string} event - Event type\n   * @returns True if transition is valid\n   */\n  public canTransition(event: string): boolean {\n    return this.machine.canTransition(event);\n  }\n\n  /**\n   * Handle state changes\n   *\n   * @param {StateTransition} transition - State transition\n   */\n  private handleStateChange(transition: StateTransition): void {\n    const { from, to, context } = transition;\n\n    // Sync component properties with state machine context\n    this.syncComponentProperties(context);\n\n    // Handle specific state transitions\n    this.handleTransitionEffects(from, to, context);\n\n    // Call user callback\n    if (this.config.onStateChange) {\n      this.config.onStateChange(transition);\n    }\n\n    // Dispatch custom event\n    (this.component as unknown as HTMLElement).dispatchEvent(\n      new CustomEvent('cds-preview-date-picker-state-change', {\n        detail: { transition },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Sync component properties with context\n   *\n   * @param {DatePickerContext} context - Current context\n   */\n  private syncComponentProperties(context: DatePickerContext): void {\n    // Sync open state\n    if (this.component.open !== context.isOpen) {\n      this.component.open = context.isOpen;\n    }\n\n    // Sync value\n    if (this.component.value !== context.value) {\n      this.component.value = context.value;\n    }\n\n    // Sync disabled state\n    if (this.component.disabled !== context.isDisabled) {\n      this.component.disabled = context.isDisabled;\n    }\n\n    // Sync readonly state\n    if (this.component.readonly !== context.isReadonly) {\n      this.component.readonly = context.isReadonly;\n    }\n  }\n\n  /**\n   * Handle transition-specific effects\n   *\n   * @param {string} from - Previous state\n   * @param {string} to - New state\n   * @param {DatePickerContext} context - Current context\n   */\n  private handleTransitionEffects(\n    from: string,\n    to: string,\n    context: DatePickerContext\n  ): void {\n    // Handle calendar opening\n    if (\n      to === DatePickerState.CALENDAR_OPEN &&\n      from !== DatePickerState.CALENDAR_OPEN\n    ) {\n      if (this.config.onCalendarOpen) {\n        this.config.onCalendarOpen();\n      }\n    }\n\n    // Handle calendar closing\n    if (\n      from === DatePickerState.CALENDAR_OPEN &&\n      to !== DatePickerState.CALENDAR_OPEN\n    ) {\n      if (this.config.onCalendarClose) {\n        this.config.onCalendarClose();\n      }\n    }\n\n    // Handle date selection\n    if (to === DatePickerState.DATE_SELECTED) {\n      if (this.config.onDateSelect) {\n        this.config.onDateSelect(context);\n      }\n    }\n  }\n\n  /**\n   * Handle calendar date selection\n   * Call this from the calendar's onChange callback\n   *\n   * @param {Date[]} selectedDates - Selected dates from calendar\n   */\n  public handleCalendarChange(selectedDates: Date[]): void {\n    const context = this.getContext();\n\n    if (context.mode === 'single' && selectedDates.length > 0) {\n      const date = dateToPlainDate(selectedDates[0]);\n      this.send(DatePickerEvent.DATE_SELECT, {\n        date,\n      } as DateSelectPayload);\n    } else if (context.mode === 'range') {\n      if (selectedDates.length === 1) {\n        const date = dateToPlainDate(selectedDates[0]);\n        this.send(DatePickerEvent.RANGE_START_SELECT, {\n          date,\n        } as DateSelectPayload);\n      } else if (selectedDates.length === 2) {\n        const date = dateToPlainDate(selectedDates[1]);\n        this.send(DatePickerEvent.RANGE_END_SELECT, {\n          date,\n        } as DateSelectPayload);\n      }\n    }\n  }\n\n  /**\n   * Handle calendar open event\n   */\n  public handleCalendarOpen(): void {\n    const currentState = this.getState();\n    if (currentState !== DatePickerState.CALENDAR_OPEN) {\n      this.send(DatePickerEvent.CALENDAR_OPEN);\n    }\n  }\n\n  /**\n   * Handle calendar close event\n   */\n  public handleCalendarClose(): void {\n    const currentState = this.getState();\n    if (currentState === DatePickerState.CALENDAR_OPEN) {\n      this.send(DatePickerEvent.CALENDAR_CLOSE);\n    }\n  }\n\n  /**\n   * Handle input focus\n   *\n   * @param {('from' | 'to')} inputType - Type of input ('from' or 'to')\n   */\n  public handleInputFocus(inputType: 'from' | 'to'): void {\n    this.send(DatePickerEvent.INPUT_FOCUS, { inputType });\n  }\n\n  /**\n   * Handle input blur\n   */\n  public handleInputBlur(): void {\n    this.send(DatePickerEvent.INPUT_BLUR);\n  }\n\n  /**\n   * Handle outside click\n   */\n  public handleOutsideClick(): void {\n    this.send(DatePickerEvent.OUTSIDE_CLICK);\n  }\n\n  /**\n   * Handle keyboard events\n   *\n   * @param {string} key - Key pressed\n   * @param {boolean} shiftKey - Whether shift key was pressed\n   */\n  public handleKeyboard(key: string, shiftKey = false): void {\n    switch (key) {\n      case 'Escape':\n        this.send(DatePickerEvent.ESCAPE_KEY);\n        break;\n      case 'Tab':\n        if (shiftKey) {\n          this.send(DatePickerEvent.SHIFT_TAB_KEY);\n        } else {\n          this.send(DatePickerEvent.TAB_KEY);\n        }\n        break;\n      case 'Enter':\n        this.send(DatePickerEvent.ENTER_KEY);\n        break;\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Reset the state machine\n   *\n   * @param {Partial<DatePickerContext>} initialContext - Optional new initial context\n   */\n  public reset(initialContext?: Partial<DatePickerContext>): void {\n    this.machine.reset(initialContext);\n  }\n\n  /**\n   * Cleanup and unsubscribe\n   */\n  public destroy(): void {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n}\n"],"mappings":"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"}

package/es/components/date-picker/next/components/calendar-renderer.d.ts

@@ -0,0 +1,136 @@
+/**
+ * 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 type { PropertyValues } from 'lit';
+/**
+ * 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
+ */
+declare class CDSDatePickerCalendar extends LitElement {
+    /**
+     * The currently displayed month (Temporal.PlainYearMonth)
+     */
+    private _currentMonth;
+    /**
+     * The selected date(s)
+     */
+    selectedDates: Temporal.PlainDate[];
+    /**
+     * The view date from the state machine (used to sync calendar month)
+     */
+    viewDate?: Temporal.PlainDate;
+    /**
+     * The focused date for keyboard navigation
+     */
+    focusedDate?: Temporal.PlainDate | null;
+    /**
+     * The currently hovered date (for range preview)
+     */
+    private _hoveredDate?;
+    /**
+     * The minimum selectable date
+     */
+    minDate?: Temporal.PlainDate;
+    /**
+     * The maximum selectable date
+     */
+    maxDate?: Temporal.PlainDate;
+    /**
+     * Whether range selection is enabled
+     */
+    rangeMode: boolean;
+    /**
+     * The date format for display
+     */
+    dateFormat: string;
+    /**
+     * Locale for date formatting
+     */
+    locale: string;
+    /**
+     * Navigate to previous month
+     */
+    private _handlePrevMonth;
+    /**
+     * Navigate to next month
+     */
+    private _handleNextMonth;
+    /**
+     * Handle date selection
+     * @param {Temporal.PlainDate} date - The date to select
+     */
+    private _handleDateSelect;
+    /**
+     * Dispatch month change event
+     */
+    private _dispatchMonthChange;
+    /**
+     * Check if a date is disabled
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    private _isDateDisabled;
+    /**
+     * Check if previous month navigation should be disabled
+     */
+    private _isPrevMonthDisabled;
+    /**
+     * Check if next month navigation should be disabled
+     */
+    private _isNextMonthDisabled;
+    /**
+     * Check if a date is selected
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    private _isDateSelected;
+    /**
+     * Check if a date is in range (for range mode)
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    private _isDateInRange;
+    /**
+     * Check if a date is focused (for keyboard navigation)
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    private _isDateFocused;
+    /**
+     * Handle mouse enter on a date
+     * @param {Temporal.PlainDate} date - The date being hovered
+     */
+    private _handleDateMouseEnter;
+    /**
+     * Handle mouse leave on a date
+     */
+    private _handleDateMouseLeave;
+    /**
+     * Render the calendar header with month/year and navigation
+     */
+    private _renderHeader;
+    /**
+     * Render the weekday headers
+     */
+    private _renderWeekdays;
+    /**
+     * Render the calendar days grid
+     */
+    private _renderDays;
+    /**
+     * Lifecycle method called when properties change
+     * @param {PropertyValues} changedProperties - Changed properties
+     */
+    updated(changedProperties: PropertyValues): void;
+    /**
+     * Renders the calendar component
+     */
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSDatePickerCalendar;
+//# sourceMappingURL=calendar-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-renderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/next/components/calendar-renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAiB1C;;;;;;;GAOG;AACH,cACM,qBAAsB,SAAQ,UAAU;IAC5C;;OAEG;IAEH,OAAO,CAAC,aAAa,CAC4B;IAEjD;;OAEG;IAEH,aAAa,EAAE,QAAQ,CAAC,SAAS,EAAE,CAAM;IAEzC;;OAEG;IAEH,QAAQ,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAE9B;;OAEG;IAEH,WAAW,CAAC,EAAE,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC;IAExC;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAC,CAAqB;IAE1C;;OAEG;IAEH,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAE7B;;OAEG;IAEH,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAE7B;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,UAAU,SAAW;IAErB;;OAEG;IAEH,MAAM,SAAW;IAEjB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAczB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAU5B;;;OAGG;IACH,OAAO,CAAC,eAAe;IAUvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAY5B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAU5B;;;OAGG;IACH,OAAO,CAAC,eAAe;IASvB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAgDtB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAOtB;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAO7B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAK7B;;OAEG;IACH,OAAO,CAAC,aAAa;IAoCrB;;OAEG;IACH,OAAO,CAAC,eAAe;IAcvB;;OAEG;IACH,OAAO,CAAC,WAAW;IA+CnB;;;OAGG;IACH,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAWzC;;OAEG;IACH,MAAM;IAQN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,qBAAqB,CAAC"}

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"}