[{"data":1,"prerenderedAt":692},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-css-utilities-display-flexbox":273,"-colorffy-css-utilities-display-flexbox-surround":687},[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":59,"body":275,"description":680,"extension":681,"links":682,"meta":683,"navigation":684,"path":60,"seo":685,"stem":61,"__hash__":686},"docs\u002F2.colorffy-css\u002F4.utilities\u002F03.display-flexbox.md",{"type":276,"value":277,"toc":671},"minimark",[278,283,311,364,368,401,457,461,464,503,535,539,609,613,650,654,667],[279,280,282],"h2",{"id":281},"display","Display",[284,285,286,290,291,290,294,290,297,290,300,290,303,306,307,310],"p",{},[287,288,289],"code",{},"d-none",", ",[287,292,293],{},"d-block",[287,295,296],{},"d-inline-block",[287,298,299],{},"d-flex",[287,301,302],{},"d-inline-flex",[287,304,305],{},"d-grid"," — each with responsive variants ",[287,308,309],{},"d-{breakpoint}-{value}",":",[312,313,318],"pre",{"className":314,"code":315,"language":316,"meta":317,"style":317},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"d-none d-md-flex\">Hidden on mobile, flex from md up\u003C\u002Fdiv>\n","html","",[287,319,320],{"__ignoreMap":317},[321,322,325,329,333,337,340,343,347,349,352,356,359,361],"span",{"class":323,"line":324},"line",1,[321,326,328],{"class":327},"sMK4o","\u003C",[321,330,332],{"class":331},"swJcz","div",[321,334,336],{"class":335},"spNyl"," class",[321,338,339],{"class":327},"=",[321,341,342],{"class":327},"\"",[321,344,346],{"class":345},"sfazB","d-none d-md-flex",[321,348,342],{"class":327},[321,350,351],{"class":327},">",[321,353,355],{"class":354},"sTEyZ","Hidden on mobile, flex from md up",[321,357,358],{"class":327},"\u003C\u002F",[321,360,332],{"class":331},[321,362,363],{"class":327},">\n",[279,365,367],{"id":366},"flex-direction-wrapping","Flex direction & wrapping",[312,369,371],{"className":314,"code":370,"language":316,"meta":317,"style":317},"\u003Cdiv class=\"d-flex flex-column flex-md-row gap-3\">…\u003C\u002Fdiv>\n",[287,372,373],{"__ignoreMap":317},[321,374,375,377,379,381,383,385,388,390,392,395,397,399],{"class":323,"line":324},[321,376,328],{"class":327},[321,378,332],{"class":331},[321,380,336],{"class":335},[321,382,339],{"class":327},[321,384,342],{"class":327},[321,386,387],{"class":345},"d-flex flex-column flex-md-row gap-3",[321,389,342],{"class":327},[321,391,351],{"class":327},[321,393,394],{"class":354},"…",[321,396,358],{"class":327},[321,398,332],{"class":331},[321,400,363],{"class":327},[402,403,404,420,432],"ul",{},[405,406,407,408,290,411,290,414,290,417],"li",{},"Direction: ",[287,409,410],{},"flex-row",[287,412,413],{},"flex-row-reverse",[287,415,416],{},"flex-column",[287,418,419],{},"flex-column-reverse",[405,421,422,423,290,426,290,429],{},"Wrap: ",[287,424,425],{},"flex-wrap",[287,427,428],{},"flex-wrap-reverse",[287,430,431],{},"flex-nowrap",[405,433,434,435,290,438,441,442,290,445,441,448,290,451,394,454],{},"Grow \u002F shrink \u002F order: ",[287,436,437],{},"flex-fill",[287,439,440],{},"flex-grow-0"," \u002F ",[287,443,444],{},"flex-grow-1",[287,446,447],{},"flex-shrink-0",[287,449,450],{},"flex-shrink-1",[287,452,453],{},"flex-order-1",[287,455,456],{},"flex-order-5",[279,458,460],{"id":459},"alignment","Alignment",[284,462,463],{},"Works for both flex and grid containers:",[402,465,466,471,476,481,492],{},[405,467,468],{},[287,469,470],{},"justify-content-{start|center|end|between|around|evenly}",[405,472,473],{},[287,474,475],{},"align-items-{start|center|end|baseline|stretch}",[405,477,478],{},[287,479,480],{},"align-content-{start|center|end|between|around}",[405,482,483,290,486,290,489],{},[287,484,485],{},"align-self-*",[287,487,488],{},"justify-items-*",[287,490,491],{},"justify-self-*",[405,493,494,290,497,290,500],{},[287,495,496],{},"place-content-*",[287,498,499],{},"place-items-*",[287,501,502],{},"place-self-*",[312,504,506],{"className":314,"code":505,"language":316,"meta":317,"style":317},"\u003Cdiv class=\"d-flex justify-content-between align-items-center\">…\u003C\u002Fdiv>\n",[287,507,508],{"__ignoreMap":317},[321,509,510,512,514,516,518,520,523,525,527,529,531,533],{"class":323,"line":324},[321,511,328],{"class":327},[321,513,332],{"class":331},[321,515,336],{"class":335},[321,517,339],{"class":327},[321,519,342],{"class":327},[321,521,522],{"class":345},"d-flex justify-content-between align-items-center",[321,524,342],{"class":327},[321,526,351],{"class":327},[321,528,394],{"class":354},[321,530,358],{"class":327},[321,532,332],{"class":331},[321,534,363],{"class":327},[279,536,538],{"id":537},"position-z-index","Position & z-index",[402,540,541,547,563],{},[405,542,543,544],{},"Position: ",[287,545,546],{},"position-{static|relative|absolute|fixed|sticky}",[405,548,549,550,290,553,290,556,290,559,562],{},"Offsets: ",[287,551,552],{},"top-*",[287,554,555],{},"right-*",[287,557,558],{},"bottom-*",[287,560,561],{},"left-*"," (spacing scale)",[405,564,565,566,290,569,290,572,290,575,290,578,290,581,290,584,290,587,590,591,290,594,290,597,290,600,290,603,290,606],{},"z-index: ",[287,567,568],{},"z-0",[287,570,571],{},"z-1",[287,573,574],{},"z-2",[287,576,577],{},"z-5",[287,579,580],{},"z-99",[287,582,583],{},"z-100",[287,585,586],{},"z-999",[287,588,589],{},"z-1000",", plus semantic ",[287,592,593],{},"z-navigation",[287,595,596],{},"z-navbar",[287,598,599],{},"z-fab",[287,601,602],{},"z-menu",[287,604,605],{},"z-fullscreen",[287,607,608],{},"z-toast",[279,610,612],{"id":611},"sizing","Sizing",[402,614,615,635],{},[405,616,617,618,621,622,290,625,290,628,631,632],{},"Height: ",[287,619,620],{},"h-{auto|fit|fixed|50|75|100}",", viewport ",[287,623,624],{},"vh-{50|75|100}",[287,626,627],{},"min-vh-100",[287,629,630],{},"max-vh-100",", dynamic ",[287,633,634],{},"dvh-100",[405,636,637,638,621,641,290,644,290,647],{},"Width: ",[287,639,640],{},"w-{auto|fit|fixed|50|75|100}",[287,642,643],{},"vw-{50|75|100}",[287,645,646],{},"min-vw-100",[287,648,649],{},"dvw-100",[279,651,653],{"id":652},"visibility","Visibility",[284,655,656,290,659,662,663,666],{},[287,657,658],{},"visibility-visible",[287,660,661],{},"visibility-hidden",", and ",[287,664,665],{},"visually-hidden"," (removed visually but still announced to screen readers).",[668,669,670],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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":317,"searchDepth":672,"depth":672,"links":673},2,[674,675,676,677,678,679],{"id":281,"depth":672,"text":282},{"id":366,"depth":672,"text":367},{"id":459,"depth":672,"text":460},{"id":537,"depth":672,"text":538},{"id":611,"depth":672,"text":612},{"id":652,"depth":672,"text":653},"Display, flexbox, alignment, position, sizing, and z-index utilities.","md",null,{},{"icon":62},{"title":59,"description":680},"NSOGAA-nQf3bR-yHilYi71NmcWyPF-9KiBI5Gq3kn0w",[688,690],{"title":54,"path":55,"stem":56,"description":689,"icon":57,"children":-1},"Text, background, and gradient utilities powered by the tonal color system.",{"title":64,"path":65,"stem":66,"description":691,"icon":67,"children":-1},"Filters, transforms, opacity, blend modes, masks, and scroll effects.",1782196219260]