[{"data":1,"prerenderedAt":1760},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-components-chip":293,"-colorffy-ui-components-chip-surround":1755},[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":274,"body":295,"description":1748,"extension":1749,"links":1750,"meta":1751,"navigation":1752,"path":275,"seo":1753,"stem":276,"__hash__":1754},"docs\u002F3.colorffy-ui\u002F2.components\u002F29.chip.md",{"type":296,"value":297,"toc":1740},"minimark",[298,318,323,334,651,655,666,923,927,944,1228,1232,1386,1390,1575,1593,1604,1608,1707,1720,1736],[299,300,301,305,306,309,310,313,314,317],"p",{},[302,303,304],"code",{},"UiChip"," renders a single tappable chip. ",[302,307,308],{},"UiChipGroup"," renders a set of chips from an options array and manages selection with ",[302,311,312],{},"v-model"," — use it for filters and tag pickers. For static status labels, use ",[302,315,316],{},"UiBadge"," instead.",[319,320,322],"h2",{"id":321},"single-select-filter-chips","Single-select filter chips",[299,324,325,326,329,330,333],{},"In single mode, ",[302,327,328],{},"modelValue"," is ",[302,331,332],{},"string | null",". Clicking the selected chip deselects it.",[335,336,341],"pre",{"className":337,"code":338,"language":339,"meta":340,"style":340},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst status = ref\u003Cstring | null>(null)\nconst options = [\n  { id: 'active', text: 'Active' },\n  { id: 'paused', text: 'Paused' },\n  { id: 'archived', text: 'Archived' },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiChipGroup v-model=\"status\" :options=\"options\" aria-label=\"Filter by status\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[302,342,343,378,406,413,451,464,502,533,564,570,580,585,595,642],{"__ignoreMap":340},[344,345,348,352,356,360,363,366,369,373,375],"span",{"class":346,"line":347},"line",1,[344,349,351],{"class":350},"sMK4o","\u003C",[344,353,355],{"class":354},"swJcz","script",[344,357,359],{"class":358},"spNyl"," setup",[344,361,362],{"class":358}," lang",[344,364,365],{"class":350},"=",[344,367,368],{"class":350},"\"",[344,370,372],{"class":371},"sfazB","ts",[344,374,368],{"class":350},[344,376,377],{"class":350},">\n",[344,379,381,385,388,392,395,398,401,403],{"class":346,"line":380},2,[344,382,384],{"class":383},"s7zQu","import",[344,386,387],{"class":350}," {",[344,389,391],{"class":390},"sTEyZ"," ref",[344,393,394],{"class":350}," }",[344,396,397],{"class":383}," from",[344,399,400],{"class":350}," '",[344,402,339],{"class":371},[344,404,405],{"class":350},"'\n",[344,407,409],{"class":346,"line":408},3,[344,410,412],{"emptyLinePlaceholder":411},true,"\n",[344,414,416,419,422,424,427,429,433,436,439,442,445,448],{"class":346,"line":415},4,[344,417,418],{"class":358},"const",[344,420,421],{"class":390}," status ",[344,423,365],{"class":350},[344,425,391],{"class":426},"s2Zo4",[344,428,351],{"class":350},[344,430,432],{"class":431},"sBMFI","string",[344,434,435],{"class":350}," |",[344,437,438],{"class":431}," null",[344,440,441],{"class":350},">",[344,443,444],{"class":390},"(",[344,446,447],{"class":350},"null",[344,449,450],{"class":390},")\n",[344,452,454,456,459,461],{"class":346,"line":453},5,[344,455,418],{"class":358},[344,457,458],{"class":390}," options ",[344,460,365],{"class":350},[344,462,463],{"class":390}," [\n",[344,465,467,470,473,476,478,481,484,487,490,492,494,497,499],{"class":346,"line":466},6,[344,468,469],{"class":350},"  {",[344,471,472],{"class":354}," id",[344,474,475],{"class":350},":",[344,477,400],{"class":350},[344,479,480],{"class":371},"active",[344,482,483],{"class":350},"'",[344,485,486],{"class":350},",",[344,488,489],{"class":354}," text",[344,491,475],{"class":350},[344,493,400],{"class":350},[344,495,496],{"class":371},"Active",[344,498,483],{"class":350},[344,500,501],{"class":350}," },\n",[344,503,505,507,509,511,513,516,518,520,522,524,526,529,531],{"class":346,"line":504},7,[344,506,469],{"class":350},[344,508,472],{"class":354},[344,510,475],{"class":350},[344,512,400],{"class":350},[344,514,515],{"class":371},"paused",[344,517,483],{"class":350},[344,519,486],{"class":350},[344,521,489],{"class":354},[344,523,475],{"class":350},[344,525,400],{"class":350},[344,527,528],{"class":371},"Paused",[344,530,483],{"class":350},[344,532,501],{"class":350},[344,534,536,538,540,542,544,547,549,551,553,555,557,560,562],{"class":346,"line":535},8,[344,537,469],{"class":350},[344,539,472],{"class":354},[344,541,475],{"class":350},[344,543,400],{"class":350},[344,545,546],{"class":371},"archived",[344,548,483],{"class":350},[344,550,486],{"class":350},[344,552,489],{"class":354},[344,554,475],{"class":350},[344,556,400],{"class":350},[344,558,559],{"class":371},"Archived",[344,561,483],{"class":350},[344,563,501],{"class":350},[344,565,567],{"class":346,"line":566},9,[344,568,569],{"class":390},"]\n",[344,571,573,576,578],{"class":346,"line":572},10,[344,574,575],{"class":350},"\u003C\u002F",[344,577,355],{"class":354},[344,579,377],{"class":350},[344,581,583],{"class":346,"line":582},11,[344,584,412],{"emptyLinePlaceholder":411},[344,586,588,590,593],{"class":346,"line":587},12,[344,589,351],{"class":350},[344,591,592],{"class":354},"template",[344,594,377],{"class":350},[344,596,598,601,603,606,608,610,613,615,618,620,622,625,627,630,632,634,637,639],{"class":346,"line":597},13,[344,599,600],{"class":350},"  \u003C",[344,602,308],{"class":354},[344,604,605],{"class":358}," v-model",[344,607,365],{"class":350},[344,609,368],{"class":350},[344,611,612],{"class":371},"status",[344,614,368],{"class":350},[344,616,617],{"class":358}," :options",[344,619,365],{"class":350},[344,621,368],{"class":350},[344,623,624],{"class":371},"options",[344,626,368],{"class":350},[344,628,629],{"class":358}," aria-label",[344,631,365],{"class":350},[344,633,368],{"class":350},[344,635,636],{"class":371},"Filter by status",[344,638,368],{"class":350},[344,640,641],{"class":350}," \u002F>\n",[344,643,645,647,649],{"class":346,"line":644},14,[344,646,575],{"class":350},[344,648,592],{"class":354},[344,650,377],{"class":350},[319,652,654],{"id":653},"multi-select-chips","Multi-select chips",[299,656,657,658,661,662,665],{},"Set ",[302,659,660],{},"multiple"," to model a ",[302,663,664],{},"string[]",".",[335,667,669],{"className":337,"code":668,"language":339,"meta":340,"style":340},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst tags = ref\u003Cstring[]>([])\nconst options = [\n  { id: 'vue', text: 'Vue', iconCode: '' },\n  { id: 'nuxt', text: 'Nuxt' },\n  { id: 'ts', text: 'TypeScript' },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiChipGroup v-model=\"tags\" :options=\"options\" multiple aria-label=\"Filter by tag\" \u002F>\n\u003C\u002Ftemplate>\n",[302,670,671,691,709,713,736,746,789,819,848,852,860,864,872,915],{"__ignoreMap":340},[344,672,673,675,677,679,681,683,685,687,689],{"class":346,"line":347},[344,674,351],{"class":350},[344,676,355],{"class":354},[344,678,359],{"class":358},[344,680,362],{"class":358},[344,682,365],{"class":350},[344,684,368],{"class":350},[344,686,372],{"class":371},[344,688,368],{"class":350},[344,690,377],{"class":350},[344,692,693,695,697,699,701,703,705,707],{"class":346,"line":380},[344,694,384],{"class":383},[344,696,387],{"class":350},[344,698,391],{"class":390},[344,700,394],{"class":350},[344,702,397],{"class":383},[344,704,400],{"class":350},[344,706,339],{"class":371},[344,708,405],{"class":350},[344,710,711],{"class":346,"line":408},[344,712,412],{"emptyLinePlaceholder":411},[344,714,715,717,720,722,724,726,728,731,733],{"class":346,"line":415},[344,716,418],{"class":358},[344,718,719],{"class":390}," tags ",[344,721,365],{"class":350},[344,723,391],{"class":426},[344,725,351],{"class":350},[344,727,432],{"class":431},[344,729,730],{"class":390},"[]",[344,732,441],{"class":350},[344,734,735],{"class":390},"([])\n",[344,737,738,740,742,744],{"class":346,"line":453},[344,739,418],{"class":358},[344,741,458],{"class":390},[344,743,365],{"class":350},[344,745,463],{"class":390},[344,747,748,750,752,754,756,758,760,762,764,766,768,771,773,775,778,780,782,785,787],{"class":346,"line":466},[344,749,469],{"class":350},[344,751,472],{"class":354},[344,753,475],{"class":350},[344,755,400],{"class":350},[344,757,339],{"class":371},[344,759,483],{"class":350},[344,761,486],{"class":350},[344,763,489],{"class":354},[344,765,475],{"class":350},[344,767,400],{"class":350},[344,769,770],{"class":371},"Vue",[344,772,483],{"class":350},[344,774,486],{"class":350},[344,776,777],{"class":354}," iconCode",[344,779,475],{"class":350},[344,781,400],{"class":350},[344,783,784],{"class":371},"",[344,786,483],{"class":350},[344,788,501],{"class":350},[344,790,791,793,795,797,799,802,804,806,808,810,812,815,817],{"class":346,"line":504},[344,792,469],{"class":350},[344,794,472],{"class":354},[344,796,475],{"class":350},[344,798,400],{"class":350},[344,800,801],{"class":371},"nuxt",[344,803,483],{"class":350},[344,805,486],{"class":350},[344,807,489],{"class":354},[344,809,475],{"class":350},[344,811,400],{"class":350},[344,813,814],{"class":371},"Nuxt",[344,816,483],{"class":350},[344,818,501],{"class":350},[344,820,821,823,825,827,829,831,833,835,837,839,841,844,846],{"class":346,"line":535},[344,822,469],{"class":350},[344,824,472],{"class":354},[344,826,475],{"class":350},[344,828,400],{"class":350},[344,830,372],{"class":371},[344,832,483],{"class":350},[344,834,486],{"class":350},[344,836,489],{"class":354},[344,838,475],{"class":350},[344,840,400],{"class":350},[344,842,843],{"class":371},"TypeScript",[344,845,483],{"class":350},[344,847,501],{"class":350},[344,849,850],{"class":346,"line":566},[344,851,569],{"class":390},[344,853,854,856,858],{"class":346,"line":572},[344,855,575],{"class":350},[344,857,355],{"class":354},[344,859,377],{"class":350},[344,861,862],{"class":346,"line":582},[344,863,412],{"emptyLinePlaceholder":411},[344,865,866,868,870],{"class":346,"line":587},[344,867,351],{"class":350},[344,869,592],{"class":354},[344,871,377],{"class":350},[344,873,874,876,878,880,882,884,887,889,891,893,895,897,899,902,904,906,908,911,913],{"class":346,"line":597},[344,875,600],{"class":350},[344,877,308],{"class":354},[344,879,605],{"class":358},[344,881,365],{"class":350},[344,883,368],{"class":350},[344,885,886],{"class":371},"tags",[344,888,368],{"class":350},[344,890,617],{"class":358},[344,892,365],{"class":350},[344,894,368],{"class":350},[344,896,624],{"class":371},[344,898,368],{"class":350},[344,900,901],{"class":358}," multiple",[344,903,629],{"class":358},[344,905,365],{"class":350},[344,907,368],{"class":350},[344,909,910],{"class":371},"Filter by tag",[344,912,368],{"class":350},[344,914,641],{"class":350},[344,916,917,919,921],{"class":346,"line":644},[344,918,575],{"class":350},[344,920,592],{"class":354},[344,922,377],{"class":350},[319,924,926],{"id":925},"closable-tag-list","Closable tag list",[299,928,657,929,932,933,935,936,939,940,943],{},[302,930,931],{},"closable"," on an option to render a trailing remove button. ",[302,934,308],{}," emits ",[302,937,938],{},"remove"," with the option ",[302,941,942],{},"id"," — you own the removal logic.",[335,945,947],{"className":337,"code":946,"language":339,"meta":340,"style":340},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst tags = ref([\n  { id: '1', text: 'Design', closable: true },\n  { id: '2', text: 'Frontend', closable: true },\n])\n\nfunction onRemove(id: string) {\n  tags.value = tags.value.filter(tag => tag.id !== id)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiChipGroup :options=\"tags\" @remove=\"onRemove\" \u002F>\n\u003C\u002Ftemplate>\n",[302,948,949,969,987,991,1004,1045,1083,1088,1092,1116,1163,1168,1176,1180,1188,1219],{"__ignoreMap":340},[344,950,951,953,955,957,959,961,963,965,967],{"class":346,"line":347},[344,952,351],{"class":350},[344,954,355],{"class":354},[344,956,359],{"class":358},[344,958,362],{"class":358},[344,960,365],{"class":350},[344,962,368],{"class":350},[344,964,372],{"class":371},[344,966,368],{"class":350},[344,968,377],{"class":350},[344,970,971,973,975,977,979,981,983,985],{"class":346,"line":380},[344,972,384],{"class":383},[344,974,387],{"class":350},[344,976,391],{"class":390},[344,978,394],{"class":350},[344,980,397],{"class":383},[344,982,400],{"class":350},[344,984,339],{"class":371},[344,986,405],{"class":350},[344,988,989],{"class":346,"line":408},[344,990,412],{"emptyLinePlaceholder":411},[344,992,993,995,997,999,1001],{"class":346,"line":415},[344,994,418],{"class":358},[344,996,719],{"class":390},[344,998,365],{"class":350},[344,1000,391],{"class":426},[344,1002,1003],{"class":390},"([\n",[344,1005,1006,1008,1010,1012,1014,1017,1019,1021,1023,1025,1027,1030,1032,1034,1037,1039,1043],{"class":346,"line":453},[344,1007,469],{"class":350},[344,1009,472],{"class":354},[344,1011,475],{"class":350},[344,1013,400],{"class":350},[344,1015,1016],{"class":371},"1",[344,1018,483],{"class":350},[344,1020,486],{"class":350},[344,1022,489],{"class":354},[344,1024,475],{"class":350},[344,1026,400],{"class":350},[344,1028,1029],{"class":371},"Design",[344,1031,483],{"class":350},[344,1033,486],{"class":350},[344,1035,1036],{"class":354}," closable",[344,1038,475],{"class":350},[344,1040,1042],{"class":1041},"sfNiH"," true",[344,1044,501],{"class":350},[344,1046,1047,1049,1051,1053,1055,1058,1060,1062,1064,1066,1068,1071,1073,1075,1077,1079,1081],{"class":346,"line":466},[344,1048,469],{"class":350},[344,1050,472],{"class":354},[344,1052,475],{"class":350},[344,1054,400],{"class":350},[344,1056,1057],{"class":371},"2",[344,1059,483],{"class":350},[344,1061,486],{"class":350},[344,1063,489],{"class":354},[344,1065,475],{"class":350},[344,1067,400],{"class":350},[344,1069,1070],{"class":371},"Frontend",[344,1072,483],{"class":350},[344,1074,486],{"class":350},[344,1076,1036],{"class":354},[344,1078,475],{"class":350},[344,1080,1042],{"class":1041},[344,1082,501],{"class":350},[344,1084,1085],{"class":346,"line":504},[344,1086,1087],{"class":390},"])\n",[344,1089,1090],{"class":346,"line":535},[344,1091,412],{"emptyLinePlaceholder":411},[344,1093,1094,1097,1100,1102,1105,1107,1110,1113],{"class":346,"line":566},[344,1095,1096],{"class":358},"function",[344,1098,1099],{"class":426}," onRemove",[344,1101,444],{"class":350},[344,1103,942],{"class":1104},"sHdIc",[344,1106,475],{"class":350},[344,1108,1109],{"class":431}," string",[344,1111,1112],{"class":350},")",[344,1114,1115],{"class":350}," {\n",[344,1117,1118,1121,1123,1126,1129,1132,1134,1136,1138,1141,1143,1146,1149,1152,1154,1156,1159,1161],{"class":346,"line":572},[344,1119,1120],{"class":390},"  tags",[344,1122,665],{"class":350},[344,1124,1125],{"class":390},"value",[344,1127,1128],{"class":350}," =",[344,1130,1131],{"class":390}," tags",[344,1133,665],{"class":350},[344,1135,1125],{"class":390},[344,1137,665],{"class":350},[344,1139,1140],{"class":426},"filter",[344,1142,444],{"class":354},[344,1144,1145],{"class":1104},"tag",[344,1147,1148],{"class":358}," =>",[344,1150,1151],{"class":390}," tag",[344,1153,665],{"class":350},[344,1155,942],{"class":390},[344,1157,1158],{"class":350}," !==",[344,1160,472],{"class":390},[344,1162,450],{"class":354},[344,1164,1165],{"class":346,"line":582},[344,1166,1167],{"class":350},"}\n",[344,1169,1170,1172,1174],{"class":346,"line":587},[344,1171,575],{"class":350},[344,1173,355],{"class":354},[344,1175,377],{"class":350},[344,1177,1178],{"class":346,"line":597},[344,1179,412],{"emptyLinePlaceholder":411},[344,1181,1182,1184,1186],{"class":346,"line":644},[344,1183,351],{"class":350},[344,1185,592],{"class":354},[344,1187,377],{"class":350},[344,1189,1191,1193,1195,1197,1199,1201,1203,1205,1208,1210,1212,1215,1217],{"class":346,"line":1190},15,[344,1192,600],{"class":350},[344,1194,308],{"class":354},[344,1196,617],{"class":358},[344,1198,365],{"class":350},[344,1200,368],{"class":350},[344,1202,886],{"class":371},[344,1204,368],{"class":350},[344,1206,1207],{"class":358}," @remove",[344,1209,365],{"class":350},[344,1211,368],{"class":350},[344,1213,1214],{"class":371},"onRemove",[344,1216,368],{"class":350},[344,1218,641],{"class":350},[344,1220,1222,1224,1226],{"class":346,"line":1221},16,[344,1223,575],{"class":350},[344,1225,592],{"class":354},[344,1227,377],{"class":350},[319,1229,1231],{"id":1230},"use-uichip-directly","Use UiChip directly",[335,1233,1235],{"className":337,"code":1234,"language":339,"meta":340,"style":340},"\u003Ctemplate>\n  \u003CUiChip text=\"Filter chip\" icon-code=\"\" @click=\"onClick\" \u002F>\n  \u003CUiChip text=\"Selected\" selected \u002F>\n  \u003CUiChip text=\"Disabled\" disabled \u002F>\n  \u003CUiChip text=\"Removable\" closable close-label=\"Remove tag\" @remove=\"onRemove\" \u002F>\n\u003C\u002Ftemplate>\n",[302,1236,1237,1245,1291,1313,1335,1378],{"__ignoreMap":340},[344,1238,1239,1241,1243],{"class":346,"line":347},[344,1240,351],{"class":350},[344,1242,592],{"class":354},[344,1244,377],{"class":350},[344,1246,1247,1249,1251,1253,1255,1257,1260,1262,1265,1267,1269,1272,1275,1277,1280,1282,1284,1287,1289],{"class":346,"line":380},[344,1248,600],{"class":350},[344,1250,304],{"class":354},[344,1252,489],{"class":358},[344,1254,365],{"class":350},[344,1256,368],{"class":350},[344,1258,1259],{"class":371},"Filter chip",[344,1261,368],{"class":350},[344,1263,1264],{"class":358}," icon-code",[344,1266,365],{"class":350},[344,1268,368],{"class":350},[344,1270,1271],{"class":390},"&",[344,1273,1274],{"class":371},"#xe152;",[344,1276,368],{"class":350},[344,1278,1279],{"class":358}," @click",[344,1281,365],{"class":350},[344,1283,368],{"class":350},[344,1285,1286],{"class":371},"onClick",[344,1288,368],{"class":350},[344,1290,641],{"class":350},[344,1292,1293,1295,1297,1299,1301,1303,1306,1308,1311],{"class":346,"line":408},[344,1294,600],{"class":350},[344,1296,304],{"class":354},[344,1298,489],{"class":358},[344,1300,365],{"class":350},[344,1302,368],{"class":350},[344,1304,1305],{"class":371},"Selected",[344,1307,368],{"class":350},[344,1309,1310],{"class":358}," selected",[344,1312,641],{"class":350},[344,1314,1315,1317,1319,1321,1323,1325,1328,1330,1333],{"class":346,"line":415},[344,1316,600],{"class":350},[344,1318,304],{"class":354},[344,1320,489],{"class":358},[344,1322,365],{"class":350},[344,1324,368],{"class":350},[344,1326,1327],{"class":371},"Disabled",[344,1329,368],{"class":350},[344,1331,1332],{"class":358}," disabled",[344,1334,641],{"class":350},[344,1336,1337,1339,1341,1343,1345,1347,1350,1352,1354,1357,1359,1361,1364,1366,1368,1370,1372,1374,1376],{"class":346,"line":453},[344,1338,600],{"class":350},[344,1340,304],{"class":354},[344,1342,489],{"class":358},[344,1344,365],{"class":350},[344,1346,368],{"class":350},[344,1348,1349],{"class":371},"Removable",[344,1351,368],{"class":350},[344,1353,1036],{"class":358},[344,1355,1356],{"class":358}," close-label",[344,1358,365],{"class":350},[344,1360,368],{"class":350},[344,1362,1363],{"class":371},"Remove tag",[344,1365,368],{"class":350},[344,1367,1207],{"class":358},[344,1369,365],{"class":350},[344,1371,368],{"class":350},[344,1373,1214],{"class":371},[344,1375,368],{"class":350},[344,1377,641],{"class":350},[344,1379,1380,1382,1384],{"class":346,"line":466},[344,1381,575],{"class":350},[344,1383,592],{"class":354},[344,1385,377],{"class":350},[319,1387,1389],{"id":1388},"uichip-props","UiChip props",[1391,1392,1393,1412],"table",{},[1394,1395,1396],"thead",{},[1397,1398,1399,1403,1406,1409],"tr",{},[1400,1401,1402],"th",{},"Prop",[1400,1404,1405],{},"Type",[1400,1407,1408],{},"Default",[1400,1410,1411],{},"Description",[1413,1414,1415,1432,1448,1467,1486,1504,1521,1539,1558],"tbody",{},[1397,1416,1417,1422,1426,1429],{},[1418,1419,1420],"td",{},[302,1421,942],{},[1418,1423,1424],{},[302,1425,332],{},[1418,1427,1428],{},"—",[1418,1430,1431],{},"Unique identifier for the chip.",[1397,1433,1434,1439,1443,1445],{},[1418,1435,1436],{},[302,1437,1438],{},"text",[1418,1440,1441],{},[302,1442,332],{},[1418,1444,1428],{},[1418,1446,1447],{},"Display text label.",[1397,1449,1450,1455,1459,1461],{},[1418,1451,1452],{},[302,1453,1454],{},"iconCode",[1418,1456,1457],{},[302,1458,332],{},[1418,1460,1428],{},[1418,1462,1463,1464,665],{},"Leading Material Symbols code point. Replaced by a check mark while ",[302,1465,1466],{},"selected",[1397,1468,1469,1473,1478,1483],{},[1418,1470,1471],{},[302,1472,1466],{},[1418,1474,1475],{},[302,1476,1477],{},"boolean",[1418,1479,1480],{},[302,1481,1482],{},"false",[1418,1484,1485],{},"Renders the filter-chip active state and swaps the leading icon for a check mark.",[1397,1487,1488,1493,1497,1501],{},[1418,1489,1490],{},[302,1491,1492],{},"disabled",[1418,1494,1495],{},[302,1496,1477],{},[1418,1498,1499],{},[302,1500,1482],{},[1418,1502,1503],{},"Disables the chip.",[1397,1505,1506,1510,1514,1518],{},[1418,1507,1508],{},[302,1509,931],{},[1418,1511,1512],{},[302,1513,1477],{},[1418,1515,1516],{},[302,1517,1482],{},[1418,1519,1520],{},"Renders a trailing remove button (input-chip behavior).",[1397,1522,1523,1528,1532,1536],{},[1418,1524,1525],{},[302,1526,1527],{},"textOnly",[1418,1529,1530],{},[302,1531,1477],{},[1418,1533,1534],{},[302,1535,1482],{},[1418,1537,1538],{},"Renders the borderless text-only chip variant.",[1397,1540,1541,1546,1550,1555],{},[1418,1542,1543],{},[302,1544,1545],{},"closeLabel",[1418,1547,1548],{},[302,1549,432],{},[1418,1551,1552],{},[302,1553,1554],{},"'Remove'",[1418,1556,1557],{},"Accessible label for the remove button.",[1397,1559,1560,1565,1570,1572],{},[1418,1561,1562],{},[302,1563,1564],{},"customClass",[1418,1566,1567],{},[302,1568,1569],{},"string | string[] | Record\u003Cstring, boolean> | null",[1418,1571,1428],{},[1418,1573,1574],{},"Extra classes.",[299,1576,1577,1581,1582,1585,1586,1589,1590,1592],{},[1578,1579,1580],"strong",{},"Emits:"," ",[302,1583,1584],{},"click"," (",[302,1587,1588],{},"MouseEvent",") when the chip body is clicked; ",[302,1591,938],{}," when the trailing remove button of a closable chip is clicked.",[299,1594,1595,1581,1598,1601,1602,665],{},[1578,1596,1597],{},"Slots:",[302,1599,1600],{},"default"," renders after the text (e.g. a trailing badge), in addition to ",[302,1603,1438],{},[319,1605,1607],{"id":1606},"uichipgroup-props","UiChipGroup props",[1391,1609,1610,1622],{},[1394,1611,1612],{},[1397,1613,1614,1616,1618,1620],{},[1400,1615,1402],{},[1400,1617,1405],{},[1400,1619,1408],{},[1400,1621,1411],{},[1413,1623,1624,1643,1659,1676,1692],{},[1397,1625,1626,1630,1635,1637],{},[1418,1627,1628],{},[302,1629,624],{},[1418,1631,1632],{},[302,1633,1634],{},"IChipOption[]",[1418,1636,1428],{},[1418,1638,1639,1640,665],{},"Chip options: ",[302,1641,1642],{},"{ id, text, iconCode?, disabled?, closable? }",[1397,1644,1645,1649,1654,1656],{},[1418,1646,1647],{},[302,1648,328],{},[1418,1650,1651],{},[302,1652,1653],{},"string | string[] | null",[1418,1655,1428],{},[1418,1657,1658],{},"Selected id (single) or ids (multiple).",[1397,1660,1661,1665,1669,1673],{},[1418,1662,1663],{},[302,1664,660],{},[1418,1666,1667],{},[302,1668,1477],{},[1418,1670,1671],{},[302,1672,1482],{},[1418,1674,1675],{},"Allows selecting multiple chips.",[1397,1677,1678,1683,1687,1689],{},[1418,1679,1680],{},[302,1681,1682],{},"ariaLabel",[1418,1684,1685],{},[302,1686,332],{},[1418,1688,1428],{},[1418,1690,1691],{},"ARIA label describing the group.",[1397,1693,1694,1698,1702,1704],{},[1418,1695,1696],{},[302,1697,1564],{},[1418,1699,1700],{},[302,1701,1569],{},[1418,1703,1428],{},[1418,1705,1706],{},"Extra classes for the group container.",[299,1708,1709,1581,1711,1714,1715,939,1717,1719],{},[1578,1710,1580],{},[302,1712,1713],{},"update:modelValue"," when the selection changes; ",[302,1716,938],{},[302,1718,942],{}," when a closable option's remove button is clicked.",[1721,1722,1723,1725,1726,1729,1730,1732,1733,1735],"note",{},[302,1724,308],{}," renders a ",[302,1727,1728],{},"role=\"group\""," container. In single-select mode, clicking the currently selected chip clears the selection (sets ",[302,1731,328],{}," to ",[302,1734,447],{},").",[1737,1738,1739],"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 pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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}",{"title":340,"searchDepth":380,"depth":380,"links":1741},[1742,1743,1744,1745,1746,1747],{"id":321,"depth":380,"text":322},{"id":653,"depth":380,"text":654},{"id":925,"depth":380,"text":926},{"id":1230,"depth":380,"text":1231},{"id":1388,"depth":380,"text":1389},{"id":1606,"depth":380,"text":1607},"Interactive filters, tags, and inputs with UiChip and UiChipGroup.","md",null,{},{"icon":277},{"title":274,"description":1748},"eKW9JP52e5I95RsPvbyOwzs3lDvzq8aV5fy-EBTucpI",[1756,1758],{"title":269,"path":270,"stem":271,"description":1757,"icon":272,"children":-1},"Separate content with UiDivider — horizontal, labelled, or vertical.",{"title":279,"path":280,"stem":281,"description":1759,"icon":282,"children":-1},"Guide users through a sequence of steps with UiStepper.",1785268688876]