[{"data":1,"prerenderedAt":1980},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-fluid-design":682,"-docs-theme-design-tokens-fluid-design-surround":1975},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"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",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":684,"body":685,"description":1968,"extension":1969,"links":1970,"meta":1971,"navigation":1972,"path":211,"seo":1973,"stem":212,"__hash__":1974},"docs_theme\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index.md","Fluid Responsive Design",{"type":686,"value":687,"toc":1954},"minimark",[688,718,722,732,735,740,743,787,791,797,800,832,835,839,842,1061,1064,1067,1071,1074,1079,1089,1249,1254,1258,1261,1265,1278,1477,1482,1485,1504,1508,1517,1748,1753,1757,1825,1829,1867,1871,1874,1912,1916,1950],[689,690,691,695,696,700,701,705,706,709,710,713,714,717],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Design Tokens Preset:"," Fluid responsive tokens are enabled by default in the ",[697,698,699],"a",{"href":171},"Design Tokens Preset"," (",[702,703,704],"code",{},"useDesignTokensPreset",") and you can configure them through the preset's ",[702,707,708],{},"fluidViewport",", ",[702,711,712],{},"fluidFontSize",", and ",[702,715,716],{},"fluidScale"," options. For most projects, applying them via the preset is the recommended approach.",[719,720,721],"p",{},"Fluid responsive design is a modern approach to creating layouts and typography that scale seamlessly across all screen sizes. Instead of jumping between fixed values at breakpoints, fluid design uses CSS calculation functions with viewport-relative units to create smooth, continuous transitions that adapt perfectly to any viewport width.",[719,723,724,725,731],{},"Styleframe's fluid design system is inspired by the ",[697,726,730],{"href":727,"rel":728},"https:\u002F\u002Futopia.fyi\u002F",[729],"nofollow","Utopia Fluid Type Scale",", using mathematical principles to calculate optimal sizes that maintain perfect proportions and readability across all devices.",[733,734],"fluid-responsive-design-demo",{},[736,737,739],"h2",{"id":738},"why-use-fluid-design","Why Use Fluid Design?",[719,741,742],{},"Styleframe's fluid design composables offer several advantages over traditional responsive approaches:",[744,745,746,753,759,765,771,781],"ul",{},[747,748,749,752],"li",{},[692,750,751],{},"Seamless Scaling",": Text and spacing adapt continuously without sudden jumps at breakpoints",[747,754,755,758],{},[692,756,757],{},"Perfect Readability",": Maintains optimal character count and visual hierarchy at every screen size",[747,760,761,764],{},[692,762,763],{},"Reduced Complexity",": Replace dozens of media queries with single fluid calculations",[747,766,767,770],{},[692,768,769],{},"Mathematical Consistency",": Uses proven modular scales for harmonious proportions",[747,772,773,776,777,780],{},[692,774,775],{},"Performance Optimized",": Complex CSS ",[702,778,779],{},"calc()"," functions calculated by the browser at render time",[747,782,783,786],{},[692,784,785],{},"Accessibility Friendly",": Respects user preferences, zoom, and font size settings",[736,788,790],{"id":789},"how-fluid-design-works","How Fluid Design Works",[719,792,793,794,796],{},"Styleframe's fluid design uses CSS ",[702,795,779],{}," functions with custom properties to create smooth scaling between minimum and maximum values. The system calculates a fluid breakpoint variable that represents the current viewport's scale between your min and max widths.",[719,798,799],{},"The fluid calculation considers:",[744,801,802,808,814,820,826],{},[747,803,804,807],{},[692,805,806],{},"Minimum viewport width"," (typically 320px for mobile)",[747,809,810,813],{},[692,811,812],{},"Maximum viewport width"," (typically 1440px for desktop)",[747,815,816,819],{},[692,817,818],{},"Minimum value"," (size at smallest viewport)",[747,821,822,825],{},[692,823,824],{},"Maximum value"," (size at largest viewport)",[747,827,828,831],{},[692,829,830],{},"Fluid breakpoint"," (automatically calculated viewport position)",[719,833,834],{},"The result is a value that scales smoothly and proportionally between the minimum and maximum, adapting in real-time as the viewport changes.",[736,836,838],{"id":837},"comparison-traditional-breakpoints-vs-fluid-responsive-design","Comparison: Traditional Breakpoints vs. Fluid Responsive Design",[719,840,841],{},"See how fluid design eliminates the need for multiple breakpoints by creating smooth, continuous scaling with a single CSS value.",[843,844,845,1012],"tabs",{},[846,847,850],"tabs-item",{"icon":848,"label":849},"i-lucide-layout-list","Traditional Responsive",[851,852,858],"pre",{"className":853,"code":854,"filename":855,"language":856,"meta":857,"style":857},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* Multiple breakpoints required *\u002F\n.heading {\n    font-size: 24px;\n}\n\n@media (min-width: 768px) {\n    .heading { font-size: 28px; }\n}\n\n@media (min-width: 1440px) {\n    .heading { font-size: 32px; }\n}\n","styleframe\u002Findex.css","css","",[702,859,860,869,883,900,906,912,934,959,964,969,987,1007],{"__ignoreMap":857},[861,862,865],"span",{"class":863,"line":864},"line",1,[861,866,868],{"class":867},"sHwdD","\u002F* Multiple breakpoints required *\u002F\n",[861,870,872,876,880],{"class":863,"line":871},2,[861,873,875],{"class":874},"sMK4o",".",[861,877,879],{"class":878},"sBMFI","heading",[861,881,882],{"class":874}," {\n",[861,884,886,890,893,897],{"class":863,"line":885},3,[861,887,889],{"class":888},"sqsOY","    font-size",[861,891,892],{"class":874},":",[861,894,896],{"class":895},"sbssI"," 24px",[861,898,899],{"class":874},";\n",[861,901,903],{"class":863,"line":902},4,[861,904,905],{"class":874},"}\n",[861,907,909],{"class":863,"line":908},5,[861,910,911],{"emptyLinePlaceholder":223},"\n",[861,913,915,919,921,924,926,929,932],{"class":863,"line":914},6,[861,916,918],{"class":917},"s7zQu","@media",[861,920,700],{"class":874},[861,922,923],{"class":878},"min-width",[861,925,892],{"class":874},[861,927,928],{"class":895}," 768px",[861,930,931],{"class":874},")",[861,933,882],{"class":874},[861,935,937,940,942,945,948,950,953,956],{"class":863,"line":936},7,[861,938,939],{"class":874},"    .",[861,941,879],{"class":878},[861,943,944],{"class":874}," {",[861,946,947],{"class":888}," font-size",[861,949,892],{"class":874},[861,951,952],{"class":895}," 28px",[861,954,955],{"class":874},";",[861,957,958],{"class":874}," }\n",[861,960,962],{"class":863,"line":961},8,[861,963,905],{"class":874},[861,965,967],{"class":863,"line":966},9,[861,968,911],{"emptyLinePlaceholder":223},[861,970,972,974,976,978,980,983,985],{"class":863,"line":971},10,[861,973,918],{"class":917},[861,975,700],{"class":874},[861,977,923],{"class":878},[861,979,892],{"class":874},[861,981,982],{"class":895}," 1440px",[861,984,931],{"class":874},[861,986,882],{"class":874},[861,988,990,992,994,996,998,1000,1003,1005],{"class":863,"line":989},11,[861,991,939],{"class":874},[861,993,879],{"class":878},[861,995,944],{"class":874},[861,997,947],{"class":888},[861,999,892],{"class":874},[861,1001,1002],{"class":895}," 32px",[861,1004,955],{"class":874},[861,1006,958],{"class":874},[861,1008,1010],{"class":863,"line":1009},12,[861,1011,905],{"class":874},[846,1013,1016],{"icon":1014,"label":1015},"i-lucide-waves","Fluid Responsive",[851,1017,1019],{"className":853,"code":1018,"filename":855,"language":856,"meta":857,"style":857},"\u002F* Single fluid value *\u002F\n.heading {\n    font-size: var(--font-size--xl); \u002F* Smooth scaling from 24px to 32px *\u002F\n}\n",[702,1020,1021,1026,1034,1057],{"__ignoreMap":857},[861,1022,1023],{"class":863,"line":864},[861,1024,1025],{"class":867},"\u002F* Single fluid value *\u002F\n",[861,1027,1028,1030,1032],{"class":863,"line":871},[861,1029,875],{"class":874},[861,1031,879],{"class":878},[861,1033,882],{"class":874},[861,1035,1036,1038,1040,1044,1047,1051,1054],{"class":863,"line":885},[861,1037,889],{"class":888},[861,1039,892],{"class":874},[861,1041,1043],{"class":1042},"s2Zo4"," var",[861,1045,1046],{"class":874},"(",[861,1048,1050],{"class":1049},"sTEyZ","--font-size--xl",[861,1052,1053],{"class":874},");",[861,1055,1056],{"class":867}," \u002F* Smooth scaling from 24px to 32px *\u002F\n",[861,1058,1059],{"class":863,"line":902},[861,1060,905],{"class":874},[736,1062,146],{"id":1063},"composables",[719,1065,1066],{},"These composables enable you to create smooth, viewport-responsive sizing without breakpoints.",[1068,1069,216],"h3",{"id":1070},"fluid-viewport",[719,1072,1073],{},"Establish the viewport range for all fluid calculations in your design system.",[719,1075,1076],{},[692,1077,1078],{},"Available composables:",[744,1080,1081],{},[747,1082,1083,1088],{},[692,1084,1085],{},[702,1086,1087],{},"useFluidViewportDesignTokens()",": Define minimum and maximum viewport widths and calculate the fluid breakpoint variable",[851,1090,1095],{"className":1091,"code":1092,"filename":1093,"language":1094,"meta":857,"style":857},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useFluidViewportDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Use defaults (320px - 1440px)\nuseFluidViewportDesignTokens(s);\n\n\u002F\u002F Or customize the range\nuseFluidViewportDesignTokens(s, {\n    minWidth: 375,  \u002F\u002F Start scaling at 375px\n    maxWidth: 1920  \u002F\u002F Stop scaling at 1920px\n});\n","styleframe.config.ts","ts",[702,1096,1097,1125,1147,1151,1170,1174,1179,1189,1193,1198,1210,1226,1239],{"__ignoreMap":857},[861,1098,1099,1102,1104,1107,1110,1113,1116,1120,1123],{"class":863,"line":864},[861,1100,1101],{"class":917},"import",[861,1103,944],{"class":874},[861,1105,1106],{"class":1049}," styleframe",[861,1108,1109],{"class":874}," }",[861,1111,1112],{"class":917}," from",[861,1114,1115],{"class":874}," '",[861,1117,1119],{"class":1118},"sfazB","styleframe",[861,1121,1122],{"class":874},"'",[861,1124,899],{"class":874},[861,1126,1127,1129,1131,1134,1136,1138,1140,1143,1145],{"class":863,"line":871},[861,1128,1101],{"class":917},[861,1130,944],{"class":874},[861,1132,1133],{"class":1049}," useFluidViewportDesignTokens",[861,1135,1109],{"class":874},[861,1137,1112],{"class":917},[861,1139,1115],{"class":874},[861,1141,1142],{"class":1118},"@styleframe\u002Ftheme",[861,1144,1122],{"class":874},[861,1146,899],{"class":874},[861,1148,1149],{"class":863,"line":885},[861,1150,911],{"emptyLinePlaceholder":223},[861,1152,1153,1157,1160,1163,1165,1168],{"class":863,"line":902},[861,1154,1156],{"class":1155},"spNyl","const",[861,1158,1159],{"class":1049}," s ",[861,1161,1162],{"class":874},"=",[861,1164,1106],{"class":1042},[861,1166,1167],{"class":1049},"()",[861,1169,899],{"class":874},[861,1171,1172],{"class":863,"line":908},[861,1173,911],{"emptyLinePlaceholder":223},[861,1175,1176],{"class":863,"line":914},[861,1177,1178],{"class":867},"\u002F\u002F Use defaults (320px - 1440px)\n",[861,1180,1181,1184,1187],{"class":863,"line":936},[861,1182,1183],{"class":1042},"useFluidViewportDesignTokens",[861,1185,1186],{"class":1049},"(s)",[861,1188,899],{"class":874},[861,1190,1191],{"class":863,"line":961},[861,1192,911],{"emptyLinePlaceholder":223},[861,1194,1195],{"class":863,"line":966},[861,1196,1197],{"class":867},"\u002F\u002F Or customize the range\n",[861,1199,1200,1202,1205,1208],{"class":863,"line":971},[861,1201,1183],{"class":1042},[861,1203,1204],{"class":1049},"(s",[861,1206,1207],{"class":874},",",[861,1209,882],{"class":874},[861,1211,1212,1216,1218,1221,1223],{"class":863,"line":989},[861,1213,1215],{"class":1214},"swJcz","    minWidth",[861,1217,892],{"class":874},[861,1219,1220],{"class":895}," 375",[861,1222,1207],{"class":874},[861,1224,1225],{"class":867},"  \u002F\u002F Start scaling at 375px\n",[861,1227,1228,1231,1233,1236],{"class":863,"line":1009},[861,1229,1230],{"class":1214},"    maxWidth",[861,1232,892],{"class":874},[861,1234,1235],{"class":895}," 1920",[861,1237,1238],{"class":867},"  \u002F\u002F Stop scaling at 1920px\n",[861,1240,1242,1245,1247],{"class":863,"line":1241},13,[861,1243,1244],{"class":874},"}",[861,1246,931],{"class":1049},[861,1248,899],{"class":874},[719,1250,1251],{},[697,1252,1253],{"href":217},"Learn more about the Fluid Viewport →",[1068,1255,1257],{"id":1256},"clamp-function","Clamp Function",[719,1259,1260],{},"Create individual fluid values using clamp calculations for any CSS property.",[719,1262,1263],{},[692,1264,1078],{},[744,1266,1267],{},[747,1268,1269,1274,1275,1277],{},[692,1270,1271],{},[702,1272,1273],{},"useFluidClamp()",": Generate fluid ",[702,1276,779],{}," calculations for custom properties",[851,1279,1281],{"className":1091,"code":1280,"filename":1093,"language":1094,"meta":857,"style":857},"import { styleframe } from 'styleframe';\nimport { useSpacingDesignTokens } from '@styleframe\u002Ftheme';\nimport { useFluidViewportDesignTokens, useFluidClamp } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { variable } = s;\n\nuseFluidViewportDesignTokens(s);\n\n\u002F\u002F Create a fluid spacing variable\nconst { spacingLg } = useSpacingDesignTokens(s, {\n    lg: useFluidClamp(s, { min: 24, max: 48 }) \u002F\u002F Scales from 24px to 48px\n});\n",[702,1282,1283,1303,1324,1349,1353,1367,1386,1390,1398,1402,1407,1428,1469],{"__ignoreMap":857},[861,1284,1285,1287,1289,1291,1293,1295,1297,1299,1301],{"class":863,"line":864},[861,1286,1101],{"class":917},[861,1288,944],{"class":874},[861,1290,1106],{"class":1049},[861,1292,1109],{"class":874},[861,1294,1112],{"class":917},[861,1296,1115],{"class":874},[861,1298,1119],{"class":1118},[861,1300,1122],{"class":874},[861,1302,899],{"class":874},[861,1304,1305,1307,1309,1312,1314,1316,1318,1320,1322],{"class":863,"line":871},[861,1306,1101],{"class":917},[861,1308,944],{"class":874},[861,1310,1311],{"class":1049}," useSpacingDesignTokens",[861,1313,1109],{"class":874},[861,1315,1112],{"class":917},[861,1317,1115],{"class":874},[861,1319,1142],{"class":1118},[861,1321,1122],{"class":874},[861,1323,899],{"class":874},[861,1325,1326,1328,1330,1332,1334,1337,1339,1341,1343,1345,1347],{"class":863,"line":885},[861,1327,1101],{"class":917},[861,1329,944],{"class":874},[861,1331,1133],{"class":1049},[861,1333,1207],{"class":874},[861,1335,1336],{"class":1049}," useFluidClamp",[861,1338,1109],{"class":874},[861,1340,1112],{"class":917},[861,1342,1115],{"class":874},[861,1344,1142],{"class":1118},[861,1346,1122],{"class":874},[861,1348,899],{"class":874},[861,1350,1351],{"class":863,"line":902},[861,1352,911],{"emptyLinePlaceholder":223},[861,1354,1355,1357,1359,1361,1363,1365],{"class":863,"line":908},[861,1356,1156],{"class":1155},[861,1358,1159],{"class":1049},[861,1360,1162],{"class":874},[861,1362,1106],{"class":1042},[861,1364,1167],{"class":1049},[861,1366,899],{"class":874},[861,1368,1369,1371,1373,1376,1378,1381,1384],{"class":863,"line":914},[861,1370,1156],{"class":1155},[861,1372,944],{"class":874},[861,1374,1375],{"class":1049}," variable ",[861,1377,1244],{"class":874},[861,1379,1380],{"class":874}," =",[861,1382,1383],{"class":1049}," s",[861,1385,899],{"class":874},[861,1387,1388],{"class":863,"line":936},[861,1389,911],{"emptyLinePlaceholder":223},[861,1391,1392,1394,1396],{"class":863,"line":961},[861,1393,1183],{"class":1042},[861,1395,1186],{"class":1049},[861,1397,899],{"class":874},[861,1399,1400],{"class":863,"line":966},[861,1401,911],{"emptyLinePlaceholder":223},[861,1403,1404],{"class":863,"line":971},[861,1405,1406],{"class":867},"\u002F\u002F Create a fluid spacing variable\n",[861,1408,1409,1411,1413,1416,1418,1420,1422,1424,1426],{"class":863,"line":989},[861,1410,1156],{"class":1155},[861,1412,944],{"class":874},[861,1414,1415],{"class":1049}," spacingLg ",[861,1417,1244],{"class":874},[861,1419,1380],{"class":874},[861,1421,1311],{"class":1042},[861,1423,1204],{"class":1049},[861,1425,1207],{"class":874},[861,1427,882],{"class":874},[861,1429,1430,1433,1435,1437,1439,1441,1443,1446,1448,1451,1453,1456,1458,1461,1463,1466],{"class":863,"line":1009},[861,1431,1432],{"class":1214},"    lg",[861,1434,892],{"class":874},[861,1436,1336],{"class":1042},[861,1438,1204],{"class":1049},[861,1440,1207],{"class":874},[861,1442,944],{"class":874},[861,1444,1445],{"class":1214}," min",[861,1447,892],{"class":874},[861,1449,1450],{"class":895}," 24",[861,1452,1207],{"class":874},[861,1454,1455],{"class":1214}," max",[861,1457,892],{"class":874},[861,1459,1460],{"class":895}," 48",[861,1462,1109],{"class":874},[861,1464,1465],{"class":1049},") ",[861,1467,1468],{"class":867},"\u002F\u002F Scales from 24px to 48px\n",[861,1470,1471,1473,1475],{"class":863,"line":1241},[861,1472,1244],{"class":874},[861,1474,931],{"class":1049},[861,1476,899],{"class":874},[719,1478,1479],{},[697,1480,1481],{"href":217},"Learn more about Clamp Functions →",[1068,1483,220],{"id":1484},"fluid-typography",[719,1486,1487,1488,1491,1492,1495,1496,1499,1500,1503],{},"Pass ",[702,1489,1490],{},"[min, max]"," tuples or ",[702,1493,1494],{},"{ min, max }"," objects to ",[702,1497,1498],{},"useFontSizeDesignTokens()"," for fluid sizes and plain values (strings, numbers, ",[702,1501,1502],{},"@","-references) for fixed sizes. Both forms can coexist in the same call.",[719,1505,1506],{},[692,1507,1078],{},[744,1509,1510],{},[747,1511,1512,1516],{},[692,1513,1514],{},[702,1515,1498],{},": Static and fluid font sizes — range values are clamped between viewport breakpoints, plain values stay static.",[851,1518,1520],{"className":1091,"code":1519,"filename":1093,"language":1094,"meta":857,"style":857},"import { styleframe } from 'styleframe';\nimport {\n    useFluidViewportDesignTokens,\n    useFontSizeDesignTokens,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseFluidViewportDesignTokens(s);\n\nconst { fontSize, fontSizeSm, fontSizeMd, fontSizeLg } = useFontSizeDesignTokens(s, {\n    default: '@font-size.md',\n    sm: '0.875rem',                  \u002F\u002F fixed\n    md: [16, 18],                    \u002F\u002F fluid (tuple of absolute pixels)\n    lg: { min: 18, max: 24 },        \u002F\u002F fluid (object form)\n});\n",[702,1521,1522,1542,1548,1556,1563,1577,1581,1595,1599,1607,1611,1648,1664,1683,1710,1739],{"__ignoreMap":857},[861,1523,1524,1526,1528,1530,1532,1534,1536,1538,1540],{"class":863,"line":864},[861,1525,1101],{"class":917},[861,1527,944],{"class":874},[861,1529,1106],{"class":1049},[861,1531,1109],{"class":874},[861,1533,1112],{"class":917},[861,1535,1115],{"class":874},[861,1537,1119],{"class":1118},[861,1539,1122],{"class":874},[861,1541,899],{"class":874},[861,1543,1544,1546],{"class":863,"line":871},[861,1545,1101],{"class":917},[861,1547,882],{"class":874},[861,1549,1550,1553],{"class":863,"line":885},[861,1551,1552],{"class":1049},"    useFluidViewportDesignTokens",[861,1554,1555],{"class":874},",\n",[861,1557,1558,1561],{"class":863,"line":902},[861,1559,1560],{"class":1049},"    useFontSizeDesignTokens",[861,1562,1555],{"class":874},[861,1564,1565,1567,1569,1571,1573,1575],{"class":863,"line":908},[861,1566,1244],{"class":874},[861,1568,1112],{"class":917},[861,1570,1115],{"class":874},[861,1572,1142],{"class":1118},[861,1574,1122],{"class":874},[861,1576,899],{"class":874},[861,1578,1579],{"class":863,"line":914},[861,1580,911],{"emptyLinePlaceholder":223},[861,1582,1583,1585,1587,1589,1591,1593],{"class":863,"line":936},[861,1584,1156],{"class":1155},[861,1586,1159],{"class":1049},[861,1588,1162],{"class":874},[861,1590,1106],{"class":1042},[861,1592,1167],{"class":1049},[861,1594,899],{"class":874},[861,1596,1597],{"class":863,"line":961},[861,1598,911],{"emptyLinePlaceholder":223},[861,1600,1601,1603,1605],{"class":863,"line":966},[861,1602,1183],{"class":1042},[861,1604,1186],{"class":1049},[861,1606,899],{"class":874},[861,1608,1609],{"class":863,"line":971},[861,1610,911],{"emptyLinePlaceholder":223},[861,1612,1613,1615,1617,1620,1622,1625,1627,1630,1632,1635,1637,1639,1642,1644,1646],{"class":863,"line":989},[861,1614,1156],{"class":1155},[861,1616,944],{"class":874},[861,1618,1619],{"class":1049}," fontSize",[861,1621,1207],{"class":874},[861,1623,1624],{"class":1049}," fontSizeSm",[861,1626,1207],{"class":874},[861,1628,1629],{"class":1049}," fontSizeMd",[861,1631,1207],{"class":874},[861,1633,1634],{"class":1049}," fontSizeLg ",[861,1636,1244],{"class":874},[861,1638,1380],{"class":874},[861,1640,1641],{"class":1042}," useFontSizeDesignTokens",[861,1643,1204],{"class":1049},[861,1645,1207],{"class":874},[861,1647,882],{"class":874},[861,1649,1650,1653,1655,1657,1660,1662],{"class":863,"line":1009},[861,1651,1652],{"class":1214},"    default",[861,1654,892],{"class":874},[861,1656,1115],{"class":874},[861,1658,1659],{"class":1118},"@font-size.md",[861,1661,1122],{"class":874},[861,1663,1555],{"class":874},[861,1665,1666,1669,1671,1673,1676,1678,1680],{"class":863,"line":1241},[861,1667,1668],{"class":1214},"    sm",[861,1670,892],{"class":874},[861,1672,1115],{"class":874},[861,1674,1675],{"class":1118},"0.875rem",[861,1677,1122],{"class":874},[861,1679,1207],{"class":874},[861,1681,1682],{"class":867},"                  \u002F\u002F fixed\n",[861,1684,1686,1689,1691,1694,1697,1699,1702,1705,1707],{"class":863,"line":1685},14,[861,1687,1688],{"class":1214},"    md",[861,1690,892],{"class":874},[861,1692,1693],{"class":1049}," [",[861,1695,1696],{"class":895},"16",[861,1698,1207],{"class":874},[861,1700,1701],{"class":895}," 18",[861,1703,1704],{"class":1049},"]",[861,1706,1207],{"class":874},[861,1708,1709],{"class":867},"                    \u002F\u002F fluid (tuple of absolute pixels)\n",[861,1711,1713,1715,1717,1719,1721,1723,1725,1727,1729,1731,1733,1736],{"class":863,"line":1712},15,[861,1714,1432],{"class":1214},[861,1716,892],{"class":874},[861,1718,944],{"class":874},[861,1720,1445],{"class":1214},[861,1722,892],{"class":874},[861,1724,1701],{"class":895},[861,1726,1207],{"class":874},[861,1728,1455],{"class":1214},[861,1730,892],{"class":874},[861,1732,1450],{"class":895},[861,1734,1735],{"class":874}," },",[861,1737,1738],{"class":867},"        \u002F\u002F fluid (object form)\n",[861,1740,1742,1744,1746],{"class":863,"line":1741},16,[861,1743,1244],{"class":874},[861,1745,931],{"class":1049},[861,1747,899],{"class":874},[719,1749,1750],{},[697,1751,1752],{"href":221},"Learn more about Fluid Typography →",[736,1754,1756],{"id":1755},"fluid-design-reference","Fluid Design Reference",[1758,1759,1760,1776],"table",{},[1761,1762,1763],"thead",{},[1764,1765,1766,1770,1773],"tr",{},[1767,1768,1769],"th",{},"Composable",[1767,1771,1772],{},"Purpose",[1767,1774,1775],{},"Use Case",[1777,1778,1779,1794,1811],"tbody",{},[1764,1780,1781,1788,1791],{},[1782,1783,1784],"td",{},[692,1785,1786],{},[702,1787,1087],{},[1782,1789,1790],{},"Set up fluid viewport ranges and breakpoint",[1782,1792,1793],{},"Define min\u002Fmax viewport widths",[1764,1795,1796,1802,1808],{},[1782,1797,1798],{},[692,1799,1800],{},[702,1801,1273],{},[1782,1803,1804,1805,1807],{},"Create fluid ",[702,1806,779],{}," calculations",[1782,1809,1810],{},"Custom fluid properties (spacing, sizing)",[1764,1812,1813,1819,1822],{},[1782,1814,1815],{},[692,1816,1817],{},[702,1818,1498],{},[1782,1820,1821],{},"Static and fluid font sizes",[1782,1823,1824],{},"Mix fluid and fixed font sizes",[736,1826,1828],{"id":1827},"best-practices","Best Practices",[744,1830,1831,1837,1843,1849,1855,1861],{},[747,1832,1833,1836],{},[692,1834,1835],{},"Start with sensible ranges",": Choose viewport ranges that match your target devices (typically 320px-1440px)",[747,1838,1839,1842],{},[692,1840,1841],{},"Use consistent scales",": Stick to proven modular scales (Minor Third, Major Third, etc.) for harmonious results",[747,1844,1845,1848],{},[692,1846,1847],{},"Test thoroughly",": Fluid design looks different at every width—test at multiple viewport sizes",[747,1850,1851,1854],{},[692,1852,1853],{},"Combine with media queries",": Use fluid sizing with breakpoint-based layout changes",[747,1856,1857,1860],{},[692,1858,1859],{},"Document your decisions",": Explain your scale choices and viewport ranges in your theme",[747,1862,1863,1866],{},[692,1864,1865],{},"Keep it simple",": Not every property needs to be fluid—focus on typography and spacing first",[736,1868,1870],{"id":1869},"next-steps","Next Steps",[719,1872,1873],{},"Ready to implement fluid design? Start with these guides:",[744,1875,1876,1885,1894,1903],{},[747,1877,1878,1881,1882,1884],{},[692,1879,1880],{},"New to fluid design?"," Begin with ",[697,1883,1257],{"href":217}," to understand the foundation",[747,1886,1887,1890,1891,1893],{},[692,1888,1889],{},"Building fluid typography?"," Check out ",[697,1892,220],{"href":221}," for complete type systems",[747,1895,1896,1899,1900,1902],{},[692,1897,1898],{},"Want mathematical consistency?"," Learn about ",[697,1901,225],{"href":226}," for harmonious proportions",[747,1904,1905,1908,1909,1911],{},[692,1906,1907],{},"Combining with fixed tokens?"," Explore ",[697,1910,234],{"href":235}," for hybrid approaches",[736,1913,1915],{"id":1914},"resources","Resources",[744,1917,1918,1926,1936],{},[747,1919,1920,1925],{},[692,1921,1922],{},[697,1923,730],{"href":727,"rel":1924},[729],": The inspiration for Styleframe's fluid design system",[747,1927,1928,1935],{},[692,1929,1930],{},[697,1931,1934],{"href":1932,"rel":1933},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2022\u002F01\u002Fmodern-fluid-typography-css-clamp\u002F",[729],"Modern Fluid Typography",": Deep dive into fluid typography techniques",[747,1937,1938,1945,1946,1949],{},[692,1939,1940],{},[697,1941,1944],{"href":1942,"rel":1943},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fclamp",[729],"CSS Clamp",": MDN documentation on the ",[702,1947,1948],{},"clamp()"," function",[1951,1952,1953],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":857,"searchDepth":871,"depth":871,"links":1955},[1956,1957,1958,1959,1964,1965,1966,1967],{"id":738,"depth":871,"text":739},{"id":789,"depth":871,"text":790},{"id":837,"depth":871,"text":838},{"id":1063,"depth":871,"text":146,"children":1960},[1961,1962,1963],{"id":1070,"depth":885,"text":216},{"id":1256,"depth":885,"text":1257},{"id":1484,"depth":885,"text":220},{"id":1755,"depth":871,"text":1756},{"id":1827,"depth":871,"text":1828},{"id":1869,"depth":871,"text":1870},{"id":1914,"depth":871,"text":1915},"Create fluid, responsive designs that scale smoothly across all viewport sizes using mathematical precision. Based on the Utopia fluid type scale for optimal readability without breakpoints.","md",null,{},{"title":78},{"title":684,"description":1968},"tNsM0k-slbEMd9FgspRshut3fZ5W_O5tcC2T29l1ZWE",[1976,1978],{"title":205,"path":206,"stem":207,"description":1977,"icon":208,"children":-1},"Create and manage easing design tokens with CSS variables for consistent animation timing across your application.",{"title":216,"path":217,"stem":218,"description":1979,"children":-1},"Create fluid, responsive design tokens that scale smoothly between viewport sizes using auto-generated complex CSS calculations.",1781596323511]