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