[{"data":1,"prerenderedAt":1430},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-components-stepper":293,"-colorffy-ui-components-stepper-surround":1425},[4,21,115],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Colorffy CSS","i-lucide-palette","\u002Fcolorffy-css","2.colorffy-css",[27,32,37,42,78,99],{"title":28,"path":29,"stem":30,"icon":31},"Overview","\u002Fcolorffy-css\u002Foverview","2.colorffy-css\u002F1.overview","i-lucide-book-open",{"title":33,"path":34,"stem":35,"icon":36},"Color System","\u002Fcolorffy-css\u002Fcolor-system","2.colorffy-css\u002F2.color-system","i-lucide-droplet",{"title":38,"path":39,"stem":40,"icon":41},"Customization","\u002Fcolorffy-css\u002Fcustomization","2.colorffy-css\u002F3.customization","i-lucide-settings",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":20},"Utilities","i-lucide-wrench","\u002Fcolorffy-css\u002Futilities","2.colorffy-css\u002F4.utilities",[48,53,58,63,68,73],{"title":49,"path":50,"stem":51,"icon":52},"Borders & Shadows","\u002Fcolorffy-css\u002Futilities\u002Fborders-shadows","2.colorffy-css\u002F4.utilities\u002F01.borders-shadows","i-lucide-frame",{"title":54,"path":55,"stem":56,"icon":57},"Colors & Gradients","\u002Fcolorffy-css\u002Futilities\u002Fcolors-gradients","2.colorffy-css\u002F4.utilities\u002F02.colors-gradients","i-lucide-paint-bucket",{"title":59,"path":60,"stem":61,"icon":62},"Display & Flexbox","\u002Fcolorffy-css\u002Futilities\u002Fdisplay-flexbox","2.colorffy-css\u002F4.utilities\u002F03.display-flexbox","i-lucide-stretch-horizontal",{"title":64,"path":65,"stem":66,"icon":67},"Effects","\u002Fcolorffy-css\u002Futilities\u002Feffects","2.colorffy-css\u002F4.utilities\u002F04.effects","i-lucide-wand-sparkles",{"title":69,"path":70,"stem":71,"icon":72},"Spacing","\u002Fcolorffy-css\u002Futilities\u002Fspacing","2.colorffy-css\u002F4.utilities\u002F05.spacing","i-lucide-ruler",{"title":74,"path":75,"stem":76,"icon":77},"Typography","\u002Fcolorffy-css\u002Futilities\u002Ftypography","2.colorffy-css\u002F4.utilities\u002F06.typography","i-lucide-type",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":20},"Layout","i-lucide-layout-template","\u002Fcolorffy-css\u002Flayout","2.colorffy-css\u002F5.layout",[84,89,94],{"title":85,"path":86,"stem":87,"icon":88},"App Layout","\u002Fcolorffy-css\u002Flayout\u002Fapp-layout","2.colorffy-css\u002F5.layout\u002F01.app-layout","i-lucide-app-window",{"title":90,"path":91,"stem":92,"icon":93},"Flex Grid","\u002Fcolorffy-css\u002Flayout\u002Fflex-grid","2.colorffy-css\u002F5.layout\u002F02.flex-grid","i-lucide-columns-3",{"title":95,"path":96,"stem":97,"icon":98},"Grid","\u002Fcolorffy-css\u002Flayout\u002Fgrid","2.colorffy-css\u002F5.layout\u002F03.grid","i-lucide-grid-3x3",{"title":100,"icon":101,"path":102,"stem":103,"children":104,"page":20},"SCSS API","i-lucide-braces","\u002Fcolorffy-css\u002Fscss-api","2.colorffy-css\u002F6.scss-api",[105,110],{"title":106,"path":107,"stem":108,"icon":109},"Mixins","\u002Fcolorffy-css\u002Fscss-api\u002Fmixins","2.colorffy-css\u002F6.scss-api\u002F01.mixins","i-lucide-code",{"title":111,"path":112,"stem":113,"icon":114},"Tonal Tokens","\u002Fcolorffy-css\u002Fscss-api\u002Ftonal-tokens","2.colorffy-css\u002F6.scss-api\u002F02.tonal-tokens","i-lucide-swatch-book",{"title":116,"icon":117,"path":118,"stem":119,"children":120,"page":20},"Colorffy UI","i-lucide-blocks","\u002Fcolorffy-ui","3.colorffy-ui",[121,125,288],{"title":122,"path":123,"stem":124,"icon":31},"Usage","\u002Fcolorffy-ui\u002Fusage","3.colorffy-ui\u002F1.usage",{"title":126,"icon":127,"path":128,"stem":129,"children":130,"page":20},"Components","i-lucide-component","\u002Fcolorffy-ui\u002Fcomponents","3.colorffy-ui\u002F2.components",[131,135,140,145,150,155,160,165,170,175,180,185,190,195,200,204,209,214,218,223,228,233,238,243,248,253,258,263,268,273,278,283],{"title":28,"path":132,"stem":133,"icon":134},"\u002Fcolorffy-ui\u002Fcomponents\u002Foverview","3.colorffy-ui\u002F2.components\u002F00.overview","i-lucide-layout-grid",{"title":136,"path":137,"stem":138,"icon":139},"Accordion","\u002Fcolorffy-ui\u002Fcomponents\u002Faccordion","3.colorffy-ui\u002F2.components\u002F01.accordion","i-lucide-chevrons-down-up",{"title":141,"path":142,"stem":143,"icon":144},"Alert","\u002Fcolorffy-ui\u002Fcomponents\u002Falert","3.colorffy-ui\u002F2.components\u002F02.alert","i-lucide-triangle-alert",{"title":146,"path":147,"stem":148,"icon":149},"Avatar","\u002Fcolorffy-ui\u002Fcomponents\u002Favatar","3.colorffy-ui\u002F2.components\u002F03.avatar","i-lucide-circle-user",{"title":151,"path":152,"stem":153,"icon":154},"Badge","\u002Fcolorffy-ui\u002Fcomponents\u002Fbadge","3.colorffy-ui\u002F2.components\u002F04.badge","i-lucide-tag",{"title":156,"path":157,"stem":158,"icon":159},"Breadcrumb","\u002Fcolorffy-ui\u002Fcomponents\u002Fbreadcrumb","3.colorffy-ui\u002F2.components\u002F05.breadcrumb","i-lucide-chevron-right",{"title":161,"path":162,"stem":163,"icon":164},"Button","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton","3.colorffy-ui\u002F2.components\u002F06.button","i-lucide-square-mouse-pointer",{"title":166,"path":167,"stem":168,"icon":169},"Button Group","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-group","3.colorffy-ui\u002F2.components\u002F07.button-group","i-lucide-square-stack",{"title":171,"path":172,"stem":173,"icon":174},"Button Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-menu","3.colorffy-ui\u002F2.components\u002F08.button-menu","i-lucide-menu",{"title":176,"path":177,"stem":178,"icon":179},"Card","\u002Fcolorffy-ui\u002Fcomponents\u002Fcard","3.colorffy-ui\u002F2.components\u002F09.card","i-lucide-square",{"title":181,"path":182,"stem":183,"icon":184},"Datatable","\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable","3.colorffy-ui\u002F2.components\u002F10.datatable","i-lucide-table",{"title":186,"path":187,"stem":188,"icon":189},"Empty","\u002Fcolorffy-ui\u002Fcomponents\u002Fempty","3.colorffy-ui\u002F2.components\u002F11.empty","i-lucide-inbox",{"title":191,"path":192,"stem":193,"icon":194},"Icons","\u002Fcolorffy-ui\u002Fcomponents\u002Ficons","3.colorffy-ui\u002F2.components\u002F12.icons","i-lucide-shapes",{"title":196,"path":197,"stem":198,"icon":199},"Inputs","\u002Fcolorffy-ui\u002Fcomponents\u002Finputs","3.colorffy-ui\u002F2.components\u002F13.inputs","i-lucide-text-cursor-input",{"title":79,"path":201,"stem":202,"icon":203},"\u002Fcolorffy-ui\u002Fcomponents\u002Flayout","3.colorffy-ui\u002F2.components\u002F14.layout","i-lucide-layout",{"title":205,"path":206,"stem":207,"icon":208},"List","\u002Fcolorffy-ui\u002Fcomponents\u002Flist","3.colorffy-ui\u002F2.components\u002F15.list","i-lucide-list",{"title":210,"path":211,"stem":212,"icon":213},"Loading","\u002Fcolorffy-ui\u002Fcomponents\u002Floading","3.colorffy-ui\u002F2.components\u002F16.loading","i-lucide-loader-circle",{"title":215,"path":216,"stem":217,"icon":88},"Modal","\u002Fcolorffy-ui\u002Fcomponents\u002Fmodal","3.colorffy-ui\u002F2.components\u002F17.modal",{"title":219,"path":220,"stem":221,"icon":222},"Navbar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavbar","3.colorffy-ui\u002F2.components\u002F18.navbar","i-lucide-panel-top",{"title":224,"path":225,"stem":226,"icon":227},"Navigation Bar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavigation-bar","3.colorffy-ui\u002F2.components\u002F19.navigation-bar","i-lucide-navigation",{"title":229,"path":230,"stem":231,"icon":232},"Popover","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover","3.colorffy-ui\u002F2.components\u002F20.popover","i-lucide-message-square",{"title":234,"path":235,"stem":236,"icon":237},"Popover Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover-menu","3.colorffy-ui\u002F2.components\u002F21.popover-menu","i-lucide-ellipsis",{"title":239,"path":240,"stem":241,"icon":242},"Progress","\u002Fcolorffy-ui\u002Fcomponents\u002Fprogress","3.colorffy-ui\u002F2.components\u002F22.progress","i-lucide-loader",{"title":244,"path":245,"stem":246,"icon":247},"Segmented Controls","\u002Fcolorffy-ui\u002Fcomponents\u002Fsegmented-controls","3.colorffy-ui\u002F2.components\u002F23.segmented-controls","i-lucide-toggle-left",{"title":249,"path":250,"stem":251,"icon":252},"Sidebar","\u002Fcolorffy-ui\u002Fcomponents\u002Fsidebar","3.colorffy-ui\u002F2.components\u002F24.sidebar","i-lucide-panel-left",{"title":254,"path":255,"stem":256,"icon":257},"Skeleton","\u002Fcolorffy-ui\u002Fcomponents\u002Fskeleton","3.colorffy-ui\u002F2.components\u002F25.skeleton","i-lucide-square-dashed",{"title":259,"path":260,"stem":261,"icon":262},"Tabs","\u002Fcolorffy-ui\u002Fcomponents\u002Ftabs","3.colorffy-ui\u002F2.components\u002F26.tabs","i-lucide-panels-top-left",{"title":264,"path":265,"stem":266,"icon":267},"Tooltip","\u002Fcolorffy-ui\u002Fcomponents\u002Ftooltip","3.colorffy-ui\u002F2.components\u002F27.tooltip","i-lucide-message-circle",{"title":269,"path":270,"stem":271,"icon":272},"Divider","\u002Fcolorffy-ui\u002Fcomponents\u002Fdivider","3.colorffy-ui\u002F2.components\u002F28.divider","i-lucide-separator-horizontal",{"title":274,"path":275,"stem":276,"icon":277},"Chip","\u002Fcolorffy-ui\u002Fcomponents\u002Fchip","3.colorffy-ui\u002F2.components\u002F29.chip","i-lucide-tags",{"title":279,"path":280,"stem":281,"icon":282},"Stepper","\u002Fcolorffy-ui\u002Fcomponents\u002Fstepper","3.colorffy-ui\u002F2.components\u002F30.stepper","i-lucide-list-ordered",{"title":284,"path":285,"stem":286,"icon":287},"Timeline","\u002Fcolorffy-ui\u002Fcomponents\u002Ftimeline","3.colorffy-ui\u002F2.components\u002F31.timeline","i-lucide-history",{"title":289,"path":290,"stem":291,"icon":292},"Styling","\u002Fcolorffy-ui\u002Fstyling","3.colorffy-ui\u002F3.styling","i-lucide-paintbrush",{"id":294,"title":279,"body":295,"description":1418,"extension":1419,"links":1420,"meta":1421,"navigation":1422,"path":280,"seo":1423,"stem":281,"__hash__":1424},"docs\u002F3.colorffy-ui\u002F2.components\u002F30.stepper.md",{"type":296,"value":297,"toc":1410},"minimark",[298,321,326,727,737,741,748,803,807,813,876,880,890,1159,1163,1172,1254,1258,1374,1387,1406],[299,300,301,305,306,309,310,313,314,316,317,320],"p",{},[302,303,304],"code",{},"UiStepper"," renders a horizontal or vertical progress indicator for multi-step flows (checkout, onboarding, wizards). Each step derives its status — upcoming, current, or completed — from where ",[302,307,308],{},"activeStep"," sits within the ",[302,311,312],{},"steps"," array. The component is uncontrolled by default: keep ",[302,315,308],{}," and the ",[302,318,319],{},"updateActiveStep"," emit in sync to drive it from a parent (v-model style).",[322,323,325],"h2",{"id":324},"basic-usage","Basic usage",[327,328,333],"pre",{"className":329,"code":330,"language":331,"meta":332,"style":332},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst activeStep = ref('profile')\nconst steps = [\n  { id: 'account', label: 'Account', description: 'Create your credentials' },\n  { id: 'profile', label: 'Profile', description: 'Tell us about yourself' },\n  { id: 'billing', label: 'Billing', description: 'Add a payment method' },\n  { id: 'confirm', label: 'Confirm', description: 'Review and finish' },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiStepper\n    :steps=\"steps\"\n    :active-step=\"activeStep\"\n    @update-active-step=\"activeStep = $event\"\n  \u002F>\n\u003C\u002Ftemplate>\n","vue","",[302,334,335,370,398,405,433,446,497,540,584,628,634,644,649,659,668,683,697,712,718],{"__ignoreMap":332},[336,337,340,344,348,352,355,358,361,365,367],"span",{"class":338,"line":339},"line",1,[336,341,343],{"class":342},"sMK4o","\u003C",[336,345,347],{"class":346},"swJcz","script",[336,349,351],{"class":350},"spNyl"," setup",[336,353,354],{"class":350}," lang",[336,356,357],{"class":342},"=",[336,359,360],{"class":342},"\"",[336,362,364],{"class":363},"sfazB","ts",[336,366,360],{"class":342},[336,368,369],{"class":342},">\n",[336,371,373,377,380,384,387,390,393,395],{"class":338,"line":372},2,[336,374,376],{"class":375},"s7zQu","import",[336,378,379],{"class":342}," {",[336,381,383],{"class":382},"sTEyZ"," ref",[336,385,386],{"class":342}," }",[336,388,389],{"class":375}," from",[336,391,392],{"class":342}," '",[336,394,331],{"class":363},[336,396,397],{"class":342},"'\n",[336,399,401],{"class":338,"line":400},3,[336,402,404],{"emptyLinePlaceholder":403},true,"\n",[336,406,408,411,414,416,419,422,425,428,430],{"class":338,"line":407},4,[336,409,410],{"class":350},"const",[336,412,413],{"class":382}," activeStep ",[336,415,357],{"class":342},[336,417,383],{"class":418},"s2Zo4",[336,420,421],{"class":382},"(",[336,423,424],{"class":342},"'",[336,426,427],{"class":363},"profile",[336,429,424],{"class":342},[336,431,432],{"class":382},")\n",[336,434,436,438,441,443],{"class":338,"line":435},5,[336,437,410],{"class":350},[336,439,440],{"class":382}," steps ",[336,442,357],{"class":342},[336,444,445],{"class":382}," [\n",[336,447,449,452,455,458,460,463,465,468,471,473,475,478,480,482,485,487,489,492,494],{"class":338,"line":448},6,[336,450,451],{"class":342},"  {",[336,453,454],{"class":346}," id",[336,456,457],{"class":342},":",[336,459,392],{"class":342},[336,461,462],{"class":363},"account",[336,464,424],{"class":342},[336,466,467],{"class":342},",",[336,469,470],{"class":346}," label",[336,472,457],{"class":342},[336,474,392],{"class":342},[336,476,477],{"class":363},"Account",[336,479,424],{"class":342},[336,481,467],{"class":342},[336,483,484],{"class":346}," description",[336,486,457],{"class":342},[336,488,392],{"class":342},[336,490,491],{"class":363},"Create your credentials",[336,493,424],{"class":342},[336,495,496],{"class":342}," },\n",[336,498,500,502,504,506,508,510,512,514,516,518,520,523,525,527,529,531,533,536,538],{"class":338,"line":499},7,[336,501,451],{"class":342},[336,503,454],{"class":346},[336,505,457],{"class":342},[336,507,392],{"class":342},[336,509,427],{"class":363},[336,511,424],{"class":342},[336,513,467],{"class":342},[336,515,470],{"class":346},[336,517,457],{"class":342},[336,519,392],{"class":342},[336,521,522],{"class":363},"Profile",[336,524,424],{"class":342},[336,526,467],{"class":342},[336,528,484],{"class":346},[336,530,457],{"class":342},[336,532,392],{"class":342},[336,534,535],{"class":363},"Tell us about yourself",[336,537,424],{"class":342},[336,539,496],{"class":342},[336,541,543,545,547,549,551,554,556,558,560,562,564,567,569,571,573,575,577,580,582],{"class":338,"line":542},8,[336,544,451],{"class":342},[336,546,454],{"class":346},[336,548,457],{"class":342},[336,550,392],{"class":342},[336,552,553],{"class":363},"billing",[336,555,424],{"class":342},[336,557,467],{"class":342},[336,559,470],{"class":346},[336,561,457],{"class":342},[336,563,392],{"class":342},[336,565,566],{"class":363},"Billing",[336,568,424],{"class":342},[336,570,467],{"class":342},[336,572,484],{"class":346},[336,574,457],{"class":342},[336,576,392],{"class":342},[336,578,579],{"class":363},"Add a payment method",[336,581,424],{"class":342},[336,583,496],{"class":342},[336,585,587,589,591,593,595,598,600,602,604,606,608,611,613,615,617,619,621,624,626],{"class":338,"line":586},9,[336,588,451],{"class":342},[336,590,454],{"class":346},[336,592,457],{"class":342},[336,594,392],{"class":342},[336,596,597],{"class":363},"confirm",[336,599,424],{"class":342},[336,601,467],{"class":342},[336,603,470],{"class":346},[336,605,457],{"class":342},[336,607,392],{"class":342},[336,609,610],{"class":363},"Confirm",[336,612,424],{"class":342},[336,614,467],{"class":342},[336,616,484],{"class":346},[336,618,457],{"class":342},[336,620,392],{"class":342},[336,622,623],{"class":363},"Review and finish",[336,625,424],{"class":342},[336,627,496],{"class":342},[336,629,631],{"class":338,"line":630},10,[336,632,633],{"class":382},"]\n",[336,635,637,640,642],{"class":338,"line":636},11,[336,638,639],{"class":342},"\u003C\u002F",[336,641,347],{"class":346},[336,643,369],{"class":342},[336,645,647],{"class":338,"line":646},12,[336,648,404],{"emptyLinePlaceholder":403},[336,650,652,654,657],{"class":338,"line":651},13,[336,653,343],{"class":342},[336,655,656],{"class":346},"template",[336,658,369],{"class":342},[336,660,662,665],{"class":338,"line":661},14,[336,663,664],{"class":342},"  \u003C",[336,666,667],{"class":346},"UiStepper\n",[336,669,671,674,676,678,680],{"class":338,"line":670},15,[336,672,673],{"class":350},"    :steps",[336,675,357],{"class":342},[336,677,360],{"class":342},[336,679,312],{"class":363},[336,681,682],{"class":342},"\"\n",[336,684,686,689,691,693,695],{"class":338,"line":685},16,[336,687,688],{"class":350},"    :active-step",[336,690,357],{"class":342},[336,692,360],{"class":342},[336,694,308],{"class":363},[336,696,682],{"class":342},[336,698,700,703,705,707,710],{"class":338,"line":699},17,[336,701,702],{"class":350},"    @update-active-step",[336,704,357],{"class":342},[336,706,360],{"class":342},[336,708,709],{"class":363},"activeStep = $event",[336,711,682],{"class":342},[336,713,715],{"class":338,"line":714},18,[336,716,717],{"class":342},"  \u002F>\n",[336,719,721,723,725],{"class":338,"line":720},19,[336,722,639],{"class":342},[336,724,656],{"class":346},[336,726,369],{"class":342},[299,728,729,730,732,733,736],{},"Steps before ",[302,731,308],{}," render as completed with a check mark; the active step gets ",[302,734,735],{},"aria-current=\"step\"","; the rest render as upcoming.",[322,738,740],{"id":739},"vertical-layout","Vertical layout",[299,742,743,744,747],{},"Set ",[302,745,746],{},"vertical"," to stack steps in a column, useful for sidebars or narrow layouts.",[327,749,751],{"className":329,"code":750,"language":331,"meta":332,"style":332},"\u003Ctemplate>\n  \u003CUiStepper :steps=\"steps\" :active-step=\"activeStep\" vertical \u002F>\n\u003C\u002Ftemplate>\n",[302,752,753,761,795],{"__ignoreMap":332},[336,754,755,757,759],{"class":338,"line":339},[336,756,343],{"class":342},[336,758,656],{"class":346},[336,760,369],{"class":342},[336,762,763,765,767,770,772,774,776,778,781,783,785,787,789,792],{"class":338,"line":372},[336,764,664],{"class":342},[336,766,304],{"class":346},[336,768,769],{"class":350}," :steps",[336,771,357],{"class":342},[336,773,360],{"class":342},[336,775,312],{"class":363},[336,777,360],{"class":342},[336,779,780],{"class":350}," :active-step",[336,782,357],{"class":342},[336,784,360],{"class":342},[336,786,308],{"class":363},[336,788,360],{"class":342},[336,790,791],{"class":350}," vertical",[336,793,794],{"class":342}," \u002F>\n",[336,796,797,799,801],{"class":338,"line":400},[336,798,639],{"class":342},[336,800,656],{"class":346},[336,802,369],{"class":342},[322,804,806],{"id":805},"linear-progression","Linear progression",[299,808,743,809,812],{},[302,810,811],{},"linear"," to block selecting any step ahead of the current one — users can still navigate back to a completed step, but can't skip forward.",[327,814,816],{"className":329,"code":815,"language":331,"meta":332,"style":332},"\u003Ctemplate>\n  \u003CUiStepper :steps=\"steps\" :active-step=\"activeStep\" linear @update-active-step=\"activeStep = $event\" \u002F>\n\u003C\u002Ftemplate>\n",[302,817,818,826,868],{"__ignoreMap":332},[336,819,820,822,824],{"class":338,"line":339},[336,821,343],{"class":342},[336,823,656],{"class":346},[336,825,369],{"class":342},[336,827,828,830,832,834,836,838,840,842,844,846,848,850,852,855,858,860,862,864,866],{"class":338,"line":372},[336,829,664],{"class":342},[336,831,304],{"class":346},[336,833,769],{"class":350},[336,835,357],{"class":342},[336,837,360],{"class":342},[336,839,312],{"class":363},[336,841,360],{"class":342},[336,843,780],{"class":350},[336,845,357],{"class":342},[336,847,360],{"class":342},[336,849,308],{"class":363},[336,851,360],{"class":342},[336,853,854],{"class":350}," linear",[336,856,857],{"class":350}," @update-active-step",[336,859,357],{"class":342},[336,861,360],{"class":342},[336,863,709],{"class":363},[336,865,360],{"class":342},[336,867,794],{"class":342},[336,869,870,872,874],{"class":338,"line":400},[336,871,639],{"class":342},[336,873,656],{"class":346},[336,875,369],{"class":342},[322,877,879],{"id":878},"step-icons","Step icons",[299,881,882,883,886,887,889],{},"Give a step an ",[302,884,885],{},"icon"," (Material Symbols code point) to render it instead of the step number. Completed steps always show a check mark regardless of ",[302,888,885],{},".",[327,891,893],{"className":329,"code":892,"language":331,"meta":332,"style":332},"\u003Cscript setup lang=\"ts\">\nconst steps = [\n  { id: 'cart', label: 'Cart', icon: '' },\n  { id: 'shipping', label: 'Shipping', icon: '' },\n  { id: 'payment', label: 'Payment', icon: '' },\n  { id: 'done', label: 'Done', icon: '' },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiStepper :steps=\"steps\" active-step=\"shipping\" \u002F>\n\u003C\u002Ftemplate>\n",[302,894,895,915,925,969,1012,1055,1098,1102,1110,1114,1122,1151],{"__ignoreMap":332},[336,896,897,899,901,903,905,907,909,911,913],{"class":338,"line":339},[336,898,343],{"class":342},[336,900,347],{"class":346},[336,902,351],{"class":350},[336,904,354],{"class":350},[336,906,357],{"class":342},[336,908,360],{"class":342},[336,910,364],{"class":363},[336,912,360],{"class":342},[336,914,369],{"class":342},[336,916,917,919,921,923],{"class":338,"line":372},[336,918,410],{"class":350},[336,920,440],{"class":382},[336,922,357],{"class":342},[336,924,445],{"class":382},[336,926,927,929,931,933,935,938,940,942,944,946,948,951,953,955,958,960,962,965,967],{"class":338,"line":400},[336,928,451],{"class":342},[336,930,454],{"class":346},[336,932,457],{"class":342},[336,934,392],{"class":342},[336,936,937],{"class":363},"cart",[336,939,424],{"class":342},[336,941,467],{"class":342},[336,943,470],{"class":346},[336,945,457],{"class":342},[336,947,392],{"class":342},[336,949,950],{"class":363},"Cart",[336,952,424],{"class":342},[336,954,467],{"class":342},[336,956,957],{"class":346}," icon",[336,959,457],{"class":342},[336,961,392],{"class":342},[336,963,964],{"class":363},"",[336,966,424],{"class":342},[336,968,496],{"class":342},[336,970,971,973,975,977,979,982,984,986,988,990,992,995,997,999,1001,1003,1005,1008,1010],{"class":338,"line":407},[336,972,451],{"class":342},[336,974,454],{"class":346},[336,976,457],{"class":342},[336,978,392],{"class":342},[336,980,981],{"class":363},"shipping",[336,983,424],{"class":342},[336,985,467],{"class":342},[336,987,470],{"class":346},[336,989,457],{"class":342},[336,991,392],{"class":342},[336,993,994],{"class":363},"Shipping",[336,996,424],{"class":342},[336,998,467],{"class":342},[336,1000,957],{"class":346},[336,1002,457],{"class":342},[336,1004,392],{"class":342},[336,1006,1007],{"class":363},"",[336,1009,424],{"class":342},[336,1011,496],{"class":342},[336,1013,1014,1016,1018,1020,1022,1025,1027,1029,1031,1033,1035,1038,1040,1042,1044,1046,1048,1051,1053],{"class":338,"line":435},[336,1015,451],{"class":342},[336,1017,454],{"class":346},[336,1019,457],{"class":342},[336,1021,392],{"class":342},[336,1023,1024],{"class":363},"payment",[336,1026,424],{"class":342},[336,1028,467],{"class":342},[336,1030,470],{"class":346},[336,1032,457],{"class":342},[336,1034,392],{"class":342},[336,1036,1037],{"class":363},"Payment",[336,1039,424],{"class":342},[336,1041,467],{"class":342},[336,1043,957],{"class":346},[336,1045,457],{"class":342},[336,1047,392],{"class":342},[336,1049,1050],{"class":363},"",[336,1052,424],{"class":342},[336,1054,496],{"class":342},[336,1056,1057,1059,1061,1063,1065,1068,1070,1072,1074,1076,1078,1081,1083,1085,1087,1089,1091,1094,1096],{"class":338,"line":448},[336,1058,451],{"class":342},[336,1060,454],{"class":346},[336,1062,457],{"class":342},[336,1064,392],{"class":342},[336,1066,1067],{"class":363},"done",[336,1069,424],{"class":342},[336,1071,467],{"class":342},[336,1073,470],{"class":346},[336,1075,457],{"class":342},[336,1077,392],{"class":342},[336,1079,1080],{"class":363},"Done",[336,1082,424],{"class":342},[336,1084,467],{"class":342},[336,1086,957],{"class":346},[336,1088,457],{"class":342},[336,1090,392],{"class":342},[336,1092,1093],{"class":363},"",[336,1095,424],{"class":342},[336,1097,496],{"class":342},[336,1099,1100],{"class":338,"line":499},[336,1101,633],{"class":382},[336,1103,1104,1106,1108],{"class":338,"line":542},[336,1105,639],{"class":342},[336,1107,347],{"class":346},[336,1109,369],{"class":342},[336,1111,1112],{"class":338,"line":586},[336,1113,404],{"emptyLinePlaceholder":403},[336,1115,1116,1118,1120],{"class":338,"line":630},[336,1117,343],{"class":342},[336,1119,656],{"class":346},[336,1121,369],{"class":342},[336,1123,1124,1126,1128,1130,1132,1134,1136,1138,1141,1143,1145,1147,1149],{"class":338,"line":636},[336,1125,664],{"class":342},[336,1127,304],{"class":346},[336,1129,769],{"class":350},[336,1131,357],{"class":342},[336,1133,360],{"class":342},[336,1135,312],{"class":363},[336,1137,360],{"class":342},[336,1139,1140],{"class":350}," active-step",[336,1142,357],{"class":342},[336,1144,360],{"class":342},[336,1146,981],{"class":363},[336,1148,360],{"class":342},[336,1150,794],{"class":342},[336,1152,1153,1155,1157],{"class":338,"line":646},[336,1154,639],{"class":342},[336,1156,656],{"class":346},[336,1158,369],{"class":342},[322,1160,1162],{"id":1161},"disabled-step","Disabled step",[299,1164,1165,1166,1169,1170,889],{},"Mark a step ",[302,1167,1168],{},"disabled"," to remove it from keyboard navigation and block selection entirely, regardless of ",[302,1171,811],{},[327,1173,1175],{"className":329,"code":1174,"language":331,"meta":332,"style":332},"\u003Ctemplate>\n  \u003CUiStepper\n    :steps=\"[\n      { id: 'account', label: 'Account' },\n      { id: 'profile', label: 'Profile' },\n      { id: 'billing', label: 'Billing', disabled: true },\n      { id: 'confirm', label: 'Confirm' },\n    ]\"\n    active-step=\"profile\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[302,1176,1177,1185,1191,1202,1207,1212,1217,1222,1229,1242,1246],{"__ignoreMap":332},[336,1178,1179,1181,1183],{"class":338,"line":339},[336,1180,343],{"class":342},[336,1182,656],{"class":346},[336,1184,369],{"class":342},[336,1186,1187,1189],{"class":338,"line":372},[336,1188,664],{"class":342},[336,1190,667],{"class":346},[336,1192,1193,1195,1197,1199],{"class":338,"line":400},[336,1194,673],{"class":350},[336,1196,357],{"class":342},[336,1198,360],{"class":342},[336,1200,1201],{"class":363},"[\n",[336,1203,1204],{"class":338,"line":407},[336,1205,1206],{"class":363},"      { id: 'account', label: 'Account' },\n",[336,1208,1209],{"class":338,"line":435},[336,1210,1211],{"class":363},"      { id: 'profile', label: 'Profile' },\n",[336,1213,1214],{"class":338,"line":448},[336,1215,1216],{"class":363},"      { id: 'billing', label: 'Billing', disabled: true },\n",[336,1218,1219],{"class":338,"line":499},[336,1220,1221],{"class":363},"      { id: 'confirm', label: 'Confirm' },\n",[336,1223,1224,1227],{"class":338,"line":542},[336,1225,1226],{"class":363},"    ]",[336,1228,682],{"class":342},[336,1230,1231,1234,1236,1238,1240],{"class":338,"line":586},[336,1232,1233],{"class":350},"    active-step",[336,1235,357],{"class":342},[336,1237,360],{"class":342},[336,1239,427],{"class":363},[336,1241,682],{"class":342},[336,1243,1244],{"class":338,"line":630},[336,1245,717],{"class":342},[336,1247,1248,1250,1252],{"class":338,"line":636},[336,1249,639],{"class":342},[336,1251,656],{"class":346},[336,1253,369],{"class":342},[322,1255,1257],{"id":1256},"props","Props",[1259,1260,1261,1280],"table",{},[1262,1263,1264],"thead",{},[1265,1266,1267,1271,1274,1277],"tr",{},[1268,1269,1270],"th",{},"Prop",[1268,1272,1273],{},"Type",[1268,1275,1276],{},"Default",[1268,1278,1279],{},"Description",[1281,1282,1283,1304,1321,1340,1357],"tbody",{},[1265,1284,1285,1290,1295,1298],{},[1286,1287,1288],"td",{},[302,1289,312],{},[1286,1291,1292],{},[302,1293,1294],{},"IStepItem[]",[1286,1296,1297],{},"—",[1286,1299,1300,1301,889],{},"Step items: ",[302,1302,1303],{},"{ id, label, description?, icon?, disabled? }",[1265,1305,1306,1310,1315,1318],{},[1286,1307,1308],{},[302,1309,308],{},[1286,1311,1312],{},[302,1313,1314],{},"string",[1286,1316,1317],{},"first step",[1286,1319,1320],{},"The id of the step that should be active.",[1265,1322,1323,1327,1332,1337],{},[1286,1324,1325],{},[302,1326,746],{},[1286,1328,1329],{},[302,1330,1331],{},"boolean",[1286,1333,1334],{},[302,1335,1336],{},"false",[1286,1338,1339],{},"Renders the stepper as a vertical list.",[1265,1341,1342,1346,1350,1354],{},[1286,1343,1344],{},[302,1345,811],{},[1286,1347,1348],{},[302,1349,1331],{},[1286,1351,1352],{},[302,1353,1336],{},[1286,1355,1356],{},"Blocks selecting a step ahead of the current one.",[1265,1358,1359,1364,1369,1371],{},[1286,1360,1361],{},[302,1362,1363],{},"customClass",[1286,1365,1366],{},[302,1367,1368],{},"string | string[] | Record\u003Cstring, boolean> | null",[1286,1370,1297],{},[1286,1372,1373],{},"Extra classes for the stepper root element.",[299,1375,1376,1380,1381,1383,1384,889],{},[1377,1378,1379],"strong",{},"Emits:"," ",[302,1382,319],{}," with the selected step's ",[302,1385,1386],{},"id",[1388,1389,1390,1391,1394,1395,1397,1398,1401,1402,1405],"note",{},"Keyboard support mirrors ",[302,1392,1393],{},"UiTabs",": arrow keys move roving focus between selectable steps (skipping disabled ones, and — in ",[302,1396,811],{}," mode — steps ahead of the current one), ",[302,1399,1400],{},"Home","\u002F",[302,1403,1404],{},"End"," jump to the first\u002Flast selectable step.",[1407,1408,1409],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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);}",{"title":332,"searchDepth":372,"depth":372,"links":1411},[1412,1413,1414,1415,1416,1417],{"id":324,"depth":372,"text":325},{"id":739,"depth":372,"text":740},{"id":805,"depth":372,"text":806},{"id":878,"depth":372,"text":879},{"id":1161,"depth":372,"text":1162},{"id":1256,"depth":372,"text":1257},"Guide users through a sequence of steps with UiStepper.","md",null,{},{"icon":282},{"title":279,"description":1418},"Oi125Y_8tl5u2YCvin5jfEj46o5jLtLlxQDrJI-bBFE",[1426,1428],{"title":274,"path":275,"stem":276,"description":1427,"icon":277,"children":-1},"Interactive filters, tags, and inputs with UiChip and UiChipGroup.",{"title":284,"path":285,"stem":286,"description":1429,"icon":287,"children":-1},"Render a chronological feed of events with UiTimeline.",1785268688959]