[{"data":1,"prerenderedAt":2250},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-avatar-group":682,"-docs-theme-components-avatar-group-surround":2245},{"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":531,"body":684,"description":2239,"extension":1642,"links":2240,"meta":2241,"navigation":2242,"path":532,"seo":2243,"stem":533,"__hash__":2244},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group.md",{"type":685,"value":686,"toc":2222},"minimark",[687,691,712,722,726,729,757,761,1578,1582,1588,1592,1672,1676,1682,1685,1757,1760,1795,1799,1804,1856,1860,1940,1951,1954,1960,1966,1971,2078,2083,2123,2128,2132,2161,2165,2218],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,702,703,707,708,711],"p",{},"The ",[696,697,531],"strong",{}," lays out multiple ",[700,701,527],"a",{"href":528}," items in an overlapping stack — useful for showing the members of a team, project, or conversation in a compact space. The ",[704,705,706],"code",{},"useAvatarGroupRecipe()"," composable creates a ",[700,709,710],{"href":132},"recipe"," that overlaps its avatar children, draws a ring (in the page background color) around each so they read as separate, and exposes a size axis that controls the overlap amount.",[692,713,714,715,718,719,721],{},"The recipe coordinates its children with CSS only — it targets ",[704,716,717],{},"> .avatar"," items directly, so any standard ",[700,720,527],{"href":528}," becomes a stack member with no extra wiring. A trailing \"+N\" overflow indicator is simply another avatar.",[688,723,725],{"id":724},"why-use-the-avatar-group-recipe","Why use the Avatar Group recipe?",[692,727,728],{},"The Avatar Group recipe helps you:",[730,731,732,739,745,751],"ul",{},[733,734,735,738],"li",{},[696,736,737],{},"Show many people in little space",": Overlap avatars into a compact, scannable stack.",[733,740,741,744],{},[696,742,743],{},"Keep avatars legible",": Each item gets a background-colored ring so overlapping edges stay distinct.",[733,746,747,750],{},[696,748,749],{},"Scale the overlap",": A size axis matches the avatars' size and tightens or loosens the overlap accordingly.",[733,752,753,756],{},[696,754,755],{},"Handle overflow",": Add a \"+N\" count as a trailing neutral avatar to summarize hidden members.",[688,758,760],{"id":759},"usage","Usage",[762,763,765,770,777,1046,1050,1061,1569,1573],"steps",{"level":764},"4",[766,767,769],"h4",{"id":768},"register-the-recipes","Register the recipes",[692,771,772,773,776],{},"Register the Avatar Group recipe alongside the Avatar recipe — the group styles the ",[704,774,775],{},".avatar"," children it contains:",[778,779,781,939],"code-tree",{"default-value":780},"src\u002Fcomponents\u002Favatar-group.styleframe.ts",[782,783,788],"pre",{"className":784,"code":785,"filename":780,"language":786,"meta":787,"style":787},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useAvatarRecipe, useAvatarGroupRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst avatar = useAvatarRecipe(s);\nconst avatarGroup = useAvatarGroupRecipe(s);\n\nexport default s;\n","ts","",[704,789,790,826,855,861,882,887,904,920,925],{"__ignoreMap":787},[791,792,795,799,803,807,810,813,816,820,823],"span",{"class":793,"line":794},"line",1,[791,796,798],{"class":797},"s7zQu","import",[791,800,802],{"class":801},"sMK4o"," {",[791,804,806],{"class":805},"sTEyZ"," styleframe",[791,808,809],{"class":801}," }",[791,811,812],{"class":797}," from",[791,814,815],{"class":801}," '",[791,817,819],{"class":818},"sfazB","virtual:styleframe",[791,821,822],{"class":801},"'",[791,824,825],{"class":801},";\n",[791,827,829,831,833,836,839,842,844,846,848,851,853],{"class":793,"line":828},2,[791,830,798],{"class":797},[791,832,802],{"class":801},[791,834,835],{"class":805}," useAvatarRecipe",[791,837,838],{"class":801},",",[791,840,841],{"class":805}," useAvatarGroupRecipe",[791,843,809],{"class":801},[791,845,812],{"class":797},[791,847,815],{"class":801},[791,849,850],{"class":818},"@styleframe\u002Ftheme",[791,852,822],{"class":801},[791,854,825],{"class":801},[791,856,858],{"class":793,"line":857},3,[791,859,860],{"emptyLinePlaceholder":223},"\n",[791,862,864,868,871,874,877,880],{"class":793,"line":863},4,[791,865,867],{"class":866},"spNyl","const",[791,869,870],{"class":805}," s ",[791,872,873],{"class":801},"=",[791,875,806],{"class":876},"s2Zo4",[791,878,879],{"class":805},"()",[791,881,825],{"class":801},[791,883,885],{"class":793,"line":884},5,[791,886,860],{"emptyLinePlaceholder":223},[791,888,890,892,895,897,899,902],{"class":793,"line":889},6,[791,891,867],{"class":866},[791,893,894],{"class":805}," avatar ",[791,896,873],{"class":801},[791,898,835],{"class":876},[791,900,901],{"class":805},"(s)",[791,903,825],{"class":801},[791,905,907,909,912,914,916,918],{"class":793,"line":906},7,[791,908,867],{"class":866},[791,910,911],{"class":805}," avatarGroup ",[791,913,873],{"class":801},[791,915,841],{"class":876},[791,917,901],{"class":805},[791,919,825],{"class":801},[791,921,923],{"class":793,"line":922},8,[791,924,860],{"emptyLinePlaceholder":223},[791,926,928,931,934,937],{"class":793,"line":927},9,[791,929,930],{"class":797},"export",[791,932,933],{"class":797}," default",[791,935,936],{"class":805}," s",[791,938,825],{"class":801},[782,940,943],{"className":784,"code":941,"filename":942,"language":786,"meta":787,"style":787},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n","styleframe.config.ts",[704,944,945,966,992,996,1010,1014,1023,1032,1036],{"__ignoreMap":787},[791,946,947,949,951,953,955,957,959,962,964],{"class":793,"line":794},[791,948,798],{"class":797},[791,950,802],{"class":801},[791,952,806],{"class":805},[791,954,809],{"class":801},[791,956,812],{"class":797},[791,958,815],{"class":801},[791,960,961],{"class":818},"styleframe",[791,963,822],{"class":801},[791,965,825],{"class":801},[791,967,968,970,972,975,977,980,982,984,986,988,990],{"class":793,"line":828},[791,969,798],{"class":797},[791,971,802],{"class":801},[791,973,974],{"class":805}," useDesignTokensPreset",[791,976,838],{"class":801},[791,978,979],{"class":805}," useUtilitiesPreset",[791,981,809],{"class":801},[791,983,812],{"class":797},[791,985,815],{"class":801},[791,987,850],{"class":818},[791,989,822],{"class":801},[791,991,825],{"class":801},[791,993,994],{"class":793,"line":857},[791,995,860],{"emptyLinePlaceholder":223},[791,997,998,1000,1002,1004,1006,1008],{"class":793,"line":863},[791,999,867],{"class":866},[791,1001,870],{"class":805},[791,1003,873],{"class":801},[791,1005,806],{"class":876},[791,1007,879],{"class":805},[791,1009,825],{"class":801},[791,1011,1012],{"class":793,"line":884},[791,1013,860],{"emptyLinePlaceholder":223},[791,1015,1016,1019,1021],{"class":793,"line":889},[791,1017,1018],{"class":876},"useDesignTokensPreset",[791,1020,901],{"class":805},[791,1022,825],{"class":801},[791,1024,1025,1028,1030],{"class":793,"line":906},[791,1026,1027],{"class":876},"useUtilitiesPreset",[791,1029,901],{"class":805},[791,1031,825],{"class":801},[791,1033,1034],{"class":793,"line":922},[791,1035,860],{"emptyLinePlaceholder":223},[791,1037,1038,1040,1042,1044],{"class":793,"line":927},[791,1039,930],{"class":797},[791,1041,933],{"class":797},[791,1043,936],{"class":805},[791,1045,825],{"class":801},[766,1047,1049],{"id":1048},"build-the-component","Build the component",[692,1051,1052,1053,1056,1057,1060],{},"Wrap a set of avatars with the ",[704,1054,1055],{},"avatarGroup()"," class. Give the group and its avatars a matching ",[704,1058,1059],{},"size"," so the overlap is proportional:",[1062,1063,1064,1243,1394],"framework-switcher",{},[1065,1066,1067],"template",{"v-slot:vue":787},[782,1068,1073],{"className":1069,"code":1070,"filename":1071,"language":1072,"meta":787,"style":787},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { avatarGroup, type AvatarGroupProps } from \"virtual:styleframe\";\n\nconst { ...variants } = defineProps\u003CAvatarGroupProps>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"avatarGroup(variants)\">\n        \u003Cslot \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FAvatarGroup.vue","vue",[704,1074,1075,1102,1132,1136,1170,1179,1183,1191,1213,1224,1234],{"__ignoreMap":787},[791,1076,1077,1080,1084,1087,1090,1092,1095,1097,1099],{"class":793,"line":794},[791,1078,1079],{"class":801},"\u003C",[791,1081,1083],{"class":1082},"swJcz","script",[791,1085,1086],{"class":866}," setup",[791,1088,1089],{"class":866}," lang",[791,1091,873],{"class":801},[791,1093,1094],{"class":801},"\"",[791,1096,786],{"class":818},[791,1098,1094],{"class":801},[791,1100,1101],{"class":801},">\n",[791,1103,1104,1106,1108,1111,1113,1116,1119,1121,1123,1126,1128,1130],{"class":793,"line":828},[791,1105,798],{"class":797},[791,1107,802],{"class":801},[791,1109,1110],{"class":805}," avatarGroup",[791,1112,838],{"class":801},[791,1114,1115],{"class":797}," type",[791,1117,1118],{"class":805}," AvatarGroupProps",[791,1120,809],{"class":801},[791,1122,812],{"class":797},[791,1124,1125],{"class":801}," \"",[791,1127,819],{"class":818},[791,1129,1094],{"class":801},[791,1131,825],{"class":801},[791,1133,1134],{"class":793,"line":857},[791,1135,860],{"emptyLinePlaceholder":223},[791,1137,1138,1140,1142,1145,1148,1151,1154,1157,1159,1163,1166,1168],{"class":793,"line":863},[791,1139,867],{"class":866},[791,1141,802],{"class":801},[791,1143,1144],{"class":801}," ...",[791,1146,1147],{"class":805},"variants ",[791,1149,1150],{"class":801},"}",[791,1152,1153],{"class":801}," =",[791,1155,1156],{"class":876}," defineProps",[791,1158,1079],{"class":801},[791,1160,1162],{"class":1161},"sBMFI","AvatarGroupProps",[791,1164,1165],{"class":801},">",[791,1167,879],{"class":805},[791,1169,825],{"class":801},[791,1171,1172,1175,1177],{"class":793,"line":884},[791,1173,1174],{"class":801},"\u003C\u002F",[791,1176,1083],{"class":1082},[791,1178,1101],{"class":801},[791,1180,1181],{"class":793,"line":889},[791,1182,860],{"emptyLinePlaceholder":223},[791,1184,1185,1187,1189],{"class":793,"line":906},[791,1186,1079],{"class":801},[791,1188,1065],{"class":1082},[791,1190,1101],{"class":801},[791,1192,1193,1196,1199,1202,1204,1206,1209,1211],{"class":793,"line":922},[791,1194,1195],{"class":801},"    \u003C",[791,1197,1198],{"class":1082},"div",[791,1200,1201],{"class":866}," :class",[791,1203,873],{"class":801},[791,1205,1094],{"class":801},[791,1207,1208],{"class":818},"avatarGroup(variants)",[791,1210,1094],{"class":801},[791,1212,1101],{"class":801},[791,1214,1215,1218,1221],{"class":793,"line":927},[791,1216,1217],{"class":801},"        \u003C",[791,1219,1220],{"class":1082},"slot",[791,1222,1223],{"class":801}," \u002F>\n",[791,1225,1227,1230,1232],{"class":793,"line":1226},10,[791,1228,1229],{"class":801},"    \u003C\u002F",[791,1231,1198],{"class":1082},[791,1233,1101],{"class":801},[791,1235,1237,1239,1241],{"class":793,"line":1236},11,[791,1238,1174],{"class":801},[791,1240,1065],{"class":1082},[791,1242,1101],{"class":801},[1065,1244,1245],{"v-slot:react":787},[782,1246,1249],{"className":784,"code":1247,"filename":1248,"language":786,"meta":787,"style":787},"import { avatarGroup, type AvatarGroupProps } from \"virtual:styleframe\";\n\nexport function AvatarGroup({\n    children,\n    ...variants\n}: AvatarGroupProps & { children?: React.ReactNode }) {\n    return \u003Cdiv className={avatarGroup(variants)}>{children}\u003C\u002Fdiv>;\n}\n","src\u002Fcomponents\u002FAvatarGroup.tsx",[704,1250,1251,1277,1281,1294,1303,1311,1344,1389],{"__ignoreMap":787},[791,1252,1253,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1275],{"class":793,"line":794},[791,1254,798],{"class":797},[791,1256,802],{"class":801},[791,1258,1110],{"class":805},[791,1260,838],{"class":801},[791,1262,1115],{"class":797},[791,1264,1118],{"class":805},[791,1266,809],{"class":801},[791,1268,812],{"class":797},[791,1270,1125],{"class":801},[791,1272,819],{"class":818},[791,1274,1094],{"class":801},[791,1276,825],{"class":801},[791,1278,1279],{"class":793,"line":828},[791,1280,860],{"emptyLinePlaceholder":223},[791,1282,1283,1285,1288,1291],{"class":793,"line":857},[791,1284,930],{"class":797},[791,1286,1287],{"class":866}," function",[791,1289,1290],{"class":876}," AvatarGroup",[791,1292,1293],{"class":801},"({\n",[791,1295,1296,1300],{"class":793,"line":863},[791,1297,1299],{"class":1298},"sHdIc","    children",[791,1301,1302],{"class":801},",\n",[791,1304,1305,1308],{"class":793,"line":884},[791,1306,1307],{"class":801},"    ...",[791,1309,1310],{"class":1298},"variants\n",[791,1312,1313,1316,1318,1321,1323,1326,1329,1332,1335,1338,1341],{"class":793,"line":889},[791,1314,1315],{"class":801},"}:",[791,1317,1118],{"class":1161},[791,1319,1320],{"class":801}," &",[791,1322,802],{"class":801},[791,1324,1325],{"class":1082}," children",[791,1327,1328],{"class":801},"?:",[791,1330,1331],{"class":1161}," React",[791,1333,1334],{"class":801},".",[791,1336,1337],{"class":1161},"ReactNode",[791,1339,1340],{"class":801}," })",[791,1342,1343],{"class":801}," {\n",[791,1345,1346,1349,1352,1354,1357,1359,1362,1365,1368,1371,1374,1376,1378,1381,1384,1386],{"class":793,"line":906},[791,1347,1348],{"class":797},"    return",[791,1350,1351],{"class":1082}," \u003C",[791,1353,1198],{"class":1161},[791,1355,1356],{"class":1161}," className",[791,1358,873],{"class":1082},[791,1360,1361],{"class":801},"{",[791,1363,1364],{"class":1082},"avatarGroup",[791,1366,1367],{"class":801},"(",[791,1369,1370],{"class":1298},"variants",[791,1372,1373],{"class":801},")}",[791,1375,1165],{"class":1082},[791,1377,1361],{"class":801},[791,1379,1380],{"class":805},"children",[791,1382,1383],{"class":801},"}\u003C\u002F",[791,1385,1198],{"class":805},[791,1387,1388],{"class":801},">;\n",[791,1390,1391],{"class":793,"line":922},[791,1392,1393],{"class":801},"}\n",[1065,1395,1396,1404],{"v-slot:other":787},[692,1397,694,1398,1400,1401,1403],{},[704,1399,1055],{}," runtime returns a class string. Wrap ",[704,1402,775],{}," children with it:",[782,1405,1410],{"className":1406,"code":1407,"filename":1408,"language":1409,"meta":787,"style":787},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"avatar-group -md ...\">\n    \u003Cspan class=\"avatar ...\">\u003Cimg src=\"\u002Fusers\u002Fada.jpg\" alt=\"Ada Lovelace\" \u002F>\u003C\u002Fspan>\n    \u003Cspan class=\"avatar ...\">\u003Cimg src=\"\u002Fusers\u002Falan.jpg\" alt=\"Alan Turing\" \u002F>\u003C\u002Fspan>\n    \u003Cspan class=\"avatar ...\">+3\u003C\u002Fspan>\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Favatar-group.html","html",[704,1411,1412,1432,1486,1534,1561],{"__ignoreMap":787},[791,1413,1414,1416,1418,1421,1423,1425,1428,1430],{"class":793,"line":794},[791,1415,1079],{"class":801},[791,1417,1198],{"class":1082},[791,1419,1420],{"class":866}," class",[791,1422,873],{"class":801},[791,1424,1094],{"class":801},[791,1426,1427],{"class":818},"avatar-group -md ...",[791,1429,1094],{"class":801},[791,1431,1101],{"class":801},[791,1433,1434,1436,1438,1440,1442,1444,1447,1449,1452,1455,1458,1460,1462,1465,1467,1470,1472,1474,1477,1479,1482,1484],{"class":793,"line":828},[791,1435,1195],{"class":801},[791,1437,791],{"class":1082},[791,1439,1420],{"class":866},[791,1441,873],{"class":801},[791,1443,1094],{"class":801},[791,1445,1446],{"class":818},"avatar ...",[791,1448,1094],{"class":801},[791,1450,1451],{"class":801},">\u003C",[791,1453,1454],{"class":1082},"img",[791,1456,1457],{"class":866}," src",[791,1459,873],{"class":801},[791,1461,1094],{"class":801},[791,1463,1464],{"class":818},"\u002Fusers\u002Fada.jpg",[791,1466,1094],{"class":801},[791,1468,1469],{"class":866}," alt",[791,1471,873],{"class":801},[791,1473,1094],{"class":801},[791,1475,1476],{"class":818},"Ada Lovelace",[791,1478,1094],{"class":801},[791,1480,1481],{"class":801}," \u002F>\u003C\u002F",[791,1483,791],{"class":1082},[791,1485,1101],{"class":801},[791,1487,1488,1490,1492,1494,1496,1498,1500,1502,1504,1506,1508,1510,1512,1515,1517,1519,1521,1523,1526,1528,1530,1532],{"class":793,"line":857},[791,1489,1195],{"class":801},[791,1491,791],{"class":1082},[791,1493,1420],{"class":866},[791,1495,873],{"class":801},[791,1497,1094],{"class":801},[791,1499,1446],{"class":818},[791,1501,1094],{"class":801},[791,1503,1451],{"class":801},[791,1505,1454],{"class":1082},[791,1507,1457],{"class":866},[791,1509,873],{"class":801},[791,1511,1094],{"class":801},[791,1513,1514],{"class":818},"\u002Fusers\u002Falan.jpg",[791,1516,1094],{"class":801},[791,1518,1469],{"class":866},[791,1520,873],{"class":801},[791,1522,1094],{"class":801},[791,1524,1525],{"class":818},"Alan Turing",[791,1527,1094],{"class":801},[791,1529,1481],{"class":801},[791,1531,791],{"class":1082},[791,1533,1101],{"class":801},[791,1535,1536,1538,1540,1542,1544,1546,1548,1550,1552,1555,1557,1559],{"class":793,"line":863},[791,1537,1195],{"class":801},[791,1539,791],{"class":1082},[791,1541,1420],{"class":866},[791,1543,873],{"class":801},[791,1545,1094],{"class":801},[791,1547,1446],{"class":818},[791,1549,1094],{"class":801},[791,1551,1165],{"class":801},[791,1553,1554],{"class":805},"+3",[791,1556,1174],{"class":801},[791,1558,791],{"class":1082},[791,1560,1101],{"class":801},[791,1562,1563,1565,1567],{"class":793,"line":884},[791,1564,1174],{"class":801},[791,1566,1198],{"class":1082},[791,1568,1101],{"class":801},[766,1570,1572],{"id":1571},"see-it-in-action","See it in action",[1574,1575],"story-preview",{"story":1576,":panel":1577},"theme-recipes-layout-avatar-group--default","true",[688,1579,1581],{"id":1580},"sizes","Sizes",[692,1583,1584,1585,1587],{},"The group's ",[704,1586,1059],{}," controls the overlap amount and should match the size of the avatars inside it. Larger avatars overlap by a larger margin.",[1574,1589],{"story":1590,":height":1591},"theme-recipes-layout-avatar-group--all-sizes","360",[1593,1594,1595,1608],"table",{},[1596,1597,1598],"thead",{},[1599,1600,1601,1605],"tr",{},[1602,1603,1604],"th",{},"Size",[1602,1606,1607],{},"Overlap",[1609,1610,1611,1624,1636,1648,1660],"tbody",{},[1599,1612,1613,1619],{},[1614,1615,1616],"td",{},[704,1617,1618],{},"xs",[1614,1620,1621],{},[704,1622,1623],{},"-0.375rem",[1599,1625,1626,1631],{},[1614,1627,1628],{},[704,1629,1630],{},"sm",[1614,1632,1633],{},[704,1634,1635],{},"-0.5rem",[1599,1637,1638,1643],{},[1614,1639,1640],{},[704,1641,1642],{},"md",[1614,1644,1645],{},[704,1646,1647],{},"-0.625rem",[1599,1649,1650,1655],{},[1614,1651,1652],{},[704,1653,1654],{},"lg",[1614,1656,1657],{},[704,1658,1659],{},"-0.75rem",[1599,1661,1662,1667],{},[1614,1663,1664],{},[704,1665,1666],{},"xl",[1614,1668,1669],{},[704,1670,1671],{},"-1rem",[688,1673,1675],{"id":1674},"overflow-count","Overflow count",[692,1677,1678,1679,1681],{},"When there are more members than you want to show, render a trailing \"+N\" avatar to summarize the rest. It is just another ",[704,1680,775],{}," (neutral, soft) inside the group, so it inherits the ring and overlap automatically.",[1574,1683],{"story":1684,":panel":1577},"theme-recipes-layout-avatar-group--with-overflow-count",[782,1686,1689],{"className":1069,"code":1687,"filename":1688,"language":1072,"meta":787,"style":787},"\u003Cdiv :class=\"avatarGroup({ size: 'md' })\">\n    \u003Cspan :class=\"avatar({ size: 'md' })\">\u003Cimg src=\"\u002Fusers\u002Fada.jpg\" alt=\"Ada\" \u002F>\u003C\u002Fspan>\n    \u003Cspan :class=\"avatar({ size: 'md' })\">\u003Cimg src=\"\u002Fusers\u002Falan.jpg\" alt=\"Alan\" \u002F>\u003C\u002Fspan>\n    \u003Cspan :class=\"avatar({ size: 'md', color: 'neutral', variant: 'soft' })\">+3\u003C\u002Fspan>\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002FMemberStack.vue",[704,1690,1691,1734,1739,1744,1749],{"__ignoreMap":787},[791,1692,1693,1695,1697,1700,1703,1705,1707,1709,1711,1713,1716,1719,1721,1723,1725,1727,1730,1732],{"class":793,"line":794},[791,1694,1079],{"class":801},[791,1696,1198],{"class":1082},[791,1698,1699],{"class":801}," :",[791,1701,1702],{"class":866},"class",[791,1704,873],{"class":801},[791,1706,1094],{"class":801},[791,1708,1364],{"class":876},[791,1710,1367],{"class":805},[791,1712,1361],{"class":801},[791,1714,1715],{"class":1082}," size",[791,1717,1718],{"class":801},":",[791,1720,815],{"class":801},[791,1722,1642],{"class":818},[791,1724,822],{"class":801},[791,1726,809],{"class":801},[791,1728,1729],{"class":805},")",[791,1731,1094],{"class":801},[791,1733,1101],{"class":801},[791,1735,1736],{"class":793,"line":828},[791,1737,1738],{"class":805},"    \u003Cspan :class=\"avatar({ size: 'md' })\">\u003Cimg src=\"\u002Fusers\u002Fada.jpg\" alt=\"Ada\" \u002F>\u003C\u002Fspan>\n",[791,1740,1741],{"class":793,"line":857},[791,1742,1743],{"class":805},"    \u003Cspan :class=\"avatar({ size: 'md' })\">\u003Cimg src=\"\u002Fusers\u002Falan.jpg\" alt=\"Alan\" \u002F>\u003C\u002Fspan>\n",[791,1745,1746],{"class":793,"line":863},[791,1747,1748],{"class":805},"    \u003Cspan :class=\"avatar({ size: 'md', color: 'neutral', variant: 'soft' })\">+3\u003C\u002Fspan>\n",[791,1750,1751,1753,1755],{"class":793,"line":884},[791,1752,1174],{"class":801},[791,1754,1198],{"class":1082},[791,1756,1101],{"class":801},[688,1758,568],{"id":1759},"accessibility",[730,1761,1762,1776,1785],{},[733,1763,1764,1767,1768,1771,1772,1775],{},[696,1765,1766],{},"Label the group"," with ",[704,1769,1770],{},"aria-label"," (e.g. ",[704,1773,1774],{},"aria-label=\"Project members\"",") so its purpose is announced.",[733,1777,1778,1784],{},[696,1779,1780,1781],{},"Keep each avatar's ",[704,1782,1783],{},"alt"," meaningful — the names are the content; the stacking is purely visual.",[733,1786,1787,1790,1791,1794],{},[696,1788,1789],{},"Describe the overflow"," in text (e.g. ",[704,1792,1793],{},"aria-label=\"3 more members\"",") rather than relying on the \"+N\" visual alone.",[688,1796,1798],{"id":1797},"customization","Customization",[1800,1801,1803],"h3",{"id":1802},"overriding-defaults","Overriding Defaults",[782,1805,1807],{"className":784,"code":1806,"filename":780,"language":786,"meta":787,"style":787},"const avatarGroup = useAvatarGroupRecipe(s, {\n    defaultVariants: { size: 'lg' },\n});\n",[704,1808,1809,1826,1848],{"__ignoreMap":787},[791,1810,1811,1813,1815,1817,1819,1822,1824],{"class":793,"line":794},[791,1812,867],{"class":866},[791,1814,911],{"class":805},[791,1816,873],{"class":801},[791,1818,841],{"class":876},[791,1820,1821],{"class":805},"(s",[791,1823,838],{"class":801},[791,1825,1343],{"class":801},[791,1827,1828,1831,1833,1835,1837,1839,1841,1843,1845],{"class":793,"line":828},[791,1829,1830],{"class":1082},"    defaultVariants",[791,1832,1718],{"class":801},[791,1834,802],{"class":801},[791,1836,1715],{"class":1082},[791,1838,1718],{"class":801},[791,1840,815],{"class":801},[791,1842,1654],{"class":818},[791,1844,822],{"class":801},[791,1846,1847],{"class":801}," },\n",[791,1849,1850,1852,1854],{"class":793,"line":857},[791,1851,1150],{"class":801},[791,1853,1729],{"class":805},[791,1855,825],{"class":801},[1800,1857,1859],{"id":1858},"filtering-variants","Filtering Variants",[782,1861,1863],{"className":784,"code":1862,"filename":780,"language":786,"meta":787,"style":787},"const avatarGroup = useAvatarGroupRecipe(s, {\n    filter: {\n        size: ['sm', 'md', 'lg'],\n    },\n});\n",[704,1864,1865,1881,1890,1927,1932],{"__ignoreMap":787},[791,1866,1867,1869,1871,1873,1875,1877,1879],{"class":793,"line":794},[791,1868,867],{"class":866},[791,1870,911],{"class":805},[791,1872,873],{"class":801},[791,1874,841],{"class":876},[791,1876,1821],{"class":805},[791,1878,838],{"class":801},[791,1880,1343],{"class":801},[791,1882,1883,1886,1888],{"class":793,"line":828},[791,1884,1885],{"class":1082},"    filter",[791,1887,1718],{"class":801},[791,1889,1343],{"class":801},[791,1891,1892,1895,1897,1900,1902,1904,1906,1908,1910,1912,1914,1916,1918,1920,1922,1925],{"class":793,"line":857},[791,1893,1894],{"class":1082},"        size",[791,1896,1718],{"class":801},[791,1898,1899],{"class":805}," [",[791,1901,822],{"class":801},[791,1903,1630],{"class":818},[791,1905,822],{"class":801},[791,1907,838],{"class":801},[791,1909,815],{"class":801},[791,1911,1642],{"class":818},[791,1913,822],{"class":801},[791,1915,838],{"class":801},[791,1917,815],{"class":801},[791,1919,1654],{"class":818},[791,1921,822],{"class":801},[791,1923,1924],{"class":805},"]",[791,1926,1302],{"class":801},[791,1928,1929],{"class":793,"line":863},[791,1930,1931],{"class":801},"    },\n",[791,1933,1934,1936,1938],{"class":793,"line":884},[791,1935,1150],{"class":801},[791,1937,1729],{"class":805},[791,1939,825],{"class":801},[1941,1942,1943,1946,1947,1950],"note",{},[696,1944,1945],{},"Good to know:"," The ring color is ",[704,1948,1949],{},"@color.background",", so overlapping avatars are separated by a cut-out that adapts to light and dark mode automatically.",[688,1952,73],{"id":1953},"api-reference",[1800,1955,1957],{"id":1956},"useavatargrouprecipes-options",[704,1958,1959],{},"useAvatarGroupRecipe(s, options?)",[692,1961,1962,1963,1965],{},"Creates the avatar group recipe. Registers selectors that add a ring to each ",[704,1964,717],{},", lift the hovered avatar, and apply a per-size negative margin for the overlap.",[692,1967,1968],{},[696,1969,1970],{},"Parameters:",[1593,1972,1973,1986],{},[1596,1974,1975],{},[1599,1976,1977,1980,1983],{},[1602,1978,1979],{},"Parameter",[1602,1981,1982],{},"Type",[1602,1984,1985],{},"Description",[1609,1987,1988,2003,2018,2033,2048,2063],{},[1599,1989,1990,1995,2000],{},[1614,1991,1992],{},[704,1993,1994],{},"s",[1614,1996,1997],{},[704,1998,1999],{},"Styleframe",[1614,2001,2002],{},"The Styleframe instance",[1599,2004,2005,2010,2015],{},[1614,2006,2007],{},[704,2008,2009],{},"options",[1614,2011,2012],{},[704,2013,2014],{},"DeepPartial\u003CRecipeConfig>",[1614,2016,2017],{},"Optional overrides for the recipe configuration",[1599,2019,2020,2025,2030],{},[1614,2021,2022],{},[704,2023,2024],{},"options.base",[1614,2026,2027],{},[704,2028,2029],{},"VariantDeclarationsBlock",[1614,2031,2032],{},"Custom base styles",[1599,2034,2035,2040,2045],{},[1614,2036,2037],{},[704,2038,2039],{},"options.variants",[1614,2041,2042],{},[704,2043,2044],{},"Variants",[1614,2046,2047],{},"Custom variant definitions",[1599,2049,2050,2055,2060],{},[1614,2051,2052],{},[704,2053,2054],{},"options.defaultVariants",[1614,2056,2057],{},[704,2058,2059],{},"Record\u003Ckeyof Variants, string>",[1614,2061,2062],{},"Default variant values",[1599,2064,2065,2070,2075],{},[1614,2066,2067],{},[704,2068,2069],{},"options.filter",[1614,2071,2072],{},[704,2073,2074],{},"Record\u003Cstring, string[]>",[1614,2076,2077],{},"Limit which variant values are generated",[692,2079,2080],{},[696,2081,2082],{},"Variants:",[1593,2084,2085,2098],{},[1596,2086,2087],{},[1599,2088,2089,2092,2095],{},[1602,2090,2091],{},"Variant",[1602,2093,2094],{},"Options",[1602,2096,2097],{},"Default",[1609,2099,2100],{},[1599,2101,2102,2106,2119],{},[1614,2103,2104],{},[704,2105,1059],{},[1614,2107,2108,2110,2111,2110,2113,2110,2115,2110,2117],{},[704,2109,1618],{},", ",[704,2112,1630],{},[704,2114,1642],{},[704,2116,1654],{},[704,2118,1666],{},[1614,2120,2121],{},[704,2122,1642],{},[692,2124,2125],{},[700,2126,2127],{"href":132},"Learn more about recipes ->",[688,2129,2131],{"id":2130},"best-practices","Best Practices",[730,2133,2134,2143,2149,2155],{},[733,2135,2136,2142],{},[696,2137,2138,2139,2141],{},"Match the group ",[704,2140,1059],{}," to the avatars"," inside it so the overlap is proportional.",[733,2144,2145,2148],{},[696,2146,2147],{},"Cap the stack"," at a handful of avatars and use the \"+N\" overflow for the rest.",[733,2150,2151,2154],{},[696,2152,2153],{},"Order by relevance",": the first avatar sits on top of the stack visually — lead with the most important member.",[733,2156,2157,2160],{},[696,2158,2159],{},"Use images for distinct people","; the ring keeps overlapping faces legible.",[688,2162,2164],{"id":2163},"faq","FAQ",[2166,2167,2168,2189,2207],"accordion",{},[2169,2170,2173,2174,2177,2178,2181,2182,2185,2186,2188],"accordion-item",{"icon":2171,"label":2172},"i-lucide-circle-help","How does the overlap work?","The group emits a ",[704,2175,2176],{},"-\u003Csize>"," marker class (e.g. ",[704,2179,2180],{},".avatar-group.-md","). A setup selector applies a per-size negative ",[704,2183,2184],{},"margin-left"," to every ",[704,2187,775],{}," except the first, pulling them into an overlapping stack.",[2169,2190,2192,2193,2196,2197,2199,2200,2202,2203,2206],{"icon":2171,"label":2191},"Why does each avatar have a border in a group?","The group adds a ring (",[704,2194,2195],{},"border"," in ",[704,2198,1949],{},") to each ",[704,2201,717],{}," so overlapping edges read as separate. Because the avatar uses ",[704,2204,2205],{},"box-sizing: border-box",", the ring doesn't change the avatar's footprint.",[2169,2208,2210,2211,1767,2214,2217],{"icon":2171,"label":2209},"How do I make the '+N' overflow avatar?","It's just another avatar — render ",[704,2212,2213],{},"avatar({ color: 'neutral', variant: 'soft', size })",[704,2215,2216],{},"+N"," as its content as the last child. It inherits the ring and overlap from the group.",[2219,2220,2221],"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 .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}",{"title":787,"searchDepth":828,"depth":828,"links":2223},[2224,2225,2226,2227,2228,2229,2230,2234,2237,2238],{"id":690,"depth":828,"text":78},{"id":724,"depth":828,"text":725},{"id":759,"depth":828,"text":760},{"id":1580,"depth":828,"text":1581},{"id":1674,"depth":828,"text":1675},{"id":1759,"depth":828,"text":568},{"id":1797,"depth":828,"text":1798,"children":2231},[2232,2233],{"id":1802,"depth":857,"text":1803},{"id":1858,"depth":857,"text":1859},{"id":1953,"depth":828,"text":73,"children":2235},[2236],{"id":1956,"depth":857,"text":1959},{"id":2130,"depth":828,"text":2131},{"id":2163,"depth":828,"text":2164},"A stacked, overlapping set of avatars with a separating ring and an optional \"+N\" overflow count.",null,{},{"icon":7},{"title":531,"description":2239},"n0eFdbHeI5wxD8Di_ot-njARN7nHUgL1vLfMCThInOE",[2246,2248],{"title":527,"path":528,"stem":529,"description":2247,"icon":7,"children":-1},"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.",{"title":535,"path":536,"stem":537,"description":2249,"icon":7,"children":-1},"A structured container component for grouping related content with header, body, and footer sections. Supports multiple colors, visual styles, and sizes through the recipe system.",1781596344288]