@progressive-development/pd-calendar 0.9.2 → 1.0.1

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

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

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

@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { CalendarData, CalendarConfig } from '../types.js';
+/**
+ * Story arguments interface for pd-slot-picker component.
+ * Maps to the component's public API.
+ */
+interface PdSlotPickerArgs {
+    /** Calendar data with slots per date */
+    data: CalendarData;
+    /** Calendar configuration including category definitions */
+    config?: CalendarConfig;
+    /** Whether weekends should be hidden */
+    hideWeekend: boolean;
+    /** Number of months allowed to navigate backwards (-1 = unlimited) */
+    prevMonthConstraint: number;
+    /** Number of months allowed to navigate forwards (-1 = unlimited) */
+    nextMonthConstraint: number;
+    /** Year selection popup values */
+    withYearPopup: string[];
+    /** Enable mouse wheel navigation between months */
+    withWheelNavigation: boolean;
+    /** Enable touch swipe navigation between months */
+    withTouchNavigation: boolean;
+}
+/**
+ * ## pd-slot-picker
+ *
+ * Appointment slot picker component (Calendly-style) that combines a monthly
+ * calendar view with a time slot list for booking appointments.
+ *
+ * ### Features
+ * - **Calendar + Slots**: Side-by-side layout (responsive flex-wrap)
+ * - **Day Selection**: Click a highlighted day to see its available time slots
+ * - **Slot Selection**: Click a time slot to select it (fires `select-slot` event)
+ * - **Categories**: Color-coded slot types via CalendarConfig
+ * - **Disabled Slots**: Mark already-booked slots as disabled
+ * - **Capacity Tracking**: Show remaining spots per slot, auto-disable when full
+ * - **Responsive**: Wraps to vertical layout on smaller screens
+ * - **Navigation Constraints**: Limit forward/backward month navigation
+ * - **Weekend Hiding**: Option to hide Saturday and Sunday
+ *
+ * ### Accessibility
+ * - Slot list uses `role="list"` with `role="listitem"` on each slot cell
+ * - Slot cells are focusable via `tabindex="0"`
+ * - Calendar keyboard navigation inherited from pd-calendar
+ * - Disabled slots are visually distinct and non-interactive
+ */
+declare const meta: Meta<PdSlotPickerArgs>;
+export default meta;
+type Story = StoryObj<PdSlotPickerArgs>;
+/** Default slot picker with appointment data. Click a highlighted day to see available time slots. */
+export declare const Default: Story;
+/** Slot picker without category colors -- simple uniform slot styling. */
+export declare const WithoutCategories: Story;
+/** Responsive layout behavior: side-by-side on wide screens, stacked on narrow screens. */
+export declare const ResponsiveLayout: Story;
+/** Mix of available and disabled (already booked) slots. */
+export declare const WithDisabledSlots: Story;
+/** Slots with capacity tracking -- shows remaining spots and auto-disables when full. */
+export declare const WithCapacity: Story;
+/** Many 15-minute slots to demonstrate the scrollable slot list behavior. */
+export declare const ManySlots: Story;
+/** Slot picker with hidden weekends and year popup. */
+export declare const HiddenWeekends: Story;
+/** CSS Custom Properties -- Branded and Redesigned slot picker variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-slot-picker.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-slot-picker.stories.d.ts","sourceRoot":"","sources":["../../src/pd-slot-picker/pd-slot-picker.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMhE;;;GAGG;AACH,UAAU,gBAAgB;IACxB,wCAAwC;IACxC,IAAI,EAAE,YAAY,CAAC;IACnB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,wCAAwC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qEAAqE;IACrE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kCAAkC;IAClC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,mDAAmD;IACnD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mDAAmD;IACnD,mBAAmB,EAAE,OAAO,CAAC;CAC9B;AA4LD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CA+EhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAMxC,sGAAsG;AACtG,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAMF,0EAA0E;AAC1E,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC;AAMF,2FAA2F;AAC3F,eAAO,MAAM,gBAAgB,EAAE,KA+D9B,CAAC;AAMF,4DAA4D;AAC5D,eAAO,MAAM,iBAAiB,EAAE,KAuE/B,CAAC;AAMF,yFAAyF;AACzF,eAAO,MAAM,YAAY,EAAE,KAoJ1B,CAAC;AAMF,6EAA6E;AAC7E,eAAO,MAAM,SAAS,EAAE,KA8CvB,CAAC;AAMF,uDAAuD;AACvD,eAAO,MAAM,cAAc,EAAE,KAmB5B,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,EAAE,KAyG3B,CAAC"}

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

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

package/dist/pd-slot-picker.js

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

package/dist/shared/PdBaseCell.d.ts

@@ -0,0 +1,68 @@
+import { LitElement } from 'lit';
+/**
+ * Abstract base class for all calendar cell components.
+ *
+ * Provides shared properties from `CalendarCellInfo` and common utility methods
+ * for category styling, time formatting, and keyboard accessibility.
+ *
+ * Subclasses must implement `_handleSelect()` for their specific selection behavior
+ * and provide their own `render()` and `static styles`.
+ */
+export declare abstract class PdBaseCell extends LitElement {
+    /** Date key in YYYY-MM-DD format. */
+    key: string;
+    /** Day number (1-31). */
+    dayNumber: number;
+    /** Weekday number (0=Sunday, 6=Saturday). */
+    weekDayNumber: number;
+    /** Title/info text (from CalendarCellInfo.info). */
+    title: string;
+    /** Description text (from CalendarCellInfo.desc). */
+    desc: string;
+    /** Start time for the event (e.g., "08:30"). */
+    startTime: string;
+    /** End time for the event (e.g., "14:30"). */
+    endTime: string;
+    /** Whether this is a full-day event. */
+    fullDay: boolean;
+    /** Maximum capacity for this slot (number of bookable spots). */
+    capacity?: number;
+    /** Number of already booked spots. */
+    booked?: number;
+    /** Category key (references CalendarConfig.categories). */
+    category: string;
+    /** Background color for the category (from CalendarCategoryConfig.color). */
+    categoryColor: string;
+    /** Text color for the category (from CalendarCategoryConfig.textColor). */
+    categoryTextColor: string;
+    /** Whether this cell is disabled (cannot be selected). */
+    disabled: boolean;
+    /** Whether this cell is selected. */
+    selected: boolean;
+    /**
+     * Builds inline style string for category colors.
+     * Each cell passes its own CSS variable names.
+     *
+     * @param bgVar - CSS variable name for category background color
+     * @param textVar - CSS variable name for category text color
+     */
+    protected _getCategoryStyle(bgVar: string, textVar: string): string;
+    /**
+     * Formats time info string based on startTime, endTime, fullDay.
+     *
+     * @param separator - Separator between start and end time. Default: `" - "`.
+     * @returns Formatted time string or empty string if no time info is set.
+     */
+    protected _formatTime(separator?: string): string;
+    /**
+     * Keyboard handler for Enter/Space key accessibility.
+     * Delegates to `_handleSelect()` which each cell implements.
+     */
+    protected _handleKeyDown(e: KeyboardEvent): void;
+    /**
+     * Called when the cell is activated (click or keyboard).
+     * Each cell implements its own selection behavior and event dispatching.
+     */
+    protected abstract _handleSelect(): void;
+}
+//# sourceMappingURL=PdBaseCell.d.ts.map

package/dist/shared/PdBaseCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdBaseCell.d.ts","sourceRoot":"","sources":["../../src/shared/PdBaseCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC;;;;;;;;GAQG;AACH,8BAAsB,UAAW,SAAQ,UAAU;IAKjD,qCAAqC;IAErC,GAAG,SAAM;IAET,yBAAyB;IAEzB,SAAS,SAAM;IAEf,6CAA6C;IAE7C,aAAa,SAAM;IAMnB,oDAAoD;IAEpD,KAAK,SAAM;IAEX,qDAAqD;IAErD,IAAI,SAAM;IAEV,gDAAgD;IAEhD,SAAS,SAAM;IAEf,8CAA8C;IAE9C,OAAO,SAAM;IAEb,wCAAwC;IAExC,OAAO,UAAS;IAMhB,iEAAiE;IAEjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,sCAAsC;IAEtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAMhB,2DAA2D;IAE3D,QAAQ,SAAM;IAEd,6EAA6E;IAE7E,aAAa,SAAM;IAEnB,2EAA2E;IAE3E,iBAAiB,SAAM;IAMvB,0DAA0D;IAE1D,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAMjB;;;;;;OAMG;IACH,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM;IAWnE;;;;;OAKG;IACH,SAAS,CAAC,WAAW,CAAC,SAAS,SAAQ,GAAG,MAAM;IAQhD;;;OAGG;IACH,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAOhD;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;CACzC"}

package/dist/shared/PdBaseCell.js

@@ -0,0 +1,120 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class PdBaseCell extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.key = "";
+    this.dayNumber = -1;
+    this.weekDayNumber = -1;
+    this.title = "";
+    this.desc = "";
+    this.startTime = "";
+    this.endTime = "";
+    this.fullDay = false;
+    this.category = "";
+    this.categoryColor = "";
+    this.categoryTextColor = "";
+    this.disabled = false;
+    this.selected = false;
+  }
+  // ============================================================================
+  // Protected Methods
+  // ============================================================================
+  /**
+   * Builds inline style string for category colors.
+   * Each cell passes its own CSS variable names.
+   *
+   * @param bgVar - CSS variable name for category background color
+   * @param textVar - CSS variable name for category text color
+   */
+  _getCategoryStyle(bgVar, textVar) {
+    const styles = [];
+    if (this.categoryColor) {
+      styles.push(`${bgVar}: ${this.categoryColor}`);
+    }
+    if (this.categoryTextColor) {
+      styles.push(`${textVar}: ${this.categoryTextColor}`);
+    }
+    return styles.join("; ");
+  }
+  /**
+   * Formats time info string based on startTime, endTime, fullDay.
+   *
+   * @param separator - Separator between start and end time. Default: `" - "`.
+   * @returns Formatted time string or empty string if no time info is set.
+   */
+  _formatTime(separator = " - ") {
+    if (this.fullDay) return "24h";
+    if (this.startTime && this.endTime)
+      return `${this.startTime}${separator}${this.endTime}`;
+    if (this.startTime) return this.startTime;
+    return "";
+  }
+  /**
+   * Keyboard handler for Enter/Space key accessibility.
+   * Delegates to `_handleSelect()` which each cell implements.
+   */
+  _handleKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._handleSelect();
+    }
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "key");
+__decorateClass([
+  property({ type: Number })
+], PdBaseCell.prototype, "dayNumber");
+__decorateClass([
+  property({ type: Number })
+], PdBaseCell.prototype, "weekDayNumber");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "title");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "desc");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "startTime");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "endTime");
+__decorateClass([
+  property({ type: Boolean })
+], PdBaseCell.prototype, "fullDay");
+__decorateClass([
+  property({ type: Number })
+], PdBaseCell.prototype, "capacity");
+__decorateClass([
+  property({ type: Number })
+], PdBaseCell.prototype, "booked");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "category");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "categoryColor");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "categoryTextColor");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdBaseCell.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdBaseCell.prototype, "selected");
+
+export { PdBaseCell };

package/dist/shared/PdBaseView.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, CSSResultGroup } from 'lit';
+import { CalendarData, CalendarConfig, CalendarCategoryConfig } from '../types.js';
+/**
+ * Abstract base class for all calendar view components.
+ *
+ * Provides shared properties for data, config, and selection,
+ * plus a utility to resolve category configuration.
+ */
+export declare abstract class PdBaseView extends LitElement {
+    /** Calendar data with info per date key (YYYY-MM-DD). */
+    data: CalendarData;
+    /** Calendar configuration including category definitions. */
+    config?: CalendarConfig;
+    /** Reference date for initial calendar view. */
+    refDate?: Date;
+    /** Show selection highlight on selected date. */
+    showSelection: boolean;
+    /** Resolves a category key to its configuration. */
+    protected _resolveCategoryConfig(category?: string): CalendarCategoryConfig | undefined;
+    static baseStyles: CSSResultGroup;
+}
+//# sourceMappingURL=PdBaseView.d.ts.map

package/dist/shared/PdBaseView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdBaseView.d.ts","sourceRoot":"","sources":["../../src/shared/PdBaseView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAGtD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,sBAAsB,EACvB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AACH,8BAAsB,UAAW,SAAQ,UAAU;IACjD,yDAAyD;IAEzD,IAAI,EAAE,YAAY,CAAM;IAExB,6DAA6D;IAE7D,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB,gDAAgD;IAEhD,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,iDAAiD;IAEjD,aAAa,UAAS;IAEtB,oDAAoD;IACpD,SAAS,CAAC,sBAAsB,CAC9B,QAAQ,CAAC,EAAE,MAAM,GAChB,sBAAsB,GAAG,SAAS;IAKrC,MAAM,CAAC,UAAU,EAAE,cAAc,CAK/B;CACH"}

package/dist/shared/PdBaseView.js

@@ -0,0 +1,46 @@
+import { LitElement, css } from 'lit';
+import { property } from 'lit/decorators.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class PdBaseView extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = {};
+    this.showSelection = false;
+  }
+  /** Resolves a category key to its configuration. */
+  _resolveCategoryConfig(category) {
+    if (!category) return void 0;
+    return this.config?.categories?.[category];
+  }
+  static {
+    this.baseStyles = css`
+    :host {
+      display: block;
+      container-type: inline-size;
+    }
+  `;
+  }
+}
+__decorateClass([
+  property({ type: Object })
+], PdBaseView.prototype, "data");
+__decorateClass([
+  property({ type: Object })
+], PdBaseView.prototype, "config");
+__decorateClass([
+  property({ type: Object })
+], PdBaseView.prototype, "refDate");
+__decorateClass([
+  property({ type: Boolean })
+], PdBaseView.prototype, "showSelection");
+
+export { PdBaseView };

package/dist/shared/PdCalendarPanelBase.d.ts

@@ -0,0 +1,34 @@
+import { LitElement, nothing, CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * Abstract base class for calendar floating panels.
+ *
+ * Provides the shared panel shell: fixed positioning, auto-placement via
+ * `calculateFloatingPosition`, close-on-click-outside / Escape / scroll,
+ * and a consistent header with a close icon.
+ *
+ * Subclasses override `renderHeaderContent()` and `renderBody()`.
+ *
+ * @event close-panel - Fired when the panel should close.
+ */
+export declare abstract class PdCalendarPanelBase extends LitElement {
+    /** Anchor rect for positioning (from the clicked element). */
+    anchorRect?: DOMRect;
+    private _boundClickOutside;
+    private _boundKeyDown;
+    private _boundScroll;
+    static panelBaseStyles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<PropertyKey, unknown>): void;
+    render(): TemplateResult | typeof nothing;
+    /** Override to render content inside the header (left of close icon). */
+    protected abstract renderHeaderContent(): TemplateResult | typeof import('lit').nothing;
+    /** Override to render the scrollable body content. */
+    protected abstract renderBody(): TemplateResult | typeof import('lit').nothing;
+    private _updatePosition;
+    protected _onClose(): void;
+    private _handleClickOutside;
+    private _handleKeyDown;
+    private _handleScroll;
+}
+//# sourceMappingURL=PdCalendarPanelBase.d.ts.map

package/dist/shared/PdCalendarPanelBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdCalendarPanelBase.d.ts","sourceRoot":"","sources":["../../src/shared/PdCalendarPanelBase.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAGV,OAAO,EACP,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;;GAUG;AACH,8BAAsB,mBAAoB,SAAQ,UAAU;IAC1D,8DAA8D;IAE9D,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,OAAO,CAAC,kBAAkB,CAAuC;IACjE,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,YAAY,CAAiC;IAErD,MAAM,CAAC,eAAe,EAAE,cAAc,CA2DpC;IAMO,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAUjD,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IAgBlD,yEAAyE;IACzE,SAAS,CAAC,QAAQ,CAAC,mBAAmB,IAClC,cAAc,GACd,cAAc,KAAK,EAAE,OAAO;IAEhC,sDAAsD;IACtD,SAAS,CAAC,QAAQ,CAAC,UAAU,IACzB,cAAc,GACd,cAAc,KAAK,EAAE,OAAO;IAMhC,OAAO,CAAC,eAAe;IAuBvB,SAAS,CAAC,QAAQ,IAAI,IAAI;IAM1B,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,aAAa;CAGtB"}

package/dist/shared/PdCalendarPanelBase.js

@@ -0,0 +1,169 @@
+import { LitElement, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { calculateFloatingPosition } from '@progressive-development/pd-utils';
+import { pdIcons } from '@progressive-development/pd-icon';
+import '@progressive-development/pd-icon/pd-icon';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class PdCalendarPanelBase extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._boundClickOutside = this._handleClickOutside.bind(this);
+    this._boundKeyDown = this._handleKeyDown.bind(this);
+    this._boundScroll = this._handleScroll.bind(this);
+  }
+  static {
+    this.panelBaseStyles = css`
+    :host {
+      display: block;
+      position: fixed;
+      z-index: 9999;
+    }
+
+    .panel {
+      width: var(--pd-calendar-panel-width, 280px);
+      max-height: var(--pd-calendar-panel-max-height, 70vh);
+      background: var(--pd-calendar-panel-bg, var(--pd-default-bg-col, #fff));
+      border-radius: var(--pd-radius-md, 8px);
+      box-shadow: var(
+        --pd-calendar-panel-shadow,
+        0 4px 12px rgba(0, 0, 0, 0.15)
+      );
+      font-family: var(--pd-default-font-content-family);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .panel-header {
+      display: flex;
+      align-items: center;
+      gap: var(--pd-spacing-xs, 0.25rem);
+      padding: var(--pd-spacing-sm, 0.5rem);
+      min-height: 32px;
+      flex-shrink: 0;
+    }
+
+    .panel-header-content {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: var(--pd-spacing-xs, 0.25rem);
+    }
+
+    .panel-close {
+      cursor: pointer;
+      opacity: 0.5;
+      transition: opacity 0.15s ease;
+      flex-shrink: 0;
+      --pd-icon-size: 16px;
+    }
+
+    .panel-close:hover {
+      opacity: 1;
+    }
+
+    .panel-body {
+      padding: 0 var(--pd-spacing-sm, 0.5rem) var(--pd-spacing-sm, 0.5rem);
+      display: flex;
+      flex-direction: column;
+      gap: var(--pd-spacing-xs, 0.25rem);
+      overflow-y: auto;
+      min-height: 0;
+    }
+  `;
+  }
+  // ===========================================================================
+  // Lifecycle
+  // ===========================================================================
+  connectedCallback() {
+    super.connectedCallback();
+    requestAnimationFrame(() => {
+      document.addEventListener("click", this._boundClickOutside);
+      document.addEventListener("keydown", this._boundKeyDown);
+      window.addEventListener("scroll", this._boundScroll, true);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this._boundClickOutside);
+    document.removeEventListener("keydown", this._boundKeyDown);
+    window.removeEventListener("scroll", this._boundScroll, true);
+  }
+  updated(changed) {
+    if (changed.has("anchorRect") && this.anchorRect) {
+      this._updatePosition();
+    }
+  }
+  // ===========================================================================
+  // Render
+  // ===========================================================================
+  render() {
+    return html`
+      <div class="panel">
+        <div class="panel-header">
+          <div class="panel-header-content">${this.renderHeaderContent()}</div>
+          <pd-icon
+            class="panel-close"
+            icon="${pdIcons.ICON_CLOSE}"
+            @click="${this._onClose}"
+          ></pd-icon>
+        </div>
+        <div class="panel-body">${this.renderBody()}</div>
+      </div>
+    `;
+  }
+  // ===========================================================================
+  // Positioning
+  // ===========================================================================
+  _updatePosition() {
+    if (!this.anchorRect) return;
+    const panelEl = this.shadowRoot?.querySelector(
+      ".panel"
+    );
+    const width = panelEl?.offsetWidth || 280;
+    const height = panelEl?.offsetHeight || 200;
+    const pos = calculateFloatingPosition({
+      anchor: this.anchorRect,
+      floating: { width, height },
+      preferY: "below"
+    });
+    this.style.top = `${pos.top}px`;
+    this.style.left = `${pos.left}px`;
+  }
+  // ===========================================================================
+  // Close
+  // ===========================================================================
+  _onClose() {
+    this.dispatchEvent(
+      new CustomEvent("close-panel", { bubbles: true, composed: true })
+    );
+  }
+  _handleClickOutside(e) {
+    if (!e.composedPath().includes(this)) {
+      this._onClose();
+    }
+  }
+  _handleKeyDown(e) {
+    if (e.key === "Escape") {
+      this._onClose();
+    }
+  }
+  _handleScroll() {
+    this._onClose();
+  }
+}
+__decorateClass([
+  property({ type: Object })
+], PdCalendarPanelBase.prototype, "anchorRect");
+
+export { PdCalendarPanelBase };

package/dist/shared/calendar-button-bar/calendar-button-bar.d.ts

@@ -0,0 +1,41 @@
+import { CSSResultGroup, LitElement, PropertyValues } from 'lit';
+import { ButtonData } from '@progressive-development/pd-forms';
+import { AvailableCalendarPeriods, AvailableCalendarViewTypes } from '../../types';
+export declare class CalendarButtonBar extends LitElement {
+    availableViewTypes: AvailableCalendarViewTypes;
+    availablePeriods: AvailableCalendarPeriods;
+    withYearPopup: string[];
+    currentTitle?: string;
+    currentDate?: Date;
+    year: number;
+    withSettings?: boolean;
+    hideNext?: boolean;
+    hidePrev?: boolean;
+    /** When true, navigation buttons are not rendered at all (as opposed to disabled). */
+    hideNavigation: boolean;
+    isCompact?: boolean;
+    _currentViewOptions: ButtonData[];
+    _currentPeriodOptions: ButtonData[];
+    /** Currently selected view type index for the button group. */
+    private _currentViewTypeIndex;
+    /** Currently selected period index for the button select group. */
+    private _currentPeriodIndex;
+    private _viewTypeSelectionEl;
+    private _periodSelectionEl;
+    private _openYearPopupState;
+    static styles: CSSResultGroup;
+    willUpdate(changedProps: PropertyValues<this>): void;
+    render(): import('lit').TemplateResult<1>;
+    private _navigationEvent;
+    private _changeViewEvent;
+    private _changePeriodEvent;
+    /**
+     * Opens the year selection popup with keyboard support.
+     */
+    private _onTriggerKeyDown;
+    /**
+     * Opens the year popup and manages focus.
+     */
+    private _openYearPopup;
+}
+//# sourceMappingURL=calendar-button-bar.d.ts.map

package/dist/shared/calendar-button-bar/calendar-button-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-button-bar.d.ts","sourceRoot":"","sources":["../../../src/shared/calendar-button-bar/calendar-button-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAE/D,OAAO,6CAA6C,CAAC;AACrD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,0DAA0D,CAAC;AAElE,OAAO,EACL,wBAAwB,EACxB,0BAA0B,EAG3B,MAAM,aAAa,CAAC;AAgBrB,qBAEa,iBAAkB,SAAQ,UAAU;IAE/C,kBAAkB,EAAG,0BAA0B,CAAC;IAGhD,gBAAgB,EAAG,wBAAwB,CAAC;IAG5C,aAAa,EAAE,MAAM,EAAE,CAAM;IAG7B,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,WAAW,CAAC,EAAE,IAAI,CAAC;IAGnB,IAAI,EAAE,MAAM,CAAK;IAGjB,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sFAAsF;IAEtF,cAAc,UAAS;IAGvB,SAAS,CAAC,EAAE,OAAO,CAAC;IAIpB,mBAAmB,EAAE,UAAU,EAAE,CAI/B;IAGF,qBAAqB,EAAE,UAAU,EAAE,CAKjC;IAEF,+DAA+D;IAE/D,OAAO,CAAC,qBAAqB,CAAc;IAE3C,mEAAmE;IAEnE,OAAO,CAAC,mBAAmB,CAAc;IAGzC,OAAO,CAAC,oBAAoB,CAAM;IAGlC,OAAO,CAAC,kBAAkB,CAAM;IAEhC,OAAO,CAAC,mBAAmB,CAAkB;IAE7C,OAAgB,MAAM,EAAE,cAAc,CAyIpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgCpD,MAAM;IAsFf,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,gBAAgB;IAwBxB,OAAO,CAAC,kBAAkB;IA2B1B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAOzB;;OAEG;IACH,OAAO,CAAC,cAAc;CA8CvB"}