[{"data":1,"prerenderedAt":3198},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-avatar":682,"-docs-theme-components-avatar-surround":3193},{"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":527,"body":684,"description":3187,"extension":1839,"links":3188,"meta":3189,"navigation":3190,"path":528,"seo":3191,"stem":529,"__hash__":3192},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar.md",{"type":685,"value":686,"toc":3163},"minimark",[687,691,716,723,727,730,764,768,1975,1978,1984,1987,1992,1996,2070,2080,2083,2093,2095,2127,2131,2134,2137,2174,2178,2181,2185,2297,2301,2314,2317,2332,2336,2342,2345,2348,2401,2464,2467,2497,2501,2505,2593,2597,2687,2692,2695,2701,2707,2712,2832,2837,2932,2938,2941,2945,3038,3043,3047,3096,3100,3159],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,708,709,712,713,715],"p",{},"The ",[696,697,527],"strong",{}," represents a user or entity with an image, falling back to initials when no image is available or the image fails to load. The ",[700,701,702],"code",{},"useAvatarRecipe()"," composable creates a fully configured ",[705,706,707],"a",{"href":132},"recipe"," with color, variant, shape, and size options, while ",[700,710,711],{},"useAvatarBadgeRecipe()"," adds a small status dot for presence indicators. For stacked, overlapping avatars, see the ",[705,714,531],{"href":532}," recipe.",[692,717,718,719,722],{},"The Avatar recipe integrates directly with the default ",[705,720,721],{"href":171},"design tokens preset"," and generates type-safe utility classes at build time with zero runtime CSS.",[688,724,726],{"id":725},"why-use-the-avatar-recipe","Why use the Avatar recipe?",[692,728,729],{},"The Avatar recipe helps you:",[731,732,733,740,746,752,758],"ul",{},[734,735,736,739],"li",{},[696,737,738],{},"Ship faster with sensible defaults",": A neutral, soft, circular avatar out of the box from a single composable call.",[734,741,742,745],{},[696,743,744],{},"Fail gracefully",": The image clips to the avatar shape, and a styled initials fallback covers missing or broken images.",[734,747,748,751],{},[696,749,750],{},"Express identity and status",": Colored fallbacks plus an optional status badge cover presence states without extra components.",[734,753,754,757],{},[696,755,756],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[734,759,760,763],{},[696,761,762],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, shape, or size values at compile time.",[688,765,767],{"id":766},"usage","Usage",[769,770,772,777,784,1052,1056,1067,1967,1971],"steps",{"level":771},"4",[773,774,776],"h4",{"id":775},"register-the-recipes","Register the recipes",[692,778,779,780,783],{},"Add the Avatar recipes to a local Styleframe instance. The global ",[700,781,782],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[785,786,788,946],"code-tree",{"default-value":787},"src\u002Fcomponents\u002Favatar.styleframe.ts",[789,790,795],"pre",{"className":791,"code":792,"filename":787,"language":793,"meta":794,"style":794},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useAvatarRecipe, useAvatarBadgeRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst avatar = useAvatarRecipe(s);\nconst avatarBadge = useAvatarBadgeRecipe(s);\n\nexport default s;\n","ts","",[700,796,797,833,862,868,889,894,911,927,932],{"__ignoreMap":794},[798,799,802,806,810,814,817,820,823,827,830],"span",{"class":800,"line":801},"line",1,[798,803,805],{"class":804},"s7zQu","import",[798,807,809],{"class":808},"sMK4o"," {",[798,811,813],{"class":812},"sTEyZ"," styleframe",[798,815,816],{"class":808}," }",[798,818,819],{"class":804}," from",[798,821,822],{"class":808}," '",[798,824,826],{"class":825},"sfazB","virtual:styleframe",[798,828,829],{"class":808},"'",[798,831,832],{"class":808},";\n",[798,834,836,838,840,843,846,849,851,853,855,858,860],{"class":800,"line":835},2,[798,837,805],{"class":804},[798,839,809],{"class":808},[798,841,842],{"class":812}," useAvatarRecipe",[798,844,845],{"class":808},",",[798,847,848],{"class":812}," useAvatarBadgeRecipe",[798,850,816],{"class":808},[798,852,819],{"class":804},[798,854,822],{"class":808},[798,856,857],{"class":825},"@styleframe\u002Ftheme",[798,859,829],{"class":808},[798,861,832],{"class":808},[798,863,865],{"class":800,"line":864},3,[798,866,867],{"emptyLinePlaceholder":223},"\n",[798,869,871,875,878,881,884,887],{"class":800,"line":870},4,[798,872,874],{"class":873},"spNyl","const",[798,876,877],{"class":812}," s ",[798,879,880],{"class":808},"=",[798,882,813],{"class":883},"s2Zo4",[798,885,886],{"class":812},"()",[798,888,832],{"class":808},[798,890,892],{"class":800,"line":891},5,[798,893,867],{"emptyLinePlaceholder":223},[798,895,897,899,902,904,906,909],{"class":800,"line":896},6,[798,898,874],{"class":873},[798,900,901],{"class":812}," avatar ",[798,903,880],{"class":808},[798,905,842],{"class":883},[798,907,908],{"class":812},"(s)",[798,910,832],{"class":808},[798,912,914,916,919,921,923,925],{"class":800,"line":913},7,[798,915,874],{"class":873},[798,917,918],{"class":812}," avatarBadge ",[798,920,880],{"class":808},[798,922,848],{"class":883},[798,924,908],{"class":812},[798,926,832],{"class":808},[798,928,930],{"class":800,"line":929},8,[798,931,867],{"emptyLinePlaceholder":223},[798,933,935,938,941,944],{"class":800,"line":934},9,[798,936,937],{"class":804},"export",[798,939,940],{"class":804}," default",[798,942,943],{"class":812}," s",[798,945,832],{"class":808},[789,947,949],{"className":791,"code":948,"filename":782,"language":793,"meta":794,"style":794},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[700,950,951,972,998,1002,1016,1020,1029,1038,1042],{"__ignoreMap":794},[798,952,953,955,957,959,961,963,965,968,970],{"class":800,"line":801},[798,954,805],{"class":804},[798,956,809],{"class":808},[798,958,813],{"class":812},[798,960,816],{"class":808},[798,962,819],{"class":804},[798,964,822],{"class":808},[798,966,967],{"class":825},"styleframe",[798,969,829],{"class":808},[798,971,832],{"class":808},[798,973,974,976,978,981,983,986,988,990,992,994,996],{"class":800,"line":835},[798,975,805],{"class":804},[798,977,809],{"class":808},[798,979,980],{"class":812}," useDesignTokensPreset",[798,982,845],{"class":808},[798,984,985],{"class":812}," useUtilitiesPreset",[798,987,816],{"class":808},[798,989,819],{"class":804},[798,991,822],{"class":808},[798,993,857],{"class":825},[798,995,829],{"class":808},[798,997,832],{"class":808},[798,999,1000],{"class":800,"line":864},[798,1001,867],{"emptyLinePlaceholder":223},[798,1003,1004,1006,1008,1010,1012,1014],{"class":800,"line":870},[798,1005,874],{"class":873},[798,1007,877],{"class":812},[798,1009,880],{"class":808},[798,1011,813],{"class":883},[798,1013,886],{"class":812},[798,1015,832],{"class":808},[798,1017,1018],{"class":800,"line":891},[798,1019,867],{"emptyLinePlaceholder":223},[798,1021,1022,1025,1027],{"class":800,"line":896},[798,1023,1024],{"class":883},"useDesignTokensPreset",[798,1026,908],{"class":812},[798,1028,832],{"class":808},[798,1030,1031,1034,1036],{"class":800,"line":913},[798,1032,1033],{"class":883},"useUtilitiesPreset",[798,1035,908],{"class":812},[798,1037,832],{"class":808},[798,1039,1040],{"class":800,"line":929},[798,1041,867],{"emptyLinePlaceholder":223},[798,1043,1044,1046,1048,1050],{"class":800,"line":934},[798,1045,937],{"class":804},[798,1047,940],{"class":804},[798,1049,943],{"class":812},[798,1051,832],{"class":808},[773,1053,1055],{"id":1054},"build-the-component","Build the component",[692,1057,1058,1059,1062,1063,1066],{},"Import the ",[700,1060,1061],{},"avatar"," runtime function from the virtual module, pass variant props to compute class names, and render an ",[700,1064,1065],{},"\u003Cimg>"," with an initials fallback:",[1068,1069,1070,1422,1743],"framework-switcher",{},[1071,1072,1073],"template",{"v-slot:vue":794},[789,1074,1079],{"className":1075,"code":1076,"filename":1077,"language":1078,"meta":794,"style":794},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { avatar, type AvatarProps } from \"virtual:styleframe\";\n\nconst { src, alt, label, ...variants } = defineProps\u003C\n    AvatarProps & { src?: string; alt?: string; label?: string }\n>();\n\nconst failed = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cspan :class=\"avatar(variants)\">\n        \u003Cimg v-if=\"src && !failed\" :src=\"src\" :alt=\"alt\" @error=\"failed = true\" \u002F>\n        \u003Ctemplate v-else>{{ label }}\u003C\u002Ftemplate>\n    \u003C\u002Fspan>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FAvatar.vue","vue",[700,1080,1081,1108,1130,1159,1163,1202,1240,1249,1253,1276,1286,1291,1300,1322,1382,1403,1413],{"__ignoreMap":794},[798,1082,1083,1086,1090,1093,1096,1098,1101,1103,1105],{"class":800,"line":801},[798,1084,1085],{"class":808},"\u003C",[798,1087,1089],{"class":1088},"swJcz","script",[798,1091,1092],{"class":873}," setup",[798,1094,1095],{"class":873}," lang",[798,1097,880],{"class":808},[798,1099,1100],{"class":808},"\"",[798,1102,793],{"class":825},[798,1104,1100],{"class":808},[798,1106,1107],{"class":808},">\n",[798,1109,1110,1112,1114,1117,1119,1121,1124,1126,1128],{"class":800,"line":835},[798,1111,805],{"class":804},[798,1113,809],{"class":808},[798,1115,1116],{"class":812}," ref",[798,1118,816],{"class":808},[798,1120,819],{"class":804},[798,1122,1123],{"class":808}," \"",[798,1125,1078],{"class":825},[798,1127,1100],{"class":808},[798,1129,832],{"class":808},[798,1131,1132,1134,1136,1139,1141,1144,1147,1149,1151,1153,1155,1157],{"class":800,"line":864},[798,1133,805],{"class":804},[798,1135,809],{"class":808},[798,1137,1138],{"class":812}," avatar",[798,1140,845],{"class":808},[798,1142,1143],{"class":804}," type",[798,1145,1146],{"class":812}," AvatarProps",[798,1148,816],{"class":808},[798,1150,819],{"class":804},[798,1152,1123],{"class":808},[798,1154,826],{"class":825},[798,1156,1100],{"class":808},[798,1158,832],{"class":808},[798,1160,1161],{"class":800,"line":870},[798,1162,867],{"emptyLinePlaceholder":223},[798,1164,1165,1167,1169,1172,1174,1177,1179,1182,1184,1187,1190,1193,1196,1199],{"class":800,"line":891},[798,1166,874],{"class":873},[798,1168,809],{"class":808},[798,1170,1171],{"class":812}," src",[798,1173,845],{"class":808},[798,1175,1176],{"class":812}," alt",[798,1178,845],{"class":808},[798,1180,1181],{"class":812}," label",[798,1183,845],{"class":808},[798,1185,1186],{"class":808}," ...",[798,1188,1189],{"class":812},"variants ",[798,1191,1192],{"class":808},"}",[798,1194,1195],{"class":808}," =",[798,1197,1198],{"class":812}," defineProps",[798,1200,1201],{"class":808},"\u003C\n",[798,1203,1204,1207,1210,1212,1214,1217,1220,1223,1225,1227,1229,1231,1233,1235,1237],{"class":800,"line":896},[798,1205,1206],{"class":812},"    AvatarProps ",[798,1208,1209],{"class":808},"&",[798,1211,809],{"class":808},[798,1213,1171],{"class":812},[798,1215,1216],{"class":808},"?:",[798,1218,1219],{"class":812}," string",[798,1221,1222],{"class":808},";",[798,1224,1176],{"class":812},[798,1226,1216],{"class":808},[798,1228,1219],{"class":812},[798,1230,1222],{"class":808},[798,1232,1181],{"class":812},[798,1234,1216],{"class":808},[798,1236,1219],{"class":812},[798,1238,1239],{"class":808}," }\n",[798,1241,1242,1245,1247],{"class":800,"line":913},[798,1243,1244],{"class":808},">",[798,1246,886],{"class":812},[798,1248,832],{"class":808},[798,1250,1251],{"class":800,"line":929},[798,1252,867],{"emptyLinePlaceholder":223},[798,1254,1255,1257,1260,1262,1264,1267,1271,1274],{"class":800,"line":934},[798,1256,874],{"class":873},[798,1258,1259],{"class":812}," failed ",[798,1261,880],{"class":808},[798,1263,1116],{"class":883},[798,1265,1266],{"class":812},"(",[798,1268,1270],{"class":1269},"sfNiH","false",[798,1272,1273],{"class":812},")",[798,1275,832],{"class":808},[798,1277,1279,1282,1284],{"class":800,"line":1278},10,[798,1280,1281],{"class":808},"\u003C\u002F",[798,1283,1089],{"class":1088},[798,1285,1107],{"class":808},[798,1287,1289],{"class":800,"line":1288},11,[798,1290,867],{"emptyLinePlaceholder":223},[798,1292,1294,1296,1298],{"class":800,"line":1293},12,[798,1295,1085],{"class":808},[798,1297,1071],{"class":1088},[798,1299,1107],{"class":808},[798,1301,1303,1306,1308,1311,1313,1315,1318,1320],{"class":800,"line":1302},13,[798,1304,1305],{"class":808},"    \u003C",[798,1307,798],{"class":1088},[798,1309,1310],{"class":873}," :class",[798,1312,880],{"class":808},[798,1314,1100],{"class":808},[798,1316,1317],{"class":825},"avatar(variants)",[798,1319,1100],{"class":808},[798,1321,1107],{"class":808},[798,1323,1325,1328,1331,1334,1336,1338,1341,1343,1346,1348,1350,1353,1355,1358,1360,1362,1365,1367,1370,1372,1374,1377,1379],{"class":800,"line":1324},14,[798,1326,1327],{"class":808},"        \u003C",[798,1329,1330],{"class":1088},"img",[798,1332,1333],{"class":873}," v-if",[798,1335,880],{"class":808},[798,1337,1100],{"class":808},[798,1339,1340],{"class":825},"src && !failed",[798,1342,1100],{"class":808},[798,1344,1345],{"class":873}," :src",[798,1347,880],{"class":808},[798,1349,1100],{"class":808},[798,1351,1352],{"class":825},"src",[798,1354,1100],{"class":808},[798,1356,1357],{"class":873}," :alt",[798,1359,880],{"class":808},[798,1361,1100],{"class":808},[798,1363,1364],{"class":825},"alt",[798,1366,1100],{"class":808},[798,1368,1369],{"class":873}," @error",[798,1371,880],{"class":808},[798,1373,1100],{"class":808},[798,1375,1376],{"class":825},"failed = true",[798,1378,1100],{"class":808},[798,1380,1381],{"class":808}," \u002F>\n",[798,1383,1385,1387,1389,1392,1394,1397,1399,1401],{"class":800,"line":1384},15,[798,1386,1327],{"class":808},[798,1388,1071],{"class":1088},[798,1390,1391],{"class":804}," v-else",[798,1393,1244],{"class":808},[798,1395,1396],{"class":812},"{{ label }}",[798,1398,1281],{"class":808},[798,1400,1071],{"class":1088},[798,1402,1107],{"class":808},[798,1404,1406,1409,1411],{"class":800,"line":1405},16,[798,1407,1408],{"class":808},"    \u003C\u002F",[798,1410,798],{"class":1088},[798,1412,1107],{"class":808},[798,1414,1416,1418,1420],{"class":800,"line":1415},17,[798,1417,1281],{"class":808},[798,1419,1071],{"class":1088},[798,1421,1107],{"class":808},[1071,1423,1424],{"v-slot:react":794},[789,1425,1428],{"className":791,"code":1426,"filename":1427,"language":793,"meta":794,"style":794},"import { useState } from \"react\";\nimport { avatar, type AvatarProps } from \"virtual:styleframe\";\n\ninterface AvatarComponentProps extends AvatarProps {\n    src?: string;\n    alt?: string;\n    label?: string;\n}\n\nexport function Avatar({ src, alt, label, ...variants }: AvatarComponentProps) {\n    const [failed, setFailed] = useState(false);\n\n    return (\n        \u003Cspan className={avatar(variants)}>\n            {src && !failed ? (\n                \u003Cimg src={src} alt={alt} onError={() => setFailed(true)} \u002F>\n            ) : (\n                label\n            )}\n        \u003C\u002Fspan>\n    );\n}\n","src\u002Fcomponents\u002FAvatar.tsx",[700,1429,1430,1452,1478,1482,1499,1510,1521,1532,1537,1541,1581,1612,1616,1624,1645,1660,1701,1706,1712,1720,1730,1738],{"__ignoreMap":794},[798,1431,1432,1434,1436,1439,1441,1443,1445,1448,1450],{"class":800,"line":801},[798,1433,805],{"class":804},[798,1435,809],{"class":808},[798,1437,1438],{"class":812}," useState",[798,1440,816],{"class":808},[798,1442,819],{"class":804},[798,1444,1123],{"class":808},[798,1446,1447],{"class":825},"react",[798,1449,1100],{"class":808},[798,1451,832],{"class":808},[798,1453,1454,1456,1458,1460,1462,1464,1466,1468,1470,1472,1474,1476],{"class":800,"line":835},[798,1455,805],{"class":804},[798,1457,809],{"class":808},[798,1459,1138],{"class":812},[798,1461,845],{"class":808},[798,1463,1143],{"class":804},[798,1465,1146],{"class":812},[798,1467,816],{"class":808},[798,1469,819],{"class":804},[798,1471,1123],{"class":808},[798,1473,826],{"class":825},[798,1475,1100],{"class":808},[798,1477,832],{"class":808},[798,1479,1480],{"class":800,"line":864},[798,1481,867],{"emptyLinePlaceholder":223},[798,1483,1484,1487,1491,1494,1496],{"class":800,"line":870},[798,1485,1486],{"class":873},"interface",[798,1488,1490],{"class":1489},"sBMFI"," AvatarComponentProps",[798,1492,1493],{"class":873}," extends",[798,1495,1146],{"class":1489},[798,1497,1498],{"class":808}," {\n",[798,1500,1501,1504,1506,1508],{"class":800,"line":891},[798,1502,1503],{"class":1088},"    src",[798,1505,1216],{"class":808},[798,1507,1219],{"class":1489},[798,1509,832],{"class":808},[798,1511,1512,1515,1517,1519],{"class":800,"line":896},[798,1513,1514],{"class":1088},"    alt",[798,1516,1216],{"class":808},[798,1518,1219],{"class":1489},[798,1520,832],{"class":808},[798,1522,1523,1526,1528,1530],{"class":800,"line":913},[798,1524,1525],{"class":1088},"    label",[798,1527,1216],{"class":808},[798,1529,1219],{"class":1489},[798,1531,832],{"class":808},[798,1533,1534],{"class":800,"line":929},[798,1535,1536],{"class":808},"}\n",[798,1538,1539],{"class":800,"line":934},[798,1540,867],{"emptyLinePlaceholder":223},[798,1542,1543,1545,1548,1551,1554,1557,1559,1561,1563,1565,1567,1569,1572,1575,1577,1579],{"class":800,"line":1278},[798,1544,937],{"class":804},[798,1546,1547],{"class":873}," function",[798,1549,1550],{"class":883}," Avatar",[798,1552,1553],{"class":808},"({",[798,1555,1171],{"class":1556},"sHdIc",[798,1558,845],{"class":808},[798,1560,1176],{"class":1556},[798,1562,845],{"class":808},[798,1564,1181],{"class":1556},[798,1566,845],{"class":808},[798,1568,1186],{"class":808},[798,1570,1571],{"class":1556},"variants",[798,1573,1574],{"class":808}," }:",[798,1576,1490],{"class":1489},[798,1578,1273],{"class":808},[798,1580,1498],{"class":808},[798,1582,1583,1586,1589,1592,1594,1597,1600,1602,1604,1606,1608,1610],{"class":800,"line":1288},[798,1584,1585],{"class":873},"    const",[798,1587,1588],{"class":808}," [",[798,1590,1591],{"class":812},"failed",[798,1593,845],{"class":808},[798,1595,1596],{"class":812}," setFailed",[798,1598,1599],{"class":808},"]",[798,1601,1195],{"class":808},[798,1603,1438],{"class":883},[798,1605,1266],{"class":1088},[798,1607,1270],{"class":1269},[798,1609,1273],{"class":1088},[798,1611,832],{"class":808},[798,1613,1614],{"class":800,"line":1293},[798,1615,867],{"emptyLinePlaceholder":223},[798,1617,1618,1621],{"class":800,"line":1302},[798,1619,1620],{"class":804},"    return",[798,1622,1623],{"class":1088}," (\n",[798,1625,1626,1628,1630,1633,1636,1638,1640,1642],{"class":800,"line":1324},[798,1627,1327],{"class":808},[798,1629,798],{"class":812},[798,1631,1632],{"class":812}," className",[798,1634,1635],{"class":808},"={",[798,1637,1061],{"class":1088},[798,1639,1266],{"class":808},[798,1641,1571],{"class":1556},[798,1643,1644],{"class":808},")}>\n",[798,1646,1647,1650,1652,1655,1657],{"class":800,"line":1384},[798,1648,1649],{"class":808},"            {",[798,1651,1352],{"class":1556},[798,1653,1654],{"class":1088}," && !",[798,1656,1591],{"class":1556},[798,1658,1659],{"class":1088}," ? (\n",[798,1661,1662,1665,1667,1669,1671,1673,1675,1677,1679,1681,1683,1686,1688,1691,1693,1696,1699],{"class":800,"line":1405},[798,1663,1664],{"class":1088},"                \u003C",[798,1666,1330],{"class":1556},[798,1668,1171],{"class":1556},[798,1670,1635],{"class":808},[798,1672,1352],{"class":812},[798,1674,1192],{"class":808},[798,1676,1176],{"class":812},[798,1678,1635],{"class":808},[798,1680,1364],{"class":812},[798,1682,1192],{"class":808},[798,1684,1685],{"class":812}," onError",[798,1687,1635],{"class":808},[798,1689,1690],{"class":1088},"() => setFailed",[798,1692,1266],{"class":808},[798,1694,1695],{"class":1556},"true",[798,1697,1698],{"class":808},")}",[798,1700,1381],{"class":808},[798,1702,1703],{"class":800,"line":1415},[798,1704,1705],{"class":1088},"            ) : (\n",[798,1707,1709],{"class":800,"line":1708},18,[798,1710,1711],{"class":1556},"                label\n",[798,1713,1715,1718],{"class":800,"line":1714},19,[798,1716,1717],{"class":1088},"            )",[798,1719,1536],{"class":808},[798,1721,1723,1726,1728],{"class":800,"line":1722},20,[798,1724,1725],{"class":808},"        \u003C\u002F",[798,1727,798],{"class":812},[798,1729,1107],{"class":808},[798,1731,1733,1736],{"class":800,"line":1732},21,[798,1734,1735],{"class":1088},"    )",[798,1737,832],{"class":808},[798,1739,1741],{"class":800,"line":1740},22,[798,1742,1536],{"class":808},[1071,1744,1745,1755,1868],{"v-slot:other":794},[692,1746,694,1747,1750,1751,1754],{},[700,1748,1749],{},"avatar()"," runtime returns a class string. Apply it however your framework binds classes, and clip the image with the recipe's ",[700,1752,1753],{},"> img"," selector:",[789,1756,1759],{"className":791,"code":1757,"filename":1758,"language":793,"meta":794,"style":794},"import { avatar } from \"virtual:styleframe\";\n\nconst classes = avatar({ color: \"neutral\", variant: \"soft\", size: \"md\", shape: \"circle\" });\n\u002F\u002F → \"avatar _color:... _background:... _width:2.5 _border-radius:full ...\"\n","src\u002Fcomponents\u002Favatar.ts",[700,1760,1761,1781,1785,1862],{"__ignoreMap":794},[798,1762,1763,1765,1767,1769,1771,1773,1775,1777,1779],{"class":800,"line":801},[798,1764,805],{"class":804},[798,1766,809],{"class":808},[798,1768,1138],{"class":812},[798,1770,816],{"class":808},[798,1772,819],{"class":804},[798,1774,1123],{"class":808},[798,1776,826],{"class":825},[798,1778,1100],{"class":808},[798,1780,832],{"class":808},[798,1782,1783],{"class":800,"line":835},[798,1784,867],{"emptyLinePlaceholder":223},[798,1786,1787,1789,1792,1794,1796,1798,1801,1804,1807,1809,1812,1814,1816,1819,1821,1823,1826,1828,1830,1833,1835,1837,1840,1842,1844,1847,1849,1851,1854,1856,1858,1860],{"class":800,"line":864},[798,1788,874],{"class":873},[798,1790,1791],{"class":812}," classes ",[798,1793,880],{"class":808},[798,1795,1138],{"class":883},[798,1797,1266],{"class":812},[798,1799,1800],{"class":808},"{",[798,1802,1803],{"class":1088}," color",[798,1805,1806],{"class":808},":",[798,1808,1123],{"class":808},[798,1810,1811],{"class":825},"neutral",[798,1813,1100],{"class":808},[798,1815,845],{"class":808},[798,1817,1818],{"class":1088}," variant",[798,1820,1806],{"class":808},[798,1822,1123],{"class":808},[798,1824,1825],{"class":825},"soft",[798,1827,1100],{"class":808},[798,1829,845],{"class":808},[798,1831,1832],{"class":1088}," size",[798,1834,1806],{"class":808},[798,1836,1123],{"class":808},[798,1838,1839],{"class":825},"md",[798,1841,1100],{"class":808},[798,1843,845],{"class":808},[798,1845,1846],{"class":1088}," shape",[798,1848,1806],{"class":808},[798,1850,1123],{"class":808},[798,1852,1853],{"class":825},"circle",[798,1855,1100],{"class":808},[798,1857,816],{"class":808},[798,1859,1273],{"class":812},[798,1861,832],{"class":808},[798,1863,1864],{"class":800,"line":870},[798,1865,1867],{"class":1866},"sHwdD","\u002F\u002F → \"avatar _color:... _background:... _width:2.5 _border-radius:full ...\"\n",[789,1869,1874],{"className":1870,"code":1871,"filename":1872,"language":1873,"meta":794,"style":794},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cspan class=\"avatar _border-radius:full ...\">\n    \u003Cimg src=\"\u002Fusers\u002Fada.jpg\" alt=\"Ada Lovelace\" \u002F>\n\u003C\u002Fspan>\n\u003C!-- or, with no image: -->\n\u003Cspan class=\"avatar ...\">AL\u003C\u002Fspan>\n","src\u002Fcomponents\u002Favatar.html","html",[700,1875,1876,1896,1926,1934,1939],{"__ignoreMap":794},[798,1877,1878,1880,1882,1885,1887,1889,1892,1894],{"class":800,"line":801},[798,1879,1085],{"class":808},[798,1881,798],{"class":1088},[798,1883,1884],{"class":873}," class",[798,1886,880],{"class":808},[798,1888,1100],{"class":808},[798,1890,1891],{"class":825},"avatar _border-radius:full ...",[798,1893,1100],{"class":808},[798,1895,1107],{"class":808},[798,1897,1898,1900,1902,1904,1906,1908,1911,1913,1915,1917,1919,1922,1924],{"class":800,"line":835},[798,1899,1305],{"class":808},[798,1901,1330],{"class":1088},[798,1903,1171],{"class":873},[798,1905,880],{"class":808},[798,1907,1100],{"class":808},[798,1909,1910],{"class":825},"\u002Fusers\u002Fada.jpg",[798,1912,1100],{"class":808},[798,1914,1176],{"class":873},[798,1916,880],{"class":808},[798,1918,1100],{"class":808},[798,1920,1921],{"class":825},"Ada Lovelace",[798,1923,1100],{"class":808},[798,1925,1381],{"class":808},[798,1927,1928,1930,1932],{"class":800,"line":864},[798,1929,1281],{"class":808},[798,1931,798],{"class":1088},[798,1933,1107],{"class":808},[798,1935,1936],{"class":800,"line":870},[798,1937,1938],{"class":1866},"\u003C!-- or, with no image: -->\n",[798,1940,1941,1943,1945,1947,1949,1951,1954,1956,1958,1961,1963,1965],{"class":800,"line":891},[798,1942,1085],{"class":808},[798,1944,798],{"class":1088},[798,1946,1884],{"class":873},[798,1948,880],{"class":808},[798,1950,1100],{"class":808},[798,1952,1953],{"class":825},"avatar ...",[798,1955,1100],{"class":808},[798,1957,1244],{"class":808},[798,1959,1960],{"class":812},"AL",[798,1962,1281],{"class":808},[798,1964,798],{"class":1088},[798,1966,1107],{"class":808},[773,1968,1970],{"id":1969},"see-it-in-action","See it in action",[1972,1973],"story-preview",{"story":1974,":panel":1695},"theme-recipes-layout-avatar--default",[688,1976,195],{"id":1977},"colors",[692,1979,1980,1981,1983],{},"The Avatar fallback surface supports 4 color options following the Minimal color pattern. The default ",[700,1982,1811],{}," color renders a muted gray surface that adapts to light and dark mode.",[1972,1985],{"story":1986,":panel":1695},"theme-recipes-layout-avatar--neutral",[1988,1989,1991],"h3",{"id":1990},"color-reference","Color Reference",[1972,1993],{"story":1994,":height":1995},"theme-recipes-layout-avatar--all-variants","320",[1997,1998,1999,2015],"table",{},[2000,2001,2002],"thead",{},[2003,2004,2005,2009,2012],"tr",{},[2006,2007,2008],"th",{},"Color",[2006,2010,2011],{},"Behavior",[2006,2013,2014],{},"Use Case",[2016,2017,2018,2032,2045,2058],"tbody",{},[2003,2019,2020,2026,2029],{},[2021,2022,2023],"td",{},[700,2024,2025],{},"primary",[2021,2027,2028],{},"Brand color, adapts to dark mode",[2021,2030,2031],{},"Highlighted or \"you\" avatars",[2003,2033,2034,2039,2042],{},[2021,2035,2036],{},[700,2037,2038],{},"light",[2021,2040,2041],{},"Always light, fixed across modes",[2021,2043,2044],{},"Avatars on dark backgrounds",[2003,2046,2047,2052,2055],{},[2021,2048,2049],{},[700,2050,2051],{},"dark",[2021,2053,2054],{},"Always dark, fixed across modes",[2021,2056,2057],{},"Avatars on light backgrounds",[2003,2059,2060,2064,2067],{},[2021,2061,2062],{},[700,2063,1811],{},[2021,2065,2066],{},"Adaptive (light ↔ dark)",[2021,2068,2069],{},"Default, general-purpose fallback",[2071,2072,2073,2076,2077,2079],"tip",{},[696,2074,2075],{},"Pro tip:"," Use ",[700,2078,1811],{}," for general-purpose initials fallbacks that adapt to both light and dark mode automatically.",[688,2081,2082],{"id":1571},"Variants",[692,2084,2085,2086,2089,2090,2092],{},"Two fill styles control how the fallback color is applied. ",[700,2087,2088],{},"solid"," fills the avatar with the color and uses light text; ",[700,2091,1825],{}," uses a tinted background with darker text.",[1972,2094],{"story":1994,":height":1995},[1997,2096,2097,2107],{},[2000,2098,2099],{},[2003,2100,2101,2104],{},[2006,2102,2103],{},"Variant",[2006,2105,2106],{},"Description",[2016,2108,2109,2118],{},[2003,2110,2111,2115],{},[2021,2112,2113],{},[700,2114,2088],{},[2021,2116,2117],{},"Filled background with contrasting text",[2003,2119,2120,2124],{},[2021,2121,2122],{},[700,2123,1825],{},[2021,2125,2126],{},"Tinted background with colored text (default)",[688,2128,2130],{"id":2129},"shapes","Shapes",[692,2132,2133],{},"The Avatar can be rendered as a circle (default) or a square with rounded corners. The image clips to the chosen shape automatically.",[1972,2135],{"story":2136,":panel":1695},"theme-recipes-layout-avatar--shapes",[1997,2138,2139,2149],{},[2000,2140,2141],{},[2003,2142,2143,2146],{},[2006,2144,2145],{},"Shape",[2006,2147,2148],{},"Border Radius",[2016,2150,2151,2162],{},[2003,2152,2153,2157],{},[2021,2154,2155],{},[700,2156,1853],{},[2021,2158,2159],{},[700,2160,2161],{},"@border-radius.full",[2003,2163,2164,2169],{},[2021,2165,2166],{},[700,2167,2168],{},"square",[2021,2170,2171],{},[700,2172,2173],{},"@border-radius.md",[688,2175,2177],{"id":2176},"sizes","Sizes",[692,2179,2180],{},"The Avatar comes in 5 sizes that control both the dimensions and the fallback initials font size.",[1972,2182],{"story":2183,":height":2184},"theme-recipes-layout-avatar--all-sizes","360",[1997,2186,2187,2200],{},[2000,2188,2189],{},[2003,2190,2191,2194,2197],{},[2006,2192,2193],{},"Size",[2006,2195,2196],{},"Dimensions",[2006,2198,2199],{},"Font Size",[2016,2201,2202,2222,2241,2259,2278],{},[2003,2203,2204,2209,2217],{},[2021,2205,2206],{},[700,2207,2208],{},"xs",[2021,2210,2211,2214,2215],{},[700,2212,2213],{},"@spacing * 1.5"," × ",[700,2216,2213],{},[2021,2218,2219],{},[700,2220,2221],{},"@font-size.2xs",[2003,2223,2224,2229,2236],{},[2021,2225,2226],{},[700,2227,2228],{},"sm",[2021,2230,2231,2214,2234],{},[700,2232,2233],{},"@spacing * 2",[700,2235,2233],{},[2021,2237,2238],{},[700,2239,2240],{},"@font-size.xs",[2003,2242,2243,2247,2254],{},[2021,2244,2245],{},[700,2246,1839],{},[2021,2248,2249,2214,2252],{},[700,2250,2251],{},"@spacing * 2.5",[700,2253,2251],{},[2021,2255,2256],{},[700,2257,2258],{},"@font-size.sm",[2003,2260,2261,2266,2273],{},[2021,2262,2263],{},[700,2264,2265],{},"lg",[2021,2267,2268,2214,2271],{},[700,2269,2270],{},"@spacing * 3",[700,2272,2270],{},[2021,2274,2275],{},[700,2276,2277],{},"@font-size.md",[2003,2279,2280,2285,2292],{},[2021,2281,2282],{},[700,2283,2284],{},"xl",[2021,2286,2287,2214,2290],{},[700,2288,2289],{},"@spacing * 4",[700,2291,2289],{},[2021,2293,2294],{},[700,2295,2296],{},"@font-size.lg",[688,2298,2300],{"id":2299},"image-and-fallback","Image and fallback",[692,2302,2303,2304,2306,2307,2309,2310,2313],{},"Place an ",[700,2305,1065],{}," inside the avatar — the recipe's ",[700,2308,1753],{}," selector sizes it to cover the box and clips it to the avatar shape via ",[700,2311,2312],{},"border-radius: inherit",". Render the initials fallback when no image is set or when the image fails to load.",[1972,2315],{"story":2316,":panel":1695},"theme-recipes-layout-avatar--with-image",[2318,2319,2320,2323,2324,2327,2328,2331],"note",{},[696,2321,2322],{},"Good to know:"," Because the avatar root stays ",[700,2325,2326],{},"position: relative"," (rather than ",[700,2329,2330],{},"overflow: hidden","), a status badge can sit at the edge without being clipped — see below.",[688,2333,2335],{"id":2334},"status-indicator","Status indicator",[692,2337,2338,2339,2341],{},"Add ",[700,2340,711],{}," to render a small status dot anchored to the bottom-right of an avatar. The badge uses the Full color pattern so it can express presence states.",[1972,2343],{"story":2344,":panel":1695},"theme-recipes-layout-avatar--with-status",[1972,2346],{"story":2347,":panel":1695},"theme-recipes-layout-avatar--status-colors",[1997,2349,2350,2360],{},[2000,2351,2352],{},[2003,2353,2354,2357],{},[2006,2355,2356],{},"Status color",[2006,2358,2359],{},"Typical meaning",[2016,2361,2362,2372,2382,2392],{},[2003,2363,2364,2369],{},[2021,2365,2366],{},[700,2367,2368],{},"success",[2021,2370,2371],{},"Online (default)",[2003,2373,2374,2379],{},[2021,2375,2376],{},[700,2377,2378],{},"warning",[2021,2380,2381],{},"Away",[2003,2383,2384,2389],{},[2021,2385,2386],{},[700,2387,2388],{},"error",[2021,2390,2391],{},"Busy \u002F do not disturb",[2003,2393,2394,2398],{},[2021,2395,2396],{},[700,2397,1811],{},[2021,2399,2400],{},"Offline",[789,2402,2404],{"className":1075,"code":2403,"filename":1077,"language":1078,"meta":794,"style":794},"\u003Cspan :class=\"avatar({ size: 'lg' })\">\n    AL\n    \u003Cspan :class=\"avatarBadge({ color: 'success', size: 'lg' })\" \u002F>\n\u003C\u002Fspan>\n",[700,2405,2406,2446,2451,2456],{"__ignoreMap":794},[798,2407,2408,2410,2412,2415,2418,2420,2422,2424,2426,2428,2430,2432,2434,2436,2438,2440,2442,2444],{"class":800,"line":801},[798,2409,1085],{"class":808},[798,2411,798],{"class":1088},[798,2413,2414],{"class":808}," :",[798,2416,2417],{"class":873},"class",[798,2419,880],{"class":808},[798,2421,1100],{"class":808},[798,2423,1061],{"class":883},[798,2425,1266],{"class":812},[798,2427,1800],{"class":808},[798,2429,1832],{"class":1088},[798,2431,1806],{"class":808},[798,2433,822],{"class":808},[798,2435,2265],{"class":825},[798,2437,829],{"class":808},[798,2439,816],{"class":808},[798,2441,1273],{"class":812},[798,2443,1100],{"class":808},[798,2445,1107],{"class":808},[798,2447,2448],{"class":800,"line":835},[798,2449,2450],{"class":812},"    AL\n",[798,2452,2453],{"class":800,"line":864},[798,2454,2455],{"class":812},"    \u003Cspan :class=\"avatarBadge({ color: 'success', size: 'lg' })\" \u002F>\n",[798,2457,2458,2460,2462],{"class":800,"line":870},[798,2459,1281],{"class":808},[798,2461,798],{"class":1088},[798,2463,1107],{"class":808},[688,2465,568],{"id":2466},"accessibility",[731,2468,2469,2485,2491],{},[734,2470,2471,2476,2477,2480,2481,2484],{},[696,2472,2473,2474],{},"Provide an ",[700,2475,1364],{}," on the image that names the person or entity (e.g. ",[700,2478,2479],{},"alt=\"Ada Lovelace\"","). Use an empty ",[700,2482,2483],{},"alt=\"\""," only when the avatar is purely decorative and the name appears adjacent.",[734,2486,2487,2490],{},[696,2488,2489],{},"The initials fallback is text"," and is announced by screen readers; keep it meaningful (the person's initials).",[734,2492,2493,2496],{},[696,2494,2495],{},"Communicate status in text, not color alone",": pair the status badge with a visible or visually-hidden label (e.g. \"Online\") so presence isn't conveyed by color only.",[688,2498,2500],{"id":2499},"customization","Customization",[1988,2502,2504],{"id":2503},"overriding-defaults","Overriding Defaults",[789,2506,2508],{"className":791,"code":2507,"filename":787,"language":793,"meta":794,"style":794},"const avatar = useAvatarRecipe(s, {\n    defaultVariants: { color: 'primary', variant: 'solid', size: 'lg', shape: 'square' },\n});\n",[700,2509,2510,2527,2585],{"__ignoreMap":794},[798,2511,2512,2514,2516,2518,2520,2523,2525],{"class":800,"line":801},[798,2513,874],{"class":873},[798,2515,901],{"class":812},[798,2517,880],{"class":808},[798,2519,842],{"class":883},[798,2521,2522],{"class":812},"(s",[798,2524,845],{"class":808},[798,2526,1498],{"class":808},[798,2528,2529,2532,2534,2536,2538,2540,2542,2544,2546,2548,2550,2552,2554,2556,2558,2560,2562,2564,2566,2568,2570,2572,2574,2576,2578,2580,2582],{"class":800,"line":835},[798,2530,2531],{"class":1088},"    defaultVariants",[798,2533,1806],{"class":808},[798,2535,809],{"class":808},[798,2537,1803],{"class":1088},[798,2539,1806],{"class":808},[798,2541,822],{"class":808},[798,2543,2025],{"class":825},[798,2545,829],{"class":808},[798,2547,845],{"class":808},[798,2549,1818],{"class":1088},[798,2551,1806],{"class":808},[798,2553,822],{"class":808},[798,2555,2088],{"class":825},[798,2557,829],{"class":808},[798,2559,845],{"class":808},[798,2561,1832],{"class":1088},[798,2563,1806],{"class":808},[798,2565,822],{"class":808},[798,2567,2265],{"class":825},[798,2569,829],{"class":808},[798,2571,845],{"class":808},[798,2573,1846],{"class":1088},[798,2575,1806],{"class":808},[798,2577,822],{"class":808},[798,2579,2168],{"class":825},[798,2581,829],{"class":808},[798,2583,2584],{"class":808}," },\n",[798,2586,2587,2589,2591],{"class":800,"line":864},[798,2588,1192],{"class":808},[798,2590,1273],{"class":812},[798,2592,832],{"class":808},[1988,2594,2596],{"id":2595},"filtering-variants","Filtering Variants",[789,2598,2600],{"className":791,"code":2599,"filename":787,"language":793,"meta":794,"style":794},"const avatar = useAvatarRecipe(s, {\n    filter: {\n        color: ['neutral', 'primary'],\n        shape: ['circle'],\n    },\n});\n",[700,2601,2602,2618,2627,2655,2674,2679],{"__ignoreMap":794},[798,2603,2604,2606,2608,2610,2612,2614,2616],{"class":800,"line":801},[798,2605,874],{"class":873},[798,2607,901],{"class":812},[798,2609,880],{"class":808},[798,2611,842],{"class":883},[798,2613,2522],{"class":812},[798,2615,845],{"class":808},[798,2617,1498],{"class":808},[798,2619,2620,2623,2625],{"class":800,"line":835},[798,2621,2622],{"class":1088},"    filter",[798,2624,1806],{"class":808},[798,2626,1498],{"class":808},[798,2628,2629,2632,2634,2636,2638,2640,2642,2644,2646,2648,2650,2652],{"class":800,"line":864},[798,2630,2631],{"class":1088},"        color",[798,2633,1806],{"class":808},[798,2635,1588],{"class":812},[798,2637,829],{"class":808},[798,2639,1811],{"class":825},[798,2641,829],{"class":808},[798,2643,845],{"class":808},[798,2645,822],{"class":808},[798,2647,2025],{"class":825},[798,2649,829],{"class":808},[798,2651,1599],{"class":812},[798,2653,2654],{"class":808},",\n",[798,2656,2657,2660,2662,2664,2666,2668,2670,2672],{"class":800,"line":870},[798,2658,2659],{"class":1088},"        shape",[798,2661,1806],{"class":808},[798,2663,1588],{"class":812},[798,2665,829],{"class":808},[798,2667,1853],{"class":825},[798,2669,829],{"class":808},[798,2671,1599],{"class":812},[798,2673,2654],{"class":808},[798,2675,2676],{"class":800,"line":891},[798,2677,2678],{"class":808},"    },\n",[798,2680,2681,2683,2685],{"class":800,"line":896},[798,2682,1192],{"class":808},[798,2684,1273],{"class":812},[798,2686,832],{"class":808},[2318,2688,2689,2691],{},[696,2690,2322],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,2693,73],{"id":2694},"api-reference",[1988,2696,2698],{"id":2697},"useavatarrecipes-options",[700,2699,2700],{},"useAvatarRecipe(s, options?)",[692,2702,2703,2704,2706],{},"Creates the avatar recipe with color, variant, shape, and size variants. Registers a ",[700,2705,1753],{}," selector that clips the image to the avatar shape.",[692,2708,2709],{},[696,2710,2711],{},"Parameters:",[1997,2713,2714,2726],{},[2000,2715,2716],{},[2003,2717,2718,2721,2724],{},[2006,2719,2720],{},"Parameter",[2006,2722,2723],{},"Type",[2006,2725,2106],{},[2016,2727,2728,2743,2758,2773,2787,2802,2817],{},[2003,2729,2730,2735,2740],{},[2021,2731,2732],{},[700,2733,2734],{},"s",[2021,2736,2737],{},[700,2738,2739],{},"Styleframe",[2021,2741,2742],{},"The Styleframe instance",[2003,2744,2745,2750,2755],{},[2021,2746,2747],{},[700,2748,2749],{},"options",[2021,2751,2752],{},[700,2753,2754],{},"DeepPartial\u003CRecipeConfig>",[2021,2756,2757],{},"Optional overrides for the recipe configuration",[2003,2759,2760,2765,2770],{},[2021,2761,2762],{},[700,2763,2764],{},"options.base",[2021,2766,2767],{},[700,2768,2769],{},"VariantDeclarationsBlock",[2021,2771,2772],{},"Custom base styles",[2003,2774,2775,2780,2784],{},[2021,2776,2777],{},[700,2778,2779],{},"options.variants",[2021,2781,2782],{},[700,2783,2082],{},[2021,2785,2786],{},"Custom variant definitions",[2003,2788,2789,2794,2799],{},[2021,2790,2791],{},[700,2792,2793],{},"options.defaultVariants",[2021,2795,2796],{},[700,2797,2798],{},"Record\u003Ckeyof Variants, string>",[2021,2800,2801],{},"Default variant values",[2003,2803,2804,2809,2814],{},[2021,2805,2806],{},[700,2807,2808],{},"options.compoundVariants",[2021,2810,2811],{},[700,2812,2813],{},"CompoundVariant[]",[2021,2815,2816],{},"Custom compound variant definitions",[2003,2818,2819,2824,2829],{},[2021,2820,2821],{},[700,2822,2823],{},"options.filter",[2021,2825,2826],{},[700,2827,2828],{},"Record\u003Cstring, string[]>",[2021,2830,2831],{},"Limit which variant values are generated",[692,2833,2834],{},[696,2835,2836],{},"Variants:",[1997,2838,2839,2851],{},[2000,2840,2841],{},[2003,2842,2843,2845,2848],{},[2006,2844,2103],{},[2006,2846,2847],{},"Options",[2006,2849,2850],{},"Default",[2016,2852,2853,2875,2892,2909],{},[2003,2854,2855,2860,2871],{},[2021,2856,2857],{},[700,2858,2859],{},"color",[2021,2861,2862,2864,2865,2864,2867,2864,2869],{},[700,2863,2025],{},", ",[700,2866,2038],{},[700,2868,2051],{},[700,2870,1811],{},[2021,2872,2873],{},[700,2874,1811],{},[2003,2876,2877,2882,2888],{},[2021,2878,2879],{},[700,2880,2881],{},"variant",[2021,2883,2884,2864,2886],{},[700,2885,2088],{},[700,2887,1825],{},[2021,2889,2890],{},[700,2891,1825],{},[2003,2893,2894,2899,2905],{},[2021,2895,2896],{},[700,2897,2898],{},"shape",[2021,2900,2901,2864,2903],{},[700,2902,1853],{},[700,2904,2168],{},[2021,2906,2907],{},[700,2908,1853],{},[2003,2910,2911,2916,2928],{},[2021,2912,2913],{},[700,2914,2915],{},"size",[2021,2917,2918,2864,2920,2864,2922,2864,2924,2864,2926],{},[700,2919,2208],{},[700,2921,2228],{},[700,2923,1839],{},[700,2925,2265],{},[700,2927,2284],{},[2021,2929,2930],{},[700,2931,1839],{},[1988,2933,2935],{"id":2934},"useavatarbadgerecipes-options",[700,2936,2937],{},"useAvatarBadgeRecipe(s, options?)",[692,2939,2940],{},"Creates the status badge recipe, positioned absolutely at the bottom-right of an avatar.",[692,2942,2943],{},[696,2944,2836],{},[1997,2946,2947,2957],{},[2000,2948,2949],{},[2003,2950,2951,2953,2955],{},[2006,2952,2103],{},[2006,2954,2847],{},[2006,2956,2850],{},[2016,2958,2959,2991,3013],{},[2003,2960,2961,2965,2987],{},[2021,2962,2963],{},[700,2964,2859],{},[2021,2966,2967,2864,2969,2864,2972,2864,2974,2864,2977,2864,2979,2864,2981,2864,2983,2864,2985],{},[700,2968,2025],{},[700,2970,2971],{},"secondary",[700,2973,2368],{},[700,2975,2976],{},"info",[700,2978,2378],{},[700,2980,2388],{},[700,2982,2038],{},[700,2984,2051],{},[700,2986,1811],{},[2021,2988,2989],{},[700,2990,2368],{},[2003,2992,2993,2997,3009],{},[2021,2994,2995],{},[700,2996,2915],{},[2021,2998,2999,2864,3001,2864,3003,2864,3005,2864,3007],{},[700,3000,2208],{},[700,3002,2228],{},[700,3004,1839],{},[700,3006,2265],{},[700,3008,2284],{},[2021,3010,3011],{},[700,3012,1839],{},[2003,3014,3015,3020,3034],{},[2021,3016,3017],{},[700,3018,3019],{},"position",[2021,3021,3022,2864,3025,2864,3028,2864,3031],{},[700,3023,3024],{},"top-left",[700,3026,3027],{},"top-right",[700,3029,3030],{},"bottom-left",[700,3032,3033],{},"bottom-right",[2021,3035,3036],{},[700,3037,3033],{},[692,3039,3040],{},[705,3041,3042],{"href":132},"Learn more about recipes ->",[688,3044,3046],{"id":3045},"best-practices","Best Practices",[731,3048,3049,3057,3063,3080,3086],{},[734,3050,3051,3056],{},[696,3052,3053,3054],{},"Always set ",[700,3055,1364],{}," on avatar images that represent a person or entity.",[734,3058,3059,3062],{},[696,3060,3061],{},"Match the badge size to the avatar size"," so the status dot scales proportionally.",[734,3064,3065,3073,3074,3076,3077,3079],{},[696,3066,3067,3068,3070,3071],{},"Use ",[700,3069,1811],{}," + ",[700,3072,1825],{}," for general-purpose initials; reserve ",[700,3075,2025],{},"\u002F",[700,3078,2088],{}," for emphasis.",[734,3081,3082,3085],{},[696,3083,3084],{},"Keep initials short"," (1–2 characters) so they stay legible at small sizes.",[734,3087,3088,3091,3092,3095],{},[696,3089,3090],{},"Filter what you don't need",": Pass a ",[700,3093,3094],{},"filter"," option to reduce generated CSS.",[688,3097,3099],{"id":3098},"faq","FAQ",[3101,3102,3103,3122,3135,3152],"accordion",{},[3104,3105,3108,3109,3111,3112,3114,3115,3076,3118,3121],"accordion-item",{"icon":3106,"label":3107},"i-lucide-circle-help","How does the image fallback work?","The avatar root carries the fallback background and centers its text content. When you render an ",[700,3110,1065],{}," inside it, the recipe's ",[700,3113,1753],{}," selector covers the box and clips to the avatar shape. If the image is missing or errors, render the initials instead — they sit on the fallback surface. The example components wire an ",[700,3116,3117],{},"@error",[700,3119,3120],{},"onError"," handler to switch to the fallback automatically.",[3104,3123,3125,3126,3128,3129,3131,3132,3134],{"icon":3106,"label":3124},"Why isn't the avatar using overflow: hidden?","The image is clipped via ",[700,3127,2312],{}," rather than ",[700,3130,2330],{}," on the root. This keeps the root ",[700,3133,2326],{}," without clipping, so a status badge (or any edge-anchored element) can sit at the avatar's corner without being cut off.",[3104,3136,3138,3139,3141,3142,3145,3146,3148,3149,3151],{"icon":3106,"label":3137},"Can the fallback be a colored circle per user?","Yes. Pick a ",[700,3140,2859],{}," per user (e.g. derive it from a hash of their name) and pass it to ",[700,3143,3144],{},"avatar({ color })",". The ",[700,3147,2088],{}," and ",[700,3150,1825],{}," variants give filled or tinted surfaces respectively.",[3104,3153,3155,3156,3158],{"icon":3106,"label":3154},"How do I stack multiple avatars?","Use the ",[705,3157,531],{"href":532}," recipe, which overlaps avatars, adds a ring to separate them, and supports a \"+N\" overflow count.",[3160,3161,3162],"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 .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 .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}",{"title":794,"searchDepth":835,"depth":835,"links":3164},[3165,3166,3167,3168,3171,3172,3173,3174,3175,3176,3177,3181,3185,3186],{"id":690,"depth":835,"text":78},{"id":725,"depth":835,"text":726},{"id":766,"depth":835,"text":767},{"id":1977,"depth":835,"text":195,"children":3169},[3170],{"id":1990,"depth":864,"text":1991},{"id":1571,"depth":835,"text":2082},{"id":2129,"depth":835,"text":2130},{"id":2176,"depth":835,"text":2177},{"id":2299,"depth":835,"text":2300},{"id":2334,"depth":835,"text":2335},{"id":2466,"depth":835,"text":568},{"id":2499,"depth":835,"text":2500,"children":3178},[3179,3180],{"id":2503,"depth":864,"text":2504},{"id":2595,"depth":864,"text":2596},{"id":2694,"depth":835,"text":73,"children":3182},[3183,3184],{"id":2697,"depth":864,"text":2700},{"id":2934,"depth":864,"text":2937},{"id":3045,"depth":835,"text":3046},{"id":3098,"depth":835,"text":3099},"A user avatar with an image and an automatic initials fallback — circular or square, with an optional status badge — built as a multi-part recipe system.",null,{},{"icon":7},{"title":527,"description":3187},"sS7kkeZHX3cMhg0fV7Z8XjEhxmj0njNe96n6yuBqus4",[3194,3196],{"title":523,"path":524,"stem":525,"description":3195,"icon":7,"children":-1},"A stacked set of collapsible disclosure panels for progressively revealing content. Supports multiple colors, an enclosed or chromeless style, and sizes through the recipe system.",{"title":531,"path":532,"stem":533,"description":3197,"icon":7,"children":-1},"A stacked, overlapping set of avatars with a separating ring and an optional \"+N\" overflow count.",1781596344256]