@progressive-development/pd-calendar 0.6.8 → 1.0.0

package/dist/pd-datepicker/pd-date-picker.stories.d.ts

@@ -0,0 +1,81 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * Story arguments interface for pd-datepicker component.
+ * Maps to the component's public API.
+ */
+interface PdDatepickerArgs {
+    /** Field label */
+    label: string;
+    /** Placeholder text */
+    placeholder: string;
+    /** Whether the field is required */
+    required: boolean;
+    /** Whether the field is disabled */
+    disabled: boolean;
+    /** Whether to show time selection */
+    withTime: boolean;
+    /** Whether to enable date range selection */
+    dateRange: boolean;
+    /** Initial date value */
+    initialDate?: Date;
+    /** Date format string */
+    dateFormat: string;
+    /** Minimum allowed date (YYYY-MM-DD) */
+    min?: string;
+    /** Maximum allowed date (YYYY-MM-DD) */
+    max?: string;
+    /** Year selection popup values */
+    withYearPopup: string[];
+    /** Whether to hide today button */
+    hideToday: boolean;
+}
+/**
+ * ## pd-datepicker
+ *
+ * A datepicker component for selecting dates with optional time and range support.
+ * Opens a calendar popup on click and integrates seamlessly with pd-form-container
+ * for validation.
+ *
+ * ### Features
+ * - **Date Selection**: Click to open calendar popup for date selection
+ * - **Time Selection**: Optional time picker with predefined time slots
+ * - **Date Range**: Optional range selection for start and end dates
+ * - **Year Popup**: Quick year navigation via dropdown
+ * - **Min/Max Constraints**: Limit selectable date range with `min` and `max` properties
+ * - **Disabled Days**: Disable specific dates via `disabledDays` array
+ * - **Modal Mode**: Centered modal display for mobile devices (auto or forced)
+ * - **Form Integration**: Works with pd-form-container for validation
+ * - **Popup Positioning**: Automatically opens above or below based on viewport space
+ *
+ * ### Accessibility
+ * - `aria-haspopup="dialog"` on the input field
+ * - `aria-expanded` reflects popup open/close state
+ * - `aria-controls` links input to popup
+ * - `aria-modal="true"` on the calendar popup
+ * - Keyboard: Enter/Space toggles popup, ArrowDown opens, Escape closes
+ * - Focus returns to input when popup closes
+ */
+declare const meta: Meta<PdDatepickerArgs>;
+export default meta;
+type Story = StoryObj<PdDatepickerArgs>;
+/** Default datepicker. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All datepicker configurations at a glance. */
+export declare const AllVariants: Story;
+/** Datepicker with time selection -- date + time picker combination. */
+export declare const WithTime: Story;
+/** Datepicker for selecting a start and end date. */
+export declare const DateRange: Story;
+/** Different date format locales side by side. */
+export declare const Locales: Story;
+/** Date constraints with min/max properties, disabled days, and linked datepickers. */
+export declare const MinMaxDate: Story;
+/** Modal mode displays the calendar centered on screen with a backdrop overlay. */
+export declare const ModalMode: Story;
+/** Datepicker within a pd-form-container with validation. */
+export declare const InForm: Story;
+/** Tests automatic popup positioning based on available viewport space. */
+export declare const PopupPosition: Story;
+/** CSS Custom Properties -- Branded and Redesigned datepicker variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-date-picker.stories.d.ts.map

package/dist/pd-datepicker/pd-date-picker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-date-picker.stories.d.ts","sourceRoot":"","sources":["../../src/pd-datepicker/pd-date-picker.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,6CAA6C,CAAC;AAErD,OAAO,oBAAoB,CAAC;AAM5B;;;GAGG;AACH,UAAU,gBAAgB;IACxB,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,yBAAyB;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAoFhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAMxC,0DAA0D;AAC1D,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAMF,iDAAiD;AACjD,eAAO,MAAM,WAAW,EAAE,KAuEzB,CAAC;AAMF,wEAAwE;AACxE,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAC;AAMF,qDAAqD;AACrD,eAAO,MAAM,SAAS,EAAE,KA4BvB,CAAC;AAMF,kDAAkD;AAClD,eAAO,MAAM,OAAO,EAAE,KA4CrB,CAAC;AAMF,uFAAuF;AACvF,eAAO,MAAM,UAAU,EAAE,KAqGxB,CAAC;AAMF,mFAAmF;AACnF,eAAO,MAAM,SAAS,EAAE,KA8DvB,CAAC;AAMF,6DAA6D;AAC7D,eAAO,MAAM,MAAM,EAAE,KA0EpB,CAAC;AAMF,2EAA2E;AAC3E,eAAO,MAAM,aAAa,EAAE,KAoC3B,CAAC;AAMF,2EAA2E;AAC3E,eAAO,MAAM,aAAa,EAAE,KA4G3B,CAAC"}

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

@@ -0,0 +1,3 @@
+import { PdDatepicker } from './PdDatepicker.js';
+export { PdDatepicker };
+//# sourceMappingURL=pd-datepicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-datepicker.d.ts","sourceRoot":"","sources":["../../src/pd-datepicker/pd-datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/pd-datepicker.d.ts

@@ -0,0 +1,2 @@
+export * from './pd-datepicker/pd-datepicker'
+export {}

package/dist/pd-datepicker.js

@@ -0,0 +1,8 @@
+import { PdDatepicker } from './pd-datepicker/PdDatepicker.js';
+
+const tag = "pd-datepicker";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdDatepicker);
+}
+
+export { PdDatepicker };

package/dist/pd-slot-picker/PdSlotPicker.d.ts

@@ -0,0 +1,102 @@
+import { LitElement, CSSResultGroup } from 'lit';
+import { CalendarData, CalendarConfig, SlotPickerValue } from '../types.js';
+/**
+ * Slot picker component for appointment booking (Calendly-style).
+ *
+ * Combines a PdCalendar month view with a time slot list.
+ * Days with available slots are marked in the calendar.
+ * Selecting a day shows available time slots beside/below the calendar.
+ *
+ * @tagname pd-slot-picker
+ * @summary Appointment slot picker with calendar and time slot selection.
+ *
+ * @event change-month - Fired when navigating to a different month. Detail: `{ newDate: Date, next?: boolean, prev?: boolean }`.
+ * @event select-date - Fired when a date is selected. Detail: `{ dateKey: string, date: Date }`.
+ * @event select-slot - Fired when a time slot is selected. Detail: `{ dateKey: string, startTime: string, endTime: string, index: number }`.
+ *
+ * @cssprop --pd-slot-picker-gap - Gap between calendar and slot list. Default: `1.5rem`.
+ * @cssprop --pd-slot-picker-calendar-basis - Flex basis for calendar section. Default: `320px`.
+ * @cssprop --pd-slot-picker-calendar-min-width - Min width for calendar section. Default: `280px`.
+ * @cssprop --pd-slot-picker-calendar-max-width - Max width for calendar section. Default: `420px`.
+ * @cssprop --pd-slot-picker-slots-basis - Flex basis for slots section. Default: `280px`.
+ * @cssprop --pd-slot-picker-slots-min-width - Min width for slots section. Default: `240px`.
+ * @cssprop --pd-slot-picker-slots-max-width - Max width for slots section. Default: `400px`.
+ * @cssprop --pd-slot-picker-slots-max-height - Max height for slot list (scrollable). Default: `400px`.
+ * @cssprop --pd-slot-picker-header-size - Font size of slot list header. Default: `1rem`.
+ * @cssprop --pd-slot-picker-header-col - Color of slot list header. Default: `var(--pd-default-font-title-col)`.
+ * @cssprop --pd-slot-picker-slots-top-offset - Top padding for the slots section at wider viewports (>=624px). Default: `1.2rem`.
+ */
+export declare class PdSlotPicker extends LitElement {
+    /** Calendar data with slots per date key (YYYY-MM-DD). */
+    data: CalendarData;
+    /** Calendar configuration including category definitions. */
+    config?: CalendarConfig;
+    /** Reference date for initial calendar view. */
+    refDate?: Date;
+    /** Hide Saturday and Sunday columns. */
+    hideWeekend: boolean;
+    /** Months allowed to navigate backwards (-1 = unlimited). */
+    prevMonthConstraint: number;
+    /** Months allowed to navigate forwards (-1 = unlimited). */
+    nextMonthConstraint: number;
+    /** Year values for year selection popup. Empty array disables popup. */
+    withYearPopup: string[];
+    /** Enable mouse wheel navigation between months. */
+    withWheelNavigation: boolean;
+    /** Enable touch swipe navigation between months. */
+    withTouchNavigation: boolean;
+    /** @ignore - Currently selected date key */
+    private _selectedDateKey;
+    /** @ignore - Currently selected date */
+    private _selectedDate?;
+    /** @ignore - Selected slot data */
+    private _selectedSlot;
+    /** @ignore - Internal ref date for calendar navigation (avoids mutating the refDate property) */
+    private _calendarRefDate?;
+    /** The currently selected slot, or null if no slot is selected. */
+    get value(): SlotPickerValue | null;
+    /** Set the selected slot programmatically. */
+    set value(val: SlotPickerValue | null);
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+    /**
+     * Renders the slot list for the selected day.
+     */
+    private _renderSlotList;
+    /**
+     * Augments the calendar data for display: days without slots get disabled,
+     * and info text is stripped (only day number + category color shown).
+     */
+    private _getCalendarData;
+    /**
+     * Returns the slots for the currently selected day.
+     */
+    private _getSelectedDaySlots;
+    /**
+     * Formats a header string for the selected date using pd-utils.
+     * Example: "Montag, 15. Januar 2026"
+     */
+    private _formatSelectedDateHeader;
+    /**
+     * Gets the category background color from config.
+     */
+    private _getCategoryColor;
+    /**
+     * Gets the category text color from config.
+     */
+    private _getCategoryTextColor;
+    /**
+     * Handles slot selection from pd-slot-cell children.
+     * Updates internal state and re-fires the event.
+     */
+    private _handleSlotSelect;
+    /**
+     * Handles date selection from the calendar.
+     */
+    private _handleDateSelect;
+    /**
+     * Handles month change from the calendar and re-fires it.
+     */
+    private _handleMonthChange;
+}
+//# sourceMappingURL=PdSlotPicker.d.ts.map

package/dist/pd-slot-picker/PdSlotPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdSlotPicker.d.ts","sourceRoot":"","sources":["../../src/pd-slot-picker/PdSlotPicker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,EACL,YAAY,EACZ,cAAc,EAEd,eAAe,EAChB,MAAM,aAAa,CAAC;AAErB,OAAO,+BAA+B,CAAC;AACvC,OAAO,gCAAgC,CAAC;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,0DAA0D;IAE1D,IAAI,EAAE,YAAY,CAAM;IAExB,6DAA6D;IAE7D,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB,gDAAgD;IAEhD,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,wCAAwC;IAExC,WAAW,UAAS;IAEpB,6DAA6D;IAE7D,mBAAmB,SAAM;IAEzB,4DAA4D;IAE5D,mBAAmB,SAAM;IAEzB,wEAAwE;IAExE,aAAa,EAAE,MAAM,EAAE,CAAM;IAE7B,oDAAoD;IAEpD,mBAAmB,UAAS;IAE5B,oDAAoD;IAEpD,mBAAmB,UAAS;IAE5B,4CAA4C;IAE5C,OAAO,CAAC,gBAAgB,CAAM;IAE9B,wCAAwC;IAExC,OAAO,CAAC,aAAa,CAAC,CAAO;IAE7B,mCAAmC;IAEnC,OAAO,CAAC,aAAa,CAAgC;IAErD,iGAAiG;IAEjG,OAAO,CAAC,gBAAgB,CAAC,CAAO;IAEhC,mEAAmE;IACnE,IAAI,KAAK,IAAI,eAAe,GAAG,IAAI,CAElC;IAED,8CAA8C;IAC9C,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,GAAG,IAAI,EAEpC;IAED,OAAgB,MAAM,EAAE,cAAc,CA2EpC;IAEO,MAAM;IAsCf;;OAEG;IACH,OAAO,CAAC,eAAe;IA6CvB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IA0BxB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAK5B;;;OAGG;IACH,OAAO,CAAC,yBAAyB;IAKjC;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAKzB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAK7B;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAezB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAoBzB;;OAEG;IACH,OAAO,CAAC,kBAAkB;CAiB3B"}

package/dist/pd-slot-picker/PdSlotPicker.js

@@ -0,0 +1,339 @@
+import { css, LitElement, html } from 'lit';
+import { localized, msg } from '@lit/localize';
+import { property, state } from 'lit/decorators.js';
+import { formatDateTime } from '@progressive-development/pd-utils';
+import '../pd-calendar.js';
+import './pd-slot-cell/pd-slot-cell.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdSlotPicker = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = {};
+    this.hideWeekend = false;
+    this.prevMonthConstraint = -1;
+    this.nextMonthConstraint = -1;
+    this.withYearPopup = [];
+    this.withWheelNavigation = false;
+    this.withTouchNavigation = false;
+    this._selectedDateKey = "";
+    this._selectedSlot = null;
+  }
+  /** The currently selected slot, or null if no slot is selected. */
+  get value() {
+    return this._selectedSlot;
+  }
+  /** Set the selected slot programmatically. */
+  set value(val) {
+    this._selectedSlot = val;
+  }
+  render() {
+    const slots = this._getSelectedDaySlots();
+    const hasSelectedDate = !!this._selectedDateKey;
+    return html`
+      <div class="slot-picker-layout">
+        <div class="calendar-section">
+          <pd-calendar
+            .data="${this._getCalendarData()}"
+            .config="${this.config ?? {}}"
+            .refDate="${this._calendarRefDate ?? this.refDate}"
+            ?hideWeekend="${this.hideWeekend}"
+            .prevMonthConstraint="${this.prevMonthConstraint}"
+            .nextMonthConstraint="${this.nextMonthConstraint}"
+            .withYearPopup="${this.withYearPopup}"
+            ?withWheelNavigation="${this.withWheelNavigation}"
+            ?withTouchNavigation="${this.withTouchNavigation}"
+            selectableDates
+            ?showSelection="${!!this._selectedDateKey}"
+            numberClass="center"
+            @select-date="${this._handleDateSelect}"
+            @change-month="${this._handleMonthChange}"
+          ></pd-calendar>
+        </div>
+
+        <div class="slots-section">
+          ${hasSelectedDate ? this._renderSlotList(slots) : html`<div class="slots-placeholder">
+                ${msg("Bitte wählen Sie einen Tag aus.", {
+      id: "pd.slotpicker.placeholder"
+    })}
+              </div>`}
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Renders the slot list for the selected day.
+   */
+  _renderSlotList(slots) {
+    const headerText = this._formatSelectedDateHeader();
+    const emptyMessage = msg("Keine verfügbaren Zeitfenster.", {
+      id: "pd.slotpicker.empty"
+    });
+    return html`
+      <div class="slots-header">${headerText}</div>
+      <div
+        class="slots-list"
+        role="list"
+        @select-slot="${this._handleSlotSelect}"
+      >
+        ${slots.length > 0 ? slots.map(
+      (slot, index) => html`
+                <pd-slot-cell
+                  role="listitem"
+                  tabindex="0"
+                  key="${this._selectedDateKey}"
+                  .startTime="${slot.startTime || ""}"
+                  .endTime="${slot.endTime || ""}"
+                  .title="${slot.info || ""}"
+                  .desc="${slot.desc || ""}"
+                  .category="${slot.category || ""}"
+                  .categoryColor="${this._getCategoryColor(slot.category)}"
+                  .categoryTextColor="${this._getCategoryTextColor(
+        slot.category
+      )}"
+                  ?fullDay="${slot.fullDay ?? false}"
+                  ?disabled="${slot.disabled || slot.capacity != null && (slot.booked ?? 0) >= slot.capacity}"
+                  ?selected="${this._selectedSlot?.index === index}"
+                  .capacity="${slot.capacity}"
+                  .booked="${slot.booked}"
+                  .index="${index}"
+                ></pd-slot-cell>
+              `
+    ) : html`<div class="slots-empty">${emptyMessage}</div>`}
+      </div>
+    `;
+  }
+  /**
+   * Augments the calendar data for display: days without slots get disabled,
+   * and info text is stripped (only day number + category color shown).
+   */
+  _getCalendarData() {
+    const ref = this._calendarRefDate ?? this.refDate ?? /* @__PURE__ */ new Date();
+    const year = ref.getFullYear();
+    const month = ref.getMonth();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const result = {};
+    for (let day = 1; day <= daysInMonth; day++) {
+      const key = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+      const slots = this.data[key];
+      if (slots?.length) {
+        const allFull = slots.every(
+          (s) => s.disabled || s.capacity != null && (s.booked ?? 0) >= s.capacity
+        );
+        result[key] = allFull ? [{ disabled: true }] : slots.map(({ info, desc, ...rest }) => rest);
+      } else {
+        result[key] = [{ disabled: true }];
+      }
+    }
+    return result;
+  }
+  /**
+   * Returns the slots for the currently selected day.
+   */
+  _getSelectedDaySlots() {
+    if (!this._selectedDateKey || !this.data) return [];
+    return this.data[this._selectedDateKey] ?? [];
+  }
+  /**
+   * Formats a header string for the selected date using pd-utils.
+   * Example: "Montag, 15. Januar 2026"
+   */
+  _formatSelectedDateHeader() {
+    if (!this._selectedDate) return "";
+    return formatDateTime(this._selectedDate, false);
+  }
+  /**
+   * Gets the category background color from config.
+   */
+  _getCategoryColor(category) {
+    if (!category || !this.config?.categories?.[category]) return "";
+    return this.config.categories[category].color || "";
+  }
+  /**
+   * Gets the category text color from config.
+   */
+  _getCategoryTextColor(category) {
+    if (!category || !this.config?.categories?.[category]) return "";
+    return this.config.categories[category].textColor || "";
+  }
+  /**
+   * Handles slot selection from pd-slot-cell children.
+   * Updates internal state and re-fires the event.
+   */
+  _handleSlotSelect(e) {
+    const { dateKey, startTime, endTime, index } = e.detail;
+    this._selectedSlot = { dateKey, startTime, endTime, index };
+    this.dispatchEvent(
+      new CustomEvent("select-slot", {
+        detail: { dateKey, startTime, endTime, index },
+        bubbles: true,
+        composed: true
+      })
+    );
+    e.stopPropagation();
+  }
+  /**
+   * Handles date selection from the calendar.
+   */
+  _handleDateSelect(e) {
+    const { dateKey, date } = e.detail;
+    this._selectedDateKey = dateKey;
+    this._selectedDate = date;
+    this._selectedSlot = null;
+    this._calendarRefDate = date;
+    this.dispatchEvent(
+      new CustomEvent("select-date", {
+        detail: { dateKey, date },
+        bubbles: true,
+        composed: true
+      })
+    );
+    e.stopPropagation();
+  }
+  /**
+   * Handles month change from the calendar and re-fires it.
+   */
+  _handleMonthChange(e) {
+    this._calendarRefDate = e.detail.newDate;
+    this._selectedDateKey = "";
+    this._selectedDate = void 0;
+    this._selectedSlot = null;
+    this.dispatchEvent(
+      new CustomEvent("change-month", {
+        detail: e.detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+    e.stopPropagation();
+  }
+};
+PdSlotPicker.styles = [
+  css`
+      :host {
+        display: block;
+        font-family: var(--pd-default-font-content-family);
+        container-type: inline-size;
+      }
+
+      .slot-picker-layout {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--pd-slot-picker-gap, 1.5rem);
+        align-items: flex-start;
+      }
+
+      .calendar-section {
+        flex: 1 1 var(--pd-slot-picker-calendar-basis, 320px);
+        min-width: var(--pd-slot-picker-calendar-min-width, 280px);
+        max-width: var(--pd-slot-picker-calendar-max-width, 420px);
+      }
+
+      .calendar-section pd-calendar {
+        --pd-calendar-width: 100%;
+        --pd-calendar-min-width: 0;
+        --pd-calendar-cell-selected-bg-col: var(--pd-default-dark-col);
+      }
+
+      .slots-section {
+        flex: 1 1 var(--pd-slot-picker-slots-basis, 280px);
+        min-width: var(--pd-slot-picker-slots-min-width, 240px);
+        max-width: var(--pd-slot-picker-calendar-max-width, 420px);
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-sm, 0.5rem);
+      }
+
+      @container (min-width: 624px) {
+        .slots-section {
+          max-width: var(--pd-slot-picker-slots-max-width, 400px);
+          padding-top: var(--pd-slot-picker-slots-top-offset, 1.2rem);
+        }
+      }
+
+      .slots-header {
+        font-size: var(--pd-slot-picker-header-size, 1rem);
+        font-weight: 600;
+        color: var(
+          --pd-slot-picker-header-col,
+          var(--pd-default-font-title-col, #111827)
+        );
+        font-family: var(--pd-default-font-title-family);
+        padding: 0 var(--pd-spacing-xs, 0.25rem);
+      }
+
+      .slots-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-xs, 0.25rem);
+        max-height: var(--pd-slot-picker-slots-max-height, 400px);
+        overflow-y: auto;
+      }
+
+      .slots-empty {
+        padding: var(--pd-spacing-lg, 1.5rem);
+        text-align: center;
+        color: var(--pd-default-font-light-col, #6b7280);
+        font-style: italic;
+      }
+
+      .slots-placeholder {
+        padding: var(--pd-spacing-lg, 1.5rem);
+        text-align: center;
+        color: var(--pd-default-font-light-col, #6b7280);
+      }
+    `
+];
+__decorateClass([
+  property({ type: Object })
+], PdSlotPicker.prototype, "data", 2);
+__decorateClass([
+  property({ type: Object })
+], PdSlotPicker.prototype, "config", 2);
+__decorateClass([
+  property({ type: Object })
+], PdSlotPicker.prototype, "refDate", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdSlotPicker.prototype, "hideWeekend", 2);
+__decorateClass([
+  property({ type: Number })
+], PdSlotPicker.prototype, "prevMonthConstraint", 2);
+__decorateClass([
+  property({ type: Number })
+], PdSlotPicker.prototype, "nextMonthConstraint", 2);
+__decorateClass([
+  property({ type: Array })
+], PdSlotPicker.prototype, "withYearPopup", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdSlotPicker.prototype, "withWheelNavigation", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdSlotPicker.prototype, "withTouchNavigation", 2);
+__decorateClass([
+  state()
+], PdSlotPicker.prototype, "_selectedDateKey", 2);
+__decorateClass([
+  state()
+], PdSlotPicker.prototype, "_selectedDate", 2);
+__decorateClass([
+  state()
+], PdSlotPicker.prototype, "_selectedSlot", 2);
+__decorateClass([
+  state()
+], PdSlotPicker.prototype, "_calendarRefDate", 2);
+PdSlotPicker = __decorateClass([
+  localized()
+], PdSlotPicker);
+
+export { PdSlotPicker };

package/dist/pd-slot-picker/pd-slot-cell/PdSlotCell.d.ts

@@ -0,0 +1,35 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseCell } from '../../shared/PdBaseCell.js';
+/**
+ * A cell component for displaying a single time slot in the slot picker.
+ * Shows time range, title, and optional description.
+ *
+ * @tagname pd-slot-cell
+ * @summary Displays a single bookable time slot.
+ *
+ * @event select-slot - Fired when slot is selected. Detail: `{ dateKey: string, startTime: string, endTime: string, index: number }`.
+ *
+ * @cssprop --pd-slot-cell-bg-col - Background color. Default: `var(--pd-default-lightest-col)`.
+ * @cssprop --pd-slot-cell-bg-col-hover - Hover background color. Default: `var(--pd-default-light-col)`.
+ * @cssprop --pd-slot-cell-selected-bg-col - Selected background color. Default: `var(--pd-default-success-light-col)`.
+ * @cssprop --pd-slot-cell-selected-border-col - Selected border color. Default: `var(--pd-default-success-col)`.
+ * @cssprop --pd-slot-cell-category-bg-col - Category background color (set via inline style).
+ * @cssprop --pd-slot-cell-category-text-col - Category text color (set via inline style).
+ * @cssprop --pd-slot-cell-time-size - Time font size. Default: `0.95rem`.
+ * @cssprop --pd-slot-cell-time-col - Time text color. Default: `var(--pd-default-font-col)`.
+ * @cssprop --pd-slot-cell-title-size - Title font size. Default: `0.875rem`.
+ * @cssprop --pd-slot-cell-title-col - Title text color. Default: `var(--pd-default-font-col)`.
+ * @cssprop --pd-slot-cell-desc-size - Description font size. Default: `0.8rem`.
+ * @cssprop --pd-slot-cell-desc-col - Description text color. Default: `var(--pd-default-font-light-col)`.
+ * @cssprop --pd-slot-cell-availability-size - Availability badge font size. Default: `0.75rem`.
+ * @cssprop --pd-slot-cell-availability-col - Availability badge text color. Default: `var(--pd-default-font-light-col)`.
+ */
+export declare class PdSlotCell extends PdBaseCell {
+    /** Index of this slot within the day's entries. */
+    index: number;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+    protected _handleSelect(): void;
+    private _handleClick;
+}
+//# sourceMappingURL=PdSlotCell.d.ts.map

package/dist/pd-slot-picker/pd-slot-cell/PdSlotCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdSlotCell.d.ts","sourceRoot":"","sources":["../../../src/pd-slot-picker/pd-slot-cell/PdSlotCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAsB,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,mDAAmD;IAEnD,KAAK,SAAK;IAEV,OAAgB,MAAM,EAAE,cAAc,CAmHpC;IAEO,MAAM;cAiCI,aAAa,IAAI,IAAI;IAiBxC,OAAO,CAAC,YAAY;CAGrB"}