[{"data":1,"prerenderedAt":793},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-components-badge":273,"-colorffy-ui-components-badge-surround":788},[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":151,"body":275,"description":781,"extension":782,"links":783,"meta":784,"navigation":785,"path":152,"seo":786,"stem":153,"__hash__":787},"docs\u002F3.colorffy-ui\u002F2.components\u002F04.badge.md",{"type":276,"value":277,"toc":775},"minimark",[278,290,295,431,435,516,520,527,613,620,624,771],[279,280,281,285,286,289],"p",{},[282,283,284],"code",{},"UiBadge"," renders a small status or category label. Group several with ",[282,287,288],{},"UiBadgeGroup",".",[291,292,294],"h2",{"id":293},"add-a-badge","Add a badge",[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","\u003Ctemplate>\n  \u003CUiBadge text=\"New\" variant=\"primary\" \u002F>\n  \u003CUiBadge text=\"Beta\" variant=\"accent\" \u002F>\n  \u003CUiBadge text=\"Stable\" variant=\"success\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[282,303,304,320,359,390,421],{"__ignoreMap":301},[305,306,309,313,317],"span",{"class":307,"line":308},"line",1,[305,310,312],{"class":311},"sMK4o","\u003C",[305,314,316],{"class":315},"swJcz","template",[305,318,319],{"class":311},">\n",[305,321,323,326,328,332,335,338,342,344,347,349,351,354,356],{"class":307,"line":322},2,[305,324,325],{"class":311},"  \u003C",[305,327,284],{"class":315},[305,329,331],{"class":330},"spNyl"," text",[305,333,334],{"class":311},"=",[305,336,337],{"class":311},"\"",[305,339,341],{"class":340},"sfazB","New",[305,343,337],{"class":311},[305,345,346],{"class":330}," variant",[305,348,334],{"class":311},[305,350,337],{"class":311},[305,352,353],{"class":340},"primary",[305,355,337],{"class":311},[305,357,358],{"class":311}," \u002F>\n",[305,360,362,364,366,368,370,372,375,377,379,381,383,386,388],{"class":307,"line":361},3,[305,363,325],{"class":311},[305,365,284],{"class":315},[305,367,331],{"class":330},[305,369,334],{"class":311},[305,371,337],{"class":311},[305,373,374],{"class":340},"Beta",[305,376,337],{"class":311},[305,378,346],{"class":330},[305,380,334],{"class":311},[305,382,337],{"class":311},[305,384,385],{"class":340},"accent",[305,387,337],{"class":311},[305,389,358],{"class":311},[305,391,393,395,397,399,401,403,406,408,410,412,414,417,419],{"class":307,"line":392},4,[305,394,325],{"class":311},[305,396,284],{"class":315},[305,398,331],{"class":330},[305,400,334],{"class":311},[305,402,337],{"class":311},[305,404,405],{"class":340},"Stable",[305,407,337],{"class":311},[305,409,346],{"class":330},[305,411,334],{"class":311},[305,413,337],{"class":311},[305,415,416],{"class":340},"success",[305,418,337],{"class":311},[305,420,358],{"class":311},[305,422,424,427,429],{"class":307,"line":423},5,[305,425,426],{"class":311},"\u003C\u002F",[305,428,316],{"class":315},[305,430,319],{"class":311},[291,432,434],{"id":433},"use-tonal-and-outline-variants","Use tonal and outline variants",[296,436,438],{"className":298,"code":437,"language":300,"meta":301,"style":301},"\u003Ctemplate>\n  \u003CUiBadge text=\"Info\" variant=\"tonal tonal-info\" \u002F>\n  \u003CUiBadge text=\"Draft\" variant=\"outline\" \u002F>\n\u003C\u002Ftemplate>\n",[282,439,440,448,478,508],{"__ignoreMap":301},[305,441,442,444,446],{"class":307,"line":308},[305,443,312],{"class":311},[305,445,316],{"class":315},[305,447,319],{"class":311},[305,449,450,452,454,456,458,460,463,465,467,469,471,474,476],{"class":307,"line":322},[305,451,325],{"class":311},[305,453,284],{"class":315},[305,455,331],{"class":330},[305,457,334],{"class":311},[305,459,337],{"class":311},[305,461,462],{"class":340},"Info",[305,464,337],{"class":311},[305,466,346],{"class":330},[305,468,334],{"class":311},[305,470,337],{"class":311},[305,472,473],{"class":340},"tonal tonal-info",[305,475,337],{"class":311},[305,477,358],{"class":311},[305,479,480,482,484,486,488,490,493,495,497,499,501,504,506],{"class":307,"line":361},[305,481,325],{"class":311},[305,483,284],{"class":315},[305,485,331],{"class":330},[305,487,334],{"class":311},[305,489,337],{"class":311},[305,491,492],{"class":340},"Draft",[305,494,337],{"class":311},[305,496,346],{"class":330},[305,498,334],{"class":311},[305,500,337],{"class":311},[305,502,503],{"class":340},"outline",[305,505,337],{"class":311},[305,507,358],{"class":311},[305,509,510,512,514],{"class":307,"line":392},[305,511,426],{"class":311},[305,513,316],{"class":315},[305,515,319],{"class":311},[291,517,519],{"id":518},"show-a-count-or-initial-as-a-pill","Show a count or initial as a pill",[279,521,522,523,526],{},"Reserve ",[282,524,525],{},"pill"," for numbers and single initials — the capsule shape reads best on short, glyph-like content.",[296,528,530],{"className":298,"code":529,"language":300,"meta":301,"style":301},"\u003Ctemplate>\n  \u003CUiBadge text=\"9\" variant=\"danger\" pill \u002F>\n  \u003CUiBadge text=\"GG\" variant=\"neutral\" pill \u002F>\n\u003C\u002Ftemplate>\n",[282,531,532,540,573,605],{"__ignoreMap":301},[305,533,534,536,538],{"class":307,"line":308},[305,535,312],{"class":311},[305,537,316],{"class":315},[305,539,319],{"class":311},[305,541,542,544,546,548,550,552,555,557,559,561,563,566,568,571],{"class":307,"line":322},[305,543,325],{"class":311},[305,545,284],{"class":315},[305,547,331],{"class":330},[305,549,334],{"class":311},[305,551,337],{"class":311},[305,553,554],{"class":340},"9",[305,556,337],{"class":311},[305,558,346],{"class":330},[305,560,334],{"class":311},[305,562,337],{"class":311},[305,564,565],{"class":340},"danger",[305,567,337],{"class":311},[305,569,570],{"class":330}," pill",[305,572,358],{"class":311},[305,574,575,577,579,581,583,585,588,590,592,594,596,599,601,603],{"class":307,"line":361},[305,576,325],{"class":311},[305,578,284],{"class":315},[305,580,331],{"class":330},[305,582,334],{"class":311},[305,584,337],{"class":311},[305,586,587],{"class":340},"GG",[305,589,337],{"class":311},[305,591,346],{"class":330},[305,593,334],{"class":311},[305,595,337],{"class":311},[305,597,598],{"class":340},"neutral",[305,600,337],{"class":311},[305,602,570],{"class":330},[305,604,358],{"class":311},[305,606,607,609,611],{"class":307,"line":392},[305,608,426],{"class":311},[305,610,316],{"class":315},[305,612,319],{"class":311},[614,615,616,617,619],"caution",{},"Don't use ",[282,618,525],{}," on full-word labels like \"Active\" or \"Pending\" — keep those as the default (non-pill) shape.",[291,621,623],{"id":622},"props","Props",[625,626,627,646],"table",{},[628,629,630],"thead",{},[631,632,633,637,640,643],"tr",{},[634,635,636],"th",{},"Prop",[634,638,639],{},"Type",[634,641,642],{},"Default",[634,644,645],{},"Description",[647,648,649,668,685,706,722,738,755],"tbody",{},[631,650,651,657,662,665],{},[652,653,654],"td",{},[282,655,656],{},"text",[652,658,659],{},[282,660,661],{},"string | null",[652,663,664],{},"—",[652,666,667],{},"Badge label.",[631,669,670,675,680,682],{},[652,671,672],{},[282,673,674],{},"variant",[652,676,677],{},[282,678,679],{},"'primary' | 'secondary' | 'accent' | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'gradient' | 'default' | 'outline' | 'tonal tonal-\u003Cintent>'",[652,681,664],{},[652,683,684],{},"Color \u002F style preset.",[631,686,687,692,697,699],{},[652,688,689],{},[282,690,691],{},"size",[652,693,694],{},[282,695,696],{},"'sm'",[652,698,664],{},[652,700,701,702,705],{},"Smaller size (only ",[282,703,704],{},"sm"," supported).",[631,707,708,712,717,719],{},[652,709,710],{},[282,711,525],{},[652,713,714],{},[282,715,716],{},"boolean | null",[652,718,664],{},[652,720,721],{},"Fully rounded capsule (numbers \u002F initials only).",[631,723,724,729,733,735],{},[652,725,726],{},[282,727,728],{},"iconCode",[652,730,731],{},[282,732,661],{},[652,734,664],{},[652,736,737],{},"Leading Material Symbols code point.",[631,739,740,745,750,752],{},[652,741,742],{},[282,743,744],{},"iconClass",[652,746,747],{},[282,748,749],{},"string | string[] | Record\u003Cstring, boolean> | null",[652,751,664],{},[652,753,754],{},"Classes for the icon.",[631,756,757,762,766,768],{},[652,758,759],{},[282,760,761],{},"customClass",[652,763,764],{},[282,765,749],{},[652,767,664],{},[652,769,770],{},"Extra classes.",[772,773,774],"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 .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":322,"depth":322,"links":776},[777,778,779,780],{"id":293,"depth":322,"text":294},{"id":433,"depth":322,"text":434},{"id":518,"depth":322,"text":519},{"id":622,"depth":322,"text":623},"Label and categorize with UiBadge, or show counts with UiBadgeGroup.","md",null,{},{"icon":154},{"title":151,"description":781},"5wR4He8a2UXu_LFmS9A-FinL7iUVz-lVelEbxwNl1TU",[789,791],{"title":146,"path":147,"stem":148,"description":790,"icon":149,"children":-1},"Display a user image or initials with optional mask shapes.",{"title":156,"path":157,"stem":158,"description":792,"icon":159,"children":-1},"Show an SEO-friendly breadcrumb trail with JSON-LD structured data.",1782196219260]