@f-ewald/components 0.7.0 → 1.0.2

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,4BA6MpB;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,469 @@
+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,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
+        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.25rem 0.5rem;
+      }
+      .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, #ffffff));
+        color: var(--ui-text-muted, #64748b);
+      }
+      .entry-bar.info {
+        background: color-mix(in srgb, var(--ui-info, #0ea5e9) 15%, var(--ui-surface, #ffffff));
+        color: var(--ui-info, #0ea5e9);
+      }
+      .entry-bar.primary {
+        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 15%, var(--ui-surface, #ffffff));
+        color: var(--ui-primary, #4f46e5);
+      }
+      .entry-bar.success {
+        background: color-mix(in srgb, var(--ui-success, #16a34a) 15%, var(--ui-surface, #ffffff));
+        color: var(--ui-success, #16a34a);
+      }
+      .entry-bar.warning {
+        background: color-mix(in srgb, var(--ui-warning, #d97706) 15%, var(--ui-surface, #ffffff));
+        color: var(--ui-warning, #d97706);
+      }
+      .entry-bar.danger {
+        background: color-mix(in srgb, var(--ui-danger, #dc2626) 15%, var(--ui-surface, #ffffff));
+        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.25rem 0.5rem;
+        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.25rem 0.5rem;
+        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.25rem;
+        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;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .entry-bar {
+          transition: 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

package/dist/calendar-month.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-month.js","sourceRoot":"","sources":["../src/calendar-month.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EACL,yBAAyB,EACzB,YAAY,EACZ,WAAW,EACX,WAAW,EACX,SAAS,EACT,SAAS,EACT,aAAa,EACb,wBAAwB,EACxB,YAAY,EACZ,SAAS,GAGV,MAAM,qBAAqB,CAAC;AAE7B;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACL,kCAAkC;QACS,SAAI,GAAW,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;QAEnF,0CAA0C;QACC,UAAK,GAAG,CAAC,CAAC;QAKrD,2FAA2F;QAC1E,oBAAe,GAAG,CAAC,CAAC;IAscvC,CAAC;aAlciB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0MF;KACF,AA7MqB,CA6MpB;IAEF,+EAA+E;IACtE,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,KAAK,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QAC7E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,EAAE;YAClC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,yBAAyB;YAC1C,aAAa,EAAE,IAAI;YACnB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAED,+DAA+D;IACtD,oBAAoB;QAC3B,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,CAAC;QACpC,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAED,wFAAwF;IACrE,OAAO;QACxB,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAED,kFAAkF;IAC1E,iBAAiB;QACvB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,sEAAsE;IAC9D,SAAS,CAAC,KAAmB,EAAE,IAAY,EAAE,IAAU;QAC7D,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC;IACxG,CAAC;IAED,8EAA8E;IACtE,aAAa,CAAC,KAAiB,EAAE,IAAU;QACjD,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;QAChE,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;QAC5D,IAAI,UAAU,IAAI,QAAQ;YAAE,OAAO,gBAAgB,CAAC;QACpD,IAAI,UAAU;YAAE,OAAO,eAAe,CAAC;QACvC,IAAI,QAAQ;YAAE,OAAO,aAAa,CAAC;QACnC,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAED,oEAAoE;IAC5D,SAAS,CAAC,KAAiB;QACjC,OAAO,GAAG,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,IAAI,EAAE,EAAE,CAAC;IACxF,CAAC;IAED,kFAAkF;IAC1E,oBAAoB,CAAC,QAAgB,EAAE,SAAiB,EAAE,MAAe;QAC/E,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAc,YAAY,CAAC,EAAE,CAAC;YAC/E,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;gBACvC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC;IACH,CAAC;IAED,uFAAuF;IAC/E,sBAAsB;QAC5B,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAc,YAAY,CAAC,EAAE,CAAC;YAC/E,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QAC1D,CAAC;QACD,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAc,mBAAmB,CAAC,EAAE,CAAC;YACtF,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;QAChF,CAAC;QACD,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;QACrD,IAAI,aAAa,YAAY,WAAW,IAAI,aAAa,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,CAAC;YACjF,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;QACzF,CAAC;IACH,CAAC;IAED,8EAA8E;IACtE,gBAAgB,CAAC,KAAiB,EAAE,cAAsB;QAChE,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACvC,OAAO,KAAK,CAAC,IAAI;YACf,CAAC,CAAC,IAAI,CAAA;;iBAEK,KAAK,CAAC,IAAI;uBACJ,cAAc;2BACV,QAAQ;0BACT,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,CAAC;0BAChE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,eAAe,EAAE,KAAK,CAAC;mBACxE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,CAAC;kBACjE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,eAAe,EAAE,KAAK,CAAC;cACrE;YACR,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAED,iGAAiG;IACzF,cAAc,CAAC,KAAiB,EAAE,UAAmB;QAC3D,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;aAClF,MAAM,CAAC,CAAC,IAAI,EAAkB,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;aAC/C,IAAI,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;IAED,oFAAoF;IAC5E,gBAAgB,CACtB,KAAiB,EACjB,UAAmB,EACnB,eAAuB,EACvB,iBAAiB,GAAG,KAAK;QAEzB,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;QAC1C,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;QACrD,MAAM,OAAO,GACX,iBAAiB,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,MAAM;YACxD,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;YACf,CAAC,CAAC,aAAa,CAAC;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;QACxD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC;4CACF,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;UAC/D,eAAe,GAAG,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC;YACzC,CAAC,CAAC,IAAI,CAAA;;;wBAGQ,yBAAyB,eAAe,gCAC9C,eAAe,GAAG,IACpB,IAAI;;kBAEF,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAA,6BAA6B,MAAM,QAAQ,CAAC;;aAE7E;YACH,CAAC,CAAC,OAAO;UACT,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,MAAM,IAAI,MAAM,QAAQ,CAAC,CAAC,CAAC,OAAO;;KAEvF,CAAC;IACJ,CAAC;IAED,kFAAkF;IAC1E,oBAAoB,CAC1B,KAAiB,EACjB,QAAgB,EAChB,eAAwB,EACxB,iBAAiB,GAAG,KAAK;QAEzB,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC;QACxE,MAAM,gBAAgB,GAAG,eAAe,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACjE,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC,CAAC;QACjE,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;QAC7D,OAAO,IAAI,CAAA;;qDAEsC,KAAK,CAAC,KAAK,IAAI,YAAY;yBACvD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;kBAC5B,QAAQ;gBACV,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;;UAErC,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC;;KAEtF,CAAC;IACJ,CAAC;IAED,wGAAwG;IAChG,eAAe,CACrB,KAAmB,EACnB,IAAY,EACZ,IAAU,EACV,UAAgB,EAChB,QAAc;QAEd,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,IAAI,CAAA,mCAAmC,CAAC;QACjD,CAAC;QAED,MAAM,eAAe,GAAG,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;QACpF,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC3E,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,eAAe,CAAC,OAAO,EAAE,CAAC;QAC7D,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,EAAE,GAAG,eAAe,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QACjF,MAAM,eAAe,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;QAC9E,MAAM,gBAAgB,GACpB,eAAe,KAAK,CAAC;YACrB,eAAe;YACf,IAAI,CAAC,OAAO,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;QAC7C,IAAI,gBAAgB,EAAE,CAAC;YACrB,OAAO,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QACzD,CAAC;QACD,IAAI,SAAS,GAAG,CAAC;YAAE,OAAO,OAAO,CAAC;QAElC,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;YACpB,MAAM,QAAQ,GAAG,eAAe,GAAG,CAAC,CAAC;YACrC,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YAC7E,OAAO,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;QACrE,CAAC;QAED,OAAO,IAAI,CAAA;;sDAEuC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC;yBAC3E,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;gBAC9B,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK;;UAExC,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;2DACQ,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAC5E,KAAK,CAAC,KAAK;;;KAGlB,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,MAAM,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACrD,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAC1D,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC;QAEhE,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc;aACjC,GAAG,CAAC,wBAAwB,CAAC;aAC7B,GAAG,CAAC,YAAY,CAAC;aACjB,MAAM,CAAC,CAAC,KAAK,EAAkC,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC;aACjE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;QACjE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC5D,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;QACvC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;QAE1E,OAAO,IAAI,CAAA;;iCAEkB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI;;;cAGrD,MAAM,CACN,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAClD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EACR,CAAC,CAAC,EAAE,EAAE;YACJ,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;YACpD,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAC1B,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;YACpD,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7D,OAAO,IAAI,CAAA;uCACY,UAAU,IAAI,QAAQ;6CAChB,CAAC;8CACA,YAAY,CAAC,GAAG,CAAC;sBACzC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;;iBAEvF,CAAC;QACJ,CAAC,CACF;;;4BAGe,IAAI,CAAC,iBAAiB;;KAE7C,CAAC;IACJ,CAAC;CACF,CAAA;AA/c4C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAyC;AAGxC;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAW;AAGpC;IADhB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;qDACJ;AAGjC;IAAhB,KAAK,EAAE;sDAA6B;AAX1B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAidzB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { CalendarEntry } from \"./calendar-entry.js\";\nimport { tokens } from \"./tokens.js\";\nimport {\n  CALENDAR_ENTRY_ATTRIBUTES,\n  WEEKDAY_ABBR,\n  assignLanes,\n  daysInMonth,\n  isWeekend,\n  monthName,\n  overlapsRange,\n  readCalendarEntryElement,\n  resolveEntry,\n  toIsoDate,\n  type LanedEntry,\n  type ResolvedCalendarEntry,\n} from \"./utils/calendar.js\";\n\n/**\n * One month rendered as a top-to-bottom list of days — weekends and today\n * highlighted, with declarative `calendar-entry` children shown as colored\n * bars spanning the days they cover. An entry's title uses its first visible\n * day; every remaining visible day becomes one shared body for wrapped\n * details and an optional ending footer. Overlapping entries stack into\n * side-by-side lanes rather than being layered/hidden. Read-only.\n *\n * Lanes are computed independently per instance, from only the entries\n * overlapping this month — an entry spanning a month boundary may therefore\n * land in a different lane index in the adjacent month's `calendar-month`.\n * This is an accepted v1 limitation: cross-month lane continuity would\n * require a shared parent (`calendar-year`) to assign lanes globally.\n *\n * Entry attributes and slotted title/detail text are observed, so a\n * standalone month re-renders when consumers update declarative metadata.\n *\n * @element calendar-month\n * @slot - Declarative `calendar-entry` elements to render for this month.\n */\n@customElement(\"calendar-month\")\nexport class CalendarMonth extends LitElement {\n  /** Calendar year, e.g. `2026`. */\n  @property({ type: Number, reflect: true }) year: number = new Date().getFullYear();\n\n  /** Calendar month, 1-12 (January = 1). */\n  @property({ type: Number, reflect: true }) month = 1;\n\n  @queryAssignedElements({ selector: \"calendar-entry\" })\n  private readonly _entryElements!: CalendarEntry[];\n\n  /** Bumped when entry elements, attributes, or slotted text change to force a re-render. */\n  @state() private _entriesVersion = 0;\n\n  private _entriesObserver?: MutationObserver;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        font-size: var(--ui-font-size-sm, 0.75rem);\n      }\n      .month-name {\n        margin: 0 0 0.5rem;\n        color: var(--ui-text, #0f172a);\n        font-size: var(--ui-font-size, 0.875rem);\n        font-weight: 600;\n      }\n      table {\n        width: 100%;\n        border-collapse: collapse;\n        table-layout: fixed;\n      }\n      .day-row td {\n        padding: 0.25rem 0.5rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n      }\n      .day-row.weekend {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .day-row.today {\n        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 10%, transparent);\n      }\n      .day-number {\n        width: 1.5rem;\n        color: var(--ui-text-muted, #64748b);\n        font-variant-numeric: tabular-nums;\n        text-align: right;\n        white-space: nowrap;\n      }\n      .day-row.today .day-number {\n        color: var(--ui-primary, #4f46e5);\n        font-weight: 700;\n      }\n      .day-weekday {\n        width: 2.25rem;\n        color: var(--ui-text-muted, #64748b);\n        white-space: nowrap;\n      }\n      .day-row.today .day-weekday {\n        color: var(--ui-primary, #4f46e5);\n        font-weight: 600;\n      }\n      .day-row.weekend .day-weekday {\n        font-weight: 600;\n      }\n      .lane-cell {\n        padding: 0.25rem 0.5rem;\n      }\n      .entry-bar {\n        border-radius: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        transition: box-shadow 120ms ease;\n        white-space: nowrap;\n      }\n      .entry-bar.entry-hovered,\n      .entry-bar.entry-focused {\n        box-shadow: inset 0 0 0 100vmax var(--ui-hover-overlay, rgb(255 255 255 / 0.32));\n      }\n      .entry-bar.segment-single {\n        border-radius: var(--ui-radius-sm, 0.25rem);\n      }\n      .entry-bar.segment-start {\n        border-radius: var(--ui-radius-sm, 0.25rem) var(--ui-radius-sm, 0.25rem) 0 0;\n      }\n      .entry-bar.segment-end {\n        border-radius: 0 0 var(--ui-radius-sm, 0.25rem) var(--ui-radius-sm, 0.25rem);\n      }\n      .entry-bar.segment-start,\n      .entry-bar.segment-middle {\n        border-bottom: 0;\n      }\n      .entry-bar.neutral {\n        background: color-mix(in srgb, var(--ui-text-muted, #64748b) 15%, var(--ui-surface, #ffffff));\n        color: var(--ui-text-muted, #64748b);\n      }\n      .entry-bar.info {\n        background: color-mix(in srgb, var(--ui-info, #0ea5e9) 15%, var(--ui-surface, #ffffff));\n        color: var(--ui-info, #0ea5e9);\n      }\n      .entry-bar.primary {\n        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 15%, var(--ui-surface, #ffffff));\n        color: var(--ui-primary, #4f46e5);\n      }\n      .entry-bar.success {\n        background: color-mix(in srgb, var(--ui-success, #16a34a) 15%, var(--ui-surface, #ffffff));\n        color: var(--ui-success, #16a34a);\n      }\n      .entry-bar.warning {\n        background: color-mix(in srgb, var(--ui-warning, #d97706) 15%, var(--ui-surface, #ffffff));\n        color: var(--ui-warning, #d97706);\n      }\n      .entry-bar.danger {\n        background: color-mix(in srgb, var(--ui-danger, #dc2626) 15%, var(--ui-surface, #ffffff));\n        color: var(--ui-danger, #dc2626);\n      }\n      .entry-line {\n        display: block;\n        overflow: hidden;\n      }\n      .day-row td.entry-title-cell {\n        position: relative;\n        padding: 0;\n      }\n      .entry-title {\n        box-sizing: border-box;\n        font-weight: 500;\n        padding: 0.25rem 0.5rem;\n        pointer-events: none;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n      .entry-details {\n        display: -webkit-box;\n        min-height: 0;\n        max-height: var(--entry-detail-max-height, 1.15em);\n        flex: 0 0 auto;\n        overflow: hidden;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: var(--entry-detail-lines, 1);\n        font-size: var(--ui-font-size-xs, 0.6875rem);\n        font-weight: 400;\n        line-height: 1.15;\n        overflow-wrap: anywhere;\n        text-overflow: ellipsis;\n        white-space: normal;\n      }\n      .entry-detail {\n        min-height: 1.15em;\n      }\n      .day-row td.entry-body-cell {\n        position: relative;\n        padding: 0;\n        vertical-align: top;\n      }\n      .entry-body {\n        position: absolute;\n        inset: 0;\n        box-sizing: border-box;\n        display: flex;\n        min-height: 0;\n        flex-direction: column;\n        overflow: hidden;\n        padding: 0.25rem 0.5rem;\n        color: inherit;\n        pointer-events: none;\n      }\n      .entry-footer {\n        flex: 0 0 auto;\n        min-height: 1.15em;\n        margin-top: auto;\n        border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);\n        padding-top: 0.25rem;\n        font-size: var(--ui-font-size-xs, 0.6875rem);\n        font-weight: 500;\n        line-height: 1.15;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .entry-link {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n        border-radius: inherit;\n        color: inherit;\n        cursor: pointer;\n        text-decoration: none;\n      }\n      .entry-link:focus-visible {\n        outline: 2px solid var(--ui-primary, #4f46e5);\n        outline-offset: -2px;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35)) inset;\n      }\n      @media (forced-colors: active) {\n        .entry-link:focus-visible {\n          outline-color: Highlight;\n          box-shadow: none;\n        }\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .entry-bar {\n          transition: none;\n        }\n      }\n      slot {\n        display: none;\n      }\n    `,\n  ];\n\n  /** Observes declarative entry attributes and slotted text for live updates. */\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._entriesVersion++;\n    this._entriesObserver ??= new MutationObserver(() => this._entriesVersion++);\n    this._entriesObserver.observe(this, {\n      attributes: true,\n      attributeFilter: CALENDAR_ENTRY_ATTRIBUTES,\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  /** Releases the entry observer when this month disconnects. */\n  override disconnectedCallback(): void {\n    this._entriesObserver?.disconnect();\n    super.disconnectedCallback();\n  }\n\n  /** Restores hover/focus classes from the live DOM after Lit updates or reuses cells. */\n  protected override updated(): void {\n    this._syncEntryInteractions();\n  }\n\n  /** Re-renders when declarative `calendar-entry` children are added or removed. */\n  private _handleSlotChange(): void {\n    this._entriesVersion++;\n  }\n\n  /** Finds the laned entry (if any) covering `date` in a given lane. */\n  private _entryFor(laned: LanedEntry[], lane: number, date: Date): LanedEntry | undefined {\n    return laned.find((entry) => entry.lane === lane && entry.startDate <= date && date <= entry.endDate);\n  }\n\n  /** Classifies one day of an entry so only the outer endpoints are rounded. */\n  private _segmentClass(entry: LanedEntry, date: Date): string {\n    const startsHere = date.getTime() === entry.startDate.getTime();\n    const endsHere = date.getTime() === entry.endDate.getTime();\n    if (startsHere && endsHere) return \"segment-single\";\n    if (startsHere) return \"segment-start\";\n    if (endsHere) return \"segment-end\";\n    return \"segment-middle\";\n  }\n\n  /** Current render key shared by an entry's title and body cells. */\n  private _entryKey(entry: LanedEntry): string {\n    return `${entry.lane}|${entry.start}|${entry.end}|${entry.label}|${entry.href ?? \"\"}`;\n  }\n\n  /** Toggles one interaction class on every rendered cell belonging to an entry. */\n  private _setEntryInteraction(entryKey: string, className: string, active: boolean): void {\n    for (const cell of this.renderRoot.querySelectorAll<HTMLElement>(\".entry-bar\")) {\n      if (cell.dataset.entryKey === entryKey) {\n        cell.classList.toggle(className, active);\n      }\n    }\n  }\n\n  /** Reconciles classes against the links actually hovered or focused after a render. */\n  private _syncEntryInteractions(): void {\n    for (const cell of this.renderRoot.querySelectorAll<HTMLElement>(\".entry-bar\")) {\n      cell.classList.remove(\"entry-hovered\", \"entry-focused\");\n    }\n    for (const link of this.renderRoot.querySelectorAll<HTMLElement>(\".entry-link:hover\")) {\n      this._setEntryInteraction(link.dataset.entryKey ?? \"\", \"entry-hovered\", true);\n    }\n    const activeElement = this.shadowRoot?.activeElement;\n    if (activeElement instanceof HTMLElement && activeElement.matches(\".entry-link\")) {\n      this._setEntryInteraction(activeElement.dataset.entryKey ?? \"\", \"entry-focused\", true);\n    }\n  }\n\n  /** Renders a transparent full-cell link without wrapping the visible text. */\n  private _renderEntryLink(entry: LanedEntry, accessibleText: string) {\n    const entryKey = this._entryKey(entry);\n    return entry.href\n      ? html`<a\n          class=\"entry-link\"\n          href=${entry.href}\n          aria-label=${accessibleText}\n          data-entry-key=${entryKey}\n          @pointerenter=${() => this._setEntryInteraction(entryKey, \"entry-hovered\", true)}\n          @pointerleave=${() => this._setEntryInteraction(entryKey, \"entry-hovered\", false)}\n          @focus=${() => this._setEntryInteraction(entryKey, \"entry-focused\", true)}\n          @blur=${() => this._setEntryInteraction(entryKey, \"entry-focused\", false)}\n        ></a>`\n      : nothing;\n  }\n\n  /** Joins the event title, details, and visible footer for tooltips and accessible link names. */\n  private _entryBodyText(entry: LanedEntry, showFooter: boolean): string {\n    return [entry.label, ...(entry.details ?? []), showFooter ? entry.footer : undefined]\n      .filter((line): line is string => Boolean(line))\n      .join(\"\\n\");\n  }\n\n  /** Renders the shared details body, with the footer reserved at its bottom edge. */\n  private _renderEntryBody(\n    entry: LanedEntry,\n    showFooter: boolean,\n    detailLineClamp: number,\n    showTitleFallback = false,\n  ) {\n    const sourceDetails = entry.details ?? [];\n    const footer = showFooter ? entry.footer : undefined;\n    const details =\n      showTitleFallback && sourceDetails.length === 0 && !footer\n        ? [entry.label]\n        : sourceDetails;\n    const bodyText = this._entryBodyText(entry, showFooter);\n    return html`\n      ${this._renderEntryLink(entry, bodyText)}\n      <div class=\"entry-body\" aria-hidden=${entry.href ? \"true\" : nothing}>\n        ${detailLineClamp > 0 && details.length > 0\n          ? html`\n              <div\n                class=\"entry-details\"\n                style=${`--entry-detail-lines: ${detailLineClamp}; --entry-detail-max-height: ${\n                  detailLineClamp * 1.15\n                }em`}\n              >\n                ${details.map((detail) => html`<div class=\"entry-detail\">${detail}</div>`)}\n              </div>\n            `\n          : nothing}\n        ${footer ? html`<div class=\"entry-footer\" title=${footer}>${footer}</div>` : nothing}\n      </div>\n    `;\n  }\n\n  /** Renders a row-spanning body cell with whole-line detail and footer budgets. */\n  private _renderEntryBodyCell(\n    entry: LanedEntry,\n    bodyRows: number,\n    reachesEventEnd: boolean,\n    showTitleFallback = false,\n  ) {\n    const segmentClass = reachesEventEnd ? \"segment-end\" : \"segment-middle\";\n    const footerLineBudget = reachesEventEnd && entry.footer ? 1 : 0;\n    const detailLineClamp = Math.max(0, bodyRows - footerLineBudget);\n    const bodyText = this._entryBodyText(entry, reachesEventEnd);\n    return html`\n      <td\n        class=\"lane-cell entry-bar entry-body-cell ${entry.color} ${segmentClass}\"\n        data-entry-key=${this._entryKey(entry)}\n        rowspan=${bodyRows}\n        title=${entry.href ? nothing : bodyText}\n      >\n        ${this._renderEntryBody(entry, reachesEventEnd, detailLineClamp, showTitleFallback)}\n      </td>\n    `;\n  }\n\n  /** Renders a lane's title/body cell, skips rows covered by a body rowspan, or emits an empty spacer. */\n  private _renderLaneCell(\n    laned: LanedEntry[],\n    lane: number,\n    date: Date,\n    monthStart: Date,\n    monthEnd: Date,\n  ) {\n    const entry = this._entryFor(laned, lane, date);\n    if (!entry) {\n      return html`<td class=\"lane-cell empty\"></td>`;\n    }\n\n    const firstVisibleDay = entry.startDate > monthStart ? entry.startDate : monthStart;\n    const lastVisibleDay = entry.endDate < monthEnd ? entry.endDate : monthEnd;\n    const dayOffset = date.getDate() - firstVisibleDay.getDate();\n    const visibleDayCount = lastVisibleDay.getDate() - firstVisibleDay.getDate() + 1;\n    const isMultiDayEntry = entry.startDate.getTime() !== entry.endDate.getTime();\n    const isEndingOnlyClip =\n      visibleDayCount === 1 &&\n      isMultiDayEntry &&\n      date.getTime() === entry.endDate.getTime();\n    if (isEndingOnlyClip) {\n      return this._renderEntryBodyCell(entry, 1, true, true);\n    }\n    if (dayOffset > 1) return nothing;\n\n    if (dayOffset === 1) {\n      const bodyRows = visibleDayCount - 1;\n      const reachesEventEnd = lastVisibleDay.getTime() === entry.endDate.getTime();\n      return this._renderEntryBodyCell(entry, bodyRows, reachesEventEnd);\n    }\n\n    return html`\n      <td\n        class=\"lane-cell entry-bar entry-title-cell ${entry.color} ${this._segmentClass(entry, date)}\"\n        data-entry-key=${this._entryKey(entry)}\n        title=${entry.href ? nothing : entry.label}\n      >\n        ${this._renderEntryLink(entry, entry.label)}\n        <span class=\"entry-line entry-title\" aria-hidden=${entry.href ? \"true\" : nothing}>\n          ${entry.label}\n        </span>\n      </td>\n    `;\n  }\n\n  protected override render() {\n    const totalDays = daysInMonth(this.year, this.month);\n    const monthStart = new Date(this.year, this.month - 1, 1);\n    const monthEnd = new Date(this.year, this.month - 1, totalDays);\n\n    const resolved = this._entryElements\n      .map(readCalendarEntryElement)\n      .map(resolveEntry)\n      .filter((entry): entry is ResolvedCalendarEntry => entry !== null)\n      .filter((entry) => overlapsRange(entry, monthStart, monthEnd));\n    const { entries: laned, laneCount } = assignLanes(resolved);\n    const todayIso = toIsoDate(new Date());\n    const lanes = Array.from({ length: Math.max(laneCount, 1) }, (_, i) => i);\n\n    return html`\n      <div class=\"month\">\n        <h4 class=\"month-name\">${monthName(this.month)} ${this.year}</h4>\n        <table>\n          <tbody>\n            ${repeat(\n              Array.from({ length: totalDays }, (_, i) => i + 1),\n              (d) => d,\n              (d) => {\n                const date = new Date(this.year, this.month - 1, d);\n                const dow = date.getDay();\n                const weekendCls = isWeekend(date) ? \"weekend\" : \"\";\n                const todayCls = toIsoDate(date) === todayIso ? \"today\" : \"\";\n                return html`\n                  <tr class=\"day-row ${weekendCls} ${todayCls}\">\n                    <td class=\"day-number\">${d}</td>\n                    <td class=\"day-weekday\">${WEEKDAY_ABBR[dow]}</td>\n                    ${lanes.map((lane) => this._renderLaneCell(laned, lane, date, monthStart, monthEnd))}\n                  </tr>\n                `;\n              },\n            )}\n          </tbody>\n        </table>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"calendar-month\": CalendarMonth;\n  }\n}\n"]}

package/dist/calendar-year.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from "lit";
+import "./calendar-month.js";
+/**
+ * A full year of `calendar-month` blocks, generated from declarative
+ * `calendar-entry` children. Each entry is re-projected into the
+ * `calendar-month` blocks it overlaps as a freshly-created `calendar-entry`
+ * element — the original elements stay slotted here and are never moved,
+ * since a DOM node can only have one parent. Read-only.
+ *
+ * @element calendar-year
+ * @slot - Declarative `calendar-entry` elements spanning the displayed year.
+ */
+export declare class CalendarYear extends LitElement {
+    /** Calendar year to render all 12 months for, e.g. `2026`. */
+    year: number;
+    private readonly _entryElements;
+    /** Bumped whenever entry elements, attributes, or slotted text change to force a re-render. */
+    private _entriesVersion;
+    private _entriesObserver?;
+    private readonly _entryKeys;
+    private _nextEntryKey;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Watches slotted `calendar-entry` attributes and title/detail text.
+     * Neither reflected-property changes nor edits inside assigned elements
+     * fire this component's `slotchange`, so a subtree observer keeps the
+     * projected month entries synchronized.
+     */
+    connectedCallback(): void;
+    /** Releases the mutation observer when the element disconnects. */
+    disconnectedCallback(): void;
+    /** Re-renders when declarative `calendar-entry` children are added or removed. */
+    private _handleSlotChange;
+    /** Returns an immutable identity for each original slotted entry. */
+    private _entryKey;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "calendar-year": CalendarYear;
+    }
+}
+//# sourceMappingURL=calendar-year.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-year.d.ts","sourceRoot":"","sources":["../src/calendar-year.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,OAAO,qBAAqB,CAAC;AAc7B;;;;;;;;;GASG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,8DAA8D;IACnB,IAAI,EAAE,MAAM,CAA4B;IAGnF,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAmB;IAElD,+FAA+F;IACtF,OAAO,CAAC,eAAe,CAAK;IAErC,OAAO,CAAC,gBAAgB,CAAC,CAAmB;IAC5C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAwC;IACnE,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAgB,MAAM,4BAyBpB;IAEF;;;;;OAKG;IACM,iBAAiB,IAAI,IAAI,CAWjC;IAED,mEAAmE;IAC1D,oBAAoB,IAAI,IAAI,CAGpC;IAED,kFAAkF;IAClF,OAAO,CAAC,iBAAiB;IAIzB,qEAAqE;IACrE,OAAO,CAAC,SAAS;IASjB,UAAmB,MAAM,yCA0CxB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}