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