@f-ewald/components 0.7.0 → 1.0.0

package/dist/calendar-entry.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from "lit";
+import type { StatusPillColor } from "./status-pill.js";
+/**
+ * Declarative metadata for one calendar event, consumed by a parent
+ * `calendar-month` or `calendar-year`. Read-only/non-interactive; renders
+ * nothing itself.
+ *
+ * @element calendar-entry
+ * @slot title - Plain-text title shown instead of the `label` fallback.
+ * @slot detail - Repeatable plain-text details rendered inside the shared body spanning all remaining days.
+ * @slot footer - Plain-text ending note pinned to the bottom of the shared body.
+ */
+export declare class CalendarEntry extends LitElement {
+    /** Inclusive start date, `"YYYY-MM-DD"`. */
+    start: string;
+    /** Inclusive end date, `"YYYY-MM-DD"`. Falls back to `start` when unset (single-day entry). */
+    end: string;
+    /** Fallback title used when no `title` slot is provided. */
+    label: string;
+    /** Color variant, reusing `status-pill`'s palette. */
+    color: StatusPillColor;
+    /** Optional link target; the parent renders the entry as an `<a>` when set. */
+    href?: string;
+    static styles: import("lit").CSSResult[];
+    /** Keeps the metadata host hidden while exposing named text slots to the parent calendar. */
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "calendar-entry": CalendarEntry;
+    }
+}
+//# sourceMappingURL=calendar-entry.d.ts.map

package/dist/calendar-entry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-entry.d.ts","sourceRoot":"","sources":["../src/calendar-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGxD;;;;;;;;;GASG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,4CAA4C;IACf,KAAK,SAAM;IAExC,+FAA+F;IAClE,GAAG,SAAM;IAEtC,4DAA4D;IAC/B,KAAK,SAAM;IAExC,sDAAsD;IACzB,KAAK,EAAE,eAAe,CAAa;IAEhE,+EAA+E;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IAE3C,OAAgB,MAAM,4BAOpB;IAEF,6FAA6F;IAC7F,UAAmB,MAAM,yCAExB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/calendar-entry.js

@@ -0,0 +1,64 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+/**
+ * Declarative metadata for one calendar event, consumed by a parent
+ * `calendar-month` or `calendar-year`. Read-only/non-interactive; renders
+ * nothing itself.
+ *
+ * @element calendar-entry
+ * @slot title - Plain-text title shown instead of the `label` fallback.
+ * @slot detail - Repeatable plain-text details rendered inside the shared body spanning all remaining days.
+ * @slot footer - Plain-text ending note pinned to the bottom of the shared body.
+ */
+let CalendarEntry = class CalendarEntry extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Inclusive start date, `"YYYY-MM-DD"`. */
+        this.start = "";
+        /** Inclusive end date, `"YYYY-MM-DD"`. Falls back to `start` when unset (single-day entry). */
+        this.end = "";
+        /** Fallback title used when no `title` slot is provided. */
+        this.label = "";
+        /** Color variant, reusing `status-pill`'s palette. */
+        this.color = "neutral";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: none;
+      }
+    `,
+    ]; }
+    /** Keeps the metadata host hidden while exposing named text slots to the parent calendar. */
+    render() {
+        return html `<slot name="title"></slot><slot name="detail"></slot><slot name="footer"></slot>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], CalendarEntry.prototype, "start", void 0);
+__decorate([
+    property({ reflect: true })
+], CalendarEntry.prototype, "end", void 0);
+__decorate([
+    property({ reflect: true })
+], CalendarEntry.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], CalendarEntry.prototype, "color", void 0);
+__decorate([
+    property({ reflect: true })
+], CalendarEntry.prototype, "href", void 0);
+CalendarEntry = __decorate([
+    customElement("calendar-entry")
+], CalendarEntry);
+export { CalendarEntry };
+//# sourceMappingURL=calendar-entry.js.map

package/dist/calendar-entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-entry.js","sourceRoot":"","sources":["../src/calendar-entry.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;GASG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACL,4CAA4C;QACf,UAAK,GAAG,EAAE,CAAC;QAExC,+FAA+F;QAClE,QAAG,GAAG,EAAE,CAAC;QAEtC,4DAA4D;QAC/B,UAAK,GAAG,EAAE,CAAC;QAExC,sDAAsD;QACzB,UAAK,GAAoB,SAAS,CAAC;IAkBlE,CAAC;aAbiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;KAIF;KACF,AAPqB,CAOpB;IAEF,6FAA6F;IAC1E,MAAM;QACvB,OAAO,IAAI,CAAA,kFAAkF,CAAC;IAChG,CAAC;CACF,CAAA;AA3B8B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAY;AAGX;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAU;AAGT;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAY;AAGX;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAoC;AAGnC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAe;AAdhC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA6BzB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport type { StatusPillColor } from \"./status-pill.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Declarative metadata for one calendar event, consumed by a parent\n * `calendar-month` or `calendar-year`. Read-only/non-interactive; renders\n * nothing itself.\n *\n * @element calendar-entry\n * @slot title - Plain-text title shown instead of the `label` fallback.\n * @slot detail - Repeatable plain-text details rendered inside the shared body spanning all remaining days.\n * @slot footer - Plain-text ending note pinned to the bottom of the shared body.\n */\n@customElement(\"calendar-entry\")\nexport class CalendarEntry extends LitElement {\n  /** Inclusive start date, `\"YYYY-MM-DD\"`. */\n  @property({ reflect: true }) start = \"\";\n\n  /** Inclusive end date, `\"YYYY-MM-DD\"`. Falls back to `start` when unset (single-day entry). */\n  @property({ reflect: true }) end = \"\";\n\n  /** Fallback title used when no `title` slot is provided. */\n  @property({ reflect: true }) label = \"\";\n\n  /** Color variant, reusing `status-pill`'s palette. */\n  @property({ reflect: true }) color: StatusPillColor = \"neutral\";\n\n  /** Optional link target; the parent renders the entry as an `<a>` when set. */\n  @property({ reflect: true }) href?: string;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: none;\n      }\n    `,\n  ];\n\n  /** Keeps the metadata host hidden while exposing named text slots to the parent calendar. */\n  protected override render() {\n    return html`<slot name=\"title\"></slot><slot name=\"detail\"></slot><slot name=\"footer\"></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"calendar-entry\": CalendarEntry;\n  }\n}\n"]}

package/dist/calendar-month.d.ts

@@ -0,0 +1,67 @@
+import { LitElement } from "lit";
+/**
+ * One month rendered as a top-to-bottom list of days — weekends and today
+ * highlighted, with declarative `calendar-entry` children shown as colored
+ * bars spanning the days they cover. An entry's title uses its first visible
+ * day; every remaining visible day becomes one shared body for wrapped
+ * details and an optional ending footer. Overlapping entries stack into
+ * side-by-side lanes rather than being layered/hidden. Read-only.
+ *
+ * Lanes are computed independently per instance, from only the entries
+ * overlapping this month — an entry spanning a month boundary may therefore
+ * land in a different lane index in the adjacent month's `calendar-month`.
+ * This is an accepted v1 limitation: cross-month lane continuity would
+ * require a shared parent (`calendar-year`) to assign lanes globally.
+ *
+ * Entry attributes and slotted title/detail text are observed, so a
+ * standalone month re-renders when consumers update declarative metadata.
+ *
+ * @element calendar-month
+ * @slot - Declarative `calendar-entry` elements to render for this month.
+ */
+export declare class CalendarMonth extends LitElement {
+    /** Calendar year, e.g. `2026`. */
+    year: number;
+    /** Calendar month, 1-12 (January = 1). */
+    month: number;
+    private readonly _entryElements;
+    /** Bumped when entry elements, attributes, or slotted text change to force a re-render. */
+    private _entriesVersion;
+    private _entriesObserver?;
+    static styles: import("lit").CSSResult[];
+    /** Observes declarative entry attributes and slotted text for live updates. */
+    connectedCallback(): void;
+    /** Releases the entry observer when this month disconnects. */
+    disconnectedCallback(): void;
+    /** Restores hover/focus classes from the live DOM after Lit updates or reuses cells. */
+    protected updated(): void;
+    /** Re-renders when declarative `calendar-entry` children are added or removed. */
+    private _handleSlotChange;
+    /** Finds the laned entry (if any) covering `date` in a given lane. */
+    private _entryFor;
+    /** Classifies one day of an entry so only the outer endpoints are rounded. */
+    private _segmentClass;
+    /** Current render key shared by an entry's title and body cells. */
+    private _entryKey;
+    /** Toggles one interaction class on every rendered cell belonging to an entry. */
+    private _setEntryInteraction;
+    /** Reconciles classes against the links actually hovered or focused after a render. */
+    private _syncEntryInteractions;
+    /** Renders a transparent full-cell link without wrapping the visible text. */
+    private _renderEntryLink;
+    /** Joins the event title, details, and visible footer for tooltips and accessible link names. */
+    private _entryBodyText;
+    /** Renders the shared details body, with the footer reserved at its bottom edge. */
+    private _renderEntryBody;
+    /** Renders a row-spanning body cell with whole-line detail and footer budgets. */
+    private _renderEntryBodyCell;
+    /** Renders a lane's title/body cell, skips rows covered by a body rowspan, or emits an empty spacer. */
+    private _renderLaneCell;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "calendar-month": CalendarMonth;
+    }
+}
+//# sourceMappingURL=calendar-month.d.ts.map

package/dist/calendar-month.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-month.d.ts","sourceRoot":"","sources":["../src/calendar-month.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAoBrD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,kCAAkC;IACS,IAAI,EAAE,MAAM,CAA4B;IAEnF,0CAA0C;IACC,KAAK,SAAK;IAGrD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAmB;IAElD,2FAA2F;IAClF,OAAO,CAAC,eAAe,CAAK;IAErC,OAAO,CAAC,gBAAgB,CAAC,CAAmB;IAE5C,OAAgB,MAAM,4BA+LpB;IAEF,+EAA+E;IACtE,iBAAiB,IAAI,IAAI,CAWjC;IAED,+DAA+D;IACtD,oBAAoB,IAAI,IAAI,CAGpC;IAED,wFAAwF;IACxF,UAAmB,OAAO,IAAI,IAAI,CAEjC;IAED,kFAAkF;IAClF,OAAO,CAAC,iBAAiB;IAIzB,sEAAsE;IACtE,OAAO,CAAC,SAAS;IAIjB,8EAA8E;IAC9E,OAAO,CAAC,aAAa;IASrB,oEAAoE;IACpE,OAAO,CAAC,SAAS;IAIjB,kFAAkF;IAClF,OAAO,CAAC,oBAAoB;IAQ5B,uFAAuF;IACvF,OAAO,CAAC,sBAAsB;IAa9B,8EAA8E;IAC9E,OAAO,CAAC,gBAAgB;IAgBxB,iGAAiG;IACjG,OAAO,CAAC,cAAc;IAMtB,oFAAoF;IACpF,OAAO,CAAC,gBAAgB;IAiCxB,kFAAkF;IAClF,OAAO,CAAC,oBAAoB;IAsB5B,wGAAwG;IACxG,OAAO,CAAC,eAAe;IA8CvB,UAAmB,MAAM,yCAyCxB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/calendar-month.js

@@ -0,0 +1,455 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { tokens } from "./tokens.js";
+import { CALENDAR_ENTRY_ATTRIBUTES, WEEKDAY_ABBR, assignLanes, daysInMonth, isWeekend, monthName, overlapsRange, readCalendarEntryElement, resolveEntry, toIsoDate, } from "./utils/calendar.js";
+/**
+ * One month rendered as a top-to-bottom list of days — weekends and today
+ * highlighted, with declarative `calendar-entry` children shown as colored
+ * bars spanning the days they cover. An entry's title uses its first visible
+ * day; every remaining visible day becomes one shared body for wrapped
+ * details and an optional ending footer. Overlapping entries stack into
+ * side-by-side lanes rather than being layered/hidden. Read-only.
+ *
+ * Lanes are computed independently per instance, from only the entries
+ * overlapping this month — an entry spanning a month boundary may therefore
+ * land in a different lane index in the adjacent month's `calendar-month`.
+ * This is an accepted v1 limitation: cross-month lane continuity would
+ * require a shared parent (`calendar-year`) to assign lanes globally.
+ *
+ * Entry attributes and slotted title/detail text are observed, so a
+ * standalone month re-renders when consumers update declarative metadata.
+ *
+ * @element calendar-month
+ * @slot - Declarative `calendar-entry` elements to render for this month.
+ */
+let CalendarMonth = class CalendarMonth extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Calendar year, e.g. `2026`. */
+        this.year = new Date().getFullYear();
+        /** Calendar month, 1-12 (January = 1). */
+        this.month = 1;
+        /** Bumped when entry elements, attributes, or slotted text change to force a re-render. */
+        this._entriesVersion = 0;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-size: var(--ui-font-size-sm, 0.75rem);
+      }
+      .month-name {
+        margin: 0 0 0.5rem;
+        color: var(--ui-text, #0f172a);
+        font-size: var(--ui-font-size, 0.875rem);
+        font-weight: 600;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        table-layout: fixed;
+      }
+      .day-row td {
+        padding: 0.25rem 0.5rem;
+        border-bottom: 1px solid var(--ui-border, #e2e8f0);
+      }
+      .day-row.weekend {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      .day-row.today {
+        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 10%, transparent);
+      }
+      .day-number {
+        width: 1.5rem;
+        color: var(--ui-text-muted, #64748b);
+        font-variant-numeric: tabular-nums;
+        text-align: right;
+        white-space: nowrap;
+      }
+      .day-row.today .day-number {
+        color: var(--ui-primary, #4f46e5);
+        font-weight: 700;
+      }
+      .day-weekday {
+        width: 2.25rem;
+        color: var(--ui-text-muted, #64748b);
+        white-space: nowrap;
+      }
+      .day-row.today .day-weekday {
+        color: var(--ui-primary, #4f46e5);
+        font-weight: 600;
+      }
+      .day-row.weekend .day-weekday {
+        font-weight: 600;
+      }
+      .lane-cell {
+        padding: 0.1rem 0.4rem;
+      }
+      .entry-bar {
+        border-radius: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: box-shadow 120ms ease;
+        white-space: nowrap;
+      }
+      .entry-bar.entry-hovered,
+      .entry-bar.entry-focused {
+        box-shadow: inset 0 0 0 100vmax var(--ui-hover-overlay, rgb(255 255 255 / 0.32));
+      }
+      .entry-bar.segment-single {
+        border-radius: var(--ui-radius-sm, 0.25rem);
+      }
+      .entry-bar.segment-start {
+        border-radius: var(--ui-radius-sm, 0.25rem) var(--ui-radius-sm, 0.25rem) 0 0;
+      }
+      .entry-bar.segment-end {
+        border-radius: 0 0 var(--ui-radius-sm, 0.25rem) var(--ui-radius-sm, 0.25rem);
+      }
+      .entry-bar.segment-start,
+      .entry-bar.segment-middle {
+        border-bottom: 0;
+      }
+      .entry-bar.neutral {
+        background: color-mix(in srgb, var(--ui-text-muted, #64748b) 15%, var(--ui-surface, #fff));
+        color: var(--ui-text-muted, #64748b);
+      }
+      .entry-bar.info {
+        background: color-mix(in srgb, #0ea5e9 15%, var(--ui-surface, #fff));
+        color: #0ea5e9;
+      }
+      .entry-bar.primary {
+        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 15%, var(--ui-surface, #fff));
+        color: var(--ui-primary, #4f46e5);
+      }
+      .entry-bar.success {
+        background: color-mix(in srgb, var(--ui-success, #16a34a) 15%, var(--ui-surface, #fff));
+        color: var(--ui-success, #16a34a);
+      }
+      .entry-bar.warning {
+        background: color-mix(in srgb, #d97706 15%, var(--ui-surface, #fff));
+        color: #d97706;
+      }
+      .entry-bar.danger {
+        background: color-mix(in srgb, var(--ui-danger, #dc2626) 15%, var(--ui-surface, #fff));
+        color: var(--ui-danger, #dc2626);
+      }
+      .entry-line {
+        display: block;
+        overflow: hidden;
+      }
+      .day-row td.entry-title-cell {
+        position: relative;
+        padding: 0;
+      }
+      .entry-title {
+        box-sizing: border-box;
+        font-weight: 500;
+        padding: 0.15rem 0.4rem;
+        pointer-events: none;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .entry-details {
+        display: -webkit-box;
+        min-height: 0;
+        max-height: var(--entry-detail-max-height, 1.15em);
+        flex: 0 0 auto;
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--entry-detail-lines, 1);
+        font-size: var(--ui-font-size-xs, 0.6875rem);
+        font-weight: 400;
+        line-height: 1.15;
+        overflow-wrap: anywhere;
+        text-overflow: ellipsis;
+        white-space: normal;
+      }
+      .entry-detail {
+        min-height: 1.15em;
+      }
+      .day-row td.entry-body-cell {
+        position: relative;
+        padding: 0;
+        vertical-align: top;
+      }
+      .entry-body {
+        position: absolute;
+        inset: 0;
+        box-sizing: border-box;
+        display: flex;
+        min-height: 0;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0.15rem 0.4rem;
+        color: inherit;
+        pointer-events: none;
+      }
+      .entry-footer {
+        flex: 0 0 auto;
+        min-height: 1.15em;
+        margin-top: auto;
+        border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+        padding-top: 0.15rem;
+        font-size: var(--ui-font-size-xs, 0.6875rem);
+        font-weight: 500;
+        line-height: 1.15;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .entry-link {
+        position: absolute;
+        z-index: 1;
+        inset: 0;
+        border-radius: inherit;
+        color: inherit;
+        cursor: pointer;
+        text-decoration: none;
+      }
+      .entry-link:focus-visible {
+        outline: 2px solid var(--ui-primary, #4f46e5);
+        outline-offset: -2px;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35)) inset;
+      }
+      @media (forced-colors: active) {
+        .entry-link:focus-visible {
+          outline-color: Highlight;
+          box-shadow: none;
+        }
+      }
+      slot {
+        display: none;
+      }
+    `,
+    ]; }
+    /** Observes declarative entry attributes and slotted text for live updates. */
+    connectedCallback() {
+        super.connectedCallback();
+        this._entriesVersion++;
+        this._entriesObserver ??= new MutationObserver(() => this._entriesVersion++);
+        this._entriesObserver.observe(this, {
+            attributes: true,
+            attributeFilter: CALENDAR_ENTRY_ATTRIBUTES,
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    /** Releases the entry observer when this month disconnects. */
+    disconnectedCallback() {
+        this._entriesObserver?.disconnect();
+        super.disconnectedCallback();
+    }
+    /** Restores hover/focus classes from the live DOM after Lit updates or reuses cells. */
+    updated() {
+        this._syncEntryInteractions();
+    }
+    /** Re-renders when declarative `calendar-entry` children are added or removed. */
+    _handleSlotChange() {
+        this._entriesVersion++;
+    }
+    /** Finds the laned entry (if any) covering `date` in a given lane. */
+    _entryFor(laned, lane, date) {
+        return laned.find((entry) => entry.lane === lane && entry.startDate <= date && date <= entry.endDate);
+    }
+    /** Classifies one day of an entry so only the outer endpoints are rounded. */
+    _segmentClass(entry, date) {
+        const startsHere = date.getTime() === entry.startDate.getTime();
+        const endsHere = date.getTime() === entry.endDate.getTime();
+        if (startsHere && endsHere)
+            return "segment-single";
+        if (startsHere)
+            return "segment-start";
+        if (endsHere)
+            return "segment-end";
+        return "segment-middle";
+    }
+    /** Current render key shared by an entry's title and body cells. */
+    _entryKey(entry) {
+        return `${entry.lane}|${entry.start}|${entry.end}|${entry.label}|${entry.href ?? ""}`;
+    }
+    /** Toggles one interaction class on every rendered cell belonging to an entry. */
+    _setEntryInteraction(entryKey, className, active) {
+        for (const cell of this.renderRoot.querySelectorAll(".entry-bar")) {
+            if (cell.dataset.entryKey === entryKey) {
+                cell.classList.toggle(className, active);
+            }
+        }
+    }
+    /** Reconciles classes against the links actually hovered or focused after a render. */
+    _syncEntryInteractions() {
+        for (const cell of this.renderRoot.querySelectorAll(".entry-bar")) {
+            cell.classList.remove("entry-hovered", "entry-focused");
+        }
+        for (const link of this.renderRoot.querySelectorAll(".entry-link:hover")) {
+            this._setEntryInteraction(link.dataset.entryKey ?? "", "entry-hovered", true);
+        }
+        const activeElement = this.shadowRoot?.activeElement;
+        if (activeElement instanceof HTMLElement && activeElement.matches(".entry-link")) {
+            this._setEntryInteraction(activeElement.dataset.entryKey ?? "", "entry-focused", true);
+        }
+    }
+    /** Renders a transparent full-cell link without wrapping the visible text. */
+    _renderEntryLink(entry, accessibleText) {
+        const entryKey = this._entryKey(entry);
+        return entry.href
+            ? html `<a
+          class="entry-link"
+          href=${entry.href}
+          aria-label=${accessibleText}
+          data-entry-key=${entryKey}
+          @pointerenter=${() => this._setEntryInteraction(entryKey, "entry-hovered", true)}
+          @pointerleave=${() => this._setEntryInteraction(entryKey, "entry-hovered", false)}
+          @focus=${() => this._setEntryInteraction(entryKey, "entry-focused", true)}
+          @blur=${() => this._setEntryInteraction(entryKey, "entry-focused", false)}
+        ></a>`
+            : nothing;
+    }
+    /** Joins the event title, details, and visible footer for tooltips and accessible link names. */
+    _entryBodyText(entry, showFooter) {
+        return [entry.label, ...(entry.details ?? []), showFooter ? entry.footer : undefined]
+            .filter((line) => Boolean(line))
+            .join("\n");
+    }
+    /** Renders the shared details body, with the footer reserved at its bottom edge. */
+    _renderEntryBody(entry, showFooter, detailLineClamp, showTitleFallback = false) {
+        const sourceDetails = entry.details ?? [];
+        const footer = showFooter ? entry.footer : undefined;
+        const details = showTitleFallback && sourceDetails.length === 0 && !footer
+            ? [entry.label]
+            : sourceDetails;
+        const bodyText = this._entryBodyText(entry, showFooter);
+        return html `
+      ${this._renderEntryLink(entry, bodyText)}
+      <div class="entry-body" aria-hidden=${entry.href ? "true" : nothing}>
+        ${detailLineClamp > 0 && details.length > 0
+            ? html `
+              <div
+                class="entry-details"
+                style=${`--entry-detail-lines: ${detailLineClamp}; --entry-detail-max-height: ${detailLineClamp * 1.15}em`}
+              >
+                ${details.map((detail) => html `<div class="entry-detail">${detail}</div>`)}
+              </div>
+            `
+            : nothing}
+        ${footer ? html `<div class="entry-footer" title=${footer}>${footer}</div>` : nothing}
+      </div>
+    `;
+    }
+    /** Renders a row-spanning body cell with whole-line detail and footer budgets. */
+    _renderEntryBodyCell(entry, bodyRows, reachesEventEnd, showTitleFallback = false) {
+        const segmentClass = reachesEventEnd ? "segment-end" : "segment-middle";
+        const footerLineBudget = reachesEventEnd && entry.footer ? 1 : 0;
+        const detailLineClamp = Math.max(0, bodyRows - footerLineBudget);
+        const bodyText = this._entryBodyText(entry, reachesEventEnd);
+        return html `
+      <td
+        class="lane-cell entry-bar entry-body-cell ${entry.color} ${segmentClass}"
+        data-entry-key=${this._entryKey(entry)}
+        rowspan=${bodyRows}
+        title=${entry.href ? nothing : bodyText}
+      >
+        ${this._renderEntryBody(entry, reachesEventEnd, detailLineClamp, showTitleFallback)}
+      </td>
+    `;
+    }
+    /** Renders a lane's title/body cell, skips rows covered by a body rowspan, or emits an empty spacer. */
+    _renderLaneCell(laned, lane, date, monthStart, monthEnd) {
+        const entry = this._entryFor(laned, lane, date);
+        if (!entry) {
+            return html `<td class="lane-cell empty"></td>`;
+        }
+        const firstVisibleDay = entry.startDate > monthStart ? entry.startDate : monthStart;
+        const lastVisibleDay = entry.endDate < monthEnd ? entry.endDate : monthEnd;
+        const dayOffset = date.getDate() - firstVisibleDay.getDate();
+        const visibleDayCount = lastVisibleDay.getDate() - firstVisibleDay.getDate() + 1;
+        const isMultiDayEntry = entry.startDate.getTime() !== entry.endDate.getTime();
+        const isEndingOnlyClip = visibleDayCount === 1 &&
+            isMultiDayEntry &&
+            date.getTime() === entry.endDate.getTime();
+        if (isEndingOnlyClip) {
+            return this._renderEntryBodyCell(entry, 1, true, true);
+        }
+        if (dayOffset > 1)
+            return nothing;
+        if (dayOffset === 1) {
+            const bodyRows = visibleDayCount - 1;
+            const reachesEventEnd = lastVisibleDay.getTime() === entry.endDate.getTime();
+            return this._renderEntryBodyCell(entry, bodyRows, reachesEventEnd);
+        }
+        return html `
+      <td
+        class="lane-cell entry-bar entry-title-cell ${entry.color} ${this._segmentClass(entry, date)}"
+        data-entry-key=${this._entryKey(entry)}
+        title=${entry.href ? nothing : entry.label}
+      >
+        ${this._renderEntryLink(entry, entry.label)}
+        <span class="entry-line entry-title" aria-hidden=${entry.href ? "true" : nothing}>
+          ${entry.label}
+        </span>
+      </td>
+    `;
+    }
+    render() {
+        const totalDays = daysInMonth(this.year, this.month);
+        const monthStart = new Date(this.year, this.month - 1, 1);
+        const monthEnd = new Date(this.year, this.month - 1, totalDays);
+        const resolved = this._entryElements
+            .map(readCalendarEntryElement)
+            .map(resolveEntry)
+            .filter((entry) => entry !== null)
+            .filter((entry) => overlapsRange(entry, monthStart, monthEnd));
+        const { entries: laned, laneCount } = assignLanes(resolved);
+        const todayIso = toIsoDate(new Date());
+        const lanes = Array.from({ length: Math.max(laneCount, 1) }, (_, i) => i);
+        return html `
+      <div class="month">
+        <h4 class="month-name">${monthName(this.month)} ${this.year}</h4>
+        <table>
+          <tbody>
+            ${repeat(Array.from({ length: totalDays }, (_, i) => i + 1), (d) => d, (d) => {
+            const date = new Date(this.year, this.month - 1, d);
+            const dow = date.getDay();
+            const weekendCls = isWeekend(date) ? "weekend" : "";
+            const todayCls = toIsoDate(date) === todayIso ? "today" : "";
+            return html `
+                  <tr class="day-row ${weekendCls} ${todayCls}">
+                    <td class="day-number">${d}</td>
+                    <td class="day-weekday">${WEEKDAY_ABBR[dow]}</td>
+                    ${lanes.map((lane) => this._renderLaneCell(laned, lane, date, monthStart, monthEnd))}
+                  </tr>
+                `;
+        })}
+          </tbody>
+        </table>
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number, reflect: true })
+], CalendarMonth.prototype, "year", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], CalendarMonth.prototype, "month", void 0);
+__decorate([
+    queryAssignedElements({ selector: "calendar-entry" })
+], CalendarMonth.prototype, "_entryElements", void 0);
+__decorate([
+    state()
+], CalendarMonth.prototype, "_entriesVersion", void 0);
+CalendarMonth = __decorate([
+    customElement("calendar-month")
+], CalendarMonth);
+export { CalendarMonth };
+//# sourceMappingURL=calendar-month.js.map