@redvars/peacock 3.5.1 → 3.6.0

package/dist/split-button.js

@@ -0,0 +1,388 @@
+import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { r } from './state-DwbEjqVk.js';
+import { e } from './query-QBcUV-L_.js';
+import { e as e$1 } from './class-map-YU7g0o3B.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z$2 = i`@charset "UTF-8";
+* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: inline-flex;
+  position: relative;
+  --split-button-container-shape: var(--shape-corner-medium);
+  --split-button-gap: 0.125rem;
+  --split-button-icon-size: 1.125rem;
+}
+
+.split-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--split-button-gap);
+}
+
+.action-button {
+  --button-container-shape: var(--split-button-container-shape);
+}
+
+.dropdown-trigger {
+  --button-container-shape: var(--split-button-container-shape);
+  --button-icon-size: var(--split-button-icon-size);
+}
+
+.dropdown-icon {
+  transition: transform 200ms ease;
+}
+
+.dropdown-trigger.active .dropdown-icon {
+  transform: rotate(180deg);
+}
+
+/* ── Variant: Filled ────────────────────────────────────── */
+.split-button.variant-filled .action-button,
+.split-button.variant-filled .dropdown-trigger {
+  --filled-button-container-color: var(--filled-split-button-container-color);
+  --filled-button-label-text-color: var(--filled-split-button-label-text-color);
+}
+
+/* ── Variant: Tonal ─────────────────────────────────────── */
+.split-button.variant-tonal .action-button,
+.split-button.variant-tonal .dropdown-trigger {
+  --tonal-button-container-color: var(--tonal-split-button-container-color);
+  --tonal-button-label-text-color: var(--tonal-split-button-label-text-color);
+}
+
+/* ── Variant: Outlined ──────────────────────────────────── */
+.split-button.variant-outlined .action-button,
+.split-button.variant-outlined .dropdown-trigger {
+  --outlined-button-outline-color: var(--outlined-split-button-outline-color, var(--color-outline));
+  --outlined-button-label-text-color: var(--outlined-split-button-label-text-color);
+}
+
+:host([block]) {
+  width: 100%;
+}
+:host([block]) .split-button {
+  width: 100%;
+}
+:host([block]) .action-button {
+  flex: 1;
+}`;
+
+var css_248z$1 = i`:host([color=primary]) {
+  --filled-split-button-container-color: var(--color-primary);
+  --filled-split-button-label-text-color: var(--color-on-primary);
+  --tonal-split-button-container-color: var(--color-primary-container);
+  --tonal-split-button-label-text-color: var(--color-on-primary-container);
+  --outlined-split-button-outline-color: var(--color-primary);
+  --outlined-split-button-label-text-color: var(--color-primary);
+}
+
+:host([color=secondary]) {
+  --filled-split-button-container-color: var(--color-secondary);
+  --filled-split-button-label-text-color: var(--color-on-secondary);
+  --tonal-split-button-container-color: var(--color-secondary-container);
+  --tonal-split-button-label-text-color: var(--color-on-secondary-container);
+  --outlined-split-button-outline-color: var(--color-secondary);
+  --outlined-split-button-label-text-color: var(--color-secondary);
+}
+
+:host([color=tertiary]) {
+  --filled-split-button-container-color: var(--color-tertiary);
+  --filled-split-button-label-text-color: var(--color-on-tertiary);
+  --tonal-split-button-container-color: var(--color-tertiary-container);
+  --tonal-split-button-label-text-color: var(--color-on-tertiary-container);
+  --outlined-split-button-outline-color: var(--color-tertiary);
+  --outlined-split-button-label-text-color: var(--color-tertiary);
+}
+
+:host([color=success]) {
+  --filled-split-button-container-color: var(--color-success);
+  --filled-split-button-label-text-color: var(--color-on-success);
+  --tonal-split-button-container-color: var(--color-success-container);
+  --tonal-split-button-label-text-color: var(--color-on-success-container);
+  --outlined-split-button-outline-color: var(--color-success);
+  --outlined-split-button-label-text-color: var(--color-success);
+}
+
+:host([color=danger]) {
+  --filled-split-button-container-color: var(--color-error);
+  --filled-split-button-label-text-color: var(--color-on-error);
+  --tonal-split-button-container-color: var(--color-error-container);
+  --tonal-split-button-label-text-color: var(--color-on-error-container);
+  --outlined-split-button-outline-color: var(--color-error);
+  --outlined-split-button-label-text-color: var(--color-error);
+}
+
+:host([color=warning]) {
+  --filled-split-button-container-color: var(--color-warning);
+  --filled-split-button-label-text-color: var(--color-on-warning);
+  --tonal-split-button-container-color: var(--color-warning-container);
+  --tonal-split-button-label-text-color: var(--color-on-warning-container);
+  --outlined-split-button-outline-color: var(--color-warning);
+  --outlined-split-button-label-text-color: var(--color-warning);
+}
+
+:host([color=on-surface]) {
+  --filled-split-button-container-color: var(--color-on-surface);
+  --filled-split-button-label-text-color: var(--color-surface);
+  --tonal-split-button-container-color: var(--color-on-surface-container);
+  --tonal-split-button-label-text-color: var(--color-surface-container-high);
+  --outlined-split-button-outline-color: var(--color-on-surface);
+  --outlined-split-button-label-text-color: var(--color-on-surface);
+}
+
+:host([color=surface]) {
+  --filled-split-button-container-color: var(--color-surface-container-high);
+  --filled-split-button-label-text-color: var(--color-on-surface);
+  --tonal-split-button-container-color: var(--color-surface-container-high);
+  --tonal-split-button-label-text-color: var(--color-on-surface-container);
+  --outlined-split-button-outline-color: var(--color-on-surface);
+  --outlined-split-button-label-text-color: var(--color-on-surface);
+}`;
+
+var css_248z = i`:host([size=xs]),
+:host([size=extra-small]) {
+  --split-button-icon-size: 1rem;
+}
+
+:host([size=sm]),
+:host([size=small]) {
+  --split-button-icon-size: 1.125rem;
+}
+
+:host([size=md]),
+:host([size=medium]) {
+  --split-button-icon-size: 1.25rem;
+}
+
+:host([size=lg]),
+:host([size=large]) {
+  --split-button-icon-size: 1.5rem;
+}
+
+:host([size=xl]),
+:host([size=extra-large]) {
+  --split-button-icon-size: 2rem;
+}`;
+
+/**
+ * @label Split Button
+ * @tag wc-split-button
+ * @rawTag split-button
+ *
+ * @summary A split button lets users perform a default action or choose from a set of related actions via a dropdown menu.
+ * @overview
+ * <p>A split button combines a primary action button with a dropdown arrow that opens a menu. Following M3 Material Design, the split button provides a default action alongside a set of secondary options, reducing clutter while keeping alternative actions accessible.</p>
+ *
+ * @cssprop --split-button-container-shape: Defines the border radius of the split button container shape.
+ *
+ * @cssprop --filled-split-button-container-color: Color of the filled split button container.
+ * @cssprop --filled-split-button-label-text-color: Text color of the filled split button label.
+ *
+ * @cssprop --outlined-split-button-container-color: Color of the outlined split button container.
+ * @cssprop --outlined-split-button-label-text-color: Text color of the outlined split button label.
+ *
+ * @cssprop --tonal-split-button-container-color: Color of the tonal split button container.
+ * @cssprop --tonal-split-button-label-text-color: Text color of the tonal split button label.
+ *
+ * @fires {MouseEvent} click - Dispatched when the primary action button is clicked.
+ * @fires {CustomEvent} toggle-menu - Dispatched when the dropdown menu is opened or closed.
+ *
+ * @example
+ * ```html
+ * <wc-split-button>
+ *   Save
+ *   <wc-menu-item slot="menu">Save as draft</wc-menu-item>
+ *   <wc-menu-item slot="menu">Save and publish</wc-menu-item>
+ * </wc-split-button>
+ * ```
+ * @tags controls
+ */
+let SplitButton = class SplitButton extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Button size.
+         * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+         */
+        this.size = 'sm';
+        /**
+         * The visual style of the split button.
+         *
+         * Possible variant values:
+         * `"filled"` is a filled button.
+         * `"outlined"` is an outlined button.
+         * `"tonal"` is a light color button.
+         */
+        this.variant = 'filled';
+        /**
+         * Defines the primary color of the split button.
+         */
+        this.color = 'primary';
+        /**
+         * Whether the split button is disabled.
+         */
+        this.disabled = false;
+        this._menuOpen = false;
+        this._menuId = `split-menu-${Math.random().toString(36).slice(2, 9)}`;
+        this._onMenuOpened = () => {
+            this._menuOpen = true;
+            this.dispatchEvent(new CustomEvent('toggle-menu', {
+                detail: { open: true },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._onMenuClosed = () => {
+            this._menuOpen = false;
+            this.dispatchEvent(new CustomEvent('toggle-menu', {
+                detail: { open: false },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._onKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'ArrowDown' &&
+                event.target === this._dropdownButton) {
+                event.preventDefault();
+                if (!this._menuOpen) {
+                    this._menu.anchorElement = this;
+                    this._menu?.show();
+                }
+                // Focus the menu so keyboard nav works
+                requestAnimationFrame(() => this._menu?.focus());
+            }
+            if (event.key === 'Escape' && this._menuOpen) {
+                this._menu?.close();
+                this._dropdownButton?.focus();
+            }
+        };
+    }
+    focus() {
+        const btn = this.shadowRoot?.querySelector('.action-button');
+        btn?.focus();
+    }
+    _onActionClick(event) {
+        if (this.disabled) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            return;
+        }
+        // Close menu if open
+        if (this._menuOpen) {
+            this._menu?.close();
+        }
+    }
+    _onDropdownClick(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        if (this._menuOpen) {
+            this._menu?.close();
+        }
+        else {
+            this._menu.anchorElement = this;
+            this._menu?.show();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this._onKeyDown);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('keydown', this._onKeyDown);
+        super.disconnectedCallback();
+    }
+    render() {
+        const actionClasses = {
+            'action-button': true,
+            disabled: this.disabled,
+        };
+        const dropdownClasses = {
+            'dropdown-trigger': true,
+            active: this._menuOpen,
+            disabled: this.disabled,
+        };
+        const containerClasses = {
+            'split-button': true,
+            [`variant-${this.variant}`]: true,
+            disabled: this.disabled,
+        };
+        return b `
+      <div class=${e$1(containerClasses)}>
+        <wc-button
+          class=${e$1(actionClasses)}
+          size=${this.size}
+          variant=${this.variant}
+          ?disabled=${this.disabled}
+          @click=${this._onActionClick}
+        >
+          <slot></slot>
+        </wc-button>
+
+        <wc-icon-button
+          class=${e$1(dropdownClasses)}
+          size=${this.size}
+          variant=${this.variant}
+          ?disabled=${this.disabled}
+          .configAria=${{
+            'aria-haspopup': 'menu',
+            'aria-expanded': String(this._menuOpen),
+            'aria-controls': this._menuId,
+            'aria-label': 'Open split button menu',
+        }}
+          @click=${this._onDropdownClick}
+        >
+          <wc-icon class="dropdown-icon" name="arrow_drop_down" aria-hidden="true"></wc-icon>
+        </wc-icon-button>
+      </div>
+
+      <wc-menu
+        id=${this._menuId}
+        placement="bottom-end"
+        @opened=${this._onMenuOpened}
+        @closed=${this._onMenuClosed}
+      >
+        <slot name="menu"></slot>
+      </wc-menu>
+    `;
+    }
+};
+SplitButton.styles = [css_248z$2, css_248z$1, css_248z];
+__decorate([
+    n({ reflect: true })
+], SplitButton.prototype, "size", void 0);
+__decorate([
+    n({ reflect: true })
+], SplitButton.prototype, "variant", void 0);
+__decorate([
+    n({ reflect: true })
+], SplitButton.prototype, "color", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SplitButton.prototype, "disabled", void 0);
+__decorate([
+    r()
+], SplitButton.prototype, "_menuOpen", void 0);
+__decorate([
+    e('.dropdown-trigger')
+], SplitButton.prototype, "_dropdownButton", void 0);
+__decorate([
+    e('wc-menu')
+], SplitButton.prototype, "_menu", void 0);
+SplitButton = __decorate([
+    IndividualComponent
+], SplitButton);
+
+export { SplitButton };
+//# sourceMappingURL=split-button.js.map

package/dist/split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.js","sources":["../../src/split-button/split-button.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './split-button.scss';\nimport colorStyles from './split-button-colors.scss';\nimport sizeStyles from './split-button-sizes.scss';\n\n/**\n * @label Split Button\n * @tag wc-split-button\n * @rawTag split-button\n *\n * @summary A split button lets users perform a default action or choose from a set of related actions via a dropdown menu.\n * @overview\n * <p>A split button combines a primary action button with a dropdown arrow that opens a menu. Following M3 Material Design, the split button provides a default action alongside a set of secondary options, reducing clutter while keeping alternative actions accessible.</p>\n *\n * @cssprop --split-button-container-shape: Defines the border radius of the split button container shape.\n *\n * @cssprop --filled-split-button-container-color: Color of the filled split button container.\n * @cssprop --filled-split-button-label-text-color: Text color of the filled split button label.\n *\n * @cssprop --outlined-split-button-container-color: Color of the outlined split button container.\n * @cssprop --outlined-split-button-label-text-color: Text color of the outlined split button label.\n *\n * @cssprop --tonal-split-button-container-color: Color of the tonal split button container.\n * @cssprop --tonal-split-button-label-text-color: Text color of the tonal split button label.\n *\n * @fires {MouseEvent} click - Dispatched when the primary action button is clicked.\n * @fires {CustomEvent} toggle-menu - Dispatched when the dropdown menu is opened or closed.\n *\n * @example\n * ```html\n * <wc-split-button>\n *   Save\n *   <wc-menu-item slot=\"menu\">Save as draft</wc-menu-item>\n *   <wc-menu-item slot=\"menu\">Save and publish</wc-menu-item>\n * </wc-split-button>\n * ```\n * @tags controls\n */\n@IndividualComponent\nexport class SplitButton extends LitElement {\n  static override styles = [styles, colorStyles, sizeStyles];\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * The visual style of the split button.\n   *\n   * Possible variant values:\n   * `\"filled\"` is a filled button.\n   * `\"outlined\"` is an outlined button.\n   * `\"tonal\"` is a light color button.\n   */\n  @property({ reflect: true }) variant: 'filled' | 'tonal' | 'outlined' =\n    'filled';\n\n  /**\n   * Defines the primary color of the split button.\n   */\n  @property({ reflect: true }) color:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'success'\n    | 'danger'\n    | 'warning'\n    | 'surface'\n    | 'on-surface' = 'primary';\n\n  /**\n   * Whether the split button is disabled.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private _menuOpen = false;\n\n  @query('.dropdown-trigger') private readonly _dropdownButton!: HTMLElement;\n\n  @query('wc-menu') private readonly _menu!: HTMLElement & {\n    open: boolean;\n    anchorElement: HTMLElement | null;\n    show: () => void;\n    close: () => void;\n  };\n\n  private _menuId = `split-menu-${Math.random().toString(36).slice(2, 9)}`;\n\n  override focus() {\n    const btn =\n      this.shadowRoot?.querySelector<HTMLElement>('.action-button');\n    btn?.focus();\n  }\n\n  private _onActionClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    // Close menu if open\n    if (this._menuOpen) {\n      this._menu?.close();\n    }\n  }\n\n  private _onDropdownClick(event: MouseEvent) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    if (this._menuOpen) {\n      this._menu?.close();\n    } else {\n      this._menu.anchorElement = this;\n      this._menu?.show();\n    }\n  }\n\n  private _onMenuOpened = () => {\n    this._menuOpen = true;\n    this.dispatchEvent(\n      new CustomEvent('toggle-menu', {\n        detail: { open: true },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _onMenuClosed = () => {\n    this._menuOpen = false;\n    this.dispatchEvent(\n      new CustomEvent('toggle-menu', {\n        detail: { open: false },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (\n      event.key === 'ArrowDown' &&\n      event.target === this._dropdownButton\n    ) {\n      event.preventDefault();\n      if (!this._menuOpen) {\n        this._menu.anchorElement = this;\n        this._menu?.show();\n      }\n      // Focus the menu so keyboard nav works\n      requestAnimationFrame(() => this._menu?.focus());\n    }\n\n    if (event.key === 'Escape' && this._menuOpen) {\n      this._menu?.close();\n      this._dropdownButton?.focus();\n    }\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('keydown', this._onKeyDown);\n    super.disconnectedCallback();\n  }\n\n  override render() {\n    const actionClasses = {\n      'action-button': true,\n      disabled: this.disabled,\n    };\n\n    const dropdownClasses = {\n      'dropdown-trigger': true,\n      active: this._menuOpen,\n      disabled: this.disabled,\n    };\n\n    const containerClasses = {\n      'split-button': true,\n      [`variant-${this.variant}`]: true,\n      disabled: this.disabled,\n    };\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <wc-button\n          class=${classMap(actionClasses)}\n          size=${this.size}\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          @click=${this._onActionClick}\n        >\n          <slot></slot>\n        </wc-button>\n\n        <wc-icon-button\n          class=${classMap(dropdownClasses)}\n          size=${this.size}\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          .configAria=${{\n            'aria-haspopup': 'menu',\n            'aria-expanded': String(this._menuOpen),\n            'aria-controls': this._menuId,\n            'aria-label': 'Open split button menu',\n          }}\n          @click=${this._onDropdownClick}\n        >\n          <wc-icon class=\"dropdown-icon\" name=\"arrow_drop_down\" aria-hidden=\"true\"></wc-icon>\n        </wc-icon-button>\n      </div>\n\n      <wc-menu\n        id=${this._menuId}\n        placement=\"bottom-end\"\n        @opened=${this._onMenuOpened}\n        @closed=${this._onMenuClosed}\n      >\n        <slot name=\"menu\"></slot>\n      </wc-menu>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","colorStyles","sizeStyles","property","state","query"],"mappings":"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"}

package/dist/src/__controllers/floating-controller.d.ts

@@ -0,0 +1,35 @@
+import { Placement, Strategy } from '@floating-ui/dom';
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export type TriggerType = 'hover' | 'click' | 'context-menu' | 'manual' | 'focus' | 'hover-focus';
+export interface FloatingOptions {
+    placement?: Placement;
+    strategy?: Strategy;
+    offset?: number;
+    trigger?: TriggerType;
+    closeOnClickOutside?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+export declare class FloatingController implements ReactiveController {
+    private host;
+    private reference;
+    private floating;
+    private arrowElement;
+    private cleanup;
+    private options;
+    private isHostConnected;
+    isOpen: boolean;
+    constructor(host: ReactiveControllerHost, options?: FloatingOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    setElements(reference: HTMLElement, floating: HTMLElement, arrowElement?: HTMLElement): void;
+    setOptions(options: Partial<FloatingOptions>): void;
+    private setupEventListeners;
+    private removeEventListeners;
+    private toggle;
+    private handleContextMenu;
+    private handleFocusOut;
+    private handleOutsideClick;
+    open: () => void;
+    close: () => void;
+    private updatePosition;
+}

package/dist/src/calendar/base-event.d.ts

@@ -0,0 +1,10 @@
+export declare class BaseEvent {
+    gid: string;
+    start: Date;
+    end: Date;
+    constructor(start: Date, end: Date);
+    length(): number;
+    isOverlapping(event: BaseEvent): boolean;
+    isOverlappingWithoutTime(event: BaseEvent): boolean;
+    isOverlappingWithDate(date: Date): boolean;
+}

package/dist/src/calendar/calendar-column-view.d.ts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+import { CalendarEvent } from './calendar-event.js';
+/**
+ * @label Calendar Column View
+ * @tag wc-calendar-column-view
+ * @rawTag calendar-column-view
+ * @parentRawTag calendar
+ * @summary Internal column view component for the calendar (day/week views).
+ */
+export declare class CalendarColumnView extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    events: CalendarEvent[];
+    view: string;
+    days: number;
+    eventClickable: boolean;
+    currentTime: Date;
+    contextDate: Date;
+    private dateRange;
+    private singleDayEvents;
+    private multiDayEvents;
+    connectedCallback(): void;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    firstUpdated(): void;
+    private _processEvents;
+    private _forEachDayInRange;
+    private _getDateOnly;
+    private _getDatePercent;
+    private _getDayClass;
+    private _populateColorVars;
+    private _emitDateClick;
+    private _emitEventClick;
+    private _renderHeader;
+    private _renderMultiDayBackground;
+    private _renderScale;
+    private _renderBackgroundGrid;
+    private _renderEvents;
+    private _renderMultiDayEvents;
+    private _renderCurrentTime;
+    private _styleMap;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/calendar/calendar-event.d.ts

@@ -0,0 +1,7 @@
+import { BaseEvent } from './base-event.js';
+export declare class CalendarEvent extends BaseEvent {
+    data: any;
+    title: string;
+    color?: string;
+    constructor(start: Date, end: Date, title: string, color: string | undefined, data: any);
+}

package/dist/src/calendar/calendar-month-view.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+import { CalendarEvent } from './calendar-event.js';
+/**
+ * @label Calendar Month View
+ * @tag wc-calendar-month-view
+ * @rawTag calendar-month-view
+ * @parentRawTag calendar
+ * @summary Internal month view component for the calendar.
+ */
+export declare class CalendarMonthView extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    events: CalendarEvent[];
+    eventClickable: boolean;
+    currentTime: Date;
+    contextDate: Date;
+    private dateRange;
+    private weekDayEvents;
+    connectedCallback(): void;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    firstUpdated(): void;
+    private _processEvents;
+    private _getDatePercent;
+    private _getDayClass;
+    private _populateColorVars;
+    private _emitEventClick;
+    private _renderHeader;
+    private _renderMultiDayBackground;
+    private _renderEvents;
+    private _styleMap;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/calendar/calendar.d.ts

@@ -0,0 +1,65 @@
+import { LitElement } from 'lit';
+import type { CalendarViewType, EventType } from './types.js';
+/**
+ * @label Calendar
+ * @tag wc-calendar
+ * @rawTag calendar
+ * @summary A Material 3 inspired full calendar component for displaying events in day, week, or month views.
+ *
+ * @cssprop --calendar-border-color - Border color used throughout the calendar grid.
+ * @cssprop --calendar-event-bg-color - Background color for calendar events.
+ * @cssprop --calendar-event-border-color - Left border color for calendar events.
+ *
+ * @fires {CustomEvent} event-click - Dispatched when a calendar event is clicked. Detail contains `{ event }`.
+ * @fires {CustomEvent} view-change - Dispatched when the calendar view changes. Detail contains `{ view }`.
+ * @fires {CustomEvent} date-change - Dispatched when the context date changes. Detail contains `{ date }`.
+ *
+ * @example
+ * ```html
+ * <wc-calendar view="week" style="height: 600px"></wc-calendar>
+ * ```
+ */
+export declare class Calendar extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * Calendar events array.
+     */
+    events: EventType[];
+    /**
+     * Available views configuration.
+     */
+    availableViews: CalendarViewType[];
+    /**
+     * Current calendar view.
+     */
+    view: string;
+    /**
+     * Whether events are clickable.
+     */
+    eventClickable: boolean;
+    /**
+     * Show loading state.
+     */
+    showLoader: boolean;
+    /**
+     * Timezone string (e.g. 'America/New_York').
+     */
+    timezone: string;
+    /**
+     * The context date for the calendar view.
+     */
+    contextDate: Date | null;
+    private _currentTime;
+    private _currentView;
+    connectedCallback(): void;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    private _onColumnViewDateClick;
+    private _onEventClick;
+    previous(): void;
+    next(): void;
+    private _goToToday;
+    private _onViewSegmentChange;
+    private _renderHeader;
+    private _renderCalendarView;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/calendar/event-manager.d.ts

@@ -0,0 +1,17 @@
+import { CalendarEvent } from './calendar-event.js';
+export declare class ColumnEvent extends CalendarEvent {
+    width: number;
+    constructor(event: CalendarEvent);
+}
+export declare class EventManager {
+    #private;
+    columns: ColumnEvent[][];
+    addEvents(events: CalendarEvent[]): void;
+    process(): void;
+}
+export declare class MonthEventManager {
+    #private;
+    columns: ColumnEvent[][];
+    addEvents(events: CalendarEvent[]): void;
+    process(): void;
+}

package/dist/src/calendar/index.d.ts

@@ -0,0 +1,4 @@
+export { Calendar } from './calendar.js';
+export { CalendarColumnView } from './calendar-column-view.js';
+export { CalendarMonthView } from './calendar-month-view.js';
+export type { CalendarViewType, EventType } from './types.js';

package/dist/src/calendar/types.d.ts

@@ -0,0 +1,13 @@
+export type CalendarViewType = {
+    label: string;
+    value: string;
+    type: 'column' | 'month';
+    days?: number;
+};
+export type EventType = {
+    start: Date;
+    end: Date;
+    title: string;
+    color?: string;
+    [key: string]: any;
+};

package/dist/src/calendar/utils.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Pure date utility functions (no external dependencies).
+ */
+export declare function startOfDay(date: Date): Date;
+export declare function endOfDay(date: Date): Date;
+export declare function addDays(date: Date, days: number): Date;
+export declare function addMonths(date: Date, months: number): Date;
+export declare function addHours(date: Date, hours: number): Date;
+export declare function differenceInDays(dateA: Date, dateB: Date): number;
+export declare function startOfWeek(date: Date, weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6): Date;
+export declare function endOfWeek(date: Date, weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6): Date;
+export declare function startOfMonth(date: Date): Date;
+export declare function endOfMonth(date: Date): Date;
+export declare function calculateMonthRange(date: Date, weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6): {
+    startDate: Date;
+    endDate: Date;
+    totalDays: number;
+};
+export declare function calculateWeekRange(date: Date, weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6): {
+    startDate: Date;
+    endDate: Date;
+    totalDays: number;
+};
+export declare function calculateDateRange(view: string, contextDate: Date, days: number): {
+    startDate: Date;
+    endDate: Date;
+    totalDays: number;
+};
+export declare const LONG_EVENT_PADDING = 0.25;
+export declare function formatDate(date: Date, pattern: string): string;
+export declare function getTimePercent(date: Date, forDay?: Date): number;