[{"data":1,"prerenderedAt":785},["ShallowReactive",2],{"navigation_docs":3,"-essentials-accessibility":170,"-essentials-accessibility-surround":780},[4,30,110,150,155],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-book-open",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-play",{"title":26,"path":27,"stem":28,"icon":29},"Migrate from 2.x","\u002Fgetting-started\u002Fmigration","1.getting-started\u002F4.migration","i-lucide-arrow-right-left",{"title":31,"path":32,"stem":33,"children":34,"page":6},"Essentials","\u002Fessentials","2.essentials",[35,40,45,50,55,60,65,70,75,80,85,90,95,100,105],{"title":36,"path":37,"stem":38,"icon":39},"Selection modes","\u002Fessentials\u002Fselection-modes","2.essentials\u002F01.selection-modes","i-lucide-mouse-pointer-click",{"title":41,"path":42,"stem":43,"icon":44},"Multiple calendars","\u002Fessentials\u002Fmultiple-calendars","2.essentials\u002F02.multiple-calendars","i-lucide-columns-2",{"title":46,"path":47,"stem":48,"icon":49},"Time picker","\u002Fessentials\u002Ftime-picker","2.essentials\u002F03.time-picker","i-lucide-clock",{"title":51,"path":52,"stem":53,"icon":54},"Limits and availability","\u002Fessentials\u002Flimits-and-availability","2.essentials\u002F04.limits-and-availability","i-lucide-ban",{"title":56,"path":57,"stem":58,"icon":59},"Marking","\u002Fessentials\u002Fmarking","2.essentials\u002F05.marking","i-lucide-bookmark",{"title":61,"path":62,"stem":63,"icon":64},"Layout and names","\u002Fessentials\u002Flayout-and-names","2.essentials\u002F06.layout-and-names","i-lucide-layout-template",{"title":66,"path":67,"stem":68,"icon":69},"Theming","\u002Fessentials\u002Ftheming","2.essentials\u002F07.theming","i-lucide-palette",{"title":71,"path":72,"stem":73,"icon":74},"Keyboard","\u002Fessentials\u002Fkeyboard","2.essentials\u002F08.keyboard","i-lucide-keyboard",{"title":76,"path":77,"stem":78,"icon":79},"Typeable input","\u002Fessentials\u002Ftypeable-input","2.essentials\u002F09.typeable-input","i-lucide-text-cursor-input",{"title":81,"path":82,"stem":83,"icon":84},"Locale and labels","\u002Fessentials\u002Flocale","2.essentials\u002F10.locale","i-lucide-languages",{"title":86,"path":87,"stem":88,"icon":89},"Presets","\u002Fessentials\u002Fpresets","2.essentials\u002F11.presets","i-lucide-zap",{"title":91,"path":92,"stem":93,"icon":94},"Accessibility","\u002Fessentials\u002Faccessibility","2.essentials\u002F12.accessibility","i-lucide-accessibility",{"title":96,"path":97,"stem":98,"icon":99},"Props","\u002Fessentials\u002Fprops","2.essentials\u002F13.props","i-lucide-list",{"title":101,"path":102,"stem":103,"icon":104},"Events","\u002Fessentials\u002Fevents","2.essentials\u002F14.events","i-lucide-radio",{"title":106,"path":107,"stem":108,"icon":109},"Slots","\u002Fessentials\u002Fslots","2.essentials\u002F15.slots","i-lucide-puzzle",{"title":111,"icon":112,"path":113,"stem":114,"children":115,"page":6},"Examples","i-lucide-layout-grid","\u002Fexamples","3.examples",[116,119,122,126,129,132,136,139,143,146],{"title":36,"path":117,"stem":118,"icon":39},"\u002Fexamples\u002Fselection-modes","3.examples\u002F01.selection-modes",{"title":41,"path":120,"stem":121,"icon":44},"\u002Fexamples\u002Fmultiple-calendars","3.examples\u002F02.multiple-calendars",{"title":123,"path":124,"stem":125,"icon":79},"Modal and typeable inputs","\u002Fexamples\u002Fmodal-and-inputs","3.examples\u002F03.modal-and-inputs",{"title":46,"path":127,"stem":128,"icon":49},"\u002Fexamples\u002Ftime-picker","3.examples\u002F04.time-picker",{"title":51,"path":130,"stem":131,"icon":54},"\u002Fexamples\u002Flimits-and-availability","3.examples\u002F05.limits-and-availability",{"title":133,"path":134,"stem":135,"icon":59},"Marking and layout","\u002Fexamples\u002Fmarking","3.examples\u002F06.marking",{"title":106,"path":137,"stem":138,"icon":109},"\u002Fexamples\u002Fslots","3.examples\u002F07.slots",{"title":140,"path":141,"stem":142,"icon":89},"Range presets","\u002Fexamples\u002Fpresets","3.examples\u002F08.presets",{"title":81,"path":144,"stem":145,"icon":84},"\u002Fexamples\u002Flocale","3.examples\u002F09.locale",{"title":147,"path":148,"stem":149,"icon":69},"Theming and dark mode","\u002Fexamples\u002Ftheming-and-dark-mode","3.examples\u002F10.theming-and-dark-mode",{"title":151,"path":152,"stem":153,"icon":154},"Playground","\u002Fplayground","4.playground","i-lucide-sliders-horizontal",{"title":156,"path":157,"stem":158,"children":159,"page":6},"Community","\u002Fcommunity","5.community",[160,165],{"title":161,"path":162,"stem":163,"icon":164},"Contributing","\u002Fcommunity\u002Fcontributing","5.community\u002F1.contributing","i-lucide-git-pull-request",{"title":166,"path":167,"stem":168,"icon":169},"Changelog","\u002Fcommunity\u002Fchangelog","5.community\u002F2.changelog","i-lucide-history",{"id":171,"title":91,"body":172,"description":773,"extension":774,"links":775,"meta":776,"navigation":777,"path":92,"seo":778,"stem":93,"__hash__":779},"docs\u002F2.essentials\u002F12.accessibility.md",{"type":173,"value":174,"toc":759},"minimark",[175,184,189,285,292,296,368,372,379,382,386,406,410,596,599,603,656,659,679,683,697,701,730,734,741,745],[176,177,178,179,183],"p",{},"The calendar follows the ARIA date grid pattern. Screen readers get names, states and a single tab stop per month. The ",[180,181,182],"a",{"href":72},"keyboard page"," lists every key.",[185,186,188],"h2",{"id":187},"grid-semantics","Grid semantics",[190,191,192,205],"table",{},[193,194,195],"thead",{},[196,197,198,202],"tr",{},[199,200,201],"th",{},"Part",[199,203,204],{},"Markup",[206,207,208,221,231,246,261,272],"tbody",{},[196,209,210,214],{},[211,212,213],"td",{},"Month",[211,215,216,220],{},[217,218,219],"code",{},"role=\"grid\"",", named by the month and year, such as \"October 2026\"",[196,222,223,226],{},[211,224,225],{},"Week",[211,227,228],{},[217,229,230],{},"role=\"row\"",[196,232,233,236],{},[211,234,235],{},"Day",[211,237,238,241,242,245],{},[217,239,240],{},"role=\"gridcell\""," with a full date as ",[217,243,244],{},"aria-label",", such as \"Thursday, 15 October 2026\"",[196,247,248,251],{},[211,249,250],{},"Week number",[211,252,253,256,257,260],{},[217,254,255],{},"role=\"rowheader\""," labeled by ",[217,258,259],{},"labels.week"," and the number, such as \"Week 42\"",[196,262,263,266],{},[211,264,265],{},"Day name row",[211,267,268,271],{},[217,269,270],{},"aria-hidden=\"true\"",", because each day already has a full date label",[196,273,274,277],{},[211,275,276],{},"Filler rows",[211,278,279,282,283],{},[217,280,281],{},"role=\"presentation\""," and ",[217,284,270],{},[176,286,287,288,291],{},"Day labels and the month name use the calendar's own names and the locale you set, always in the Gregorian calendar. Custom ",[217,289,290],{},"monthNames"," appear in the labels.",[185,293,295],{"id":294},"day-states","Day states",[297,298,299,306,327,337,347,362],"ul",{},[300,301,302,305],"li",{},[217,303,304],{},"aria-selected"," is set on days when the calendar selects something. It is absent on a display-only calendar.",[300,307,308,311,312,315,316,315,319,322,323,326],{},[217,309,310],{},"aria-disabled=\"true\""," marks days blocked by ",[217,313,314],{},"limits",", ",[217,317,318],{},"disabledDates",[217,320,321],{},"enabledDates"," or ",[217,324,325],{},"disabledDayNames",".",[300,328,329,330,333,334,326],{},"Today has ",[217,331,332],{},"aria-current=\"date\""," and \"Today\" at the end of its label. The word comes from ",[217,335,336],{},"labels.today",[300,338,339,340,282,343,346],{},"The first and last day of a date range end their label with \"range start\" or \"range end\", from ",[217,341,342],{},"labels.rangeStart",[217,344,345],{},"labels.rangeEnd",". A one day range gets both.",[300,348,349,350,353,354,357,358,361],{},"A day in a numbered range has its range number added to the label, such as \"Thursday, 15 October 2026, Range 2, range start\". The word comes from ",[217,351,352],{},"labels.range",". The number badge drawn on the day is ",[217,355,356],{},"aria-hidden"," and comes from a ",[217,359,360],{},"data-number"," attribute, so the visible text of the day is only its number.",[300,363,364,365,326],{},"Days in a multiple date range carry ",[217,366,367],{},"aria-keyshortcuts=\"Delete\"",[185,369,371],{"id":370},"roving-focus","Roving focus",[176,373,374,375,378],{},"Each month has one tab stop, so Tab crosses the grid in one step. The stop sits on the day you last focused, then on the selected day, then on today, then on the first enabled day. The other days have ",[217,376,377],{},"tabindex=\"-1\""," and are reached with the arrow keys.",[176,380,381],{},"Focus stays on the same day when the calendar re-renders, for example after a month change. If that day leaves the screen, focus goes to the tab stop of the same month.",[185,383,385],{"id":384},"month-changes","Month changes",[176,387,388,389,392,393,395,396,399,400,322,402,405],{},"A visually hidden ",[217,390,391],{},"aria-live=\"polite\""," region holds the visible months, such as \"October 2026\" or \"October 2026, November 2026\". It updates on every month change, so a screen reader announces the new month. The calendar's root element has ",[217,394,377],{},", so it takes focus from a click on plain text but is not a tab stop: the tab stops are the inputs, the controls and the grid. The dialog ",[217,397,398],{},"id"," is assigned after mount, so a server render has no ",[217,401,398],{},[217,403,404],{},"aria-controls"," to mismatch on hydration.",[185,407,409],{"id":408},"controls","Controls",[190,411,412,421],{},[193,413,414],{},[196,415,416,419],{},[199,417,418],{},"Control",[199,420,204],{},[206,422,423,445,462,486,500,516,528,552,564,577],{},[196,424,425,428],{},[211,426,427],{},"Arrows",[211,429,430,433,434,322,437,440,441,444],{},[217,431,432],{},"\u003Cbutton>"," with the label from ",[217,435,436],{},"labels.previousMonth",[217,438,439],{},"labels.nextMonth",", and ",[217,442,443],{},"aria-disabled"," at a limit",[196,446,447,450],{},[211,448,449],{},"Month and year titles",[211,451,452,315,455,282,458,461],{},[217,453,454],{},"role=\"button\"",[217,456,457],{},"tabindex=\"0\"",[217,459,460],{},"aria-expanded",", when the pickers are on",[196,463,464,467],{},[211,465,466],{},"Month and year picker",[211,468,469,470,473,474,322,477,480,481,315,483,485],{},"A ",[217,471,472],{},"role=\"group\""," named by ",[217,475,476],{},"labels.chooseMonth",[217,478,479],{},"labels.chooseYear",". The year at its top is a ",[217,482,432],{},[217,484,443],{}," until you page through the years, and it returns to the current years",[196,487,488,491],{},[211,489,490],{},"Picker items",[211,492,493,495,496,499],{},[217,494,454],{}," with ",[217,497,498],{},"aria-pressed"," on the current one",[196,501,502,504],{},[211,503,86],{},[211,505,469,506,473,508,511,512,282,514],{},[217,507,472],{},[217,509,510],{},"labels.quickRanges",", holding buttons with ",[217,513,498],{},[217,515,443],{},[196,517,518,521],{},[211,519,520],{},"Clear button",[211,522,523,495,525,527],{},[217,524,454],{},[217,526,443],{}," when there is nothing to clear",[196,529,530,532],{},[211,531,46],{},[211,533,534,535,538,539,282,542,545,546,549,550],{},"Two ",[217,536,537],{},"role=\"listbox\""," lists named by ",[217,540,541],{},"labels.hour",[217,543,544],{},"labels.minute",", with ",[217,547,548],{},"role=\"option\""," items and ",[217,551,304],{},[196,553,554,557],{},[211,555,556],{},"Time picker close",[211,558,559,256,561],{},[217,560,454],{},[217,562,563],{},"labels.close",[196,565,566,569],{},[211,567,568],{},"Time picker range edges",[211,570,534,571,573,574,576],{},[217,572,454],{}," toggles with ",[217,575,498],{}," on the edge the lists edit",[196,578,579,582],{},[211,580,581],{},"Tags input of the multiple date picker",[211,583,584,585,588,589,591,592,595],{},"An input named by ",[217,586,587],{},"labels.addDate",", and one ",[217,590,432],{}," per date labeled ",[217,593,594],{},"labels.removeDate"," plus the date. Removing a date returns focus to the input",[176,597,598],{},"Arrow slots with your own button or link keep their own focus and semantics.",[185,600,602],{"id":601},"modal-calendars","Modal calendars",[176,604,605,606,473,609,612,613,495,616,619,620,622,623,625,626,282,628,631,632,315,635,322,638,641,642,282,645,648,649,652,653,326],{},"In modal mode, the calendar is a ",[217,607,608],{},"role=\"dialog\"",[217,610,611],{},"labels.calendar",". Its inputs are ",[217,614,615],{},"role=\"combobox\"",[217,617,618],{},"aria-haspopup=\"dialog\"",", an ",[217,621,404],{}," that points at the dialog, an ",[217,624,460],{}," that tracks it, and an ",[217,627,244],{},[217,629,630],{},"title"," from ",[217,633,634],{},"labels.date",[217,636,637],{},"labels.startDate",[217,639,640],{},"labels.endDate",". Inputs you render in the ",[217,643,644],{},"datePickerInput",[217,646,647],{},"dateRangeInputs"," slots are your markup, so add these attributes yourself. Both slots pass ",[217,650,651],{},"dialogId",", which is empty until the calendar mounts, so bind ",[217,654,655],{},":aria-controls=\"dialogId || null\"",[176,657,658],{},"Focus follows these rules:",[297,660,661,664,667,670,673,676],{},[300,662,663],{},"Focusing an input, or pressing ArrowDown or Alt+ArrowDown on it, opens the calendar.",[300,665,666],{},"Escape closes the calendar and returns focus to the input that opened it.",[300,668,669],{},"Selecting a day with the keyboard in an auto-closing calendar returns focus to the input.",[300,671,672],{},"Focus leaving the calendar and its inputs closes it.",[300,674,675],{},"Escape inside a month or year picker, or the time picker, closes only that layer.",[300,677,678],{},"Moving focus out of an open month or year picker closes it, in modal and inline calendars. Tab from the last item goes to the titles, and the first Tab past the picker's own title closes it, so focus never lands in the grid hidden under it.",[185,680,682],{"id":681},"forced-colors","Forced colors",[176,684,685,686,282,689,692,693,696],{},"In Windows high contrast and other forced colors modes, the calendar uses system colors. Selected days, range ends, marked dates, the selected preset, month and year, and the selected time use ",[217,687,688],{},"Highlight",[217,690,691],{},"HighlightText",". Days inside a range get a line above and below, today is underlined, and the range number and remove badges keep a filled shape. Your ",[217,694,695],{},"--vfc-*"," colors do not apply in this mode.",[185,698,700],{"id":699},"right-to-left","Right to left",[176,702,703,704,707,708,711,712,715,716,718,719,282,722,725,726,729],{},"Put ",[217,705,706],{},"dir=\"rtl\""," on the page or an ancestor, or set the CSS ",[217,709,710],{},"direction"," to ",[217,713,714],{},"rtl",". The grid mirrors, and ArrowLeft and ArrowRight follow the screen: ArrowLeft moves to the day on the left. The navigation chevrons mirror under a ",[217,717,706],{}," attribute, and the range bands, their rounded ends, the week number divider and the range badges use logical properties. The range shapes and badges keep a physical ",[217,720,721],{},"left",[217,723,724],{},"right"," fallback for browsers without logical properties, which render them left to right. A page that only sets ",[217,727,728],{},"direction: rtl"," in CSS mirrors the grid and the keys, but not the chevrons.",[185,731,733],{"id":732},"focus-ring","Focus ring",[176,735,736,737,740],{},"Focused controls show a 2px outline in ",[217,738,739],{},"--vfc-focus",". It defaults to the primary color, so change it if your primary color has low contrast on your background.",[185,742,744],{"id":743},"translate-it","Translate it",[176,746,747,748,751,752,755,756,326],{},"Every string a screen reader hears comes from ",[217,749,750],{},"labels"," or from ",[217,753,754],{},"locale",". See ",[180,757,758],{"href":82},"locale and labels",{"title":760,"searchDepth":761,"depth":761,"links":762},"",2,[763,764,765,766,767,768,769,770,771,772],{"id":187,"depth":761,"text":188},{"id":294,"depth":761,"text":295},{"id":370,"depth":761,"text":371},{"id":384,"depth":761,"text":385},{"id":408,"depth":761,"text":409},{"id":601,"depth":761,"text":602},{"id":681,"depth":761,"text":682},{"id":699,"depth":761,"text":700},{"id":732,"depth":761,"text":733},{"id":743,"depth":761,"text":744},"Grid semantics, labels and focus management.","md",null,{},{"icon":94},{"title":91,"description":773},"CNp_OiDyNm-ge3P57fR0dHM-aaNnPyQvvfTyDJPo7aM",[781,783],{"title":86,"path":87,"stem":88,"description":782,"icon":89,"children":-1},"Quick ranges for date ranges and date pickers.",{"title":96,"path":97,"stem":98,"description":784,"icon":99,"children":-1},"Every prop, with its type and default.",1792736103882]