@api-client/ui 0.5.6 → 0.5.8

package/build/src/md/date-picker/internals/DatePickerCalendar.js

@@ -3,13 +3,27 @@ import { LitElement, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { calendarStyles } from './DatePicker.styles.js';
-import { generateCalendarMonth, addMonths, getMonthNames, isSameDay, formatDate, } from './DatePickerUtils.js';
+import { generateCalendarMonth, addMonths, getMonthNames, isSameDay, formatDate, addDays, } from './DatePickerUtils.js';
 import '../../../md/icons/ui-icon.js';
 import '../../../md/button/ui-button.js';
 import '../../../md/icon-button/ui-icon-button.js';
 /**
  * A calendar grid component for date selection.
- * Supports single date selection and date range selection.
+ * Supports single date selection and date range selection with full keyboard navigation.
+ *
+ * ## Features
+ * - Single date and date range selection
+ * - Keyboard navigation support (arrow keys, home, end, page up/down)
+ * - Configurable date restrictions (min/max dates, disabled dates)
+ * - Localization support for date formatting and month/day names
+ * - Optional action buttons for pending selections
+ * - Accessible design with proper ARIA attributes
+ *
+ * ## Events
+ * - `date-select`: Fired when a single date is selected/confirmed
+ * - `date-range-select`: Fired when a date range is completed (immediate mode)
+ * - `date-range-confirm`: Fired when a date range is confirmed (pending mode)
+ * - `date-cancel`: Fired when a pending selection is cancelled
  *
  * ## Usage
  *
@@ -28,11 +42,24 @@ import '../../../md/icon-button/ui-icon-button.js';
  * ### Date range selection
  * ```html
  * <ui-date-picker-calendar
- *   .rangeSelection=${true}
- *   .selectedRange=${{ start: new Date(), end: null }}
+ *   rangeSelection
+ *   .rangeStart=${new Date()}
+ *   .rangeEnd=${null}
  *   @date-range-select=${this.handleRangeSelect}
  * ></ui-date-picker-calendar>
  * ```
+ *
+ * ### With action buttons and restrictions
+ * ```html
+ * <ui-date-picker-calendar
+ *   rangeSelection
+ *   showActions
+ *   .minDate=${new Date()}
+ *   .maxDate=${new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)}
+ *   @date-range-confirm=${this.handleRangeConfirm}
+ *   @date-cancel=${this.handleCancel}
+ * ></ui-date-picker-calendar>
+ * ```
  */
 let UiDatePickerCalendar = (() => {
     let _classDecorators = [customElement('ui-date-picker-calendar')];
@@ -49,9 +76,12 @@ let UiDatePickerCalendar = (() => {
     let _selectedDate_decorators;
     let _selectedDate_initializers = [];
     let _selectedDate_extraInitializers = [];
-    let _selectedRange_decorators;
-    let _selectedRange_initializers = [];
-    let _selectedRange_extraInitializers = [];
+    let _rangeStart_decorators;
+    let _rangeStart_initializers = [];
+    let _rangeStart_extraInitializers = [];
+    let _rangeEnd_decorators;
+    let _rangeEnd_initializers = [];
+    let _rangeEnd_extraInitializers = [];
     let _rangeSelection_decorators;
     let _rangeSelection_initializers = [];
     let _rangeSelection_extraInitializers = [];
@@ -79,27 +109,30 @@ let UiDatePickerCalendar = (() => {
     let _cancelButtonText_decorators;
     let _cancelButtonText_initializers = [];
     let _cancelButtonText_extraInitializers = [];
-    let __calendarData_decorators;
-    let __calendarData_initializers = [];
-    let __calendarData_extraInitializers = [];
-    let __rangeStart_decorators;
-    let __rangeStart_initializers = [];
-    let __rangeStart_extraInitializers = [];
-    let __monthNames_decorators;
-    let __monthNames_initializers = [];
-    let __monthNames_extraInitializers = [];
-    let __showMonthDropdown_decorators;
-    let __showMonthDropdown_initializers = [];
-    let __showMonthDropdown_extraInitializers = [];
-    let __showYearDropdown_decorators;
-    let __showYearDropdown_initializers = [];
-    let __showYearDropdown_extraInitializers = [];
-    let __pendingDate_decorators;
-    let __pendingDate_initializers = [];
-    let __pendingDate_extraInitializers = [];
-    let __pendingRange_decorators;
-    let __pendingRange_initializers = [];
-    let __pendingRange_extraInitializers = [];
+    let _calendarData_decorators;
+    let _calendarData_initializers = [];
+    let _calendarData_extraInitializers = [];
+    let _monthNames_decorators;
+    let _monthNames_initializers = [];
+    let _monthNames_extraInitializers = [];
+    let _showMonthDropdown_decorators;
+    let _showMonthDropdown_initializers = [];
+    let _showMonthDropdown_extraInitializers = [];
+    let _showYearDropdown_decorators;
+    let _showYearDropdown_initializers = [];
+    let _showYearDropdown_extraInitializers = [];
+    let _pendingDate_decorators;
+    let _pendingDate_initializers = [];
+    let _pendingDate_extraInitializers = [];
+    let _pendingRangeStart_decorators;
+    let _pendingRangeStart_initializers = [];
+    let _pendingRangeStart_extraInitializers = [];
+    let _pendingRangeEnd_decorators;
+    let _pendingRangeEnd_initializers = [];
+    let _pendingRangeEnd_extraInitializers = [];
+    let _focusedDate_decorators;
+    let _focusedDate_initializers = [];
+    let _focusedDate_extraInitializers = [];
     var UiDatePickerCalendar = class extends _classSuper {
         static { _classThis = this; }
         static {
@@ -107,7 +140,8 @@ let UiDatePickerCalendar = (() => {
             _year_decorators = [property({ type: Number })];
             _month_decorators = [property({ type: Number })];
             _selectedDate_decorators = [property({ type: Object })];
-            _selectedRange_decorators = [property({ type: Object })];
+            _rangeStart_decorators = [property({ type: Object })];
+            _rangeEnd_decorators = [property({ type: Object })];
             _rangeSelection_decorators = [property({ type: Boolean })];
             _minDate_decorators = [property({ type: Object })];
             _maxDate_decorators = [property({ type: Object })];
@@ -117,17 +151,19 @@ let UiDatePickerCalendar = (() => {
             _showActions_decorators = [property({ type: Boolean })];
             _okButtonText_decorators = [property({ type: String })];
             _cancelButtonText_decorators = [property({ type: String })];
-            __calendarData_decorators = [state()];
-            __rangeStart_decorators = [state()];
-            __monthNames_decorators = [state()];
-            __showMonthDropdown_decorators = [state()];
-            __showYearDropdown_decorators = [state()];
-            __pendingDate_decorators = [state()];
-            __pendingRange_decorators = [state()];
+            _calendarData_decorators = [state()];
+            _monthNames_decorators = [state()];
+            _showMonthDropdown_decorators = [state()];
+            _showYearDropdown_decorators = [state()];
+            _pendingDate_decorators = [state()];
+            _pendingRangeStart_decorators = [state()];
+            _pendingRangeEnd_decorators = [state()];
+            _focusedDate_decorators = [state()];
             __esDecorate(this, null, _year_decorators, { kind: "accessor", name: "year", static: false, private: false, access: { has: obj => "year" in obj, get: obj => obj.year, set: (obj, value) => { obj.year = value; } }, metadata: _metadata }, _year_initializers, _year_extraInitializers);
             __esDecorate(this, null, _month_decorators, { kind: "accessor", name: "month", static: false, private: false, access: { has: obj => "month" in obj, get: obj => obj.month, set: (obj, value) => { obj.month = value; } }, metadata: _metadata }, _month_initializers, _month_extraInitializers);
             __esDecorate(this, null, _selectedDate_decorators, { kind: "accessor", name: "selectedDate", static: false, private: false, access: { has: obj => "selectedDate" in obj, get: obj => obj.selectedDate, set: (obj, value) => { obj.selectedDate = value; } }, metadata: _metadata }, _selectedDate_initializers, _selectedDate_extraInitializers);
-            __esDecorate(this, null, _selectedRange_decorators, { kind: "accessor", name: "selectedRange", static: false, private: false, access: { has: obj => "selectedRange" in obj, get: obj => obj.selectedRange, set: (obj, value) => { obj.selectedRange = value; } }, metadata: _metadata }, _selectedRange_initializers, _selectedRange_extraInitializers);
+            __esDecorate(this, null, _rangeStart_decorators, { kind: "accessor", name: "rangeStart", static: false, private: false, access: { has: obj => "rangeStart" in obj, get: obj => obj.rangeStart, set: (obj, value) => { obj.rangeStart = value; } }, metadata: _metadata }, _rangeStart_initializers, _rangeStart_extraInitializers);
+            __esDecorate(this, null, _rangeEnd_decorators, { kind: "accessor", name: "rangeEnd", static: false, private: false, access: { has: obj => "rangeEnd" in obj, get: obj => obj.rangeEnd, set: (obj, value) => { obj.rangeEnd = value; } }, metadata: _metadata }, _rangeEnd_initializers, _rangeEnd_extraInitializers);
             __esDecorate(this, null, _rangeSelection_decorators, { kind: "accessor", name: "rangeSelection", static: false, private: false, access: { has: obj => "rangeSelection" in obj, get: obj => obj.rangeSelection, set: (obj, value) => { obj.rangeSelection = value; } }, metadata: _metadata }, _rangeSelection_initializers, _rangeSelection_extraInitializers);
             __esDecorate(this, null, _minDate_decorators, { kind: "accessor", name: "minDate", static: false, private: false, access: { has: obj => "minDate" in obj, get: obj => obj.minDate, set: (obj, value) => { obj.minDate = value; } }, metadata: _metadata }, _minDate_initializers, _minDate_extraInitializers);
             __esDecorate(this, null, _maxDate_decorators, { kind: "accessor", name: "maxDate", static: false, private: false, access: { has: obj => "maxDate" in obj, get: obj => obj.maxDate, set: (obj, value) => { obj.maxDate = value; } }, metadata: _metadata }, _maxDate_initializers, _maxDate_extraInitializers);
@@ -137,13 +173,14 @@ let UiDatePickerCalendar = (() => {
             __esDecorate(this, null, _showActions_decorators, { kind: "accessor", name: "showActions", static: false, private: false, access: { has: obj => "showActions" in obj, get: obj => obj.showActions, set: (obj, value) => { obj.showActions = value; } }, metadata: _metadata }, _showActions_initializers, _showActions_extraInitializers);
             __esDecorate(this, null, _okButtonText_decorators, { kind: "accessor", name: "okButtonText", static: false, private: false, access: { has: obj => "okButtonText" in obj, get: obj => obj.okButtonText, set: (obj, value) => { obj.okButtonText = value; } }, metadata: _metadata }, _okButtonText_initializers, _okButtonText_extraInitializers);
             __esDecorate(this, null, _cancelButtonText_decorators, { kind: "accessor", name: "cancelButtonText", static: false, private: false, access: { has: obj => "cancelButtonText" in obj, get: obj => obj.cancelButtonText, set: (obj, value) => { obj.cancelButtonText = value; } }, metadata: _metadata }, _cancelButtonText_initializers, _cancelButtonText_extraInitializers);
-            __esDecorate(this, null, __calendarData_decorators, { kind: "accessor", name: "_calendarData", static: false, private: false, access: { has: obj => "_calendarData" in obj, get: obj => obj._calendarData, set: (obj, value) => { obj._calendarData = value; } }, metadata: _metadata }, __calendarData_initializers, __calendarData_extraInitializers);
-            __esDecorate(this, null, __rangeStart_decorators, { kind: "accessor", name: "_rangeStart", static: false, private: false, access: { has: obj => "_rangeStart" in obj, get: obj => obj._rangeStart, set: (obj, value) => { obj._rangeStart = value; } }, metadata: _metadata }, __rangeStart_initializers, __rangeStart_extraInitializers);
-            __esDecorate(this, null, __monthNames_decorators, { kind: "accessor", name: "_monthNames", static: false, private: false, access: { has: obj => "_monthNames" in obj, get: obj => obj._monthNames, set: (obj, value) => { obj._monthNames = value; } }, metadata: _metadata }, __monthNames_initializers, __monthNames_extraInitializers);
-            __esDecorate(this, null, __showMonthDropdown_decorators, { kind: "accessor", name: "_showMonthDropdown", static: false, private: false, access: { has: obj => "_showMonthDropdown" in obj, get: obj => obj._showMonthDropdown, set: (obj, value) => { obj._showMonthDropdown = value; } }, metadata: _metadata }, __showMonthDropdown_initializers, __showMonthDropdown_extraInitializers);
-            __esDecorate(this, null, __showYearDropdown_decorators, { kind: "accessor", name: "_showYearDropdown", static: false, private: false, access: { has: obj => "_showYearDropdown" in obj, get: obj => obj._showYearDropdown, set: (obj, value) => { obj._showYearDropdown = value; } }, metadata: _metadata }, __showYearDropdown_initializers, __showYearDropdown_extraInitializers);
-            __esDecorate(this, null, __pendingDate_decorators, { kind: "accessor", name: "_pendingDate", static: false, private: false, access: { has: obj => "_pendingDate" in obj, get: obj => obj._pendingDate, set: (obj, value) => { obj._pendingDate = value; } }, metadata: _metadata }, __pendingDate_initializers, __pendingDate_extraInitializers);
-            __esDecorate(this, null, __pendingRange_decorators, { kind: "accessor", name: "_pendingRange", static: false, private: false, access: { has: obj => "_pendingRange" in obj, get: obj => obj._pendingRange, set: (obj, value) => { obj._pendingRange = value; } }, metadata: _metadata }, __pendingRange_initializers, __pendingRange_extraInitializers);
+            __esDecorate(this, null, _calendarData_decorators, { kind: "accessor", name: "calendarData", static: false, private: false, access: { has: obj => "calendarData" in obj, get: obj => obj.calendarData, set: (obj, value) => { obj.calendarData = value; } }, metadata: _metadata }, _calendarData_initializers, _calendarData_extraInitializers);
+            __esDecorate(this, null, _monthNames_decorators, { kind: "accessor", name: "monthNames", static: false, private: false, access: { has: obj => "monthNames" in obj, get: obj => obj.monthNames, set: (obj, value) => { obj.monthNames = value; } }, metadata: _metadata }, _monthNames_initializers, _monthNames_extraInitializers);
+            __esDecorate(this, null, _showMonthDropdown_decorators, { kind: "accessor", name: "showMonthDropdown", static: false, private: false, access: { has: obj => "showMonthDropdown" in obj, get: obj => obj.showMonthDropdown, set: (obj, value) => { obj.showMonthDropdown = value; } }, metadata: _metadata }, _showMonthDropdown_initializers, _showMonthDropdown_extraInitializers);
+            __esDecorate(this, null, _showYearDropdown_decorators, { kind: "accessor", name: "showYearDropdown", static: false, private: false, access: { has: obj => "showYearDropdown" in obj, get: obj => obj.showYearDropdown, set: (obj, value) => { obj.showYearDropdown = value; } }, metadata: _metadata }, _showYearDropdown_initializers, _showYearDropdown_extraInitializers);
+            __esDecorate(this, null, _pendingDate_decorators, { kind: "accessor", name: "pendingDate", static: false, private: false, access: { has: obj => "pendingDate" in obj, get: obj => obj.pendingDate, set: (obj, value) => { obj.pendingDate = value; } }, metadata: _metadata }, _pendingDate_initializers, _pendingDate_extraInitializers);
+            __esDecorate(this, null, _pendingRangeStart_decorators, { kind: "accessor", name: "pendingRangeStart", static: false, private: false, access: { has: obj => "pendingRangeStart" in obj, get: obj => obj.pendingRangeStart, set: (obj, value) => { obj.pendingRangeStart = value; } }, metadata: _metadata }, _pendingRangeStart_initializers, _pendingRangeStart_extraInitializers);
+            __esDecorate(this, null, _pendingRangeEnd_decorators, { kind: "accessor", name: "pendingRangeEnd", static: false, private: false, access: { has: obj => "pendingRangeEnd" in obj, get: obj => obj.pendingRangeEnd, set: (obj, value) => { obj.pendingRangeEnd = value; } }, metadata: _metadata }, _pendingRangeEnd_initializers, _pendingRangeEnd_extraInitializers);
+            __esDecorate(this, null, _focusedDate_decorators, { kind: "accessor", name: "focusedDate", static: false, private: false, access: { has: obj => "focusedDate" in obj, get: obj => obj.focusedDate, set: (obj, value) => { obj.focusedDate = value; } }, metadata: _metadata }, _focusedDate_initializers, _focusedDate_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             UiDatePickerCalendar = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -151,7 +188,7 @@ let UiDatePickerCalendar = (() => {
         static styles = calendarStyles;
         #year_accessor_storage = __runInitializers(this, _year_initializers, new Date().getFullYear()
         /**
-         * The currently displayed month (0-indexed)
+         * The currently displayed month (0-indexed, where 0 = January)
          */
         );
         /**
@@ -161,158 +198,228 @@ let UiDatePickerCalendar = (() => {
         set year(value) { this.#year_accessor_storage = value; }
         #month_accessor_storage = (__runInitializers(this, _year_extraInitializers), __runInitializers(this, _month_initializers, new Date().getMonth()
         /**
-         * The currently selected date for single selection mode
+         * The currently selected date for single selection mode.
+         * Set to null for no selection.
          */
         ));
         /**
-         * The currently displayed month (0-indexed)
+         * The currently displayed month (0-indexed, where 0 = January)
          */
         get month() { return this.#month_accessor_storage; }
         set month(value) { this.#month_accessor_storage = value; }
         #selectedDate_accessor_storage = (__runInitializers(this, _month_extraInitializers), __runInitializers(this, _selectedDate_initializers, null
         /**
-         * The selected date range for range selection mode
+         * The start date of the selected range for range selection mode.
+         * Used in combination with rangeEnd to define a date range.
          */
         ));
         /**
-         * The currently selected date for single selection mode
+         * The currently selected date for single selection mode.
+         * Set to null for no selection.
          */
         get selectedDate() { return this.#selectedDate_accessor_storage; }
         set selectedDate(value) { this.#selectedDate_accessor_storage = value; }
-        #selectedRange_accessor_storage = (__runInitializers(this, _selectedDate_extraInitializers), __runInitializers(this, _selectedRange_initializers, null
+        #rangeStart_accessor_storage = (__runInitializers(this, _selectedDate_extraInitializers), __runInitializers(this, _rangeStart_initializers, null
         /**
-         * Enable range selection mode
+         * The end date of the selected range for range selection mode.
+         * Used in combination with rangeStart to define a date range.
          */
         ));
         /**
-         * The selected date range for range selection mode
+         * The start date of the selected range for range selection mode.
+         * Used in combination with rangeEnd to define a date range.
          */
-        get selectedRange() { return this.#selectedRange_accessor_storage; }
-        set selectedRange(value) { this.#selectedRange_accessor_storage = value; }
-        #rangeSelection_accessor_storage = (__runInitializers(this, _selectedRange_extraInitializers), __runInitializers(this, _rangeSelection_initializers, false
+        get rangeStart() { return this.#rangeStart_accessor_storage; }
+        set rangeStart(value) { this.#rangeStart_accessor_storage = value; }
+        #rangeEnd_accessor_storage = (__runInitializers(this, _rangeStart_extraInitializers), __runInitializers(this, _rangeEnd_initializers, null
         /**
-         * Minimum selectable date
+         * Enable range selection mode. When true, users can select date ranges
+         * instead of single dates. Affects event dispatching and UI behavior.
          */
         ));
         /**
-         * Enable range selection mode
+         * The end date of the selected range for range selection mode.
+         * Used in combination with rangeStart to define a date range.
+         */
+        get rangeEnd() { return this.#rangeEnd_accessor_storage; }
+        set rangeEnd(value) { this.#rangeEnd_accessor_storage = value; }
+        #rangeSelection_accessor_storage = (__runInitializers(this, _rangeEnd_extraInitializers), __runInitializers(this, _rangeSelection_initializers, false
+        /**
+         * Minimum selectable date. Dates before this will be disabled.
+         * Set to undefined for no minimum restriction.
+         */
+        ));
+        /**
+         * Enable range selection mode. When true, users can select date ranges
+         * instead of single dates. Affects event dispatching and UI behavior.
          */
         get rangeSelection() { return this.#rangeSelection_accessor_storage; }
         set rangeSelection(value) { this.#rangeSelection_accessor_storage = value; }
         #minDate_accessor_storage = (__runInitializers(this, _rangeSelection_extraInitializers), __runInitializers(this, _minDate_initializers, undefined
         /**
-         * Maximum selectable date
+         * Maximum selectable date. Dates after this will be disabled.
+         * Set to undefined for no maximum restriction.
          */
         ));
         /**
-         * Minimum selectable date
+         * Minimum selectable date. Dates before this will be disabled.
+         * Set to undefined for no minimum restriction.
          */
         get minDate() { return this.#minDate_accessor_storage; }
         set minDate(value) { this.#minDate_accessor_storage = value; }
         #maxDate_accessor_storage = (__runInitializers(this, _minDate_extraInitializers), __runInitializers(this, _maxDate_initializers, undefined
         /**
-         * Array of disabled dates
+         * Array of specific dates to disable. These dates will not be selectable
+         * regardless of minDate and maxDate settings.
          */
         ));
         /**
-         * Maximum selectable date
+         * Maximum selectable date. Dates after this will be disabled.
+         * Set to undefined for no maximum restriction.
          */
         get maxDate() { return this.#maxDate_accessor_storage; }
         set maxDate(value) { this.#maxDate_accessor_storage = value; }
         #disabledDates_accessor_storage = (__runInitializers(this, _maxDate_extraInitializers), __runInitializers(this, _disabledDates_initializers, undefined
         /**
-         * Locale for date formatting and month/day names
+         * Locale for date formatting and month/day names (e.g., 'en-US', 'fr-FR').
+         * Defaults to browser locale if not specified.
          */
         ));
         /**
-         * Array of disabled dates
+         * Array of specific dates to disable. These dates will not be selectable
+         * regardless of minDate and maxDate settings.
          */
         get disabledDates() { return this.#disabledDates_accessor_storage; }
         set disabledDates(value) { this.#disabledDates_accessor_storage = value; }
         #locale_accessor_storage = (__runInitializers(this, _disabledDates_extraInitializers), __runInitializers(this, _locale_initializers, undefined
         /**
-         * Whether to show navigation controls
+         * Whether to show navigation controls (previous/next month and year buttons).
+         * When false, users can only navigate using keyboard or programmatically.
          */
         ));
         /**
-         * Locale for date formatting and month/day names
+         * Locale for date formatting and month/day names (e.g., 'en-US', 'fr-FR').
+         * Defaults to browser locale if not specified.
          */
         get locale() { return this.#locale_accessor_storage; }
         set locale(value) { this.#locale_accessor_storage = value; }
         #showNavigation_accessor_storage = (__runInitializers(this, _locale_extraInitializers), __runInitializers(this, _showNavigation_initializers, true
         /**
-         * Whether to show action buttons (OK/Cancel)
+         * Whether to show action buttons (OK/Cancel). When true, selections are pending
+         * until confirmed with the OK button. When false, selections are immediate.
          */
         ));
         /**
-         * Whether to show navigation controls
+         * Whether to show navigation controls (previous/next month and year buttons).
+         * When false, users can only navigate using keyboard or programmatically.
          */
         get showNavigation() { return this.#showNavigation_accessor_storage; }
         set showNavigation(value) { this.#showNavigation_accessor_storage = value; }
         #showActions_accessor_storage = (__runInitializers(this, _showNavigation_extraInitializers), __runInitializers(this, _showActions_initializers, false
         /**
-         * Text for the OK button
+         * Text label for the OK/confirm button. Only visible when showActions is true.
          */
         ));
         /**
-         * Whether to show action buttons (OK/Cancel)
+         * Whether to show action buttons (OK/Cancel). When true, selections are pending
+         * until confirmed with the OK button. When false, selections are immediate.
          */
         get showActions() { return this.#showActions_accessor_storage; }
         set showActions(value) { this.#showActions_accessor_storage = value; }
         #okButtonText_accessor_storage = (__runInitializers(this, _showActions_extraInitializers), __runInitializers(this, _okButtonText_initializers, 'OK'
         /**
-         * Text for the Cancel button
+         * Text label for the Cancel button. Only visible when showActions is true.
          */
         ));
         /**
-         * Text for the OK button
+         * Text label for the OK/confirm button. Only visible when showActions is true.
          */
         get okButtonText() { return this.#okButtonText_accessor_storage; }
         set okButtonText(value) { this.#okButtonText_accessor_storage = value; }
         #cancelButtonText_accessor_storage = (__runInitializers(this, _okButtonText_extraInitializers), __runInitializers(this, _cancelButtonText_initializers, 'Cancel'));
         /**
-         * Text for the Cancel button
+         * Text label for the Cancel button. Only visible when showActions is true.
          */
         get cancelButtonText() { return this.#cancelButtonText_accessor_storage; }
         set cancelButtonText(value) { this.#cancelButtonText_accessor_storage = value; }
-        #_calendarData_accessor_storage = (__runInitializers(this, _cancelButtonText_extraInitializers), __runInitializers(this, __calendarData_initializers, undefined));
-        get _calendarData() { return this.#_calendarData_accessor_storage; }
-        set _calendarData(value) { this.#_calendarData_accessor_storage = value; }
-        #_rangeStart_accessor_storage = (__runInitializers(this, __calendarData_extraInitializers), __runInitializers(this, __rangeStart_initializers, undefined));
-        get _rangeStart() { return this.#_rangeStart_accessor_storage; }
-        set _rangeStart(value) { this.#_rangeStart_accessor_storage = value; }
-        #_monthNames_accessor_storage = (__runInitializers(this, __rangeStart_extraInitializers), __runInitializers(this, __monthNames_initializers, []));
-        get _monthNames() { return this.#_monthNames_accessor_storage; }
-        set _monthNames(value) { this.#_monthNames_accessor_storage = value; }
-        #_showMonthDropdown_accessor_storage = (__runInitializers(this, __monthNames_extraInitializers), __runInitializers(this, __showMonthDropdown_initializers, false));
-        get _showMonthDropdown() { return this.#_showMonthDropdown_accessor_storage; }
-        set _showMonthDropdown(value) { this.#_showMonthDropdown_accessor_storage = value; }
-        #_showYearDropdown_accessor_storage = (__runInitializers(this, __showMonthDropdown_extraInitializers), __runInitializers(this, __showYearDropdown_initializers, false));
-        get _showYearDropdown() { return this.#_showYearDropdown_accessor_storage; }
-        set _showYearDropdown(value) { this.#_showYearDropdown_accessor_storage = value; }
-        #_pendingDate_accessor_storage = (__runInitializers(this, __showYearDropdown_extraInitializers), __runInitializers(this, __pendingDate_initializers, null));
-        get _pendingDate() { return this.#_pendingDate_accessor_storage; }
-        set _pendingDate(value) { this.#_pendingDate_accessor_storage = value; }
-        #_pendingRange_accessor_storage = (__runInitializers(this, __pendingDate_extraInitializers), __runInitializers(this, __pendingRange_initializers, null));
-        get _pendingRange() { return this.#_pendingRange_accessor_storage; }
-        set _pendingRange(value) { this.#_pendingRange_accessor_storage = value; }
+        #calendarData_accessor_storage = (__runInitializers(this, _cancelButtonText_extraInitializers), __runInitializers(this, _calendarData_initializers, undefined));
+        get calendarData() { return this.#calendarData_accessor_storage; }
+        set calendarData(value) { this.#calendarData_accessor_storage = value; }
+        #monthNames_accessor_storage = (__runInitializers(this, _calendarData_extraInitializers), __runInitializers(this, _monthNames_initializers, []));
+        get monthNames() { return this.#monthNames_accessor_storage; }
+        set monthNames(value) { this.#monthNames_accessor_storage = value; }
+        #showMonthDropdown_accessor_storage = (__runInitializers(this, _monthNames_extraInitializers), __runInitializers(this, _showMonthDropdown_initializers, false));
+        get showMonthDropdown() { return this.#showMonthDropdown_accessor_storage; }
+        set showMonthDropdown(value) { this.#showMonthDropdown_accessor_storage = value; }
+        #showYearDropdown_accessor_storage = (__runInitializers(this, _showMonthDropdown_extraInitializers), __runInitializers(this, _showYearDropdown_initializers, false));
+        get showYearDropdown() { return this.#showYearDropdown_accessor_storage; }
+        set showYearDropdown(value) { this.#showYearDropdown_accessor_storage = value; }
+        #pendingDate_accessor_storage = (__runInitializers(this, _showYearDropdown_extraInitializers), __runInitializers(this, _pendingDate_initializers, null));
+        get pendingDate() { return this.#pendingDate_accessor_storage; }
+        set pendingDate(value) { this.#pendingDate_accessor_storage = value; }
+        #pendingRangeStart_accessor_storage = (__runInitializers(this, _pendingDate_extraInitializers), __runInitializers(this, _pendingRangeStart_initializers, null));
+        get pendingRangeStart() { return this.#pendingRangeStart_accessor_storage; }
+        set pendingRangeStart(value) { this.#pendingRangeStart_accessor_storage = value; }
+        #pendingRangeEnd_accessor_storage = (__runInitializers(this, _pendingRangeStart_extraInitializers), __runInitializers(this, _pendingRangeEnd_initializers, null));
+        get pendingRangeEnd() { return this.#pendingRangeEnd_accessor_storage; }
+        set pendingRangeEnd(value) { this.#pendingRangeEnd_accessor_storage = value; }
+        #focusedDate_accessor_storage = (__runInitializers(this, _pendingRangeEnd_extraInitializers), __runInitializers(this, _focusedDate_initializers, null));
+        get focusedDate() { return this.#focusedDate_accessor_storage; }
+        set focusedDate(value) { this.#focusedDate_accessor_storage = value; }
         connectedCallback() {
             super.connectedCallback();
-            this._updateCalendar();
-            this._updateMonthNames();
-            document.addEventListener('keydown', this._handleDocumentKeyDown.bind(this));
+            this.updateCalendar();
+            this.updateMonthNames();
+            this.initializeFocusedDate();
+        }
+        firstUpdated() {
+            // Set initial focus to the calendar container
+            this.updateFocus();
         }
         disconnectedCallback() {
             super.disconnectedCallback();
-            document.removeEventListener('keydown', this._handleDocumentKeyDown.bind(this));
+        }
+        willUpdate(changedProperties) {
+            if (changedProperties.has('year') ||
+                changedProperties.has('month') ||
+                changedProperties.has('selectedDate') ||
+                changedProperties.has('rangeStart') ||
+                changedProperties.has('rangeEnd') ||
+                changedProperties.has('disabledDates') ||
+                changedProperties.has('locale')) {
+                this.updateCalendar();
+            }
+            if (changedProperties.has('locale')) {
+                this.updateMonthNames();
+            }
+            // Update focused date when month/year changes via navigation
+            if (changedProperties.has('year') || changedProperties.has('month')) {
+                this.updateFocusedDateForMonthChange();
+            }
         }
         updated(changedProperties) {
-            if (changedProperties.has('_showYearDropdown') && this._showYearDropdown) {
+            if (changedProperties.has('showYearDropdown') && this.showYearDropdown) {
                 // Scroll selected year into view
-                this._scrollSelectedYearIntoView();
+                this.scrollSelectedYearIntoView();
+            }
+            if (changedProperties.has('focusedDate')) {
+                this.updateFocus();
+            }
+        }
+        updateFocus() {
+            if (!this.focusedDate)
+                return;
+            // Find the button for the focused date and set focus
+            const dateString = this.focusedDate.toISOString().split('T')[0];
+            const focusedButton = this.shadowRoot?.querySelector(`[data-date="${dateString}"]`);
+            if (focusedButton && !focusedButton.hasAttribute('disabled')) {
+                // Use requestAnimationFrame to ensure DOM is updated
+                requestAnimationFrame(() => {
+                    focusedButton.focus();
+                });
             }
         }
-        _scrollSelectedYearIntoView() {
+        scrollSelectedYearIntoView() {
             // Wait for next frame to ensure DOM is updated
             requestAnimationFrame(() => {
                 const selectedYearButton = this.shadowRoot?.querySelector('.year-option.selected');
@@ -324,139 +431,273 @@ let UiDatePickerCalendar = (() => {
                 }
             });
         }
-        willUpdate(changedProperties) {
-            if (changedProperties.has('year') ||
-                changedProperties.has('month') ||
-                changedProperties.has('selectedDate') ||
-                changedProperties.has('selectedRange') ||
-                changedProperties.has('disabledDates') ||
-                changedProperties.has('locale')) {
-                this._updateCalendar();
+        updateFocusedDateForMonthChange() {
+            if (!this.focusedDate) {
+                this.initializeFocusedDate();
+                return;
             }
-            if (changedProperties.has('locale')) {
-                this._updateMonthNames();
+            // Keep the same day of month if possible
+            const targetDay = this.focusedDate.getDate();
+            const newDate = new Date(this.year, this.month, targetDay);
+            // Check if the target date exists in the new month and is not disabled
+            if (newDate.getMonth() === this.month && !this.isDateDisabled(newDate)) {
+                this.focusedDate = newDate;
+            }
+            else {
+                // Find the closest available date
+                this.focusedDate = this.findFirstAvailableDate();
             }
         }
-        _updateCalendar() {
-            this._calendarData = generateCalendarMonth(this.year, this.month, this.selectedDate, this.selectedRange, this.disabledDates, this.locale);
+        updateCalendar() {
+            const selectedRange = this.rangeStart || this.rangeEnd ? { start: this.rangeStart, end: this.rangeEnd } : null;
+            this.calendarData = generateCalendarMonth(this.year, this.month, this.selectedDate, selectedRange, this.disabledDates, this.locale);
         }
-        _updateMonthNames() {
-            this._monthNames = getMonthNames(this.locale);
+        updateMonthNames() {
+            this.monthNames = getMonthNames(this.locale);
         }
-        _navigateMonth(delta) {
+        navigateMonth(delta) {
             const newDate = addMonths(new Date(this.year, this.month), delta);
             this.year = newDate.getFullYear();
             this.month = newDate.getMonth();
         }
-        _handlePrevMonth() {
-            this._navigateMonth(-1);
+        handlePrevMonth() {
+            this.navigateMonth(-1);
         }
-        _handleNextMonth() {
-            this._navigateMonth(1);
+        handleNextMonth() {
+            this.navigateMonth(1);
         }
-        _handlePrevYear() {
+        handlePrevYear() {
             this.year = this.year - 1;
         }
-        _handleNextYear() {
+        handleNextYear() {
             this.year = this.year + 1;
         }
-        _handleMonthClick() {
-            this._showMonthDropdown = !this._showMonthDropdown;
-            this._showYearDropdown = false;
+        handleMonthClick() {
+            this.showMonthDropdown = !this.showMonthDropdown;
+            this.showYearDropdown = false;
         }
-        _handleYearClick() {
-            this._showYearDropdown = !this._showYearDropdown;
-            this._showMonthDropdown = false;
+        handleYearClick() {
+            this.showYearDropdown = !this.showYearDropdown;
+            this.showMonthDropdown = false;
         }
-        _handleMonthSelect(selectedMonth) {
+        handleMonthSelect(selectedMonth) {
             this.month = selectedMonth;
-            this._showMonthDropdown = false;
+            this.showMonthDropdown = false;
         }
-        _handleYearSelect(selectedYear) {
+        handleYearSelect(selectedYear) {
             this.year = selectedYear;
-            this._showYearDropdown = false;
+            this.showYearDropdown = false;
+        }
+        closeDropdowns() {
+            this.showMonthDropdown = false;
+            this.showYearDropdown = false;
+        }
+        navigateDate(delta) {
+            if (!this.focusedDate)
+                return;
+            const newDate = addDays(this.focusedDate, delta);
+            // Check if new date is in current month or if we should navigate to next/previous month
+            if (newDate.getMonth() !== this.month || newDate.getFullYear() !== this.year) {
+                // Navigate to next/previous month
+                if (delta > 0) {
+                    this.navigateMonth(1);
+                }
+                else {
+                    this.navigateMonth(-1);
+                }
+                // Set focused date to the target date in the new month
+                this.focusedDate = newDate;
+                return;
+            }
+            // Check if new date is disabled
+            if (this.isDateDisabled(newDate)) {
+                // Try to find next available date
+                const availableDate = this.findNextAvailableDate(newDate, delta > 0);
+                if (availableDate) {
+                    this.focusedDate = availableDate;
+                }
+            }
+            else {
+                this.focusedDate = newDate;
+            }
         }
-        _closeDropdowns() {
-            this._showMonthDropdown = false;
-            this._showYearDropdown = false;
+        findNextAvailableDate(startDate, forward) {
+            const direction = forward ? 1 : -1;
+            for (let i = 1; i <= 31; i++) {
+                const date = addDays(startDate, i * direction);
+                if (date.getMonth() !== this.month)
+                    break; // Out of current month
+                if (!this.isDateDisabled(date)) {
+                    return date;
+                }
+            }
+            return null;
         }
-        _handleDocumentKeyDown(event) {
-            if (event.key === 'Escape') {
-                this._closeDropdowns();
+        focusFirstDayOfMonth() {
+            const firstDay = new Date(this.year, this.month, 1);
+            if (!this.isDateDisabled(firstDay)) {
+                this.focusedDate = firstDay;
+            }
+            else {
+                this.focusedDate = this.findFirstAvailableDate();
+            }
+        }
+        focusLastDayOfMonth() {
+            const lastDay = new Date(this.year, this.month + 1, 0);
+            if (!this.isDateDisabled(lastDay)) {
+                this.focusedDate = lastDay;
+            }
+            else {
+                // Find last available date in month
+                for (let i = lastDay.getDate(); i >= 1; i--) {
+                    const date = new Date(this.year, this.month, i);
+                    if (!this.isDateDisabled(date)) {
+                        this.focusedDate = date;
+                        break;
+                    }
+                }
             }
         }
-        _handleDayClick(day) {
+        selectFocusedDate() {
+            if (!this.focusedDate || this.isDateDisabled(this.focusedDate))
+                return;
+            if (this.rangeSelection) {
+                this.handleRangeSelection(this.focusedDate);
+            }
+            else {
+                this.handleSingleSelection(this.focusedDate);
+            }
+        }
+        handleDayClick(day) {
             if (day.isDisabled)
                 return;
+            // Update focused date to clicked date
+            this.focusedDate = day.date;
             if (this.rangeSelection) {
-                this._handleRangeSelection(day.date);
+                this.handleRangeSelection(day.date);
             }
             else {
-                this._handleSingleSelection(day.date);
+                this.handleSingleSelection(day.date);
             }
         }
-        _handleSingleSelection(date) {
+        handleSingleSelection(date) {
             if (this.showActions) {
                 // Use pending state when actions are enabled
-                this._pendingDate = date;
+                this.pendingDate = date;
             }
             else {
                 // Immediate selection when no actions
                 this.selectedDate = date;
-                const event = {
-                    date,
-                    formattedDate: formatDate(date, this.locale),
-                };
-                this.dispatchEvent(new CustomEvent('date-select', {
-                    detail: event,
-                    bubbles: true,
-                    composed: true,
-                }));
-            }
-        }
-        _handleRangeSelection(date) {
-            if (!this._rangeStart || (this.selectedRange?.start && this.selectedRange?.end)) {
-                // Start new range
-                this._rangeStart = date;
-                const newRange = { start: date, end: null };
-                if (this.showActions) {
-                    // Use pending state when actions are enabled
-                    this._pendingRange = newRange;
-                }
-                else {
-                    this.selectedRange = newRange;
+                this.dispatchDateEvent(date);
+            }
+        }
+        handleRangeSelection(date) {
+            const isImmediate = !this.showActions;
+            const { start, end } = this.getCurrentRange();
+            // If we have a complete range, start a new one
+            if (start && end) {
+                this.setRangeValues(date, null, isImmediate);
+                return;
+            }
+            // If we have a start but no end, complete the range
+            if (start && !end) {
+                const sortedRange = start <= date ? { start, end: date } : { start: date, end: start };
+                this.setRangeValues(sortedRange.start, sortedRange.end, isImmediate);
+                if (isImmediate) {
+                    this.dispatchRangeEvent(sortedRange);
                 }
+                return;
+            }
+            // Start new range
+            this.setRangeValues(date, null, isImmediate);
+        }
+        /**
+         * Helper to get the current range state (either immediate or pending)
+         */
+        getCurrentRange() {
+            const isImmediate = !this.showActions;
+            return {
+                start: isImmediate ? this.rangeStart : this.pendingRangeStart,
+                end: isImmediate ? this.rangeEnd : this.pendingRangeEnd,
+            };
+        }
+        /**
+         * Helper to check if we have a complete range in the current mode
+         */
+        hasCompleteRange() {
+            const { start, end } = this.getCurrentRange();
+            return !!(start && end);
+        }
+        setRangeValues(start, end, isImmediate) {
+            if (isImmediate) {
+                this.rangeStart = start;
+                this.rangeEnd = end;
             }
             else {
-                // Complete range
-                const start = this._rangeStart;
-                const end = date;
-                // Ensure start is before end
-                const sortedRange = start <= end ? { start, end } : { start: end, end: start };
-                this._rangeStart = undefined;
-                if (this.showActions) {
-                    // Use pending state when actions are enabled
-                    this._pendingRange = sortedRange;
-                }
-                else {
-                    // Immediate selection when no actions
-                    this.selectedRange = sortedRange;
-                    const event = {
-                        range: sortedRange,
-                        formattedRange: {
-                            start: sortedRange.start ? formatDate(sortedRange.start, this.locale) : null,
-                            end: sortedRange.end ? formatDate(sortedRange.end, this.locale) : null,
-                        },
-                    };
-                    this.dispatchEvent(new CustomEvent('date-range-select', {
-                        detail: event,
-                        bubbles: true,
-                        composed: true,
-                    }));
-                }
+                this.pendingRangeStart = start;
+                this.pendingRangeEnd = end;
             }
         }
-        _isDateDisabled(date) {
+        /**
+         * Helper to dispatch date selection events
+         */
+        dispatchDateEvent(date) {
+            const event = {
+                date,
+                formattedDate: formatDate(date, this.locale),
+            };
+            this.dispatchEvent(new CustomEvent('date-select', {
+                detail: event,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        /**
+         * Helper to dispatch range selection events
+         */
+        dispatchRangeEvent(range) {
+            const event = {
+                range,
+                formattedRange: {
+                    start: formatDate(range.start, this.locale),
+                    end: formatDate(range.end, this.locale),
+                },
+            };
+            this.dispatchEvent(new CustomEvent('date-range-select', {
+                detail: event,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        /**
+         * Helper to dispatch range confirmation events
+         */
+        dispatchRangeConfirmEvent(range) {
+            const event = {
+                range,
+                formattedRange: {
+                    start: range?.start ? formatDate(range.start, this.locale) : null,
+                    end: range?.end ? formatDate(range.end, this.locale) : null,
+                },
+            };
+            this.dispatchEvent(new CustomEvent('date-range-confirm', {
+                detail: event,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        /**
+         * Helper to dispatch cancel events
+         */
+        dispatchCancelEvent(reason = 'user_cancelled') {
+            const event = { reason };
+            this.dispatchEvent(new CustomEvent('date-cancel', {
+                detail: event,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        isDateDisabled(date) {
             if (this.minDate && date < this.minDate)
                 return true;
             if (this.maxDate && date > this.maxDate)
@@ -465,249 +706,223 @@ let UiDatePickerCalendar = (() => {
                 return true;
             return false;
         }
-        _handleConfirm() {
+        handleConfirm() {
             if (this.rangeSelection) {
-                if (this._pendingRange) {
-                    this.selectedRange = this._pendingRange;
-                    const event = {
-                        range: this._pendingRange,
-                        formattedRange: {
-                            start: this._pendingRange.start ? formatDate(this._pendingRange.start, this.locale) : null,
-                            end: this._pendingRange.end ? formatDate(this._pendingRange.end, this.locale) : null,
-                        },
-                    };
-                    this.dispatchEvent(new CustomEvent('date-range-confirm', {
-                        detail: event,
-                        bubbles: true,
-                        composed: true,
-                    }));
+                if (this.pendingRangeStart || this.pendingRangeEnd) {
+                    this.rangeStart = this.pendingRangeStart;
+                    this.rangeEnd = this.pendingRangeEnd;
+                    const range = this.rangeStart || this.rangeEnd ? { start: this.rangeStart, end: this.rangeEnd } : null;
+                    // Reset pending state after confirmation
+                    this.pendingRangeStart = null;
+                    this.pendingRangeEnd = null;
+                    this.dispatchRangeConfirmEvent(range);
                 }
             }
             else {
-                if (this._pendingDate) {
-                    this.selectedDate = this._pendingDate;
-                    const event = {
-                        date: this._pendingDate,
-                        formattedDate: formatDate(this._pendingDate, this.locale),
-                    };
-                    this.dispatchEvent(new CustomEvent('date-select', {
-                        detail: event,
-                        bubbles: true,
-                        composed: true,
-                    }));
+                if (this.pendingDate) {
+                    this.selectedDate = this.pendingDate;
+                    // Reset pending state after confirmation
+                    this.pendingDate = null;
+                    this.dispatchDateEvent(this.selectedDate);
                 }
             }
         }
-        _handleCancel() {
+        handleCancel() {
             // Reset pending state
-            this._pendingDate = null;
-            this._pendingRange = null;
-            this._rangeStart = undefined;
-            const event = {
-                reason: 'user_cancelled',
-            };
-            this.dispatchEvent(new CustomEvent('date-cancel', {
-                detail: event,
-                bubbles: true,
-                composed: true,
-            }));
+            this.pendingDate = null;
+            this.pendingRangeStart = null;
+            this.pendingRangeEnd = null;
+            this.dispatchCancelEvent();
+        }
+        /**
+         * Helper to render navigation buttons
+         */
+        renderNavButton(direction, onClick, ariaLabel, icon) {
+            if (!this.showNavigation || this.showMonthDropdown || this.showYearDropdown) {
+                return nothing;
+            }
+            return html `<ui-icon-button
+      class="nav-button"
+      size="xs"
+      @click=${onClick}
+      aria-label=${ariaLabel}
+      title=${ariaLabel}
+    >
+      <ui-icon icon=${icon}></ui-icon>
+    </ui-icon-button>`;
         }
-        _renderNavigation() {
-            const monthName = this._monthNames[this.month] || '';
+        renderNavigation() {
+            const monthName = this.monthNames[this.month] || '';
             return html `
       <div class="header">
         <div class="month-year">
           <div class="month-selector">
-            ${this.showNavigation && !this._showMonthDropdown && !this._showYearDropdown
-                ? html `
-                  <ui-icon-button
-                    class="nav-button month-nav"
-                    size="xs"
-                    @click=${this._handlePrevMonth}
-                    aria-label="Previous month"
-                    title="Previous month"
-                  >
-                    <ui-icon icon="chevronLeft"></ui-icon>
-                  </ui-icon-button>
-                `
-                : ''}
+            ${this.renderNavButton('prev', this.handlePrevMonth, 'Previous month', 'chevronLeft')}
             <ui-button
               class="month-button"
               color="text"
               size="xs"
-              @click=${this._handleMonthClick}
+              @click=${this.handleMonthClick}
               aria-label="Select month"
-              aria-expanded=${this._showMonthDropdown}
+              aria-expanded=${this.showMonthDropdown}
               trailingIcon
             >
               ${monthName}
               <ui-icon icon="arrowDropDown" slot="icon"></ui-icon>
             </ui-button>
-            ${this.showNavigation && !this._showMonthDropdown && !this._showYearDropdown
-                ? html `
-                  <ui-icon-button
-                    class="nav-button month-nav"
-                    size="xs"
-                    @click=${this._handleNextMonth}
-                    aria-label="Next month"
-                    title="Next month"
-                  >
-                    <ui-icon icon="chevronRight"></ui-icon>
-                  </ui-icon-button>
-                `
-                : ''}
+            ${this.renderNavButton('next', this.handleNextMonth, 'Next month', 'chevronRight')}
           </div>
           <div class="year-selector">
-            ${this.showNavigation && !this._showMonthDropdown && !this._showYearDropdown
-                ? html `
-                  <ui-icon-button
-                    class="nav-button year-nav"
-                    size="xs"
-                    @click=${this._handlePrevYear}
-                    aria-label="Previous year"
-                    title="Previous year"
-                  >
-                    <ui-icon icon="chevronLeft"></ui-icon>
-                  </ui-icon-button>
-                `
-                : ''}
+            ${this.renderNavButton('prev', this.handlePrevYear, 'Previous year', 'chevronLeft')}
             <ui-button
               class="year-button"
               color="text"
               size="xs"
-              @click=${this._handleYearClick}
+              @click=${this.handleYearClick}
               aria-label="Select year"
-              aria-expanded=${this._showYearDropdown}
+              aria-expanded=${this.showYearDropdown}
               trailingIcon
             >
               ${this.year}
               <ui-icon icon="arrowDropDown" slot="icon"></ui-icon>
             </ui-button>
-            ${this.showNavigation && !this._showMonthDropdown && !this._showYearDropdown
-                ? html `
-                  <ui-icon-button
-                    class="nav-button year-nav"
-                    size="xs"
-                    @click=${this._handleNextYear}
-                    aria-label="Next year"
-                    title="Next year"
-                  >
-                    <ui-icon icon="chevronRight"></ui-icon>
-                  </ui-icon-button>
-                `
-                : ''}
+            ${this.renderNavButton('next', this.handleNextYear, 'Next year', 'chevronRight')}
           </div>
         </div>
       </div>
     `;
         }
-        _renderWeekdays() {
-            if (!this._calendarData)
+        renderWeekdays() {
+            if (!this.calendarData)
                 return html ``;
             return html `
-      <div class="weekdays">
-        ${this._calendarData.weekdays.map((weekday) => html `<div class="weekday">${weekday}</div>`)}
+      <div class="weekdays" role="row">
+        ${this.calendarData.weekdays.map((weekday) => html `<div class="weekday" role="columnheader">${weekday}</div>`)}
       </div>
     `;
         }
-        _renderDay(day) {
-            const isPendingSelected = this.showActions && this._pendingDate && isSameDay(day.date, this._pendingDate);
-            const isPendingRangeStart = this.showActions && this._pendingRange?.start && isSameDay(day.date, this._pendingRange.start);
-            const isPendingRangeEnd = this.showActions && this._pendingRange?.end && isSameDay(day.date, this._pendingRange.end);
-            const isPendingInRange = this.showActions &&
-                this._pendingRange?.start &&
-                this._pendingRange?.end &&
-                day.date >= this._pendingRange.start &&
-                day.date <= this._pendingRange.end &&
-                !isPendingRangeStart &&
-                !isPendingRangeEnd;
-            // Determine button color based on selection state
-            let color = 'text';
+        /**
+         * Helper to determine day selection state for rendering
+         */
+        getDaySelectionState(day) {
             if (this.showActions) {
-                if (isPendingRangeStart || isPendingRangeEnd || isPendingSelected) {
-                    color = 'filled';
-                }
-                else if (isPendingInRange) {
-                    color = 'text';
-                }
+                // Use pending state
+                const isPendingSelected = this.pendingDate && isSameDay(day.date, this.pendingDate);
+                const isPendingRangeStart = this.pendingRangeStart && isSameDay(day.date, this.pendingRangeStart);
+                const isPendingRangeEnd = this.pendingRangeEnd && isSameDay(day.date, this.pendingRangeEnd);
+                const isPendingInRange = this.pendingRangeStart &&
+                    this.pendingRangeEnd &&
+                    day.date >= this.pendingRangeStart &&
+                    day.date <= this.pendingRangeEnd &&
+                    !isPendingRangeStart &&
+                    !isPendingRangeEnd;
+                return {
+                    isSelected: !!isPendingSelected,
+                    isRangeStart: !!isPendingRangeStart,
+                    isRangeEnd: !!isPendingRangeEnd,
+                    isInRange: !!isPendingInRange,
+                };
             }
             else {
-                if (day.isRangeStart || day.isRangeEnd || day.isSelected) {
-                    color = 'filled';
-                }
-                else if (day.isInRange) {
-                    color = 'text';
-                }
+                // Use immediate state
+                return {
+                    isSelected: day.isSelected,
+                    isRangeStart: day.isRangeStart,
+                    isRangeEnd: day.isRangeEnd,
+                    isInRange: day.isInRange,
+                };
+            }
+        }
+        /**
+         * Helper to determine button color for a day
+         */
+        getDayButtonColor(day, selectionState) {
+            if (selectionState.isRangeStart || selectionState.isRangeEnd || selectionState.isSelected) {
+                return 'filled';
+            }
+            if (selectionState.isInRange) {
+                return 'text';
             }
-            if (day.isToday && color === 'text') {
-                color = 'outlined';
+            if (day.isToday) {
+                return 'outlined';
             }
+            return 'text';
+        }
+        renderDay(day) {
+            const selectionState = this.getDaySelectionState(day);
+            const color = this.getDayButtonColor(day, selectionState);
             const classes = {
                 'day-cell': true,
                 'other-month': !day.isCurrentMonth,
                 'today': day.isToday,
-                'in-range': this.showActions ? !!isPendingInRange : day.isInRange,
-                'range-start': this.showActions ? !!isPendingRangeStart : day.isRangeStart,
-                'range-end': this.showActions ? !!isPendingRangeEnd : day.isRangeEnd,
-                'has-complete-range': this.showActions
-                    ? !!(this._pendingRange?.start && this._pendingRange?.end)
-                    : !!(this.selectedRange?.start && this.selectedRange?.end),
+                'in-range': selectionState.isInRange,
+                'range-start': selectionState.isRangeStart,
+                'range-end': selectionState.isRangeEnd,
+                'has-complete-range': this.hasCompleteRange(),
             };
+            const isFocused = this.focusedDate && isSameDay(day.date, this.focusedDate);
             return html `
-      <div class=${classMap(classes)}>
+      <div class=${classMap(classes)} role="gridcell">
         <ui-button
           class="day-button"
           color=${color}
           size="s"
           data-date=${day.date.toISOString().split('T')[0]}
-          tabindex=${day.isToday && !(day.isDisabled || this._isDateDisabled(day.date)) ? '0' : '-1'}
+          tabindex=${isFocused && !(day.isDisabled || this.isDateDisabled(day.date)) ? '0' : '-1'}
           aria-label=${formatDate(day.date, this.locale)}
-          @click=${() => this._handleDayClick(day)}
-          ?disabled=${day.isDisabled || this._isDateDisabled(day.date)}
+          aria-selected=${selectionState.isSelected || selectionState.isRangeStart || selectionState.isRangeEnd}
+          @click=${() => this.handleDayClick(day)}
+          ?disabled=${day.isDisabled || this.isDateDisabled(day.date)}
         >
           ${day.date.getDate()}
         </ui-button>
       </div>
     `;
         }
-        _renderDays() {
-            if (!this._calendarData)
+        renderDays() {
+            if (!this.calendarData)
                 return html ``;
-            return html `<div class="days">${this._calendarData.days.map((day) => this._renderDay(day))}</div>`;
+            return html `<div class="days">${this.calendarData.days.map((day) => this.renderDay(day))}</div>`;
         }
-        _renderActions() {
+        renderActions() {
             if (!this.showActions)
                 return nothing;
-            const hasSelection = this.rangeSelection ? this._pendingRange?.start : this._pendingDate;
+            const hasSelection = this.rangeSelection ? this.pendingRangeStart : this.pendingDate;
             return html `
       <div class="actions">
-        <ui-button size="s" color="text" @click=${this._handleCancel}>${this.cancelButtonText}</ui-button>
-        <ui-button size="s" color="text" @click=${this._handleConfirm} ?disabled=${!hasSelection}>
+        <ui-button size="s" color="text" @click=${this.handleCancel}>${this.cancelButtonText}</ui-button>
+        <ui-button size="s" color="text" @click=${this.handleConfirm} ?disabled=${!hasSelection}>
           ${this.okButtonText}
         </ui-button>
       </div>
     `;
         }
-        _renderMonthDropdown() {
+        /**
+         * Helper to render dropdown option buttons
+         */
+        renderDropdownOption(value, label, isSelected, onClick, className = '') {
+            return html `
+      <ui-button
+        class="dropdown-option ${className} ${isSelected ? 'selected' : ''}"
+        color=${isSelected ? 'filled' : 'text'}
+        size="s"
+        @click=${onClick}
+        aria-label=${label}
+      >
+        ${label}
+      </ui-button>
+    `;
+        }
+        renderMonthDropdown() {
             return html `
       <div class="dropdown-view">
         <div class="month-list">
-          ${this._monthNames.map((monthName, index) => html `
-              <ui-button
-                class="month-option ${index === this.month ? 'selected' : ''}"
-                color=${index === this.month ? 'filled' : 'text'}
-                size="s"
-                @click=${() => this._handleMonthSelect(index)}
-                aria-label=${monthName}
-              >
-                ${monthName}
-              </ui-button>
-            `)}
+          ${this.monthNames.map((monthName, index) => this.renderDropdownOption(index, monthName, index === this.month, () => this.handleMonthSelect(index)))}
         </div>
       </div>
     `;
         }
-        _renderYearDropdown() {
+        renderYearDropdown() {
             const currentYear = this.year;
             const startYear = currentYear - 50;
             const endYear = currentYear + 50;
@@ -718,47 +933,124 @@ let UiDatePickerCalendar = (() => {
             return html `
       <div class="dropdown-view">
         <div class="year-grid">
-          ${years.map((year) => html `
-              <ui-button
-                class="year-option ${year === this.year ? 'selected' : ''}"
-                color=${year === this.year ? 'filled' : 'text'}
-                size="s"
-                @click=${() => this._handleYearSelect(year)}
-                aria-label=${year.toString()}
-              >
-                ${year}
-              </ui-button>
-            `)}
+          ${years.map((year) => this.renderDropdownOption(year, year.toString(), year === this.year, () => this.handleYearSelect(year), 'year-option'))}
         </div>
       </div>
     `;
         }
+        findFirstAvailableDate() {
+            const firstDayOfMonth = new Date(this.year, this.month, 1);
+            for (let i = 0; i < 31; i++) {
+                const date = addDays(firstDayOfMonth, i);
+                if (date.getMonth() !== this.month)
+                    break; // Next month
+                if (!this.isDateDisabled(date)) {
+                    return date;
+                }
+            }
+            return firstDayOfMonth; // Fallback
+        }
+        handleKeyDown(event) {
+            // Prevent default behavior for navigation keys
+            const navigationKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown', ' '];
+            if (navigationKeys.includes(event.key)) {
+                event.preventDefault();
+            }
+            switch (event.key) {
+                case 'ArrowLeft':
+                    this.navigateDate(-1);
+                    break;
+                case 'ArrowRight':
+                    this.navigateDate(1);
+                    break;
+                case 'ArrowUp':
+                    this.navigateDate(-7);
+                    break;
+                case 'ArrowDown':
+                    this.navigateDate(7);
+                    break;
+                case 'Enter':
+                case ' ':
+                    this.selectFocusedDate();
+                    break;
+                case 'Home':
+                    this.focusFirstDayOfMonth();
+                    break;
+                case 'End':
+                    this.focusLastDayOfMonth();
+                    break;
+                case 'PageUp':
+                    if (event.shiftKey) {
+                        this.handlePrevYear();
+                    }
+                    else {
+                        this.navigateMonth(-1);
+                    }
+                    break;
+                case 'PageDown':
+                    if (event.shiftKey) {
+                        this.handleNextYear();
+                    }
+                    else {
+                        this.navigateMonth(1);
+                    }
+                    break;
+                case 'Escape':
+                    this.closeDropdowns();
+                    break;
+            }
+        }
+        /**
+         * Helper to check if a date is in the current month and not disabled
+         */
+        isDateAvailable(date) {
+            return date.getMonth() === this.month && date.getFullYear() === this.year && !this.isDateDisabled(date);
+        }
+        initializeFocusedDate() {
+            // Priority: selectedDate, rangeStart, today, first available date
+            const candidates = [this.selectedDate, this.rangeStart, new Date()].filter(Boolean);
+            for (const candidate of candidates) {
+                if (this.isDateAvailable(candidate)) {
+                    this.focusedDate = candidate;
+                    return;
+                }
+            }
+            // Fallback to first available date in current month
+            this.focusedDate = this.findFirstAvailableDate();
+        }
         render() {
             // Show dropdown views instead of calendar when dropdowns are open
-            if (this._showMonthDropdown) {
+            if (this.showMonthDropdown) {
                 return html `
-        <div class="calendar" role="grid" aria-label="Calendar">
-          ${this._renderNavigation()} ${this._renderMonthDropdown()}
+        <div class="calendar" role="grid" aria-label="Month selection for ${this.year}">
+          ${this.renderNavigation()} ${this.renderMonthDropdown()}
         </div>
       `;
             }
-            if (this._showYearDropdown) {
+            if (this.showYearDropdown) {
                 return html `
-        <div class="calendar" role="grid" aria-label="Calendar">
-          ${this._renderNavigation()} ${this._renderYearDropdown()}
+        <div class="calendar" role="grid" aria-label="Year selection">
+          ${this.renderNavigation()} ${this.renderYearDropdown()}
         </div>
       `;
             }
             // Default calendar view
             return html `
-      <div class="calendar" role="grid" aria-label="Calendar">
-        ${this._renderNavigation()} ${this._renderWeekdays()} ${this._renderDays()} ${this._renderActions()}
+      <div
+        class="calendar"
+        role="grid"
+        aria-label="Calendar for ${this.monthNames[this.month]} ${this.year}"
+        aria-roledescription="Calendar grid"
+        tabindex="0"
+        @keydown=${this.handleKeyDown}
+      >
+        ${this.renderNavigation()} ${this.renderWeekdays()} ${this.renderDays()} ${this.renderActions()}
       </div>
     `;
         }
         constructor() {
             super(...arguments);
-            __runInitializers(this, __pendingRange_extraInitializers);
+            __runInitializers(this, _focusedDate_extraInitializers);
         }
         static {
             __runInitializers(_classThis, _classExtraInitializers);