@skdx/web-components 0.26.0

package/dist/calendar/Calendar.d.ts

@@ -0,0 +1,248 @@
+import { LitElement, type PropertyValues } from 'lit';
+/** @internal Number of days in the given zero-based `month` of `year`. */
+export declare function getDaysInMonth(year: number, month: number): number;
+/** @internal Midnight on the first day of `date`'s month, in local time. */
+export declare function startOfMonth(date: Date): Date;
+/** @internal Adds `amount` calendar months to `date`, clamping the day of month so it never overflows. */
+export declare function addMonths(date: Date, amount: number): Date;
+/** @internal Adds `amount` years to `date` via {@link addMonths}. */
+export declare function addYears(date: Date, amount: number): Date;
+/** @internal Adds `amount` days to `date`, rolling over month/year boundaries. */
+export declare function addDays(date: Date, amount: number): Date;
+/** @internal Whether `a` and `b` fall on the same calendar day. */
+export declare function isSameDay(a: Date | null | undefined, b: Date | null | undefined): boolean;
+/** @internal Whether `a` and `b` fall in the same calendar month of the same year. */
+export declare function isSameMonth(a: Date, b: Date): boolean;
+/** @internal Midnight on the first day of the week containing `date`. */
+export declare function startOfWeek(date: Date, weekStartsOn: number): Date;
+/** @internal Midnight on the last day of the week containing `date`. */
+export declare function endOfWeek(date: Date, weekStartsOn: number): Date;
+/** @internal Copy of `date` with the time component zeroed to local midnight. */
+export declare function stripTime(date: Date): Date;
+/** @internal Whether `date` is before `minDate`, after `maxDate`, or rejected by `disabledFn`. */
+export declare function isDateDisabled(date: Date, minDate: Date | undefined, maxDate: Date | undefined, disabledFn: ((date: Date) => boolean) | undefined): boolean;
+/** @internal Formats `date` as a local-time `YYYY-MM-DD` string. */
+export declare function toISODateString(date: Date): string;
+/** @internal Projects `date`'s day-of-month onto `targetMonth`, clamping to that month's last day. */
+export declare function clampToMonth(date: Date, targetMonth: Date): Date;
+/** One cell in a Calendar grid week. */
+export interface CalendarDay {
+    date: Date;
+    outsideMonth: boolean;
+}
+/** Always returns a 6x7 (weeks x weekdays) grid, including adjacent-month filler days. */
+export declare function getVisibleWeeks(month: Date, weekStartsOn?: number): CalendarDay[][];
+/**
+ * How many dates a `<skdx-calendar>` selects at once, and therefore what shape
+ * its `value` takes:
+ *
+ * | `selectionMode` | `value` type          | empty selection |
+ * | --------------- | --------------------- | --------------- |
+ * | `'single'`      | `Date \| null`        | `null`          |
+ * | `'multiple'`    | `Date[]`              | `[]`            |
+ * | `'range'`       | `DateRange \| null`   | `null`          |
+ */
+export type CalendarSelectionMode = 'single' | 'multiple' | 'range';
+/**
+ * A selected date range. `end` is `null` while the range is *anchored* — the
+ * user has picked a start date and the next selection will close the range.
+ */
+export interface DateRange {
+    /** First date of the range (always the earlier of the two once `end` is set). */
+    start: Date;
+    /** Last date of the range, or `null` while only the anchor has been picked. */
+    end: Date | null;
+}
+/**
+ * A calendar's selection, whose concrete shape follows
+ * {@link CalendarSelectionMode}. One union rather than a discriminated type,
+ * because a Web Component property cannot discriminate on a sibling property —
+ * semantic parity across the five frameworks beats a type trick only two of
+ * them could express.
+ */
+export type CalendarValue = Date | Date[] | DateRange | null;
+/** Where a date sits inside a selected range, for the `data-range-*` styling hooks. */
+export type RangePosition = 'start' | 'middle' | 'end';
+/** Whether `value` is a {@link DateRange} rather than a single date, a date array, or nothing. */
+export declare function isDateRange(value: CalendarValue): value is DateRange;
+/** The empty selection for `mode`: `[]` for `multiple`, `null` for `single` and `range`. */
+export declare function emptySelection(mode: CalendarSelectionMode): CalendarValue;
+/**
+ * Where `date` sits in `range`: `'start'`, `'end'`, `'middle'`, or `undefined`
+ * when it is outside the range. A range still being anchored (`end: null`)
+ * only ever reports `'start'`.
+ */
+export declare function rangePositionOf(range: DateRange, date: Date): RangePosition | undefined;
+/**
+ * Whether `date` is part of `value` — the selected day in `single` mode, a
+ * member of the array in `multiple`, or anywhere from `start` to `end`
+ * inclusive in `range` (so every cell in a range carries `aria-selected`).
+ */
+export declare function isDateSelected(value: CalendarValue, date: Date): boolean;
+/**
+ * The selection that results from choosing `date` while `current` is selected.
+ *
+ * - `single` — just `date`.
+ * - `multiple` — `date` toggled into/out of the array, kept chronological.
+ * - `range` — anchors a new range (`{ start: date, end: null }`) when nothing
+ *   is anchored or the previous range was already complete, otherwise closes
+ *   the anchored range, ordering `start`/`end` so a backwards drag still
+ *   yields `start <= end`.
+ */
+export declare function nextSelection(mode: CalendarSelectionMode, current: CalendarValue, date: Date): CalendarValue;
+/** @internal The live-region message for a selection change, or `''` when there is nothing worth announcing. */
+export declare function selectionAnnouncement(value: CalendarValue, locale: string | undefined): string;
+/** @internal The date a fresh calendar should focus and display, given whatever `value` holds. */
+export declare function anchorOf(value: CalendarValue): Date | null;
+/**
+ * `<skdx-calendar>` — the Web Components implementation of the shared
+ * Calendar contract (see `@skdx/shared`'s `calendarContract`). A month-grid
+ * date picker (WAI-ARIA `grid` pattern) built on plain native `Date` math and
+ * `Intl` for every month/weekday name — no date library, no bundled name
+ * table. `selection-mode` decides what `value` holds: a `Date` (`single`, the
+ * default), a `Date[]` (`multiple`), or a `{ start, end }` {@link DateRange}
+ * (`range`, where `end` stays `null` until the second date closes it).
+ * Renders no visible box of its own (`display:
+ * contents`) — it only owns selection/displayed-month/roving-focus state
+ * and exposes it to descendant `<skdx-calendar-*>` parts, which look it up
+ * via `closest('skdx-calendar')` and listen for its internal update event to
+ * know when to re-render. Like `<skdx-dialog>`, properties are the single
+ * source of truth (no separate controlled/uncontrolled mode) — listen for
+ * `value-change`/`month-change` to observe or override changes.
+ *
+ * @example
+ * ```html
+ * <skdx-calendar id="cal">
+ *   <skdx-calendar-header>
+ *     <skdx-calendar-previous-button>‹</skdx-calendar-previous-button>
+ *     <skdx-calendar-heading></skdx-calendar-heading>
+ *     <skdx-calendar-next-button>›</skdx-calendar-next-button>
+ *   </skdx-calendar-header>
+ *   <skdx-calendar-grid></skdx-calendar-grid>
+ * </skdx-calendar>
+ * ```
+ *
+ * @fires value-change - Fired with the *whole* new selection (a `Date`, a `Date[]`, or a `{ start, end }` range, per `selection-mode`) whenever a cell is picked.
+ * @fires month-change - Fired with the first day of the newly displayed month whenever the calendar is navigated.
+ */
+export declare class SkdxCalendar extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * How many dates can be selected at once, which also fixes the shape of
+     * `value` — see {@link CalendarSelectionMode}.
+     * @default 'single'
+     */
+    selectionMode: CalendarSelectionMode;
+    /**
+     * Current selection; its shape follows `selectionMode`. Property-only —
+     * the array and range shapes have no attribute form. Listen for
+     * `value-change` to observe or override changes.
+     */
+    value: CalendarValue;
+    /** Displayed month. Listen for `month-change` to observe or override changes. */
+    month: Date;
+    /**
+     * Initially displayed month, for uncontrolled usage — the seed for
+     * {@link month}, which the calendar then owns. Defaults to the month of
+     * `value`, or the current month
+     * (`packages/react/src/calendar/Calendar.tsx:331`).
+     *
+     * Unlike `month`, this one *does* take an attribute: a seed is the thing
+     * static markup needs to say, and a month has an unambiguous text form.
+     * `default-month="2024-01"` and `default-month="2024-01-01"` are both read
+     * as local time — `new Date('2024-01-01')` is UTC midnight, which is the
+     * *previous* month anywhere west of Greenwich.
+     * @default undefined — the month of `value`, else the current month.
+     */
+    defaultMonth?: Date;
+    /**
+     * The `month` this element was constructed with, held by identity so
+     * {@link defaultMonth} can tell "nobody has set `month`" from "somebody set
+     * it to today's month". Assigning `month` replaces the object, so `===`
+     * against this is the whole test.
+     */
+    private readonly _constructedMonth;
+    private _monthSeeded;
+    /**
+     * How many consecutive months to display, starting at `month` — compose one
+     * `<skdx-calendar-grid>` per month with a matching `month-offset`, and one
+     * `<skdx-calendar-heading>` per month.
+     * @default 1
+     */
+    numberOfMonths: number;
+    /**
+     * BCP 47 tag used to derive month and weekday names (via `Intl`) and, when
+     * `week-starts-on` is omitted, the first day of the week.
+     * @default undefined — the runtime's own locale.
+     */
+    locale?: string;
+    /**
+     * Day of week the grid's first column represents (`0` = Sunday … `6` = Saturday).
+     * @default undefined — derived from `locale`, falling back to `0` (Sunday).
+     */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Earliest selectable date; earlier dates render disabled. */
+    minDate?: Date;
+    /** Latest selectable date; later dates render disabled. */
+    maxDate?: Date;
+    /** Predicate marking arbitrary dates as disabled, in addition to minDate/maxDate. */
+    disabled?: (date: Date) => boolean;
+    /**
+     * Predicate marking dates as *unavailable* — a booked hotel night, a closed
+     * clinic day. Receives the cell's local `YYYY-MM-DD` string. Property only:
+     * it is a function, so there is no attribute form.
+     *
+     * Distinct from `disabled`: an unavailable cell stays keyboard-reachable and
+     * is announced as `aria-disabled`, so a screen-reader user can arrow onto it
+     * and hear *why* it can't be picked, where a `disabled` cell is skipped
+     * entirely.
+     */
+    isDateUnavailable?: (isoDate: string) => boolean;
+    /**
+     * Words the polite live-region message announced after a selection change in
+     * `multiple` and `range` mode — the state that changed lives across several
+     * cells, so no cell's own `aria-selected` flip carries it. Return `''` to
+     * announce nothing.
+     *
+     * The month and weekday names around it are already localized by `locale`;
+     * this sentence is the one string in the calendar that a `locale` cannot
+     * translate on its own. Property only — it is a function.
+     * @default undefined — the built-in English wording ("Range selected, 1 May to 8 May.").
+     */
+    getSelectionAnnouncement?: (value: CalendarValue, locale: string | undefined) => string;
+    /** The currently roving-focused date (tabindex=0 cell). */
+    focusedDate: Date;
+    /** The first day of the week actually in effect: `weekStartsOn`, else whatever `locale` implies. */
+    get resolvedWeekStartsOn(): 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Every displayed month, `numberOfMonths` long, starting at `month`. @internal */
+    get months(): Date[];
+    /** Weekday names for `locale`, rotated to start at the resolved week start, as short/long pairs. @internal */
+    get weekDayNames(): Array<{
+        short: string;
+        long: string;
+    }>;
+    connectedCallback(): void;
+    /**
+     * Folds `date` into the current selection per `selectionMode`, moves roving
+     * focus to it, and dispatches `value-change` with the *whole* new selection.
+     *
+     * Range and multi-select changes are also pushed through the shared
+     * LiveAnnouncer: that state lives across several cells, so no single
+     * `aria-selected` flip conveys it (a single-date pick needs no announcement).
+     */
+    setValue(date: Date): void;
+    /** Sets `month` (normalized to its first day) and dispatches `month-change`. The month already displayed is a no-op. */
+    setMonth(date: Date): void;
+    /** Sets the roving-focus date without changing selection. */
+    setFocusedDate(date: Date): void;
+    private emit;
+    private notify;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-calendar': SkdxCalendar;
+    }
+}

package/dist/calendar/Calendar.js

@@ -0,0 +1,5 @@
+var v=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var i=(e,n,t,r)=>{for(var a=r>1?void 0:r?T(n,t):n,l=e.length-1,s;l>=0;l--)(s=e[l])&&(a=(r?s(n,t,a):s(a))||a);return r&&a&&v(n,t,a),a};import{css as A,html as S,LitElement as V}from"lit";import{property as u}from"lit/decorators.js";import{customElement as F}from"../internal/define.js";import{announce as O}from"../utils/live-announcer.js";import{formatDateLabel as D,getLocaleWeekStartsOn as Y,getWeekDayNames as p}from"./locale.js";function b(e,n){return new Date(e,n+1,0).getDate()}function c(e){return new Date(e.getFullYear(),e.getMonth(),1)}function y(e,n){let t=e.getDate(),r=new Date(e.getFullYear(),e.getMonth(),1);r.setMonth(r.getMonth()+n);let a=b(r.getFullYear(),r.getMonth());return r.setDate(Math.min(t,a)),r}function L(e,n){return y(e,n*12)}function M(e,n){let t=new Date(e);return t.setDate(t.getDate()+n),t}function g(e,n){return!e||!n?!1:e.getFullYear()===n.getFullYear()&&e.getMonth()===n.getMonth()&&e.getDate()===n.getDate()}function w(e,n){return e.getFullYear()===n.getFullYear()&&e.getMonth()===n.getMonth()}function x(e,n){let t=new Date(e.getFullYear(),e.getMonth(),e.getDate()),r=(t.getDay()-n+7)%7;return t.setDate(t.getDate()-r),t}function U(e,n){return M(x(e,n),6)}function d(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())}function q(e,n,t,r){let a=d(e).getTime();return!!(n&&a<d(n).getTime()||t&&a>d(t).getTime()||r?.(e))}function z(e){let n=e.getFullYear(),t=String(e.getMonth()+1).padStart(2,"0"),r=String(e.getDate()).padStart(2,"0");return`${n}-${t}-${r}`}function H(e,n){if(w(e,n))return e;let t=b(n.getFullYear(),n.getMonth());return new Date(n.getFullYear(),n.getMonth(),Math.min(e.getDate(),t))}function j(e,n=0){let t=x(c(e),n),r=[],a=t;for(let l=0;l<6;l++){let s=[];for(let f=0;f<7;f++)s.push({date:a,outsideMonth:!w(a,e)}),a=M(a,1);r.push(s)}return r}function m(e){return e!==null&&!Array.isArray(e)&&!(e instanceof Date)}function B(e){return e==="multiple"?[]:null}function N(e,n){let t=d(n).getTime(),r=d(e.start).getTime();if(e.end===null)return t===r?"start":void 0;let a=d(e.end).getTime();if(!(t<r||t>a))return t===r?"start":t===a?"end":"middle"}function G(e,n){return e===null?!1:Array.isArray(e)?e.some(t=>g(t,n)):m(e)?N(e,n)!==void 0:g(e,n)}function C(e,n,t){if(e==="single")return t;if(e==="multiple"){let a=Array.isArray(n)?n:[],l=a.filter(s=>!g(s,t));return l.length!==a.length?l:[...a,t].sort((s,f)=>s.getTime()-f.getTime())}let r=m(n)&&n.end===null?n:void 0;return r?d(t).getTime()<d(r.start).getTime()?{start:t,end:r.start}:{start:r.start,end:t}:{start:t,end:null}}function E(e,n){return m(e)?e.end===null?`${D(e.start,n)} selected as the range start. Select an end date.`:`Range selected, ${D(e.start,n)} to ${D(e.end,n)}.`:Array.isArray(e)?`${e.length} ${e.length===1?"date":"dates"} selected.`:""}var $={fromAttribute(e){if(e==null)return;let n=/^(\d{4})-(\d{2})(?:-(\d{2}))?$/.exec(e.trim()),t=n?new Date(Number(n[1]),Number(n[2])-1,Number(n[3]??"1")):new Date(e);return Number.isNaN(t.getTime())?void 0:t},toAttribute(){}};function h(e){return e===null?null:Array.isArray(e)?e[0]??null:m(e)?e.start:e}var o=class extends V{constructor(){super(...arguments);this.selectionMode="single";this.value=null;this.month=c(new Date);this._constructedMonth=this.month;this._monthSeeded=!1;this.numberOfMonths=1;this.focusedDate=h(this.value)??this.month}get resolvedWeekStartsOn(){return this.weekStartsOn??Y(this.locale)}get months(){return Array.from({length:Math.max(1,this.numberOfMonths)},(t,r)=>y(this.month,r))}get weekDayNames(){let t=this.resolvedWeekStartsOn,r=p(this.locale,t,"short"),a=p(this.locale,t,"long");return r.map((l,s)=>({short:l,long:a[s]}))}connectedCallback(){super.connectedCallback(),this.focusedDate=h(this.value)??this.month}setValue(t){let r=C(this.selectionMode,this.value,t);this.value=r,this.focusedDate=t,this.emit("value-change",r);let a=(this.getSelectionAnnouncement??E)(r,this.locale);a&&O(a)}setMonth(t){let r=c(t);r.getTime()!==c(this.month).getTime()&&(this.month=r,this.emit("month-change",this.month))}setFocusedDate(t){this.focusedDate=t,this.notify()}emit(t,r){this.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0,composed:!0})),this.notify()}notify(){this.dispatchEvent(new CustomEvent("skdx-calendar-internal-update",{bubbles:!0,composed:!0})),this.requestUpdate()}willUpdate(t){if(this._monthSeeded||!(t.has("defaultMonth")||t.has("value")))return;if(this.month!==this._constructedMonth){this._monthSeeded=!0;return}let r=this.defaultMonth??h(this.value);r&&(this._monthSeeded=!0,this.month=c(r),this.focusedDate=h(this.value)??this.month)}updated(t){t.size>0&&this.dispatchEvent(new CustomEvent("skdx-calendar-internal-update",{bubbles:!0,composed:!0}))}render(){return S`<slot></slot>`}};o.styles=A`
+    :host {
+      display: block;
+    }
+  `,i([u({type:String,reflect:!0,attribute:"selection-mode"})],o.prototype,"selectionMode",2),i([u({attribute:!1})],o.prototype,"value",2),i([u({attribute:!1})],o.prototype,"month",2),i([u({converter:$,attribute:"default-month"})],o.prototype,"defaultMonth",2),i([u({type:Number,attribute:"number-of-months"})],o.prototype,"numberOfMonths",2),i([u({type:String})],o.prototype,"locale",2),i([u({type:Number,attribute:"week-starts-on"})],o.prototype,"weekStartsOn",2),i([u({attribute:!1})],o.prototype,"minDate",2),i([u({attribute:!1})],o.prototype,"maxDate",2),i([u({attribute:!1})],o.prototype,"disabled",2),i([u({attribute:!1})],o.prototype,"isDateUnavailable",2),i([u({attribute:!1})],o.prototype,"getSelectionAnnouncement",2),o=i([F("skdx-calendar","calendar","root")],o);export{o as SkdxCalendar,M as addDays,y as addMonths,L as addYears,h as anchorOf,H as clampToMonth,B as emptySelection,U as endOfWeek,b as getDaysInMonth,j as getVisibleWeeks,q as isDateDisabled,m as isDateRange,G as isDateSelected,g as isSameDay,w as isSameMonth,C as nextSelection,N as rangePositionOf,E as selectionAnnouncement,c as startOfMonth,x as startOfWeek,d as stripTime,z as toISODateString};

package/dist/calendar/CalendarCell.cjs

@@ -0,0 +1,27 @@
+"use strict";var h=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var x=(o,d)=>{for(var t in d)h(o,t,{get:d[t],enumerable:!0})},y=(o,d,t,i)=>{if(d&&typeof d=="object"||typeof d=="function")for(let a of $(d))!M.call(o,a)&&a!==t&&h(o,a,{get:()=>d[a],enumerable:!(i=v(d,a))||i.enumerable});return o};var U=o=>y(h({},"__esModule",{value:!0}),o),p=(o,d,t,i)=>{for(var a=i>1?void 0:i?v(d,t):d,n=o.length-1,r;n>=0;n--)(r=o[n])&&(a=(i?r(d,t,a):r(a))||a);return i&&a&&h(d,t,a),a};var S={};x(S,{SkdxCalendarCell:()=>l});module.exports=U(S);var s=require("lit"),m=require("lit/decorators.js"),g=require("../internal/define.cjs"),f=require("../internal/part.cjs"),c=require("../internal/styles.cjs"),e=require("./Calendar.cjs");var l=class extends s.LitElement{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{let t=this.root;if(!(!t||this.isDisabled)){if(this.isUnavailable){t.setFocusedDate(this.date);return}t.setValue(this.date)}}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-calendar"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate),this.date&&this.setAttribute("data-skdx-calendar-cell",(0,e.toISODateString)(this.date))}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),super.disconnectedCallback()}willUpdate(){this.date&&this.setAttribute("data-skdx-calendar-cell",(0,e.toISODateString)(this.date))}updated(){let t=this.root,i=this.gridMonth,a=t?(0,e.isDateSelected)(t.value,this.date):!1,n=t&&(0,e.isDateRange)(t.value)?(0,e.rangePositionOf)(t.value,this.date):void 0;(0,f.reflectHostState)(this,{"data-state":a?"selected":null,"data-today":(0,e.isSameDay)(this.date,new Date)?"":null,"data-outside-month":i&&!(0,e.isSameMonth)(this.date,i)?"":null,"data-disabled":this.isDisabled?"":null,"data-unavailable":this.isUnavailable?"":null,"data-range-start":n==="start"?"":null,"data-range-middle":n==="middle"?"":null,"data-range-end":n==="end"?"":null})}get gridMonth(){return this.closest("skdx-calendar-grid")?.gridMonth??this.root?.month}get isDisabled(){let t=this.root;if(!t)return!1;let i=this.gridMonth;return(i?!(0,e.isSameMonth)(this.date,i):!1)||(0,e.isDateDisabled)(this.date,t.minDate,t.maxDate,t.disabled)}get isUnavailable(){return this.isDisabled?!1:this.root?.isDateUnavailable?.((0,e.toISODateString)(this.date))??!1}render(){let t=this.root,i=this.gridMonth,a=i?!(0,e.isSameMonth)(this.date,i):!1,n=this.isDisabled,r=this.isUnavailable,b=t?(0,e.isDateSelected)(t.value,this.date):!1,u=t&&(0,e.isDateRange)(t.value)?(0,e.rangePositionOf)(t.value,this.date):void 0,D=(0,e.isSameDay)(this.date,new Date),k=t?(0,e.isSameDay)(this.date,t.focusedDate):!1;return s.html`
+      <button
+        part="cell"
+        type="button"
+        role="gridcell"
+        aria-selected=${b}
+        aria-disabled=${r?"true":s.nothing}
+        data-skdx-calendar-cell=${(0,e.toISODateString)(this.date)}
+        data-state=${b?"selected":s.nothing}
+        data-today=${D?"":s.nothing}
+        data-outside-month=${a?"":s.nothing}
+        data-disabled=${n?"":s.nothing}
+        data-unavailable=${r?"":s.nothing}
+        data-range-start=${u==="start"?"":s.nothing}
+        data-range-middle=${u==="middle"?"":s.nothing}
+        data-range-end=${u==="end"?"":s.nothing}
+        tabindex=${k?0:-1}
+        ?disabled=${n}
+        @click=${this.handleClick}
+      >
+        <slot>${this.date.getDate()}</slot>
+      </button>
+    `}};l.shadowRootOptions=c.delegatesFocusShadowRootOptions,l.styles=[c.resetNativeControl,s.css`
+      :host {
+        display: inline-block;
+      }
+    `,c.controlBoxOnHost],p([(0,m.property)({attribute:!1})],l.prototype,"date",2),l=p([(0,g.customElement)("skdx-calendar-cell","calendar","cell")],l);0&&(module.exports={SkdxCalendarCell});

package/dist/calendar/CalendarCell.d.cts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-calendar-cell>` — a single selectable `role="gridcell"` date within a
+ * `<skdx-calendar>`. Renders a native `<button type="button">` with
+ * `aria-selected`, `data-state="selected"` when chosen, `data-today`,
+ * `data-outside-month`, `data-disabled`, and a roving `tabindex` (`0` only
+ * for the currently focused date, `-1` otherwise, per the WAI-ARIA grid
+ * pattern). Clicking selects the date.
+ *
+ * In `range` selection mode, every cell from the range's start to its end is
+ * `aria-selected`, and carries exactly one of `data-range-start`,
+ * `data-range-middle` or `data-range-end` for styling the band.
+ *
+ * Two distinct ways to refuse a date:
+ * - **disabled** — outside `minDate`/`maxDate`, outside the enclosing grid's
+ *   month, or matching the `disabled` predicate. Natively `disabled`, so it is
+ *   not focusable and does not fire clicks.
+ * - **unavailable** — matching `isDateUnavailable`. Focusable and announced as
+ *   `aria-disabled="true"` with a `data-unavailable` hook, so a screen-reader
+ *   user can land on it and hear that it is taken; clicks only move focus.
+ *
+ * @csspart cell - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxCalendarCell extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** The date value this cell represents and selects when activated. Required. */
+    date: Date;
+    private root;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(): void;
+    protected updated(): void;
+    private readonly handleClick;
+    /** The month this cell belongs to: its enclosing grid's, falling back to the calendar's own. */
+    private get gridMonth();
+    private get isDisabled();
+    private get isUnavailable();
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-calendar-cell': SkdxCalendarCell;
+    }
+}

package/dist/calendar/CalendarCell.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-calendar-cell>` — a single selectable `role="gridcell"` date within a
+ * `<skdx-calendar>`. Renders a native `<button type="button">` with
+ * `aria-selected`, `data-state="selected"` when chosen, `data-today`,
+ * `data-outside-month`, `data-disabled`, and a roving `tabindex` (`0` only
+ * for the currently focused date, `-1` otherwise, per the WAI-ARIA grid
+ * pattern). Clicking selects the date.
+ *
+ * In `range` selection mode, every cell from the range's start to its end is
+ * `aria-selected`, and carries exactly one of `data-range-start`,
+ * `data-range-middle` or `data-range-end` for styling the band.
+ *
+ * Two distinct ways to refuse a date:
+ * - **disabled** — outside `minDate`/`maxDate`, outside the enclosing grid's
+ *   month, or matching the `disabled` predicate. Natively `disabled`, so it is
+ *   not focusable and does not fire clicks.
+ * - **unavailable** — matching `isDateUnavailable`. Focusable and announced as
+ *   `aria-disabled="true"` with a `data-unavailable` hook, so a screen-reader
+ *   user can land on it and hear that it is taken; clicks only move focus.
+ *
+ * @csspart cell - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxCalendarCell extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** The date value this cell represents and selects when activated. Required. */
+    date: Date;
+    private root;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(): void;
+    protected updated(): void;
+    private readonly handleClick;
+    /** The month this cell belongs to: its enclosing grid's, falling back to the calendar's own. */
+    private get gridMonth();
+    private get isDisabled();
+    private get isUnavailable();
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-calendar-cell': SkdxCalendarCell;
+    }
+}

package/dist/calendar/CalendarCell.js

@@ -0,0 +1,27 @@
+var k=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var h=(r,n,t,e)=>{for(var a=e>1?void 0:e?$(n,t):n,i=r.length-1,o;i>=0;i--)(o=r[i])&&(a=(e?o(n,t,a):o(a))||a);return e&&a&&k(n,t,a),a};import{css as M,html as x,LitElement as y,nothing as s}from"lit";import{property as U}from"lit/decorators.js";import{customElement as S}from"../internal/define.js";import{reflectHostState as w}from"../internal/part.js";import{controlBoxOnHost as E,delegatesFocusShadowRootOptions as O,resetNativeControl as L}from"../internal/styles.js";import{isDateDisabled as G,isDateRange as v,isDateSelected as m,isSameDay as u,isSameMonth as p,rangePositionOf as g,toISODateString as l}from"./Calendar.js";var d=class extends y{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{let t=this.root;if(!(!t||this.isDisabled)){if(this.isUnavailable){t.setFocusedDate(this.date);return}t.setValue(this.date)}}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-calendar"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate),this.date&&this.setAttribute("data-skdx-calendar-cell",l(this.date))}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),super.disconnectedCallback()}willUpdate(){this.date&&this.setAttribute("data-skdx-calendar-cell",l(this.date))}updated(){let t=this.root,e=this.gridMonth,a=t?m(t.value,this.date):!1,i=t&&v(t.value)?g(t.value,this.date):void 0;w(this,{"data-state":a?"selected":null,"data-today":u(this.date,new Date)?"":null,"data-outside-month":e&&!p(this.date,e)?"":null,"data-disabled":this.isDisabled?"":null,"data-unavailable":this.isUnavailable?"":null,"data-range-start":i==="start"?"":null,"data-range-middle":i==="middle"?"":null,"data-range-end":i==="end"?"":null})}get gridMonth(){return this.closest("skdx-calendar-grid")?.gridMonth??this.root?.month}get isDisabled(){let t=this.root;if(!t)return!1;let e=this.gridMonth;return(e?!p(this.date,e):!1)||G(this.date,t.minDate,t.maxDate,t.disabled)}get isUnavailable(){return this.isDisabled?!1:this.root?.isDateUnavailable?.(l(this.date))??!1}render(){let t=this.root,e=this.gridMonth,a=e?!p(this.date,e):!1,i=this.isDisabled,o=this.isUnavailable,b=t?m(t.value,this.date):!1,c=t&&v(t.value)?g(t.value,this.date):void 0,f=u(this.date,new Date),D=t?u(this.date,t.focusedDate):!1;return x`
+      <button
+        part="cell"
+        type="button"
+        role="gridcell"
+        aria-selected=${b}
+        aria-disabled=${o?"true":s}
+        data-skdx-calendar-cell=${l(this.date)}
+        data-state=${b?"selected":s}
+        data-today=${f?"":s}
+        data-outside-month=${a?"":s}
+        data-disabled=${i?"":s}
+        data-unavailable=${o?"":s}
+        data-range-start=${c==="start"?"":s}
+        data-range-middle=${c==="middle"?"":s}
+        data-range-end=${c==="end"?"":s}
+        tabindex=${D?0:-1}
+        ?disabled=${i}
+        @click=${this.handleClick}
+      >
+        <slot>${this.date.getDate()}</slot>
+      </button>
+    `}};d.shadowRootOptions=O,d.styles=[L,M`
+      :host {
+        display: inline-block;
+      }
+    `,E],h([U({attribute:!1})],d.prototype,"date",2),d=h([S("skdx-calendar-cell","calendar","cell")],d);export{d as SkdxCalendarCell};

package/dist/calendar/CalendarGrid.cjs

@@ -0,0 +1,5 @@
+"use strict";var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var D=(a,s)=>{for(var o in s)c(a,o,{get:s[o],enumerable:!0})},y=(a,s,o,e)=>{if(s&&typeof s=="object"||typeof s=="function")for(let t of k(s))!v.call(a,t)&&t!==o&&c(a,t,{get:()=>s[t],enumerable:!(e=u(s,t))||e.enumerable});return a};var b=a=>y(c({},"__esModule",{value:!0}),a),h=(a,s,o,e)=>{for(var t=e>1?void 0:e?u(s,o):s,i=a.length-1,l;i>=0;i--)(l=a[i])&&(t=(e?l(s,o,t):l(t))||t);return e&&t&&c(s,o,t),t};var g={};D(g,{SkdxCalendarGrid:()=>n});module.exports=b(g);var d=require("lit"),f=require("lit/decorators.js"),m=require("../internal/define.cjs"),p=require("../internal/direction.cjs"),r=require("./Calendar.cjs");var n=class extends d.LitElement{constructor(){super(...arguments);this.monthOffset=0;this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleKeyDown=o=>{let e=this.root;if(!e)return;let t;switch((0,p.directionalKey)(o.key,this)){case"ArrowLeft":t=(0,r.addDays)(e.focusedDate,-1);break;case"ArrowRight":t=(0,r.addDays)(e.focusedDate,1);break;case"ArrowUp":t=(0,r.addDays)(e.focusedDate,-7);break;case"ArrowDown":t=(0,r.addDays)(e.focusedDate,7);break;case"Home":t=(0,r.startOfWeek)(e.focusedDate,e.resolvedWeekStartsOn);break;case"End":t=(0,r.endOfWeek)(e.focusedDate,e.resolvedWeekStartsOn);break;case"PageUp":t=o.shiftKey?(0,r.addYears)(e.focusedDate,-1):(0,r.addMonths)(e.focusedDate,-1);break;case"PageDown":t=o.shiftKey?(0,r.addYears)(e.focusedDate,1):(0,r.addMonths)(e.focusedDate,1);break;default:return}o.preventDefault(),this.moveFocus(t)}}get gridMonth(){let o=this.root;if(o)return o.months[this.monthOffset]??o.month}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-calendar"),this.setAttribute("role","grid"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}willUpdate(){this.setAttribute("aria-multiselectable",String((this.root?.selectionMode??"single")!=="single"))}moveFocus(o){let e=this.root;e&&(e.months.some(t=>(0,r.isSameMonth)(o,t))||e.setMonth((0,r.startOfMonth)(o)),e.setFocusedDate(o),requestAnimationFrame(()=>{let t=(0,r.toISODateString)(o);e.querySelector(`[data-skdx-calendar-cell="${t}"]`)?.focus()}))}render(){return d.html`<slot></slot>`}};n.styles=d.css`
+    :host {
+      display: block;
+    }
+  `,h([(0,f.property)({type:Number,attribute:"month-offset"})],n.prototype,"monthOffset",2),n=h([(0,m.customElement)("skdx-calendar-grid","calendar","grid")],n);0&&(module.exports={SkdxCalendarGrid});

package/dist/calendar/CalendarGrid.d.cts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-calendar-grid>` — `role="grid"` container for a `<skdx-calendar>`'s
+ * date cells, owning arrow-key navigation of the roving-focus date: Arrow
+ * Left/Right/Up/Down move by day/week, Home/End jump to the start/end of the
+ * focused week, PageUp/PageDown move by month (Shift+PageUp/PageDown move by
+ * year). Navigating out of every displayed month updates the ancestor's
+ * `month` automatically.
+ *
+ * With a multi-month calendar (`number-of-months`), compose one grid per month
+ * and give each its `month-offset` — that is what tells the grid's cells which
+ * month counts as "outside".
+ */
+export declare class SkdxCalendarGrid extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Which of the `number-of-months` displayed months this grid renders, `0`
+     * being the first. Decides which dates its cells treat as outside-month.
+     * @default 0
+     */
+    monthOffset: number;
+    private root;
+    private readonly onUpdate;
+    /**
+     * The month this grid renders — the nested "grid month" its
+     * `<skdx-calendar-cell>` descendants read instead of the root's own `month`,
+     * so a two-month calendar's cells know which of the two they belong to.
+     */
+    get gridMonth(): Date | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(): void;
+    private moveFocus;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-calendar-grid': SkdxCalendarGrid;
+    }
+}

package/dist/calendar/CalendarGrid.d.ts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-calendar-grid>` — `role="grid"` container for a `<skdx-calendar>`'s
+ * date cells, owning arrow-key navigation of the roving-focus date: Arrow
+ * Left/Right/Up/Down move by day/week, Home/End jump to the start/end of the
+ * focused week, PageUp/PageDown move by month (Shift+PageUp/PageDown move by
+ * year). Navigating out of every displayed month updates the ancestor's
+ * `month` automatically.
+ *
+ * With a multi-month calendar (`number-of-months`), compose one grid per month
+ * and give each its `month-offset` — that is what tells the grid's cells which
+ * month counts as "outside".
+ */
+export declare class SkdxCalendarGrid extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Which of the `number-of-months` displayed months this grid renders, `0`
+     * being the first. Decides which dates its cells treat as outside-month.
+     * @default 0
+     */
+    monthOffset: number;
+    private root;
+    private readonly onUpdate;
+    /**
+     * The month this grid renders — the nested "grid month" its
+     * `<skdx-calendar-cell>` descendants read instead of the root's own `month`,
+     * so a two-month calendar's cells know which of the two they belong to.
+     */
+    get gridMonth(): Date | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(): void;
+    private moveFocus;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-calendar-grid': SkdxCalendarGrid;
+    }
+}

package/dist/calendar/CalendarGrid.js

@@ -0,0 +1,5 @@
+var u=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var c=(d,s,o,e)=>{for(var t=e>1?void 0:e?f(s,o):s,a=d.length-1,i;a>=0;a--)(i=d[a])&&(t=(e?i(s,o,t):i(t))||t);return e&&t&&u(s,o,t),t};import{css as m,html as p,LitElement as k}from"lit";import{property as v}from"lit/decorators.js";import{customElement as D}from"../internal/define.js";import{directionalKey as y}from"../internal/direction.js";import{addDays as n,addMonths as l,addYears as h,endOfWeek as b,isSameMonth as g,startOfMonth as w,startOfWeek as E,toISODateString as M}from"./Calendar.js";var r=class extends k{constructor(){super(...arguments);this.monthOffset=0;this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleKeyDown=o=>{let e=this.root;if(!e)return;let t;switch(y(o.key,this)){case"ArrowLeft":t=n(e.focusedDate,-1);break;case"ArrowRight":t=n(e.focusedDate,1);break;case"ArrowUp":t=n(e.focusedDate,-7);break;case"ArrowDown":t=n(e.focusedDate,7);break;case"Home":t=E(e.focusedDate,e.resolvedWeekStartsOn);break;case"End":t=b(e.focusedDate,e.resolvedWeekStartsOn);break;case"PageUp":t=o.shiftKey?h(e.focusedDate,-1):l(e.focusedDate,-1);break;case"PageDown":t=o.shiftKey?h(e.focusedDate,1):l(e.focusedDate,1);break;default:return}o.preventDefault(),this.moveFocus(t)}}get gridMonth(){let o=this.root;if(o)return o.months[this.monthOffset]??o.month}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-calendar"),this.setAttribute("role","grid"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}willUpdate(){this.setAttribute("aria-multiselectable",String((this.root?.selectionMode??"single")!=="single"))}moveFocus(o){let e=this.root;e&&(e.months.some(t=>g(o,t))||e.setMonth(w(o)),e.setFocusedDate(o),requestAnimationFrame(()=>{let t=M(o);e.querySelector(`[data-skdx-calendar-cell="${t}"]`)?.focus()}))}render(){return p`<slot></slot>`}};r.styles=m`
+    :host {
+      display: block;
+    }
+  `,c([v({type:Number,attribute:"month-offset"})],r.prototype,"monthOffset",2),r=c([D("skdx-calendar-grid","calendar","grid")],r);export{r as SkdxCalendarGrid};

package/dist/calendar/CalendarGridBody.cjs

@@ -0,0 +1,5 @@
+"use strict";var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var E=(o,t)=>{for(var r in t)s(o,r,{get:t[r],enumerable:!0})},y=(o,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of x(t))!b.call(o,e)&&e!==r&&s(o,e,{get:()=>t[e],enumerable:!(l=u(t,e))||l.enumerable});return o};var S=o=>y(s({},"__esModule",{value:!0}),o),f=(o,t,r,l)=>{for(var e=l>1?void 0:l?u(t,r):t,n=o.length-1,a;n>=0;n--)(a=o[n])&&(e=(l?a(t,r,e):a(e))||e);return l&&e&&s(t,r,e),e};var A={};E(A,{SkdxCalendarGridBody:()=>d});module.exports=S(A);var i=require("lit"),h=require("../internal/authored.cjs"),v=require("../internal/define.cjs"),p=require("./Calendar.cjs");var c="data-skdx-calendar-generated",d=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.fill();this.filledFor=""}connectedCallback(){super.connectedCallback(),this.setAttribute("role","rowgroup"),this.root=this.closest("skdx-calendar"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate),this.fill()}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),super.disconnectedCallback()}fill(){let r=this.root;if(!r)return;if((0,h.hasAuthoredContent)(this,c)){(0,h.removeGeneratedContent)(this,c),this.filledFor="";return}let e=this.closest("skdx-calendar-grid")?.gridMonth??r.month,n=r.resolvedWeekStartsOn,a=`${(0,p.toISODateString)(e)}/${n}`;a===this.filledFor&&this.children.length>0||(this.filledFor=a,this.replaceChildren(...(0,p.getVisibleWeeks)(e,n).map(g=>{let m=document.createElement("skdx-calendar-row");m.setAttribute(c,"");for(let C of g){let k=document.createElement("skdx-calendar-cell");k.setAttribute(c,""),k.date=C.date,m.append(k)}return m})))}render(){return i.html`<slot @slotchange=${this.onUpdate}></slot>`}};d.styles=i.css`
+    :host {
+      display: block;
+    }
+  `,d=f([(0,v.customElement)("skdx-calendar-grid-body","calendar","grid-body")],d);0&&(module.exports={SkdxCalendarGridBody});

package/dist/calendar/CalendarGridBody.d.cts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-calendar-grid-body>` — `role="rowgroup"` wrapper around a
+ * `<skdx-calendar>`'s week rows.
+ *
+ * **Given no children it renders the displayed month itself** — one
+ * `<skdx-calendar-row>` per visible week, one `<skdx-calendar-cell>` per day,
+ * taken from the live month. That matches React's `CalendarGridBody`, whose
+ * empty form is the composition a consumer writes first; before this, an empty
+ * body rendered an empty rowgroup and the calendar showed a heading and
+ * weekday names above no days at all.
+ *
+ * The generated rows live in the *light* DOM, not the shadow root, for the
+ * same reason `<skdx-transfer-list>` reconciles its items there: the cells must
+ * be reachable by the document stylesheet (`.skdx-calendar__cell` and its state
+ * rules) and by `<skdx-calendar-grid>`'s focus lookup, and neither can cross a
+ * shadow boundary.
+ *
+ * Slot children to take over completely — to decorate a day, group by week
+ * number, or render anything other than a plain cell. Author children always
+ * win; this only fills an empty body.
+ *
+ * `rowgroup` rather than a bare wrapper so `role="grid"` sees only
+ * `row`/`rowgroup` children — a role-less element between the grid and its rows
+ * is what axe reports as `aria-required-children`.
+ */
+export declare class SkdxCalendarGridBody extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private readonly onUpdate;
+    /** The month the generated rows currently show, so state-only updates (a selection, a focus move) do not rebuild them. */
+    private filledFor;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private fill;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-calendar-grid-body': SkdxCalendarGridBody;
+    }
+}

package/dist/calendar/CalendarGridBody.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-calendar-grid-body>` — `role="rowgroup"` wrapper around a
+ * `<skdx-calendar>`'s week rows.
+ *
+ * **Given no children it renders the displayed month itself** — one
+ * `<skdx-calendar-row>` per visible week, one `<skdx-calendar-cell>` per day,
+ * taken from the live month. That matches React's `CalendarGridBody`, whose
+ * empty form is the composition a consumer writes first; before this, an empty
+ * body rendered an empty rowgroup and the calendar showed a heading and
+ * weekday names above no days at all.
+ *
+ * The generated rows live in the *light* DOM, not the shadow root, for the
+ * same reason `<skdx-transfer-list>` reconciles its items there: the cells must
+ * be reachable by the document stylesheet (`.skdx-calendar__cell` and its state
+ * rules) and by `<skdx-calendar-grid>`'s focus lookup, and neither can cross a
+ * shadow boundary.
+ *
+ * Slot children to take over completely — to decorate a day, group by week
+ * number, or render anything other than a plain cell. Author children always
+ * win; this only fills an empty body.
+ *
+ * `rowgroup` rather than a bare wrapper so `role="grid"` sees only
+ * `row`/`rowgroup` children — a role-less element between the grid and its rows
+ * is what axe reports as `aria-required-children`.
+ */
+export declare class SkdxCalendarGridBody extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private readonly onUpdate;
+    /** The month the generated rows currently show, so state-only updates (a selection, a focus move) do not rebuild them. */
+    private filledFor;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private fill;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-calendar-grid-body': SkdxCalendarGridBody;
+    }
+}

package/dist/calendar/CalendarGridBody.js

@@ -0,0 +1,5 @@
+var k=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=(i,l,t,n)=>{for(var e=n>1?void 0:n?u(l,t):l,r=i.length-1,o;r>=0;r--)(o=i[r])&&(e=(n?o(l,t,e):o(e))||e);return n&&e&&k(l,t,e),e};import{css as f,html as v,LitElement as g}from"lit";import{hasAuthoredContent as C,removeGeneratedContent as x}from"../internal/authored.js";import{customElement as b}from"../internal/define.js";import{getVisibleWeeks as E,toISODateString as y}from"./Calendar.js";var d="data-skdx-calendar-generated",a=class extends g{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.fill();this.filledFor=""}connectedCallback(){super.connectedCallback(),this.setAttribute("role","rowgroup"),this.root=this.closest("skdx-calendar"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate),this.fill()}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),super.disconnectedCallback()}fill(){let t=this.root;if(!t)return;if(C(this,d)){x(this,d),this.filledFor="";return}let e=this.closest("skdx-calendar-grid")?.gridMonth??t.month,r=t.resolvedWeekStartsOn,o=`${y(e)}/${r}`;o===this.filledFor&&this.children.length>0||(this.filledFor=o,this.replaceChildren(...E(e,r).map(p=>{let s=document.createElement("skdx-calendar-row");s.setAttribute(d,"");for(let m of p){let c=document.createElement("skdx-calendar-cell");c.setAttribute(d,""),c.date=m.date,s.append(c)}return s})))}render(){return v`<slot @slotchange=${this.onUpdate}></slot>`}};a.styles=f`
+    :host {
+      display: block;
+    }
+  `,a=h([b("skdx-calendar-grid-body","calendar","grid-body")],a);export{a as SkdxCalendarGridBody};