@skdx/vue 0.26.0 → 0.28.0

package/dist/calendar/Calendar.vue.d.ts

@@ -1,19 +1,10 @@
-import { type CalendarSelectionMode, type CalendarValue } from './dateMath.js';
+import { type DateInput } from '../utils/dateValue.js';
+import { type CalendarPageBehavior, type CalendarSelectionMode, type CalendarValue, type CalendarValueInput, type CalendarView } from './dateMath.js';
 /**
- * The Vue implementation of the shared Calendar contract (see
- * `@skdx/shared`'s `calendarContract`). Month-grid date picker (WAI-ARIA
- * `grid` pattern), built on plain native `Date` math and `Intl` for names —
- * no date-library dependency. Renders a plain `<div>` — layout of the header
- * vs. grid is entirely up to your CSS.
- *
- * `selectionMode` decides what `value` holds: a `Date` (`'single'`, the
- * default), a `Date[]` (`'multiple'`), or a `{ start, end }` `DateRange`
- * (`'range'`, where `end` stays `null` until the second date closes it).
- * Month and weekday names come from `Intl` for `locale`, so nothing here
- * ships a hardcoded English name table.
- *
- * Works controlled (`v-model:value` / `v-model:month`) or uncontrolled
- * (`defaultValue` / `defaultMonth`).
+ * Month-grid date picker (WAI-ARIA grid) built on native `Date` math and
+ * `Intl` for names. Selects single date, multiple dates, or start/end range
+ * over consecutive months. Shape of `value` follows `selectionMode`.
+ * Controlled or uncontrolled (`v-model:value`/`month` or `defaultValue`/`defaultMonth`).
  */
 type __VLS_Props = {
     /**
@@ -21,48 +12,123 @@ type __VLS_Props = {
      * see `CalendarSelectionMode`.
      */
     selectionMode?: CalendarSelectionMode;
-    /** Current selection, for controlled usage. Pair with `v-model:value` or `@value-change`. Its shape follows `selectionMode`. */
-    value?: CalendarValue;
-    /** Initial selection, for uncontrolled usage. Defaults to `null` (`[]` for `multiple`). */
-    defaultValue?: CalendarValue;
-    /** Displayed month, for controlled usage. Pair with `v-model:month` or `@month-change`. */
-    month?: Date;
-    /** Initially displayed month, for uncontrolled usage. Defaults to the selection's month, or the current month. */
-    defaultMonth?: Date;
-    /** How many consecutive months to display, starting at `month` — render one `SkdxCalendarGrid` per month with a matching `monthOffset`. */
+    /**
+     * Current selection, for controlled usage. Pair with `v-model:value` or
+     * `@value-change`. Its shape follows `selectionMode`, and every `Date`
+     * position also accepts its ISO-8601 string — see `CalendarValueInput`.
+     */
+    value?: CalendarValueInput;
+    /** Initial selection, for uncontrolled usage, in the same forms `value` takes. Defaults to `null` (`[]` for `multiple`). */
+    defaultValue?: CalendarValueInput;
+    /** Displayed month, for controlled usage. Pair with `v-model:month` or `@month-change`. Takes a `Date` or an ISO string, including a bare `'2026-08'`. */
+    month?: DateInput;
+    /** Initially displayed month, for uncontrolled usage, in the same forms `month` takes. Defaults to the selection's month, or the current month. */
+    defaultMonth?: DateInput;
+    /**
+     * Roving tab stop date for controlled usage. Moves with arrow keys and
+     * selects nothing, distinct from `value`. Pair with `v-model:focusedDate`.
+     */
+    focusedDate?: DateInput;
+    /** Initially focused date, for uncontrolled usage, in the same forms `focusedDate` takes. Defaults to the selection's anchor date, else the displayed month. */
+    defaultFocusedDate?: DateInput;
+    /** Consecutive months to display. Render one grid per month with matching `monthOffset`. @default 1 */
     numberOfMonths?: number;
-    /** BCP 47 tag used to derive month and weekday names (via `Intl`) and, when `weekStartsOn` is omitted, the first day of the week. */
+    /** BCP 47 tag to derive month and weekday names via Intl, and default `weekStartsOn`. */
     locale?: string;
-    /** Earliest selectable date; earlier dates render disabled. */
-    minDate?: Date;
-    /** Latest selectable date; later dates render disabled. */
-    maxDate?: Date;
-    /** Day of week the grid's first column represents (`0` = Sunday … `6` = Saturday). Derived from `locale` when omitted. */
+    /** Earliest selectable date; earlier dates render disabled. Takes a `Date` or an ISO-8601 string. */
+    minDate?: DateInput;
+    /** Latest selectable date; later dates render disabled. Takes a `Date` or an ISO-8601 string. */
+    maxDate?: DateInput;
+    /** Day of week the grid's first column represents (0=Sunday…6=Saturday). @default derived from locale via Intl.Locale week info, falling back to 0 (Sunday) */
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    /** 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.
-     *
-     * 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
+    /**
+     * Label each week with its ISO-8601 number via rowheader and columnheader.
+     * ISO numbering runs from Monday independently of `weekStartsOn`.
+     * @default false
+     */
+    weekNumbers?: boolean;
+    /**
+     * Grid showing: day, month, or year view. Pair with `v-model:view`.
+     * Non-day grids navigate only: activating a month or year cell projects
+     * `focusedDate` onto that unit and steps the view down, leaving `value` untouched.
+     */
+    view?: CalendarView;
+    /**
+     * Grid shown first for uncontrolled usage, clamped to `minView`/`maxView`.
+     * @default 'day'
+     */
+    defaultView?: CalendarView;
+    /**
+     * Most granular view the calendar can step to. Raising it restricts
+     * navigation: with `'month'` the day grid is unreachable.
+     * @default 'day'
+     */
+    minView?: CalendarView;
+    /**
+     * Least granular view the calendar can step to and extent of the Heading
+     * button. Set to current view to make the heading a label only.
+     * @default 'year'
+     */
+    maxView?: CalendarView;
+    /**
+     * Allow selecting adjacent-month days. Enabled cells stay focusable,
+     * keep `data-outside-month` hook, and page the calendar on selection.
+     * @default false
+     */
+    outsideDaySelectable?: boolean;
+    /**
+     * Navigation step size: `'visible'` pages by the whole displayed span so
+     * pages never overlap, `'single'` always moves one month. Only observable
+     * with `numberOfMonths` above 1.
+     * @default 'visible'
+     */
+    pageBehavior?: CalendarPageBehavior;
+    /**
+     * The date treated as today: carries `data-today` and `aria-current="date"`,
+     * and opens uncontrolled calendars when no selection exists. Read once at
+     * setup. Pass it in server-rendered apps to prevent hydration mismatch when
+     * server and client are in different time zones.
+     * @default undefined — `new Date()`, read once at setup
+     */
+    today?: DateInput;
+    /**
+     * Non-editable: cells stay focusable, nothing changes the selection,
+     * `value-change` never fires, grid carries `aria-readonly="true"`.
+     * Distinct from per-date `isDateDisabled` and from `disabled`.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Disables the whole calendar: cells carry the native `disabled` attribute,
+     * grid leaves the tab order, carries `aria-disabled="true"`. Use
+     * `isDateDisabled` for per-date disabling.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Mark dates as disabled beyond `minDate`/`maxDate`. Disabled cells are
+     * not focusable or clickable.
+     */
+    isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Mark dates as unavailable. Unlike `isDateDisabled`, unavailable cells
+     * stay keyboard-reachable and are announced as `aria-disabled`, allowing
+     * screen-reader users to land on them and hear why.
+     */
+    isDateUnavailable?: (date: Date) => boolean;
+    /**
+     * Announce selection changes in `multiple` and `range` mode. Return empty
+     * string to announce nothing. This is the one string a `locale` cannot
      * translate on its own.
-     * @default undefined — the built-in English wording ("Range selected, 1 May to 8 May.").
+     * @default undefined — built-in English wording, e.g. "Range selected, 1 May to 8 May."
      */
     getSelectionAnnouncement?: (value: CalendarValue, locale: string | undefined) => string;
+    /**
+     * Announce navigation button paging. Return empty string to announce
+     * nothing. Paging replaces all cells and moves no focus a screen reader reports.
+     * @default undefined — `formatMonthLabel`, e.g. "février 2026"
+     */
+    getMonthAnnouncement?: (month: Date, locale: string | undefined) => string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -73,25 +139,46 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "value-change": (value: CalendarValue) => any;
     "update:month": (month: Date) => any;
     "month-change": (month: Date) => any;
+    "update:focusedDate": (date: Date) => any;
+    "focus-change": (date: Date) => any;
+    "update:view": (view: CalendarView) => any;
+    "view-change": (view: CalendarView) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:value"?: ((value: CalendarValue) => any) | undefined;
     "onValue-change"?: ((value: CalendarValue) => any) | undefined;
     "onUpdate:month"?: ((month: Date) => any) | undefined;
     "onMonth-change"?: ((month: Date) => any) | undefined;
+    "onUpdate:focusedDate"?: ((date: Date) => any) | undefined;
+    "onFocus-change"?: ((date: Date) => any) | undefined;
+    "onUpdate:view"?: ((view: CalendarView) => any) | undefined;
+    "onView-change"?: ((view: CalendarView) => any) | undefined;
 }>, {
-    disabled: (date: Date) => boolean;
-    value: CalendarValue;
-    month: Date;
-    defaultValue: CalendarValue;
+    view: CalendarView;
+    disabled: boolean;
+    value: CalendarValueInput;
+    readOnly: boolean;
+    month: DateInput;
+    defaultValue: CalendarValueInput;
     locale: string;
     selectionMode: CalendarSelectionMode;
-    defaultMonth: Date;
+    defaultMonth: DateInput;
+    focusedDate: DateInput;
+    defaultFocusedDate: DateInput;
     numberOfMonths: number;
-    minDate: Date;
-    maxDate: Date;
+    minDate: DateInput;
+    maxDate: DateInput;
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    isDateUnavailable: (isoDate: string) => boolean;
+    weekNumbers: boolean;
+    defaultView: CalendarView;
+    minView: CalendarView;
+    maxView: CalendarView;
+    outsideDaySelectable: boolean;
+    pageBehavior: CalendarPageBehavior;
+    today: DateInput;
+    isDateDisabled: (date: Date) => boolean;
+    isDateUnavailable: (date: Date) => boolean;
     getSelectionAnnouncement: (value: CalendarValue, locale: string | undefined) => string;
+    getMonthAnnouncement: (month: Date, locale: string | undefined) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/calendar/Calendar.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const O=require("../utils/liveAnnouncer.cjs"),S=require("./context.cjs"),s=require("./locale.cjs"),o=require("./dateMath.cjs");let t=require("vue");var q={class:"skdx-calendar","data-part":"root","data-skdx-component":"calendar"},y=(0,t.defineComponent)({__name:"Calendar",props:{selectionMode:{default:"single"},value:{default:void 0},defaultValue:{default:void 0},month:{default:void 0},defaultMonth:{default:void 0},numberOfMonths:{default:1},locale:{default:void 0},minDate:{default:void 0},maxDate:{default:void 0},weekStartsOn:{default:void 0},disabled:{type:Function,default:void 0},isDateUnavailable:{type:Function,default:void 0},getSelectionAnnouncement:{type:Function,default:void 0}},emits:["update:value","value-change","update:month","month-change"],setup(f,{emit:h}){const e=f,u=h,v=(0,t.ref)(e.defaultValue??o.emptySelection(e.selectionMode)),l=(0,t.computed)(()=>e.value!==void 0?e.value:v.value),m=(0,t.ref)(o.startOfMonth(e.defaultMonth??o.anchorOf(l.value)??new Date)),r=(0,t.computed)(()=>e.month!==void 0?e.month:m.value),p=(0,t.computed)(()=>Array.from({length:Math.max(1,e.numberOfMonths)},(n,a)=>o.addMonths(r.value,a))),d=(0,t.computed)(()=>e.weekStartsOn??s.getLocaleWeekStartsOn(e.locale)),g=(0,t.computed)(()=>{const n=s.getWeekDayNames(e.locale,d.value,"short"),a=s.getWeekDayNames(e.locale,d.value,"long");return n.map((c,k)=>({short:c,long:a[k]}))}),i=(0,t.ref)(o.anchorOf(l.value)??r.value);(0,t.watch)(l,n=>{e.selectionMode==="single"&&n instanceof Date&&(i.value=n)});function _(n){const a=o.nextSelection(e.selectionMode,l.value,n);e.value===void 0&&(v.value=a),u("update:value",a),u("value-change",a);const c=(e.getSelectionAnnouncement??o.selectionAnnouncement)(a,e.locale);c&&O.announce(c)}function D(n){const a=o.startOfMonth(n);e.month===void 0&&(m.value=a),u("update:month",a),u("month-change",a)}function M(n){i.value=n}return(0,t.provide)(S.CALENDAR_CONTEXT,{value:l,get selectionMode(){return e.selectionMode},month:r,months:p,focusedDate:i,get weekStartsOn(){return d.value},get locale(){return e.locale},weekDayNames:g,get minDate(){return e.minDate},get maxDate(){return e.maxDate},get disabled(){return e.disabled},get isDateUnavailable(){return e.isDateUnavailable},onValueChange:_,onMonthChange:D,setFocusedDate:M}),(n,a)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",q,[(0,t.renderSlot)(n.$slots,"default")]))}});exports.default=y;
+const V=require("../utils/liveAnnouncer.cjs"),u=require("../utils/dateValue.cjs"),I=require("./context.cjs"),h=require("./locale.cjs"),n=require("./dateMath.cjs"),z=require("./CalendarAnatomy.vue.cjs");let a=require("vue");var X=(0,a.defineComponent)({__name:"Calendar",props:{selectionMode:{default:"single"},value:{default:void 0},defaultValue:{default:void 0},month:{default:void 0},defaultMonth:{default:void 0},focusedDate:{default:void 0},defaultFocusedDate:{default:void 0},numberOfMonths:{default:1},locale:{default:void 0},minDate:{default:void 0},maxDate:{default:void 0},weekStartsOn:{default:void 0},weekNumbers:{type:Boolean,default:!1},view:{default:void 0},defaultView:{default:"day"},minView:{default:"day"},maxView:{default:"year"},outsideDaySelectable:{type:Boolean,default:!1},pageBehavior:{default:"visible"},today:{default:void 0},readOnly:{type:Boolean,default:!1},disabled:{type:Boolean,default:void 0},isDateDisabled:{type:Function,default:void 0},isDateUnavailable:{type:Function,default:void 0},getSelectionAnnouncement:{type:Function,default:void 0},getMonthAnnouncement:{type:Function,default:void 0}},emits:["update:value","value-change","update:month","month-change","update:focusedDate","focus-change","update:view","view-change"],setup(B,{emit:E}){const e=B,d=E,p=(0,a.computed)(()=>u.toCalendarValue(e.value,e.selectionMode,"value")),D=(0,a.computed)(()=>u.toDate(e.month,"month")??void 0),b=(0,a.computed)(()=>u.toDate(e.minDate,"minDate")??void 0),_=(0,a.computed)(()=>u.toDate(e.maxDate,"maxDate")??void 0),O=(0,a.ref)(u.toCalendarValue(e.defaultValue,e.selectionMode,"defaultValue")??n.emptySelection(e.selectionMode)),i=(0,a.computed)(()=>p.value!==void 0?p.value:O.value),R=new Date,x=(0,a.computed)(()=>u.toDate(e.today,"today")??R);(0,a.watch)(i,o=>n.warnInstantDate(n.anchorOf(o),"value"),{immediate:!0});const S=(0,a.ref)(n.startOfMonth(u.toDate(e.defaultMonth,"defaultMonth")??n.anchorOf(i.value)??x.value)),r=(0,a.computed)(()=>D.value!==void 0?D.value:S.value),g=(0,a.computed)(()=>Array.from({length:Math.max(1,e.numberOfMonths)},(o,t)=>n.addMonths(r.value,t))),w=(0,a.computed)(()=>e.weekStartsOn??h.getLocaleWeekStartsOn(e.locale)),L=(0,a.computed)(()=>{const o=h.getWeekDayNames(e.locale,w.value,"short"),t=h.getWeekDayNames(e.locale,w.value,"long");return o.map((l,m)=>({short:l,long:t[m]}))}),y=(0,a.computed)(()=>n.resolveCalendarDisabled(e.disabled,e.isDateDisabled)),M=(0,a.computed)(()=>u.toDate(e.focusedDate,"focusedDate")??void 0),k=(0,a.ref)(u.toDate(e.defaultFocusedDate,"defaultFocusedDate")??n.anchorOf(i.value)??r.value),v=(0,a.computed)(()=>M.value!==void 0?M.value:k.value);(0,a.watch)(i,o=>{e.selectionMode==="single"&&o instanceof Date&&c(o)}),(0,a.watch)(i,o=>{const t=n.anchorOf(o);t&&(g.value.some(l=>n.isSameMonth(t,l))||(c(t),f(t)))});function P(o){if(e.readOnly||y.value.disabled)return;const t=n.nextSelection(e.selectionMode,i.value,o);p.value===void 0&&(O.value=t),d("update:value",t),d("value-change",t);const l=(e.getSelectionAnnouncement??n.selectionAnnouncement)(t,e.locale);l&&V.announce(l)}function f(o){const t=n.startOfMonth(o);D.value===void 0&&(S.value=t),d("update:month",t),d("month-change",t)}const A=(0,a.ref)(null);function c(o){const t=n.clampToDateRange(o,b.value,_.value);n.isSameDay(t,v.value)||n.isSameDay(t,A.value)||(A.value=t,M.value===void 0&&(k.value=t),d("update:focusedDate",t),d("focus-change",t))}const q=(0,a.ref)(null),C=(0,a.ref)(e.defaultView),s=(0,a.computed)(()=>n.clampView(e.view??C.value,e.minView,e.maxView));function F(o){const t=n.clampView(o,e.minView,e.maxView);t!==s.value&&(e.view===void 0&&(C.value=t),d("update:view",t),d("view-change",t))}function T(o){c(o),g.value.some(t=>n.isSameMonth(o,t))||f(o),F(n.CALENDAR_VIEWS[n.CALENDAR_VIEWS.indexOf(s.value)-1]??"day")}function W(o){if(s.value!=="day"){const U=s.value==="month"?12:240,N=n.addMonths(v.value,o*U);c(N),V.announce(n.formatViewPageLabel(N,s.value,e.locale));return}const t=e.pageBehavior==="single"?1:Math.max(1,e.numberOfMonths),l=n.addMonths(r.value,o*t);f(l),c(n.clampToMonth(v.value,l));const m=(e.getMonthAnnouncement??h.formatMonthLabel)(n.startOfMonth(l),e.locale);m&&V.announce(m)}return(0,a.provide)(I.CALENDAR_CONTEXT,{value:i,get selectionMode(){return e.selectionMode},month:r,months:g,focusedDate:v,today:x,get weekStartsOn(){return w.value},get weekNumbers(){return e.weekNumbers},get locale(){return e.locale},weekDayNames:L,get minDate(){return b.value},get maxDate(){return _.value},get readOnly(){return e.readOnly},get disabled(){return y.value.disabled},get isDateDisabled(){return y.value.isDateDisabled},get outsideDaySelectable(){return e.outsideDaySelectable},get isDateUnavailable(){return e.isDateUnavailable},onValueChange:P,onMonthChange:f,pageMonths:W,setFocusedDate:c,get view(){return s.value},get minView(){return e.minView},get maxView(){return e.maxView},setView:F,navigateToUnit:T,rootRef:q}),(o,t)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{ref_key:"rootRef",ref:q,class:"skdx-calendar","data-part":"root","data-skdx-component":"calendar"},[(0,a.renderSlot)(o.$slots,"default",{},()=>[(0,a.createVNode)(z.default)])],512))}});exports.default=X;

package/dist/calendar/Calendar.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{announce as e}from"../utils/liveAnnouncer.js";import{CALENDAR_CONTEXT as a}from"./context.js";import{getLocaleWeekStartsOn as t,getWeekDayNames as n}from"./locale.js";import{addMonths as o,anchorOf as l,emptySelection as u,nextSelection as s,selectionAnnouncement as d,startOfMonth as i}from"./dateMath.js";import{computed as r,createElementBlock as c,defineComponent as v,openBlock as m,provide as f,ref as h,renderSlot as p,watch as g}from"vue";var D={class:"skdx-calendar","data-part":"root","data-skdx-component":"calendar"},M=/* @__PURE__ */v({__name:"Calendar",props:{selectionMode:{default:"single"},value:{default:void 0},defaultValue:{default:void 0},month:{default:void 0},defaultMonth:{default:void 0},numberOfMonths:{default:1},locale:{default:void 0},minDate:{default:void 0},maxDate:{default:void 0},weekStartsOn:{default:void 0},disabled:{type:Function,default:void 0},isDateUnavailable:{type:Function,default:void 0},getSelectionAnnouncement:{type:Function,default:void 0}},emits:["update:value","value-change","update:month","month-change"],setup(v,{emit:M}){const k=v,x=M,O=h(k.defaultValue??u(k.selectionMode)),S=r(()=>void 0!==k.value?k.value:O.value),b=h(i(k.defaultMonth??l(S.value)??/* @__PURE__ */new Date)),y=r(()=>void 0!==k.month?k.month:b.value),A=r(()=>Array.from({length:Math.max(1,k.numberOfMonths)},(e,a)=>o(y.value,a))),w=r(()=>k.weekStartsOn??t(k.locale)),C=r(()=>{const e=n(k.locale,w.value,"short"),a=n(k.locale,w.value,"long");return e.map((e,t)=>({short:e,long:a[t]}))}),j=h(l(S.value)??y.value);return g(S,e=>{"single"===k.selectionMode&&e instanceof Date&&(j.value=e)}),f(a,{value:S,get selectionMode(){return k.selectionMode},month:y,months:A,focusedDate:j,get weekStartsOn(){return w.value},get locale(){return k.locale},weekDayNames:C,get minDate(){return k.minDate},get maxDate(){return k.maxDate},get disabled(){return k.disabled},get isDateUnavailable(){return k.isDateUnavailable},onValueChange:function(a){const t=s(k.selectionMode,S.value,a);void 0===k.value&&(O.value=t),x("update:value",t),x("value-change",t);const n=(k.getSelectionAnnouncement??d)(t,k.locale);n&&e(n)},onMonthChange:function(e){const a=i(e);void 0===k.month&&(b.value=a),x("update:month",a),x("month-change",a)},setFocusedDate:function(e){j.value=e}}),(e,a)=>(m(),c("div",D,[p(e.$slots,"default")]))}});export{M as default};
+import{announce as e}from"../utils/liveAnnouncer.js";import{toCalendarValue as a,toDate as t}from"../utils/dateValue.js";import{CALENDAR_CONTEXT as o}from"./context.js";import{formatMonthLabel as l,getLocaleWeekStartsOn as n,getWeekDayNames as u}from"./locale.js";import{CALENDAR_VIEWS as d,addMonths as i,anchorOf as s,clampToDateRange as v,clampToMonth as r,clampView as c,emptySelection as m,formatViewPageLabel as f,isSameDay as h,isSameMonth as D,nextSelection as g,resolveCalendarDisabled as p,selectionAnnouncement as w,startOfMonth as y,warnInstantDate as M}from"./dateMath.js";import b from"./CalendarAnatomy.vue.js";import{computed as V,createElementBlock as x,createVNode as O,defineComponent as S,openBlock as k,provide as A,ref as C,renderSlot as N,watch as B}from"vue";var F=/* @__PURE__ */S({__name:"Calendar",props:{selectionMode:{default:"single"},value:{default:void 0},defaultValue:{default:void 0},month:{default:void 0},defaultMonth:{default:void 0},focusedDate:{default:void 0},defaultFocusedDate:{default:void 0},numberOfMonths:{default:1},locale:{default:void 0},minDate:{default:void 0},maxDate:{default:void 0},weekStartsOn:{default:void 0},weekNumbers:{type:Boolean,default:!1},view:{default:void 0},defaultView:{default:"day"},minView:{default:"day"},maxView:{default:"year"},outsideDaySelectable:{type:Boolean,default:!1},pageBehavior:{default:"visible"},today:{default:void 0},readOnly:{type:Boolean,default:!1},disabled:{type:Boolean,default:void 0},isDateDisabled:{type:Function,default:void 0},isDateUnavailable:{type:Function,default:void 0},getSelectionAnnouncement:{type:Function,default:void 0},getMonthAnnouncement:{type:Function,default:void 0}},emits:["update:value","value-change","update:month","month-change","update:focusedDate","focus-change","update:view","view-change"],setup(S,{emit:F}){const j=S,E=F,L=V(()=>a(j.value,j.selectionMode,"value")),R=V(()=>t(j.month,"month")??void 0),T=V(()=>t(j.minDate,"minDate")??void 0),_=V(()=>t(j.maxDate,"maxDate")??void 0),U=C(a(j.defaultValue,j.selectionMode,"defaultValue")??m(j.selectionMode)),W=V(()=>void 0!==L.value?L.value:U.value),I=/* @__PURE__ */new Date,P=V(()=>t(j.today,"today")??I);B(W,e=>M(s(e),"value"),{immediate:!0});const X=C(y(t(j.defaultMonth,"defaultMonth")??s(W.value)??P.value)),$=V(()=>void 0!==R.value?R.value:X.value),q=V(()=>Array.from({length:Math.max(1,j.numberOfMonths)},(e,a)=>i($.value,a))),z=V(()=>j.weekStartsOn??n(j.locale)),G=V(()=>{const e=u(j.locale,z.value,"short"),a=u(j.locale,z.value,"long");return e.map((e,t)=>({short:e,long:a[t]}))}),H=V(()=>p(j.disabled,j.isDateDisabled)),J=V(()=>t(j.focusedDate,"focusedDate")??void 0),K=C(t(j.defaultFocusedDate,"defaultFocusedDate")??s(W.value)??$.value),Q=V(()=>void 0!==J.value?J.value:K.value);function Y(e){const a=y(e);void 0===R.value&&(X.value=a),E("update:month",a),E("month-change",a)}B(W,e=>{"single"===j.selectionMode&&e instanceof Date&&ee(e)}),B(W,e=>{const a=s(e);a&&(q.value.some(e=>D(a,e))||(ee(a),Y(a)))});const Z=C(null);function ee(e){const a=v(e,T.value,_.value);h(a,Q.value)||h(a,Z.value)||(Z.value=a,void 0===J.value&&(K.value=a),E("update:focusedDate",a),E("focus-change",a))}const ae=C(null),te=C(j.defaultView),oe=V(()=>c(j.view??te.value,j.minView,j.maxView));function le(e){const a=c(e,j.minView,j.maxView);a!==oe.value&&(void 0===j.view&&(te.value=a),E("update:view",a),E("view-change",a))}return A(o,{value:W,get selectionMode(){return j.selectionMode},month:$,months:q,focusedDate:Q,today:P,get weekStartsOn(){return z.value},get weekNumbers(){return j.weekNumbers},get locale(){return j.locale},weekDayNames:G,get minDate(){return T.value},get maxDate(){return _.value},get readOnly(){return j.readOnly},get disabled(){return H.value.disabled},get isDateDisabled(){return H.value.isDateDisabled},get outsideDaySelectable(){return j.outsideDaySelectable},get isDateUnavailable(){return j.isDateUnavailable},onValueChange:function(a){if(j.readOnly||H.value.disabled)return;const t=g(j.selectionMode,W.value,a);void 0===L.value&&(U.value=t),E("update:value",t),E("value-change",t);const o=(j.getSelectionAnnouncement??w)(t,j.locale);o&&e(o)},onMonthChange:Y,pageMonths:function(a){if("day"!==oe.value){const t="month"===oe.value?12:240,o=i(Q.value,a*t);return ee(o),void e(f(o,oe.value,j.locale))}const t="single"===j.pageBehavior?1:Math.max(1,j.numberOfMonths),o=i($.value,a*t);Y(o),ee(r(Q.value,o));const n=(j.getMonthAnnouncement??l)(y(o),j.locale);n&&e(n)},setFocusedDate:ee,get view(){return oe.value},get minView(){return j.minView},get maxView(){return j.maxView},setView:le,navigateToUnit:function(e){ee(e),q.value.some(a=>D(e,a))||Y(e),le(d[d.indexOf(oe.value)-1]??"day")},rootRef:ae}),(e,a)=>(k(),x("div",{ref_key:"rootRef",ref:ae,class:"skdx-calendar","data-part":"root","data-skdx-component":"calendar"},[N(e.$slots,"default",{},()=>[O(b)])],512))}});export{F as default};

package/dist/calendar/CalendarAnatomy.vue.cjs

@@ -0,0 +1 @@
+const e=require("./CalendarAnatomy.vue_vue_type_script_setup_true_lang.cjs");var a=e.default;exports.default=a;

package/dist/calendar/CalendarAnatomy.vue.d.cts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/calendar/CalendarAnatomy.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/calendar/CalendarAnatomy.vue.js

@@ -0,0 +1 @@
+import e from"./CalendarAnatomy.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/calendar/CalendarAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const d=require("./context.cjs"),i=require("./CalendarGrid.vue.cjs"),c=require("./CalendarGridBody.vue.cjs"),s=require("./CalendarGridHead.vue.cjs"),m=require("./CalendarHeader.vue.cjs"),l=require("./CalendarHeading.vue.cjs"),f=require("./CalendarMonthGrid.vue.cjs"),_=require("./CalendarNextButton.vue.cjs"),C=require("./CalendarPreviousButton.vue.cjs"),k=require("./CalendarYearGrid.vue.cjs");let e=require("vue");var h=(0,e.defineComponent)({__name:"CalendarAnatomy",setup(q){const r=(0,e.inject)(d.CALENDAR_CONTEXT);if(!r)throw new Error("<SkdxCalendarAnatomy> must be used inside <SkdxCalendar>.");const n=(0,e.computed)(()=>r.months.value),o=(0,e.computed)(()=>n.value.length>1);return(p,t)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(m.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(C.default,null,{default:(0,e.withCtx)(()=>[...t[0]||(t[0]=[(0,e.createElementVNode)("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false"},[(0,e.createElementVNode)("path",{d:"M10 3 5 8l5 5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])]),_:1}),o.value?(0,e.createCommentVNode)("",!0):((0,e.openBlock)(),(0,e.createBlock)(l.default,{key:0})),(0,e.createVNode)(_.default,null,{default:(0,e.withCtx)(()=>[...t[1]||(t[1]=[(0,e.createElementVNode)("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false"},[(0,e.createElementVNode)("path",{d:"M6 3l5 5-5 5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])]),_:1})]),_:1}),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(n.value,(u,a)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:u.toISOString()},[o.value?((0,e.openBlock)(),(0,e.createBlock)(l.default,{key:0,"month-offset":a},null,8,["month-offset"])):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(i.default,{"month-offset":a},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(s.default),(0,e.createVNode)(c.default)]),_:1},8,["month-offset"])],64))),128)),(0,e.createVNode)(f.default),(0,e.createVNode)(k.default)],64))}});exports.default=h;

package/dist/calendar/CalendarAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{CALENDAR_CONTEXT as e}from"./context.js";import r from"./CalendarGrid.vue.js";import o from"./CalendarGridBody.vue.js";import t from"./CalendarGridHead.vue.js";import a from"./CalendarHeader.vue.js";import n from"./CalendarHeading.vue.js";import l from"./CalendarMonthGrid.vue.js";import s from"./CalendarNextButton.vue.js";import d from"./CalendarPreviousButton.vue.js";import i from"./CalendarYearGrid.vue.js";import{Fragment as u,computed as m,createBlock as f,createCommentVNode as h,createElementBlock as v,createElementVNode as p,createVNode as c,defineComponent as C,inject as k,openBlock as j,renderList as w,withCtx as g}from"vue";var x=/* @__PURE__ */C({__name:"CalendarAnatomy",setup(C){const x=k(e);if(!x)throw new Error("<SkdxCalendarAnatomy> must be used inside <SkdxCalendar>.");const B=m(()=>x.months.value),_=m(()=>B.value.length>1);return(e,m)=>(j(),v(u,null,[c(a,null,{default:g(()=>[c(d,null,{default:g(()=>[...m[0]||(m[0]=[p("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false"},[p("path",{d:"M10 3 5 8l5 5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])]),_:1}),_.value?h("",!0):(j(),f(n,{key:0})),c(s,null,{default:g(()=>[...m[1]||(m[1]=[p("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false"},[p("path",{d:"M6 3l5 5-5 5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])]),_:1})]),_:1}),(j(!0),v(u,null,w(B.value,(e,a)=>(j(),v(u,{key:e.toISOString()},[_.value?(j(),f(n,{key:0,"month-offset":a},null,8,["month-offset"])):h("",!0),c(r,{"month-offset":a},{default:g(()=>[c(t),c(o)]),_:1},8,["month-offset"])],64))),128)),c(l),c(i)],64))}});export{x as default};

package/dist/calendar/CalendarCell.vue.d.cts

@@ -1,26 +1,17 @@
+import { type DateInput } from '../utils/dateValue.cjs';
 /**
- * Single selectable `role="gridcell"` date within a `SkdxCalendar`. Renders a
- * `<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). Clicking selects the date. Defaults to the day-of-month number
- * as its content.
- *
- * 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 displayed 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 are ignored.
+ * Single selectable `role="gridcell"` date. Renders `<button>` with aria-selected,
+ * roving tabindex, data-state/aria-current/data-today. In range mode, cells in range
+ * carry data-range-start/middle/end for styling. **Disabled** dates (outside min/max/month,
+ * matching isDateDisabled) are natively disabled. **Unavailable** (matching isDateUnavailable)
+ * stay focusable with aria-disabled, so screen readers announce as taken; clicks ignored.
  */
 type __VLS_Props = {
-    /** The date value this calendar grid cell represents and selects when activated. */
-    date: Date;
+    /**
+     * The date value this calendar grid cell represents and selects when
+     * activated. Takes a `Date` or an ISO-8601 `YYYY-MM-DD` string.
+     */
+    date: DateInput;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/calendar/CalendarCell.vue.d.ts

@@ -1,26 +1,17 @@
+import { type DateInput } from '../utils/dateValue.js';
 /**
- * Single selectable `role="gridcell"` date within a `SkdxCalendar`. Renders a
- * `<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). Clicking selects the date. Defaults to the day-of-month number
- * as its content.
- *
- * 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 displayed 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 are ignored.
+ * Single selectable `role="gridcell"` date. Renders `<button>` with aria-selected,
+ * roving tabindex, data-state/aria-current/data-today. In range mode, cells in range
+ * carry data-range-start/middle/end for styling. **Disabled** dates (outside min/max/month,
+ * matching isDateDisabled) are natively disabled. **Unavailable** (matching isDateUnavailable)
+ * stay focusable with aria-disabled, so screen readers announce as taken; clicks ignored.
  */
 type __VLS_Props = {
-    /** The date value this calendar grid cell represents and selects when activated. */
-    date: Date;
+    /**
+     * The date value this calendar grid cell represents and selects when
+     * activated. Takes a `Date` or an ISO-8601 `YYYY-MM-DD` string.
+     */
+    date: DateInput;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/calendar/CalendarCell.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const v=require("./context.cjs"),d=require("./dateMath.cjs");let e=require("vue");var C=["aria-selected","aria-disabled","data-skdx-calendar-cell","data-state","data-today","data-outside-month","data-disabled","data-unavailable","data-range-start","data-range-middle","data-range-end","tabindex","disabled"],h=(0,e.defineComponent)({__name:"CalendarCell",props:{date:{}},setup(o){const t=o,s=(0,e.inject)(v.CALENDAR_CONTEXT);if(!s)throw new Error("SkdxCalendarCell must be used within SkdxCalendar");const a=s,m=(0,e.inject)(v.CALENDAR_GRID_CONTEXT,null),p=(0,e.computed)(()=>m?.gridMonth.value??a.month.value),u=(0,e.computed)(()=>d.toISODateString(t.date)),r=(0,e.computed)(()=>!d.isSameMonth(t.date,p.value)),l=(0,e.computed)(()=>r.value||d.isDateDisabled(t.date,a.minDate,a.maxDate,a.disabled)),n=(0,e.computed)(()=>!l.value&&(a.isDateUnavailable?.(u.value)??!1)),c=(0,e.computed)(()=>d.isDateSelected(a.value.value,t.date)),i=(0,e.computed)(()=>d.isDateRange(a.value.value)?d.rangePositionOf(a.value.value,t.date):void 0),D=(0,e.computed)(()=>d.isSameDay(t.date,new Date)),b=(0,e.computed)(()=>d.isSameDay(t.date,a.focusedDate.value));function g(){if(!l.value){if(n.value){a.setFocusedDate(t.date);return}a.onValueChange(t.date),a.setFocusedDate(t.date)}}return(_,x)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-calendar__cell","data-part":"cell",type:"button",role:"gridcell","aria-selected":c.value,"aria-disabled":n.value?"true":void 0,"data-skdx-calendar-cell":u.value,"data-state":c.value?"selected":void 0,"data-today":D.value?"":void 0,"data-outside-month":r.value?"":void 0,"data-disabled":l.value?"":void 0,"data-unavailable":n.value?"":void 0,"data-range-start":i.value==="start"?"":void 0,"data-range-middle":i.value==="middle"?"":void 0,"data-range-end":i.value==="end"?"":void 0,tabindex:b.value?0:-1,disabled:l.value,onClick:g},[(0,e.renderSlot)(_.$slots,"default",{},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(o.date.getDate()),1)])],8,C))}});exports.default=h;
+const f=require("../utils/dateValue.cjs"),m=require("./context.cjs"),S=require("./locale.cjs"),l=require("./dateMath.cjs");let e=require("vue");var x=["aria-selected","aria-disabled","aria-current","aria-label","data-skdx-calendar-cell","data-state","data-today","data-outside-month","data-disabled","data-unavailable","data-range-start","data-range-middle","data-range-end","tabindex","disabled"],y=(0,e.defineComponent)({__name:"CalendarCell",props:{date:{}},setup(b){const p=b,s=(0,e.inject)(m.CALENDAR_CONTEXT);if(!s)throw new Error("SkdxCalendarCell must be used within SkdxCalendar");const a=s,D=(0,e.inject)(m.CALENDAR_GRID_CONTEXT,null),r=(0,e.computed)(()=>D?.gridMonth.value??a.month.value),t=(0,e.computed)(()=>f.toDate(p.date,"date")??r.value),_=(0,e.computed)(()=>l.toISODateString(t.value)),u=(0,e.computed)(()=>!l.isSameMonth(t.value,r.value)),d=(0,e.computed)(()=>a.disabled||u.value&&!a.outsideDaySelectable||l.isDateDisabled(t.value,a.minDate,a.maxDate,a.isDateDisabled)),o=(0,e.computed)(()=>!d.value&&(a.isDateUnavailable?.(t.value)??!1)),c=(0,e.computed)(()=>l.isDateSelected(a.value.value,t.value)),i=(0,e.computed)(()=>l.isDateRange(a.value.value)?l.rangePositionOf(a.value.value,t.value):void 0),v=(0,e.computed)(()=>l.isSameDay(t.value,a.today.value)),g=(0,e.computed)(()=>S.formatDateLabel(t.value,a.locale)),h=(0,e.computed)(()=>l.isSameDay(t.value,a.focusedDate.value));function C(){if(!d.value){if(o.value){a.setFocusedDate(t.value);return}a.onValueChange(t.value),a.setFocusedDate(t.value),u.value&&!a.months.value.some(n=>l.isSameMonth(t.value,n))&&a.onMonthChange(t.value)}}return(n,k)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-calendar__cell","data-part":"cell",type:"button",role:"gridcell","aria-selected":c.value,"aria-disabled":o.value?"true":void 0,"aria-current":v.value?"date":void 0,"aria-label":g.value,"data-skdx-calendar-cell":_.value,"data-state":c.value?"selected":void 0,"data-today":v.value?"":void 0,"data-outside-month":u.value?"":void 0,"data-disabled":d.value?"":void 0,"data-unavailable":o.value?"":void 0,"data-range-start":i.value==="start"?"":void 0,"data-range-middle":i.value==="middle"?"":void 0,"data-range-end":i.value==="end"?"":void 0,tabindex:h.value?0:-1,disabled:d.value,onClick:C},[(0,e.renderSlot)(n.$slots,"default",{},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.value.getDate()),1)])],8,x))}});exports.default=y;

package/dist/calendar/CalendarCell.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{CALENDAR_CONTEXT as a,CALENDAR_GRID_CONTEXT as e}from"./context.js";import{isDateDisabled as t,isDateRange as d,isDateSelected as l,isSameDay as s,isSameMonth as i,rangePositionOf as n,toISODateString as o}from"./dateMath.js";import{computed as u,createElementBlock as r,createTextVNode as v,defineComponent as c,inject as m,openBlock as D,renderSlot as b,toDisplayString as g}from"vue";var p=["aria-selected","aria-disabled","data-skdx-calendar-cell","data-state","data-today","data-outside-month","data-disabled","data-unavailable","data-range-start","data-range-middle","data-range-end","tabindex","disabled"],f=/* @__PURE__ */c({__name:"CalendarCell",props:{date:{}},setup(c){const f=c,C=m(a);if(!C)throw new Error("SkdxCalendarCell must be used within SkdxCalendar");const x=C,h=m(e,null),S=u(()=>h?.gridMonth.value??x.month.value),k=u(()=>o(f.date)),_=u(()=>!i(f.date,S.value)),E=u(()=>_.value||t(f.date,x.minDate,x.maxDate,x.disabled)),y=u(()=>!E.value&&(x.isDateUnavailable?.(k.value)??!1)),N=u(()=>l(x.value.value,f.date)),T=u(()=>d(x.value.value)?n(x.value.value,f.date):void 0),w=u(()=>s(f.date,/* @__PURE__ */new Date)),A=u(()=>s(f.date,x.focusedDate.value));function O(){if(!E.value){if(y.value)return void x.setFocusedDate(f.date);x.onValueChange(f.date),x.setFocusedDate(f.date)}}return(a,e)=>(D(),r("button",{class:"skdx-calendar__cell","data-part":"cell",type:"button",role:"gridcell","aria-selected":N.value,"aria-disabled":y.value?"true":void 0,"data-skdx-calendar-cell":k.value,"data-state":N.value?"selected":void 0,"data-today":w.value?"":void 0,"data-outside-month":_.value?"":void 0,"data-disabled":E.value?"":void 0,"data-unavailable":y.value?"":void 0,"data-range-start":"start"===T.value?"":void 0,"data-range-middle":"middle"===T.value?"":void 0,"data-range-end":"end"===T.value?"":void 0,tabindex:A.value?0:-1,disabled:E.value,onClick:O},[b(a.$slots,"default",{},()=>[v(g(c.date.getDate()),1)])],8,p))}});export{f as default};
+import{toDate as a}from"../utils/dateValue.js";import{CALENDAR_CONTEXT as e,CALENDAR_GRID_CONTEXT as t}from"./context.js";import{formatDateLabel as l}from"./locale.js";import{isDateDisabled as d,isDateRange as u,isDateSelected as s,isSameDay as i,isSameMonth as o,rangePositionOf as v,toISODateString as r}from"./dateMath.js";import{computed as n,createElementBlock as c,createTextVNode as m,defineComponent as D,inject as b,openBlock as f,renderSlot as g,toDisplayString as p}from"vue";var C=["aria-selected","aria-disabled","aria-current","aria-label","data-skdx-calendar-cell","data-state","data-today","data-outside-month","data-disabled","data-unavailable","data-range-start","data-range-middle","data-range-end","tabindex","disabled"],h=/* @__PURE__ */D({__name:"CalendarCell",props:{date:{}},setup(D){const h=D,x=b(e);if(!x)throw new Error("SkdxCalendarCell must be used within SkdxCalendar");const S=x,k=b(t,null),y=n(()=>k?.gridMonth.value??S.month.value),_=n(()=>a(h.date,"date")??y.value),E=n(()=>r(_.value)),j=n(()=>!o(_.value,y.value)),N=n(()=>S.disabled||j.value&&!S.outsideDaySelectable||d(_.value,S.minDate,S.maxDate,S.isDateDisabled)),T=n(()=>!N.value&&(S.isDateUnavailable?.(_.value)??!1)),A=n(()=>s(S.value.value,_.value)),M=n(()=>u(S.value.value)?v(S.value.value,_.value):void 0),O=n(()=>i(_.value,S.today.value)),R=n(()=>l(_.value,S.locale)),w=n(()=>i(_.value,S.focusedDate.value));function L(){if(!N.value){if(T.value)return void S.setFocusedDate(_.value);S.onValueChange(_.value),S.setFocusedDate(_.value),j.value&&!S.months.value.some(a=>o(_.value,a))&&S.onMonthChange(_.value)}}return(a,e)=>(f(),c("button",{class:"skdx-calendar__cell","data-part":"cell",type:"button",role:"gridcell","aria-selected":A.value,"aria-disabled":T.value?"true":void 0,"aria-current":O.value?"date":void 0,"aria-label":R.value,"data-skdx-calendar-cell":E.value,"data-state":A.value?"selected":void 0,"data-today":O.value?"":void 0,"data-outside-month":j.value?"":void 0,"data-disabled":N.value?"":void 0,"data-unavailable":T.value?"":void 0,"data-range-start":"start"===M.value?"":void 0,"data-range-middle":"middle"===M.value?"":void 0,"data-range-end":"end"===M.value?"":void 0,tabindex:w.value?0:-1,disabled:N.value,onClick:L},[g(a.$slots,"default",{},()=>[m(p(_.value.getDate()),1)])],8,C))}});export{h as default};

package/dist/calendar/CalendarGrid.vue.d.cts

@@ -1,16 +1,9 @@
 /**
- * `role="grid"` container for a `SkdxCalendar`'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 calls `onMonthChange` automatically.
- *
- * With a multi-month `SkdxCalendar` (`numberOfMonths`), render one grid per
- * month and give each its `monthOffset` — that is what tells the grid's cells
- * which month counts as "outside".
+ * Date grid with arrow-key navigation (day/week/month/year steps). Renders at
+ * view='day'. Multi-month: one grid per month with monthOffset.
  */
 type __VLS_Props = {
-    /** Which of the displayed months this grid renders, `0` being the first — only meaningful when the `SkdxCalendar` sets `numberOfMonths` above 1. */
+    /** Which displayed month this grid renders; `0` = first. */
     monthOffset?: number;
 };
 declare var __VLS_1: {};

package/dist/calendar/CalendarGrid.vue.d.ts

@@ -1,16 +1,9 @@
 /**
- * `role="grid"` container for a `SkdxCalendar`'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 calls `onMonthChange` automatically.
- *
- * With a multi-month `SkdxCalendar` (`numberOfMonths`), render one grid per
- * month and give each its `monthOffset` — that is what tells the grid's cells
- * which month counts as "outside".
+ * Date grid with arrow-key navigation (day/week/month/year steps). Renders at
+ * view='day'. Multi-month: one grid per month with monthOffset.
  */
 type __VLS_Props = {
-    /** Which of the displayed months this grid renders, `0` being the first — only meaningful when the `SkdxCalendar` sets `numberOfMonths` above 1. */
+    /** Which displayed month this grid renders; `0` = first. */
     monthOffset?: number;
 };
 declare var __VLS_1: {};

package/dist/calendar/CalendarGrid.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const n=require("../utils/direction.cjs"),u=require("./context.cjs"),a=require("./dateMath.cjs");let o=require("vue");var h=["aria-multiselectable"],_=(0,o.defineComponent)({__name:"CalendarGrid",props:{monthOffset:{default:0}},setup(c){const i=c,d=(0,o.inject)(u.CALENDAR_CONTEXT);if(!d)throw new Error("SkdxCalendarGrid must be used within SkdxCalendar");const e=d;(0,o.provide)(u.CALENDAR_GRID_CONTEXT,{gridMonth:(0,o.computed)(()=>e.months.value[i.monthOffset]??e.month.value)});const l=n.useDirection();function f(t){e.months.value.some(s=>a.isSameMonth(t,s))||e.onMonthChange(a.startOfMonth(t)),e.setFocusedDate(t),requestAnimationFrame(()=>{const s=a.toISODateString(t);document.querySelector(`[data-skdx-calendar-cell="${s}"]`)?.focus()})}function D(t){const s=n.directionalKey(t.key,t.currentTarget,l());let r;switch(s){case"ArrowLeft":r=a.addDays(e.focusedDate.value,-1);break;case"ArrowRight":r=a.addDays(e.focusedDate.value,1);break;case"ArrowUp":r=a.addDays(e.focusedDate.value,-7);break;case"ArrowDown":r=a.addDays(e.focusedDate.value,7);break;case"Home":r=a.startOfWeek(e.focusedDate.value,e.weekStartsOn);break;case"End":r=a.endOfWeek(e.focusedDate.value,e.weekStartsOn);break;case"PageUp":r=t.shiftKey?a.addYears(e.focusedDate.value,-1):a.addMonths(e.focusedDate.value,-1);break;case"PageDown":r=t.shiftKey?a.addYears(e.focusedDate.value,1):a.addMonths(e.focusedDate.value,1);break;default:return}t.preventDefault(),f(r)}return(t,s)=>((0,o.openBlock)(),(0,o.createElementBlock)("div",{class:"skdx-calendar__grid","data-part":"grid",role:"grid","aria-multiselectable":(0,o.unref)(e).selectionMode!=="single"?"true":"false",onKeydown:D},[(0,o.renderSlot)(t.$slots,"default")],40,h))}});exports.default=_;
+const u=require("../utils/direction.cjs"),l=require("./context.cjs"),h=require("./locale.cjs"),a=require("./dateMath.cjs");let r=require("vue");var _=["aria-label","aria-multiselectable","aria-readonly","aria-disabled"],k=(0,r.defineComponent)({__name:"CalendarGrid",props:{monthOffset:{default:0}},setup(c){const i=c,n=(0,r.inject)(l.CALENDAR_CONTEXT);if(!n)throw new Error("SkdxCalendarGrid must be used within SkdxCalendar");const e=n,s=(0,r.computed)(()=>e.months.value[i.monthOffset]??e.month.value);(0,r.provide)(l.CALENDAR_GRID_CONTEXT,{gridMonth:s});const f=(0,r.computed)(()=>h.formatMonthLabel(s.value,e.locale)),m=u.useDirection();function D(o){const d=a.clampToDateRange(o,e.minDate,e.maxDate);e.months.value.some(t=>a.isSameMonth(d,t))||e.onMonthChange(a.startOfMonth(d)),e.setFocusedDate(d),requestAnimationFrame(()=>{const t=a.toISODateString(d);(e.rootRef.value??document).querySelector(`[data-skdx-calendar-cell="${t}"]:not([disabled])`)?.focus()})}function v(o){const d=u.directionalKey(o.key,o.currentTarget,m());let t;switch(d){case"ArrowLeft":t=a.addDays(e.focusedDate.value,-1);break;case"ArrowRight":t=a.addDays(e.focusedDate.value,1);break;case"ArrowUp":t=a.addDays(e.focusedDate.value,-7);break;case"ArrowDown":t=a.addDays(e.focusedDate.value,7);break;case"Home":t=a.startOfWeek(e.focusedDate.value,e.weekStartsOn);break;case"End":t=a.endOfWeek(e.focusedDate.value,e.weekStartsOn);break;case"PageUp":t=o.shiftKey?a.addYears(e.focusedDate.value,-1):a.addMonths(e.focusedDate.value,-1);break;case"PageDown":t=o.shiftKey?a.addYears(e.focusedDate.value,1):a.addMonths(e.focusedDate.value,1);break;default:return}o.preventDefault(),D(t)}return(o,d)=>(0,r.unref)(e).view==="day"?((0,r.openBlock)(),(0,r.createElementBlock)("div",{key:0,class:"skdx-calendar__grid","data-part":"grid",role:"grid","aria-label":f.value,"aria-multiselectable":(0,r.unref)(e).selectionMode!=="single"?"true":"false","aria-readonly":(0,r.unref)(e).readOnly?"true":void 0,"aria-disabled":(0,r.unref)(e).disabled?"true":void 0,onKeydown:v},[(0,r.renderSlot)(o.$slots,"default")],40,_)):(0,r.createCommentVNode)("",!0)}});exports.default=k;

package/dist/calendar/CalendarGrid.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{directionalKey as e,useDirection as a}from"../utils/direction.js";import{CALENDAR_CONTEXT as t,CALENDAR_GRID_CONTEXT as s}from"./context.js";import{addDays as r,addMonths as o,addYears as n,endOfWeek as d,isSameMonth as u,startOfMonth as c,startOfWeek as l,toISODateString as i}from"./dateMath.js";import{computed as f,createElementBlock as m,defineComponent as D,inject as k,openBlock as h,provide as v,renderSlot as p,unref as w}from"vue";var b=["aria-multiselectable"],g=/* @__PURE__ */D({__name:"CalendarGrid",props:{monthOffset:{default:0}},setup(D){const g=D,O=k(t);if(!O)throw new Error("SkdxCalendarGrid must be used within SkdxCalendar");const A=O;v(s,{gridMonth:f(()=>A.months.value[g.monthOffset]??A.month.value)});const C=a();function S(a){let t;switch(e(a.key,a.currentTarget,C())){case"ArrowLeft":t=r(A.focusedDate.value,-1);break;case"ArrowRight":t=r(A.focusedDate.value,1);break;case"ArrowUp":t=r(A.focusedDate.value,-7);break;case"ArrowDown":t=r(A.focusedDate.value,7);break;case"Home":t=l(A.focusedDate.value,A.weekStartsOn);break;case"End":t=d(A.focusedDate.value,A.weekStartsOn);break;case"PageUp":t=a.shiftKey?n(A.focusedDate.value,-1):o(A.focusedDate.value,-1);break;case"PageDown":t=a.shiftKey?n(A.focusedDate.value,1):o(A.focusedDate.value,1);break;default:return}a.preventDefault(),function(e){A.months.value.some(a=>u(e,a))||A.onMonthChange(c(e)),A.setFocusedDate(e),requestAnimationFrame(()=>{const a=i(e);document.querySelector(`[data-skdx-calendar-cell="${a}"]`)?.focus()})}(t)}return(e,a)=>(h(),m("div",{class:"skdx-calendar__grid","data-part":"grid",role:"grid","aria-multiselectable":"single"!==w(A).selectionMode?"true":"false",onKeydown:S},[p(e.$slots,"default")],40,b))}});export{g as default};
+import{directionalKey as e,useDirection as a}from"../utils/direction.js";import{CALENDAR_CONTEXT as t,CALENDAR_GRID_CONTEXT as s}from"./context.js";import{formatMonthLabel as r}from"./locale.js";import{addDays as o,addMonths as d,addYears as n,clampToDateRange as l,endOfWeek as i,isSameMonth as u,startOfMonth as c,startOfWeek as f,toISODateString as m}from"./dateMath.js";import{computed as v,createCommentVNode as D,createElementBlock as k,defineComponent as h,inject as b,openBlock as p,provide as w,renderSlot as g,unref as y}from"vue";var O=["aria-label","aria-multiselectable","aria-readonly","aria-disabled"],C=/* @__PURE__ */h({__name:"CalendarGrid",props:{monthOffset:{default:0}},setup(h){const C=h,A=b(t);if(!A)throw new Error("SkdxCalendarGrid must be used within SkdxCalendar");const S=A,M=v(()=>S.months.value[C.monthOffset]??S.month.value);w(s,{gridMonth:M});const x=v(()=>r(M.value,S.locale)),E=a();function _(a){let t;switch(e(a.key,a.currentTarget,E())){case"ArrowLeft":t=o(S.focusedDate.value,-1);break;case"ArrowRight":t=o(S.focusedDate.value,1);break;case"ArrowUp":t=o(S.focusedDate.value,-7);break;case"ArrowDown":t=o(S.focusedDate.value,7);break;case"Home":t=f(S.focusedDate.value,S.weekStartsOn);break;case"End":t=i(S.focusedDate.value,S.weekStartsOn);break;case"PageUp":t=a.shiftKey?n(S.focusedDate.value,-1):d(S.focusedDate.value,-1);break;case"PageDown":t=a.shiftKey?n(S.focusedDate.value,1):d(S.focusedDate.value,1);break;default:return}a.preventDefault(),function(e){const a=l(e,S.minDate,S.maxDate);S.months.value.some(e=>u(a,e))||S.onMonthChange(c(a)),S.setFocusedDate(a),requestAnimationFrame(()=>{const e=m(a);(S.rootRef.value??document).querySelector(`[data-skdx-calendar-cell="${e}"]:not([disabled])`)?.focus()})}(t)}return(e,a)=>"day"===y(S).view?(p(),k("div",{key:0,class:"skdx-calendar__grid","data-part":"grid",role:"grid","aria-label":x.value,"aria-multiselectable":"single"!==y(S).selectionMode?"true":"false","aria-readonly":y(S).readOnly?"true":void 0,"aria-disabled":y(S).disabled?"true":void 0,onKeydown:_},[g(e.$slots,"default")],40,O)):D("",!0)}});export{C as default};

package/dist/calendar/CalendarGridBody.vue.d.cts

@@ -1,26 +1,7 @@
 /**
- * `role="rowgroup"` wrapper for a `SkdxCalendar`'s week rows.
- *
- * **Given no children it renders the displayed month itself** — one
- * `SkdxCalendarRow` per visible week, one `SkdxCalendarCell` per day, taken from
- * the live `month` in context. That is the composition a consumer writes first,
- * and it is the correct one.
- *
- * It was not, here. Written self-closing this rendered an empty rowgroup, so
- * every Calendar and every DatePicker in the library showed a heading and
- * weekday names above no days at all — and the workaround, mapping
- * `getVisibleWeeks(someDate)` over a constant captured once, draws days that
- * never move when Previous/Next changes the month. Both roads end at "the days
- * do not change". React fixed exactly this; see
- * `packages/react/src/calendar/CalendarGridBody.tsx`.
- *
- * Pass children to take over completely — to decorate a day, group by week
- * number, or render anything other than a plain cell. Children always win; this
- * only fills an empty body.
- *
- * `rowgroup` rather than a bare `<div>` so `role="grid"` sees only
- * `row`/`rowgroup` children — a plain `div` between the grid and its rows is
- * what axe reports as `aria-required-children`.
+ * role="rowgroup" wrapper for calendar's week rows. Renders displayed month
+ * (one row per week, one cell per day) when no children. Pass children to customize.
+ * rowgroup for grid to see only row/rowgroup children.
  *
  * @example
  * ```vue

package/dist/calendar/CalendarGridBody.vue.d.ts

@@ -1,26 +1,7 @@
 /**
- * `role="rowgroup"` wrapper for a `SkdxCalendar`'s week rows.
- *
- * **Given no children it renders the displayed month itself** — one
- * `SkdxCalendarRow` per visible week, one `SkdxCalendarCell` per day, taken from
- * the live `month` in context. That is the composition a consumer writes first,
- * and it is the correct one.
- *
- * It was not, here. Written self-closing this rendered an empty rowgroup, so
- * every Calendar and every DatePicker in the library showed a heading and
- * weekday names above no days at all — and the workaround, mapping
- * `getVisibleWeeks(someDate)` over a constant captured once, draws days that
- * never move when Previous/Next changes the month. Both roads end at "the days
- * do not change". React fixed exactly this; see
- * `packages/react/src/calendar/CalendarGridBody.tsx`.
- *
- * Pass children to take over completely — to decorate a day, group by week
- * number, or render anything other than a plain cell. Children always win; this
- * only fills an empty body.
- *
- * `rowgroup` rather than a bare `<div>` so `role="grid"` sees only
- * `row`/`rowgroup` children — a plain `div` between the grid and its rows is
- * what axe reports as `aria-required-children`.
+ * role="rowgroup" wrapper for calendar's week rows. Renders displayed month
+ * (one row per week, one cell per day) when no children. Pass children to customize.
+ * rowgroup for grid to see only row/rowgroup children.
  *
  * @example
  * ```vue

package/dist/calendar/CalendarGridBody.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const o=require("./context.cjs"),i=require("./dateMath.cjs"),s=require("./CalendarRow.vue.cjs"),_=require("./CalendarCell.vue.cjs");let e=require("vue");var k={class:"skdx-calendar__grid-body","data-part":"grid-body",role:"rowgroup"},p=(0,e.defineComponent)({__name:"CalendarGridBody",setup(C){const t=(0,e.inject)(o.CALENDAR_CONTEXT);if(!t)throw new Error("<SkdxCalendarGridBody> must be used inside <SkdxCalendar>.");const a=(0,e.inject)(o.CALENDAR_GRID_CONTEXT,void 0),d=(0,e.computed)(()=>a?.gridMonth.value??t.month.value),l=(0,e.computed)(()=>i.getVisibleWeeks(d.value,t.weekStartsOn)),u=(0,e.useSlots)();return(c,B)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",k,[(0,e.unref)(u).default?(0,e.renderSlot)(c.$slots,"default",{key:0}):((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:1},(0,e.renderList)(l.value,r=>((0,e.openBlock)(),(0,e.createBlock)(s.default,{key:r[0].date.toISOString()},{default:(0,e.withCtx)(()=>[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(r,n=>((0,e.openBlock)(),(0,e.createBlock)(_.default,{key:n.date.toISOString(),date:n.date},null,8,["date"]))),128))]),_:2},1024))),128))]))}});exports.default=p;
+const o=require("./context.cjs"),i=require("./dateMath.cjs"),s=require("./CalendarCell.vue.cjs"),_=require("./CalendarRow.vue.cjs"),k=require("./CalendarWeekNumber.vue.cjs");let e=require("vue");var p={class:"skdx-calendar__grid-body","data-part":"grid-body",role:"rowgroup"},m=(0,e.defineComponent)({__name:"CalendarGridBody",setup(C){const t=(0,e.inject)(o.CALENDAR_CONTEXT);if(!t)throw new Error("<SkdxCalendarGridBody> must be used inside <SkdxCalendar>.");const a=(0,e.inject)(o.CALENDAR_GRID_CONTEXT,void 0),d=(0,e.computed)(()=>a?.gridMonth.value??t.month.value),l=(0,e.computed)(()=>i.getVisibleWeeks(d.value,t.weekStartsOn)),u=(0,e.useSlots)();return(c,B)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",p,[(0,e.unref)(u).default?(0,e.renderSlot)(c.$slots,"default",{key:0}):((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:1},(0,e.renderList)(l.value,r=>((0,e.openBlock)(),(0,e.createBlock)(_.default,{key:r[0].date.toISOString()},{default:(0,e.withCtx)(()=>[(0,e.unref)(t).weekNumbers?((0,e.openBlock)(),(0,e.createBlock)(k.default,{key:0,date:r[0].date},null,8,["date"])):(0,e.createCommentVNode)("",!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(r,n=>((0,e.openBlock)(),(0,e.createBlock)(s.default,{key:n.date.toISOString(),date:n.date},null,8,["date"]))),128))]),_:2},1024))),128))]))}});exports.default=m;