[{"data":1,"prerenderedAt":5812},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-progress":682,"-docs-theme-components-progress-surround":5807},{"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":416,"body":684,"description":5801,"extension":2214,"links":5802,"meta":5803,"navigation":5804,"path":417,"seo":5805,"stem":418,"__hash__":5806},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress.md",{"type":685,"value":686,"toc":5769},"minimark",[687,691,713,720,724,727,783,787,3020,3023,3059,3065,3068,3073,3077,3082,3229,3234,3287,3300,3304,3315,3318,3322,3326,3440,3450,3453,3463,3466,3473,3475,3478,3485,3489,3539,3542,3547,3550,3589,3593,3603,3608,3611,3615,3724,3728,3745,3748,3752,3755,3800,3811,3881,3886,3889,3904,4012,4032,4154,4165,4237,4253,4397,4401,4405,4408,4712,4716,4723,4890,4895,4898,4904,4907,4912,5018,5023,5096,5102,5105,5109,5211,5215,5335,5340,5344,5434,5438,5765],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,707,708,712],"p",{},"The ",[696,697,416],"strong",{}," is a visual indicator element used to show the completion status of a task or process. It is composed of two recipe parts: ",[700,701,702],"code",{},"useProgressRecipe()"," for the track container and ",[700,705,706],{},"useProgressBarRecipe()"," for the fill bar. Each composable creates a fully configured ",[709,710,711],"a",{"href":132},"recipe"," with color, size, and orientation options — plus compound variants that handle the color-orientation combinations automatically.",[692,714,715,716,719],{},"The Progress recipes integrate directly with the default ",[709,717,718],{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[688,721,723],{"id":722},"why-use-the-progress-recipe","Why use the Progress recipe?",[692,725,726],{},"The Progress recipe helps you:",[728,729,730,737,743,753,759,765,771,777],"ul",{},[731,732,733,736],"li",{},[696,734,735],{},"Ship faster with sensible defaults",": Get 9 bar colors, 5 sizes, 2 orientations, and 4 indeterminate animations out of the box with two composable calls.",[731,738,739,742],{},[696,740,741],{},"Compose structured layouts",": Two coordinated recipes (track and bar) share size and orientation axes, so the track and fill stay internally consistent.",[731,744,745,748,749,752],{},[696,746,747],{},"Animate without extra CSS",": Indeterminate animation keyframes are registered automatically when you use the bar recipe — no manual ",[700,750,751],{},"@keyframes"," definition needed.",[731,754,755,758],{},[696,756,757],{},"Maintain consistency",": Compound variants ensure every color combination follows the same design rules, including dark mode overrides.",[731,760,761,764],{},[696,762,763],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[731,766,767,770],{},[696,768,769],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, size, orientation, or animation values at compile time.",[731,772,773,776],{},[696,774,775],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[731,778,779,782],{},[696,780,781],{},"Support dark mode",": Background colors adapt automatically between light and dark color schemes.",[688,784,786],{"id":785},"usage","Usage",[788,789,791,796,803,1071,1075,1086,3012,3016],"steps",{"level":790},"4",[792,793,795],"h4",{"id":794},"register-the-recipes","Register the recipes",[692,797,798,799,802],{},"Add the Progress recipes to a local Styleframe instance. The global ",[700,800,801],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[804,805,807,965],"code-tree",{"default-value":806},"src\u002Fcomponents\u002Fprogress.styleframe.ts",[808,809,814],"pre",{"className":810,"code":811,"filename":806,"language":812,"meta":813,"style":813},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useProgressRecipe, useProgressBarRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst progress = useProgressRecipe(s);\nconst progressBar = useProgressBarRecipe(s);\n\nexport default s;\n","ts","",[700,815,816,852,881,887,908,913,930,946,951],{"__ignoreMap":813},[817,818,821,825,829,833,836,839,842,846,849],"span",{"class":819,"line":820},"line",1,[817,822,824],{"class":823},"s7zQu","import",[817,826,828],{"class":827},"sMK4o"," {",[817,830,832],{"class":831},"sTEyZ"," styleframe",[817,834,835],{"class":827}," }",[817,837,838],{"class":823}," from",[817,840,841],{"class":827}," '",[817,843,845],{"class":844},"sfazB","virtual:styleframe",[817,847,848],{"class":827},"'",[817,850,851],{"class":827},";\n",[817,853,855,857,859,862,865,868,870,872,874,877,879],{"class":819,"line":854},2,[817,856,824],{"class":823},[817,858,828],{"class":827},[817,860,861],{"class":831}," useProgressRecipe",[817,863,864],{"class":827},",",[817,866,867],{"class":831}," useProgressBarRecipe",[817,869,835],{"class":827},[817,871,838],{"class":823},[817,873,841],{"class":827},[817,875,876],{"class":844},"@styleframe\u002Ftheme",[817,878,848],{"class":827},[817,880,851],{"class":827},[817,882,884],{"class":819,"line":883},3,[817,885,886],{"emptyLinePlaceholder":223},"\n",[817,888,890,894,897,900,903,906],{"class":819,"line":889},4,[817,891,893],{"class":892},"spNyl","const",[817,895,896],{"class":831}," s ",[817,898,899],{"class":827},"=",[817,901,832],{"class":902},"s2Zo4",[817,904,905],{"class":831},"()",[817,907,851],{"class":827},[817,909,911],{"class":819,"line":910},5,[817,912,886],{"emptyLinePlaceholder":223},[817,914,916,918,921,923,925,928],{"class":819,"line":915},6,[817,917,893],{"class":892},[817,919,920],{"class":831}," progress ",[817,922,899],{"class":827},[817,924,861],{"class":902},[817,926,927],{"class":831},"(s)",[817,929,851],{"class":827},[817,931,933,935,938,940,942,944],{"class":819,"line":932},7,[817,934,893],{"class":892},[817,936,937],{"class":831}," progressBar ",[817,939,899],{"class":827},[817,941,867],{"class":902},[817,943,927],{"class":831},[817,945,851],{"class":827},[817,947,949],{"class":819,"line":948},8,[817,950,886],{"emptyLinePlaceholder":223},[817,952,954,957,960,963],{"class":819,"line":953},9,[817,955,956],{"class":823},"export",[817,958,959],{"class":823}," default",[817,961,962],{"class":831}," s",[817,964,851],{"class":827},[808,966,968],{"className":810,"code":967,"filename":801,"language":812,"meta":813,"style":813},"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,969,970,991,1017,1021,1035,1039,1048,1057,1061],{"__ignoreMap":813},[817,971,972,974,976,978,980,982,984,987,989],{"class":819,"line":820},[817,973,824],{"class":823},[817,975,828],{"class":827},[817,977,832],{"class":831},[817,979,835],{"class":827},[817,981,838],{"class":823},[817,983,841],{"class":827},[817,985,986],{"class":844},"styleframe",[817,988,848],{"class":827},[817,990,851],{"class":827},[817,992,993,995,997,1000,1002,1005,1007,1009,1011,1013,1015],{"class":819,"line":854},[817,994,824],{"class":823},[817,996,828],{"class":827},[817,998,999],{"class":831}," useDesignTokensPreset",[817,1001,864],{"class":827},[817,1003,1004],{"class":831}," useUtilitiesPreset",[817,1006,835],{"class":827},[817,1008,838],{"class":823},[817,1010,841],{"class":827},[817,1012,876],{"class":844},[817,1014,848],{"class":827},[817,1016,851],{"class":827},[817,1018,1019],{"class":819,"line":883},[817,1020,886],{"emptyLinePlaceholder":223},[817,1022,1023,1025,1027,1029,1031,1033],{"class":819,"line":889},[817,1024,893],{"class":892},[817,1026,896],{"class":831},[817,1028,899],{"class":827},[817,1030,832],{"class":902},[817,1032,905],{"class":831},[817,1034,851],{"class":827},[817,1036,1037],{"class":819,"line":910},[817,1038,886],{"emptyLinePlaceholder":223},[817,1040,1041,1044,1046],{"class":819,"line":915},[817,1042,1043],{"class":902},"useDesignTokensPreset",[817,1045,927],{"class":831},[817,1047,851],{"class":827},[817,1049,1050,1053,1055],{"class":819,"line":932},[817,1051,1052],{"class":902},"useUtilitiesPreset",[817,1054,927],{"class":831},[817,1056,851],{"class":827},[817,1058,1059],{"class":819,"line":948},[817,1060,886],{"emptyLinePlaceholder":223},[817,1062,1063,1065,1067,1069],{"class":819,"line":953},[817,1064,956],{"class":823},[817,1066,959],{"class":823},[817,1068,962],{"class":831},[817,1070,851],{"class":827},[792,1072,1074],{"id":1073},"build-the-component","Build the component",[692,1076,1077,1078,1081,1082,1085],{},"Import the ",[700,1079,1080],{},"progress"," and ",[700,1083,1084],{},"progressBar"," runtime functions from the virtual module and pass variant props to compute class names:",[1087,1088,1089,2038,2670],"framework-switcher",{},[1090,1091,1092],"template",{"v-slot:vue":813},[808,1093,1098],{"className":1094,"code":1095,"filename":1096,"language":1097,"meta":813,"style":813},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { progress, progressBar, type ProgressProps, type ProgressBarProps } from \"virtual:styleframe\";\n\nconst props = withDefaults(\n    defineProps\u003CProgressProps & ProgressBarProps & { trackColor?: \"light\" | \"dark\" | \"neutral\"; value?: number | null }>(),\n    { color: \"primary\", trackColor: \"neutral\", value: 0, animation: \"none\" },\n);\n\nconst isIndeterminate = computed(() => props.value == null);\n\nconst trackClasses = computed(() =>\n    progress({ color: props.trackColor, size: props.size, orientation: props.orientation }),\n);\n\nconst barClasses = computed(() =>\n    progressBar({\n        color: props.color,\n        size: props.size,\n        orientation: props.orientation,\n        inverted: props.inverted ? \"true\" : \"false\",\n        animation: isIndeterminate.value && props.animation !== \"none\" ? props.animation : \"none\",\n    }),\n);\n\nconst fillStyle = computed(() => {\n    const clamped = isIndeterminate.value ? 50 : Math.min(100, Math.max(0, props.value!));\n    const prop = props.orientation === \"vertical\" ? \"height\" : \"width\";\n    return { [prop]: `${clamped}%` };\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv\n        :class=\"trackClasses\"\n        role=\"progressbar\"\n        :aria-valuenow=\"value ?? undefined\"\n        :aria-valuemin=\"0\"\n        :aria-valuemax=\"100\"\n        :aria-orientation=\"orientation\"\n    >\n        \u003Cdiv :class=\"barClasses\" :style=\"fillStyle\" \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FProgress.vue","vue",[700,1099,1100,1127,1149,1190,1194,1209,1285,1342,1349,1353,1391,1396,1415,1472,1479,1484,1502,1513,1530,1546,1563,1600,1653,1663,1670,1675,1696,1765,1811,1847,1856,1866,1871,1880,1889,1905,1920,1935,1949,1963,1977,1983,2019,2029],{"__ignoreMap":813},[817,1101,1102,1105,1109,1112,1115,1117,1120,1122,1124],{"class":819,"line":820},[817,1103,1104],{"class":827},"\u003C",[817,1106,1108],{"class":1107},"swJcz","script",[817,1110,1111],{"class":892}," setup",[817,1113,1114],{"class":892}," lang",[817,1116,899],{"class":827},[817,1118,1119],{"class":827},"\"",[817,1121,812],{"class":844},[817,1123,1119],{"class":827},[817,1125,1126],{"class":827},">\n",[817,1128,1129,1131,1133,1136,1138,1140,1143,1145,1147],{"class":819,"line":854},[817,1130,824],{"class":823},[817,1132,828],{"class":827},[817,1134,1135],{"class":831}," computed",[817,1137,835],{"class":827},[817,1139,838],{"class":823},[817,1141,1142],{"class":827}," \"",[817,1144,1097],{"class":844},[817,1146,1119],{"class":827},[817,1148,851],{"class":827},[817,1150,1151,1153,1155,1158,1160,1163,1165,1168,1171,1173,1175,1178,1180,1182,1184,1186,1188],{"class":819,"line":883},[817,1152,824],{"class":823},[817,1154,828],{"class":827},[817,1156,1157],{"class":831}," progress",[817,1159,864],{"class":827},[817,1161,1162],{"class":831}," progressBar",[817,1164,864],{"class":827},[817,1166,1167],{"class":823}," type",[817,1169,1170],{"class":831}," ProgressProps",[817,1172,864],{"class":827},[817,1174,1167],{"class":823},[817,1176,1177],{"class":831}," ProgressBarProps",[817,1179,835],{"class":827},[817,1181,838],{"class":823},[817,1183,1142],{"class":827},[817,1185,845],{"class":844},[817,1187,1119],{"class":827},[817,1189,851],{"class":827},[817,1191,1192],{"class":819,"line":889},[817,1193,886],{"emptyLinePlaceholder":223},[817,1195,1196,1198,1201,1203,1206],{"class":819,"line":910},[817,1197,893],{"class":892},[817,1199,1200],{"class":831}," props ",[817,1202,899],{"class":827},[817,1204,1205],{"class":902}," withDefaults",[817,1207,1208],{"class":831},"(\n",[817,1210,1211,1214,1216,1220,1223,1225,1227,1229,1232,1235,1237,1240,1242,1245,1247,1250,1252,1254,1256,1259,1261,1264,1267,1269,1272,1274,1277,1280,1282],{"class":819,"line":915},[817,1212,1213],{"class":902},"    defineProps",[817,1215,1104],{"class":827},[817,1217,1219],{"class":1218},"sBMFI","ProgressProps",[817,1221,1222],{"class":827}," &",[817,1224,1177],{"class":1218},[817,1226,1222],{"class":827},[817,1228,828],{"class":827},[817,1230,1231],{"class":1107}," trackColor",[817,1233,1234],{"class":827},"?:",[817,1236,1142],{"class":827},[817,1238,1239],{"class":844},"light",[817,1241,1119],{"class":827},[817,1243,1244],{"class":827}," |",[817,1246,1142],{"class":827},[817,1248,1249],{"class":844},"dark",[817,1251,1119],{"class":827},[817,1253,1244],{"class":827},[817,1255,1142],{"class":827},[817,1257,1258],{"class":844},"neutral",[817,1260,1119],{"class":827},[817,1262,1263],{"class":827},";",[817,1265,1266],{"class":1107}," value",[817,1268,1234],{"class":827},[817,1270,1271],{"class":1218}," number",[817,1273,1244],{"class":827},[817,1275,1276],{"class":1218}," null",[817,1278,1279],{"class":827}," }>",[817,1281,905],{"class":831},[817,1283,1284],{"class":827},",\n",[817,1286,1287,1290,1293,1296,1298,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319,1321,1325,1327,1330,1332,1334,1337,1339],{"class":819,"line":932},[817,1288,1289],{"class":827},"    {",[817,1291,1292],{"class":1107}," color",[817,1294,1295],{"class":827},":",[817,1297,1142],{"class":827},[817,1299,1300],{"class":844},"primary",[817,1302,1119],{"class":827},[817,1304,864],{"class":827},[817,1306,1231],{"class":1107},[817,1308,1295],{"class":827},[817,1310,1142],{"class":827},[817,1312,1258],{"class":844},[817,1314,1119],{"class":827},[817,1316,864],{"class":827},[817,1318,1266],{"class":1107},[817,1320,1295],{"class":827},[817,1322,1324],{"class":1323},"sbssI"," 0",[817,1326,864],{"class":827},[817,1328,1329],{"class":1107}," animation",[817,1331,1295],{"class":827},[817,1333,1142],{"class":827},[817,1335,1336],{"class":844},"none",[817,1338,1119],{"class":827},[817,1340,1341],{"class":827}," },\n",[817,1343,1344,1347],{"class":819,"line":948},[817,1345,1346],{"class":831},")",[817,1348,851],{"class":827},[817,1350,1351],{"class":819,"line":953},[817,1352,886],{"emptyLinePlaceholder":223},[817,1354,1356,1358,1361,1363,1365,1368,1370,1373,1376,1379,1382,1385,1387,1389],{"class":819,"line":1355},10,[817,1357,893],{"class":892},[817,1359,1360],{"class":831}," isIndeterminate ",[817,1362,899],{"class":827},[817,1364,1135],{"class":902},[817,1366,1367],{"class":831},"(",[817,1369,905],{"class":827},[817,1371,1372],{"class":892}," =>",[817,1374,1375],{"class":831}," props",[817,1377,1378],{"class":827},".",[817,1380,1381],{"class":831},"value ",[817,1383,1384],{"class":827},"==",[817,1386,1276],{"class":827},[817,1388,1346],{"class":831},[817,1390,851],{"class":827},[817,1392,1394],{"class":819,"line":1393},11,[817,1395,886],{"emptyLinePlaceholder":223},[817,1397,1399,1401,1404,1406,1408,1410,1412],{"class":819,"line":1398},12,[817,1400,893],{"class":892},[817,1402,1403],{"class":831}," trackClasses ",[817,1405,899],{"class":827},[817,1407,1135],{"class":902},[817,1409,1367],{"class":831},[817,1411,905],{"class":827},[817,1413,1414],{"class":892}," =>\n",[817,1416,1418,1421,1423,1426,1428,1430,1432,1434,1437,1439,1442,1444,1446,1448,1451,1453,1456,1458,1460,1462,1465,1468,1470],{"class":819,"line":1417},13,[817,1419,1420],{"class":902},"    progress",[817,1422,1367],{"class":831},[817,1424,1425],{"class":827},"{",[817,1427,1292],{"class":1107},[817,1429,1295],{"class":827},[817,1431,1375],{"class":831},[817,1433,1378],{"class":827},[817,1435,1436],{"class":831},"trackColor",[817,1438,864],{"class":827},[817,1440,1441],{"class":1107}," size",[817,1443,1295],{"class":827},[817,1445,1375],{"class":831},[817,1447,1378],{"class":827},[817,1449,1450],{"class":831},"size",[817,1452,864],{"class":827},[817,1454,1455],{"class":1107}," orientation",[817,1457,1295],{"class":827},[817,1459,1375],{"class":831},[817,1461,1378],{"class":827},[817,1463,1464],{"class":831},"orientation ",[817,1466,1467],{"class":827},"}",[817,1469,1346],{"class":831},[817,1471,1284],{"class":827},[817,1473,1475,1477],{"class":819,"line":1474},14,[817,1476,1346],{"class":831},[817,1478,851],{"class":827},[817,1480,1482],{"class":819,"line":1481},15,[817,1483,886],{"emptyLinePlaceholder":223},[817,1485,1487,1489,1492,1494,1496,1498,1500],{"class":819,"line":1486},16,[817,1488,893],{"class":892},[817,1490,1491],{"class":831}," barClasses ",[817,1493,899],{"class":827},[817,1495,1135],{"class":902},[817,1497,1367],{"class":831},[817,1499,905],{"class":827},[817,1501,1414],{"class":892},[817,1503,1505,1508,1510],{"class":819,"line":1504},17,[817,1506,1507],{"class":902},"    progressBar",[817,1509,1367],{"class":831},[817,1511,1512],{"class":827},"{\n",[817,1514,1516,1519,1521,1523,1525,1528],{"class":819,"line":1515},18,[817,1517,1518],{"class":1107},"        color",[817,1520,1295],{"class":827},[817,1522,1375],{"class":831},[817,1524,1378],{"class":827},[817,1526,1527],{"class":831},"color",[817,1529,1284],{"class":827},[817,1531,1533,1536,1538,1540,1542,1544],{"class":819,"line":1532},19,[817,1534,1535],{"class":1107},"        size",[817,1537,1295],{"class":827},[817,1539,1375],{"class":831},[817,1541,1378],{"class":827},[817,1543,1450],{"class":831},[817,1545,1284],{"class":827},[817,1547,1549,1552,1554,1556,1558,1561],{"class":819,"line":1548},20,[817,1550,1551],{"class":1107},"        orientation",[817,1553,1295],{"class":827},[817,1555,1375],{"class":831},[817,1557,1378],{"class":827},[817,1559,1560],{"class":831},"orientation",[817,1562,1284],{"class":827},[817,1564,1566,1569,1571,1573,1575,1578,1581,1583,1586,1588,1591,1593,1596,1598],{"class":819,"line":1565},21,[817,1567,1568],{"class":1107},"        inverted",[817,1570,1295],{"class":827},[817,1572,1375],{"class":831},[817,1574,1378],{"class":827},[817,1576,1577],{"class":831},"inverted ",[817,1579,1580],{"class":827},"?",[817,1582,1142],{"class":827},[817,1584,1585],{"class":844},"true",[817,1587,1119],{"class":827},[817,1589,1590],{"class":827}," :",[817,1592,1142],{"class":827},[817,1594,1595],{"class":844},"false",[817,1597,1119],{"class":827},[817,1599,1284],{"class":827},[817,1601,1603,1606,1608,1611,1613,1615,1618,1620,1622,1625,1628,1630,1632,1634,1637,1639,1641,1643,1645,1647,1649,1651],{"class":819,"line":1602},22,[817,1604,1605],{"class":1107},"        animation",[817,1607,1295],{"class":827},[817,1609,1610],{"class":831}," isIndeterminate",[817,1612,1378],{"class":827},[817,1614,1381],{"class":831},[817,1616,1617],{"class":827},"&&",[817,1619,1375],{"class":831},[817,1621,1378],{"class":827},[817,1623,1624],{"class":831},"animation ",[817,1626,1627],{"class":827},"!==",[817,1629,1142],{"class":827},[817,1631,1336],{"class":844},[817,1633,1119],{"class":827},[817,1635,1636],{"class":827}," ?",[817,1638,1375],{"class":831},[817,1640,1378],{"class":827},[817,1642,1624],{"class":831},[817,1644,1295],{"class":827},[817,1646,1142],{"class":827},[817,1648,1336],{"class":844},[817,1650,1119],{"class":827},[817,1652,1284],{"class":827},[817,1654,1656,1659,1661],{"class":819,"line":1655},23,[817,1657,1658],{"class":827},"    }",[817,1660,1346],{"class":831},[817,1662,1284],{"class":827},[817,1664,1666,1668],{"class":819,"line":1665},24,[817,1667,1346],{"class":831},[817,1669,851],{"class":827},[817,1671,1673],{"class":819,"line":1672},25,[817,1674,886],{"emptyLinePlaceholder":223},[817,1676,1678,1680,1683,1685,1687,1689,1691,1693],{"class":819,"line":1677},26,[817,1679,893],{"class":892},[817,1681,1682],{"class":831}," fillStyle ",[817,1684,899],{"class":827},[817,1686,1135],{"class":902},[817,1688,1367],{"class":831},[817,1690,905],{"class":827},[817,1692,1372],{"class":892},[817,1694,1695],{"class":827}," {\n",[817,1697,1699,1702,1705,1708,1710,1712,1715,1717,1720,1722,1725,1727,1730,1732,1735,1737,1739,1741,1744,1746,1749,1751,1753,1755,1757,1760,1763],{"class":819,"line":1698},27,[817,1700,1701],{"class":892},"    const",[817,1703,1704],{"class":831}," clamped",[817,1706,1707],{"class":827}," =",[817,1709,1610],{"class":831},[817,1711,1378],{"class":827},[817,1713,1714],{"class":831},"value",[817,1716,1636],{"class":827},[817,1718,1719],{"class":1323}," 50",[817,1721,1590],{"class":827},[817,1723,1724],{"class":831}," Math",[817,1726,1378],{"class":827},[817,1728,1729],{"class":902},"min",[817,1731,1367],{"class":1107},[817,1733,1734],{"class":1323},"100",[817,1736,864],{"class":827},[817,1738,1724],{"class":831},[817,1740,1378],{"class":827},[817,1742,1743],{"class":902},"max",[817,1745,1367],{"class":1107},[817,1747,1748],{"class":1323},"0",[817,1750,864],{"class":827},[817,1752,1375],{"class":831},[817,1754,1378],{"class":827},[817,1756,1714],{"class":831},[817,1758,1759],{"class":827},"!",[817,1761,1762],{"class":1107},"))",[817,1764,851],{"class":827},[817,1766,1768,1770,1773,1775,1777,1779,1781,1784,1786,1789,1791,1793,1795,1798,1800,1802,1804,1807,1809],{"class":819,"line":1767},28,[817,1769,1701],{"class":892},[817,1771,1772],{"class":831}," prop",[817,1774,1707],{"class":827},[817,1776,1375],{"class":831},[817,1778,1378],{"class":827},[817,1780,1560],{"class":831},[817,1782,1783],{"class":827}," ===",[817,1785,1142],{"class":827},[817,1787,1788],{"class":844},"vertical",[817,1790,1119],{"class":827},[817,1792,1636],{"class":827},[817,1794,1142],{"class":827},[817,1796,1797],{"class":844},"height",[817,1799,1119],{"class":827},[817,1801,1590],{"class":827},[817,1803,1142],{"class":827},[817,1805,1806],{"class":844},"width",[817,1808,1119],{"class":827},[817,1810,851],{"class":827},[817,1812,1814,1817,1819,1822,1825,1828,1830,1833,1836,1838,1841,1844],{"class":819,"line":1813},29,[817,1815,1816],{"class":823},"    return",[817,1818,828],{"class":827},[817,1820,1821],{"class":1107}," [",[817,1823,1824],{"class":831},"prop",[817,1826,1827],{"class":1107},"]",[817,1829,1295],{"class":827},[817,1831,1832],{"class":827}," `${",[817,1834,1835],{"class":831},"clamped",[817,1837,1467],{"class":827},[817,1839,1840],{"class":844},"%",[817,1842,1843],{"class":827},"`",[817,1845,1846],{"class":827}," };\n",[817,1848,1850,1852,1854],{"class":819,"line":1849},30,[817,1851,1467],{"class":827},[817,1853,1346],{"class":831},[817,1855,851],{"class":827},[817,1857,1859,1862,1864],{"class":819,"line":1858},31,[817,1860,1861],{"class":827},"\u003C\u002F",[817,1863,1108],{"class":1107},[817,1865,1126],{"class":827},[817,1867,1869],{"class":819,"line":1868},32,[817,1870,886],{"emptyLinePlaceholder":223},[817,1872,1874,1876,1878],{"class":819,"line":1873},33,[817,1875,1104],{"class":827},[817,1877,1090],{"class":1107},[817,1879,1126],{"class":827},[817,1881,1883,1886],{"class":819,"line":1882},34,[817,1884,1885],{"class":827},"    \u003C",[817,1887,1888],{"class":1107},"div\n",[817,1890,1892,1895,1897,1899,1902],{"class":819,"line":1891},35,[817,1893,1894],{"class":892},"        :class",[817,1896,899],{"class":827},[817,1898,1119],{"class":827},[817,1900,1901],{"class":844},"trackClasses",[817,1903,1904],{"class":827},"\"\n",[817,1906,1908,1911,1913,1915,1918],{"class":819,"line":1907},36,[817,1909,1910],{"class":892},"        role",[817,1912,899],{"class":827},[817,1914,1119],{"class":827},[817,1916,1917],{"class":844},"progressbar",[817,1919,1904],{"class":827},[817,1921,1923,1926,1928,1930,1933],{"class":819,"line":1922},37,[817,1924,1925],{"class":892},"        :aria-valuenow",[817,1927,899],{"class":827},[817,1929,1119],{"class":827},[817,1931,1932],{"class":844},"value ?? undefined",[817,1934,1904],{"class":827},[817,1936,1938,1941,1943,1945,1947],{"class":819,"line":1937},38,[817,1939,1940],{"class":892},"        :aria-valuemin",[817,1942,899],{"class":827},[817,1944,1119],{"class":827},[817,1946,1748],{"class":844},[817,1948,1904],{"class":827},[817,1950,1952,1955,1957,1959,1961],{"class":819,"line":1951},39,[817,1953,1954],{"class":892},"        :aria-valuemax",[817,1956,899],{"class":827},[817,1958,1119],{"class":827},[817,1960,1734],{"class":844},[817,1962,1904],{"class":827},[817,1964,1966,1969,1971,1973,1975],{"class":819,"line":1965},40,[817,1967,1968],{"class":892},"        :aria-orientation",[817,1970,899],{"class":827},[817,1972,1119],{"class":827},[817,1974,1560],{"class":844},[817,1976,1904],{"class":827},[817,1978,1980],{"class":819,"line":1979},41,[817,1981,1982],{"class":827},"    >\n",[817,1984,1986,1989,1992,1995,1997,1999,2002,2004,2007,2009,2011,2014,2016],{"class":819,"line":1985},42,[817,1987,1988],{"class":827},"        \u003C",[817,1990,1991],{"class":1107},"div",[817,1993,1994],{"class":892}," :class",[817,1996,899],{"class":827},[817,1998,1119],{"class":827},[817,2000,2001],{"class":844},"barClasses",[817,2003,1119],{"class":827},[817,2005,2006],{"class":892}," :style",[817,2008,899],{"class":827},[817,2010,1119],{"class":827},[817,2012,2013],{"class":844},"fillStyle",[817,2015,1119],{"class":827},[817,2017,2018],{"class":827}," \u002F>\n",[817,2020,2022,2025,2027],{"class":819,"line":2021},43,[817,2023,2024],{"class":827},"    \u003C\u002F",[817,2026,1991],{"class":1107},[817,2028,1126],{"class":827},[817,2030,2032,2034,2036],{"class":819,"line":2031},44,[817,2033,1861],{"class":827},[817,2035,1090],{"class":1107},[817,2037,1126],{"class":827},[1090,2039,2040],{"v-slot:react":813},[808,2041,2044],{"className":810,"code":2042,"filename":2043,"language":812,"meta":813,"style":813},"import { progress, progressBar, type ProgressProps, type ProgressBarProps } from \"virtual:styleframe\";\n\ninterface ProgressComponentProps extends ProgressProps, ProgressBarProps {\n    trackColor?: \"light\" | \"dark\" | \"neutral\";\n    value?: number | null;\n}\n\nexport function Progress({\n    color = \"primary\",\n    trackColor = \"neutral\",\n    size = \"md\",\n    orientation = \"horizontal\",\n    inverted = false,\n    animation = \"none\",\n    value = 0,\n}: ProgressComponentProps) {\n    const isIndeterminate = value == null;\n    const clampedValue = isIndeterminate ? 50 : Math.min(100, Math.max(0, value));\n    const fillProp = orientation === \"vertical\" ? \"height\" : \"width\";\n\n    return (\n        \u003Cdiv\n            className={progress({ color: trackColor, size, orientation })}\n            role=\"progressbar\"\n            aria-valuenow={value ?? undefined}\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-orientation={orientation}\n        >\n            \u003Cdiv\n                className={progressBar({\n                    color,\n                    size,\n                    orientation,\n                    inverted: String(inverted),\n                    animation: isIndeterminate && animation !== \"none\" ? animation : \"none\",\n                })}\n                style={{ [fillProp]: `${clampedValue}%` }}\n            \u002F>\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FProgress.tsx",[700,2045,2046,2082,2086,2105,2136,2151,2156,2160,2173,2189,2203,2219,2235,2248,2263,2273,2284,2300,2347,2384,2388,2395,2401,2431,2444,2465,2480,2495,2509,2514,2521,2532,2539,2546,2553,2572,2609,2614,2645,2650,2659,2666],{"__ignoreMap":813},[817,2047,2048,2050,2052,2054,2056,2058,2060,2062,2064,2066,2068,2070,2072,2074,2076,2078,2080],{"class":819,"line":820},[817,2049,824],{"class":823},[817,2051,828],{"class":827},[817,2053,1157],{"class":831},[817,2055,864],{"class":827},[817,2057,1162],{"class":831},[817,2059,864],{"class":827},[817,2061,1167],{"class":823},[817,2063,1170],{"class":831},[817,2065,864],{"class":827},[817,2067,1167],{"class":823},[817,2069,1177],{"class":831},[817,2071,835],{"class":827},[817,2073,838],{"class":823},[817,2075,1142],{"class":827},[817,2077,845],{"class":844},[817,2079,1119],{"class":827},[817,2081,851],{"class":827},[817,2083,2084],{"class":819,"line":854},[817,2085,886],{"emptyLinePlaceholder":223},[817,2087,2088,2091,2094,2097,2099,2101,2103],{"class":819,"line":883},[817,2089,2090],{"class":892},"interface",[817,2092,2093],{"class":1218}," ProgressComponentProps",[817,2095,2096],{"class":892}," extends",[817,2098,1170],{"class":1218},[817,2100,864],{"class":827},[817,2102,1177],{"class":1218},[817,2104,1695],{"class":827},[817,2106,2107,2110,2112,2114,2116,2118,2120,2122,2124,2126,2128,2130,2132,2134],{"class":819,"line":889},[817,2108,2109],{"class":1107},"    trackColor",[817,2111,1234],{"class":827},[817,2113,1142],{"class":827},[817,2115,1239],{"class":844},[817,2117,1119],{"class":827},[817,2119,1244],{"class":827},[817,2121,1142],{"class":827},[817,2123,1249],{"class":844},[817,2125,1119],{"class":827},[817,2127,1244],{"class":827},[817,2129,1142],{"class":827},[817,2131,1258],{"class":844},[817,2133,1119],{"class":827},[817,2135,851],{"class":827},[817,2137,2138,2141,2143,2145,2147,2149],{"class":819,"line":910},[817,2139,2140],{"class":1107},"    value",[817,2142,1234],{"class":827},[817,2144,1271],{"class":1218},[817,2146,1244],{"class":827},[817,2148,1276],{"class":1218},[817,2150,851],{"class":827},[817,2152,2153],{"class":819,"line":915},[817,2154,2155],{"class":827},"}\n",[817,2157,2158],{"class":819,"line":932},[817,2159,886],{"emptyLinePlaceholder":223},[817,2161,2162,2164,2167,2170],{"class":819,"line":948},[817,2163,956],{"class":823},[817,2165,2166],{"class":892}," function",[817,2168,2169],{"class":902}," Progress",[817,2171,2172],{"class":827},"({\n",[817,2174,2175,2179,2181,2183,2185,2187],{"class":819,"line":953},[817,2176,2178],{"class":2177},"sHdIc","    color",[817,2180,1707],{"class":827},[817,2182,1142],{"class":827},[817,2184,1300],{"class":844},[817,2186,1119],{"class":827},[817,2188,1284],{"class":827},[817,2190,2191,2193,2195,2197,2199,2201],{"class":819,"line":1355},[817,2192,2109],{"class":2177},[817,2194,1707],{"class":827},[817,2196,1142],{"class":827},[817,2198,1258],{"class":844},[817,2200,1119],{"class":827},[817,2202,1284],{"class":827},[817,2204,2205,2208,2210,2212,2215,2217],{"class":819,"line":1393},[817,2206,2207],{"class":2177},"    size",[817,2209,1707],{"class":827},[817,2211,1142],{"class":827},[817,2213,2214],{"class":844},"md",[817,2216,1119],{"class":827},[817,2218,1284],{"class":827},[817,2220,2221,2224,2226,2228,2231,2233],{"class":819,"line":1398},[817,2222,2223],{"class":2177},"    orientation",[817,2225,1707],{"class":827},[817,2227,1142],{"class":827},[817,2229,2230],{"class":844},"horizontal",[817,2232,1119],{"class":827},[817,2234,1284],{"class":827},[817,2236,2237,2240,2242,2246],{"class":819,"line":1417},[817,2238,2239],{"class":2177},"    inverted",[817,2241,1707],{"class":827},[817,2243,2245],{"class":2244},"sfNiH"," false",[817,2247,1284],{"class":827},[817,2249,2250,2253,2255,2257,2259,2261],{"class":819,"line":1474},[817,2251,2252],{"class":2177},"    animation",[817,2254,1707],{"class":827},[817,2256,1142],{"class":827},[817,2258,1336],{"class":844},[817,2260,1119],{"class":827},[817,2262,1284],{"class":827},[817,2264,2265,2267,2269,2271],{"class":819,"line":1481},[817,2266,2140],{"class":2177},[817,2268,1707],{"class":827},[817,2270,1324],{"class":1323},[817,2272,1284],{"class":827},[817,2274,2275,2278,2280,2282],{"class":819,"line":1486},[817,2276,2277],{"class":827},"}:",[817,2279,2093],{"class":1218},[817,2281,1346],{"class":827},[817,2283,1695],{"class":827},[817,2285,2286,2288,2290,2292,2294,2297],{"class":819,"line":1504},[817,2287,1701],{"class":892},[817,2289,1610],{"class":831},[817,2291,1707],{"class":827},[817,2293,1266],{"class":831},[817,2295,2296],{"class":827}," ==",[817,2298,2299],{"class":827}," null;\n",[817,2301,2302,2304,2307,2309,2311,2313,2315,2317,2319,2321,2323,2325,2327,2329,2331,2333,2335,2337,2339,2341,2343,2345],{"class":819,"line":1515},[817,2303,1701],{"class":892},[817,2305,2306],{"class":831}," clampedValue",[817,2308,1707],{"class":827},[817,2310,1610],{"class":831},[817,2312,1636],{"class":827},[817,2314,1719],{"class":1323},[817,2316,1590],{"class":827},[817,2318,1724],{"class":831},[817,2320,1378],{"class":827},[817,2322,1729],{"class":902},[817,2324,1367],{"class":1107},[817,2326,1734],{"class":1323},[817,2328,864],{"class":827},[817,2330,1724],{"class":831},[817,2332,1378],{"class":827},[817,2334,1743],{"class":902},[817,2336,1367],{"class":1107},[817,2338,1748],{"class":1323},[817,2340,864],{"class":827},[817,2342,1266],{"class":831},[817,2344,1762],{"class":1107},[817,2346,851],{"class":827},[817,2348,2349,2351,2354,2356,2358,2360,2362,2364,2366,2368,2370,2372,2374,2376,2378,2380,2382],{"class":819,"line":1532},[817,2350,1701],{"class":892},[817,2352,2353],{"class":831}," fillProp",[817,2355,1707],{"class":827},[817,2357,1455],{"class":831},[817,2359,1783],{"class":827},[817,2361,1142],{"class":827},[817,2363,1788],{"class":844},[817,2365,1119],{"class":827},[817,2367,1636],{"class":827},[817,2369,1142],{"class":827},[817,2371,1797],{"class":844},[817,2373,1119],{"class":827},[817,2375,1590],{"class":827},[817,2377,1142],{"class":827},[817,2379,1806],{"class":844},[817,2381,1119],{"class":827},[817,2383,851],{"class":827},[817,2385,2386],{"class":819,"line":1548},[817,2387,886],{"emptyLinePlaceholder":223},[817,2389,2390,2392],{"class":819,"line":1565},[817,2391,1816],{"class":823},[817,2393,2394],{"class":1107}," (\n",[817,2396,2397,2399],{"class":819,"line":1602},[817,2398,1988],{"class":827},[817,2400,1888],{"class":2177},[817,2402,2403,2406,2409,2411,2414,2416,2418,2420,2422,2424,2426,2428],{"class":819,"line":1655},[817,2404,2405],{"class":831},"            className",[817,2407,2408],{"class":827},"={",[817,2410,1080],{"class":1107},[817,2412,2413],{"class":827},"({",[817,2415,1292],{"class":1107},[817,2417,1295],{"class":827},[817,2419,1231],{"class":2177},[817,2421,864],{"class":827},[817,2423,1441],{"class":2177},[817,2425,864],{"class":827},[817,2427,1455],{"class":2177},[817,2429,2430],{"class":827}," })}\n",[817,2432,2433,2436,2438,2440,2442],{"class":819,"line":1665},[817,2434,2435],{"class":831},"            role",[817,2437,899],{"class":827},[817,2439,1119],{"class":827},[817,2441,1917],{"class":844},[817,2443,1904],{"class":827},[817,2445,2446,2449,2452,2455,2457,2460,2463],{"class":819,"line":1672},[817,2447,2448],{"class":831},"            aria",[817,2450,2451],{"class":827},"-",[817,2453,2454],{"class":831},"valuenow",[817,2456,2408],{"class":827},[817,2458,2459],{"class":1107},"value ?? ",[817,2461,2462],{"class":831},"undefined",[817,2464,2155],{"class":827},[817,2466,2467,2469,2471,2474,2476,2478],{"class":819,"line":1677},[817,2468,2448],{"class":831},[817,2470,2451],{"class":827},[817,2472,2473],{"class":831},"valuemin",[817,2475,2408],{"class":827},[817,2477,1748],{"class":1323},[817,2479,2155],{"class":827},[817,2481,2482,2484,2486,2489,2491,2493],{"class":819,"line":1698},[817,2483,2448],{"class":831},[817,2485,2451],{"class":827},[817,2487,2488],{"class":831},"valuemax",[817,2490,2408],{"class":827},[817,2492,1734],{"class":1323},[817,2494,2155],{"class":827},[817,2496,2497,2499,2501,2503,2505,2507],{"class":819,"line":1767},[817,2498,2448],{"class":831},[817,2500,2451],{"class":827},[817,2502,1560],{"class":831},[817,2504,2408],{"class":827},[817,2506,1560],{"class":831},[817,2508,2155],{"class":827},[817,2510,2511],{"class":819,"line":1813},[817,2512,2513],{"class":827},"        >\n",[817,2515,2516,2519],{"class":819,"line":1849},[817,2517,2518],{"class":827},"            \u003C",[817,2520,1888],{"class":2177},[817,2522,2523,2526,2528,2530],{"class":819,"line":1858},[817,2524,2525],{"class":831},"                className",[817,2527,2408],{"class":827},[817,2529,1084],{"class":1107},[817,2531,2172],{"class":827},[817,2533,2534,2537],{"class":819,"line":1868},[817,2535,2536],{"class":2177},"                    color",[817,2538,1284],{"class":827},[817,2540,2541,2544],{"class":819,"line":1873},[817,2542,2543],{"class":2177},"                    size",[817,2545,1284],{"class":827},[817,2547,2548,2551],{"class":819,"line":1882},[817,2549,2550],{"class":2177},"                    orientation",[817,2552,1284],{"class":827},[817,2554,2555,2558,2560,2563,2565,2568,2570],{"class":819,"line":1891},[817,2556,2557],{"class":1107},"                    inverted",[817,2559,1295],{"class":827},[817,2561,2562],{"class":2177}," String",[817,2564,1367],{"class":1107},[817,2566,2567],{"class":831},"inverted",[817,2569,1346],{"class":1107},[817,2571,1284],{"class":827},[817,2573,2574,2577,2579,2581,2584,2587,2590,2592,2594,2596,2599,2601,2603,2605,2607],{"class":819,"line":1907},[817,2575,2576],{"class":1107},"                    animation",[817,2578,1295],{"class":827},[817,2580,1610],{"class":2177},[817,2582,2583],{"class":1107}," && ",[817,2585,2586],{"class":2177},"animation",[817,2588,2589],{"class":1107}," !== ",[817,2591,1119],{"class":827},[817,2593,1336],{"class":844},[817,2595,1119],{"class":827},[817,2597,2598],{"class":1107}," ? animation ",[817,2600,1295],{"class":827},[817,2602,1142],{"class":827},[817,2604,1336],{"class":844},[817,2606,1119],{"class":827},[817,2608,1284],{"class":827},[817,2610,2611],{"class":819,"line":1922},[817,2612,2613],{"class":827},"                })}\n",[817,2615,2616,2619,2622,2624,2627,2630,2633,2636,2638,2640,2642],{"class":819,"line":1937},[817,2617,2618],{"class":831},"                style",[817,2620,2621],{"class":827},"={{",[817,2623,1821],{"class":1107},[817,2625,2626],{"class":831},"fillProp",[817,2628,2629],{"class":1107},"]: ",[817,2631,2632],{"class":827},"`${",[817,2634,2635],{"class":831},"clampedValue",[817,2637,1467],{"class":827},[817,2639,1840],{"class":844},[817,2641,1843],{"class":827},[817,2643,2644],{"class":827}," }}\n",[817,2646,2647],{"class":819,"line":1951},[817,2648,2649],{"class":827},"            \u002F>\n",[817,2651,2652,2655,2657],{"class":819,"line":1965},[817,2653,2654],{"class":827},"        \u003C\u002F",[817,2656,1991],{"class":831},[817,2658,1126],{"class":827},[817,2660,2661,2664],{"class":819,"line":1979},[817,2662,2663],{"class":1107},"    )",[817,2665,851],{"class":827},[817,2667,2668],{"class":819,"line":1985},[817,2669,2155],{"class":827},[1090,2671,2672,2681,2882],{"v-slot:other":813},[692,2673,694,2674,1081,2677,2680],{},[700,2675,2676],{},"progress()",[700,2678,2679],{},"progressBar()"," runtimes each return a class string. Apply them however your framework binds classes:",[808,2682,2685],{"className":810,"code":2683,"filename":2684,"language":812,"meta":813,"style":813},"import { progress, progressBar } from \"virtual:styleframe\";\n\nconst trackClasses = progress({\n    color: \"neutral\",\n    size: \"md\",\n    orientation: \"horizontal\",\n});\n\u002F\u002F → \"progress _background:gray-200 _border-radius:md _overflow:hidden ...\"\nconst barClasses = progressBar({\n    color: \"primary\",\n    size: \"md\",\n    orientation: \"horizontal\",\n    inverted: \"false\",\n    animation: \"none\",\n});\n\u002F\u002F → \"progress-bar _background:primary _height:full ...\"\n","src\u002Fcomponents\u002Fprogress.ts",[700,2686,2687,2711,2715,2729,2743,2757,2771,2779,2785,2799,2813,2827,2841,2855,2869,2877],{"__ignoreMap":813},[817,2688,2689,2691,2693,2695,2697,2699,2701,2703,2705,2707,2709],{"class":819,"line":820},[817,2690,824],{"class":823},[817,2692,828],{"class":827},[817,2694,1157],{"class":831},[817,2696,864],{"class":827},[817,2698,1162],{"class":831},[817,2700,835],{"class":827},[817,2702,838],{"class":823},[817,2704,1142],{"class":827},[817,2706,845],{"class":844},[817,2708,1119],{"class":827},[817,2710,851],{"class":827},[817,2712,2713],{"class":819,"line":854},[817,2714,886],{"emptyLinePlaceholder":223},[817,2716,2717,2719,2721,2723,2725,2727],{"class":819,"line":883},[817,2718,893],{"class":892},[817,2720,1403],{"class":831},[817,2722,899],{"class":827},[817,2724,1157],{"class":902},[817,2726,1367],{"class":831},[817,2728,1512],{"class":827},[817,2730,2731,2733,2735,2737,2739,2741],{"class":819,"line":889},[817,2732,2178],{"class":1107},[817,2734,1295],{"class":827},[817,2736,1142],{"class":827},[817,2738,1258],{"class":844},[817,2740,1119],{"class":827},[817,2742,1284],{"class":827},[817,2744,2745,2747,2749,2751,2753,2755],{"class":819,"line":910},[817,2746,2207],{"class":1107},[817,2748,1295],{"class":827},[817,2750,1142],{"class":827},[817,2752,2214],{"class":844},[817,2754,1119],{"class":827},[817,2756,1284],{"class":827},[817,2758,2759,2761,2763,2765,2767,2769],{"class":819,"line":915},[817,2760,2223],{"class":1107},[817,2762,1295],{"class":827},[817,2764,1142],{"class":827},[817,2766,2230],{"class":844},[817,2768,1119],{"class":827},[817,2770,1284],{"class":827},[817,2772,2773,2775,2777],{"class":819,"line":932},[817,2774,1467],{"class":827},[817,2776,1346],{"class":831},[817,2778,851],{"class":827},[817,2780,2781],{"class":819,"line":948},[817,2782,2784],{"class":2783},"sHwdD","\u002F\u002F → \"progress _background:gray-200 _border-radius:md _overflow:hidden ...\"\n",[817,2786,2787,2789,2791,2793,2795,2797],{"class":819,"line":953},[817,2788,893],{"class":892},[817,2790,1491],{"class":831},[817,2792,899],{"class":827},[817,2794,1162],{"class":902},[817,2796,1367],{"class":831},[817,2798,1512],{"class":827},[817,2800,2801,2803,2805,2807,2809,2811],{"class":819,"line":1355},[817,2802,2178],{"class":1107},[817,2804,1295],{"class":827},[817,2806,1142],{"class":827},[817,2808,1300],{"class":844},[817,2810,1119],{"class":827},[817,2812,1284],{"class":827},[817,2814,2815,2817,2819,2821,2823,2825],{"class":819,"line":1393},[817,2816,2207],{"class":1107},[817,2818,1295],{"class":827},[817,2820,1142],{"class":827},[817,2822,2214],{"class":844},[817,2824,1119],{"class":827},[817,2826,1284],{"class":827},[817,2828,2829,2831,2833,2835,2837,2839],{"class":819,"line":1398},[817,2830,2223],{"class":1107},[817,2832,1295],{"class":827},[817,2834,1142],{"class":827},[817,2836,2230],{"class":844},[817,2838,1119],{"class":827},[817,2840,1284],{"class":827},[817,2842,2843,2845,2847,2849,2851,2853],{"class":819,"line":1417},[817,2844,2239],{"class":1107},[817,2846,1295],{"class":827},[817,2848,1142],{"class":827},[817,2850,1595],{"class":844},[817,2852,1119],{"class":827},[817,2854,1284],{"class":827},[817,2856,2857,2859,2861,2863,2865,2867],{"class":819,"line":1474},[817,2858,2252],{"class":1107},[817,2860,1295],{"class":827},[817,2862,1142],{"class":827},[817,2864,1336],{"class":844},[817,2866,1119],{"class":827},[817,2868,1284],{"class":827},[817,2870,2871,2873,2875],{"class":819,"line":1481},[817,2872,1467],{"class":827},[817,2874,1346],{"class":831},[817,2876,851],{"class":827},[817,2878,2879],{"class":819,"line":1486},[817,2880,2881],{"class":2783},"\u002F\u002F → \"progress-bar _background:primary _height:full ...\"\n",[808,2883,2888],{"className":2884,"code":2885,"filename":2886,"language":2887,"meta":813,"style":813},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv\n    class=\"progress _background:gray-200 _border-radius:md ...\"\n    role=\"progressbar\"\n    aria-valuenow=\"65\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n>\n    \u003Cdiv class=\"progress-bar _background:primary ...\" style=\"width: 65%\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Fprogress.html","html",[700,2889,2890,2896,2910,2923,2937,2950,2963,2967,3004],{"__ignoreMap":813},[817,2891,2892,2894],{"class":819,"line":820},[817,2893,1104],{"class":827},[817,2895,1888],{"class":1107},[817,2897,2898,2901,2903,2905,2908],{"class":819,"line":854},[817,2899,2900],{"class":892},"    class",[817,2902,899],{"class":827},[817,2904,1119],{"class":827},[817,2906,2907],{"class":844},"progress _background:gray-200 _border-radius:md ...",[817,2909,1904],{"class":827},[817,2911,2912,2915,2917,2919,2921],{"class":819,"line":883},[817,2913,2914],{"class":892},"    role",[817,2916,899],{"class":827},[817,2918,1119],{"class":827},[817,2920,1917],{"class":844},[817,2922,1904],{"class":827},[817,2924,2925,2928,2930,2932,2935],{"class":819,"line":889},[817,2926,2927],{"class":892},"    aria-valuenow",[817,2929,899],{"class":827},[817,2931,1119],{"class":827},[817,2933,2934],{"class":844},"65",[817,2936,1904],{"class":827},[817,2938,2939,2942,2944,2946,2948],{"class":819,"line":910},[817,2940,2941],{"class":892},"    aria-valuemin",[817,2943,899],{"class":827},[817,2945,1119],{"class":827},[817,2947,1748],{"class":844},[817,2949,1904],{"class":827},[817,2951,2952,2955,2957,2959,2961],{"class":819,"line":915},[817,2953,2954],{"class":892},"    aria-valuemax",[817,2956,899],{"class":827},[817,2958,1119],{"class":827},[817,2960,1734],{"class":844},[817,2962,1904],{"class":827},[817,2964,2965],{"class":819,"line":932},[817,2966,1126],{"class":827},[817,2968,2969,2971,2973,2976,2978,2980,2983,2985,2988,2990,2992,2995,2997,3000,3002],{"class":819,"line":948},[817,2970,1885],{"class":827},[817,2972,1991],{"class":1107},[817,2974,2975],{"class":892}," class",[817,2977,899],{"class":827},[817,2979,1119],{"class":827},[817,2981,2982],{"class":844},"progress-bar _background:primary ...",[817,2984,1119],{"class":827},[817,2986,2987],{"class":892}," style",[817,2989,899],{"class":827},[817,2991,1119],{"class":827},[817,2993,2994],{"class":844},"width: 65%",[817,2996,1119],{"class":827},[817,2998,2999],{"class":827},">\u003C\u002F",[817,3001,1991],{"class":1107},[817,3003,1126],{"class":827},[817,3005,3006,3008,3010],{"class":819,"line":953},[817,3007,1861],{"class":827},[817,3009,1991],{"class":1107},[817,3011,1126],{"class":827},[792,3013,3015],{"id":3014},"see-it-in-action","See it in action",[3017,3018],"story-preview",{"story":3019,":panel":1585},"theme-recipes-feedback-progress--default",[688,3021,195],{"id":3022},"colors",[692,3024,3025,3026,3028,3029,3028,3032,3028,3035,3028,3038,3028,3041,3044,3045,3028,3047,3028,3049,3051,3052,3028,3054,3028,3056,3058],{},"The Progress bar recipe includes 9 color variants: the 6 semantic colors (",[700,3027,1300],{},", ",[700,3030,3031],{},"secondary",[700,3033,3034],{},"success",[700,3036,3037],{},"info",[700,3039,3040],{},"warning",[700,3042,3043],{},"error",") plus 3 neutral-spectrum colors (",[700,3046,1239],{},[700,3048,1249],{},[700,3050,1258],{},"). The track recipe uses only the 3 neutral-spectrum colors (",[700,3053,1239],{},[700,3055,1249],{},[700,3057,1258],{},") to provide a subtle background container.",[692,3060,3061,3062,3064],{},"Each color is applied through compound variants with automatic dark mode overrides. The ",[700,3063,1258],{}," color adapts between light and dark mode automatically.",[3017,3066],{"story":3067,":panel":1585},"theme-recipes-feedback-progress--primary",[3069,3070,3072],"h3",{"id":3071},"color-reference","Color Reference",[3017,3074],{"story":3075,":height":3076},"theme-recipes-feedback-progress--all-variants","600",[692,3078,3079],{},[696,3080,3081],{},"Bar colors:",[3083,3084,3085,3101],"table",{},[3086,3087,3088],"thead",{},[3089,3090,3091,3095,3098],"tr",{},[3092,3093,3094],"th",{},"Color",[3092,3096,3097],{},"Token",[3092,3099,3100],{},"Use Case",[3102,3103,3104,3119,3133,3147,3161,3175,3189,3203,3217],"tbody",{},[3089,3105,3106,3111,3116],{},[3107,3108,3109],"td",{},[700,3110,1300],{},[3107,3112,3113],{},[700,3114,3115],{},"@color.primary",[3107,3117,3118],{},"Default. Primary brand indicator",[3089,3120,3121,3125,3130],{},[3107,3122,3123],{},[700,3124,3031],{},[3107,3126,3127],{},[700,3128,3129],{},"@color.secondary",[3107,3131,3132],{},"Secondary or supporting progress",[3089,3134,3135,3139,3144],{},[3107,3136,3137],{},[700,3138,3034],{},[3107,3140,3141],{},[700,3142,3143],{},"@color.success",[3107,3145,3146],{},"Successful completions, positive progress",[3089,3148,3149,3153,3158],{},[3107,3150,3151],{},[700,3152,3037],{},[3107,3154,3155],{},[700,3156,3157],{},"@color.info",[3107,3159,3160],{},"Informational progress, downloads",[3089,3162,3163,3167,3172],{},[3107,3164,3165],{},[700,3166,3040],{},[3107,3168,3169],{},[700,3170,3171],{},"@color.warning",[3107,3173,3174],{},"Caution states, approaching limits",[3089,3176,3177,3181,3186],{},[3107,3178,3179],{},[700,3180,3043],{},[3107,3182,3183],{},[700,3184,3185],{},"@color.error",[3107,3187,3188],{},"Error states, critical progress",[3089,3190,3191,3195,3200],{},[3107,3192,3193],{},[700,3194,1239],{},[3107,3196,3197],{},[700,3198,3199],{},"@color.gray-400",[3107,3201,3202],{},"Light-themed fill, fixed across color schemes",[3089,3204,3205,3209,3214],{},[3107,3206,3207],{},[700,3208,1249],{},[3107,3210,3211],{},[700,3212,3213],{},"@color.gray-600",[3107,3215,3216],{},"Dark-themed fill, fixed across color schemes",[3089,3218,3219,3223,3226],{},[3107,3220,3221],{},[700,3222,1258],{},[3107,3224,3225],{},"Adaptive",[3107,3227,3228],{},"Light fill in light mode, dark fill in dark mode",[692,3230,3231],{},[696,3232,3233],{},"Track colors:",[3083,3235,3236,3246],{},[3086,3237,3238],{},[3089,3239,3240,3242,3244],{},[3092,3241,3094],{},[3092,3243,3097],{},[3092,3245,3100],{},[3102,3247,3248,3262,3276],{},[3089,3249,3250,3254,3259],{},[3107,3251,3252],{},[700,3253,1239],{},[3107,3255,3256],{},[700,3257,3258],{},"@color.gray-200",[3107,3260,3261],{},"Light track, fixed across color schemes",[3089,3263,3264,3268,3273],{},[3107,3265,3266],{},[700,3267,1249],{},[3107,3269,3270],{},[700,3271,3272],{},"@color.gray-800",[3107,3274,3275],{},"Dark track, fixed across color schemes",[3089,3277,3278,3282,3284],{},[3107,3279,3280],{},[700,3281,1258],{},[3107,3283,3225],{},[3107,3285,3286],{},"Default. Light track in light mode, dark track in dark mode",[3288,3289,3290,3293,3294,3296,3297,3299],"tip",{},[696,3291,3292],{},"Pro tip:"," Pass the ",[700,3295,1436],{}," separately from the bar ",[700,3298,1527],{},". The track should be a neutral background, while the bar communicates the semantic meaning through color.",[688,3301,3303],{"id":3302},"sizes","Sizes",[692,3305,3306,3307,3310,3311,3314],{},"Five size variants from ",[700,3308,3309],{},"xs"," to ",[700,3312,3313],{},"xl"," control the height (or width in vertical orientation) and border radius of both the track and bar.",[3017,3316],{"story":3317,":panel":1585},"theme-recipes-feedback-progress--medium",[3069,3319,3321],{"id":3320},"size-reference","Size Reference",[3017,3323],{"story":3324,":height":3325},"theme-recipes-feedback-progress--all-sizes","400",[3083,3327,3328,3343],{},[3086,3329,3330],{},[3089,3331,3332,3335,3338,3341],{},[3092,3333,3334],{},"Size",[3092,3336,3337],{},"Height Token",[3092,3339,3340],{},"Border Radius",[3092,3342,3100],{},[3102,3344,3345,3364,3383,3402,3421],{},[3089,3346,3347,3351,3356,3361],{},[3107,3348,3349],{},[700,3350,3309],{},[3107,3352,3353],{},[700,3354,3355],{},"@0.25",[3107,3357,3358],{},[700,3359,3360],{},"@border-radius.sm",[3107,3362,3363],{},"Thin indicators, inline progress",[3089,3365,3366,3371,3376,3380],{},[3107,3367,3368],{},[700,3369,3370],{},"sm",[3107,3372,3373],{},[700,3374,3375],{},"@0.375",[3107,3377,3378],{},[700,3379,3360],{},[3107,3381,3382],{},"Compact progress bars",[3089,3384,3385,3389,3394,3399],{},[3107,3386,3387],{},[700,3388,2214],{},[3107,3390,3391],{},[700,3392,3393],{},"@0.5",[3107,3395,3396],{},[700,3397,3398],{},"@border-radius.md",[3107,3400,3401],{},"Default. Standard progress bars",[3089,3403,3404,3409,3414,3418],{},[3107,3405,3406],{},[700,3407,3408],{},"lg",[3107,3410,3411],{},[700,3412,3413],{},"@0.75",[3107,3415,3416],{},[700,3417,3398],{},[3107,3419,3420],{},"Prominent progress indicators",[3089,3422,3423,3427,3432,3437],{},[3107,3424,3425],{},[700,3426,3313],{},[3107,3428,3429],{},[700,3430,3431],{},"@1",[3107,3433,3434],{},[700,3435,3436],{},"@border-radius.lg",[3107,3438,3439],{},"Large, highly visible progress",[3441,3442,3443,3446,3447,3449],"note",{},[696,3444,3445],{},"Good to know:"," The ",[700,3448,1450],{}," prop must be passed to both the track and bar recipes. In vertical orientation, the size controls the width instead of the height.",[688,3451,3452],{"id":1560},"Orientation",[692,3454,694,3455,3457,3458,3460,3461,1378],{},[700,3456,1560],{}," variant controls the layout direction of the progress bar. Two options are available: ",[700,3459,2230],{}," (default) and ",[700,3462,1788],{},[3069,3464,3465],{"id":2230},"Horizontal",[692,3467,3468,3469,3472],{},"The bar fills from left to right. The track stretches to ",[700,3470,3471],{},"width: 100%"," of its container.",[3017,3474],{"story":3019,":panel":1585},[3069,3476,3477],{"id":1788},"Vertical",[692,3479,3480,3481,3484],{},"The bar fills from bottom to top. The track stretches to ",[700,3482,3483],{},"height: 100%"," of its container. The parent container must have an explicit height for the vertical progress bar to be visible.",[3017,3486],{"story":3487,":height":3488},"theme-recipes-feedback-progress--vertical","300",[3083,3490,3491,3505],{},[3086,3492,3493],{},[3089,3494,3495,3497,3500,3503],{},[3092,3496,3452],{},[3092,3498,3499],{},"Fill Direction",[3092,3501,3502],{},"Track Sizing",[3092,3504,3100],{},[3102,3506,3507,3523],{},[3089,3508,3509,3513,3516,3520],{},[3107,3510,3511],{},[700,3512,2230],{},[3107,3514,3515],{},"Left to right",[3107,3517,3518],{},[700,3519,3471],{},[3107,3521,3522],{},"Default. Standard horizontal progress bars",[3089,3524,3525,3529,3532,3536],{},[3107,3526,3527],{},[700,3528,1788],{},[3107,3530,3531],{},"Bottom to top",[3107,3533,3534],{},[700,3535,3483],{},[3107,3537,3538],{},"Vertical meters, level indicators, volume bars",[688,3540,3541],{"id":2567},"Inverted",[692,3543,694,3544,3546],{},[700,3545,2567],{}," variant reverses the fill direction of the progress bar. In horizontal orientation, the bar fills from right to left. In vertical orientation, it fills from top to bottom.",[3017,3548],{"story":3549,":height":3325},"theme-recipes-feedback-progress--inverted",[3083,3551,3552,3563],{},[3086,3553,3554],{},[3089,3555,3556,3558,3561],{},[3092,3557,3452],{},[3092,3559,3560],{},"Normal",[3092,3562,3541],{},[3102,3564,3565,3577],{},[3089,3566,3567,3571,3574],{},[3107,3568,3569],{},[700,3570,2230],{},[3107,3572,3573],{},"Left → right",[3107,3575,3576],{},"Right → left",[3089,3578,3579,3583,3586],{},[3107,3580,3581],{},[700,3582,1788],{},[3107,3584,3585],{},"Bottom → top",[3107,3587,3588],{},"Top → bottom",[688,3590,3592],{"id":3591},"indeterminate","Indeterminate",[692,3594,3595,3596,3598,3599,3602],{},"When the progress ",[700,3597,1714],{}," is ",[700,3600,3601],{},"null",", the bar enters an indeterminate state. The bar displays at 50% width (or height in vertical) and can animate to indicate ongoing work without a known completion percentage.",[692,3604,3605,3606,752],{},"Four animation styles are available for indeterminate progress bars. The keyframes are registered automatically when the bar recipe is used — no manual ",[700,3607,751],{},[3017,3609],{"story":3610,":height":3488},"theme-recipes-feedback-progress--indeterminate",[3069,3612,3614],{"id":3613},"animation-reference","Animation Reference",[3083,3616,3617,3632],{},[3086,3618,3619],{},[3089,3620,3621,3624,3626,3629],{},[3092,3622,3623],{},"Animation",[3092,3625,200],{},[3092,3627,3628],{},"Timing",[3092,3630,3631],{},"Description",[3102,3633,3634,3648,3668,3686,3706],{},[3089,3635,3636,3640,3643,3645],{},[3107,3637,3638],{},[700,3639,1336],{},[3107,3641,3642],{},"—",[3107,3644,3642],{},[3107,3646,3647],{},"Default. No animation, static bar at 50%",[3089,3649,3650,3655,3660,3665],{},[3107,3651,3652],{},[700,3653,3654],{},"carousel",[3107,3656,3657],{},[700,3658,3659],{},"1.5s",[3107,3661,3662],{},[700,3663,3664],{},"linear",[3107,3666,3667],{},"Slides in the fill direction continuously",[3089,3669,3670,3675,3679,3683],{},[3107,3671,3672],{},[700,3673,3674],{},"carousel-inverse",[3107,3676,3677],{},[700,3678,3659],{},[3107,3680,3681],{},[700,3682,3664],{},[3107,3684,3685],{},"Slides against the fill direction continuously",[3089,3687,3688,3693,3698,3703],{},[3107,3689,3690],{},[700,3691,3692],{},"swing",[3107,3694,3695],{},[700,3696,3697],{},"2s",[3107,3699,3700],{},[700,3701,3702],{},"ease-in-out",[3107,3704,3705],{},"Oscillates back and forth",[3089,3707,3708,3713,3717,3721],{},[3107,3709,3710],{},[700,3711,3712],{},"elastic",[3107,3714,3715],{},[700,3716,3697],{},[3107,3718,3719],{},[700,3720,3702],{},[3107,3722,3723],{},"Stretches and contracts while oscillating",[3069,3725,3727],{"id":3726},"vertical-indeterminate","Vertical Indeterminate",[692,3729,3730,3731,3734,3735,3738,3739,3310,3742,1378],{},"Animations adapt automatically for vertical orientation. Horizontal ",[700,3732,3733],{},"translateX"," transforms are swapped to ",[700,3736,3737],{},"translateY",", and ",[700,3740,3741],{},"scaleX",[700,3743,3744],{},"scaleY",[3017,3746],{"story":3747,":height":3488},"theme-recipes-feedback-progress--indeterminate-vertical",[688,3749,3751],{"id":3750},"anatomy","Anatomy",[692,3753,3754],{},"The Progress recipe is composed of two independent recipes that work together:",[3083,3756,3757,3770],{},[3086,3758,3759],{},[3089,3760,3761,3764,3767],{},[3092,3762,3763],{},"Part",[3092,3765,3766],{},"Recipe",[3092,3768,3769],{},"Role",[3102,3771,3772,3786],{},[3089,3773,3774,3779,3783],{},[3107,3775,3776],{},[696,3777,3778],{},"Track",[3107,3780,3781],{},[700,3782,702],{},[3107,3784,3785],{},"Outer container with background color, border radius, and overflow hidden",[3089,3787,3788,3793,3797],{},[3107,3789,3790],{},[696,3791,3792],{},"Bar",[3107,3794,3795],{},[700,3796,706],{},[3107,3798,3799],{},"Inner fill element with color, transition, orientation, inversion, and animation",[692,3801,3802,3803,3805,3806,1081,3808,3810],{},"The track provides the neutral background container. The bar is a child element whose width (or height) is controlled by an inline style based on the current ",[700,3804,1714],{},". Both recipes share the ",[700,3807,1450],{},[700,3809,1560],{}," axes and should receive the same values.",[808,3812,3814],{"className":2884,"code":3813,"language":2887,"meta":813,"style":813},"\u003C!-- Both parts working together -->\n\u003Cdiv class=\"progress(...)\">\n    \u003Cdiv class=\"progressBar(...)\" style=\"width: 65%\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[700,3815,3816,3821,3840,3873],{"__ignoreMap":813},[817,3817,3818],{"class":819,"line":820},[817,3819,3820],{"class":2783},"\u003C!-- Both parts working together -->\n",[817,3822,3823,3825,3827,3829,3831,3833,3836,3838],{"class":819,"line":854},[817,3824,1104],{"class":827},[817,3826,1991],{"class":1107},[817,3828,2975],{"class":892},[817,3830,899],{"class":827},[817,3832,1119],{"class":827},[817,3834,3835],{"class":844},"progress(...)",[817,3837,1119],{"class":827},[817,3839,1126],{"class":827},[817,3841,3842,3844,3846,3848,3850,3852,3855,3857,3859,3861,3863,3865,3867,3869,3871],{"class":819,"line":883},[817,3843,1885],{"class":827},[817,3845,1991],{"class":1107},[817,3847,2975],{"class":892},[817,3849,899],{"class":827},[817,3851,1119],{"class":827},[817,3853,3854],{"class":844},"progressBar(...)",[817,3856,1119],{"class":827},[817,3858,2987],{"class":892},[817,3860,899],{"class":827},[817,3862,1119],{"class":827},[817,3864,2994],{"class":844},[817,3866,1119],{"class":827},[817,3868,2999],{"class":827},[817,3870,1991],{"class":1107},[817,3872,1126],{"class":827},[817,3874,3875,3877,3879],{"class":819,"line":889},[817,3876,1861],{"class":827},[817,3878,1991],{"class":1107},[817,3880,1126],{"class":827},[3288,3882,3883,3885],{},[696,3884,3292],{}," You can place multiple bars inside a single track to create a stacked or segmented progress indicator. Each bar independently controls its own color and width.",[688,3887,568],{"id":3888},"accessibility",[728,3890,3891],{},[731,3892,3893,3899,3900,3903],{},[696,3894,3895,3896,3898],{},"Use the ",[700,3897,1917],{}," role."," Apply ",[700,3901,3902],{},"role=\"progressbar\""," to the track element. This tells assistive technology that the element represents a progress indicator.",[808,3905,3907],{"className":2884,"code":3906,"language":2887,"meta":813,"style":813},"\u003Cdiv role=\"progressbar\" aria-valuenow=\"65\" aria-valuemin=\"0\" aria-valuemax=\"100\" class=\"...\">\n    \u003Cdiv class=\"...\" style=\"width: 65%\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[700,3908,3909,3972,4004],{"__ignoreMap":813},[817,3910,3911,3913,3915,3918,3920,3922,3924,3926,3929,3931,3933,3935,3937,3940,3942,3944,3946,3948,3951,3953,3955,3957,3959,3961,3963,3965,3968,3970],{"class":819,"line":820},[817,3912,1104],{"class":827},[817,3914,1991],{"class":1107},[817,3916,3917],{"class":892}," role",[817,3919,899],{"class":827},[817,3921,1119],{"class":827},[817,3923,1917],{"class":844},[817,3925,1119],{"class":827},[817,3927,3928],{"class":892}," aria-valuenow",[817,3930,899],{"class":827},[817,3932,1119],{"class":827},[817,3934,2934],{"class":844},[817,3936,1119],{"class":827},[817,3938,3939],{"class":892}," aria-valuemin",[817,3941,899],{"class":827},[817,3943,1119],{"class":827},[817,3945,1748],{"class":844},[817,3947,1119],{"class":827},[817,3949,3950],{"class":892}," aria-valuemax",[817,3952,899],{"class":827},[817,3954,1119],{"class":827},[817,3956,1734],{"class":844},[817,3958,1119],{"class":827},[817,3960,2975],{"class":892},[817,3962,899],{"class":827},[817,3964,1119],{"class":827},[817,3966,3967],{"class":844},"...",[817,3969,1119],{"class":827},[817,3971,1126],{"class":827},[817,3973,3974,3976,3978,3980,3982,3984,3986,3988,3990,3992,3994,3996,3998,4000,4002],{"class":819,"line":854},[817,3975,1885],{"class":827},[817,3977,1991],{"class":1107},[817,3979,2975],{"class":892},[817,3981,899],{"class":827},[817,3983,1119],{"class":827},[817,3985,3967],{"class":844},[817,3987,1119],{"class":827},[817,3989,2987],{"class":892},[817,3991,899],{"class":827},[817,3993,1119],{"class":827},[817,3995,2994],{"class":844},[817,3997,1119],{"class":827},[817,3999,2999],{"class":827},[817,4001,1991],{"class":1107},[817,4003,1126],{"class":827},[817,4005,4006,4008,4010],{"class":819,"line":883},[817,4007,1861],{"class":827},[817,4009,1991],{"class":1107},[817,4011,1126],{"class":827},[728,4013,4014],{},[731,4015,4016,4028,4029,4031],{},[696,4017,4018,4019,3028,4022,3738,4025,1378],{},"Set ",[700,4020,4021],{},"aria-valuenow",[700,4023,4024],{},"aria-valuemin",[700,4026,4027],{},"aria-valuemax"," These attributes communicate the current progress value to screen readers. For indeterminate progress, omit ",[700,4030,4021],{}," entirely.",[808,4033,4035],{"className":2884,"code":4034,"language":2887,"meta":813,"style":813},"\u003C!-- Determinate -->\n\u003Cdiv role=\"progressbar\" aria-valuenow=\"65\" aria-valuemin=\"0\" aria-valuemax=\"100\">...\u003C\u002Fdiv>\n\n\u003C!-- Indeterminate -->\n\u003Cdiv role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\">...\u003C\u002Fdiv>\n",[700,4036,4037,4042,4099,4103,4108],{"__ignoreMap":813},[817,4038,4039],{"class":819,"line":820},[817,4040,4041],{"class":2783},"\u003C!-- Determinate -->\n",[817,4043,4044,4046,4048,4050,4052,4054,4056,4058,4060,4062,4064,4066,4068,4070,4072,4074,4076,4078,4080,4082,4084,4086,4088,4091,4093,4095,4097],{"class":819,"line":854},[817,4045,1104],{"class":827},[817,4047,1991],{"class":1107},[817,4049,3917],{"class":892},[817,4051,899],{"class":827},[817,4053,1119],{"class":827},[817,4055,1917],{"class":844},[817,4057,1119],{"class":827},[817,4059,3928],{"class":892},[817,4061,899],{"class":827},[817,4063,1119],{"class":827},[817,4065,2934],{"class":844},[817,4067,1119],{"class":827},[817,4069,3939],{"class":892},[817,4071,899],{"class":827},[817,4073,1119],{"class":827},[817,4075,1748],{"class":844},[817,4077,1119],{"class":827},[817,4079,3950],{"class":892},[817,4081,899],{"class":827},[817,4083,1119],{"class":827},[817,4085,1734],{"class":844},[817,4087,1119],{"class":827},[817,4089,4090],{"class":827},">",[817,4092,3967],{"class":831},[817,4094,1861],{"class":827},[817,4096,1991],{"class":1107},[817,4098,1126],{"class":827},[817,4100,4101],{"class":819,"line":883},[817,4102,886],{"emptyLinePlaceholder":223},[817,4104,4105],{"class":819,"line":889},[817,4106,4107],{"class":2783},"\u003C!-- Indeterminate -->\n",[817,4109,4110,4112,4114,4116,4118,4120,4122,4124,4126,4128,4130,4132,4134,4136,4138,4140,4142,4144,4146,4148,4150,4152],{"class":819,"line":910},[817,4111,1104],{"class":827},[817,4113,1991],{"class":1107},[817,4115,3917],{"class":892},[817,4117,899],{"class":827},[817,4119,1119],{"class":827},[817,4121,1917],{"class":844},[817,4123,1119],{"class":827},[817,4125,3939],{"class":892},[817,4127,899],{"class":827},[817,4129,1119],{"class":827},[817,4131,1748],{"class":844},[817,4133,1119],{"class":827},[817,4135,3950],{"class":892},[817,4137,899],{"class":827},[817,4139,1119],{"class":827},[817,4141,1734],{"class":844},[817,4143,1119],{"class":827},[817,4145,4090],{"class":827},[817,4147,3967],{"class":831},[817,4149,1861],{"class":827},[817,4151,1991],{"class":1107},[817,4153,1126],{"class":827},[728,4155,4156],{},[731,4157,4158,4164],{},[696,4159,4018,4160,4163],{},[700,4161,4162],{},"aria-orientation"," for vertical progress bars."," This tells assistive technology the orientation of the progress indicator.",[808,4166,4168],{"className":2884,"code":4167,"language":2887,"meta":813,"style":813},"\u003Cdiv role=\"progressbar\" aria-orientation=\"vertical\" aria-valuenow=\"65\" aria-valuemin=\"0\" aria-valuemax=\"100\">...\u003C\u002Fdiv>\n",[700,4169,4170],{"__ignoreMap":813},[817,4171,4172,4174,4176,4178,4180,4182,4184,4186,4189,4191,4193,4195,4197,4199,4201,4203,4205,4207,4209,4211,4213,4215,4217,4219,4221,4223,4225,4227,4229,4231,4233,4235],{"class":819,"line":820},[817,4173,1104],{"class":827},[817,4175,1991],{"class":1107},[817,4177,3917],{"class":892},[817,4179,899],{"class":827},[817,4181,1119],{"class":827},[817,4183,1917],{"class":844},[817,4185,1119],{"class":827},[817,4187,4188],{"class":892}," aria-orientation",[817,4190,899],{"class":827},[817,4192,1119],{"class":827},[817,4194,1788],{"class":844},[817,4196,1119],{"class":827},[817,4198,3928],{"class":892},[817,4200,899],{"class":827},[817,4202,1119],{"class":827},[817,4204,2934],{"class":844},[817,4206,1119],{"class":827},[817,4208,3939],{"class":892},[817,4210,899],{"class":827},[817,4212,1119],{"class":827},[817,4214,1748],{"class":844},[817,4216,1119],{"class":827},[817,4218,3950],{"class":892},[817,4220,899],{"class":827},[817,4222,1119],{"class":827},[817,4224,1734],{"class":844},[817,4226,1119],{"class":827},[817,4228,4090],{"class":827},[817,4230,3967],{"class":831},[817,4232,1861],{"class":827},[817,4234,1991],{"class":1107},[817,4236,1126],{"class":827},[728,4238,4239],{},[731,4240,4241,4244,4245,4248,4249,4252],{},[696,4242,4243],{},"Add a label."," Use ",[700,4246,4247],{},"aria-label"," or ",[700,4250,4251],{},"aria-labelledby"," to provide a descriptive name for the progress bar, especially when multiple progress bars appear on the same page.",[808,4254,4256],{"className":2884,"code":4255,"language":2887,"meta":813,"style":813},"\u003Clabel id=\"upload-label\">Upload progress\u003C\u002Flabel>\n\u003Cdiv role=\"progressbar\" aria-labelledby=\"upload-label\" aria-valuenow=\"65\" aria-valuemin=\"0\" aria-valuemax=\"100\" class=\"...\">\n    \u003Cdiv class=\"...\" style=\"width: 65%\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[700,4257,4258,4288,4357,4389],{"__ignoreMap":813},[817,4259,4260,4262,4265,4268,4270,4272,4275,4277,4279,4282,4284,4286],{"class":819,"line":820},[817,4261,1104],{"class":827},[817,4263,4264],{"class":1107},"label",[817,4266,4267],{"class":892}," id",[817,4269,899],{"class":827},[817,4271,1119],{"class":827},[817,4273,4274],{"class":844},"upload-label",[817,4276,1119],{"class":827},[817,4278,4090],{"class":827},[817,4280,4281],{"class":831},"Upload progress",[817,4283,1861],{"class":827},[817,4285,4264],{"class":1107},[817,4287,1126],{"class":827},[817,4289,4290,4292,4294,4296,4298,4300,4302,4304,4307,4309,4311,4313,4315,4317,4319,4321,4323,4325,4327,4329,4331,4333,4335,4337,4339,4341,4343,4345,4347,4349,4351,4353,4355],{"class":819,"line":854},[817,4291,1104],{"class":827},[817,4293,1991],{"class":1107},[817,4295,3917],{"class":892},[817,4297,899],{"class":827},[817,4299,1119],{"class":827},[817,4301,1917],{"class":844},[817,4303,1119],{"class":827},[817,4305,4306],{"class":892}," aria-labelledby",[817,4308,899],{"class":827},[817,4310,1119],{"class":827},[817,4312,4274],{"class":844},[817,4314,1119],{"class":827},[817,4316,3928],{"class":892},[817,4318,899],{"class":827},[817,4320,1119],{"class":827},[817,4322,2934],{"class":844},[817,4324,1119],{"class":827},[817,4326,3939],{"class":892},[817,4328,899],{"class":827},[817,4330,1119],{"class":827},[817,4332,1748],{"class":844},[817,4334,1119],{"class":827},[817,4336,3950],{"class":892},[817,4338,899],{"class":827},[817,4340,1119],{"class":827},[817,4342,1734],{"class":844},[817,4344,1119],{"class":827},[817,4346,2975],{"class":892},[817,4348,899],{"class":827},[817,4350,1119],{"class":827},[817,4352,3967],{"class":844},[817,4354,1119],{"class":827},[817,4356,1126],{"class":827},[817,4358,4359,4361,4363,4365,4367,4369,4371,4373,4375,4377,4379,4381,4383,4385,4387],{"class":819,"line":883},[817,4360,1885],{"class":827},[817,4362,1991],{"class":1107},[817,4364,2975],{"class":892},[817,4366,899],{"class":827},[817,4368,1119],{"class":827},[817,4370,3967],{"class":844},[817,4372,1119],{"class":827},[817,4374,2987],{"class":892},[817,4376,899],{"class":827},[817,4378,1119],{"class":827},[817,4380,2994],{"class":844},[817,4382,1119],{"class":827},[817,4384,2999],{"class":827},[817,4386,1991],{"class":1107},[817,4388,1126],{"class":827},[817,4390,4391,4393,4395],{"class":819,"line":889},[817,4392,1861],{"class":827},[817,4394,1991],{"class":1107},[817,4396,1126],{"class":827},[688,4398,4400],{"id":4399},"customization","Customization",[3069,4402,4404],{"id":4403},"overriding-defaults","Overriding Defaults",[692,4406,4407],{},"Each progress composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[808,4409,4411],{"className":810,"code":4410,"filename":806,"language":812,"meta":813,"style":813},"import { styleframe } from 'virtual:styleframe';\nimport { useProgressRecipe, useProgressBarRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst progress = useProgressRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.lg',\n    },\n    defaultVariants: {\n        color: 'neutral',\n        orientation: 'horizontal',\n        size: 'lg',\n    },\n});\n\nconst progressBar = useProgressBarRecipe(s, {\n    defaultVariants: {\n        color: 'primary',\n        orientation: 'horizontal',\n        inverted: 'false',\n        animation: 'none',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[700,4412,4413,4433,4457,4461,4475,4479,4496,4505,4520,4525,4534,4548,4562,4576,4580,4588,4592,4608,4616,4630,4644,4658,4672,4686,4690,4698,4702],{"__ignoreMap":813},[817,4414,4415,4417,4419,4421,4423,4425,4427,4429,4431],{"class":819,"line":820},[817,4416,824],{"class":823},[817,4418,828],{"class":827},[817,4420,832],{"class":831},[817,4422,835],{"class":827},[817,4424,838],{"class":823},[817,4426,841],{"class":827},[817,4428,845],{"class":844},[817,4430,848],{"class":827},[817,4432,851],{"class":827},[817,4434,4435,4437,4439,4441,4443,4445,4447,4449,4451,4453,4455],{"class":819,"line":854},[817,4436,824],{"class":823},[817,4438,828],{"class":827},[817,4440,861],{"class":831},[817,4442,864],{"class":827},[817,4444,867],{"class":831},[817,4446,835],{"class":827},[817,4448,838],{"class":823},[817,4450,841],{"class":827},[817,4452,876],{"class":844},[817,4454,848],{"class":827},[817,4456,851],{"class":827},[817,4458,4459],{"class":819,"line":883},[817,4460,886],{"emptyLinePlaceholder":223},[817,4462,4463,4465,4467,4469,4471,4473],{"class":819,"line":889},[817,4464,893],{"class":892},[817,4466,896],{"class":831},[817,4468,899],{"class":827},[817,4470,832],{"class":902},[817,4472,905],{"class":831},[817,4474,851],{"class":827},[817,4476,4477],{"class":819,"line":910},[817,4478,886],{"emptyLinePlaceholder":223},[817,4480,4481,4483,4485,4487,4489,4492,4494],{"class":819,"line":915},[817,4482,893],{"class":892},[817,4484,920],{"class":831},[817,4486,899],{"class":827},[817,4488,861],{"class":902},[817,4490,4491],{"class":831},"(s",[817,4493,864],{"class":827},[817,4495,1695],{"class":827},[817,4497,4498,4501,4503],{"class":819,"line":932},[817,4499,4500],{"class":1107},"    base",[817,4502,1295],{"class":827},[817,4504,1695],{"class":827},[817,4506,4507,4510,4512,4514,4516,4518],{"class":819,"line":948},[817,4508,4509],{"class":1107},"        borderRadius",[817,4511,1295],{"class":827},[817,4513,841],{"class":827},[817,4515,3436],{"class":844},[817,4517,848],{"class":827},[817,4519,1284],{"class":827},[817,4521,4522],{"class":819,"line":953},[817,4523,4524],{"class":827},"    },\n",[817,4526,4527,4530,4532],{"class":819,"line":1355},[817,4528,4529],{"class":1107},"    defaultVariants",[817,4531,1295],{"class":827},[817,4533,1695],{"class":827},[817,4535,4536,4538,4540,4542,4544,4546],{"class":819,"line":1393},[817,4537,1518],{"class":1107},[817,4539,1295],{"class":827},[817,4541,841],{"class":827},[817,4543,1258],{"class":844},[817,4545,848],{"class":827},[817,4547,1284],{"class":827},[817,4549,4550,4552,4554,4556,4558,4560],{"class":819,"line":1398},[817,4551,1551],{"class":1107},[817,4553,1295],{"class":827},[817,4555,841],{"class":827},[817,4557,2230],{"class":844},[817,4559,848],{"class":827},[817,4561,1284],{"class":827},[817,4563,4564,4566,4568,4570,4572,4574],{"class":819,"line":1417},[817,4565,1535],{"class":1107},[817,4567,1295],{"class":827},[817,4569,841],{"class":827},[817,4571,3408],{"class":844},[817,4573,848],{"class":827},[817,4575,1284],{"class":827},[817,4577,4578],{"class":819,"line":1474},[817,4579,4524],{"class":827},[817,4581,4582,4584,4586],{"class":819,"line":1481},[817,4583,1467],{"class":827},[817,4585,1346],{"class":831},[817,4587,851],{"class":827},[817,4589,4590],{"class":819,"line":1486},[817,4591,886],{"emptyLinePlaceholder":223},[817,4593,4594,4596,4598,4600,4602,4604,4606],{"class":819,"line":1504},[817,4595,893],{"class":892},[817,4597,937],{"class":831},[817,4599,899],{"class":827},[817,4601,867],{"class":902},[817,4603,4491],{"class":831},[817,4605,864],{"class":827},[817,4607,1695],{"class":827},[817,4609,4610,4612,4614],{"class":819,"line":1515},[817,4611,4529],{"class":1107},[817,4613,1295],{"class":827},[817,4615,1695],{"class":827},[817,4617,4618,4620,4622,4624,4626,4628],{"class":819,"line":1532},[817,4619,1518],{"class":1107},[817,4621,1295],{"class":827},[817,4623,841],{"class":827},[817,4625,1300],{"class":844},[817,4627,848],{"class":827},[817,4629,1284],{"class":827},[817,4631,4632,4634,4636,4638,4640,4642],{"class":819,"line":1548},[817,4633,1551],{"class":1107},[817,4635,1295],{"class":827},[817,4637,841],{"class":827},[817,4639,2230],{"class":844},[817,4641,848],{"class":827},[817,4643,1284],{"class":827},[817,4645,4646,4648,4650,4652,4654,4656],{"class":819,"line":1565},[817,4647,1568],{"class":1107},[817,4649,1295],{"class":827},[817,4651,841],{"class":827},[817,4653,1595],{"class":844},[817,4655,848],{"class":827},[817,4657,1284],{"class":827},[817,4659,4660,4662,4664,4666,4668,4670],{"class":819,"line":1602},[817,4661,1605],{"class":1107},[817,4663,1295],{"class":827},[817,4665,841],{"class":827},[817,4667,1336],{"class":844},[817,4669,848],{"class":827},[817,4671,1284],{"class":827},[817,4673,4674,4676,4678,4680,4682,4684],{"class":819,"line":1655},[817,4675,1535],{"class":1107},[817,4677,1295],{"class":827},[817,4679,841],{"class":827},[817,4681,3408],{"class":844},[817,4683,848],{"class":827},[817,4685,1284],{"class":827},[817,4687,4688],{"class":819,"line":1665},[817,4689,4524],{"class":827},[817,4691,4692,4694,4696],{"class":819,"line":1672},[817,4693,1467],{"class":827},[817,4695,1346],{"class":831},[817,4697,851],{"class":827},[817,4699,4700],{"class":819,"line":1677},[817,4701,886],{"emptyLinePlaceholder":223},[817,4703,4704,4706,4708,4710],{"class":819,"line":1698},[817,4705,956],{"class":823},[817,4707,959],{"class":823},[817,4709,962],{"class":831},[817,4711,851],{"class":827},[3069,4713,4715],{"id":4714},"filtering-variants","Filtering Variants",[692,4717,4718,4719,4722],{},"If you only need a subset of the available variants, use the ",[700,4720,4721],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[808,4724,4726],{"className":810,"code":4725,"filename":806,"language":812,"meta":813,"style":813},"import { styleframe } from 'virtual:styleframe';\nimport { useProgressRecipe, useProgressBarRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate primary and success bar colors\nconst progress = useProgressRecipe(s);\nconst progressBar = useProgressBarRecipe(s, {\n    filter: {\n        color: ['primary', 'success'],\n    },\n});\n\nexport default s;\n",[700,4727,4728,4748,4772,4776,4790,4794,4799,4813,4829,4838,4864,4868,4876,4880],{"__ignoreMap":813},[817,4729,4730,4732,4734,4736,4738,4740,4742,4744,4746],{"class":819,"line":820},[817,4731,824],{"class":823},[817,4733,828],{"class":827},[817,4735,832],{"class":831},[817,4737,835],{"class":827},[817,4739,838],{"class":823},[817,4741,841],{"class":827},[817,4743,845],{"class":844},[817,4745,848],{"class":827},[817,4747,851],{"class":827},[817,4749,4750,4752,4754,4756,4758,4760,4762,4764,4766,4768,4770],{"class":819,"line":854},[817,4751,824],{"class":823},[817,4753,828],{"class":827},[817,4755,861],{"class":831},[817,4757,864],{"class":827},[817,4759,867],{"class":831},[817,4761,835],{"class":827},[817,4763,838],{"class":823},[817,4765,841],{"class":827},[817,4767,876],{"class":844},[817,4769,848],{"class":827},[817,4771,851],{"class":827},[817,4773,4774],{"class":819,"line":883},[817,4775,886],{"emptyLinePlaceholder":223},[817,4777,4778,4780,4782,4784,4786,4788],{"class":819,"line":889},[817,4779,893],{"class":892},[817,4781,896],{"class":831},[817,4783,899],{"class":827},[817,4785,832],{"class":902},[817,4787,905],{"class":831},[817,4789,851],{"class":827},[817,4791,4792],{"class":819,"line":910},[817,4793,886],{"emptyLinePlaceholder":223},[817,4795,4796],{"class":819,"line":915},[817,4797,4798],{"class":2783},"\u002F\u002F Only generate primary and success bar colors\n",[817,4800,4801,4803,4805,4807,4809,4811],{"class":819,"line":932},[817,4802,893],{"class":892},[817,4804,920],{"class":831},[817,4806,899],{"class":827},[817,4808,861],{"class":902},[817,4810,927],{"class":831},[817,4812,851],{"class":827},[817,4814,4815,4817,4819,4821,4823,4825,4827],{"class":819,"line":948},[817,4816,893],{"class":892},[817,4818,937],{"class":831},[817,4820,899],{"class":827},[817,4822,867],{"class":902},[817,4824,4491],{"class":831},[817,4826,864],{"class":827},[817,4828,1695],{"class":827},[817,4830,4831,4834,4836],{"class":819,"line":953},[817,4832,4833],{"class":1107},"    filter",[817,4835,1295],{"class":827},[817,4837,1695],{"class":827},[817,4839,4840,4842,4844,4846,4848,4850,4852,4854,4856,4858,4860,4862],{"class":819,"line":1355},[817,4841,1518],{"class":1107},[817,4843,1295],{"class":827},[817,4845,1821],{"class":831},[817,4847,848],{"class":827},[817,4849,1300],{"class":844},[817,4851,848],{"class":827},[817,4853,864],{"class":827},[817,4855,841],{"class":827},[817,4857,3034],{"class":844},[817,4859,848],{"class":827},[817,4861,1827],{"class":831},[817,4863,1284],{"class":827},[817,4865,4866],{"class":819,"line":1393},[817,4867,4524],{"class":827},[817,4869,4870,4872,4874],{"class":819,"line":1398},[817,4871,1467],{"class":827},[817,4873,1346],{"class":831},[817,4875,851],{"class":827},[817,4877,4878],{"class":819,"line":1417},[817,4879,886],{"emptyLinePlaceholder":223},[817,4881,4882,4884,4886,4888],{"class":819,"line":1474},[817,4883,956],{"class":823},[817,4885,959],{"class":823},[817,4887,962],{"class":831},[817,4889,851],{"class":827},[3441,4891,4892,4894],{},[696,4893,3445],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,4896,73],{"id":4897},"api-reference",[3069,4899,4901],{"id":4900},"useprogressrecipes-options",[700,4902,4903],{},"useProgressRecipe(s, options?)",[692,4905,4906],{},"Creates the progress track recipe with background color, border radius, and orientation support.",[692,4908,4909],{},[696,4910,4911],{},"Parameters:",[3083,4913,4914,4926],{},[3086,4915,4916],{},[3089,4917,4918,4921,4924],{},[3092,4919,4920],{},"Parameter",[3092,4922,4923],{},"Type",[3092,4925,3631],{},[3102,4927,4928,4943,4958,4973,4988,5003],{},[3089,4929,4930,4935,4940],{},[3107,4931,4932],{},[700,4933,4934],{},"s",[3107,4936,4937],{},[700,4938,4939],{},"Styleframe",[3107,4941,4942],{},"The Styleframe instance",[3089,4944,4945,4950,4955],{},[3107,4946,4947],{},[700,4948,4949],{},"options",[3107,4951,4952],{},[700,4953,4954],{},"DeepPartial\u003CRecipeConfig>",[3107,4956,4957],{},"Optional overrides for the recipe configuration",[3089,4959,4960,4965,4970],{},[3107,4961,4962],{},[700,4963,4964],{},"options.base",[3107,4966,4967],{},[700,4968,4969],{},"VariantDeclarationsBlock",[3107,4971,4972],{},"Custom base styles for the track",[3089,4974,4975,4980,4985],{},[3107,4976,4977],{},[700,4978,4979],{},"options.variants",[3107,4981,4982],{},[700,4983,4984],{},"Variants",[3107,4986,4987],{},"Custom variant definitions for the recipe",[3089,4989,4990,4995,5000],{},[3107,4991,4992],{},[700,4993,4994],{},"options.defaultVariants",[3107,4996,4997],{},[700,4998,4999],{},"Record\u003Ckeyof Variants, string>",[3107,5001,5002],{},"Default variant values for the recipe",[3089,5004,5005,5010,5015],{},[3107,5006,5007],{},[700,5008,5009],{},"options.filter",[3107,5011,5012],{},[700,5013,5014],{},"Record\u003Cstring, string[]>",[3107,5016,5017],{},"Limit which variant values are generated",[692,5019,5020],{},[696,5021,5022],{},"Variants:",[3083,5024,5025,5038],{},[3086,5026,5027],{},[3089,5028,5029,5032,5035],{},[3092,5030,5031],{},"Variant",[3092,5033,5034],{},"Options",[3092,5036,5037],{},"Default",[3102,5039,5040,5058,5074],{},[3089,5041,5042,5046,5054],{},[3107,5043,5044],{},[700,5045,1527],{},[3107,5047,5048,3028,5050,3028,5052],{},[700,5049,1239],{},[700,5051,1249],{},[700,5053,1258],{},[3107,5055,5056],{},[700,5057,1258],{},[3089,5059,5060,5064,5070],{},[3107,5061,5062],{},[700,5063,1560],{},[3107,5065,5066,3028,5068],{},[700,5067,2230],{},[700,5069,1788],{},[3107,5071,5072],{},[700,5073,2230],{},[3089,5075,5076,5080,5092],{},[3107,5077,5078],{},[700,5079,1450],{},[3107,5081,5082,3028,5084,3028,5086,3028,5088,3028,5090],{},[700,5083,3309],{},[700,5085,3370],{},[700,5087,2214],{},[700,5089,3408],{},[700,5091,3313],{},[3107,5093,5094],{},[700,5095,2214],{},[3069,5097,5099],{"id":5098},"useprogressbarrecipes-options",[700,5100,5101],{},"useProgressBarRecipe(s, options?)",[692,5103,5104],{},"Creates the progress bar fill recipe with color, orientation, inversion, and indeterminate animation support. Registers 8 keyframes (4 horizontal + 4 vertical) automatically.",[692,5106,5107],{},[696,5108,4911],{},[3083,5110,5111,5121],{},[3086,5112,5113],{},[3089,5114,5115,5117,5119],{},[3092,5116,4920],{},[3092,5118,4923],{},[3092,5120,3631],{},[3102,5122,5123,5135,5147,5160,5172,5184,5199],{},[3089,5124,5125,5129,5133],{},[3107,5126,5127],{},[700,5128,4934],{},[3107,5130,5131],{},[700,5132,4939],{},[3107,5134,4942],{},[3089,5136,5137,5141,5145],{},[3107,5138,5139],{},[700,5140,4949],{},[3107,5142,5143],{},[700,5144,4954],{},[3107,5146,4957],{},[3089,5148,5149,5153,5157],{},[3107,5150,5151],{},[700,5152,4964],{},[3107,5154,5155],{},[700,5156,4969],{},[3107,5158,5159],{},"Custom base styles for the bar",[3089,5161,5162,5166,5170],{},[3107,5163,5164],{},[700,5165,4979],{},[3107,5167,5168],{},[700,5169,4984],{},[3107,5171,4987],{},[3089,5173,5174,5178,5182],{},[3107,5175,5176],{},[700,5177,4994],{},[3107,5179,5180],{},[700,5181,4999],{},[3107,5183,5002],{},[3089,5185,5186,5191,5196],{},[3107,5187,5188],{},[700,5189,5190],{},"options.compoundVariants",[3107,5192,5193],{},[700,5194,5195],{},"CompoundVariant[]",[3107,5197,5198],{},"Custom compound variant definitions for the recipe",[3089,5200,5201,5205,5209],{},[3107,5202,5203],{},[700,5204,5009],{},[3107,5206,5207],{},[700,5208,5014],{},[3107,5210,5017],{},[692,5212,5213],{},[696,5214,5022],{},[3083,5216,5217,5227],{},[3086,5218,5219],{},[3089,5220,5221,5223,5225],{},[3092,5222,5031],{},[3092,5224,5034],{},[3092,5226,5037],{},[3102,5228,5229,5259,5275,5291,5313],{},[3089,5230,5231,5235,5255],{},[3107,5232,5233],{},[700,5234,1527],{},[3107,5236,5237,3028,5239,3028,5241,3028,5243,3028,5245,3028,5247,3028,5249,3028,5251,3028,5253],{},[700,5238,1300],{},[700,5240,3031],{},[700,5242,3034],{},[700,5244,3037],{},[700,5246,3040],{},[700,5248,3043],{},[700,5250,1239],{},[700,5252,1249],{},[700,5254,1258],{},[3107,5256,5257],{},[700,5258,1300],{},[3089,5260,5261,5265,5271],{},[3107,5262,5263],{},[700,5264,1560],{},[3107,5266,5267,3028,5269],{},[700,5268,2230],{},[700,5270,1788],{},[3107,5272,5273],{},[700,5274,2230],{},[3089,5276,5277,5281,5287],{},[3107,5278,5279],{},[700,5280,2567],{},[3107,5282,5283,3028,5285],{},[700,5284,1585],{},[700,5286,1595],{},[3107,5288,5289],{},[700,5290,1595],{},[3089,5292,5293,5297,5309],{},[3107,5294,5295],{},[700,5296,2586],{},[3107,5298,5299,3028,5301,3028,5303,3028,5305,3028,5307],{},[700,5300,1336],{},[700,5302,3654],{},[700,5304,3674],{},[700,5306,3692],{},[700,5308,3712],{},[3107,5310,5311],{},[700,5312,1336],{},[3089,5314,5315,5319,5331],{},[3107,5316,5317],{},[700,5318,1450],{},[3107,5320,5321,3028,5323,3028,5325,3028,5327,3028,5329],{},[700,5322,3309],{},[700,5324,3370],{},[700,5326,2214],{},[700,5328,3408],{},[700,5330,3313],{},[3107,5332,5333],{},[700,5334,2214],{},[692,5336,5337],{},[709,5338,5339],{"href":132},"Learn more about recipes →",[688,5341,5343],{"id":5342},"best-practices","Best Practices",[728,5345,5346,5362,5377,5386,5400,5406,5415,5424],{},[731,5347,5348,5356,5357,1081,5359,5361],{},[696,5349,5350,5351,1081,5353,5355],{},"Pass ",[700,5352,1450],{},[700,5354,1560],{}," to both recipes",": The track and bar must share the same ",[700,5358,1450],{},[700,5360,1560],{}," values so that border radii and layout directions match.",[731,5363,5364,5367,5368,5370,5371,5373,5374,5376],{},[696,5365,5366],{},"Use semantic bar colors for meaning",": Use ",[700,5369,3034],{}," for completions, ",[700,5372,3043],{}," for failures, and ",[700,5375,1300],{}," for general progress — this keeps your UI consistent when tokens change.",[731,5378,5379,5385],{},[696,5380,5381,5382,5384],{},"Use ",[700,5383,1258],{}," for the track",": The track should be a subtle background. Save color for the bar where it communicates progress status.",[731,5387,5388,5394,5395,3598,5397,5399],{},[696,5389,5390,5391,5393],{},"Omit ",[700,5392,4021],{}," for indeterminate progress",": When ",[700,5396,1714],{},[700,5398,3601],{},", screen readers should not announce a specific percentage. Omit the attribute entirely.",[731,5401,5402,5405],{},[696,5403,5404],{},"Set the fill with inline styles",": The recipe handles visual styling, but the bar's width (or height) percentage must be set via an inline style based on the current value.",[731,5407,5408,5411,5412,5414],{},[696,5409,5410],{},"Provide an explicit height for vertical progress",": The vertical track uses ",[700,5413,3483],{},", so the parent container must have an explicit height for the progress bar to be visible.",[731,5416,5417,5420,5421,5423],{},[696,5418,5419],{},"Filter what you don't need",": If your component only uses a few colors, pass a ",[700,5422,4721],{}," option to reduce generated CSS.",[731,5425,5426,5429,5430,5433],{},[696,5427,5428],{},"Override defaults at the recipe level",": Set your most common variant combination as ",[700,5431,5432],{},"defaultVariants"," so component consumers write less code.",[688,5435,5437],{"id":5436},"faq","FAQ",[5439,5440,5441,5452,5481,5559,5574,5592,5731,5749],"accordion",{},[5442,5443,5446,5447,1081,5449,5451],"accordion-item",{"icon":5444,"label":5445},"i-lucide-circle-help","Why are there two separate recipes instead of one?","The progress indicator has two distinct visual elements: a neutral background track and a colored fill bar. Each needs independent styling — the track has neutral colors and overflow hidden, while the bar has semantic colors, transitions, and animations. Two separate recipes give each element its own variants while sharing the ",[700,5448,1450],{},[700,5450,1560],{}," axes.",[5442,5453,5455,5456,5458,5459,5461,5462,3028,5465,3028,5468,3738,5471,5474,5475,5477,5478,5480],{"icon":5444,"label":5454},"How do indeterminate animations work?","The bar recipe registers 8 keyframe animations during setup (4 for horizontal, 4 for vertical). When the ",[700,5457,2586],{}," variant is set to a value other than ",[700,5460,1336],{},", the bar applies the corresponding ",[700,5463,5464],{},"animationName",[700,5466,5467],{},"animationDuration",[700,5469,5470],{},"animationTimingFunction",[700,5472,5473],{},"animationIterationCount"," properties. In vertical orientation, compound variants automatically swap the animation to the vertical keyframe version. The keyframes are registered automatically when you call ",[700,5476,706],{}," — no manual ",[700,5479,751],{}," definition is needed.",[5442,5482,5484,5494],{"icon":5444,"label":5483},"How do I create an indeterminate progress bar?",[692,5485,4018,5486,3310,5488,5490,5491,5493],{},[700,5487,1714],{},[700,5489,3601],{}," and choose an ",[700,5492,2586],{}," variant. The bar displays at 50% width (or height) and animates continuously:",[808,5495,5497],{"className":2884,"code":5496,"language":2887,"meta":813,"style":813},"\u003Cdiv class=\"progress(...)\">\n    \u003Cdiv class=\"progressBar({ animation: 'carousel' })\" style=\"width: 50%\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[700,5498,5499,5517,5551],{"__ignoreMap":813},[817,5500,5501,5503,5505,5507,5509,5511,5513,5515],{"class":819,"line":820},[817,5502,1104],{"class":827},[817,5504,1991],{"class":1107},[817,5506,2975],{"class":892},[817,5508,899],{"class":827},[817,5510,1119],{"class":827},[817,5512,3835],{"class":844},[817,5514,1119],{"class":827},[817,5516,1126],{"class":827},[817,5518,5519,5521,5523,5525,5527,5529,5532,5534,5536,5538,5540,5543,5545,5547,5549],{"class":819,"line":854},[817,5520,1885],{"class":827},[817,5522,1991],{"class":1107},[817,5524,2975],{"class":892},[817,5526,899],{"class":827},[817,5528,1119],{"class":827},[817,5530,5531],{"class":844},"progressBar({ animation: 'carousel' })",[817,5533,1119],{"class":827},[817,5535,2987],{"class":892},[817,5537,899],{"class":827},[817,5539,1119],{"class":827},[817,5541,5542],{"class":844},"width: 50%",[817,5544,1119],{"class":827},[817,5546,2999],{"class":827},[817,5548,1991],{"class":1107},[817,5550,1126],{"class":827},[817,5552,5553,5555,5557],{"class":819,"line":883},[817,5554,1861],{"class":827},[817,5556,1991],{"class":1107},[817,5558,1126],{"class":827},[5442,5560,5562,5564,5565,5567,5568,5570,5571,5573],{"icon":5444,"label":5561},"What is the difference between light, dark, and neutral colors?",[700,5563,1239],{}," always uses the same gray tones regardless of the color scheme. ",[700,5566,1249],{}," always uses darker gray tones. ",[700,5569,1258],{}," adapts to the current color scheme: it appears light in light mode and dark in dark mode. Use ",[700,5572,1258],{}," when you want the progress bar to blend naturally with the surrounding interface.",[5442,5575,694,5577,5579,5580,5583,5584,5587,5588,5591],{"icon":5444,"label":5576},"How does the inverted variant work?",[700,5578,2567],{}," variant reverses the fill direction using CSS auto margins. In horizontal mode, ",[700,5581,5582],{},"marginLeft: auto"," pushes the bar to the right so it fills right-to-left. In vertical mode, ",[700,5585,5586],{},"marginBottom: auto"," pushes the bar to the top of the ",[700,5589,5590],{},"column-reverse"," container so it fills top-to-bottom.",[5442,5593,5595,5598],{"icon":5444,"label":5594},"Can I stack multiple bars in one track?",[692,5596,5597],{},"Yes. The track is a flex container, so you can place multiple bar elements inside it. Each bar independently controls its own color and percentage width. This creates a segmented progress indicator:",[808,5599,5601],{"className":2884,"code":5600,"language":2887,"meta":813,"style":813},"\u003Cdiv class=\"progress(...)\">\n    \u003Cdiv class=\"progressBar({ color: 'success' })\" style=\"width: 40%\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"progressBar({ color: 'warning' })\" style=\"width: 20%\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"progressBar({ color: 'error' })\" style=\"width: 10%\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[700,5602,5603,5621,5655,5689,5723],{"__ignoreMap":813},[817,5604,5605,5607,5609,5611,5613,5615,5617,5619],{"class":819,"line":820},[817,5606,1104],{"class":827},[817,5608,1991],{"class":1107},[817,5610,2975],{"class":892},[817,5612,899],{"class":827},[817,5614,1119],{"class":827},[817,5616,3835],{"class":844},[817,5618,1119],{"class":827},[817,5620,1126],{"class":827},[817,5622,5623,5625,5627,5629,5631,5633,5636,5638,5640,5642,5644,5647,5649,5651,5653],{"class":819,"line":854},[817,5624,1885],{"class":827},[817,5626,1991],{"class":1107},[817,5628,2975],{"class":892},[817,5630,899],{"class":827},[817,5632,1119],{"class":827},[817,5634,5635],{"class":844},"progressBar({ color: 'success' })",[817,5637,1119],{"class":827},[817,5639,2987],{"class":892},[817,5641,899],{"class":827},[817,5643,1119],{"class":827},[817,5645,5646],{"class":844},"width: 40%",[817,5648,1119],{"class":827},[817,5650,2999],{"class":827},[817,5652,1991],{"class":1107},[817,5654,1126],{"class":827},[817,5656,5657,5659,5661,5663,5665,5667,5670,5672,5674,5676,5678,5681,5683,5685,5687],{"class":819,"line":883},[817,5658,1885],{"class":827},[817,5660,1991],{"class":1107},[817,5662,2975],{"class":892},[817,5664,899],{"class":827},[817,5666,1119],{"class":827},[817,5668,5669],{"class":844},"progressBar({ color: 'warning' })",[817,5671,1119],{"class":827},[817,5673,2987],{"class":892},[817,5675,899],{"class":827},[817,5677,1119],{"class":827},[817,5679,5680],{"class":844},"width: 20%",[817,5682,1119],{"class":827},[817,5684,2999],{"class":827},[817,5686,1991],{"class":1107},[817,5688,1126],{"class":827},[817,5690,5691,5693,5695,5697,5699,5701,5704,5706,5708,5710,5712,5715,5717,5719,5721],{"class":819,"line":889},[817,5692,1885],{"class":827},[817,5694,1991],{"class":1107},[817,5696,2975],{"class":892},[817,5698,899],{"class":827},[817,5700,1119],{"class":827},[817,5702,5703],{"class":844},"progressBar({ color: 'error' })",[817,5705,1119],{"class":827},[817,5707,2987],{"class":892},[817,5709,899],{"class":827},[817,5711,1119],{"class":827},[817,5713,5714],{"class":844},"width: 10%",[817,5716,1119],{"class":827},[817,5718,2999],{"class":827},[817,5720,1991],{"class":1107},[817,5722,1126],{"class":827},[817,5724,5725,5727,5729],{"class":819,"line":910},[817,5726,1861],{"class":827},[817,5728,1991],{"class":1107},[817,5730,1126],{"class":827},[5442,5732,5734,5735,5737,5738,1081,5741,5744,5745,5748],{"icon":5444,"label":5733},"Why does the inverted variant use string keys instead of a boolean?","Recipe variant values are always strings in the configuration object. The ",[700,5736,2567],{}," variant uses ",[700,5739,5740],{},"\"true\"",[700,5742,5743],{},"\"false\""," as string keys internally, but your component can accept a boolean prop and convert it with ",[700,5746,5747],{},"String(inverted)"," when passing it to the recipe function.",[5442,5750,5752,5753,3028,5755,3738,5757,5760,5761,5764],{"icon":5444,"label":5751},"Can I use the Progress recipe without the design tokens preset?","The Progress recipe references design tokens like ",[700,5754,3115],{},[700,5756,3398],{},[700,5758,5759],{},"@easing.ease-in-out"," through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use ",[700,5762,5763],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[5766,5767,5768],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":813,"searchDepth":854,"depth":854,"links":5770},[5771,5772,5773,5774,5777,5780,5784,5785,5789,5790,5791,5795,5799,5800],{"id":690,"depth":854,"text":78},{"id":722,"depth":854,"text":723},{"id":785,"depth":854,"text":786},{"id":3022,"depth":854,"text":195,"children":5775},[5776],{"id":3071,"depth":883,"text":3072},{"id":3302,"depth":854,"text":3303,"children":5778},[5779],{"id":3320,"depth":883,"text":3321},{"id":1560,"depth":854,"text":3452,"children":5781},[5782,5783],{"id":2230,"depth":883,"text":3465},{"id":1788,"depth":883,"text":3477},{"id":2567,"depth":854,"text":3541},{"id":3591,"depth":854,"text":3592,"children":5786},[5787,5788],{"id":3613,"depth":883,"text":3614},{"id":3726,"depth":883,"text":3727},{"id":3750,"depth":854,"text":3751},{"id":3888,"depth":854,"text":568},{"id":4399,"depth":854,"text":4400,"children":5792},[5793,5794],{"id":4403,"depth":883,"text":4404},{"id":4714,"depth":883,"text":4715},{"id":4897,"depth":854,"text":73,"children":5796},[5797,5798],{"id":4900,"depth":883,"text":4903},{"id":5098,"depth":883,"text":5101},{"id":5342,"depth":854,"text":5343},{"id":5436,"depth":854,"text":5437},"A progress indicator component with a track and fill bar. Supports multiple colors, sizes, orientations, inverted fill direction, and indeterminate animations through the recipe system.",null,{},{"icon":7},{"title":416,"description":5801},"DsjJXFtOsw1zLyfDdHaTKKqOyXZViAlw1uucyO5hPxg",[5808,5810],{"title":412,"path":413,"stem":414,"description":5809,"icon":7,"children":-1},"A status indicator component positioned at the corner of an element. Supports multiple colors, visual styles, sizes, positions, and inset mode through the recipe system.",{"title":420,"path":421,"stem":422,"description":5811,"icon":7,"children":-1},"A loading placeholder component that displays a pulsing gray block to indicate content is being loaded. Supports multiple sizes and a rounded option through the recipe system.",1781596337365]