@progressive-development/pd-calendar 0.9.2 → 1.0.0

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

package/dist/pd-slot-picker/pd-slot-cell/PdSlotCell.js

@@ -0,0 +1,188 @@
+import { css, nothing, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { PdBaseCell } from '../../shared/PdBaseCell.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 PdSlotCell = class extends PdBaseCell {
+  constructor() {
+    super(...arguments);
+    this.index = 0;
+  }
+  render() {
+    const timeInfo = this._formatTime();
+    const cellClasses = this.category ? "slot-cell categorized" : "slot-cell";
+    const style = this._getCategoryStyle(
+      "--pd-slot-cell-category-bg-col",
+      "--pd-slot-cell-category-text-col"
+    );
+    return html`
+      <div
+        class="${cellClasses}"
+        style="${style}"
+        data-date="${this.key}"
+        @click="${this._handleClick}"
+        @keydown="${this._handleKeyDown}"
+      >
+        ${timeInfo ? html`<span class="time">${timeInfo}</span>` : ""}
+        <div class="content-group">
+          ${this.title ? html`<span class="title">${this.title}</span>` : ""}
+          ${this.desc ? html`<span class="description">${this.desc}</span>` : ""}
+        </div>
+        ${this.capacity != null ? html`<span class="availability"
+              >${Math.max(0, this.capacity - (this.booked ?? 0))}/${this.capacity}</span
+            >` : nothing}
+      </div>
+    `;
+  }
+  _handleSelect() {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent("select-slot", {
+        detail: {
+          dateKey: this.key,
+          startTime: this.startTime,
+          endTime: this.endTime,
+          index: this.index
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _handleClick() {
+    this._handleSelect();
+  }
+};
+PdSlotCell.styles = [
+  css`
+      :host {
+        display: block;
+      }
+
+      .slot-cell {
+        display: flex;
+        align-items: center;
+        gap: var(--pd-spacing-sm, 0.5rem);
+        padding: var(--pd-spacing-sm, 0.5rem) var(--pd-spacing-md, 1rem);
+        background-color: var(
+          --pd-slot-cell-bg-col,
+          var(--pd-default-lightest-col, #f9fafb)
+        );
+        border-radius: var(--pd-radius-sm, 4px);
+        cursor: pointer;
+        transition: background-color 0.15s ease;
+      }
+
+      .slot-cell:hover {
+        background-color: var(
+          --pd-slot-cell-bg-col-hover,
+          var(--pd-default-light-col, #f3f4f6)
+        );
+      }
+
+      :host([selected]) .slot-cell {
+        background-color: var(
+          --pd-slot-cell-selected-bg-col,
+          var(--pd-default-success-light-col, #dcfce7)
+        );
+        border-left: 3px solid
+          var(
+            --pd-slot-cell-selected-border-col,
+            var(--pd-default-success-col, #22c55e)
+          );
+      }
+
+      :host([disabled]) .slot-cell {
+        opacity: 0.4;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      /* Categorized cells - colors set via inline style from category config */
+      .slot-cell.categorized {
+        background-color: var(
+          --pd-slot-cell-category-bg-col,
+          var(--pd-default-success-light-col, #dcfce7)
+        );
+      }
+
+      .slot-cell.categorized .time,
+      .slot-cell.categorized .title,
+      .slot-cell.categorized .description {
+        color: var(--pd-slot-cell-category-text-col);
+      }
+
+      .time {
+        font-size: var(--pd-slot-cell-time-size, 0.95rem);
+        font-weight: 600;
+        color: var(
+          --pd-slot-cell-time-col,
+          var(--pd-default-font-col, #374151)
+        );
+        white-space: nowrap;
+        min-width: 5em;
+      }
+
+      .content-group {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-width: 0;
+        gap: 2px;
+      }
+
+      .title {
+        font-size: var(--pd-slot-cell-title-size, 0.875rem);
+        font-weight: 500;
+        color: var(
+          --pd-slot-cell-title-col,
+          var(--pd-default-font-col, #111827)
+        );
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .description {
+        font-size: var(--pd-slot-cell-desc-size, 0.8rem);
+        color: var(
+          --pd-slot-cell-desc-col,
+          var(--pd-default-font-light-col, #6b7280)
+        );
+      }
+
+      .availability {
+        font-size: var(--pd-slot-cell-availability-size, 0.75rem);
+        color: var(
+          --pd-slot-cell-availability-col,
+          var(--pd-default-font-light-col, #6b7280)
+        );
+        white-space: nowrap;
+        margin-left: auto;
+      }
+
+      /* Focus styles for keyboard navigation */
+      :host(:focus-visible) .slot-cell {
+        outline: 2px solid
+          var(--pd-focus-ring-col, var(--pd-default-info-col, #3b82f6));
+        outline-offset: 2px;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Number })
+], PdSlotCell.prototype, "index", 2);
+PdSlotCell = __decorateClass([
+  customElement("pd-slot-cell")
+], PdSlotCell);
+
+export { PdSlotCell };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-slot-cell.d.ts","sourceRoot":"","sources":["../../../src/pd-slot-picker/pd-slot-cell/pd-slot-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAO7C,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

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

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

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