[{"data":1,"prerenderedAt":2581},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-components-calendar":316,"-colorffy-ui-components-calendar-surround":2576},[4,21,115,307,312],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Colorffy CSS","i-lucide-palette","\u002Fcolorffy-css","2.colorffy-css",[27,32,37,42,78,99],{"title":28,"path":29,"stem":30,"icon":31},"Overview","\u002Fcolorffy-css\u002Foverview","2.colorffy-css\u002F1.overview","i-lucide-book-open",{"title":33,"path":34,"stem":35,"icon":36},"Color System","\u002Fcolorffy-css\u002Fcolor-system","2.colorffy-css\u002F2.color-system","i-lucide-droplet",{"title":38,"path":39,"stem":40,"icon":41},"Customization","\u002Fcolorffy-css\u002Fcustomization","2.colorffy-css\u002F3.customization","i-lucide-settings",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":20},"Utilities","i-lucide-wrench","\u002Fcolorffy-css\u002Futilities","2.colorffy-css\u002F4.utilities",[48,53,58,63,68,73],{"title":49,"path":50,"stem":51,"icon":52},"Borders & Shadows","\u002Fcolorffy-css\u002Futilities\u002Fborders-shadows","2.colorffy-css\u002F4.utilities\u002F01.borders-shadows","i-lucide-frame",{"title":54,"path":55,"stem":56,"icon":57},"Colors & Gradients","\u002Fcolorffy-css\u002Futilities\u002Fcolors-gradients","2.colorffy-css\u002F4.utilities\u002F02.colors-gradients","i-lucide-paint-bucket",{"title":59,"path":60,"stem":61,"icon":62},"Display & Flexbox","\u002Fcolorffy-css\u002Futilities\u002Fdisplay-flexbox","2.colorffy-css\u002F4.utilities\u002F03.display-flexbox","i-lucide-stretch-horizontal",{"title":64,"path":65,"stem":66,"icon":67},"Effects","\u002Fcolorffy-css\u002Futilities\u002Feffects","2.colorffy-css\u002F4.utilities\u002F04.effects","i-lucide-wand-sparkles",{"title":69,"path":70,"stem":71,"icon":72},"Spacing","\u002Fcolorffy-css\u002Futilities\u002Fspacing","2.colorffy-css\u002F4.utilities\u002F05.spacing","i-lucide-ruler",{"title":74,"path":75,"stem":76,"icon":77},"Typography","\u002Fcolorffy-css\u002Futilities\u002Ftypography","2.colorffy-css\u002F4.utilities\u002F06.typography","i-lucide-type",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":20},"Layout","i-lucide-layout-template","\u002Fcolorffy-css\u002Flayout","2.colorffy-css\u002F5.layout",[84,89,94],{"title":85,"path":86,"stem":87,"icon":88},"App Layout","\u002Fcolorffy-css\u002Flayout\u002Fapp-layout","2.colorffy-css\u002F5.layout\u002F01.app-layout","i-lucide-app-window",{"title":90,"path":91,"stem":92,"icon":93},"Flex Grid","\u002Fcolorffy-css\u002Flayout\u002Fflex-grid","2.colorffy-css\u002F5.layout\u002F02.flex-grid","i-lucide-columns-3",{"title":95,"path":96,"stem":97,"icon":98},"Grid","\u002Fcolorffy-css\u002Flayout\u002Fgrid","2.colorffy-css\u002F5.layout\u002F03.grid","i-lucide-grid-3x3",{"title":100,"icon":101,"path":102,"stem":103,"children":104,"page":20},"SCSS API","i-lucide-braces","\u002Fcolorffy-css\u002Fscss-api","2.colorffy-css\u002F6.scss-api",[105,110],{"title":106,"path":107,"stem":108,"icon":109},"Mixins","\u002Fcolorffy-css\u002Fscss-api\u002Fmixins","2.colorffy-css\u002F6.scss-api\u002F01.mixins","i-lucide-code",{"title":111,"path":112,"stem":113,"icon":114},"Tonal Tokens","\u002Fcolorffy-css\u002Fscss-api\u002Ftonal-tokens","2.colorffy-css\u002F6.scss-api\u002F02.tonal-tokens","i-lucide-swatch-book",{"title":116,"icon":117,"path":118,"stem":119,"children":120,"page":20},"Colorffy UI","i-lucide-blocks","\u002Fcolorffy-ui","3.colorffy-ui",[121,125,297,302],{"title":122,"path":123,"stem":124,"icon":31},"Usage","\u002Fcolorffy-ui\u002Fusage","3.colorffy-ui\u002F1.usage",{"title":126,"icon":127,"path":128,"stem":129,"children":130,"page":20},"Components","i-lucide-component","\u002Fcolorffy-ui\u002Fcomponents","3.colorffy-ui\u002F2.components",[131,135,140,145,150,155,160,165,170,175,180,185,190,195,200,205,210,215,219,224,229,233,238,243,248,253,257,262,267,272,277,282,287,292],{"title":28,"path":132,"stem":133,"icon":134},"\u002Fcolorffy-ui\u002Fcomponents\u002Foverview","3.colorffy-ui\u002F2.components\u002F00.overview","i-lucide-layout-grid",{"title":136,"path":137,"stem":138,"icon":139},"Accordion","\u002Fcolorffy-ui\u002Fcomponents\u002Faccordion","3.colorffy-ui\u002F2.components\u002F01.accordion","i-lucide-chevrons-down-up",{"title":141,"path":142,"stem":143,"icon":144},"Alert","\u002Fcolorffy-ui\u002Fcomponents\u002Falert","3.colorffy-ui\u002F2.components\u002F02.alert","i-lucide-triangle-alert",{"title":146,"path":147,"stem":148,"icon":149},"Avatar","\u002Fcolorffy-ui\u002Fcomponents\u002Favatar","3.colorffy-ui\u002F2.components\u002F03.avatar","i-lucide-circle-user",{"title":151,"path":152,"stem":153,"icon":154},"Badge","\u002Fcolorffy-ui\u002Fcomponents\u002Fbadge","3.colorffy-ui\u002F2.components\u002F04.badge","i-lucide-tag",{"title":156,"path":157,"stem":158,"icon":159},"Breadcrumb","\u002Fcolorffy-ui\u002Fcomponents\u002Fbreadcrumb","3.colorffy-ui\u002F2.components\u002F05.breadcrumb","i-lucide-chevron-right",{"title":161,"path":162,"stem":163,"icon":164},"Button","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton","3.colorffy-ui\u002F2.components\u002F06.button","i-lucide-square-mouse-pointer",{"title":166,"path":167,"stem":168,"icon":169},"Button Group","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-group","3.colorffy-ui\u002F2.components\u002F07.button-group","i-lucide-square-stack",{"title":171,"path":172,"stem":173,"icon":174},"Button Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-menu","3.colorffy-ui\u002F2.components\u002F08.button-menu","i-lucide-menu",{"title":176,"path":177,"stem":178,"icon":179},"Calendar","\u002Fcolorffy-ui\u002Fcomponents\u002Fcalendar","3.colorffy-ui\u002F2.components\u002F09.calendar","i-lucide-calendar",{"title":181,"path":182,"stem":183,"icon":184},"Card","\u002Fcolorffy-ui\u002Fcomponents\u002Fcard","3.colorffy-ui\u002F2.components\u002F10.card","i-lucide-square",{"title":186,"path":187,"stem":188,"icon":189},"Chip","\u002Fcolorffy-ui\u002Fcomponents\u002Fchip","3.colorffy-ui\u002F2.components\u002F11.chip","i-lucide-tags",{"title":191,"path":192,"stem":193,"icon":194},"Datatable","\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable","3.colorffy-ui\u002F2.components\u002F12.datatable","i-lucide-table",{"title":196,"path":197,"stem":198,"icon":199},"Divider","\u002Fcolorffy-ui\u002Fcomponents\u002Fdivider","3.colorffy-ui\u002F2.components\u002F13.divider","i-lucide-separator-horizontal",{"title":201,"path":202,"stem":203,"icon":204},"Empty","\u002Fcolorffy-ui\u002Fcomponents\u002Fempty","3.colorffy-ui\u002F2.components\u002F14.empty","i-lucide-inbox",{"title":206,"path":207,"stem":208,"icon":209},"Icons","\u002Fcolorffy-ui\u002Fcomponents\u002Ficons","3.colorffy-ui\u002F2.components\u002F15.icons","i-lucide-shapes",{"title":211,"path":212,"stem":213,"icon":214},"Inputs","\u002Fcolorffy-ui\u002Fcomponents\u002Finputs","3.colorffy-ui\u002F2.components\u002F16.inputs","i-lucide-text-cursor-input",{"title":79,"path":216,"stem":217,"icon":218},"\u002Fcolorffy-ui\u002Fcomponents\u002Flayout","3.colorffy-ui\u002F2.components\u002F17.layout","i-lucide-layout",{"title":220,"path":221,"stem":222,"icon":223},"List","\u002Fcolorffy-ui\u002Fcomponents\u002Flist","3.colorffy-ui\u002F2.components\u002F18.list","i-lucide-list",{"title":225,"path":226,"stem":227,"icon":228},"Loading","\u002Fcolorffy-ui\u002Fcomponents\u002Floading","3.colorffy-ui\u002F2.components\u002F19.loading","i-lucide-loader-circle",{"title":230,"path":231,"stem":232,"icon":88},"Modal","\u002Fcolorffy-ui\u002Fcomponents\u002Fmodal","3.colorffy-ui\u002F2.components\u002F20.modal",{"title":234,"path":235,"stem":236,"icon":237},"Navbar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavbar","3.colorffy-ui\u002F2.components\u002F21.navbar","i-lucide-panel-top",{"title":239,"path":240,"stem":241,"icon":242},"Navigation Bar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavigation-bar","3.colorffy-ui\u002F2.components\u002F22.navigation-bar","i-lucide-navigation",{"title":244,"path":245,"stem":246,"icon":247},"Pagination","\u002Fcolorffy-ui\u002Fcomponents\u002Fpagination","3.colorffy-ui\u002F2.components\u002F23.pagination","i-lucide-ellipsis",{"title":249,"path":250,"stem":251,"icon":252},"Popover","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover","3.colorffy-ui\u002F2.components\u002F24.popover","i-lucide-message-square",{"title":254,"path":255,"stem":256,"icon":247},"Popover Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover-menu","3.colorffy-ui\u002F2.components\u002F25.popover-menu",{"title":258,"path":259,"stem":260,"icon":261},"Progress","\u002Fcolorffy-ui\u002Fcomponents\u002Fprogress","3.colorffy-ui\u002F2.components\u002F26.progress","i-lucide-loader",{"title":263,"path":264,"stem":265,"icon":266},"Segmented Controls","\u002Fcolorffy-ui\u002Fcomponents\u002Fsegmented-controls","3.colorffy-ui\u002F2.components\u002F27.segmented-controls","i-lucide-toggle-left",{"title":268,"path":269,"stem":270,"icon":271},"Sidebar","\u002Fcolorffy-ui\u002Fcomponents\u002Fsidebar","3.colorffy-ui\u002F2.components\u002F28.sidebar","i-lucide-panel-left",{"title":273,"path":274,"stem":275,"icon":276},"Skeleton","\u002Fcolorffy-ui\u002Fcomponents\u002Fskeleton","3.colorffy-ui\u002F2.components\u002F29.skeleton","i-lucide-square-dashed",{"title":278,"path":279,"stem":280,"icon":281},"Stepper","\u002Fcolorffy-ui\u002Fcomponents\u002Fstepper","3.colorffy-ui\u002F2.components\u002F30.stepper","i-lucide-list-ordered",{"title":283,"path":284,"stem":285,"icon":286},"Tabs","\u002Fcolorffy-ui\u002Fcomponents\u002Ftabs","3.colorffy-ui\u002F2.components\u002F31.tabs","i-lucide-panels-top-left",{"title":288,"path":289,"stem":290,"icon":291},"Timeline","\u002Fcolorffy-ui\u002Fcomponents\u002Ftimeline","3.colorffy-ui\u002F2.components\u002F32.timeline","i-lucide-history",{"title":293,"path":294,"stem":295,"icon":296},"Tooltip","\u002Fcolorffy-ui\u002Fcomponents\u002Ftooltip","3.colorffy-ui\u002F2.components\u002F33.tooltip","i-lucide-message-circle",{"title":298,"path":299,"stem":300,"icon":301},"Styling","\u002Fcolorffy-ui\u002Fstyling","3.colorffy-ui\u002F3.styling","i-lucide-paintbrush",{"title":303,"path":304,"stem":305,"icon":306},"Localization","\u002Fcolorffy-ui\u002Flocalization","3.colorffy-ui\u002F4.localization","i-lucide-languages",{"title":308,"path":309,"stem":310,"icon":311},"Migration","\u002Fmigration","4.migration","i-lucide-route",{"title":313,"path":314,"stem":315,"icon":291},"Changelog","\u002Fchangelog","5.changelog",{"id":317,"title":176,"body":318,"description":2569,"extension":2570,"links":2571,"meta":2572,"navigation":2573,"path":177,"seo":2574,"stem":178,"__hash__":2575},"docs\u002F3.colorffy-ui\u002F2.components\u002F09.calendar.md",{"type":319,"value":320,"toc":2556},"minimark",[321,370,375,560,563,567,577,753,764,768,773,889,893,907,1126,1129,1133,1140,1248,1252,1261,1335,1338,1342,1384,1488,1492,1518,1759,1762,1773,1777,1811,1912,1920,1924,2219,2275,2279,2291,2357,2553],[322,323,324,328,329,336,337,340,341,344,345,347,348,351,352,347,355,358,359,347,362,365,366,369],"p",{},[325,326,327],"code",{},"UiCalendar"," shows one or more months as a grid of days. For a field that opens one in a popup, use ",[330,331,333],"a",{"href":332},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#date",[325,334,335],{},"UiInputDate",". Bind the selection with ",[325,338,339],{},"v-model",". The model holds ",[325,342,343],{},"Date"," objects at midnight local time: a ",[325,346,343],{}," in ",[325,349,350],{},"single"," mode, a ",[325,353,354],{},"Date[]",[325,356,357],{},"multiple"," mode and ",[325,360,361],{},"{ start, end }",[325,363,364],{},"range"," mode. No date library is involved; names and numbers come from ",[325,367,368],{},"Intl",".",[371,372,374],"h2",{"id":373},"pick-a-date","Pick a date",[376,377,382],"pre",{"className":378,"code":379,"language":380,"meta":381,"style":381},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst dueDate = ref\u003CDate | null>(null)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiCalendar v-model=\"dueDate\" aria-label=\"Due date\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[325,383,384,419,447,454,491,501,506,516,551],{"__ignoreMap":381},[385,386,389,393,397,401,404,407,410,414,416],"span",{"class":387,"line":388},"line",1,[385,390,392],{"class":391},"sMK4o","\u003C",[385,394,396],{"class":395},"swJcz","script",[385,398,400],{"class":399},"spNyl"," setup",[385,402,403],{"class":399}," lang",[385,405,406],{"class":391},"=",[385,408,409],{"class":391},"\"",[385,411,413],{"class":412},"sfazB","ts",[385,415,409],{"class":391},[385,417,418],{"class":391},">\n",[385,420,422,426,429,433,436,439,442,444],{"class":387,"line":421},2,[385,423,425],{"class":424},"s7zQu","import",[385,427,428],{"class":391}," {",[385,430,432],{"class":431},"sTEyZ"," ref",[385,434,435],{"class":391}," }",[385,437,438],{"class":424}," from",[385,440,441],{"class":391}," '",[385,443,380],{"class":412},[385,445,446],{"class":391},"'\n",[385,448,450],{"class":387,"line":449},3,[385,451,453],{"emptyLinePlaceholder":452},true,"\n",[385,455,457,460,463,465,468,470,473,476,479,482,485,488],{"class":387,"line":456},4,[385,458,459],{"class":399},"const",[385,461,462],{"class":431}," dueDate ",[385,464,406],{"class":391},[385,466,432],{"class":467},"s2Zo4",[385,469,392],{"class":391},[385,471,343],{"class":472},"sBMFI",[385,474,475],{"class":391}," |",[385,477,478],{"class":472}," null",[385,480,481],{"class":391},">",[385,483,484],{"class":431},"(",[385,486,487],{"class":391},"null",[385,489,490],{"class":431},")\n",[385,492,494,497,499],{"class":387,"line":493},5,[385,495,496],{"class":391},"\u003C\u002F",[385,498,396],{"class":395},[385,500,418],{"class":391},[385,502,504],{"class":387,"line":503},6,[385,505,453],{"emptyLinePlaceholder":452},[385,507,509,511,514],{"class":387,"line":508},7,[385,510,392],{"class":391},[385,512,513],{"class":395},"template",[385,515,418],{"class":391},[385,517,519,522,524,527,529,531,534,536,539,541,543,546,548],{"class":387,"line":518},8,[385,520,521],{"class":391},"  \u003C",[385,523,327],{"class":395},[385,525,526],{"class":399}," v-model",[385,528,406],{"class":391},[385,530,409],{"class":391},[385,532,533],{"class":412},"dueDate",[385,535,409],{"class":391},[385,537,538],{"class":399}," aria-label",[385,540,406],{"class":391},[385,542,409],{"class":391},[385,544,545],{"class":412},"Due date",[385,547,409],{"class":391},[385,549,550],{"class":391}," \u002F>\n",[385,552,554,556,558],{"class":387,"line":553},9,[385,555,496],{"class":391},[385,557,513],{"class":395},[385,559,418],{"class":391},[322,561,562],{},"Picking a day keeps the time of the previous value, so a date that already has a time keeps it.",[371,564,566],{"id":565},"pick-a-range","Pick a range",[322,568,569,570,572,573,576],{},"In ",[325,571,364],{}," mode the first click sets the start and the second sets the end. Until the end is picked, the days between the start and the pointer (or the focused day) are highlighted. Clicking a day before the start begins a new range. ",[325,574,575],{},"months"," shows several months side by side:",[376,578,580],{"className":378,"code":579,"language":380,"meta":381,"style":381},"\u003Cscript setup lang=\"ts\">\nimport type { IDateRange } from '@colorffy\u002Fui'\n\nconst period = ref\u003CIDateRange>({ start: null, end: null })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiCalendar v-model=\"period\" mode=\"range\" :months=\"2\" aria-label=\"Report period\" \u002F>\n\u003C\u002Ftemplate>\n",[325,581,582,602,625,629,672,680,684,692,745],{"__ignoreMap":381},[385,583,584,586,588,590,592,594,596,598,600],{"class":387,"line":388},[385,585,392],{"class":391},[385,587,396],{"class":395},[385,589,400],{"class":399},[385,591,403],{"class":399},[385,593,406],{"class":391},[385,595,409],{"class":391},[385,597,413],{"class":412},[385,599,409],{"class":391},[385,601,418],{"class":391},[385,603,604,606,609,611,614,616,618,620,623],{"class":387,"line":421},[385,605,425],{"class":424},[385,607,608],{"class":424}," type",[385,610,428],{"class":391},[385,612,613],{"class":431}," IDateRange",[385,615,435],{"class":391},[385,617,438],{"class":424},[385,619,441],{"class":391},[385,621,622],{"class":412},"@colorffy\u002Fui",[385,624,446],{"class":391},[385,626,627],{"class":387,"line":449},[385,628,453],{"emptyLinePlaceholder":452},[385,630,631,633,636,638,640,642,645,647,649,652,655,658,661,664,666,668,670],{"class":387,"line":456},[385,632,459],{"class":399},[385,634,635],{"class":431}," period ",[385,637,406],{"class":391},[385,639,432],{"class":467},[385,641,392],{"class":391},[385,643,644],{"class":472},"IDateRange",[385,646,481],{"class":391},[385,648,484],{"class":431},[385,650,651],{"class":391},"{",[385,653,654],{"class":395}," start",[385,656,657],{"class":391},":",[385,659,660],{"class":391}," null,",[385,662,663],{"class":395}," end",[385,665,657],{"class":391},[385,667,478],{"class":391},[385,669,435],{"class":391},[385,671,490],{"class":431},[385,673,674,676,678],{"class":387,"line":493},[385,675,496],{"class":391},[385,677,396],{"class":395},[385,679,418],{"class":391},[385,681,682],{"class":387,"line":503},[385,683,453],{"emptyLinePlaceholder":452},[385,685,686,688,690],{"class":387,"line":508},[385,687,392],{"class":391},[385,689,513],{"class":395},[385,691,418],{"class":391},[385,693,694,696,698,700,702,704,707,709,712,714,716,718,720,723,725,727,730,732,734,736,738,741,743],{"class":387,"line":518},[385,695,521],{"class":391},[385,697,327],{"class":395},[385,699,526],{"class":399},[385,701,406],{"class":391},[385,703,409],{"class":391},[385,705,706],{"class":412},"period",[385,708,409],{"class":391},[385,710,711],{"class":399}," mode",[385,713,406],{"class":391},[385,715,409],{"class":391},[385,717,364],{"class":412},[385,719,409],{"class":391},[385,721,722],{"class":399}," :months",[385,724,406],{"class":391},[385,726,409],{"class":391},[385,728,729],{"class":412},"2",[385,731,409],{"class":391},[385,733,538],{"class":399},[385,735,406],{"class":391},[385,737,409],{"class":391},[385,739,740],{"class":412},"Report period",[385,742,409],{"class":391},[385,744,550],{"class":391},[385,746,747,749,751],{"class":387,"line":553},[385,748,496],{"class":391},[385,750,513],{"class":395},[385,752,418],{"class":391},[322,754,755,756,759,760,763],{},"Picking the start emits ",[325,757,758],{},"{ start, end: null }",", so watch for a non-null ",[325,761,762],{},"end"," before fetching.",[371,765,767],{"id":766},"pick-several-dates","Pick several dates",[322,769,770,772],{},[325,771,357],{}," mode toggles each day on and off. The array is kept in date order:",[376,774,776],{"className":378,"code":775,"language":380,"meta":381,"style":381},"\u003Cscript setup lang=\"ts\">\nconst officeDays = ref\u003CDate[]>([])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiCalendar v-model=\"officeDays\" mode=\"multiple\" aria-label=\"Office days\" \u002F>\n\u003C\u002Ftemplate>\n",[325,777,778,798,821,829,833,841,881],{"__ignoreMap":381},[385,779,780,782,784,786,788,790,792,794,796],{"class":387,"line":388},[385,781,392],{"class":391},[385,783,396],{"class":395},[385,785,400],{"class":399},[385,787,403],{"class":399},[385,789,406],{"class":391},[385,791,409],{"class":391},[385,793,413],{"class":412},[385,795,409],{"class":391},[385,797,418],{"class":391},[385,799,800,802,805,807,809,811,813,816,818],{"class":387,"line":421},[385,801,459],{"class":399},[385,803,804],{"class":431}," officeDays ",[385,806,406],{"class":391},[385,808,432],{"class":467},[385,810,392],{"class":391},[385,812,343],{"class":472},[385,814,815],{"class":431},"[]",[385,817,481],{"class":391},[385,819,820],{"class":431},"([])\n",[385,822,823,825,827],{"class":387,"line":449},[385,824,496],{"class":391},[385,826,396],{"class":395},[385,828,418],{"class":391},[385,830,831],{"class":387,"line":456},[385,832,453],{"emptyLinePlaceholder":452},[385,834,835,837,839],{"class":387,"line":493},[385,836,392],{"class":391},[385,838,513],{"class":395},[385,840,418],{"class":391},[385,842,843,845,847,849,851,853,856,858,860,862,864,866,868,870,872,874,877,879],{"class":387,"line":503},[385,844,521],{"class":391},[385,846,327],{"class":395},[385,848,526],{"class":399},[385,850,406],{"class":391},[385,852,409],{"class":391},[385,854,855],{"class":412},"officeDays",[385,857,409],{"class":391},[385,859,711],{"class":399},[385,861,406],{"class":391},[385,863,409],{"class":391},[385,865,357],{"class":412},[385,867,409],{"class":391},[385,869,538],{"class":399},[385,871,406],{"class":391},[385,873,409],{"class":391},[385,875,876],{"class":412},"Office days",[385,878,409],{"class":391},[385,880,550],{"class":391},[385,882,883,885,887],{"class":387,"line":508},[385,884,496],{"class":391},[385,886,513],{"class":395},[385,888,418],{"class":391},[371,890,892],{"id":891},"limit-the-dates","Limit the dates",[322,894,895,898,899,902,903,906],{},[325,896,897],{},"min"," and ",[325,900,901],{},"max"," disable the days outside them and stop the month buttons at their months. ",[325,904,905],{},"disabledDates"," disables any other day; it receives a copy of each day:",[376,908,910],{"className":378,"code":909,"language":380,"meta":381,"style":381},"\u003Cscript setup lang=\"ts\">\nconst today = new Date()\nconst isWeekend = (date: Date) => date.getDay() === 0 || date.getDay() === 6\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiCalendar\n    v-model=\"delivery\"\n    :min=\"today\"\n    :max=\"new Date(today.getFullYear(), today.getMonth() + 2, 0)\"\n    :disabled-dates=\"isWeekend\"\n    aria-label=\"Delivery date\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[325,911,912,932,950,1010,1018,1022,1030,1037,1052,1066,1081,1096,1111,1117],{"__ignoreMap":381},[385,913,914,916,918,920,922,924,926,928,930],{"class":387,"line":388},[385,915,392],{"class":391},[385,917,396],{"class":395},[385,919,400],{"class":399},[385,921,403],{"class":399},[385,923,406],{"class":391},[385,925,409],{"class":391},[385,927,413],{"class":412},[385,929,409],{"class":391},[385,931,418],{"class":391},[385,933,934,936,939,941,944,947],{"class":387,"line":421},[385,935,459],{"class":399},[385,937,938],{"class":431}," today ",[385,940,406],{"class":391},[385,942,943],{"class":391}," new",[385,945,946],{"class":467}," Date",[385,948,949],{"class":431},"()\n",[385,951,952,954,957,959,962,966,968,970,973,976,979,981,984,987,990,994,997,999,1001,1003,1005,1007],{"class":387,"line":449},[385,953,459],{"class":399},[385,955,956],{"class":431}," isWeekend ",[385,958,406],{"class":391},[385,960,961],{"class":391}," (",[385,963,965],{"class":964},"sHdIc","date",[385,967,657],{"class":391},[385,969,946],{"class":472},[385,971,972],{"class":391},")",[385,974,975],{"class":399}," =>",[385,977,978],{"class":431}," date",[385,980,369],{"class":391},[385,982,983],{"class":467},"getDay",[385,985,986],{"class":431},"() ",[385,988,989],{"class":391},"===",[385,991,993],{"class":992},"sbssI"," 0",[385,995,996],{"class":391}," ||",[385,998,978],{"class":431},[385,1000,369],{"class":391},[385,1002,983],{"class":467},[385,1004,986],{"class":431},[385,1006,989],{"class":391},[385,1008,1009],{"class":992}," 6\n",[385,1011,1012,1014,1016],{"class":387,"line":456},[385,1013,496],{"class":391},[385,1015,396],{"class":395},[385,1017,418],{"class":391},[385,1019,1020],{"class":387,"line":493},[385,1021,453],{"emptyLinePlaceholder":452},[385,1023,1024,1026,1028],{"class":387,"line":503},[385,1025,392],{"class":391},[385,1027,513],{"class":395},[385,1029,418],{"class":391},[385,1031,1032,1034],{"class":387,"line":508},[385,1033,521],{"class":391},[385,1035,1036],{"class":395},"UiCalendar\n",[385,1038,1039,1042,1044,1046,1049],{"class":387,"line":518},[385,1040,1041],{"class":399},"    v-model",[385,1043,406],{"class":391},[385,1045,409],{"class":391},[385,1047,1048],{"class":412},"delivery",[385,1050,1051],{"class":391},"\"\n",[385,1053,1054,1057,1059,1061,1064],{"class":387,"line":553},[385,1055,1056],{"class":399},"    :min",[385,1058,406],{"class":391},[385,1060,409],{"class":391},[385,1062,1063],{"class":412},"today",[385,1065,1051],{"class":391},[385,1067,1069,1072,1074,1076,1079],{"class":387,"line":1068},10,[385,1070,1071],{"class":399},"    :max",[385,1073,406],{"class":391},[385,1075,409],{"class":391},[385,1077,1078],{"class":412},"new Date(today.getFullYear(), today.getMonth() + 2, 0)",[385,1080,1051],{"class":391},[385,1082,1084,1087,1089,1091,1094],{"class":387,"line":1083},11,[385,1085,1086],{"class":399},"    :disabled-dates",[385,1088,406],{"class":391},[385,1090,409],{"class":391},[385,1092,1093],{"class":412},"isWeekend",[385,1095,1051],{"class":391},[385,1097,1099,1102,1104,1106,1109],{"class":387,"line":1098},12,[385,1100,1101],{"class":399},"    aria-label",[385,1103,406],{"class":391},[385,1105,409],{"class":391},[385,1107,1108],{"class":412},"Delivery date",[385,1110,1051],{"class":391},[385,1112,1114],{"class":387,"line":1113},13,[385,1115,1116],{"class":391},"  \u002F>\n",[385,1118,1120,1122,1124],{"class":387,"line":1119},14,[385,1121,496],{"class":391},[385,1123,513],{"class":395},[385,1125,418],{"class":391},[322,1127,1128],{},"Disabled days stay focusable, so keyboard users can move through them; they can't be picked.",[371,1130,1132],{"id":1131},"control-the-visible-month","Control the visible month",[322,1134,1135,1136,1139],{},"The calendar opens on the month of the selection, or of today, and stays there while you pick. Bind ",[325,1137,1138],{},"v-model:month"," to choose the first visible month or to follow navigation:",[376,1141,1143],{"className":378,"code":1142,"language":380,"meta":381,"style":381},"\u003Ctemplate>\n  \u003CUiCalendar v-model=\"date\" v-model:month=\"month\" \u002F>\n  \u003CUiButton text=\"Today\" variant=\"text\" size=\"sm\" @click=\"month = new Date()\" \u002F>\n\u003C\u002Ftemplate>\n",[325,1144,1145,1153,1183,1240],{"__ignoreMap":381},[385,1146,1147,1149,1151],{"class":387,"line":388},[385,1148,392],{"class":391},[385,1150,513],{"class":395},[385,1152,418],{"class":391},[385,1154,1155,1157,1159,1161,1163,1165,1167,1169,1172,1174,1176,1179,1181],{"class":387,"line":421},[385,1156,521],{"class":391},[385,1158,327],{"class":395},[385,1160,526],{"class":399},[385,1162,406],{"class":391},[385,1164,409],{"class":391},[385,1166,965],{"class":412},[385,1168,409],{"class":391},[385,1170,1171],{"class":399}," v-model:month",[385,1173,406],{"class":391},[385,1175,409],{"class":391},[385,1177,1178],{"class":412},"month",[385,1180,409],{"class":391},[385,1182,550],{"class":391},[385,1184,1185,1187,1190,1193,1195,1197,1200,1202,1205,1207,1209,1212,1214,1217,1219,1221,1224,1226,1229,1231,1233,1236,1238],{"class":387,"line":449},[385,1186,521],{"class":391},[385,1188,1189],{"class":395},"UiButton",[385,1191,1192],{"class":399}," text",[385,1194,406],{"class":391},[385,1196,409],{"class":391},[385,1198,1199],{"class":412},"Today",[385,1201,409],{"class":391},[385,1203,1204],{"class":399}," variant",[385,1206,406],{"class":391},[385,1208,409],{"class":391},[385,1210,1211],{"class":412},"text",[385,1213,409],{"class":391},[385,1215,1216],{"class":399}," size",[385,1218,406],{"class":391},[385,1220,409],{"class":391},[385,1222,1223],{"class":412},"sm",[385,1225,409],{"class":391},[385,1227,1228],{"class":399}," @click",[385,1230,406],{"class":391},[385,1232,409],{"class":391},[385,1234,1235],{"class":412},"month = new Date()",[385,1237,409],{"class":391},[385,1239,550],{"class":391},[385,1241,1242,1244,1246],{"class":387,"line":456},[385,1243,496],{"class":391},[385,1245,513],{"class":395},[385,1247,418],{"class":391},[371,1249,1251],{"id":1250},"fill-the-width","Fill the width",[322,1253,1254,1257,1258,1260],{},[325,1255,1256],{},"fluid"," makes the calendar fill its container, as calendars in mobile apps do: each day takes a seventh of the width, up to 3.5rem, range strips run edge to edge, and several months stack instead of sitting side by side. It's what ",[325,1259,335],{}," uses on phones.",[376,1262,1264],{"className":378,"code":1263,"language":380,"meta":381,"style":381},"\u003Ctemplate>\n  \u003CUiCalendar v-model=\"stay\" mode=\"range\" :months=\"2\" fluid aria-label=\"Stay\" \u002F>\n\u003C\u002Ftemplate>\n",[325,1265,1266,1274,1327],{"__ignoreMap":381},[385,1267,1268,1270,1272],{"class":387,"line":388},[385,1269,392],{"class":391},[385,1271,513],{"class":395},[385,1273,418],{"class":391},[385,1275,1276,1278,1280,1282,1284,1286,1289,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309,1311,1314,1316,1318,1320,1323,1325],{"class":387,"line":421},[385,1277,521],{"class":391},[385,1279,327],{"class":395},[385,1281,526],{"class":399},[385,1283,406],{"class":391},[385,1285,409],{"class":391},[385,1287,1288],{"class":412},"stay",[385,1290,409],{"class":391},[385,1292,711],{"class":399},[385,1294,406],{"class":391},[385,1296,409],{"class":391},[385,1298,364],{"class":412},[385,1300,409],{"class":391},[385,1302,722],{"class":399},[385,1304,406],{"class":391},[385,1306,409],{"class":391},[385,1308,729],{"class":412},[385,1310,409],{"class":391},[385,1312,1313],{"class":399}," fluid",[385,1315,538],{"class":399},[385,1317,406],{"class":391},[385,1319,409],{"class":391},[385,1321,1322],{"class":412},"Stay",[385,1324,409],{"class":391},[385,1326,550],{"class":391},[385,1328,1329,1331,1333],{"class":387,"line":449},[385,1330,496],{"class":391},[385,1332,513],{"class":395},[385,1334,418],{"class":391},[322,1336,1337],{},"The day size comes from container query units, so the calendar sizes itself to its parent, not the viewport.",[371,1339,1341],{"id":1340},"locale-and-week-start","Locale and week start",[322,1343,1344,1345,1348,1349,1352,1353,1355,1356,1359,1360,1363,1364,1367,1368,1371,1372,1375,1376,1379,1380,1383],{},"Month and weekday names follow ",[325,1346,1347],{},"locale",". Without it, the calendar uses the page's ",[325,1350,1351],{},"lang",", then the browser's language, once it's mounted; pass ",[325,1354,1347],{}," when you render on the server so both sides agree. The week starts on the locale's first day (Sunday for ",[325,1357,1358],{},"en-US",", Monday for ",[325,1361,1362],{},"de-DE",", Saturday for ",[325,1365,1366],{},"ar-EG","); ",[325,1369,1370],{},"weekStart"," overrides it (",[325,1373,1374],{},"0"," = Sunday … ",[325,1377,1378],{},"6"," = Saturday). Inside ",[325,1381,1382],{},"dir=\"rtl\"",", the arrows and the keyboard follow the reading direction.",[376,1385,1387],{"className":378,"code":1386,"language":380,"meta":381,"style":381},"\u003Ctemplate>\n  \u003CUiCalendar\n    v-model=\"date\"\n    locale=\"es-SV\"\n    aria-label=\"Fecha\"\n    :labels=\"{\n      previousMonth: 'Mes anterior',\n      nextMonth: 'Mes siguiente',\n      rangeStart: 'Fecha de inicio {date}. Elige la fecha final.',\n    }\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[325,1388,1389,1397,1403,1415,1429,1442,1454,1459,1464,1469,1476,1480],{"__ignoreMap":381},[385,1390,1391,1393,1395],{"class":387,"line":388},[385,1392,392],{"class":391},[385,1394,513],{"class":395},[385,1396,418],{"class":391},[385,1398,1399,1401],{"class":387,"line":421},[385,1400,521],{"class":391},[385,1402,1036],{"class":395},[385,1404,1405,1407,1409,1411,1413],{"class":387,"line":449},[385,1406,1041],{"class":399},[385,1408,406],{"class":391},[385,1410,409],{"class":391},[385,1412,965],{"class":412},[385,1414,1051],{"class":391},[385,1416,1417,1420,1422,1424,1427],{"class":387,"line":456},[385,1418,1419],{"class":399},"    locale",[385,1421,406],{"class":391},[385,1423,409],{"class":391},[385,1425,1426],{"class":412},"es-SV",[385,1428,1051],{"class":391},[385,1430,1431,1433,1435,1437,1440],{"class":387,"line":493},[385,1432,1101],{"class":399},[385,1434,406],{"class":391},[385,1436,409],{"class":391},[385,1438,1439],{"class":412},"Fecha",[385,1441,1051],{"class":391},[385,1443,1444,1447,1449,1451],{"class":387,"line":503},[385,1445,1446],{"class":399},"    :labels",[385,1448,406],{"class":391},[385,1450,409],{"class":391},[385,1452,1453],{"class":412},"{\n",[385,1455,1456],{"class":387,"line":508},[385,1457,1458],{"class":412},"      previousMonth: 'Mes anterior',\n",[385,1460,1461],{"class":387,"line":518},[385,1462,1463],{"class":412},"      nextMonth: 'Mes siguiente',\n",[385,1465,1466],{"class":387,"line":553},[385,1467,1468],{"class":412},"      rangeStart: 'Fecha de inicio {date}. Elige la fecha final.',\n",[385,1470,1471,1474],{"class":387,"line":1068},[385,1472,1473],{"class":412},"    }",[385,1475,1051],{"class":391},[385,1477,1478],{"class":387,"line":1083},[385,1479,1116],{"class":391},[385,1481,1482,1484,1486],{"class":387,"line":1098},[385,1483,496],{"class":391},[385,1485,513],{"class":395},[385,1487,418],{"class":391},[371,1489,1491],{"id":1490},"custom-day-content","Custom day content",[322,1493,1494,1495,1498,1499,1501,1502,1501,1505,1501,1508,898,1510,1513,1514,1517],{},"The ",[325,1496,1497],{},"#day"," slot replaces the number inside each day button. It receives ",[325,1500,965],{},", ",[325,1503,1504],{},"selected",[325,1506,1507],{},"disabled",[325,1509,1063],{},[325,1511,1512],{},"inRange",". The slot renders inside a ",[325,1515,1516],{},"\u003Cbutton>",", so use inline elements:",[376,1519,1521],{"className":378,"code":1520,"language":380,"meta":381,"style":381},"\u003Ctemplate>\n  \u003CUiCalendar v-model=\"date\" aria-label=\"Deadlines\">\n    \u003Ctemplate #day=\"{ date: day }\">\n      {{ day.getDate() }}\n      \u003Cspan v-if=\"hasDeadline(day)\" class=\"deadline-dot\" aria-hidden=\"true\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FUiCalendar>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.deadline-dot {\n  inline-size: 4px;\n  block-size: 4px;\n  border-radius: 50%;\n  background: currentColor;\n}\n\u003C\u002Fstyle>\n",[325,1522,1523,1531,1560,1593,1598,1643,1652,1661,1669,1673,1685,1694,1708,1719,1731,1744,1750],{"__ignoreMap":381},[385,1524,1525,1527,1529],{"class":387,"line":388},[385,1526,392],{"class":391},[385,1528,513],{"class":395},[385,1530,418],{"class":391},[385,1532,1533,1535,1537,1539,1541,1543,1545,1547,1549,1551,1553,1556,1558],{"class":387,"line":421},[385,1534,521],{"class":391},[385,1536,327],{"class":395},[385,1538,526],{"class":399},[385,1540,406],{"class":391},[385,1542,409],{"class":391},[385,1544,965],{"class":412},[385,1546,409],{"class":391},[385,1548,538],{"class":399},[385,1550,406],{"class":391},[385,1552,409],{"class":391},[385,1554,1555],{"class":412},"Deadlines",[385,1557,409],{"class":391},[385,1559,418],{"class":391},[385,1561,1562,1565,1567,1570,1573,1575,1577,1579,1581,1583,1586,1589,1591],{"class":387,"line":449},[385,1563,1564],{"class":391},"    \u003C",[385,1566,513],{"class":395},[385,1568,1569],{"class":391}," #",[385,1571,1572],{"class":399},"day",[385,1574,406],{"class":391},[385,1576,409],{"class":391},[385,1578,651],{"class":391},[385,1580,978],{"class":395},[385,1582,657],{"class":391},[385,1584,1585],{"class":431}," day ",[385,1587,1588],{"class":391},"}",[385,1590,409],{"class":391},[385,1592,418],{"class":391},[385,1594,1595],{"class":387,"line":456},[385,1596,1597],{"class":431},"      {{ day.getDate() }}\n",[385,1599,1600,1603,1605,1608,1610,1612,1615,1617,1620,1622,1624,1627,1629,1632,1634,1636,1639,1641],{"class":387,"line":493},[385,1601,1602],{"class":391},"      \u003C",[385,1604,385],{"class":395},[385,1606,1607],{"class":399}," v-if",[385,1609,406],{"class":391},[385,1611,409],{"class":391},[385,1613,1614],{"class":412},"hasDeadline(day)",[385,1616,409],{"class":391},[385,1618,1619],{"class":399}," class",[385,1621,406],{"class":391},[385,1623,409],{"class":391},[385,1625,1626],{"class":412},"deadline-dot",[385,1628,409],{"class":391},[385,1630,1631],{"class":399}," aria-hidden",[385,1633,406],{"class":391},[385,1635,409],{"class":391},[385,1637,1638],{"class":412},"true",[385,1640,409],{"class":391},[385,1642,550],{"class":391},[385,1644,1645,1648,1650],{"class":387,"line":503},[385,1646,1647],{"class":391},"    \u003C\u002F",[385,1649,513],{"class":395},[385,1651,418],{"class":391},[385,1653,1654,1657,1659],{"class":387,"line":508},[385,1655,1656],{"class":391},"  \u003C\u002F",[385,1658,327],{"class":395},[385,1660,418],{"class":391},[385,1662,1663,1665,1667],{"class":387,"line":518},[385,1664,496],{"class":391},[385,1666,513],{"class":395},[385,1668,418],{"class":391},[385,1670,1671],{"class":387,"line":553},[385,1672,453],{"emptyLinePlaceholder":452},[385,1674,1675,1677,1680,1683],{"class":387,"line":1068},[385,1676,392],{"class":391},[385,1678,1679],{"class":395},"style",[385,1681,1682],{"class":399}," scoped",[385,1684,418],{"class":391},[385,1686,1687,1689,1691],{"class":387,"line":1083},[385,1688,369],{"class":391},[385,1690,1626],{"class":472},[385,1692,1693],{"class":391}," {\n",[385,1695,1696,1700,1702,1705],{"class":387,"line":1098},[385,1697,1699],{"class":1698},"sqsOY","  inline-size",[385,1701,657],{"class":391},[385,1703,1704],{"class":992}," 4px",[385,1706,1707],{"class":391},";\n",[385,1709,1710,1713,1715,1717],{"class":387,"line":1113},[385,1711,1712],{"class":1698},"  block-size",[385,1714,657],{"class":391},[385,1716,1704],{"class":992},[385,1718,1707],{"class":391},[385,1720,1721,1724,1726,1729],{"class":387,"line":1119},[385,1722,1723],{"class":1698},"  border-radius",[385,1725,657],{"class":391},[385,1727,1728],{"class":992}," 50%",[385,1730,1707],{"class":391},[385,1732,1734,1737,1739,1742],{"class":387,"line":1733},15,[385,1735,1736],{"class":1698},"  background",[385,1738,657],{"class":391},[385,1740,1741],{"class":431}," currentColor",[385,1743,1707],{"class":391},[385,1745,1747],{"class":387,"line":1746},16,[385,1748,1749],{"class":391},"}\n",[385,1751,1753,1755,1757],{"class":387,"line":1752},17,[385,1754,496],{"class":391},[385,1756,1679],{"class":395},[385,1758,418],{"class":391},[322,1760,1761],{},"The day button is a grid, so the number and the dot stack.",[322,1763,1764,1765,1768,1769,1772],{},"With one month, the days of the neighboring months fill the first and last weeks; they can't be picked. Set ",[325,1766,1767],{},"showOutsideDays"," to ",[325,1770,1771],{},"false"," to leave those cells empty. With several months they are always empty. Every month has six rows, so the height doesn't change while you navigate.",[371,1774,1776],{"id":1775},"accessibility","Accessibility",[1778,1779,1780,1791,1805,1808],"ul",{},[1781,1782,1783,1784,1787,1788,369],"li",{},"Each month is a ",[325,1785,1786],{},"role=\"grid\""," table labelled by its title. The weekday headers carry the full day name in ",[325,1789,1790],{},"abbr",[1781,1792,1793,1794,1797,1798,1801,1802,369],{},"Each day is a button named with the full date (\"Sunday, October 4, 2026\"). Its cell reports ",[325,1795,1796],{},"aria-selected",", today has ",[325,1799,1800],{},"aria-current=\"date\""," and disabled days have ",[325,1803,1804],{},"aria-disabled",[1781,1806,1807],{},"Only one day is in the tab order: the last focused day, else the selection, else today.",[1781,1809,1810],{},"Changing month and picking a range start are announced through a polite live region.",[1812,1813,1814,1827],"table",{},[1815,1816,1817],"thead",{},[1818,1819,1820,1824],"tr",{},[1821,1822,1823],"th",{},"Key",[1821,1825,1826],{},"Moves focus to",[1828,1829,1830,1845,1858,1871,1884,1899],"tbody",{},[1818,1831,1832,1842],{},[1833,1834,1835,1838,1839],"td",{},[325,1836,1837],{},"←"," \u002F ",[325,1840,1841],{},"→",[1833,1843,1844],{},"Previous \u002F next day",[1818,1846,1847,1855],{},[1833,1848,1849,1838,1852],{},[325,1850,1851],{},"↑",[325,1853,1854],{},"↓",[1833,1856,1857],{},"Same day in the previous \u002F next week",[1818,1859,1860,1868],{},[1833,1861,1862,1838,1865],{},[325,1863,1864],{},"Home",[325,1866,1867],{},"End",[1833,1869,1870],{},"First \u002F last day of the week",[1818,1872,1873,1881],{},[1833,1874,1875,1838,1878],{},[325,1876,1877],{},"Page Up",[325,1879,1880],{},"Page Down",[1833,1882,1883],{},"Same day in the previous \u002F next month",[1818,1885,1886,1896],{},[1833,1887,1888,1891,1892,1838,1894],{},[325,1889,1890],{},"Shift"," + ",[325,1893,1877],{},[325,1895,1880],{},[1833,1897,1898],{},"Same day in the previous \u002F next year",[1818,1900,1901,1909],{},[1833,1902,1903,1838,1906],{},[325,1904,1905],{},"Enter",[325,1907,1908],{},"Space",[1833,1910,1911],{},"Picks the focused day",[322,1913,1914,1915,1917,1918,369],{},"Moving past the visible months turns the page, and focus never leaves ",[325,1916,897],{},"\u002F",[325,1919,901],{},[371,1921,1923],{"id":1922},"props","Props",[1812,1925,1926,1942],{},[1815,1927,1928],{},[1818,1929,1930,1933,1936,1939],{},[1821,1931,1932],{},"Prop",[1821,1934,1935],{},"Type",[1821,1937,1938],{},"Default",[1821,1940,1941],{},"Description",[1828,1943,1944,1965,1985,2005,2024,2043,2064,2085,2109,2127,2144,2161,2181,2200],{},[1818,1945,1946,1951,1956,1960],{},[1833,1947,1948],{},[325,1949,1950],{},"modelValue",[1833,1952,1953],{},[325,1954,1955],{},"Date | Date[] | IDateRange | null",[1833,1957,1958],{},[325,1959,487],{},[1833,1961,1962,1963,369],{},"Selection. Bind with ",[325,1964,339],{},[1818,1966,1967,1972,1977,1982],{},[1833,1968,1969],{},[325,1970,1971],{},"mode",[1833,1973,1974],{},[325,1975,1976],{},"'single' | 'multiple' | 'range'",[1833,1978,1979],{},[325,1980,1981],{},"'single'",[1833,1983,1984],{},"One date, any number of dates, or a range.",[1818,1986,1987,1991,1996,2000],{},[1833,1988,1989],{},[325,1990,1178],{},[1833,1992,1993],{},[325,1994,1995],{},"Date | null",[1833,1997,1998],{},[325,1999,487],{},[1833,2001,2002,2003,369],{},"First visible month. Bind with ",[325,2004,1138],{},[1818,2006,2007,2011,2016,2021],{},[1833,2008,2009],{},[325,2010,575],{},[1833,2012,2013],{},[325,2014,2015],{},"number",[1833,2017,2018],{},[325,2019,2020],{},"1",[1833,2022,2023],{},"Months shown side by side.",[1818,2025,2026,2032,2036,2040],{},[1833,2027,2028,1838,2030],{},[325,2029,897],{},[325,2031,901],{},[1833,2033,2034],{},[325,2035,1995],{},[1833,2037,2038],{},[325,2039,487],{},[1833,2041,2042],{},"First and last pickable days.",[1818,2044,2045,2049,2054,2058],{},[1833,2046,2047],{},[325,2048,905],{},[1833,2050,2051],{},[325,2052,2053],{},"((date: Date) => boolean) | null",[1833,2055,2056],{},[325,2057,487],{},[1833,2059,2060,2061,2063],{},"Returns ",[325,2062,1638],{}," for days that can't be picked.",[1818,2065,2066,2070,2075,2079],{},[1833,2067,2068],{},[325,2069,1347],{},[1833,2071,2072],{},[325,2073,2074],{},"string | null",[1833,2076,2077],{},[325,2078,487],{},[1833,2080,2081,2082,2084],{},"BCP 47 locale. Defaults to the page's ",[325,2083,1351],{},", then the browser's language.",[1818,2086,2087,2091,2096,2100],{},[1833,2088,2089],{},[325,2090,1370],{},[1833,2092,2093],{},[325,2094,2095],{},"number | null",[1833,2097,2098],{},[325,2099,487],{},[1833,2101,2102,2103,2105,2106,2108],{},"First day of the week, ",[325,2104,1374],{}," (Sunday) to ",[325,2107,1378],{}," (Saturday). Defaults to the locale's.",[1818,2110,2111,2115,2120,2124],{},[1833,2112,2113],{},[325,2114,1767],{},[1833,2116,2117],{},[325,2118,2119],{},"boolean",[1833,2121,2122],{},[325,2123,1638],{},[1833,2125,2126],{},"Show the neighboring months' days in a single-month calendar.",[1818,2128,2129,2133,2137,2141],{},[1833,2130,2131],{},[325,2132,1256],{},[1833,2134,2135],{},[325,2136,2119],{},[1833,2138,2139],{},[325,2140,1771],{},[1833,2142,2143],{},"Fill the container's width, with days up to 3.5rem and stacked months.",[1818,2145,2146,2150,2154,2158],{},[1833,2147,2148],{},[325,2149,1507],{},[1833,2151,2152],{},[325,2153,2119],{},[1833,2155,2156],{},[325,2157,1771],{},[1833,2159,2160],{},"Disable every day and the month buttons.",[1818,2162,2163,2168,2173,2178],{},[1833,2164,2165],{},[325,2166,2167],{},"ariaLabel",[1833,2169,2170],{},[325,2171,2172],{},"string",[1833,2174,2175],{},[325,2176,2177],{},"'Calendar'",[1833,2179,2180],{},"Name of the calendar group.",[1818,2182,2183,2188,2193,2197],{},[1833,2184,2185],{},[325,2186,2187],{},"labels",[1833,2189,2190],{},[325,2191,2192],{},"Partial\u003CICalendarLabels> | null",[1833,2194,2195],{},[325,2196,487],{},[1833,2198,2199],{},"Text for the month buttons and announcements.",[1818,2201,2202,2207,2212,2216],{},[1833,2203,2204],{},[325,2205,2206],{},"customClass",[1833,2208,2209],{},[325,2210,2211],{},"ClassValue | null",[1833,2213,2214],{},[325,2215,487],{},[1833,2217,2218],{},"Classes for the root element.",[322,2220,2221,2229,2230,961,2233,2236,2237,961,2240,2236,2243,961,2246,1501,2249,2252,2253,2229,2256,1501,2259,1501,2262,2265,2266,2229,2269,961,2271,2274],{},[2222,2223,2224,2225,2228],"strong",{},"Labels (",[325,2226,2227],{},"ICalendarLabels","):"," ",[325,2231,2232],{},"previousMonth",[325,2234,2235],{},"'Previous month'","), ",[325,2238,2239],{},"nextMonth",[325,2241,2242],{},"'Next month'",[325,2244,2245],{},"rangeStart",[325,2247,2248],{},"'Start date {date} selected. Pick an end date.'",[325,2250,2251],{},"{date}"," is replaced with the full date).\n",[2222,2254,2255],{},"Emits:",[325,2257,2258],{},"update:modelValue(value)",[325,2260,2261],{},"update:month(month)",[325,2263,2264],{},"select(date)"," (the picked day).\n",[2222,2267,2268],{},"Slots:",[325,2270,1572],{},[325,2272,2273],{},"ICalendarDaySlot",").",[371,2276,2278],{"id":2277},"css-variables","CSS variables",[322,2280,2281,2282,2285,2286,2290],{},"Set these on ",[325,2283,2284],{},":root",", or on any wrapper to restyle only the calendars inside it. Days take their corners from the ",[330,2287,2289],{"href":2288},"\u002Fcolorffy-css\u002Fcustomization#shape-roles","control shape"," and their hover and pressed backgrounds from the state layer.",[376,2292,2296],{"className":2293,"code":2294,"language":2295,"meta":381,"style":381},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n  --cffy-calendar-day-size: 2.5rem;\n  --cffy-calendar-day-radius: var(--cffy-radius-full);\n  --cffy-calendar-range-bg-color: var(--cffy-secondary-container);\n}\n","css",[325,2297,2298,2307,2319,2337,2353],{"__ignoreMap":381},[385,2299,2300,2302,2305],{"class":387,"line":388},[385,2301,657],{"class":391},[385,2303,2304],{"class":399},"root",[385,2306,1693],{"class":391},[385,2308,2309,2312,2314,2317],{"class":387,"line":421},[385,2310,2311],{"class":431},"  --cffy-calendar-day-size",[385,2313,657],{"class":391},[385,2315,2316],{"class":992}," 2.5rem",[385,2318,1707],{"class":391},[385,2320,2321,2324,2326,2329,2331,2334],{"class":387,"line":449},[385,2322,2323],{"class":431},"  --cffy-calendar-day-radius",[385,2325,657],{"class":391},[385,2327,2328],{"class":467}," var",[385,2330,484],{"class":391},[385,2332,2333],{"class":431},"--cffy-radius-full",[385,2335,2336],{"class":391},");\n",[385,2338,2339,2342,2344,2346,2348,2351],{"class":387,"line":456},[385,2340,2341],{"class":431},"  --cffy-calendar-range-bg-color",[385,2343,657],{"class":391},[385,2345,2328],{"class":467},[385,2347,484],{"class":391},[385,2349,2350],{"class":431},"--cffy-secondary-container",[385,2352,2336],{"class":391},[385,2354,2355],{"class":387,"line":493},[385,2356,1749],{"class":391},[1812,2358,2359,2371],{},[1815,2360,2361],{},[1818,2362,2363,2366,2368],{},[1821,2364,2365],{},"Variable",[1821,2367,1938],{},[1821,2369,2370],{},"Controls",[1828,2372,2373,2394,2409,2430,2445,2461,2476,2497,2518,2532],{},[1818,2374,2375,2383,2391],{},[1833,2376,2377,1838,2380],{},[325,2378,2379],{},"--cffy-calendar-color",[325,2381,2382],{},"--cffy-calendar-muted-color",[1833,2384,2385,1838,2388],{},[325,2386,2387],{},"--cffy-on-background",[325,2389,2390],{},"--cffy-muted-a10",[1833,2392,2393],{},"Day text; weekday headers, neighboring and disabled days",[1818,2395,2396,2401,2406],{},[1833,2397,2398],{},[325,2399,2400],{},"--cffy-calendar-font-size",[1833,2402,2403],{},[325,2404,2405],{},"--cffy-fs-2xs",[1833,2407,2408],{},"Day numbers",[1818,2410,2411,2419,2427],{},[1833,2412,2413,1838,2416],{},[325,2414,2415],{},"--cffy-calendar-title-font-size",[325,2417,2418],{},"--cffy-calendar-title-font-weight",[1833,2420,2421,1838,2424],{},[325,2422,2423],{},"--cffy-fs-xs",[325,2425,2426],{},"--cffy-fw-700",[1833,2428,2429],{},"Month titles",[1818,2431,2432,2437,2442],{},[1833,2433,2434],{},[325,2435,2436],{},"--cffy-calendar-gap",[1833,2438,2439],{},[325,2440,2441],{},"--cffy-space-24",[1833,2443,2444],{},"Space between months",[1818,2446,2447,2452,2458],{},[1833,2448,2449],{},[325,2450,2451],{},"--cffy-calendar-day-size",[1833,2453,2454,2457],{},[325,2455,2456],{},"--cffy-control-height-md"," (2.25rem)",[1833,2459,2460],{},"Day and month button size",[1818,2462,2463,2468,2473],{},[1833,2464,2465],{},[325,2466,2467],{},"--cffy-calendar-day-radius",[1833,2469,2470],{},[325,2471,2472],{},"--cffy-shape-control",[1833,2474,2475],{},"Day and month button corners",[1818,2477,2478,2486,2494],{},[1833,2479,2480,1838,2483],{},[325,2481,2482],{},"--cffy-calendar-selected-bg-color",[325,2484,2485],{},"--cffy-calendar-selected-color",[1833,2487,2488,1838,2491],{},[325,2489,2490],{},"--cffy-primary-a10",[325,2492,2493],{},"--cffy-on-primary",[1833,2495,2496],{},"Selected days and range ends",[1818,2498,2499,2507,2515],{},[1833,2500,2501,1838,2504],{},[325,2502,2503],{},"--cffy-calendar-range-bg-color",[325,2505,2506],{},"--cffy-calendar-range-color",[1833,2508,2509,1838,2512],{},[325,2510,2511],{},"--cffy-primary-container",[325,2513,2514],{},"--cffy-on-primary-container",[1833,2516,2517],{},"Days inside a range",[1818,2519,2520,2525,2529],{},[1833,2521,2522],{},[325,2523,2524],{},"--cffy-calendar-today-color",[1833,2526,2527],{},[325,2528,2490],{},[1833,2530,2531],{},"Ring around today",[1818,2533,2534,2542,2550],{},[1833,2535,2536,1838,2539],{},[325,2537,2538],{},"--cffy-calendar-easing",[325,2540,2541],{},"--cffy-calendar-duration",[1833,2543,2544,1838,2547],{},[325,2545,2546],{},"--cffy-ease-decelerate",[325,2548,2549],{},"--cffy-duration-150",[1833,2551,2552],{},"Hover and selection transitions",[1679,2554,2555],{},"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":381,"searchDepth":421,"depth":421,"links":2557},[2558,2559,2560,2561,2562,2563,2564,2565,2566,2567,2568],{"id":373,"depth":421,"text":374},{"id":565,"depth":421,"text":566},{"id":766,"depth":421,"text":767},{"id":891,"depth":421,"text":892},{"id":1131,"depth":421,"text":1132},{"id":1250,"depth":421,"text":1251},{"id":1340,"depth":421,"text":1341},{"id":1490,"depth":421,"text":1491},{"id":1775,"depth":421,"text":1776},{"id":1922,"depth":421,"text":1923},{"id":2277,"depth":421,"text":2278},"An inline month grid for picking a date, several dates or a range, with keyboard navigation and locale-aware names.","md",null,{},{"icon":179},{"title":176,"description":2569},"Qe1n_GHKIayvoCxFHpcC3aYPbRyOelAIoozDqjHGK6E",[2577,2579],{"title":171,"path":172,"stem":173,"description":2578,"icon":174,"children":-1},"Dropdown menus with items, submenus, dividers, and labels.",{"title":181,"path":182,"stem":183,"description":2580,"icon":184,"children":-1},"Group related content in a surface with the UiCard component.",1791247319250]