@progressive-development/pd-calendar 0.9.2 → 1.0.1

package/dist/pd-calendar/pd-calendar.stories.d.ts

@@ -1,23 +1,83 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    render: ({ hideWeekend, refDate, data, prevMonthConstraint, nextMonthConstraint, addSlot, }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    argTypes: {};
-    parameters: {
-        actions: {
-            argTypesRegex: string;
-        };
-    };
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { CalendarData, AvailableCalendarViewTypes } from '../types.js';
+/**
+ * Story arguments interface for pd-calendar component.
+ * Maps to the component's public API.
+ */
+interface PdCalendarArgs {
+    /** Reference date for initial calendar view */
+    refDate?: Date;
+    /** Whether weekends should be hidden */
+    hideWeekend: boolean;
+    /** Calendar data with info per date */
+    data: CalendarData;
+    /** Number of months allowed to navigate backwards (-1 = unlimited) */
+    prevMonthConstraint: number;
+    /** Number of months allowed to navigate forwards (-1 = unlimited) */
+    nextMonthConstraint: number;
+    /** Whether dates are selectable */
+    selectableDates: boolean;
+    /** Whether to show selection highlight */
+    showSelection: boolean;
+    /** Year selection popup values */
+    withYearPopup: string[];
+    /** CSS class for number positioning */
+    numberClass: string;
+    /** Enable mouse wheel navigation between months */
+    withWheelNavigation: boolean;
+    /** Enable touch swipe navigation between months */
+    withTouchNavigation: boolean;
+    /** Available view types for view toggle */
+    availableViewTypes?: AvailableCalendarViewTypes;
+}
+/**
+ * ## pd-calendar
+ *
+ * A full-featured calendar component supporting month, list, and week views with
+ * date info, selection, navigation, and event management.
+ *
+ * ### Features
+ * - **Month View**: Displays a full month with navigation controls and date info
+ * - **List View**: Shows only dates with data in a compact list format
+ * - **Week View (timeGrid)**: Displays a weekly time grid with overlapping events
+ * - **Event Calendar**: Month view with event bars and info panel (`cellType="events"`)
+ * - **Special Days**: Highlight specific dates with category-based styling
+ * - **Navigation**: Arrow buttons, keyboard, mouse wheel, touch swipe, year popup
+ * - **Navigation Constraints**: Limit forward/backward month navigation
+ * - **Weekend Hiding**: Option to hide Saturday and Sunday
+ * - **Custom Date Range**: List view can display a specific date range
+ *
+ * ### Accessibility
+ * - `role="grid"` on the calendar grid with `aria-label` for current month/year
+ * - Arrow keys navigate between dates, Enter/Space selects
+ * - Home/End for first/last day of month
+ * - `aria-selected` on selected dates
+ * - `tabindex` management for keyboard focus (0 when selectable, -1 when read-only)
+ * - Focus-visible styling for keyboard users
+ */
+declare const meta: Meta<PdCalendarArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const Basic: Story;
+type Story = StoryObj<PdCalendarArgs>;
+/** Default calendar without data or constraints. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Calendar with price info per date and forward/backward navigation constraints. */
 export declare const WithInfoAndConstraints: Story;
+/** Calendar with category-highlighted special days (green background). */
 export declare const WithSpecialDays: Story;
-export declare const WithSpecialDaysHideWeekend: Story;
-export declare const WithSpecificDateAndConstraints: Story;
-export declare const BasicSmall: Story;
-export declare const BasicSmallHugeYearSelection: Story;
-export declare const BasicSmallWithRefDate: Story;
-export declare const BasicSmallWithoutWeekend: Story;
+/** Compact selectable calendar with year popup, centered numbers, and reduced width. */
+export declare const Selectable: Story;
+/** List view with title, description, time, and category colors. Toggle between month and list view. */
+export declare const ListView: Story;
+/** All time display variants in list view: no time, start only, start+end, and full day. */
+export declare const ListViewTimeVariants: Story;
+/** List view with a custom date range spanning multiple months. Navigation is disabled in range mode. */
+export declare const ListViewCustomRange: Story;
+/** Week view (timeGrid) with timed events, full-day events, and overlapping events. */
+export declare const WeekView: Story;
+/** Week view with custom time window (8:00-18:00) and visible days configuration. */
+export declare const WeekViewBusinessHours: Story;
+/** Month view with event bars per day using `cellType="events"`. Click an event bar to open the info panel. */
+export declare const EventCalendar: Story;
+/** CSS Custom Properties -- Branded and Redesigned calendar variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-calendar.stories.d.ts.map

package/dist/pd-calendar/pd-calendar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-calendar.stories.d.ts","sourceRoot":"","sources":["../../src/pd-calendar/pd-calendar.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,OAAO,kBAAkB,CAAC;AAG1B,QAAA,MAAM,IAAI;;;;;;;;;CAwBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AActB,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAUF,eAAO,MAAM,sBAAsB,EAAE,KAOpC,CAAC;AAiBF,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAQxC,CAAC;AAIF,eAAO,MAAM,8BAA8B,EAAE,KAM5C,CAAC;AA2CF,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAC;AAOF,eAAO,MAAM,2BAA2B,EAAE,KA2BzC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,KA+BnC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KA0BtC,CAAC"}
+{"version":3,"file":"pd-calendar.stories.d.ts","sourceRoot":"","sources":["../../src/pd-calendar/pd-calendar.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EACV,YAAY,EACZ,0BAA0B,EAI3B,MAAM,aAAa,CAAC;AAMrB;;;GAGG;AACH,UAAU,cAAc;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,wCAAwC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,IAAI,EAAE,YAAY,CAAC;IACnB,sEAAsE;IACtE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qEAAqE;IACrE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mCAAmC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,0CAA0C;IAC1C,aAAa,EAAE,OAAO,CAAC;IACvB,kCAAkC;IAClC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mDAAmD;IACnD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,0BAA0B,CAAC;CACjD;AA+ED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAoG9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAMtC,oFAAoF;AACpF,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAMF,qFAAqF;AACrF,eAAO,MAAM,sBAAsB,EAAE,KAiBpC,CAAC;AAMF,0EAA0E;AAC1E,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAC;AAMF,wFAAwF;AACxF,eAAO,MAAM,UAAU,EAAE,KAwCxB,CAAC;AAMF,wGAAwG;AACxG,eAAO,MAAM,QAAQ,EAAE,KA4FtB,CAAC;AAMF,4FAA4F;AAC5F,eAAO,MAAM,oBAAoB,EAAE,KAiElC,CAAC;AAMF,yGAAyG;AACzG,eAAO,MAAM,mBAAmB,EAAE,KAkEjC,CAAC;AAMF,uFAAuF;AACvF,eAAO,MAAM,QAAQ,EAAE,KAuHtB,CAAC;AAMF,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,EAAE,KA2EnC,CAAC;AAMF,+GAA+G;AAC/G,eAAO,MAAM,aAAa,EAAE,KAmI3B,CAAC;AAMF,yEAAyE;AACzE,eAAO,MAAM,aAAa,EAAE,KAyF3B,CAAC"}

package/dist/pd-calendar/pd-year-popup/PdYearPopup.d.ts

@@ -1,27 +1,38 @@
 import { LitElement, CSSResultGroup } from 'lit';
 /**
- * Web Component zur Anzeige eines Jahresauswahl-Popups.
+ * Accessible year selection popup component.
  *
- * Wird typischerweise als Dropdown unterhalb eines Buttons eingeblendet und
- * zeigt eine Liste von auswählbaren Jahren an.
+ * Displays a listbox of selectable years with full keyboard navigation
+ * and ARIA support for screen readers.
  *
- * @fires change-year-selection – wenn ein Jahr ausgewählt wurde
- * @fires abort-year-selection – wenn außerhalb geklickt wird / keine Auswahl
+ * @event change-year-selection - Fired when a year is selected. Detail: `{ year: string }`.
+ * @event abort-year-selection - Fired when popup is closed without selection (Escape, click outside).
  *
  * @tagname pd-year-popup
+ *
+ * @cssprop --pd-year-popup-bg-col - Background color. Default: `var(--pd-default-bg-col)`.
+ * @cssprop --pd-year-popup-border-col - Border color. Default: `var(--pd-default-disabled-light-col)`.
  */
 export declare class PdYearPopup extends LitElement {
-    /**
-     * Liste der auswählbaren Jahre.
-     */
+    /** List of selectable years. */
     yearSelection: string[];
-    /**
-     * Aktuell ausgewähltes Jahr.
-     */
+    /** Currently selected year (highlighted). */
     currentYear: string;
+    /** @ignore - Index of currently focused item for keyboard navigation */
+    private _focusedIndex;
+    private _listEl;
+    private _boundHandleClickOutside;
     static styles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
     render(): import('lit').TemplateResult<1>;
+    private _getItemClasses;
+    private _onKeyDown;
+    private _scrollToFocused;
     private _yearSelection;
+    private _selectYear;
     private _closeSelection;
+    private _handleClickOutside;
 }
 //# sourceMappingURL=PdYearPopup.d.ts.map

package/dist/pd-calendar/pd-year-popup/PdYearPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdYearPopup.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-year-popup/PdYearPopup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D;;;;;;;;;;GAUG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC;;OAEG;IAEH,aAAa,EAAE,MAAM,EAAE,CAAM;IAE7B;;OAEG;IAEH,WAAW,SAAM;IAEjB,OAAgB,MAAM,EAAE,cAAc,CA6DpC;IAEO,MAAM;IAkBf,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,eAAe;CAQxB"}
+{"version":3,"file":"PdYearPopup.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-year-popup/PdYearPopup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC,gCAAgC;IAEhC,aAAa,EAAE,MAAM,EAAE,CAAM;IAE7B,6CAA6C;IAE7C,WAAW,SAAM;IAEjB,wEAAwE;IAExE,OAAO,CAAC,aAAa,CAAM;IAG3B,OAAO,CAAC,OAAO,CAAoB;IAEnC,OAAO,CAAC,wBAAwB,CAAuC;IAEvE,OAAgB,MAAM,EAAE,cAAc,CAgFpC;IAEO,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAK5B,YAAY,IAAI,IAAI;IAYpB,MAAM;IA8Bf,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,UAAU;IAiDlB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,mBAAmB;CAM5B"}

package/dist/pd-calendar/pd-year-popup/PdYearPopup.js

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state, query } from 'lit/decorators.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,6 +15,8 @@ class PdYearPopup extends LitElement {
     super(...arguments);
     this.yearSelection = [];
     this.currentYear = "";
+    this._focusedIndex = -1;
+    this._boundHandleClickOutside = this._handleClickOutside.bind(this);
   }
   static {
     this.styles = [
@@ -32,12 +34,13 @@ class PdYearPopup extends LitElement {
         overflow-y: auto;
 
         margin: 0;
-        padding: 4px 0;
+        padding: var(--pd-spacing-xs) 0;
         width: 90px;
-        background: var(--pd-default-light-col, #ffffff);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        border-radius: 8px;
-        border: 1px solid var(--pd-default-border-col, #ddd);
+        background: var(--pd-year-popup-bg-col, var(--pd-default-bg-col));
+        box-shadow: var(--pd-shadow-lg);
+        border-radius: var(--pd-radius-lg);
+        border: 1px solid
+          var(--pd-year-popup-border-col, var(--pd-default-disabled-light-col));
 
         display: flex;
         flex-direction: column;
@@ -45,49 +48,95 @@ class PdYearPopup extends LitElement {
         scrollbar-width: thin;
       }
 
+      ul:focus {
+        outline: none;
+      }
+
+      ul:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: 2px;
+      }
+
       ul::-webkit-scrollbar {
         width: 6px;
       }
 
       ul::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, 0.2);
-        border-radius: 3px;
+        background-color: var(--pd-default-disabled-col);
+        border-radius: var(--pd-radius-sm);
       }
 
       li {
         text-align: center;
-        padding: 8px 0;
-        margin: 0 4px;
-        font-size: 14px;
-        border-radius: 4px;
-        color: var(--pd-default-dark-col, #333);
+        padding: var(--pd-spacing-xs) var(--pd-spacing-sm);
+        margin: 0 var(--pd-spacing-xs);
+        font-size: 0.9em;
+        font-family: var(--pd-default-font-content-family);
+        border-radius: var(--pd-radius-sm);
+        color: var(--pd-default-dark-col);
+        cursor: pointer;
         transition:
-          background-color 0.2s ease,
-          color 0.2s ease;
+          background-color 0.15s ease,
+          color 0.15s ease;
       }
 
-      li.selectable:hover {
-        background-color: var(--pd-default-hover-bg, #f0f0f0);
-        color: var(--pd-default-hover-col, #000);
-        cursor: pointer;
+      li:hover {
+        background-color: var(--pd-default-bg-light-col);
+      }
+
+      li.focused {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: -2px;
       }
 
       li.current {
-        background-color: var(--pd-default-primary-col, #007acc);
-        color: white;
-        font-weight: bold;
+        background-color: var(--pd-default-col);
+        color: var(--pd-on-primary-col);
+        font-weight: 600;
+      }
+
+      li.current:hover {
+        background-color: var(--pd-default-dark-col);
       }
     `
     ];
   }
+  connectedCallback() {
+    super.connectedCallback();
+    setTimeout(() => {
+      document.addEventListener("click", this._boundHandleClickOutside);
+    }, 0);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this._boundHandleClickOutside);
+  }
+  firstUpdated() {
+    const currentIndex = this.yearSelection.indexOf(this.currentYear);
+    this._focusedIndex = currentIndex >= 0 ? currentIndex : 0;
+    this.updateComplete.then(() => {
+      this._listEl?.focus();
+      this._scrollToFocused();
+    });
+  }
   render() {
     return html`
-      <ul>
+      <ul
+        role="listbox"
+        aria-label="Jahr auswählen"
+        aria-activedescendant="${this._focusedIndex >= 0 ? `year-option-${this._focusedIndex}` : ""}"
+        tabindex="0"
+        @keydown=${this._onKeyDown}
+      >
         ${this.yearSelection.map(
-      (year) => html`
+      (year, index) => html`
             <li
-              class="${this.currentYear === year ? "current" : "selectable"}"
+              id="year-option-${index}"
+              role="option"
+              aria-selected="${this.currentYear === year}"
+              class="${this._getItemClasses(year, index)}"
               data-year="${year}"
+              data-index="${index}"
               @click=${this._yearSelection}
             >
               ${year}
@@ -97,21 +146,78 @@ class PdYearPopup extends LitElement {
       </ul>
     `;
   }
+  _getItemClasses(year, index) {
+    const classes = [];
+    if (this.currentYear === year) {
+      classes.push("current");
+    }
+    if (this._focusedIndex === index) {
+      classes.push("focused");
+    }
+    return classes.join(" ");
+  }
+  _onKeyDown(e) {
+    const lastIndex = this.yearSelection.length - 1;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        this._focusedIndex = Math.min(this._focusedIndex + 1, lastIndex);
+        this._scrollToFocused();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        this._focusedIndex = Math.max(this._focusedIndex - 1, 0);
+        this._scrollToFocused();
+        break;
+      case "Home":
+        e.preventDefault();
+        this._focusedIndex = 0;
+        this._scrollToFocused();
+        break;
+      case "End":
+        e.preventDefault();
+        this._focusedIndex = lastIndex;
+        this._scrollToFocused();
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (this._focusedIndex >= 0) {
+          this._selectYear(this.yearSelection[this._focusedIndex]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        this._closeSelection();
+        break;
+      case "Tab":
+        this._closeSelection();
+        break;
+    }
+  }
+  _scrollToFocused() {
+    const focusedEl = this.shadowRoot?.getElementById(
+      `year-option-${this._focusedIndex}`
+    );
+    focusedEl?.scrollIntoView({ block: "nearest" });
+  }
   _yearSelection(event) {
     const target = event.currentTarget;
     const year = target.dataset.year;
     if (year) {
-      this.dispatchEvent(
-        new CustomEvent("change-year-selection", {
-          detail: { year },
-          bubbles: true,
-          composed: true
-        })
-      );
-    } else {
-      this._closeSelection();
+      this._selectYear(year);
     }
   }
+  _selectYear(year) {
+    this.dispatchEvent(
+      new CustomEvent("change-year-selection", {
+        detail: { year },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
   _closeSelection() {
     this.dispatchEvent(
       new CustomEvent("abort-year-selection", {
@@ -120,6 +226,12 @@ class PdYearPopup extends LitElement {
       })
     );
   }
+  _handleClickOutside(event) {
+    const path = event.composedPath();
+    if (!path.includes(this)) {
+      this._closeSelection();
+    }
+  }
 }
 __decorateClass([
   property({ type: Array })
@@ -127,5 +239,11 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], PdYearPopup.prototype, "currentYear");
+__decorateClass([
+  state()
+], PdYearPopup.prototype, "_focusedIndex");
+__decorateClass([
+  query("ul")
+], PdYearPopup.prototype, "_listEl");
 
 export { PdYearPopup };

package/dist/pd-datepicker/PdDatepicker.d.ts

@@ -1,33 +1,70 @@
 import { PropertyValues, CSSResultGroup } from 'lit';
 import { PdBaseInputElement } from '@progressive-development/pd-forms';
 /**
+ * Datepicker component for selecting single dates or date ranges with optional time selection.
+ *
  * @tagname pd-datepicker
+ * @summary Date/time picker with calendar popup, range selection, and form integration.
+ *
+ * @event pd-form-element-change - Fired when the selected date/time value changes. Detail: `{ value: string, parsedValue: { start?: Date, end?: Date } }`.
+ * @event pd-form-element-blur - Fired when the field loses focus.
+ * @event pd-form-element-focus - Fired when the field gains focus.
  *
- * Datepicker Komponente zur Auswahl einzelner oder von Zeiträumen, inkl. optionaler Uhrzeitangabe.
- * Unterstützt Darstellung über eingebetteten Kalender mit konfigurierbarem Jahr-Popup.
+ * @cssprop --pd-input-field-width - Width of the datepicker input. Default: `250px`.
+ * @cssprop --pd-input-field-height - Height of the datepicker input. Default: `32px`.
+ * @cssprop --pd-datepicker-z-index - Z-index of the calendar popup. Default: `1000`.
+ * @cssprop --pd-menu-shadow - Box shadow for the calendar popup. Default: `var(--pd-shadow-lg)`.
  */
 export declare class PdDatepicker extends PdBaseInputElement {
+    /** Locale for date formatting. */
     locale?: string;
+    /** Initial date value to pre-populate the field. */
     initialDate?: Date;
-    /**
-     * Format für Datum. Default ist "yyyy-MM-dd".
-     */
+    /** Date format string (date-fns format). Default: `yyyy-MM-dd`. */
     dateFormat?: string;
+    /** Enable date range selection mode. */
     dateRange: boolean;
+    /** Hide the "Today" button in the calendar popup. */
     hideToday: boolean;
+    /** Year values for year selection dropdown. Empty array disables popup. */
     withYearPopup: string[];
+    /** Placeholder text for time selection. */
     placeHolderTime?: string;
+    /** Enable time selection alongside date. */
     withTime: boolean;
+    /** Minimum selectable date (YYYY-MM-DD format). */
     min?: string;
+    /** Maximum selectable date (YYYY-MM-DD format). */
     max?: string;
+    /** Array of specific dates to disable (YYYY-MM-DD format). */
+    disabledDays: string[];
+    /** Force modal display regardless of screen size. */
+    modal: boolean;
+    /** Breakpoint (in px) below which modal is automatically used. Default: 480 */
+    modalBreakpoint: number;
+    /** @ignore */
     private _showCalendar;
+    /** @ignore */
     private _startDateValue?;
+    /** @ignore */
     private _endDateValue?;
+    /** @ignore */
     private _rangeSelection?;
+    /** @ignore */
     private _timeSelection;
+    /** @ignore */
+    private _useModal;
+    /** @ignore */
+    private _displayedMonth;
+    /** @ignore */
     private _calendarPosition;
+    /** @ignore */
+    private _boundHandleClickOutside?;
+    /** Time selection options with i18n placeholder. */
+    private get _timeOptions();
     static styles: CSSResultGroup;
     constructor();
+    disconnectedCallback(): void;
     private _requiredDateTimeValidator;
     update(changedProps: PropertyValues<this>): void;
     render(): import('lit').TemplateResult<1>;
@@ -47,7 +84,8 @@ export declare class PdDatepicker extends PdBaseInputElement {
      */
     _getInitialValue(): string;
     /**
-     * @returns parsed date
+     * Returns the parsed date values.
+     * @returns Object with start and optional end date: `{ start?: Date; end?: Date }`
      */
     _getParsedValue(): any;
     /**
@@ -63,9 +101,30 @@ export declare class PdDatepicker extends PdBaseInputElement {
      */
     private _updateInputField;
     /**
-     * Toogle view calendar on click into pd-input field.
+     * Toggle view calendar on click into pd-input field.
      */
     private _inputClick;
+    /**
+     * Handle keyboard events on the input field.
+     * Enter toggles calendar, Space/ArrowDown opens, Escape closes.
+     */
+    private _onInputKeyDown;
+    /**
+     * Handle keyboard events within the popup.
+     */
+    private _onPopupKeyDown;
+    /**
+     * Open the calendar popup.
+     */
+    private _openCalendar;
+    /**
+     * Close the calendar popup and return focus to input.
+     */
+    private _closeCalendar;
+    /**
+     * Handle clicks outside the popup.
+     */
+    private _handleClickOutside;
     /**
      * Triggered by date selection in small calendar.
      * Set internal values depending on daterange configuration.
@@ -88,6 +147,11 @@ export declare class PdDatepicker extends PdBaseInputElement {
      * Set selected value and close calendar.
      */
     private _triggerSetValueButton;
+    /**
+     * Handle month change from calendar navigation.
+     * Updates _displayedMonth to recalculate constraints for the new month.
+     */
+    private _onCalendarMonthChange;
     /**
      * Calculate range of dates between two dates on mouse over.
      * Only needed for date range visuell selection in small calendar.
@@ -102,6 +166,11 @@ export declare class PdDatepicker extends PdBaseInputElement {
      * @returns string with date value
      */
     private _formatDateValue;
+    /**
+     * Builds calendar data with disabled days based on min/max constraints and disabledDays.
+     * Merges with existing range selection data.
+     */
+    private _buildConstrainedData;
     private _innerEnter;
     private _innerRegister;
     private _innerUnRegister;

package/dist/pd-datepicker/PdDatepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdDatepicker.d.ts","sourceRoot":"","sources":["../../src/pd-datepicker/PdDatepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAIvE,OAAO,4CAA4C,CAAC;AACpD,OAAO,6CAA6C,CAAC;AACrD,OAAO,6CAA6C,CAAC;AAIrD,OAAO,+BAA+B,CAAC;AA2EvC;;;;;GAKG;AACH,qBACa,YAAa,SAAQ,kBAAkB;IAElD,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,WAAW,CAAC,EAAE,IAAI,CAAC;IAEnB;;OAEG;IAEH,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,SAAS,UAAS;IAGlB,SAAS,UAAS;IAGlB,aAAa,EAAE,MAAM,EAAE,CAAM;IAG7B,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,QAAQ,UAAS;IAGjB,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,OAAO,CAAC,aAAa,CAAS;IAG9B,OAAO,CAAC,eAAe,CAAC,CAAO;IAG/B,OAAO,CAAC,aAAa,CAAC,CAAO;IAG7B,OAAO,CAAC,eAAe,CAAC,CAAe;IAGvC,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,iBAAiB,CAA8B;IAEvD,OAAgB,MAAM,EAAE,cAAc,CAqDpC;;IAQF,OAAO,CAAC,0BAA0B;IAUzB,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC;IAQzC,MAAM;IAuFf;;;;OAIG;IACH,IAAI,UAAU,IAAI;QAAE,KAAK,CAAC,EAAE,IAAI,CAAC;QAAC,GAAG,CAAC,EAAE,IAAI,CAAA;KAAE,CAU7C;IAEQ,KAAK;IASL,KAAK;IAKd;;OAEG;IACM,gBAAgB,IAAI,MAAM;IAInC;;OAEG;IACM,eAAe,IAAI,GAAG;IAI/B;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAclC;;OAEG;IACH,OAAO,CAAC,YAAY;IAOpB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAazB;;OAEG;IACH,OAAO,CAAC,WAAW;IAkBnB;;;;;OAKG;IACH,OAAO,CAAC,4BAA4B;IA8CpC;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IAY9B;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IAM9B;;;;;OAKG;IACH,OAAO,CAAC,2BAA2B;IAcnC;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAsBxB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,gBAAgB;CAGzB"}
+{"version":3,"file":"PdDatepicker.d.ts","sourceRoot":"","sources":["../../src/pd-datepicker/PdDatepicker.ts"],"names":[],"mappings":"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"}