@api-client/ui 0.5.5 → 0.5.7

package/build/src/md/date-picker/internals/DatePicker.styles.js

@@ -0,0 +1,409 @@
+import { css } from 'lit';
+export const calendarStyles = css `
+  :host {
+    display: block;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+    border-radius: 12px;
+    background: var(--md-sys-color-surface-container-high);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    box-shadow: var(--md-sys-elevation-2);
+    overflow: hidden;
+  }
+
+  .calendar {
+    padding: 20px 12px 12px 12px;
+  }
+
+  /* Header */
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 30px;
+    gap: 8px;
+  }
+
+  .month-year {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    justify-content: space-between;
+  }
+
+  .month-selector,
+  .year-selector {
+    display: flex;
+    align-items: center;
+  }
+
+  .month-year-text {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface);
+    min-width: 120px;
+  }
+
+  /* Weekdays header */
+  .weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 40px);
+    margin-bottom: 16px;
+  }
+
+  .weekday {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface-variant);
+    text-transform: uppercase;
+  }
+
+  /* Calendar grid */
+  .days {
+    display: grid;
+    grid-template-columns: repeat(7, 40px);
+    gap: 0;
+  }
+
+  .day-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 40px;
+  }
+
+  .day-cell.in-range.has-complete-range {
+    background: var(--md-sys-color-secondary-container);
+  }
+
+  .day-cell.range-start.has-complete-range:not(.range-end) {
+    background: linear-gradient(to right, transparent 50%, var(--md-sys-color-secondary-container) 50%);
+  }
+
+  .day-cell.range-end.has-complete-range:not(.range-start) {
+    background: linear-gradient(to left, transparent 50%, var(--md-sys-color-secondary-container) 50%);
+  }
+
+  .day-cell.range-start.range-end.has-complete-range {
+    background: transparent;
+  }
+
+  .day-button {
+    width: 40px !important;
+    height: 40px !important;
+    min-width: 40px !important;
+    padding: 0;
+  }
+
+  .day-button.other-month {
+    opacity: 0.38;
+  }
+
+  .nav-button,
+  .month-button,
+  .year-button,
+  .other-month .day-button:not([color='filled']):not([disabled]) {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .month-button,
+  .year-button {
+    padding: 0;
+  }
+
+  .weekday:not([color='filled']),
+  .day-button:not([color='filled']):not([disabled]) {
+    color: var(--md-sys-color-on-surface);
+  }
+
+  .today .day-button:not([color='filled']) {
+    color: var(--md-sys-color-primary);
+  }
+
+  .today .day-button {
+    --md-button-outline-color: var(--md-sys-color-primary);
+  }
+
+  /* Dropdown views */
+  .dropdown-view {
+    min-height: 300px;
+  }
+
+  .close-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    color: var(--md-sys-color-on-surface-variant);
+    cursor: pointer;
+    border-radius: 16px;
+    transition: background-color 0.2s ease;
+  }
+
+  .close-button:hover {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+  }
+
+  .close-button:focus {
+    outline: none;
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  }
+
+  /* Month dropdown */
+  .month-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+  }
+
+  .year-option:not(.selected),
+  .month-option:not(.selected) {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  /* Year dropdown */
+  .year-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 4px;
+    max-height: 240px;
+    overflow-y: auto;
+    padding: 4px;
+  }
+
+  .actions {
+    margin-top: 8px;
+    display: flex;
+    justify-content: flex-end;
+  }
+`;
+export const inputStyles = css `
+  :host {
+    display: inline-block;
+    width: 100%;
+  }
+
+  .input-container {
+    position: relative;
+  }
+
+  .dropdown-container {
+    position: absolute;
+    position-anchor: --ui-date-picker-anchor;
+    top: anchor(bottom);
+    left: anchor(left);
+    z-index: 1000;
+    margin-top: 4px;
+    min-width: anchor-size(width);
+    width: max-content;
+    max-width: calc(100vw - 32px);
+  }
+
+  .backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+    background: transparent;
+  }
+
+  .calendar-icon {
+    cursor: pointer;
+  }
+`;
+export const modalStyles = css `
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24px 24px 16px;
+  }
+
+  .modal-title {
+    font-size: 24px;
+    font-weight: 400;
+    color: var(--md-sys-color-on-surface);
+    margin: 0;
+  }
+
+  .modal-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+
+  .modal-content ui-date-picker-calendar {
+    box-shadow: none;
+  }
+
+  .date-range-display {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 16px;
+    background: var(--md-sys-color-surface-container-highest);
+    border-radius: 12px;
+    width: 100%;
+    max-width: 320px;
+  }
+
+  .date-display {
+    flex: 1;
+    text-align: center;
+  }
+
+  .date-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface-variant);
+    text-transform: uppercase;
+    margin-bottom: 4px;
+  }
+
+  .date-value {
+    font-size: 16px;
+    font-weight: 400;
+    color: var(--md-sys-color-on-surface);
+  }
+
+  .date-separator {
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 18px;
+  }
+
+  /* Input container and format help styles */
+  .input-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+    max-width: 320px;
+  }
+
+  .format-help {
+    padding: 12px 16px;
+    background: var(--md-sys-color-surface-container-highest);
+    border-radius: 8px;
+    border: 1px solid var(--md-sys-color-outline-variant);
+  }
+
+  .help-title {
+    margin: 0 0 8px 0;
+    font-size: 14px;
+    color: var(--md-sys-color-on-surface);
+    line-height: 1.4;
+  }
+
+  .help-examples {
+    margin: 0;
+    font-size: 13px;
+    color: var(--md-sys-color-on-surface-variant);
+    line-height: 1.4;
+  }
+
+  /* Accessibility utilities */
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  /* Modal header actions and input mode styles */
+  .header-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  .input-mode-placeholder {
+    padding: 24px;
+    text-align: center;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .input-mode-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+  }
+
+  .modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 16px 24px;
+    border-top: 1px solid var(--md-sys-color-outline-variant);
+  }
+
+  /* Calendar Action Buttons */
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--md-sys-color-outline-variant);
+  }
+
+  /* Pending selection state */
+  .day.pending {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+    border: 2px solid var(--md-sys-color-secondary);
+  }
+
+  .day.pending.selected {
+    background: var(--md-sys-color-secondary);
+    color: var(--md-sys-color-on-secondary);
+  }
+
+  .day.pending.range-start,
+  .day.pending.range-end {
+    background: var(--md-sys-color-secondary);
+    color: var(--md-sys-color-on-secondary);
+  }
+
+  .day.pending.in-range {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  /* Responsive */
+  @media (max-width: 640px) {
+    .modal-content {
+      padding: 16px;
+    }
+
+    .calendar {
+      width: 100%;
+      max-width: 320px;
+    }
+  }
+`;
+//# sourceMappingURL=DatePicker.styles.js.map

package/build/src/md/date-picker/internals/DatePicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.styles.js","sourceRoot":"","sources":["../../../../../src/md/date-picker/internals/DatePicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLhC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC7B,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwL7B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const calendarStyles = css`\n  :host {\n    display: block;\n    font-family: 'Roboto', sans-serif;\n    font-size: 14px;\n    border-radius: 12px;\n    background: var(--md-sys-color-surface-container-high);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    box-shadow: var(--md-sys-elevation-2);\n    overflow: hidden;\n  }\n\n  .calendar {\n    padding: 20px 12px 12px 12px;\n  }\n\n  /* Header */\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 30px;\n    gap: 8px;\n  }\n\n  .month-year {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    justify-content: space-between;\n  }\n\n  .month-selector,\n  .year-selector {\n    display: flex;\n    align-items: center;\n  }\n\n  .month-year-text {\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--md-sys-color-on-surface);\n    min-width: 120px;\n  }\n\n  /* Weekdays header */\n  .weekdays {\n    display: grid;\n    grid-template-columns: repeat(7, 40px);\n    margin-bottom: 16px;\n  }\n\n  .weekday {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 32px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--md-sys-color-on-surface-variant);\n    text-transform: uppercase;\n  }\n\n  /* Calendar grid */\n  .days {\n    display: grid;\n    grid-template-columns: repeat(7, 40px);\n    gap: 0;\n  }\n\n  .day-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    width: 40px;\n  }\n\n  .day-cell.in-range.has-complete-range {\n    background: var(--md-sys-color-secondary-container);\n  }\n\n  .day-cell.range-start.has-complete-range:not(.range-end) {\n    background: linear-gradient(to right, transparent 50%, var(--md-sys-color-secondary-container) 50%);\n  }\n\n  .day-cell.range-end.has-complete-range:not(.range-start) {\n    background: linear-gradient(to left, transparent 50%, var(--md-sys-color-secondary-container) 50%);\n  }\n\n  .day-cell.range-start.range-end.has-complete-range {\n    background: transparent;\n  }\n\n  .day-button {\n    width: 40px !important;\n    height: 40px !important;\n    min-width: 40px !important;\n    padding: 0;\n  }\n\n  .day-button.other-month {\n    opacity: 0.38;\n  }\n\n  .nav-button,\n  .month-button,\n  .year-button,\n  .other-month .day-button:not([color='filled']):not([disabled]) {\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  .month-button,\n  .year-button {\n    padding: 0;\n  }\n\n  .weekday:not([color='filled']),\n  .day-button:not([color='filled']):not([disabled]) {\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .today .day-button:not([color='filled']) {\n    color: var(--md-sys-color-primary);\n  }\n\n  .today .day-button {\n    --md-button-outline-color: var(--md-sys-color-primary);\n  }\n\n  /* Dropdown views */\n  .dropdown-view {\n    min-height: 300px;\n  }\n\n  .close-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    color: var(--md-sys-color-on-surface-variant);\n    cursor: pointer;\n    border-radius: 16px;\n    transition: background-color 0.2s ease;\n  }\n\n  .close-button:hover {\n    background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);\n  }\n\n  .close-button:focus {\n    outline: none;\n    background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n  }\n\n  /* Month dropdown */\n  .month-list {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 8px;\n  }\n\n  .year-option:not(.selected),\n  .month-option:not(.selected) {\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  /* Year dropdown */\n  .year-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 4px;\n    max-height: 240px;\n    overflow-y: auto;\n    padding: 4px;\n  }\n\n  .actions {\n    margin-top: 8px;\n    display: flex;\n    justify-content: flex-end;\n  }\n`\n\nexport const inputStyles = css`\n  :host {\n    display: inline-block;\n    width: 100%;\n  }\n\n  .input-container {\n    position: relative;\n  }\n\n  .dropdown-container {\n    position: absolute;\n    position-anchor: --ui-date-picker-anchor;\n    top: anchor(bottom);\n    left: anchor(left);\n    z-index: 1000;\n    margin-top: 4px;\n    min-width: anchor-size(width);\n    width: max-content;\n    max-width: calc(100vw - 32px);\n  }\n\n  .backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 999;\n    background: transparent;\n  }\n\n  .calendar-icon {\n    cursor: pointer;\n  }\n`\n\nexport const modalStyles = css`\n  .modal-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 24px 24px 16px;\n  }\n\n  .modal-title {\n    font-size: 24px;\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface);\n    margin: 0;\n  }\n\n  .modal-content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 24px;\n    max-height: 60vh;\n    overflow-y: auto;\n  }\n\n  .modal-content ui-date-picker-calendar {\n    box-shadow: none;\n  }\n\n  .date-range-display {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    background: var(--md-sys-color-surface-container-highest);\n    border-radius: 12px;\n    width: 100%;\n    max-width: 320px;\n  }\n\n  .date-display {\n    flex: 1;\n    text-align: center;\n  }\n\n  .date-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--md-sys-color-on-surface-variant);\n    text-transform: uppercase;\n    margin-bottom: 4px;\n  }\n\n  .date-value {\n    font-size: 16px;\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .date-separator {\n    color: var(--md-sys-color-on-surface-variant);\n    font-size: 18px;\n  }\n\n  /* Input container and format help styles */\n  .input-container {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    width: 100%;\n    max-width: 320px;\n  }\n\n  .format-help {\n    padding: 12px 16px;\n    background: var(--md-sys-color-surface-container-highest);\n    border-radius: 8px;\n    border: 1px solid var(--md-sys-color-outline-variant);\n  }\n\n  .help-title {\n    margin: 0 0 8px 0;\n    font-size: 14px;\n    color: var(--md-sys-color-on-surface);\n    line-height: 1.4;\n  }\n\n  .help-examples {\n    margin: 0;\n    font-size: 13px;\n    color: var(--md-sys-color-on-surface-variant);\n    line-height: 1.4;\n  }\n\n  /* Accessibility utilities */\n  .visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  fieldset {\n    border: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  /* Modal header actions and input mode styles */\n  .header-actions {\n    display: flex;\n    gap: 8px;\n  }\n\n  .input-mode-placeholder {\n    padding: 24px;\n    text-align: center;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  .input-mode-icon {\n    font-size: 48px;\n    margin-bottom: 16px;\n  }\n\n  .modal-actions {\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    padding: 16px 24px;\n    border-top: 1px solid var(--md-sys-color-outline-variant);\n  }\n\n  /* Calendar Action Buttons */\n  .actions {\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    margin-top: 16px;\n    padding-top: 16px;\n    border-top: 1px solid var(--md-sys-color-outline-variant);\n  }\n\n  /* Pending selection state */\n  .day.pending {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    border: 2px solid var(--md-sys-color-secondary);\n  }\n\n  .day.pending.selected {\n    background: var(--md-sys-color-secondary);\n    color: var(--md-sys-color-on-secondary);\n  }\n\n  .day.pending.range-start,\n  .day.pending.range-end {\n    background: var(--md-sys-color-secondary);\n    color: var(--md-sys-color-on-secondary);\n  }\n\n  .day.pending.in-range {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  /* Responsive */\n  @media (max-width: 640px) {\n    .modal-content {\n      padding: 16px;\n    }\n\n    .calendar {\n      width: 100%;\n      max-width: 320px;\n    }\n  }\n`\n"]}

package/build/src/md/date-picker/internals/DatePickerCalendar.d.ts

@@ -0,0 +1,272 @@
+import { LitElement, TemplateResult } from 'lit';
+import { DateRange } from './DatePickerUtils.js';
+import '../../../md/icons/ui-icon.js';
+import '../../../md/button/ui-button.js';
+import '../../../md/icon-button/ui-icon-button.js';
+/**
+ * Event dispatched when a single date is selected in immediate mode
+ * or confirmed in pending mode.
+ */
+export interface DateSelectEvent {
+    date: Date;
+    formattedDate: string;
+}
+/**
+ * Event dispatched when a date range is completed in immediate mode.
+ * Only fired when both start and end dates are selected.
+ */
+export interface DateRangeSelectEvent {
+    range: DateRange;
+    formattedRange: {
+        start: string | null;
+        end: string | null;
+    };
+}
+/**
+ * Event dispatched when a date range selection is confirmed
+ * via the OK button in pending mode.
+ */
+export interface DateRangeConfirmEvent {
+    range: DateRange | null;
+    formattedRange: {
+        start: string | null;
+        end: string | null;
+    };
+}
+/**
+ * Event dispatched when user cancels a pending selection
+ * via the Cancel button or Escape key.
+ */
+export interface DateCancelEvent {
+    reason?: string;
+}
+/**
+ * A calendar grid component for date 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
+ *
+ * ```html
+ * <ui-date-picker-calendar></ui-date-picker-calendar>
+ * ```
+ *
+ * ### Single date selection
+ * ```html
+ * <ui-date-picker-calendar
+ *   .selectedDate=${new Date()}
+ *   @date-select=${this.handleDateSelect}
+ * ></ui-date-picker-calendar>
+ * ```
+ *
+ * ### Date range selection
+ * ```html
+ * <ui-date-picker-calendar
+ *   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>
+ * ```
+ */
+export declare class UiDatePickerCalendar extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The currently displayed year
+     */
+    accessor year: number;
+    /**
+     * The currently displayed month (0-indexed, where 0 = January)
+     */
+    accessor month: number;
+    /**
+     * The currently selected date for single selection mode.
+     * Set to null for no selection.
+     */
+    accessor selectedDate: Date | null;
+    /**
+     * The start date of the selected range for range selection mode.
+     * Used in combination with rangeEnd to define a date range.
+     */
+    accessor rangeStart: Date | null;
+    /**
+     * The end date of the selected range for range selection mode.
+     * Used in combination with rangeStart to define a date range.
+     */
+    accessor rangeEnd: Date | null;
+    /**
+     * Enable range selection mode. When true, users can select date ranges
+     * instead of single dates. Affects event dispatching and UI behavior.
+     */
+    accessor rangeSelection: boolean;
+    /**
+     * Minimum selectable date. Dates before this will be disabled.
+     * Set to undefined for no minimum restriction.
+     */
+    accessor minDate: Date | undefined;
+    /**
+     * Maximum selectable date. Dates after this will be disabled.
+     * Set to undefined for no maximum restriction.
+     */
+    accessor maxDate: Date | undefined;
+    /**
+     * Array of specific dates to disable. These dates will not be selectable
+     * regardless of minDate and maxDate settings.
+     */
+    accessor disabledDates: Date[] | undefined;
+    /**
+     * Locale for date formatting and month/day names (e.g., 'en-US', 'fr-FR').
+     * Defaults to browser locale if not specified.
+     */
+    accessor locale: string | undefined;
+    /**
+     * Whether to show navigation controls (previous/next month and year buttons).
+     * When false, users can only navigate using keyboard or programmatically.
+     */
+    accessor showNavigation: boolean;
+    /**
+     * Whether to show action buttons (OK/Cancel). When true, selections are pending
+     * until confirmed with the OK button. When false, selections are immediate.
+     */
+    accessor showActions: boolean;
+    /**
+     * Text label for the OK/confirm button. Only visible when showActions is true.
+     */
+    accessor okButtonText: string;
+    /**
+     * Text label for the Cancel button. Only visible when showActions is true.
+     */
+    accessor cancelButtonText: string;
+    private accessor calendarData;
+    private accessor monthNames;
+    private accessor showMonthDropdown;
+    private accessor showYearDropdown;
+    private accessor pendingDate;
+    private accessor pendingRangeStart;
+    private accessor pendingRangeEnd;
+    private accessor focusedDate;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private updateFocus;
+    private scrollSelectedYearIntoView;
+    private updateFocusedDateForMonthChange;
+    private updateCalendar;
+    private updateMonthNames;
+    private navigateMonth;
+    private handlePrevMonth;
+    private handleNextMonth;
+    private handlePrevYear;
+    private handleNextYear;
+    private handleMonthClick;
+    private handleYearClick;
+    private handleMonthSelect;
+    private handleYearSelect;
+    private closeDropdowns;
+    private navigateDate;
+    private findNextAvailableDate;
+    private focusFirstDayOfMonth;
+    private focusLastDayOfMonth;
+    private selectFocusedDate;
+    private handleDayClick;
+    private handleSingleSelection;
+    private handleRangeSelection;
+    /**
+     * Helper to get the current range state (either immediate or pending)
+     */
+    private getCurrentRange;
+    /**
+     * Helper to check if we have a complete range in the current mode
+     */
+    private hasCompleteRange;
+    private setRangeValues;
+    /**
+     * Helper to dispatch date selection events
+     */
+    private dispatchDateEvent;
+    /**
+     * Helper to dispatch range selection events
+     */
+    private dispatchRangeEvent;
+    /**
+     * Helper to dispatch range confirmation events
+     */
+    private dispatchRangeConfirmEvent;
+    /**
+     * Helper to dispatch cancel events
+     */
+    private dispatchCancelEvent;
+    private isDateDisabled;
+    private handleConfirm;
+    private handleCancel;
+    /**
+     * Helper to render navigation buttons
+     */
+    private renderNavButton;
+    private renderNavigation;
+    private renderWeekdays;
+    /**
+     * Helper to determine day selection state for rendering
+     */
+    private getDaySelectionState;
+    /**
+     * Helper to determine button color for a day
+     */
+    private getDayButtonColor;
+    private renderDay;
+    private renderDays;
+    private renderActions;
+    /**
+     * Helper to render dropdown option buttons
+     */
+    private renderDropdownOption;
+    private renderMonthDropdown;
+    private renderYearDropdown;
+    private findFirstAvailableDate;
+    private handleKeyDown;
+    /**
+     * Helper to check if a date is in the current month and not disabled
+     */
+    private isDateAvailable;
+    private initializeFocusedDate;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-date-picker-calendar': UiDatePickerCalendar;
+    }
+    interface HTMLElementEventMap {
+        'date-select': CustomEvent<DateSelectEvent>;
+        'date-range-select': CustomEvent<DateRangeSelectEvent>;
+        'date-range-confirm': CustomEvent<DateRangeConfirmEvent>;
+        'date-cancel': CustomEvent<DateCancelEvent>;
+    }
+}
+//# sourceMappingURL=DatePickerCalendar.d.ts.map

package/build/src/md/date-picker/internals/DatePickerCalendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerCalendar.d.ts","sourceRoot":"","sources":["../../../../../src/md/date-picker/internals/DatePickerCalendar.ts"],"names":[],"mappings":"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"}