[{"data":1,"prerenderedAt":769},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-components-segmented-controls":273,"-colorffy-ui-components-segmented-controls-surround":764},[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,268],{"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],{"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},"Styling","\u002Fcolorffy-ui\u002Fstyling","3.colorffy-ui\u002F3.styling","i-lucide-paintbrush",{"id":274,"title":244,"body":275,"description":757,"extension":758,"links":759,"meta":760,"navigation":761,"path":245,"seo":762,"stem":246,"__hash__":763},"docs\u002F3.colorffy-ui\u002F2.components\u002F23.segmented-controls.md",{"type":276,"value":277,"toc":753},"minimark",[278,290,295,660,664,729,739,749],[279,280,281,285,286,289],"p",{},[282,283,284],"code",{},"UiSegmentedControls"," switches between a small number of options with an animated active indicator. Each tab needs a numeric ",[282,287,288],{},"position"," for the indicator offset.",[291,292,294],"h2",{"id":293},"add-segmented-controls","Add segmented controls",[296,297,302],"pre",{"className":298,"code":299,"language":300,"meta":301,"style":301},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport type { ISegmentedTab } from '@colorffy\u002Fui'\nimport { ref } from 'vue'\n\nconst tabs: ISegmentedTab[] = [\n  { id: 'all', label: 'All', position: 0 },\n  { id: 'active', label: 'Active', position: 1 },\n  { id: 'archived', label: 'Archived', position: 2 },\n]\nconst active = ref('all')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiSegmentedControls :tabs=\"tabs\" :active-tab=\"active\" @update-active-tab=\"active = $event\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[282,303,304,339,371,391,398,421,469,509,549,555,580,590,595,605,651],{"__ignoreMap":301},[305,306,309,313,317,321,324,327,330,334,336],"span",{"class":307,"line":308},"line",1,[305,310,312],{"class":311},"sMK4o","\u003C",[305,314,316],{"class":315},"swJcz","script",[305,318,320],{"class":319},"spNyl"," setup",[305,322,323],{"class":319}," lang",[305,325,326],{"class":311},"=",[305,328,329],{"class":311},"\"",[305,331,333],{"class":332},"sfazB","ts",[305,335,329],{"class":311},[305,337,338],{"class":311},">\n",[305,340,342,346,349,352,356,359,362,365,368],{"class":307,"line":341},2,[305,343,345],{"class":344},"s7zQu","import",[305,347,348],{"class":344}," type",[305,350,351],{"class":311}," {",[305,353,355],{"class":354},"sTEyZ"," ISegmentedTab",[305,357,358],{"class":311}," }",[305,360,361],{"class":344}," from",[305,363,364],{"class":311}," '",[305,366,367],{"class":332},"@colorffy\u002Fui",[305,369,370],{"class":311},"'\n",[305,372,374,376,378,381,383,385,387,389],{"class":307,"line":373},3,[305,375,345],{"class":344},[305,377,351],{"class":311},[305,379,380],{"class":354}," ref",[305,382,358],{"class":311},[305,384,361],{"class":344},[305,386,364],{"class":311},[305,388,300],{"class":332},[305,390,370],{"class":311},[305,392,394],{"class":307,"line":393},4,[305,395,397],{"emptyLinePlaceholder":396},true,"\n",[305,399,401,404,407,410,413,416,418],{"class":307,"line":400},5,[305,402,403],{"class":319},"const",[305,405,406],{"class":354}," tabs",[305,408,409],{"class":311},":",[305,411,355],{"class":412},"sBMFI",[305,414,415],{"class":354},"[] ",[305,417,326],{"class":311},[305,419,420],{"class":354}," [\n",[305,422,424,427,430,432,434,437,440,443,446,448,450,453,455,457,460,462,466],{"class":307,"line":423},6,[305,425,426],{"class":311},"  {",[305,428,429],{"class":315}," id",[305,431,409],{"class":311},[305,433,364],{"class":311},[305,435,436],{"class":332},"all",[305,438,439],{"class":311},"'",[305,441,442],{"class":311},",",[305,444,445],{"class":315}," label",[305,447,409],{"class":311},[305,449,364],{"class":311},[305,451,452],{"class":332},"All",[305,454,439],{"class":311},[305,456,442],{"class":311},[305,458,459],{"class":315}," position",[305,461,409],{"class":311},[305,463,465],{"class":464},"sbssI"," 0",[305,467,468],{"class":311}," },\n",[305,470,472,474,476,478,480,483,485,487,489,491,493,496,498,500,502,504,507],{"class":307,"line":471},7,[305,473,426],{"class":311},[305,475,429],{"class":315},[305,477,409],{"class":311},[305,479,364],{"class":311},[305,481,482],{"class":332},"active",[305,484,439],{"class":311},[305,486,442],{"class":311},[305,488,445],{"class":315},[305,490,409],{"class":311},[305,492,364],{"class":311},[305,494,495],{"class":332},"Active",[305,497,439],{"class":311},[305,499,442],{"class":311},[305,501,459],{"class":315},[305,503,409],{"class":311},[305,505,506],{"class":464}," 1",[305,508,468],{"class":311},[305,510,512,514,516,518,520,523,525,527,529,531,533,536,538,540,542,544,547],{"class":307,"line":511},8,[305,513,426],{"class":311},[305,515,429],{"class":315},[305,517,409],{"class":311},[305,519,364],{"class":311},[305,521,522],{"class":332},"archived",[305,524,439],{"class":311},[305,526,442],{"class":311},[305,528,445],{"class":315},[305,530,409],{"class":311},[305,532,364],{"class":311},[305,534,535],{"class":332},"Archived",[305,537,439],{"class":311},[305,539,442],{"class":311},[305,541,459],{"class":315},[305,543,409],{"class":311},[305,545,546],{"class":464}," 2",[305,548,468],{"class":311},[305,550,552],{"class":307,"line":551},9,[305,553,554],{"class":354},"]\n",[305,556,558,560,563,565,568,571,573,575,577],{"class":307,"line":557},10,[305,559,403],{"class":319},[305,561,562],{"class":354}," active ",[305,564,326],{"class":311},[305,566,380],{"class":567},"s2Zo4",[305,569,570],{"class":354},"(",[305,572,439],{"class":311},[305,574,436],{"class":332},[305,576,439],{"class":311},[305,578,579],{"class":354},")\n",[305,581,583,586,588],{"class":307,"line":582},11,[305,584,585],{"class":311},"\u003C\u002F",[305,587,316],{"class":315},[305,589,338],{"class":311},[305,591,593],{"class":307,"line":592},12,[305,594,397],{"emptyLinePlaceholder":396},[305,596,598,600,603],{"class":307,"line":597},13,[305,599,312],{"class":311},[305,601,602],{"class":315},"template",[305,604,338],{"class":311},[305,606,608,611,613,616,618,620,623,625,628,630,632,634,636,639,641,643,646,648],{"class":307,"line":607},14,[305,609,610],{"class":311},"  \u003C",[305,612,284],{"class":315},[305,614,615],{"class":319}," :tabs",[305,617,326],{"class":311},[305,619,329],{"class":311},[305,621,622],{"class":332},"tabs",[305,624,329],{"class":311},[305,626,627],{"class":319}," :active-tab",[305,629,326],{"class":311},[305,631,329],{"class":311},[305,633,482],{"class":332},[305,635,329],{"class":311},[305,637,638],{"class":319}," @update-active-tab",[305,640,326],{"class":311},[305,642,329],{"class":311},[305,644,645],{"class":332},"active = $event",[305,647,329],{"class":311},[305,649,650],{"class":311}," \u002F>\n",[305,652,654,656,658],{"class":307,"line":653},15,[305,655,585],{"class":311},[305,657,602],{"class":315},[305,659,338],{"class":311},[291,661,663],{"id":662},"props","Props",[665,666,667,686],"table",{},[668,669,670],"thead",{},[671,672,673,677,680,683],"tr",{},[674,675,676],"th",{},"Prop",[674,678,679],{},"Type",[674,681,682],{},"Default",[674,684,685],{},"Description",[687,688,689,711],"tbody",{},[671,690,691,696,701,704],{},[692,693,694],"td",{},[282,695,622],{},[692,697,698],{},[282,699,700],{},"ISegmentedTab[]",[692,702,703],{},"—",[692,705,706,707,710],{},"Items: ",[282,708,709],{},"{ id, label, position, disabled? }",".",[671,712,713,718,723,726],{},[692,714,715],{},[282,716,717],{},"activeTab",[692,719,720],{},[282,721,722],{},"string",[692,724,725],{},"first tab",[692,727,728],{},"Active tab id.",[279,730,731,735,736,710],{},[732,733,734],"strong",{},"Emits:"," ",[282,737,738],{},"updateActiveTab(tabId)",[740,741,742,743,710],"tip",{},"For standard underline-style tabs, use ",[744,745,746],"a",{"href":260},[282,747,748],{},"UiTabs",[750,751,752],"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .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":301,"searchDepth":341,"depth":341,"links":754},[755,756],{"id":293,"depth":341,"text":294},{"id":662,"depth":341,"text":663},"A compact segmented switch with an animated indicator.","md",null,{},{"icon":247},{"title":244,"description":757},"e8CftZxv2VmKUlHHuXbKNAg4eroKG6Yu4uQhkW5se0Q",[765,767],{"title":239,"path":240,"stem":241,"description":766,"icon":242,"children":-1},"Indicate progress with UiProgressBar and UiProgressSpinner.",{"title":249,"path":250,"stem":251,"description":768,"icon":252,"children":-1},"Build a navigation drawer with rail (compact) and responsive mobile states.",1782196219260]