[{"data":1,"prerenderedAt":516},["ShallowReactive",2],{"navigation_docs":3,"-essentials-keyboard":170,"-essentials-keyboard-surround":511},[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":71,"body":172,"description":504,"extension":505,"links":506,"meta":507,"navigation":508,"path":72,"seo":509,"stem":73,"__hash__":510},"docs\u002F2.essentials\u002F08.keyboard.md",{"type":173,"value":174,"toc":497},"minimark",[175,179,282,287,290,366,392,399,403,414,421,425,472,475,482,485,488,490,493],[176,177,178],"p",{},"Everything works without a mouse. Tab into the grid, move with the arrow keys, and press Enter to select. Try it on the demo: the modal input opens with ArrowDown.",[180,181,184],"calendar-demo",{":config":182,":height":183},"{\"isDateRange\":true,\"isModal\":true,\"isTypeable\":true,\"changeMonthFunction\":true,\"changeYearFunction\":true,\"presets\":true}","460",[185,186,191],"pre",{"className":187,"code":188,"language":189,"meta":190,"style":190},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CFunctionalCalendar\n  v-model=\"value\"\n  is-date-range\n  is-modal\n  is-typeable\n  change-month-function\n  change-year-function\n  :presets=\"true\"\n\u002F>\n","vue","",[192,193,194,207,227,233,239,245,251,257,276],"code",{"__ignoreMap":190},[195,196,199,203],"span",{"class":197,"line":198},"line",1,[195,200,202],{"class":201},"sMK4o","\u003C",[195,204,206],{"class":205},"swJcz","FunctionalCalendar\n",[195,208,210,214,217,220,224],{"class":197,"line":209},2,[195,211,213],{"class":212},"spNyl","  v-model",[195,215,216],{"class":201},"=",[195,218,219],{"class":201},"\"",[195,221,223],{"class":222},"sTEyZ","value",[195,225,226],{"class":201},"\"\n",[195,228,230],{"class":197,"line":229},3,[195,231,232],{"class":212},"  is-date-range\n",[195,234,236],{"class":197,"line":235},4,[195,237,238],{"class":212},"  is-modal\n",[195,240,242],{"class":197,"line":241},5,[195,243,244],{"class":212},"  is-typeable\n",[195,246,248],{"class":197,"line":247},6,[195,249,250],{"class":212},"  change-month-function\n",[195,252,254],{"class":197,"line":253},7,[195,255,256],{"class":212},"  change-year-function\n",[195,258,260,263,266,268,270,274],{"class":197,"line":259},8,[195,261,262],{"class":201},"  :",[195,264,265],{"class":212},"presets",[195,267,216],{"class":201},[195,269,219],{"class":201},[195,271,273],{"class":272},"sfNiH","true",[195,275,226],{"class":201},[195,277,279],{"class":197,"line":278},9,[195,280,281],{"class":222},"\u002F>\n",[283,284,286],"h2",{"id":285},"the-grid","The grid",[176,288,289],{},"Each month is a grid with one tab stop. Tab moves into the grid, and the arrow keys move between days. The tab stop sits on the focused day, then the selected day, then today, then the first enabled day.",[291,292,293,306],"table",{},[294,295,296],"thead",{},[297,298,299,303],"tr",{},[300,301,302],"th",{},"Key",[300,304,305],{},"Action",[307,308,309,318,326,334,342,350,358],"tbody",{},[297,310,311,315],{},[312,313,314],"td",{},"ArrowLeft, ArrowRight",[312,316,317],{},"Previous or next day. In a right to left page they swap: ArrowRight goes to the previous day, the one on the right",[297,319,320,323],{},[312,321,322],{},"ArrowUp, ArrowDown",[312,324,325],{},"Same weekday, previous or next week",[297,327,328,331],{},[312,329,330],{},"Home, End",[312,332,333],{},"First or last day of the week, kept inside the month",[297,335,336,339],{},[312,337,338],{},"PageUp, PageDown",[312,340,341],{},"Previous or next month, same day or the last day of a shorter month",[297,343,344,347],{},[312,345,346],{},"Shift+PageUp, Shift+PageDown",[312,348,349],{},"Previous or next year",[297,351,352,355],{},[312,353,354],{},"Enter, Space",[312,356,357],{},"Select the day",[297,359,360,363],{},[312,361,362],{},"Delete, Backspace",[312,364,365],{},"On a day of a multiple date range, remove that range",[176,367,368,369,372,373,376,377,379,380,383,384,387,388,391],{},"Moving past the edge of the visible months scrolls the calendar and emits ",[192,370,371],{},"changedMonth",", and ",[192,374,375],{},"changedYear"," too when the year changes. The Shift variants emit ",[192,378,375],{}," only. Moves stop at the months that ",[192,381,382],{},"limits"," allows. Home and End follow the week start of the calendar, so Home lands on Sunday for ",[192,385,386],{},"en-US"," and on Monday for ",[192,389,390],{},"de-DE",".",[176,393,394,395,398],{},"Disabled days are focusable but cannot be selected. Moving over a day also fires ",[192,396,397],{},"dayMouseOver",", so a range preview follows the keyboard.",[283,400,402],{"id":401},"title-arrows-and-pickers","Title, arrows and pickers",[176,404,405,406,409,410,413],{},"The arrows are buttons. The month and year titles are buttons when ",[192,407,408],{},"changeMonthFunction"," or ",[192,411,412],{},"changeYearFunction"," is on. Enter or Space on a title opens its picker and moves focus to the selected item. Escape closes the picker and returns focus to the title. Items in a picker are buttons too. Moving focus out of the picker, for example with Tab, closes it.",[176,415,416,417,420],{},"Custom arrow slots that contain a button or a link keep their own focus. Other slot content gets ",[192,418,419],{},"role=\"button\""," and responds to Enter and Space.",[283,422,424],{"id":423},"modal-inputs","Modal inputs",[291,426,427,438],{},[294,428,429],{},[297,430,431,433,436],{},[300,432,302],{},[300,434,435],{},"Where",[300,437,305],{},[307,439,440,451,462],{},[297,441,442,445,448],{},[312,443,444],{},"Focus, or ArrowDown, or Alt+ArrowDown",[312,446,447],{},"Input",[312,449,450],{},"Open the calendar. The arrow keys also move focus to the day with the tab stop",[297,452,453,456,459],{},[312,454,455],{},"Escape",[312,457,458],{},"Calendar",[312,460,461],{},"Close it and return focus to the input",[297,463,464,467,469],{},[312,465,466],{},"Tab out",[312,468,458],{},[312,470,471],{},"Close it",[176,473,474],{},"Enter in the single and range inputs is never intercepted, so a surrounding form submits. In the tags input of the multiple date picker, Enter adds the typed date.",[176,476,477,478,481],{},"Selecting a day with the keyboard in a modal that closes after selection (",[192,479,480],{},"isAutoCloseable",") returns focus to the input.",[283,483,46],{"id":484},"time-picker",[176,486,487],{},"Each list is a listbox with one tab stop. ArrowUp, ArrowDown, Home and End move, Enter and Space choose. Escape returns to the calendar.",[283,489,86],{"id":265},[176,491,492],{},"Presets are buttons in the tab order. Enter or Space on one applies it.",[494,495,496],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":190,"searchDepth":209,"depth":209,"links":498},[499,500,501,502,503],{"id":285,"depth":209,"text":286},{"id":401,"depth":209,"text":402},{"id":423,"depth":209,"text":424},{"id":484,"depth":209,"text":46},{"id":265,"depth":209,"text":86},"Every key the calendar handles.","md",null,{},{"icon":74},{"title":71,"description":504},"6ReA33DH8QoUG4BEpxRSLXkhfzQj8Kp1JCZs2OQASMM",[512,514],{"title":66,"path":67,"stem":68,"description":513,"icon":69,"children":-1},"Style the calendar with --vfc-* custom properties, in light and dark.",{"title":76,"path":77,"stem":78,"description":515,"icon":79,"children":-1},"Let users type dates into the modal inputs.",1792736103377]