[{"data":1,"prerenderedAt":4804},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-input-date":698,"-docs-theme-components-input-date-surround":4799},{"gettingStarted":4,"api":81,"theme":170},[5,36,51,71],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",{"title":72,"icon":7,"path":73,"stem":74,"children":75,"page":7},"Migrations","\u002Fdocs\u002Fgetting-started\u002Fmigration","docs\u002Fgetting-started\u002Fmigration",[76],{"title":77,"path":78,"stem":79,"icon":80},"From TailwindCSS","\u002Fdocs\u002Fgetting-started\u002Fmigration\u002Ftailwind","docs\u002Fgetting-started\u002Fmigration\u002F01.tailwind","i-simple-icons-tailwindcss",[82],{"title":83,"path":84,"stem":85,"children":86,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[87,90,95,100,105,110,115,120,125,130,135,140,155,160,165],{"title":88,"path":84,"stem":85,"icon":89},"Overview","i-lucide-book-text",{"title":91,"path":92,"stem":93,"icon":94},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":96,"path":97,"stem":98,"icon":99},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":101,"path":102,"stem":103,"icon":104},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":106,"path":107,"stem":108,"icon":109},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":111,"path":112,"stem":113,"icon":114},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":116,"path":117,"stem":118,"icon":119},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":121,"path":122,"stem":123,"icon":124},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":126,"path":127,"stem":128,"icon":129},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":131,"path":132,"stem":133,"icon":134},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":136,"path":137,"stem":138,"icon":139},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":141,"path":142,"stem":143,"children":144,"icon":154},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[145,146,150],{"title":88,"path":142,"stem":143},{"title":147,"path":148,"stem":149},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":151,"path":152,"stem":153},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":156,"path":157,"stem":158,"icon":159},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":161,"path":162,"stem":163,"icon":164},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":166,"path":167,"stem":168,"icon":169},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F14.imports","i-lucide-file-input",[171,251,365,574,651],{"title":172,"path":173,"stem":174,"children":175,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[176,177,182,187,192,197,202,207,212,217,232,236,241,246],{"title":88,"path":173,"stem":174,"icon":89},{"title":178,"path":179,"stem":180,"icon":181},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":183,"path":184,"stem":185,"icon":186},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":188,"path":189,"stem":190,"icon":191},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":193,"path":194,"stem":195,"icon":196},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":198,"path":199,"stem":200,"icon":201},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":203,"path":204,"stem":205,"icon":206},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":208,"path":209,"stem":210,"icon":211},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":213,"path":214,"stem":215,"icon":216},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":218,"path":219,"stem":220,"children":221,"icon":114,"defaultOpen":231},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[222,223,227],{"title":88,"path":219,"stem":220},{"title":224,"path":225,"stem":226},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":228,"path":229,"stem":230},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":233,"path":234,"stem":235,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":237,"path":238,"stem":239,"icon":240},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":242,"path":243,"stem":244,"icon":245},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":247,"path":248,"stem":249,"icon":250},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":252,"path":253,"stem":254,"children":255,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[256,257,260,267,289,309,321,337,349],{"title":88,"path":253,"stem":254,"icon":89},{"title":178,"path":258,"stem":259,"icon":181},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":261,"icon":250,"defaultOpen":231,"page":7,"children":262},"Base",[263],{"title":264,"path":265,"stem":266,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":242,"icon":245,"defaultOpen":231,"page":7,"children":268},[269,273,277,281,285],{"title":270,"path":271,"stem":272,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":274,"path":275,"stem":276,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":278,"path":279,"stem":280,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":282,"path":283,"stem":284,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":286,"path":287,"stem":288,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":290,"icon":291,"defaultOpen":231,"page":7,"children":292},"Inline Text","i-lucide-whole-word",[293,297,301,305],{"title":294,"path":295,"stem":296,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":298,"path":299,"stem":300,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":302,"path":303,"stem":304,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":306,"path":307,"stem":308,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":310,"icon":311,"defaultOpen":231,"page":7,"children":312},"Media & Embeds","i-lucide-image",[313,317],{"title":314,"path":315,"stem":316,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":318,"path":319,"stem":320,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":322,"icon":323,"defaultOpen":231,"page":7,"children":324},"Forms & Tables","i-lucide-table",[325,329,333],{"title":326,"path":327,"stem":328,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":330,"path":331,"stem":332,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":334,"path":335,"stem":336,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":338,"icon":339,"defaultOpen":231,"page":7,"children":340},"Structure","i-lucide-separator-horizontal",[341,345],{"title":342,"path":343,"stem":344,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":346,"path":347,"stem":348,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":350,"icon":351,"defaultOpen":231,"page":7,"children":352},"States","i-lucide-mouse-pointer-click",[353,357,361],{"title":354,"path":355,"stem":356,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":358,"path":359,"stem":360,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":362,"path":363,"stem":364,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":366,"path":367,"stem":368,"children":369,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[370,371,383,407,439,507,534,566],{"title":88,"path":367,"stem":368,"icon":89},{"title":372,"icon":373,"defaultOpen":231,"page":7,"children":374},"Actions","i-lucide-square-mouse-pointer",[375,379],{"title":376,"path":377,"stem":378,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":380,"path":381,"stem":382,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":384,"icon":385,"defaultOpen":231,"page":7,"children":386},"Navigation","i-lucide-navigation",[387,391,395,399,403],{"title":388,"path":389,"stem":390,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":392,"path":393,"stem":394,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":396,"path":397,"stem":398,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":400,"path":401,"stem":402,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":404,"path":405,"stem":406,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":408,"icon":409,"defaultOpen":231,"page":7,"children":410},"Feedback","i-lucide-megaphone",[411,415,419,423,427,431,435],{"title":412,"path":413,"stem":414,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":416,"path":417,"stem":418,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":420,"path":421,"stem":422,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":424,"path":425,"stem":426,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":428,"path":429,"stem":430,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":432,"path":433,"stem":434,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":436,"path":437,"stem":438,"icon":7},"Toast","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoast","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F06.toast",{"title":440,"icon":441,"defaultOpen":231,"page":7,"children":442},"Forms","i-lucide-text-cursor-input",[443,447,451,455,459,463,467,471,475,479,483,487,491,495,499,503],{"title":444,"path":445,"stem":446,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":448,"path":449,"stem":450,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":452,"path":453,"stem":454,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":456,"path":457,"stem":458,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":460,"path":461,"stem":462,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":464,"path":465,"stem":466,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":468,"path":469,"stem":470,"icon":7},"Input Date","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput-date","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.input-date",{"title":472,"path":473,"stem":474,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.otp",{"title":476,"path":477,"stem":478,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio",{"title":480,"path":481,"stem":482,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.radio-group",{"title":484,"path":485,"stem":486,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.select",{"title":488,"path":489,"stem":490,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.slider",{"title":492,"path":493,"stem":494,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.switch",{"title":496,"path":497,"stem":498,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.textarea",{"title":500,"path":501,"stem":502,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle",{"title":504,"path":505,"stem":506,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F15.toggle-group",{"title":508,"icon":250,"defaultOpen":231,"page":7,"children":509},"Overlays",[510,514,518,522,526,530],{"title":511,"path":512,"stem":513,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":515,"path":516,"stem":517,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":519,"path":520,"stem":521,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":523,"path":524,"stem":525,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":527,"path":528,"stem":529,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":531,"path":532,"stem":533,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":535,"icon":536,"defaultOpen":231,"page":7,"children":537},"Layout","i-lucide-layout",[538,542,546,550,554,558,562],{"title":539,"path":540,"stem":541,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":543,"path":544,"stem":545,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":547,"path":548,"stem":549,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":551,"path":552,"stem":553,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":555,"path":556,"stem":557,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":559,"path":560,"stem":561,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":563,"path":564,"stem":565,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":567,"icon":568,"defaultOpen":231,"page":7,"children":569},"AI Chat","i-lucide-message-circle",[570],{"title":571,"path":572,"stem":573,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":126,"path":575,"stem":576,"children":577,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[578,579,583,588,593,597,600,604,609,614,618,621,626,629,634,638,643,648],{"title":88,"path":575,"stem":576,"icon":89},{"title":580,"path":581,"stem":582,"icon":181},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":584,"path":585,"stem":586,"icon":587},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":589,"path":590,"stem":591,"icon":592},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":594,"path":595,"stem":596,"icon":311},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":188,"path":598,"stem":599,"icon":191},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":601,"path":602,"stem":603,"icon":129},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":605,"path":606,"stem":607,"icon":608},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":610,"path":611,"stem":612,"icon":613},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":615,"path":616,"stem":617,"icon":351},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":535,"path":619,"stem":620,"icon":536},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":622,"path":623,"stem":624,"icon":625},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":237,"path":627,"stem":628,"icon":240},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":630,"path":631,"stem":632,"icon":633},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":635,"path":636,"stem":637,"icon":323},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":639,"path":640,"stem":641,"icon":642},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":644,"path":645,"stem":646,"icon":647},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":242,"path":649,"stem":650,"icon":245},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":652,"path":653,"stem":654,"children":655,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[656,657,660,664,669,673,678,683,688,693],{"title":88,"path":653,"stem":654,"icon":89},{"title":580,"path":658,"stem":659,"icon":181},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":661,"path":662,"stem":663,"icon":587},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":665,"path":666,"stem":667,"icon":668},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":670,"path":671,"stem":672,"icon":441},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":674,"path":675,"stem":676,"icon":677},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":679,"path":680,"stem":681,"icon":682},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":684,"path":685,"stem":686,"icon":687},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":689,"path":690,"stem":691,"icon":692},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":694,"path":695,"stem":696,"icon":697},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":699,"title":468,"body":700,"description":4793,"extension":1297,"links":4794,"meta":4795,"navigation":4796,"path":469,"seo":4797,"stem":470,"__hash__":4798},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.input-date.md",{"type":701,"value":702,"toc":4760},"minimark",[703,707,724,756,769,776,786,790,793,831,835,3205,3208,3229,3234,3237,3242,3246,3316,3326,3330,3336,3339,3344,3347,3350,3355,3358,3361,3366,3369,3373,3386,3390,3394,3484,3496,3499,3502,3515,3518,3521,3538,3541,3545,3548,3551,3564,3568,3571,3647,3859,3862,3865,3961,3965,3969,3972,4122,4126,4133,4295,4300,4303,4309,4324,4329,4435,4440,4561,4567,4585,4589,4621,4626,4630,4682,4686,4756],[704,705,88],"h2",{"id":706},"overview",[708,709,710,711,714,715,719,720,723],"p",{},"The ",[712,713,468],"strong",{}," is a segmented date field: a single visual surface that holds individually focusable parts — day, month, year (and optionally hour, minute) — separated by a muted glyph such as ",[716,717,718],"code",{},"\u002F"," or ",[716,721,722],{},"–",". It is composed of two recipe parts:",[725,726,727,744],"ul",{},[728,729,730,735,736,739,740,743],"li",{},[712,731,732],{},[716,733,734],{},"useInputDateRecipe()"," — the wrapper that owns the visual field: border, background, padding, and the ",[716,737,738],{},":focus-within"," ring. It is a member of the field recipes family, so it shares the same color, style, and state surface as the ",[741,742,464],"a",{"href":465}," recipe.",[728,745,746,751,752,755],{},[712,747,748],{},[716,749,750],{},"useInputDateSegmentRecipe()"," — the single editable segment that sits inside the field. It is transparent, inherits typography and color from the wrapper, centers its digits with tabular figures, and paints a highlight only on ",[716,753,754],{},":focus",".",[708,757,758,759,761,762,765,766,755],{},"The wrapper owns the entire surface and reveals a primary-colored ring on ",[716,760,738],{},", so focusing any segment lights the whole field — just like a native text input. Each segment is the focusable element itself, so keyboard focus moves part to part while the surface stays put. A plain ",[716,763,764],{},".input-date-separator"," glyph sits between segments, muted via ",[716,767,768],{},"@color.text-weak",[708,770,771,772,775],{},"The Input Date recipes integrate directly with the default ",[741,773,774],{"href":179},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[777,778,779,782,783,785],"note",{},[712,780,781],{},"Styling, not behavior."," These recipes style the field and its segments. Parsing input, advancing focus between segments, clamping values, and opening a calendar popover are interaction concerns you wire up yourself (or with a headless library). Calendar \u002F popover styling lives in the ",[741,784,444],{"href":445}," recipe — this recipe styles the segmented input only.",[704,787,789],{"id":788},"why-use-the-input-date-recipe","Why use the Input Date recipe?",[708,791,792],{},"The Input Date recipe helps you:",[725,794,795,801,807,813,819,825],{},[728,796,797,800],{},[712,798,799],{},"Ship faster with sensible defaults",": Get 3 surface colors, 3 styles, and 3 sizes out of the box with a single set of composable calls.",[728,802,803,806],{},[712,804,805],{},"Match the rest of your forms",": The wrapper reuses the Input recipe's color \u002F style \u002F state surface, so a date field shares the same visual language as your text inputs.",[728,808,809,812],{},[712,810,811],{},"Maintain consistency",": The focus ring, invalid border, and dark-mode surfaces follow the same design rules everywhere.",[728,814,815,818],{},[712,816,817],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[728,820,821,824],{},[712,822,823],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, style, or size values at compile time.",[728,826,827,830],{},[712,828,829],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[704,832,834],{"id":833},"usage","Usage",[836,837,839,844,851,1119,1123,1153,3197,3201],"steps",{"level":838},"4",[840,841,843],"h4",{"id":842},"register-the-recipes","Register the recipes",[708,845,846,847,850],{},"Add the Input Date recipes to a local Styleframe instance. The global ",[716,848,849],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[852,853,855,1013],"code-tree",{"default-value":854},"src\u002Fcomponents\u002Finput-date.styleframe.ts",[856,857,862],"pre",{"className":858,"code":859,"filename":854,"language":860,"meta":861,"style":861},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useInputDateRecipe, useInputDateSegmentRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst inputDate = useInputDateRecipe(s);\nconst inputDateSegment = useInputDateSegmentRecipe(s);\n\nexport default s;\n","ts","",[716,863,864,900,929,935,956,961,978,994,999],{"__ignoreMap":861},[865,866,869,873,877,881,884,887,890,894,897],"span",{"class":867,"line":868},"line",1,[865,870,872],{"class":871},"s7zQu","import",[865,874,876],{"class":875},"sMK4o"," {",[865,878,880],{"class":879},"sTEyZ"," styleframe",[865,882,883],{"class":875}," }",[865,885,886],{"class":871}," from",[865,888,889],{"class":875}," '",[865,891,893],{"class":892},"sfazB","virtual:styleframe",[865,895,896],{"class":875},"'",[865,898,899],{"class":875},";\n",[865,901,903,905,907,910,913,916,918,920,922,925,927],{"class":867,"line":902},2,[865,904,872],{"class":871},[865,906,876],{"class":875},[865,908,909],{"class":879}," useInputDateRecipe",[865,911,912],{"class":875},",",[865,914,915],{"class":879}," useInputDateSegmentRecipe",[865,917,883],{"class":875},[865,919,886],{"class":871},[865,921,889],{"class":875},[865,923,924],{"class":892},"@styleframe\u002Ftheme",[865,926,896],{"class":875},[865,928,899],{"class":875},[865,930,932],{"class":867,"line":931},3,[865,933,934],{"emptyLinePlaceholder":231},"\n",[865,936,938,942,945,948,951,954],{"class":867,"line":937},4,[865,939,941],{"class":940},"spNyl","const",[865,943,944],{"class":879}," s ",[865,946,947],{"class":875},"=",[865,949,880],{"class":950},"s2Zo4",[865,952,953],{"class":879},"()",[865,955,899],{"class":875},[865,957,959],{"class":867,"line":958},5,[865,960,934],{"emptyLinePlaceholder":231},[865,962,964,966,969,971,973,976],{"class":867,"line":963},6,[865,965,941],{"class":940},[865,967,968],{"class":879}," inputDate ",[865,970,947],{"class":875},[865,972,909],{"class":950},[865,974,975],{"class":879},"(s)",[865,977,899],{"class":875},[865,979,981,983,986,988,990,992],{"class":867,"line":980},7,[865,982,941],{"class":940},[865,984,985],{"class":879}," inputDateSegment ",[865,987,947],{"class":875},[865,989,915],{"class":950},[865,991,975],{"class":879},[865,993,899],{"class":875},[865,995,997],{"class":867,"line":996},8,[865,998,934],{"emptyLinePlaceholder":231},[865,1000,1002,1005,1008,1011],{"class":867,"line":1001},9,[865,1003,1004],{"class":871},"export",[865,1006,1007],{"class":871}," default",[865,1009,1010],{"class":879}," s",[865,1012,899],{"class":875},[856,1014,1016],{"className":858,"code":1015,"filename":849,"language":860,"meta":861,"style":861},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[716,1017,1018,1039,1065,1069,1083,1087,1096,1105,1109],{"__ignoreMap":861},[865,1019,1020,1022,1024,1026,1028,1030,1032,1035,1037],{"class":867,"line":868},[865,1021,872],{"class":871},[865,1023,876],{"class":875},[865,1025,880],{"class":879},[865,1027,883],{"class":875},[865,1029,886],{"class":871},[865,1031,889],{"class":875},[865,1033,1034],{"class":892},"styleframe",[865,1036,896],{"class":875},[865,1038,899],{"class":875},[865,1040,1041,1043,1045,1048,1050,1053,1055,1057,1059,1061,1063],{"class":867,"line":902},[865,1042,872],{"class":871},[865,1044,876],{"class":875},[865,1046,1047],{"class":879}," useDesignTokensPreset",[865,1049,912],{"class":875},[865,1051,1052],{"class":879}," useUtilitiesPreset",[865,1054,883],{"class":875},[865,1056,886],{"class":871},[865,1058,889],{"class":875},[865,1060,924],{"class":892},[865,1062,896],{"class":875},[865,1064,899],{"class":875},[865,1066,1067],{"class":867,"line":931},[865,1068,934],{"emptyLinePlaceholder":231},[865,1070,1071,1073,1075,1077,1079,1081],{"class":867,"line":937},[865,1072,941],{"class":940},[865,1074,944],{"class":879},[865,1076,947],{"class":875},[865,1078,880],{"class":950},[865,1080,953],{"class":879},[865,1082,899],{"class":875},[865,1084,1085],{"class":867,"line":958},[865,1086,934],{"emptyLinePlaceholder":231},[865,1088,1089,1092,1094],{"class":867,"line":963},[865,1090,1091],{"class":950},"useDesignTokensPreset",[865,1093,975],{"class":879},[865,1095,899],{"class":875},[865,1097,1098,1101,1103],{"class":867,"line":980},[865,1099,1100],{"class":950},"useUtilitiesPreset",[865,1102,975],{"class":879},[865,1104,899],{"class":875},[865,1106,1107],{"class":867,"line":996},[865,1108,934],{"emptyLinePlaceholder":231},[865,1110,1111,1113,1115,1117],{"class":867,"line":1001},[865,1112,1004],{"class":871},[865,1114,1007],{"class":871},[865,1116,1010],{"class":879},[865,1118,899],{"class":875},[840,1120,1122],{"id":1121},"build-the-component","Build the component",[708,1124,1125,1126,1129,1130,1133,1134,1137,1138,1140,1141,1144,1145,1148,1149,1152],{},"Put the ",[716,1127,1128],{},"inputDate"," class on the wrapper, nest a ",[716,1131,1132],{},".input-date-field"," row inside it, and render one ",[716,1135,1136],{},"inputDateSegment"," span per part, interleaved with a ",[716,1139,764],{}," glyph. The ",[716,1142,1143],{},"invalid",", ",[716,1146,1147],{},"disabled",", and ",[716,1150,1151],{},"readonly"," axes accept booleans directly:",[1154,1155,1156,1988,2749],"framework-switcher",{},[1157,1158,1159],"template",{"v-slot:vue":861},[856,1160,1165],{"className":1161,"code":1162,"filename":1163,"language":1164,"meta":861,"style":861},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { inputDate, inputDateSegment } from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    variant = \"default\",\n    size = \"md\",\n    invalid = false,\n    disabled = false,\n    readonly = false,\n    value = \"12\u002F31\u002F2026\",\n    separator = \"\u002F\",\n} = defineProps\u003C{\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"default\" | \"soft\" | \"ghost\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    invalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    value?: string;\n    separator?: string;\n}>();\n\nconst segments = computed(() => value.split(separator));\nconst focusable = computed(() => !disabled && !readonly);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv\n        :class=\"inputDate({ color, variant, size, invalid, disabled, readonly })\"\n        role=\"group\"\n        aria-label=\"Date input\"\n    >\n        \u003Cspan class=\"input-date-field\">\n            \u003Ctemplate v-for=\"(segment, index) in segments\" :key=\"index\">\n                \u003Cspan\n                    :class=\"inputDateSegment({ size })\"\n                    :tabindex=\"focusable ? 0 : undefined\"\n                    role=\"spinbutton\"\n                    :aria-disabled=\"disabled || undefined\"\n                    >{{ segment }}\u003C\u002Fspan\n                >\n                \u003Cspan\n                    v-if=\"index \u003C segments.length - 1\"\n                    class=\"input-date-separator\"\n                    aria-hidden=\"true\"\n                    >{{ separator }}\u003C\u002Fspan\n                >\n            \u003C\u002Ftemplate>\n        \u003C\u002Fspan>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FInputDate.vue","vue",[716,1166,1167,1194,1216,1242,1246,1253,1270,1286,1302,1315,1327,1339,1356,1372,1387,1423,1457,1491,1505,1517,1529,1542,1554,1564,1569,1602,1636,1646,1651,1660,1669,1685,1700,1715,1721,1743,1791,1800,1815,1830,1845,1860,1873,1879,1886,1901,1916,1931,1943,1948,1958,1968,1979],{"__ignoreMap":861},[865,1168,1169,1172,1176,1179,1182,1184,1187,1189,1191],{"class":867,"line":868},[865,1170,1171],{"class":875},"\u003C",[865,1173,1175],{"class":1174},"swJcz","script",[865,1177,1178],{"class":940}," setup",[865,1180,1181],{"class":940}," lang",[865,1183,947],{"class":875},[865,1185,1186],{"class":875},"\"",[865,1188,860],{"class":892},[865,1190,1186],{"class":875},[865,1192,1193],{"class":875},">\n",[865,1195,1196,1198,1200,1203,1205,1207,1210,1212,1214],{"class":867,"line":902},[865,1197,872],{"class":871},[865,1199,876],{"class":875},[865,1201,1202],{"class":879}," computed",[865,1204,883],{"class":875},[865,1206,886],{"class":871},[865,1208,1209],{"class":875}," \"",[865,1211,1164],{"class":892},[865,1213,1186],{"class":875},[865,1215,899],{"class":875},[865,1217,1218,1220,1222,1225,1227,1230,1232,1234,1236,1238,1240],{"class":867,"line":931},[865,1219,872],{"class":871},[865,1221,876],{"class":875},[865,1223,1224],{"class":879}," inputDate",[865,1226,912],{"class":875},[865,1228,1229],{"class":879}," inputDateSegment",[865,1231,883],{"class":875},[865,1233,886],{"class":871},[865,1235,1209],{"class":875},[865,1237,893],{"class":892},[865,1239,1186],{"class":875},[865,1241,899],{"class":875},[865,1243,1244],{"class":867,"line":937},[865,1245,934],{"emptyLinePlaceholder":231},[865,1247,1248,1250],{"class":867,"line":958},[865,1249,941],{"class":940},[865,1251,1252],{"class":875}," {\n",[865,1254,1255,1258,1260,1262,1265,1267],{"class":867,"line":963},[865,1256,1257],{"class":879},"    color ",[865,1259,947],{"class":875},[865,1261,1209],{"class":875},[865,1263,1264],{"class":892},"neutral",[865,1266,1186],{"class":875},[865,1268,1269],{"class":875},",\n",[865,1271,1272,1275,1277,1279,1282,1284],{"class":867,"line":980},[865,1273,1274],{"class":879},"    variant ",[865,1276,947],{"class":875},[865,1278,1209],{"class":875},[865,1280,1281],{"class":892},"default",[865,1283,1186],{"class":875},[865,1285,1269],{"class":875},[865,1287,1288,1291,1293,1295,1298,1300],{"class":867,"line":996},[865,1289,1290],{"class":879},"    size ",[865,1292,947],{"class":875},[865,1294,1209],{"class":875},[865,1296,1297],{"class":892},"md",[865,1299,1186],{"class":875},[865,1301,1269],{"class":875},[865,1303,1304,1307,1309,1313],{"class":867,"line":1001},[865,1305,1306],{"class":879},"    invalid ",[865,1308,947],{"class":875},[865,1310,1312],{"class":1311},"sfNiH"," false",[865,1314,1269],{"class":875},[865,1316,1318,1321,1323,1325],{"class":867,"line":1317},10,[865,1319,1320],{"class":879},"    disabled ",[865,1322,947],{"class":875},[865,1324,1312],{"class":1311},[865,1326,1269],{"class":875},[865,1328,1330,1333,1335,1337],{"class":867,"line":1329},11,[865,1331,1332],{"class":879},"    readonly ",[865,1334,947],{"class":875},[865,1336,1312],{"class":1311},[865,1338,1269],{"class":875},[865,1340,1342,1345,1347,1349,1352,1354],{"class":867,"line":1341},12,[865,1343,1344],{"class":879},"    value ",[865,1346,947],{"class":875},[865,1348,1209],{"class":875},[865,1350,1351],{"class":892},"12\u002F31\u002F2026",[865,1353,1186],{"class":875},[865,1355,1269],{"class":875},[865,1357,1359,1362,1364,1366,1368,1370],{"class":867,"line":1358},13,[865,1360,1361],{"class":879},"    separator ",[865,1363,947],{"class":875},[865,1365,1209],{"class":875},[865,1367,718],{"class":892},[865,1369,1186],{"class":875},[865,1371,1269],{"class":875},[865,1373,1375,1378,1381,1384],{"class":867,"line":1374},14,[865,1376,1377],{"class":875},"}",[865,1379,1380],{"class":875}," =",[865,1382,1383],{"class":950}," defineProps",[865,1385,1386],{"class":875},"\u003C{\n",[865,1388,1390,1393,1396,1398,1401,1403,1406,1408,1411,1413,1415,1417,1419,1421],{"class":867,"line":1389},15,[865,1391,1392],{"class":1174},"    color",[865,1394,1395],{"class":875},"?:",[865,1397,1209],{"class":875},[865,1399,1400],{"class":892},"light",[865,1402,1186],{"class":875},[865,1404,1405],{"class":875}," |",[865,1407,1209],{"class":875},[865,1409,1410],{"class":892},"dark",[865,1412,1186],{"class":875},[865,1414,1405],{"class":875},[865,1416,1209],{"class":875},[865,1418,1264],{"class":892},[865,1420,1186],{"class":875},[865,1422,899],{"class":875},[865,1424,1426,1429,1431,1433,1435,1437,1439,1441,1444,1446,1448,1450,1453,1455],{"class":867,"line":1425},16,[865,1427,1428],{"class":1174},"    variant",[865,1430,1395],{"class":875},[865,1432,1209],{"class":875},[865,1434,1281],{"class":892},[865,1436,1186],{"class":875},[865,1438,1405],{"class":875},[865,1440,1209],{"class":875},[865,1442,1443],{"class":892},"soft",[865,1445,1186],{"class":875},[865,1447,1405],{"class":875},[865,1449,1209],{"class":875},[865,1451,1452],{"class":892},"ghost",[865,1454,1186],{"class":875},[865,1456,899],{"class":875},[865,1458,1460,1463,1465,1467,1470,1472,1474,1476,1478,1480,1482,1484,1487,1489],{"class":867,"line":1459},17,[865,1461,1462],{"class":1174},"    size",[865,1464,1395],{"class":875},[865,1466,1209],{"class":875},[865,1468,1469],{"class":892},"sm",[865,1471,1186],{"class":875},[865,1473,1405],{"class":875},[865,1475,1209],{"class":875},[865,1477,1297],{"class":892},[865,1479,1186],{"class":875},[865,1481,1405],{"class":875},[865,1483,1209],{"class":875},[865,1485,1486],{"class":892},"lg",[865,1488,1186],{"class":875},[865,1490,899],{"class":875},[865,1492,1494,1497,1499,1503],{"class":867,"line":1493},18,[865,1495,1496],{"class":1174},"    invalid",[865,1498,1395],{"class":875},[865,1500,1502],{"class":1501},"sBMFI"," boolean",[865,1504,899],{"class":875},[865,1506,1508,1511,1513,1515],{"class":867,"line":1507},19,[865,1509,1510],{"class":1174},"    disabled",[865,1512,1395],{"class":875},[865,1514,1502],{"class":1501},[865,1516,899],{"class":875},[865,1518,1520,1523,1525,1527],{"class":867,"line":1519},20,[865,1521,1522],{"class":1174},"    readonly",[865,1524,1395],{"class":875},[865,1526,1502],{"class":1501},[865,1528,899],{"class":875},[865,1530,1532,1535,1537,1540],{"class":867,"line":1531},21,[865,1533,1534],{"class":1174},"    value",[865,1536,1395],{"class":875},[865,1538,1539],{"class":1501}," string",[865,1541,899],{"class":875},[865,1543,1545,1548,1550,1552],{"class":867,"line":1544},22,[865,1546,1547],{"class":1174},"    separator",[865,1549,1395],{"class":875},[865,1551,1539],{"class":1501},[865,1553,899],{"class":875},[865,1555,1557,1560,1562],{"class":867,"line":1556},23,[865,1558,1559],{"class":875},"}>",[865,1561,953],{"class":879},[865,1563,899],{"class":875},[865,1565,1567],{"class":867,"line":1566},24,[865,1568,934],{"emptyLinePlaceholder":231},[865,1570,1572,1574,1577,1579,1581,1584,1586,1589,1592,1594,1597,1600],{"class":867,"line":1571},25,[865,1573,941],{"class":940},[865,1575,1576],{"class":879}," segments ",[865,1578,947],{"class":875},[865,1580,1202],{"class":950},[865,1582,1583],{"class":879},"(",[865,1585,953],{"class":875},[865,1587,1588],{"class":940}," =>",[865,1590,1591],{"class":879}," value",[865,1593,755],{"class":875},[865,1595,1596],{"class":950},"split",[865,1598,1599],{"class":879},"(separator))",[865,1601,899],{"class":875},[865,1603,1605,1607,1610,1612,1614,1616,1618,1620,1623,1626,1629,1631,1634],{"class":867,"line":1604},26,[865,1606,941],{"class":940},[865,1608,1609],{"class":879}," focusable ",[865,1611,947],{"class":875},[865,1613,1202],{"class":950},[865,1615,1583],{"class":879},[865,1617,953],{"class":875},[865,1619,1588],{"class":940},[865,1621,1622],{"class":875}," !",[865,1624,1625],{"class":879},"disabled ",[865,1627,1628],{"class":875},"&&",[865,1630,1622],{"class":875},[865,1632,1633],{"class":879},"readonly)",[865,1635,899],{"class":875},[865,1637,1639,1642,1644],{"class":867,"line":1638},27,[865,1640,1641],{"class":875},"\u003C\u002F",[865,1643,1175],{"class":1174},[865,1645,1193],{"class":875},[865,1647,1649],{"class":867,"line":1648},28,[865,1650,934],{"emptyLinePlaceholder":231},[865,1652,1654,1656,1658],{"class":867,"line":1653},29,[865,1655,1171],{"class":875},[865,1657,1157],{"class":1174},[865,1659,1193],{"class":875},[865,1661,1663,1666],{"class":867,"line":1662},30,[865,1664,1665],{"class":875},"    \u003C",[865,1667,1668],{"class":1174},"div\n",[865,1670,1672,1675,1677,1679,1682],{"class":867,"line":1671},31,[865,1673,1674],{"class":940},"        :class",[865,1676,947],{"class":875},[865,1678,1186],{"class":875},[865,1680,1681],{"class":892},"inputDate({ color, variant, size, invalid, disabled, readonly })",[865,1683,1684],{"class":875},"\"\n",[865,1686,1688,1691,1693,1695,1698],{"class":867,"line":1687},32,[865,1689,1690],{"class":940},"        role",[865,1692,947],{"class":875},[865,1694,1186],{"class":875},[865,1696,1697],{"class":892},"group",[865,1699,1684],{"class":875},[865,1701,1703,1706,1708,1710,1713],{"class":867,"line":1702},33,[865,1704,1705],{"class":940},"        aria-label",[865,1707,947],{"class":875},[865,1709,1186],{"class":875},[865,1711,1712],{"class":892},"Date input",[865,1714,1684],{"class":875},[865,1716,1718],{"class":867,"line":1717},34,[865,1719,1720],{"class":875},"    >\n",[865,1722,1724,1727,1729,1732,1734,1736,1739,1741],{"class":867,"line":1723},35,[865,1725,1726],{"class":875},"        \u003C",[865,1728,865],{"class":1174},[865,1730,1731],{"class":940}," class",[865,1733,947],{"class":875},[865,1735,1186],{"class":875},[865,1737,1738],{"class":892},"input-date-field",[865,1740,1186],{"class":875},[865,1742,1193],{"class":875},[865,1744,1746,1749,1751,1754,1756,1758,1761,1763,1766,1769,1772,1774,1777,1780,1782,1784,1787,1789],{"class":867,"line":1745},36,[865,1747,1748],{"class":875},"            \u003C",[865,1750,1157],{"class":1174},[865,1752,1753],{"class":871}," v-for",[865,1755,947],{"class":875},[865,1757,1186],{"class":875},[865,1759,1760],{"class":879},"(segment",[865,1762,912],{"class":875},[865,1764,1765],{"class":879}," index) ",[865,1767,1768],{"class":875},"in",[865,1770,1771],{"class":879}," segments",[865,1773,1186],{"class":875},[865,1775,1776],{"class":875}," :",[865,1778,1779],{"class":940},"key",[865,1781,947],{"class":875},[865,1783,1186],{"class":875},[865,1785,1786],{"class":879},"index",[865,1788,1186],{"class":875},[865,1790,1193],{"class":875},[865,1792,1794,1797],{"class":867,"line":1793},37,[865,1795,1796],{"class":875},"                \u003C",[865,1798,1799],{"class":1174},"span\n",[865,1801,1803,1806,1808,1810,1813],{"class":867,"line":1802},38,[865,1804,1805],{"class":940},"                    :class",[865,1807,947],{"class":875},[865,1809,1186],{"class":875},[865,1811,1812],{"class":892},"inputDateSegment({ size })",[865,1814,1684],{"class":875},[865,1816,1818,1821,1823,1825,1828],{"class":867,"line":1817},39,[865,1819,1820],{"class":940},"                    :tabindex",[865,1822,947],{"class":875},[865,1824,1186],{"class":875},[865,1826,1827],{"class":892},"focusable ? 0 : undefined",[865,1829,1684],{"class":875},[865,1831,1833,1836,1838,1840,1843],{"class":867,"line":1832},40,[865,1834,1835],{"class":940},"                    role",[865,1837,947],{"class":875},[865,1839,1186],{"class":875},[865,1841,1842],{"class":892},"spinbutton",[865,1844,1684],{"class":875},[865,1846,1848,1851,1853,1855,1858],{"class":867,"line":1847},41,[865,1849,1850],{"class":940},"                    :aria-disabled",[865,1852,947],{"class":875},[865,1854,1186],{"class":875},[865,1856,1857],{"class":892},"disabled || undefined",[865,1859,1684],{"class":875},[865,1861,1863,1866,1869,1871],{"class":867,"line":1862},42,[865,1864,1865],{"class":875},"                    >",[865,1867,1868],{"class":879},"{{ segment }}",[865,1870,1641],{"class":875},[865,1872,1799],{"class":1174},[865,1874,1876],{"class":867,"line":1875},43,[865,1877,1878],{"class":875},"                >\n",[865,1880,1882,1884],{"class":867,"line":1881},44,[865,1883,1796],{"class":875},[865,1885,1799],{"class":1174},[865,1887,1889,1892,1894,1896,1899],{"class":867,"line":1888},45,[865,1890,1891],{"class":940},"                    v-if",[865,1893,947],{"class":875},[865,1895,1186],{"class":875},[865,1897,1898],{"class":892},"index \u003C segments.length - 1",[865,1900,1684],{"class":875},[865,1902,1904,1907,1909,1911,1914],{"class":867,"line":1903},46,[865,1905,1906],{"class":940},"                    class",[865,1908,947],{"class":875},[865,1910,1186],{"class":875},[865,1912,1913],{"class":892},"input-date-separator",[865,1915,1684],{"class":875},[865,1917,1919,1922,1924,1926,1929],{"class":867,"line":1918},47,[865,1920,1921],{"class":940},"                    aria-hidden",[865,1923,947],{"class":875},[865,1925,1186],{"class":875},[865,1927,1928],{"class":892},"true",[865,1930,1684],{"class":875},[865,1932,1934,1936,1939,1941],{"class":867,"line":1933},48,[865,1935,1865],{"class":875},[865,1937,1938],{"class":879},"{{ separator }}",[865,1940,1641],{"class":875},[865,1942,1799],{"class":1174},[865,1944,1946],{"class":867,"line":1945},49,[865,1947,1878],{"class":875},[865,1949,1951,1954,1956],{"class":867,"line":1950},50,[865,1952,1953],{"class":875},"            \u003C\u002F",[865,1955,1157],{"class":1174},[865,1957,1193],{"class":875},[865,1959,1961,1964,1966],{"class":867,"line":1960},51,[865,1962,1963],{"class":875},"        \u003C\u002F",[865,1965,865],{"class":1174},[865,1967,1193],{"class":875},[865,1969,1971,1974,1977],{"class":867,"line":1970},52,[865,1972,1973],{"class":875},"    \u003C\u002F",[865,1975,1976],{"class":1174},"div",[865,1978,1193],{"class":875},[865,1980,1982,1984,1986],{"class":867,"line":1981},53,[865,1983,1641],{"class":875},[865,1985,1157],{"class":1174},[865,1987,1193],{"class":875},[1157,1989,1990],{"v-slot:react":861},[856,1991,1996],{"className":1992,"code":1993,"filename":1994,"language":1995,"meta":861,"style":861},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { inputDate, inputDateSegment } from \"virtual:styleframe\";\n\ninterface InputDateProps {\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"default\" | \"soft\" | \"ghost\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    invalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    value?: string;\n    separator?: string;\n}\n\nexport function InputDate({\n    color = \"neutral\",\n    variant = \"default\",\n    size = \"md\",\n    invalid = false,\n    disabled = false,\n    readonly = false,\n    value = \"12\u002F31\u002F2026\",\n    separator = \"\u002F\",\n}: InputDateProps) {\n    const segments = value.split(separator);\n    const focusable = !disabled && !readonly;\n\n    return (\n        \u003Cdiv\n            className={inputDate({ color, variant, size, invalid, disabled, readonly })}\n            role=\"group\"\n            aria-label=\"Date input\"\n        >\n            \u003Cspan className=\"input-date-field\">\n                {segments.map((segment, index) => (\n                    \u003Cspan key={index}>\n                        \u003Cspan\n                            className={inputDateSegment({ size })}\n                            tabIndex={focusable ? 0 : undefined}\n                            role=\"spinbutton\"\n                            aria-disabled={disabled || undefined}\n                        >\n                            {segment}\n                        \u003C\u002Fspan>\n                        {index \u003C segments.length - 1 && (\n                            \u003Cspan className=\"input-date-separator\" aria-hidden=\"true\">\n                                {separator}\n                            \u003C\u002Fspan>\n                        )}\n                    \u003C\u002Fspan>\n                ))}\n            \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FInputDate.tsx","tsx",[716,1997,1998,2022,2026,2036,2066,2096,2126,2136,2146,2156,2166,2176,2181,2185,2198,2213,2227,2241,2251,2261,2271,2285,2299,2311,2335,2357,2361,2369,2375,2424,2437,2450,2455,2474,2505,2522,2529,2551,2573,2586,2600,2605,2614,2623,2650,2680,2689,2698,2705,2714,2721,2729,2737,2744],{"__ignoreMap":861},[865,1999,2000,2002,2004,2006,2008,2010,2012,2014,2016,2018,2020],{"class":867,"line":868},[865,2001,872],{"class":871},[865,2003,876],{"class":875},[865,2005,1224],{"class":879},[865,2007,912],{"class":875},[865,2009,1229],{"class":879},[865,2011,883],{"class":875},[865,2013,886],{"class":871},[865,2015,1209],{"class":875},[865,2017,893],{"class":892},[865,2019,1186],{"class":875},[865,2021,899],{"class":875},[865,2023,2024],{"class":867,"line":902},[865,2025,934],{"emptyLinePlaceholder":231},[865,2027,2028,2031,2034],{"class":867,"line":931},[865,2029,2030],{"class":940},"interface",[865,2032,2033],{"class":1501}," InputDateProps",[865,2035,1252],{"class":875},[865,2037,2038,2040,2042,2044,2046,2048,2050,2052,2054,2056,2058,2060,2062,2064],{"class":867,"line":937},[865,2039,1392],{"class":1174},[865,2041,1395],{"class":875},[865,2043,1209],{"class":875},[865,2045,1400],{"class":892},[865,2047,1186],{"class":875},[865,2049,1405],{"class":875},[865,2051,1209],{"class":875},[865,2053,1410],{"class":892},[865,2055,1186],{"class":875},[865,2057,1405],{"class":875},[865,2059,1209],{"class":875},[865,2061,1264],{"class":892},[865,2063,1186],{"class":875},[865,2065,899],{"class":875},[865,2067,2068,2070,2072,2074,2076,2078,2080,2082,2084,2086,2088,2090,2092,2094],{"class":867,"line":958},[865,2069,1428],{"class":1174},[865,2071,1395],{"class":875},[865,2073,1209],{"class":875},[865,2075,1281],{"class":892},[865,2077,1186],{"class":875},[865,2079,1405],{"class":875},[865,2081,1209],{"class":875},[865,2083,1443],{"class":892},[865,2085,1186],{"class":875},[865,2087,1405],{"class":875},[865,2089,1209],{"class":875},[865,2091,1452],{"class":892},[865,2093,1186],{"class":875},[865,2095,899],{"class":875},[865,2097,2098,2100,2102,2104,2106,2108,2110,2112,2114,2116,2118,2120,2122,2124],{"class":867,"line":963},[865,2099,1462],{"class":1174},[865,2101,1395],{"class":875},[865,2103,1209],{"class":875},[865,2105,1469],{"class":892},[865,2107,1186],{"class":875},[865,2109,1405],{"class":875},[865,2111,1209],{"class":875},[865,2113,1297],{"class":892},[865,2115,1186],{"class":875},[865,2117,1405],{"class":875},[865,2119,1209],{"class":875},[865,2121,1486],{"class":892},[865,2123,1186],{"class":875},[865,2125,899],{"class":875},[865,2127,2128,2130,2132,2134],{"class":867,"line":980},[865,2129,1496],{"class":1174},[865,2131,1395],{"class":875},[865,2133,1502],{"class":1501},[865,2135,899],{"class":875},[865,2137,2138,2140,2142,2144],{"class":867,"line":996},[865,2139,1510],{"class":1174},[865,2141,1395],{"class":875},[865,2143,1502],{"class":1501},[865,2145,899],{"class":875},[865,2147,2148,2150,2152,2154],{"class":867,"line":1001},[865,2149,1522],{"class":1174},[865,2151,1395],{"class":875},[865,2153,1502],{"class":1501},[865,2155,899],{"class":875},[865,2157,2158,2160,2162,2164],{"class":867,"line":1317},[865,2159,1534],{"class":1174},[865,2161,1395],{"class":875},[865,2163,1539],{"class":1501},[865,2165,899],{"class":875},[865,2167,2168,2170,2172,2174],{"class":867,"line":1329},[865,2169,1547],{"class":1174},[865,2171,1395],{"class":875},[865,2173,1539],{"class":1501},[865,2175,899],{"class":875},[865,2177,2178],{"class":867,"line":1341},[865,2179,2180],{"class":875},"}\n",[865,2182,2183],{"class":867,"line":1358},[865,2184,934],{"emptyLinePlaceholder":231},[865,2186,2187,2189,2192,2195],{"class":867,"line":1374},[865,2188,1004],{"class":871},[865,2190,2191],{"class":940}," function",[865,2193,2194],{"class":950}," InputDate",[865,2196,2197],{"class":875},"({\n",[865,2199,2200,2203,2205,2207,2209,2211],{"class":867,"line":1389},[865,2201,1392],{"class":2202},"sHdIc",[865,2204,1380],{"class":875},[865,2206,1209],{"class":875},[865,2208,1264],{"class":892},[865,2210,1186],{"class":875},[865,2212,1269],{"class":875},[865,2214,2215,2217,2219,2221,2223,2225],{"class":867,"line":1425},[865,2216,1428],{"class":2202},[865,2218,1380],{"class":875},[865,2220,1209],{"class":875},[865,2222,1281],{"class":892},[865,2224,1186],{"class":875},[865,2226,1269],{"class":875},[865,2228,2229,2231,2233,2235,2237,2239],{"class":867,"line":1459},[865,2230,1462],{"class":2202},[865,2232,1380],{"class":875},[865,2234,1209],{"class":875},[865,2236,1297],{"class":892},[865,2238,1186],{"class":875},[865,2240,1269],{"class":875},[865,2242,2243,2245,2247,2249],{"class":867,"line":1493},[865,2244,1496],{"class":2202},[865,2246,1380],{"class":875},[865,2248,1312],{"class":1311},[865,2250,1269],{"class":875},[865,2252,2253,2255,2257,2259],{"class":867,"line":1507},[865,2254,1510],{"class":2202},[865,2256,1380],{"class":875},[865,2258,1312],{"class":1311},[865,2260,1269],{"class":875},[865,2262,2263,2265,2267,2269],{"class":867,"line":1519},[865,2264,1522],{"class":2202},[865,2266,1380],{"class":875},[865,2268,1312],{"class":1311},[865,2270,1269],{"class":875},[865,2272,2273,2275,2277,2279,2281,2283],{"class":867,"line":1531},[865,2274,1534],{"class":2202},[865,2276,1380],{"class":875},[865,2278,1209],{"class":875},[865,2280,1351],{"class":892},[865,2282,1186],{"class":875},[865,2284,1269],{"class":875},[865,2286,2287,2289,2291,2293,2295,2297],{"class":867,"line":1544},[865,2288,1547],{"class":2202},[865,2290,1380],{"class":875},[865,2292,1209],{"class":875},[865,2294,718],{"class":892},[865,2296,1186],{"class":875},[865,2298,1269],{"class":875},[865,2300,2301,2304,2306,2309],{"class":867,"line":1556},[865,2302,2303],{"class":875},"}:",[865,2305,2033],{"class":1501},[865,2307,2308],{"class":875},")",[865,2310,1252],{"class":875},[865,2312,2313,2316,2318,2320,2322,2324,2326,2328,2331,2333],{"class":867,"line":1566},[865,2314,2315],{"class":940},"    const",[865,2317,1771],{"class":879},[865,2319,1380],{"class":875},[865,2321,1591],{"class":879},[865,2323,755],{"class":875},[865,2325,1596],{"class":950},[865,2327,1583],{"class":1174},[865,2329,2330],{"class":879},"separator",[865,2332,2308],{"class":1174},[865,2334,899],{"class":875},[865,2336,2337,2339,2342,2344,2346,2348,2351,2353,2355],{"class":867,"line":1571},[865,2338,2315],{"class":940},[865,2340,2341],{"class":879}," focusable",[865,2343,1380],{"class":875},[865,2345,1622],{"class":875},[865,2347,1147],{"class":879},[865,2349,2350],{"class":875}," &&",[865,2352,1622],{"class":875},[865,2354,1151],{"class":879},[865,2356,899],{"class":875},[865,2358,2359],{"class":867,"line":1604},[865,2360,934],{"emptyLinePlaceholder":231},[865,2362,2363,2366],{"class":867,"line":1638},[865,2364,2365],{"class":871},"    return",[865,2367,2368],{"class":1174}," (\n",[865,2370,2371,2373],{"class":867,"line":1648},[865,2372,1726],{"class":875},[865,2374,1668],{"class":1174},[865,2376,2377,2380,2383,2385,2387,2390,2393,2395,2398,2400,2403,2405,2408,2410,2413,2415,2418,2420,2422],{"class":867,"line":1653},[865,2378,2379],{"class":940},"            className",[865,2381,2382],{"class":875},"={",[865,2384,1128],{"class":950},[865,2386,1583],{"class":879},[865,2388,2389],{"class":875},"{",[865,2391,2392],{"class":879}," color",[865,2394,912],{"class":875},[865,2396,2397],{"class":879}," variant",[865,2399,912],{"class":875},[865,2401,2402],{"class":879}," size",[865,2404,912],{"class":875},[865,2406,2407],{"class":879}," invalid",[865,2409,912],{"class":875},[865,2411,2412],{"class":879}," disabled",[865,2414,912],{"class":875},[865,2416,2417],{"class":879}," readonly ",[865,2419,1377],{"class":875},[865,2421,2308],{"class":879},[865,2423,2180],{"class":875},[865,2425,2426,2429,2431,2433,2435],{"class":867,"line":1662},[865,2427,2428],{"class":940},"            role",[865,2430,947],{"class":875},[865,2432,1186],{"class":875},[865,2434,1697],{"class":892},[865,2436,1684],{"class":875},[865,2438,2439,2442,2444,2446,2448],{"class":867,"line":1671},[865,2440,2441],{"class":940},"            aria-label",[865,2443,947],{"class":875},[865,2445,1186],{"class":875},[865,2447,1712],{"class":892},[865,2449,1684],{"class":875},[865,2451,2452],{"class":867,"line":1687},[865,2453,2454],{"class":875},"        >\n",[865,2456,2457,2459,2461,2464,2466,2468,2470,2472],{"class":867,"line":1702},[865,2458,1748],{"class":875},[865,2460,865],{"class":1174},[865,2462,2463],{"class":940}," className",[865,2465,947],{"class":875},[865,2467,1186],{"class":875},[865,2469,1738],{"class":892},[865,2471,1186],{"class":875},[865,2473,1193],{"class":875},[865,2475,2476,2479,2482,2484,2487,2489,2491,2494,2496,2499,2501,2503],{"class":867,"line":1717},[865,2477,2478],{"class":875},"                {",[865,2480,2481],{"class":879},"segments",[865,2483,755],{"class":875},[865,2485,2486],{"class":950},"map",[865,2488,1583],{"class":879},[865,2490,1583],{"class":875},[865,2492,2493],{"class":2202},"segment",[865,2495,912],{"class":875},[865,2497,2498],{"class":2202}," index",[865,2500,2308],{"class":875},[865,2502,1588],{"class":940},[865,2504,2368],{"class":879},[865,2506,2507,2510,2512,2515,2517,2519],{"class":867,"line":1723},[865,2508,2509],{"class":875},"                    \u003C",[865,2511,865],{"class":1174},[865,2513,2514],{"class":940}," key",[865,2516,2382],{"class":875},[865,2518,1786],{"class":879},[865,2520,2521],{"class":875},"}>\n",[865,2523,2524,2527],{"class":867,"line":1745},[865,2525,2526],{"class":875},"                        \u003C",[865,2528,1799],{"class":1174},[865,2530,2531,2534,2536,2538,2540,2542,2545,2547,2549],{"class":867,"line":1793},[865,2532,2533],{"class":940},"                            className",[865,2535,2382],{"class":875},[865,2537,1136],{"class":950},[865,2539,1583],{"class":879},[865,2541,2389],{"class":875},[865,2543,2544],{"class":879}," size ",[865,2546,1377],{"class":875},[865,2548,2308],{"class":879},[865,2550,2180],{"class":875},[865,2552,2553,2556,2558,2561,2564,2568,2570],{"class":867,"line":1802},[865,2554,2555],{"class":940},"                            tabIndex",[865,2557,2382],{"class":875},[865,2559,2560],{"class":879},"focusable ",[865,2562,2563],{"class":875},"?",[865,2565,2567],{"class":2566},"sbssI"," 0",[865,2569,1776],{"class":875},[865,2571,2572],{"class":875}," undefined}\n",[865,2574,2575,2578,2580,2582,2584],{"class":867,"line":1817},[865,2576,2577],{"class":940},"                            role",[865,2579,947],{"class":875},[865,2581,1186],{"class":875},[865,2583,1842],{"class":892},[865,2585,1684],{"class":875},[865,2587,2588,2591,2593,2595,2598],{"class":867,"line":1832},[865,2589,2590],{"class":940},"                            aria-disabled",[865,2592,2382],{"class":875},[865,2594,1625],{"class":879},[865,2596,2597],{"class":875},"||",[865,2599,2572],{"class":875},[865,2601,2602],{"class":867,"line":1847},[865,2603,2604],{"class":875},"                        >\n",[865,2606,2607,2610,2612],{"class":867,"line":1862},[865,2608,2609],{"class":875},"                            {",[865,2611,2493],{"class":879},[865,2613,2180],{"class":875},[865,2615,2616,2619,2621],{"class":867,"line":1875},[865,2617,2618],{"class":875},"                        \u003C\u002F",[865,2620,865],{"class":1174},[865,2622,1193],{"class":875},[865,2624,2625,2628,2631,2633,2635,2637,2640,2643,2646,2648],{"class":867,"line":1881},[865,2626,2627],{"class":875},"                        {",[865,2629,2630],{"class":879},"index ",[865,2632,1171],{"class":875},[865,2634,1771],{"class":879},[865,2636,755],{"class":875},[865,2638,2639],{"class":879},"length ",[865,2641,2642],{"class":875},"-",[865,2644,2645],{"class":2566}," 1",[865,2647,2350],{"class":875},[865,2649,2368],{"class":879},[865,2651,2652,2655,2657,2659,2661,2663,2665,2667,2670,2672,2674,2676,2678],{"class":867,"line":1888},[865,2653,2654],{"class":875},"                            \u003C",[865,2656,865],{"class":1174},[865,2658,2463],{"class":940},[865,2660,947],{"class":875},[865,2662,1186],{"class":875},[865,2664,1913],{"class":892},[865,2666,1186],{"class":875},[865,2668,2669],{"class":940}," aria-hidden",[865,2671,947],{"class":875},[865,2673,1186],{"class":875},[865,2675,1928],{"class":892},[865,2677,1186],{"class":875},[865,2679,1193],{"class":875},[865,2681,2682,2685,2687],{"class":867,"line":1903},[865,2683,2684],{"class":875},"                                {",[865,2686,2330],{"class":879},[865,2688,2180],{"class":875},[865,2690,2691,2694,2696],{"class":867,"line":1918},[865,2692,2693],{"class":875},"                            \u003C\u002F",[865,2695,865],{"class":1174},[865,2697,1193],{"class":875},[865,2699,2700,2703],{"class":867,"line":1933},[865,2701,2702],{"class":879},"                        )",[865,2704,2180],{"class":875},[865,2706,2707,2710,2712],{"class":867,"line":1945},[865,2708,2709],{"class":875},"                    \u003C\u002F",[865,2711,865],{"class":1174},[865,2713,1193],{"class":875},[865,2715,2716,2719],{"class":867,"line":1950},[865,2717,2718],{"class":879},"                ))",[865,2720,2180],{"class":875},[865,2722,2723,2725,2727],{"class":867,"line":1960},[865,2724,1953],{"class":875},[865,2726,865],{"class":1174},[865,2728,1193],{"class":875},[865,2730,2731,2733,2735],{"class":867,"line":1970},[865,2732,1963],{"class":875},[865,2734,1976],{"class":1174},[865,2736,1193],{"class":875},[865,2738,2739,2742],{"class":867,"line":1981},[865,2740,2741],{"class":1174},"    )",[865,2743,899],{"class":875},[865,2745,2747],{"class":867,"line":2746},54,[865,2748,2180],{"class":875},[1157,2750,2751,2761,2897],{"v-slot:other":861},[708,2752,710,2753,2756,2757,2760],{},[716,2754,2755],{},"inputDate()"," and ",[716,2758,2759],{},"inputDateSegment()"," runtimes each return a class string. Apply them however your framework binds classes:",[856,2762,2765],{"className":858,"code":2763,"filename":2764,"language":860,"meta":861,"style":861},"import { inputDate, inputDateSegment } from \"virtual:styleframe\";\n\nconst wrapperClasses = inputDate({ color: \"neutral\", variant: \"default\", size: \"md\" });\n\u002F\u002F → \"input-date _display:inline-flex _align-items:center ...\"\n\nconst segmentClasses = inputDateSegment({ size: \"md\" });\n\u002F\u002F → \"input-date-segment _display:inline-flex _font-variant-numeric:tabular-nums ...\"\n","src\u002Fcomponents\u002Finput-date.ts",[716,2766,2767,2791,2795,2851,2857,2861,2892],{"__ignoreMap":861},[865,2768,2769,2771,2773,2775,2777,2779,2781,2783,2785,2787,2789],{"class":867,"line":868},[865,2770,872],{"class":871},[865,2772,876],{"class":875},[865,2774,1224],{"class":879},[865,2776,912],{"class":875},[865,2778,1229],{"class":879},[865,2780,883],{"class":875},[865,2782,886],{"class":871},[865,2784,1209],{"class":875},[865,2786,893],{"class":892},[865,2788,1186],{"class":875},[865,2790,899],{"class":875},[865,2792,2793],{"class":867,"line":902},[865,2794,934],{"emptyLinePlaceholder":231},[865,2796,2797,2799,2802,2804,2806,2808,2810,2812,2815,2817,2819,2821,2823,2825,2827,2829,2831,2833,2835,2837,2839,2841,2843,2845,2847,2849],{"class":867,"line":931},[865,2798,941],{"class":940},[865,2800,2801],{"class":879}," wrapperClasses ",[865,2803,947],{"class":875},[865,2805,1224],{"class":950},[865,2807,1583],{"class":879},[865,2809,2389],{"class":875},[865,2811,2392],{"class":1174},[865,2813,2814],{"class":875},":",[865,2816,1209],{"class":875},[865,2818,1264],{"class":892},[865,2820,1186],{"class":875},[865,2822,912],{"class":875},[865,2824,2397],{"class":1174},[865,2826,2814],{"class":875},[865,2828,1209],{"class":875},[865,2830,1281],{"class":892},[865,2832,1186],{"class":875},[865,2834,912],{"class":875},[865,2836,2402],{"class":1174},[865,2838,2814],{"class":875},[865,2840,1209],{"class":875},[865,2842,1297],{"class":892},[865,2844,1186],{"class":875},[865,2846,883],{"class":875},[865,2848,2308],{"class":879},[865,2850,899],{"class":875},[865,2852,2853],{"class":867,"line":937},[865,2854,2856],{"class":2855},"sHwdD","\u002F\u002F → \"input-date _display:inline-flex _align-items:center ...\"\n",[865,2858,2859],{"class":867,"line":958},[865,2860,934],{"emptyLinePlaceholder":231},[865,2862,2863,2865,2868,2870,2872,2874,2876,2878,2880,2882,2884,2886,2888,2890],{"class":867,"line":963},[865,2864,941],{"class":940},[865,2866,2867],{"class":879}," segmentClasses ",[865,2869,947],{"class":875},[865,2871,1229],{"class":950},[865,2873,1583],{"class":879},[865,2875,2389],{"class":875},[865,2877,2402],{"class":1174},[865,2879,2814],{"class":875},[865,2881,1209],{"class":875},[865,2883,1297],{"class":892},[865,2885,1186],{"class":875},[865,2887,883],{"class":875},[865,2889,2308],{"class":879},[865,2891,899],{"class":875},[865,2893,2894],{"class":867,"line":980},[865,2895,2896],{"class":2855},"\u002F\u002F → \"input-date-segment _display:inline-flex _font-variant-numeric:tabular-nums ...\"\n",[856,2898,2903],{"className":2899,"code":2900,"filename":2901,"language":2902,"meta":861,"style":861},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"input-date _display:inline-flex ...\" role=\"group\" aria-label=\"Date input\">\n    \u003Cspan class=\"input-date-field\">\n        \u003Cspan class=\"input-date-segment ...\" tabindex=\"0\" role=\"spinbutton\">12\u003C\u002Fspan>\n        \u003Cspan class=\"input-date-separator\" aria-hidden=\"true\">\u002F\u003C\u002Fspan>\n        \u003Cspan class=\"input-date-segment ...\" tabindex=\"0\" role=\"spinbutton\">31\u003C\u002Fspan>\n        \u003Cspan class=\"input-date-separator\" aria-hidden=\"true\">\u002F\u003C\u002Fspan>\n        \u003Cspan class=\"input-date-segment ...\" tabindex=\"0\" role=\"spinbutton\">2026\u003C\u002Fspan>\n    \u003C\u002Fspan>\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Finput-date.html","html",[716,2904,2905,2946,2964,3015,3051,3098,3134,3181,3189],{"__ignoreMap":861},[865,2906,2907,2909,2911,2913,2915,2917,2920,2922,2925,2927,2929,2931,2933,2936,2938,2940,2942,2944],{"class":867,"line":868},[865,2908,1171],{"class":875},[865,2910,1976],{"class":1174},[865,2912,1731],{"class":940},[865,2914,947],{"class":875},[865,2916,1186],{"class":875},[865,2918,2919],{"class":892},"input-date _display:inline-flex ...",[865,2921,1186],{"class":875},[865,2923,2924],{"class":940}," role",[865,2926,947],{"class":875},[865,2928,1186],{"class":875},[865,2930,1697],{"class":892},[865,2932,1186],{"class":875},[865,2934,2935],{"class":940}," aria-label",[865,2937,947],{"class":875},[865,2939,1186],{"class":875},[865,2941,1712],{"class":892},[865,2943,1186],{"class":875},[865,2945,1193],{"class":875},[865,2947,2948,2950,2952,2954,2956,2958,2960,2962],{"class":867,"line":902},[865,2949,1665],{"class":875},[865,2951,865],{"class":1174},[865,2953,1731],{"class":940},[865,2955,947],{"class":875},[865,2957,1186],{"class":875},[865,2959,1738],{"class":892},[865,2961,1186],{"class":875},[865,2963,1193],{"class":875},[865,2965,2966,2968,2970,2972,2974,2976,2979,2981,2984,2986,2988,2991,2993,2995,2997,2999,3001,3003,3006,3009,3011,3013],{"class":867,"line":931},[865,2967,1726],{"class":875},[865,2969,865],{"class":1174},[865,2971,1731],{"class":940},[865,2973,947],{"class":875},[865,2975,1186],{"class":875},[865,2977,2978],{"class":892},"input-date-segment ...",[865,2980,1186],{"class":875},[865,2982,2983],{"class":940}," tabindex",[865,2985,947],{"class":875},[865,2987,1186],{"class":875},[865,2989,2990],{"class":892},"0",[865,2992,1186],{"class":875},[865,2994,2924],{"class":940},[865,2996,947],{"class":875},[865,2998,1186],{"class":875},[865,3000,1842],{"class":892},[865,3002,1186],{"class":875},[865,3004,3005],{"class":875},">",[865,3007,3008],{"class":879},"12",[865,3010,1641],{"class":875},[865,3012,865],{"class":1174},[865,3014,1193],{"class":875},[865,3016,3017,3019,3021,3023,3025,3027,3029,3031,3033,3035,3037,3039,3041,3043,3045,3047,3049],{"class":867,"line":937},[865,3018,1726],{"class":875},[865,3020,865],{"class":1174},[865,3022,1731],{"class":940},[865,3024,947],{"class":875},[865,3026,1186],{"class":875},[865,3028,1913],{"class":892},[865,3030,1186],{"class":875},[865,3032,2669],{"class":940},[865,3034,947],{"class":875},[865,3036,1186],{"class":875},[865,3038,1928],{"class":892},[865,3040,1186],{"class":875},[865,3042,3005],{"class":875},[865,3044,718],{"class":879},[865,3046,1641],{"class":875},[865,3048,865],{"class":1174},[865,3050,1193],{"class":875},[865,3052,3053,3055,3057,3059,3061,3063,3065,3067,3069,3071,3073,3075,3077,3079,3081,3083,3085,3087,3089,3092,3094,3096],{"class":867,"line":958},[865,3054,1726],{"class":875},[865,3056,865],{"class":1174},[865,3058,1731],{"class":940},[865,3060,947],{"class":875},[865,3062,1186],{"class":875},[865,3064,2978],{"class":892},[865,3066,1186],{"class":875},[865,3068,2983],{"class":940},[865,3070,947],{"class":875},[865,3072,1186],{"class":875},[865,3074,2990],{"class":892},[865,3076,1186],{"class":875},[865,3078,2924],{"class":940},[865,3080,947],{"class":875},[865,3082,1186],{"class":875},[865,3084,1842],{"class":892},[865,3086,1186],{"class":875},[865,3088,3005],{"class":875},[865,3090,3091],{"class":879},"31",[865,3093,1641],{"class":875},[865,3095,865],{"class":1174},[865,3097,1193],{"class":875},[865,3099,3100,3102,3104,3106,3108,3110,3112,3114,3116,3118,3120,3122,3124,3126,3128,3130,3132],{"class":867,"line":963},[865,3101,1726],{"class":875},[865,3103,865],{"class":1174},[865,3105,1731],{"class":940},[865,3107,947],{"class":875},[865,3109,1186],{"class":875},[865,3111,1913],{"class":892},[865,3113,1186],{"class":875},[865,3115,2669],{"class":940},[865,3117,947],{"class":875},[865,3119,1186],{"class":875},[865,3121,1928],{"class":892},[865,3123,1186],{"class":875},[865,3125,3005],{"class":875},[865,3127,718],{"class":879},[865,3129,1641],{"class":875},[865,3131,865],{"class":1174},[865,3133,1193],{"class":875},[865,3135,3136,3138,3140,3142,3144,3146,3148,3150,3152,3154,3156,3158,3160,3162,3164,3166,3168,3170,3172,3175,3177,3179],{"class":867,"line":980},[865,3137,1726],{"class":875},[865,3139,865],{"class":1174},[865,3141,1731],{"class":940},[865,3143,947],{"class":875},[865,3145,1186],{"class":875},[865,3147,2978],{"class":892},[865,3149,1186],{"class":875},[865,3151,2983],{"class":940},[865,3153,947],{"class":875},[865,3155,1186],{"class":875},[865,3157,2990],{"class":892},[865,3159,1186],{"class":875},[865,3161,2924],{"class":940},[865,3163,947],{"class":875},[865,3165,1186],{"class":875},[865,3167,1842],{"class":892},[865,3169,1186],{"class":875},[865,3171,3005],{"class":875},[865,3173,3174],{"class":879},"2026",[865,3176,1641],{"class":875},[865,3178,865],{"class":1174},[865,3180,1193],{"class":875},[865,3182,3183,3185,3187],{"class":867,"line":996},[865,3184,1973],{"class":875},[865,3186,865],{"class":1174},[865,3188,1193],{"class":875},[865,3190,3191,3193,3195],{"class":867,"line":1001},[865,3192,1641],{"class":875},[865,3194,1976],{"class":1174},[865,3196,1193],{"class":875},[840,3198,3200],{"id":3199},"see-it-in-action","See it in action",[3202,3203],"story-preview",{"story":3204,":panel":1928},"theme-recipes-forms-inputdate--default",[704,3206,203],{"id":3207},"colors",[708,3209,3210,3211,1144,3213,1148,3215,3217,3218,2756,3220,3222,3223,3225,3226,755],{},"The Input Date wrapper includes 3 color variants: ",[716,3212,1400],{},[716,3214,1410],{},[716,3216,1264],{},". Like the ",[741,3219,464],{"href":465},[741,3221,472],{"href":473}," recipes, these are neutral-spectrum surface colors rather than status colors — the color sets the field background and border, while the ",[716,3224,738],{}," ring stays ",[716,3227,3228],{},"@color.primary",[708,3230,710,3231,3233],{},[716,3232,1264],{}," color adapts automatically: a light surface in light mode and a dark surface in dark mode, making it the safest default for general-purpose forms.",[3202,3235],{"story":3236,":panel":1928},"theme-recipes-forms-inputdate--neutral",[3238,3239,3241],"h3",{"id":3240},"color-reference","Color Reference",[3202,3243],{"story":3244,":height":3245},"theme-recipes-forms-inputdate--all-variants","420",[3247,3248,3249,3265],"table",{},[3250,3251,3252],"thead",{},[3253,3254,3255,3259,3262],"tr",{},[3256,3257,3258],"th",{},"Color",[3256,3260,3261],{},"Token",[3256,3263,3264],{},"Use Case",[3266,3267,3268,3287,3304],"tbody",{},[3253,3269,3270,3275,3284],{},[3271,3272,3273],"td",{},[716,3274,1400],{},[3271,3276,3277,3280,3281],{},[716,3278,3279],{},"@color.white"," \u002F ",[716,3282,3283],{},"@color.gray-200",[3271,3285,3286],{},"Light surfaces, stays light in dark mode",[3253,3288,3289,3293,3301],{},[3271,3290,3291],{},[716,3292,1410],{},[3271,3294,3295,3280,3298],{},[716,3296,3297],{},"@color.gray-900",[716,3299,3300],{},"@color.gray-700",[3271,3302,3303],{},"Dark surfaces, stays dark in light mode",[3253,3305,3306,3310,3313],{},[3271,3307,3308],{},[716,3309,1264],{},[3271,3311,3312],{},"Adaptive (light ↔ dark)",[3271,3314,3315],{},"Default color, adapts to the current color scheme",[3317,3318,3319,3322,3323,3325],"tip",{},[712,3320,3321],{},"Pro tip:"," Use ",[716,3324,1264],{}," as your default date-field color. It adapts to the user's color scheme automatically, so you don't need to manage light and dark surfaces separately.",[704,3327,3329],{"id":3328},"variants","Variants",[708,3331,3332,3333,3335],{},"Three visual styles control how much surface the field shows. All three share the same ",[716,3334,738],{}," ring and invalid border — they differ only in their resting background and border.",[3238,3337,3338],{"id":1281},"Default",[708,3340,3341,3343],{},[716,3342,1281],{}," draws a bordered field on a solid surface — the most legible option and the right default for forms.",[3202,3345],{"story":3346,":panel":1928},"theme-recipes-forms-inputdate--default-variant",[3238,3348,3349],{"id":1443},"Soft",[708,3351,3352,3354],{},[716,3353,1443],{}," fills the field with a subtle tinted background and a matching border, for a gentler look that still reads as an input.",[3202,3356],{"story":3357,":panel":1928},"theme-recipes-forms-inputdate--soft",[3238,3359,3360],{"id":1452},"Ghost",[708,3362,3363,3365],{},[716,3364,1452],{}," is transparent until focused, for dense or low-chrome layouts. Pair it with a clear label so the field stays discoverable.",[3202,3367],{"story":3368,":panel":1928},"theme-recipes-forms-inputdate--ghost",[704,3370,3372],{"id":3371},"sizes","Sizes",[708,3374,3375,3376,3378,3379,3381,3382,3385],{},"Three size variants from ",[716,3377,1469],{}," to ",[716,3380,1486],{}," control the font size, field padding, and border radius. Pass the same ",[716,3383,3384],{},"size"," to the wrapper and to each segment so the segment typography and corner radius track the field.",[3202,3387],{"story":3388,":height":3389},"theme-recipes-forms-inputdate--all-sizes","360",[3238,3391,3393],{"id":3392},"size-reference","Size Reference",[3247,3395,3396,3412],{},[3250,3397,3398],{},[3253,3399,3400,3403,3406,3409],{},[3256,3401,3402],{},"Size",[3256,3404,3405],{},"Font Size",[3256,3407,3408],{},"Padding (Y \u002F X)",[3256,3410,3411],{},"Border Radius",[3266,3413,3414,3438,3462],{},[3253,3415,3416,3420,3425,3433],{},[3271,3417,3418],{},[716,3419,1469],{},[3271,3421,3422],{},[716,3423,3424],{},"@font-size.xs",[3271,3426,3427,3280,3430],{},[716,3428,3429],{},"@0.375",[716,3431,3432],{},"@0.625",[3271,3434,3435],{},[716,3436,3437],{},"@border-radius.sm",[3253,3439,3440,3444,3449,3457],{},[3271,3441,3442],{},[716,3443,1297],{},[3271,3445,3446],{},[716,3447,3448],{},"@font-size.sm",[3271,3450,3451,3280,3454],{},[716,3452,3453],{},"@0.5",[716,3455,3456],{},"@0.75",[3271,3458,3459],{},[716,3460,3461],{},"@border-radius.md",[3253,3463,3464,3468,3473,3480],{},[3271,3465,3466],{},[716,3467,1486],{},[3271,3469,3470],{},[716,3471,3472],{},"@font-size.md",[3271,3474,3475,3280,3477],{},[716,3476,3432],{},[716,3478,3479],{},"@0.875",[3271,3481,3482],{},[716,3483,3461],{},[777,3485,3486,3489,3490,3492,3493,3495],{},[712,3487,3488],{},"Good to know:"," The segment recipe carries its own ",[716,3491,3384],{}," axis that scales the segment font, horizontal padding, and the highlight's corner radius. Spread the same ",[716,3494,3384],{}," to both parts so they stay in proportion.",[704,3497,350],{"id":3498},"states",[3238,3500,3501],{"id":1143},"Invalid",[708,3503,3504,3505,3507,3508,3510,3511,3514],{},"Set the ",[716,3506,1143],{}," state when the entered date is wrong or out of range. The field border and the ",[716,3509,738],{}," ring switch to ",[716,3512,3513],{},"@color.error",", layered over whatever color and style the field already uses.",[3202,3516],{"story":3517,":panel":1928},"theme-recipes-forms-inputdate--invalid",[3238,3519,3520],{"id":1147},"Disabled",[708,3522,710,3523,3525,3526,3529,3530,3533,3534,3537],{},[716,3524,1147],{}," state dims the field to ",[716,3527,3528],{},"0.5"," opacity, switches the cursor to ",[716,3531,3532],{},"not-allowed",", and blocks pointer interaction. Drop ",[716,3535,3536],{},"tabindex"," from the segments so the field also leaves the tab order.",[3202,3539],{"story":3540,":panel":1928},"theme-recipes-forms-inputdate--disabled",[3238,3542,3544],{"id":3543},"read-only","Read-only",[708,3546,3547],{},"Applies a subtle background shift and a default cursor while keeping the value selectable. Keep the segments out of the tab order (or non-editable) so the value is shown but not changed.",[3202,3549],{"story":3550,":panel":1928},"theme-recipes-forms-inputdate--read-only",[777,3552,3553,3555,3556,3558,3559,2756,3561,3563],{},[712,3554,3488],{}," ",[716,3557,1143],{}," is applied before ",[716,3560,1151],{},[716,3562,1147],{}," in the compound variant order, so an invalid field keeps its error border even when it is also read-only, and a disabled field still dims on top of any other state.",[704,3565,3567],{"id":3566},"anatomy","Anatomy",[708,3569,3570],{},"The Input Date is composed of two recipes plus a plain separator selector.",[3247,3572,3573,3586],{},[3250,3574,3575],{},[3253,3576,3577,3580,3583],{},[3256,3578,3579],{},"Part",[3256,3581,3582],{},"Recipe \u002F Selector",[3256,3584,3585],{},"Role",[3266,3587,3588,3611,3630],{},[3253,3589,3590,3595,3599],{},[3271,3591,3592],{},[712,3593,3594],{},"Field",[3271,3596,3597],{},[716,3598,734],{},[3271,3600,710,3601,3604,3605,3607,3608,3610],{},[716,3602,3603],{},".input-date"," wrapper — owns the visual field (border, background, padding, ",[716,3606,738],{}," ring) and lays out the inner ",[716,3609,1132],{}," row",[3253,3612,3613,3618,3622],{},[3271,3614,3615],{},[712,3616,3617],{},"Segment",[3271,3619,3620],{},[716,3621,750],{},[3271,3623,710,3624,3627,3628],{},[716,3625,3626],{},".input-date-segment"," editable part — transparent, inherits typography, centers digits with tabular figures, and highlights on ",[716,3629,754],{},[3253,3631,3632,3637,3641],{},[3271,3633,3634],{},[712,3635,3636],{},"Separator",[3271,3638,3639],{},[716,3640,764],{},[3271,3642,3643,3644,3646],{},"A muted, non-selectable glyph (",[716,3645,768],{},") between segments — registered by the wrapper's setup, no axis of its own",[856,3648,3650],{"className":2899,"code":3649,"language":2902,"meta":861,"style":861},"\u003Cdiv class=\"inputDate(...)\" role=\"group\" aria-label=\"Date input\">\n    \u003Cspan class=\"input-date-field\">\n        \u003Cspan class=\"inputDateSegment(...)\" tabindex=\"0\" role=\"spinbutton\">12\u003C\u002Fspan>\n        \u003Cspan class=\"input-date-separator\" aria-hidden=\"true\">\u002F\u003C\u002Fspan>\n        \u003Cspan class=\"inputDateSegment(...)\" tabindex=\"0\" role=\"spinbutton\">31\u003C\u002Fspan>\n        \u003C!-- one segment per part -->\n    \u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[716,3651,3652,3691,3709,3756,3792,3838,3843,3851],{"__ignoreMap":861},[865,3653,3654,3656,3658,3660,3662,3664,3667,3669,3671,3673,3675,3677,3679,3681,3683,3685,3687,3689],{"class":867,"line":868},[865,3655,1171],{"class":875},[865,3657,1976],{"class":1174},[865,3659,1731],{"class":940},[865,3661,947],{"class":875},[865,3663,1186],{"class":875},[865,3665,3666],{"class":892},"inputDate(...)",[865,3668,1186],{"class":875},[865,3670,2924],{"class":940},[865,3672,947],{"class":875},[865,3674,1186],{"class":875},[865,3676,1697],{"class":892},[865,3678,1186],{"class":875},[865,3680,2935],{"class":940},[865,3682,947],{"class":875},[865,3684,1186],{"class":875},[865,3686,1712],{"class":892},[865,3688,1186],{"class":875},[865,3690,1193],{"class":875},[865,3692,3693,3695,3697,3699,3701,3703,3705,3707],{"class":867,"line":902},[865,3694,1665],{"class":875},[865,3696,865],{"class":1174},[865,3698,1731],{"class":940},[865,3700,947],{"class":875},[865,3702,1186],{"class":875},[865,3704,1738],{"class":892},[865,3706,1186],{"class":875},[865,3708,1193],{"class":875},[865,3710,3711,3713,3715,3717,3719,3721,3724,3726,3728,3730,3732,3734,3736,3738,3740,3742,3744,3746,3748,3750,3752,3754],{"class":867,"line":931},[865,3712,1726],{"class":875},[865,3714,865],{"class":1174},[865,3716,1731],{"class":940},[865,3718,947],{"class":875},[865,3720,1186],{"class":875},[865,3722,3723],{"class":892},"inputDateSegment(...)",[865,3725,1186],{"class":875},[865,3727,2983],{"class":940},[865,3729,947],{"class":875},[865,3731,1186],{"class":875},[865,3733,2990],{"class":892},[865,3735,1186],{"class":875},[865,3737,2924],{"class":940},[865,3739,947],{"class":875},[865,3741,1186],{"class":875},[865,3743,1842],{"class":892},[865,3745,1186],{"class":875},[865,3747,3005],{"class":875},[865,3749,3008],{"class":879},[865,3751,1641],{"class":875},[865,3753,865],{"class":1174},[865,3755,1193],{"class":875},[865,3757,3758,3760,3762,3764,3766,3768,3770,3772,3774,3776,3778,3780,3782,3784,3786,3788,3790],{"class":867,"line":937},[865,3759,1726],{"class":875},[865,3761,865],{"class":1174},[865,3763,1731],{"class":940},[865,3765,947],{"class":875},[865,3767,1186],{"class":875},[865,3769,1913],{"class":892},[865,3771,1186],{"class":875},[865,3773,2669],{"class":940},[865,3775,947],{"class":875},[865,3777,1186],{"class":875},[865,3779,1928],{"class":892},[865,3781,1186],{"class":875},[865,3783,3005],{"class":875},[865,3785,718],{"class":879},[865,3787,1641],{"class":875},[865,3789,865],{"class":1174},[865,3791,1193],{"class":875},[865,3793,3794,3796,3798,3800,3802,3804,3806,3808,3810,3812,3814,3816,3818,3820,3822,3824,3826,3828,3830,3832,3834,3836],{"class":867,"line":958},[865,3795,1726],{"class":875},[865,3797,865],{"class":1174},[865,3799,1731],{"class":940},[865,3801,947],{"class":875},[865,3803,1186],{"class":875},[865,3805,3723],{"class":892},[865,3807,1186],{"class":875},[865,3809,2983],{"class":940},[865,3811,947],{"class":875},[865,3813,1186],{"class":875},[865,3815,2990],{"class":892},[865,3817,1186],{"class":875},[865,3819,2924],{"class":940},[865,3821,947],{"class":875},[865,3823,1186],{"class":875},[865,3825,1842],{"class":892},[865,3827,1186],{"class":875},[865,3829,3005],{"class":875},[865,3831,3091],{"class":879},[865,3833,1641],{"class":875},[865,3835,865],{"class":1174},[865,3837,1193],{"class":875},[865,3839,3840],{"class":867,"line":963},[865,3841,3842],{"class":2855},"        \u003C!-- one segment per part -->\n",[865,3844,3845,3847,3849],{"class":867,"line":980},[865,3846,1973],{"class":875},[865,3848,865],{"class":1174},[865,3850,1193],{"class":875},[865,3852,3853,3855,3857],{"class":867,"line":996},[865,3854,1641],{"class":875},[865,3856,1976],{"class":1174},[865,3858,1193],{"class":875},[708,3860,3861],{},"The wrapper carries the entire color \u002F style \u002F state surface; the segments are transparent and only paint a highlight on focus, so every segment in a field stays visually consistent.",[704,3863,584],{"id":3864},"accessibility",[725,3866,3867,3881,3898,3911,3926,3945],{},[728,3868,3869,3872,3873,3876,3877,3880],{},[712,3870,3871],{},"Group and label the field."," Wrap the segments in an element with ",[716,3874,3875],{},"role=\"group\""," and an ",[716,3878,3879],{},"aria-label"," (e.g. \"Date input\") so assistive technology announces them as one control rather than several unrelated fields.",[728,3882,3883,3886,3887,3890,3891,3280,3894,3897],{},[712,3884,3885],{},"Expose each segment as a spinbutton."," Give every editable segment ",[716,3888,3889],{},"role=\"spinbutton\""," with ",[716,3892,3893],{},"aria-valuenow",[716,3895,3896],{},"aria-valuetext"," so screen readers announce the current value and arrow-key editing is understood.",[728,3899,3900,3903,3904,3907,3908,3910],{},[712,3901,3902],{},"Keep segments focusable."," Make each segment reachable with ",[716,3905,3906],{},"tabindex=\"0\""," (when not disabled or read-only) so keyboard users can move part to part; the wrapper's ",[716,3909,738],{}," ring lights the whole field as they go.",[728,3912,3913,3916,3917,3919,3920,755],{},[712,3914,3915],{},"Don't rely on color alone."," The ",[716,3918,1143],{}," state changes the border and ring color; pair it with a visible error message so the failure isn't conveyed by color only, satisfying ",[741,3921,3925],{"href":3922,"rel":3923},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Fuse-of-color.html",[3924],"nofollow","WCAG 1.4.1",[728,3927,3928,3931,3932,3934,3935,3938,3939,3941,3942,3944],{},[712,3929,3930],{},"Reflect disabled and read-only."," Drop ",[716,3933,3536],{}," (and set ",[716,3936,3937],{},"aria-disabled",") for ",[716,3940,1147],{},", and keep segments out of the edit path for ",[716,3943,1151],{},", so the field behaves correctly for keyboard and assistive-technology users.",[728,3946,3947,3916,3950,3952,3953,3955,3956,755],{},[712,3948,3949],{},"Verify contrast.",[716,3951,738],{}," ring and the segment focus highlight use ",[716,3954,3228],{},". Default tokens meet WCAG AA; if you override the primary color, verify with the ",[741,3957,3960],{"href":3958,"rel":3959},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[3924],"WebAIM Contrast Checker",[704,3962,3964],{"id":3963},"customization","Customization",[3238,3966,3968],{"id":3967},"overriding-defaults","Overriding Defaults",[708,3970,3971],{},"Each Input Date composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[856,3973,3975],{"className":858,"code":3974,"filename":854,"language":860,"meta":861,"style":861},"import { styleframe } from 'virtual:styleframe';\nimport { useInputDateRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst inputDate = useInputDateRecipe(s, {\n    defaultVariants: {\n        color: 'neutral',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[716,3976,3977,3997,4017,4021,4035,4039,4056,4065,4080,4095,4100,4108,4112],{"__ignoreMap":861},[865,3978,3979,3981,3983,3985,3987,3989,3991,3993,3995],{"class":867,"line":868},[865,3980,872],{"class":871},[865,3982,876],{"class":875},[865,3984,880],{"class":879},[865,3986,883],{"class":875},[865,3988,886],{"class":871},[865,3990,889],{"class":875},[865,3992,893],{"class":892},[865,3994,896],{"class":875},[865,3996,899],{"class":875},[865,3998,3999,4001,4003,4005,4007,4009,4011,4013,4015],{"class":867,"line":902},[865,4000,872],{"class":871},[865,4002,876],{"class":875},[865,4004,909],{"class":879},[865,4006,883],{"class":875},[865,4008,886],{"class":871},[865,4010,889],{"class":875},[865,4012,924],{"class":892},[865,4014,896],{"class":875},[865,4016,899],{"class":875},[865,4018,4019],{"class":867,"line":931},[865,4020,934],{"emptyLinePlaceholder":231},[865,4022,4023,4025,4027,4029,4031,4033],{"class":867,"line":937},[865,4024,941],{"class":940},[865,4026,944],{"class":879},[865,4028,947],{"class":875},[865,4030,880],{"class":950},[865,4032,953],{"class":879},[865,4034,899],{"class":875},[865,4036,4037],{"class":867,"line":958},[865,4038,934],{"emptyLinePlaceholder":231},[865,4040,4041,4043,4045,4047,4049,4052,4054],{"class":867,"line":963},[865,4042,941],{"class":940},[865,4044,968],{"class":879},[865,4046,947],{"class":875},[865,4048,909],{"class":950},[865,4050,4051],{"class":879},"(s",[865,4053,912],{"class":875},[865,4055,1252],{"class":875},[865,4057,4058,4061,4063],{"class":867,"line":980},[865,4059,4060],{"class":1174},"    defaultVariants",[865,4062,2814],{"class":875},[865,4064,1252],{"class":875},[865,4066,4067,4070,4072,4074,4076,4078],{"class":867,"line":996},[865,4068,4069],{"class":1174},"        color",[865,4071,2814],{"class":875},[865,4073,889],{"class":875},[865,4075,1264],{"class":892},[865,4077,896],{"class":875},[865,4079,1269],{"class":875},[865,4081,4082,4085,4087,4089,4091,4093],{"class":867,"line":1001},[865,4083,4084],{"class":1174},"        size",[865,4086,2814],{"class":875},[865,4088,889],{"class":875},[865,4090,1486],{"class":892},[865,4092,896],{"class":875},[865,4094,1269],{"class":875},[865,4096,4097],{"class":867,"line":1317},[865,4098,4099],{"class":875},"    },\n",[865,4101,4102,4104,4106],{"class":867,"line":1329},[865,4103,1377],{"class":875},[865,4105,2308],{"class":879},[865,4107,899],{"class":875},[865,4109,4110],{"class":867,"line":1341},[865,4111,934],{"emptyLinePlaceholder":231},[865,4113,4114,4116,4118,4120],{"class":867,"line":1358},[865,4115,1004],{"class":871},[865,4117,1007],{"class":871},[865,4119,1010],{"class":879},[865,4121,899],{"class":875},[3238,4123,4125],{"id":4124},"filtering-variants","Filtering Variants",[708,4127,4128,4129,4132],{},"If you only need a subset of the available variants, use the ",[716,4130,4131],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[856,4134,4136],{"className":858,"code":4135,"filename":854,"language":860,"meta":861,"style":861},"import { styleframe } from 'virtual:styleframe';\nimport { useInputDateRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the neutral color and the default style\nconst inputDate = useInputDateRecipe(s, {\n    filter: {\n        color: ['neutral'],\n        variant: ['default'],\n    },\n});\n\nexport default s;\n",[716,4137,4138,4158,4178,4182,4196,4200,4205,4221,4230,4250,4269,4273,4281,4285],{"__ignoreMap":861},[865,4139,4140,4142,4144,4146,4148,4150,4152,4154,4156],{"class":867,"line":868},[865,4141,872],{"class":871},[865,4143,876],{"class":875},[865,4145,880],{"class":879},[865,4147,883],{"class":875},[865,4149,886],{"class":871},[865,4151,889],{"class":875},[865,4153,893],{"class":892},[865,4155,896],{"class":875},[865,4157,899],{"class":875},[865,4159,4160,4162,4164,4166,4168,4170,4172,4174,4176],{"class":867,"line":902},[865,4161,872],{"class":871},[865,4163,876],{"class":875},[865,4165,909],{"class":879},[865,4167,883],{"class":875},[865,4169,886],{"class":871},[865,4171,889],{"class":875},[865,4173,924],{"class":892},[865,4175,896],{"class":875},[865,4177,899],{"class":875},[865,4179,4180],{"class":867,"line":931},[865,4181,934],{"emptyLinePlaceholder":231},[865,4183,4184,4186,4188,4190,4192,4194],{"class":867,"line":937},[865,4185,941],{"class":940},[865,4187,944],{"class":879},[865,4189,947],{"class":875},[865,4191,880],{"class":950},[865,4193,953],{"class":879},[865,4195,899],{"class":875},[865,4197,4198],{"class":867,"line":958},[865,4199,934],{"emptyLinePlaceholder":231},[865,4201,4202],{"class":867,"line":963},[865,4203,4204],{"class":2855},"\u002F\u002F Only generate the neutral color and the default style\n",[865,4206,4207,4209,4211,4213,4215,4217,4219],{"class":867,"line":980},[865,4208,941],{"class":940},[865,4210,968],{"class":879},[865,4212,947],{"class":875},[865,4214,909],{"class":950},[865,4216,4051],{"class":879},[865,4218,912],{"class":875},[865,4220,1252],{"class":875},[865,4222,4223,4226,4228],{"class":867,"line":996},[865,4224,4225],{"class":1174},"    filter",[865,4227,2814],{"class":875},[865,4229,1252],{"class":875},[865,4231,4232,4234,4236,4239,4241,4243,4245,4248],{"class":867,"line":1001},[865,4233,4069],{"class":1174},[865,4235,2814],{"class":875},[865,4237,4238],{"class":879}," [",[865,4240,896],{"class":875},[865,4242,1264],{"class":892},[865,4244,896],{"class":875},[865,4246,4247],{"class":879},"]",[865,4249,1269],{"class":875},[865,4251,4252,4255,4257,4259,4261,4263,4265,4267],{"class":867,"line":1317},[865,4253,4254],{"class":1174},"        variant",[865,4256,2814],{"class":875},[865,4258,4238],{"class":879},[865,4260,896],{"class":875},[865,4262,1281],{"class":892},[865,4264,896],{"class":875},[865,4266,4247],{"class":879},[865,4268,1269],{"class":875},[865,4270,4271],{"class":867,"line":1329},[865,4272,4099],{"class":875},[865,4274,4275,4277,4279],{"class":867,"line":1341},[865,4276,1377],{"class":875},[865,4278,2308],{"class":879},[865,4280,899],{"class":875},[865,4282,4283],{"class":867,"line":1358},[865,4284,934],{"emptyLinePlaceholder":231},[865,4286,4287,4289,4291,4293],{"class":867,"line":1374},[865,4288,1004],{"class":871},[865,4290,1007],{"class":871},[865,4292,1010],{"class":879},[865,4294,899],{"class":875},[777,4296,4297,4299],{},[712,4298,3488],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[704,4301,83],{"id":4302},"api-reference",[3238,4304,4306],{"id":4305},"useinputdaterecipes-options",[716,4307,4308],{},"useInputDateRecipe(s, options?)",[708,4310,4311,4312,4314,4315,4317,4318,4320,4321,4323],{},"Creates the Input Date wrapper recipe — the ",[716,4313,3603],{}," field that owns the visual surface (border, background, padding, ",[716,4316,738],{}," ring) and lays out the inner segment row. Its setup callback registers the ",[716,4319,1132],{}," flex row and the muted ",[716,4322,764],{}," glyph.",[708,4325,4326],{},[712,4327,4328],{},"Parameters:",[3247,4330,4331,4344],{},[3250,4332,4333],{},[3253,4334,4335,4338,4341],{},[3256,4336,4337],{},"Parameter",[3256,4339,4340],{},"Type",[3256,4342,4343],{},"Description",[3266,4345,4346,4361,4376,4391,4405,4420],{},[3253,4347,4348,4353,4358],{},[3271,4349,4350],{},[716,4351,4352],{},"s",[3271,4354,4355],{},[716,4356,4357],{},"Styleframe",[3271,4359,4360],{},"The Styleframe instance",[3253,4362,4363,4368,4373],{},[3271,4364,4365],{},[716,4366,4367],{},"options",[3271,4369,4370],{},[716,4371,4372],{},"DeepPartial\u003CRecipeConfig>",[3271,4374,4375],{},"Optional overrides for the recipe configuration",[3253,4377,4378,4383,4388],{},[3271,4379,4380],{},[716,4381,4382],{},"options.base",[3271,4384,4385],{},[716,4386,4387],{},"VariantDeclarationsBlock",[3271,4389,4390],{},"Custom base styles for the wrapper",[3253,4392,4393,4398,4402],{},[3271,4394,4395],{},[716,4396,4397],{},"options.variants",[3271,4399,4400],{},[716,4401,3329],{},[3271,4403,4404],{},"Custom variant definitions for the recipe",[3253,4406,4407,4412,4417],{},[3271,4408,4409],{},[716,4410,4411],{},"options.defaultVariants",[3271,4413,4414],{},[716,4415,4416],{},"Record\u003Ckeyof Variants, string>",[3271,4418,4419],{},"Default variant values for the recipe",[3253,4421,4422,4427,4432],{},[3271,4423,4424],{},[716,4425,4426],{},"options.filter",[3271,4428,4429],{},[716,4430,4431],{},"Record\u003Cstring, string[]>",[3271,4433,4434],{},"Limit which variant values are generated",[708,4436,4437],{},[712,4438,4439],{},"Variants:",[3247,4441,4442,4454],{},[3250,4443,4444],{},[3253,4445,4446,4449,4452],{},[3256,4447,4448],{},"Variant",[3256,4450,4451],{},"Options",[3256,4453,3338],{},[3266,4455,4456,4475,4494,4512,4529,4545],{},[3253,4457,4458,4463,4471],{},[3271,4459,4460],{},[716,4461,4462],{},"color",[3271,4464,4465,1144,4467,1144,4469],{},[716,4466,1400],{},[716,4468,1410],{},[716,4470,1264],{},[3271,4472,4473],{},[716,4474,1264],{},[3253,4476,4477,4482,4490],{},[3271,4478,4479],{},[716,4480,4481],{},"variant",[3271,4483,4484,1144,4486,1144,4488],{},[716,4485,1281],{},[716,4487,1443],{},[716,4489,1452],{},[3271,4491,4492],{},[716,4493,1281],{},[3253,4495,4496,4500,4508],{},[3271,4497,4498],{},[716,4499,3384],{},[3271,4501,4502,1144,4504,1144,4506],{},[716,4503,1469],{},[716,4505,1297],{},[716,4507,1486],{},[3271,4509,4510],{},[716,4511,1297],{},[3253,4513,4514,4518,4525],{},[3271,4515,4516],{},[716,4517,1143],{},[3271,4519,4520,1144,4522],{},[716,4521,1928],{},[716,4523,4524],{},"false",[3271,4526,4527],{},[716,4528,4524],{},[3253,4530,4531,4535,4541],{},[3271,4532,4533],{},[716,4534,1147],{},[3271,4536,4537,1144,4539],{},[716,4538,1928],{},[716,4540,4524],{},[3271,4542,4543],{},[716,4544,4524],{},[3253,4546,4547,4551,4557],{},[3271,4548,4549],{},[716,4550,1151],{},[3271,4552,4553,1144,4555],{},[716,4554,1928],{},[716,4556,4524],{},[3271,4558,4559],{},[716,4560,4524],{},[3238,4562,4564],{"id":4563},"useinputdatesegmentrecipes-options",[716,4565,4566],{},"useInputDateSegmentRecipe(s, options?)",[708,4568,4569,4570,4572,4573,4575,4576,4578,4579,4581,4582,755],{},"Creates the Input Date segment recipe — the ",[716,4571,3626],{}," editable part that is transparent, inherits typography from the wrapper, centers its digits with tabular figures, and highlights on ",[716,4574,754],{}," (",[716,4577,3228],{}," background, ",[716,4580,3279],{}," text). It carries no color or style axis; all surface styling lives on the wrapper. Accepts the same parameters as ",[716,4583,4584],{},"useInputDateRecipe",[708,4586,4587],{},[712,4588,4439],{},[3247,4590,4591,4601],{},[3250,4592,4593],{},[3253,4594,4595,4597,4599],{},[3256,4596,4448],{},[3256,4598,4451],{},[3256,4600,3338],{},[3266,4602,4603],{},[3253,4604,4605,4609,4617],{},[3271,4606,4607],{},[716,4608,3384],{},[3271,4610,4611,1144,4613,1144,4615],{},[716,4612,1469],{},[716,4614,1297],{},[716,4616,1486],{},[3271,4618,4619],{},[716,4620,1297],{},[708,4622,4623],{},[741,4624,4625],{"href":142},"Learn more about recipes →",[704,4627,4629],{"id":4628},"best-practices","Best Practices",[725,4631,4632,4644,4653,4662,4673],{},[728,4633,4634,4640,4641,4643],{},[712,4635,4636,4637,4639],{},"Pass ",[716,4638,3384],{}," to both parts",": Spread the same ",[716,4642,3384],{}," to the wrapper and the segments so the field and segment typography stay in proportion.",[728,4645,4646,4652],{},[712,4647,4648,4649,4651],{},"Use ",[716,4650,1264],{}," for general forms",": The neutral color adapts to light and dark mode automatically, making it the safest default.",[728,4654,4655,4658,4659,4661],{},[712,4656,4657],{},"Expose segments as spinbuttons",": Give each segment ",[716,4660,3889],{}," and keep it focusable so arrow-key editing and screen-reader announcement work.",[728,4663,4664,4667,4668,3876,4670,4672],{},[712,4665,4666],{},"Group and label the field",": Use ",[716,4669,3875],{},[716,4671,3879],{}," so the segments are announced as a single control.",[728,4674,4675,4678,4679,4681],{},[712,4676,4677],{},"Filter what you don't need",": If your forms use only the neutral color and default style, pass a ",[716,4680,4131],{}," option to reduce generated CSS.",[704,4683,4685],{"id":4684},"faq","FAQ",[4687,4688,4689,4695,4707,4721,4732],"accordion",{},[4690,4691,4694],"accordion-item",{"icon":4692,"label":4693},"i-lucide-circle-help","Does this recipe handle date parsing and segment focus?","No — the recipe only styles the field and its segments. Parsing the typed value, advancing focus between segments, clamping ranges, and masking are interaction concerns you implement yourself or delegate to a headless component. Keeping behavior out of the recipe keeps it framework-agnostic and zero-runtime.",[4690,4696,4698,4699,4703,4704,4706],{"icon":4692,"label":4697},"Does this style the calendar \u002F date picker popover?","No. This recipe styles the segmented date ",[4700,4701,4702],"em",{},"input"," surface only. The calendar grid and popover styling live in the ",[741,4705,444],{"href":445}," recipe — compose the two when you need a full date picker.",[4690,4708,710,4710,4712,4713,4715,4716,4718,4719,755],{"icon":4692,"label":4709},"Why is the color light\u002Fdark\u002Fneutral instead of primary\u002Fsuccess\u002Ferror?",[716,4711,4462],{}," axis controls the field surface, which reflects the form's surface rather than a status. This mirrors the ",[741,4714,464],{"href":465}," recipe's color model. For an error state, use the ",[716,4717,1143],{}," state, which switches the border and focus ring to ",[716,4720,3513],{},[4690,4722,4724,4725,4727,4728,4731],{"icon":4692,"label":4723},"How is the Input Date related to the Input recipe?","The wrapper shares the Input recipe's color \u002F style \u002F state surface through an internal helper, so the two stay visually consistent — same ",[716,4726,738],{}," ring, invalid border, and dark-mode surfaces. The difference is structural: an Input wraps one transparent native ",[716,4729,4730],{},"\u003Cinput>",", while an Input Date lays out several focusable segments separated by muted glyphs inside the same surface.",[4690,4733,4735,4736,4738,4739,4741,4742,4744,4745,1144,4747,4749,4750,4752,4753,4755],{"icon":4692,"label":4734},"How do I render different date formats?","Split your value on the separator and render one ",[716,4737,1136],{}," per part, interleaving a ",[716,4740,764],{}," between them. Change the ",[716,4743,2330],{}," (e.g. ",[716,4746,718],{},[716,4748,2642],{},", or ",[716,4751,2814],{}," for time) and the number of segments to match the format you need — the wrapper's ",[716,4754,1132],{}," row lays them out automatically.",[4757,4758,4759],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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}",{"title":861,"searchDepth":902,"depth":902,"links":4761},[4762,4763,4764,4765,4768,4773,4776,4781,4782,4783,4787,4791,4792],{"id":706,"depth":902,"text":88},{"id":788,"depth":902,"text":789},{"id":833,"depth":902,"text":834},{"id":3207,"depth":902,"text":203,"children":4766},[4767],{"id":3240,"depth":931,"text":3241},{"id":3328,"depth":902,"text":3329,"children":4769},[4770,4771,4772],{"id":1281,"depth":931,"text":3338},{"id":1443,"depth":931,"text":3349},{"id":1452,"depth":931,"text":3360},{"id":3371,"depth":902,"text":3372,"children":4774},[4775],{"id":3392,"depth":931,"text":3393},{"id":3498,"depth":902,"text":350,"children":4777},[4778,4779,4780],{"id":1143,"depth":931,"text":3501},{"id":1147,"depth":931,"text":3520},{"id":3543,"depth":931,"text":3544},{"id":3566,"depth":902,"text":3567},{"id":3864,"depth":902,"text":584},{"id":3963,"depth":902,"text":3964,"children":4784},[4785,4786],{"id":3967,"depth":931,"text":3968},{"id":4124,"depth":931,"text":4125},{"id":4302,"depth":902,"text":83,"children":4788},[4789,4790],{"id":4305,"depth":931,"text":4308},{"id":4563,"depth":931,"text":4566},{"id":4628,"depth":902,"text":4629},{"id":4684,"depth":902,"text":4685},"A segmented date input — a wrapper-owned field surface holding individually focusable date segments separated by muted glyphs, with light, dark, and neutral colors, default, soft, and ghost styles, three sizes, and invalid, disabled, and read-only states through the recipe system.",null,{},{"icon":7},{"title":468,"description":4793},"MdOGhx3lS0adNyiJa_ZOea7wnhVNKYJ3TqhLcaOz1Qs",[4800,4802],{"title":464,"path":465,"stem":466,"description":4801,"icon":7,"children":-1},"A text-field component with a wrapper-owned visual surface, inline prefix\u002Fsuffix addons, and invalid\u002Fdisabled\u002Freadonly states. Supports light, dark, and neutral colors, default\u002Fsoft\u002Fghost styles, and three sizes through the recipe system.",{"title":472,"path":473,"stem":474,"description":4803,"icon":7,"children":-1},"A one-time-password \u002F pin input — a row of single-character cells with light, dark, and neutral surface colors, default, soft, and ghost styles, three sizes, and invalid, disabled, and focus states through the recipe system.",1784104652048]