[{"data":1,"prerenderedAt":5874},["ShallowReactive",2],{"navigation_docs":3,"-migration":316,"-migration-surround":5869},[4,21,115,307,312],{"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,297,302],{"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,205,210,215,219,224,229,233,238,243,248,253,257,262,267,272,277,282,287,292],{"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},"Calendar","\u002Fcolorffy-ui\u002Fcomponents\u002Fcalendar","3.colorffy-ui\u002F2.components\u002F09.calendar","i-lucide-calendar",{"title":181,"path":182,"stem":183,"icon":184},"Card","\u002Fcolorffy-ui\u002Fcomponents\u002Fcard","3.colorffy-ui\u002F2.components\u002F10.card","i-lucide-square",{"title":186,"path":187,"stem":188,"icon":189},"Chip","\u002Fcolorffy-ui\u002Fcomponents\u002Fchip","3.colorffy-ui\u002F2.components\u002F11.chip","i-lucide-tags",{"title":191,"path":192,"stem":193,"icon":194},"Datatable","\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable","3.colorffy-ui\u002F2.components\u002F12.datatable","i-lucide-table",{"title":196,"path":197,"stem":198,"icon":199},"Divider","\u002Fcolorffy-ui\u002Fcomponents\u002Fdivider","3.colorffy-ui\u002F2.components\u002F13.divider","i-lucide-separator-horizontal",{"title":201,"path":202,"stem":203,"icon":204},"Empty","\u002Fcolorffy-ui\u002Fcomponents\u002Fempty","3.colorffy-ui\u002F2.components\u002F14.empty","i-lucide-inbox",{"title":206,"path":207,"stem":208,"icon":209},"Icons","\u002Fcolorffy-ui\u002Fcomponents\u002Ficons","3.colorffy-ui\u002F2.components\u002F15.icons","i-lucide-shapes",{"title":211,"path":212,"stem":213,"icon":214},"Inputs","\u002Fcolorffy-ui\u002Fcomponents\u002Finputs","3.colorffy-ui\u002F2.components\u002F16.inputs","i-lucide-text-cursor-input",{"title":79,"path":216,"stem":217,"icon":218},"\u002Fcolorffy-ui\u002Fcomponents\u002Flayout","3.colorffy-ui\u002F2.components\u002F17.layout","i-lucide-layout",{"title":220,"path":221,"stem":222,"icon":223},"List","\u002Fcolorffy-ui\u002Fcomponents\u002Flist","3.colorffy-ui\u002F2.components\u002F18.list","i-lucide-list",{"title":225,"path":226,"stem":227,"icon":228},"Loading","\u002Fcolorffy-ui\u002Fcomponents\u002Floading","3.colorffy-ui\u002F2.components\u002F19.loading","i-lucide-loader-circle",{"title":230,"path":231,"stem":232,"icon":88},"Modal","\u002Fcolorffy-ui\u002Fcomponents\u002Fmodal","3.colorffy-ui\u002F2.components\u002F20.modal",{"title":234,"path":235,"stem":236,"icon":237},"Navbar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavbar","3.colorffy-ui\u002F2.components\u002F21.navbar","i-lucide-panel-top",{"title":239,"path":240,"stem":241,"icon":242},"Navigation Bar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavigation-bar","3.colorffy-ui\u002F2.components\u002F22.navigation-bar","i-lucide-navigation",{"title":244,"path":245,"stem":246,"icon":247},"Pagination","\u002Fcolorffy-ui\u002Fcomponents\u002Fpagination","3.colorffy-ui\u002F2.components\u002F23.pagination","i-lucide-ellipsis",{"title":249,"path":250,"stem":251,"icon":252},"Popover","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover","3.colorffy-ui\u002F2.components\u002F24.popover","i-lucide-message-square",{"title":254,"path":255,"stem":256,"icon":247},"Popover Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover-menu","3.colorffy-ui\u002F2.components\u002F25.popover-menu",{"title":258,"path":259,"stem":260,"icon":261},"Progress","\u002Fcolorffy-ui\u002Fcomponents\u002Fprogress","3.colorffy-ui\u002F2.components\u002F26.progress","i-lucide-loader",{"title":263,"path":264,"stem":265,"icon":266},"Segmented Controls","\u002Fcolorffy-ui\u002Fcomponents\u002Fsegmented-controls","3.colorffy-ui\u002F2.components\u002F27.segmented-controls","i-lucide-toggle-left",{"title":268,"path":269,"stem":270,"icon":271},"Sidebar","\u002Fcolorffy-ui\u002Fcomponents\u002Fsidebar","3.colorffy-ui\u002F2.components\u002F28.sidebar","i-lucide-panel-left",{"title":273,"path":274,"stem":275,"icon":276},"Skeleton","\u002Fcolorffy-ui\u002Fcomponents\u002Fskeleton","3.colorffy-ui\u002F2.components\u002F29.skeleton","i-lucide-square-dashed",{"title":278,"path":279,"stem":280,"icon":281},"Stepper","\u002Fcolorffy-ui\u002Fcomponents\u002Fstepper","3.colorffy-ui\u002F2.components\u002F30.stepper","i-lucide-list-ordered",{"title":283,"path":284,"stem":285,"icon":286},"Tabs","\u002Fcolorffy-ui\u002Fcomponents\u002Ftabs","3.colorffy-ui\u002F2.components\u002F31.tabs","i-lucide-panels-top-left",{"title":288,"path":289,"stem":290,"icon":291},"Timeline","\u002Fcolorffy-ui\u002Fcomponents\u002Ftimeline","3.colorffy-ui\u002F2.components\u002F32.timeline","i-lucide-history",{"title":293,"path":294,"stem":295,"icon":296},"Tooltip","\u002Fcolorffy-ui\u002Fcomponents\u002Ftooltip","3.colorffy-ui\u002F2.components\u002F33.tooltip","i-lucide-message-circle",{"title":298,"path":299,"stem":300,"icon":301},"Styling","\u002Fcolorffy-ui\u002Fstyling","3.colorffy-ui\u002F3.styling","i-lucide-paintbrush",{"title":303,"path":304,"stem":305,"icon":306},"Localization","\u002Fcolorffy-ui\u002Flocalization","3.colorffy-ui\u002F4.localization","i-lucide-languages",{"title":308,"path":309,"stem":310,"icon":311},"Migration","\u002Fmigration","4.migration","i-lucide-route",{"title":313,"path":314,"stem":315,"icon":291},"Changelog","\u002Fchangelog","5.changelog",{"id":317,"title":308,"body":318,"description":5863,"extension":5811,"links":5864,"meta":5865,"navigation":5866,"path":309,"seo":5867,"stem":310,"__hash__":5868},"docs\u002F4.migration.md",{"type":319,"value":320,"toc":5837},"minimark",[321,330,335,343,396,411,415,418,425,728,741,788,870,934,937,985,1037,1040,1099,1109,1141,1216,1222,1225,1246,1312,1319,1338,1369,1393,1568,1571,1577,1695,1737,1743,1820,1823,2099,2114,2240,2267,2358,2361,2376,2531,2536,2644,2667,2670,2676,2839,2854,2928,2939,2943,2955,2993,3011,3014,3017,3112,3138,3142,3270,3451,3454,3457,3550,3553,3572,3702,3705,3716,3865,3871,4090,4376,4380,4403,4407,4410,4414,4417,4502,4505,4565,4588,4592,4615,4785,4792,4844,4848,4871,4948,4952,4976,4980,4984,4994,5195,5202,5220,5224,5251,5332,5338,5342,5364,5389,5407,5411,5417,5576,5587,5590,5628,5632,5643,5662,5774,5776,5833],[322,323,324,325,329],"p",{},"Each section covers one upgrade, newest first, and lists only what needs an\nedit on your side. Everything else a release changes is in the\n",[326,327,328],"a",{"href":314},"changelog",".",[331,332,334],"h2",{"id":333},"upgrading-to-30","Upgrading to 3.0",[322,336,337,338,342],{},"3.0 removes what 2.x deprecated, namespaces every public custom property with\n",[339,340,341],"code",{},"--cffy-",", and settles the component API. Work through the steps in order: the\nfind-and-replace in step 2 expects step 1 to be done.",[344,345,346,353,359,365,371,377,383,389],"ol",{},[347,348,349],"li",{},[326,350,352],{"href":351},"#clear-the-2x-deprecations","Clear the 2.x deprecations",[347,354,355],{},[326,356,358],{"href":357},"#namespace-the-custom-properties","Namespace the custom properties",[347,360,361],{},[326,362,364],{"href":363},"#update-tonal-colors","Update tonal colors",[347,366,367],{},[326,368,370],{"href":369},"#replace-the-removed-styles","Replace the removed styles",[347,372,373],{},[326,374,376],{"href":375},"#replace-removed-props-slots-and-components","Replace removed props, slots and components",[347,378,379],{},[326,380,382],{"href":381},"#rename-event-listeners","Rename event listeners",[347,384,385],{},[326,386,388],{"href":387},"#use-the-ids-you-pass","Use the ids you pass",[347,390,391,395],{},[326,392,394],{"href":393},"#replace-primevue-components","Replace PrimeVue components"," (optional)",[322,397,398,399,402,403,406,407,410],{},"Steps 1–4 touch your stylesheets (",[339,400,401],{},"@colorffy\u002Fcss","), steps 5–7 your templates\n(",[339,404,405],{},"@colorffy\u002Fui","). Step 8 is for apps that still use PrimeVue, whose Colorffy\nskin 3.0 removes. Until you have finished, keep both packages on ",[339,408,409],{},"^2.8",", which\nstill accepts every deprecated name and still styles PrimeVue.",[412,413,352],"h3",{"id":414},"clear-the-2x-deprecations",[322,416,417],{},"These names still work in 2.8, so you can make these edits and ship them before\nyou upgrade.",[322,419,420,424],{},[421,422,423],"strong",{},"Font sizes."," The ordinal tokens and their classes are gone. Rename them to\nthe t-shirt scale:",[426,427,428,447],"table",{},[429,430,431],"thead",{},[432,433,434,438,441,444],"tr",{},[435,436,437],"th",{},"Removed token \u002F class",[435,439,440],{},"3.0 token",[435,442,443],{},"3.0 class",[435,445,446],{},"Max size",[448,449,450,475,498,521,544,567,590,613,636,659,682,705],"tbody",{},[432,451,452,462,467,472],{},[453,454,455,458,459],"td",{},[339,456,457],{},"--fs-sm-500"," \u002F ",[339,460,461],{},".fs-sm-500",[453,463,464],{},[339,465,466],{},"--cffy-fs-4xs",[453,468,469],{},[339,470,471],{},".fs-4xs",[453,473,474],{},"11px",[432,476,477,485,490,495],{},[453,478,479,458,482],{},[339,480,481],{},"--fs-sm-400",[339,483,484],{},".fs-sm-400",[453,486,487],{},[339,488,489],{},"--cffy-fs-3xs",[453,491,492],{},[339,493,494],{},".fs-3xs",[453,496,497],{},"12px",[432,499,500,508,513,518],{},[453,501,502,458,505],{},[339,503,504],{},"--fs-sm-300",[339,506,507],{},".fs-sm-300",[453,509,510],{},[339,511,512],{},"--cffy-fs-2xs",[453,514,515],{},[339,516,517],{},".fs-2xs",[453,519,520],{},"13px",[432,522,523,531,536,541],{},[453,524,525,458,528],{},[339,526,527],{},"--fs-sm-200",[339,529,530],{},".fs-sm-200",[453,532,533],{},[339,534,535],{},"--cffy-fs-xs",[453,537,538],{},[339,539,540],{},".fs-xs",[453,542,543],{},"14px",[432,545,546,554,559,564],{},[453,547,548,458,551],{},[339,549,550],{},"--fs-sm-100",[339,552,553],{},".fs-sm-100",[453,555,556],{},[339,557,558],{},"--cffy-fs-sm",[453,560,561],{},[339,562,563],{},".fs-sm",[453,565,566],{},"15px",[432,568,569,577,582,587],{},[453,570,571,458,574],{},[339,572,573],{},"--fs-600",[339,575,576],{},".fs-600",[453,578,579],{},[339,580,581],{},"--cffy-fs-base",[453,583,584],{},[339,585,586],{},".fs-base",[453,588,589],{},"16px",[432,591,592,600,605,610],{},[453,593,594,458,597],{},[339,595,596],{},"--fs-500",[339,598,599],{},".fs-500",[453,601,602],{},[339,603,604],{},"--cffy-fs-lg",[453,606,607],{},[339,608,609],{},".fs-lg",[453,611,612],{},"20px",[432,614,615,623,628,633],{},[453,616,617,458,620],{},[339,618,619],{},"--fs-400",[339,621,622],{},".fs-400",[453,624,625],{},[339,626,627],{},"--cffy-fs-xl",[453,629,630],{},[339,631,632],{},".fs-xl",[453,634,635],{},"24px",[432,637,638,646,651,656],{},[453,639,640,458,643],{},[339,641,642],{},"--fs-300",[339,644,645],{},".fs-300",[453,647,648],{},[339,649,650],{},"--cffy-fs-2xl",[453,652,653],{},[339,654,655],{},".fs-2xl",[453,657,658],{},"28px",[432,660,661,669,674,679],{},[453,662,663,458,666],{},[339,664,665],{},"--fs-200",[339,667,668],{},".fs-200",[453,670,671],{},[339,672,673],{},"--cffy-fs-3xl",[453,675,676],{},[339,677,678],{},".fs-3xl",[453,680,681],{},"32px",[432,683,684,692,697,702],{},[453,685,686,458,689],{},[339,687,688],{},"--fs-100",[339,690,691],{},".fs-100",[453,693,694],{},[339,695,696],{},"--cffy-fs-4xl",[453,698,699],{},[339,700,701],{},".fs-4xl",[453,703,704],{},"40px",[432,706,707,715,720,725],{},[453,708,709,458,712],{},[339,710,711],{},"--fs-xl-100",[339,713,714],{},".fs-xl-100",[453,716,717],{},[339,718,719],{},"--cffy-fs-5xl",[453,721,722],{},[339,723,724],{},".fs-5xl",[453,726,727],{},"~53px",[322,729,730,731,734,735,737,738,740],{},"On 2.8 the new tokens have no prefix yet (",[339,732,733],{},"--fs-4xs","); step 2 adds it. A\nt-shirt class also sets its paired line-height, which the legacy class did not,\nso text moved from ",[339,736,599],{}," to ",[339,739,609],{}," gets a 28px line box. Check tight\nlayouts such as badges and table cells.",[322,742,743,746,747,750,751,754,755,758,759,750,762,754,765,768,769,772,773,776,777,750,780,783,784,787],{},[421,744,745],{},"SCSS variables."," ",[339,748,749],{},"$space-1",", ",[339,752,753],{},"$space-2"," and ",[339,756,757],{},"$space-3"," are gone; use\n",[339,760,761],{},"var(--cffy-space-16)",[339,763,764],{},"var(--cffy-space-32)",[339,766,767],{},"var(--cffy-space-48)",". So\nare the color and font variables deprecated in 2.8 (",[339,770,771],{},"$primary"," … ",[339,774,775],{},"$muted",",\n",[339,778,779],{},"$primary-colors",[339,781,782],{},"$font-*","), and a ",[339,785,786],{},"@forward … with (…)"," that still sets one\nfails to compile. Drop them from the configuration and set the tokens instead:",[789,790,795],"pre",{"className":791,"code":792,"language":793,"meta":794,"style":794},"language-scss shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F 2.x\n@forward '@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Fvariables' with (\n  $primary: #6750a4,\n  $font-primary: 'Inter', sans-serif\n);\n","scss","",[339,796,797,806,832,843,861],{"__ignoreMap":794},[798,799,802],"span",{"class":800,"line":801},"line",1,[798,803,805],{"class":804},"sHwdD","\u002F\u002F 2.x\n",[798,807,809,813,817,821,824,828],{"class":800,"line":808},2,[798,810,812],{"class":811},"s7zQu","@forward",[798,814,816],{"class":815},"sMK4o"," '",[798,818,820],{"class":819},"sfazB","@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Fvariables",[798,822,823],{"class":815},"'",[798,825,827],{"class":826},"s2Zo4"," with",[798,829,831],{"class":830},"sTEyZ"," (\n",[798,833,835,838,841],{"class":800,"line":834},3,[798,836,837],{"class":830},"  $primary: #",[798,839,840],{"class":826},"6750a4",[798,842,776],{"class":830},[798,844,846,849,851,854,856,858],{"class":800,"line":845},4,[798,847,848],{"class":830},"  $font-primary: ",[798,850,823],{"class":815},[798,852,853],{"class":819},"Inter",[798,855,823],{"class":815},[798,857,750],{"class":830},[798,859,860],{"class":826},"sans-serif\n",[798,862,864,867],{"class":800,"line":863},5,[798,865,866],{"class":830},")",[798,868,869],{"class":815},";\n",[789,871,875],{"className":872,"code":873,"language":874,"meta":794,"style":794},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* 3.0 *\u002F\n:root {\n  --cffy-color-brand-primary-500: #6750a4;\n  --cffy-font-primary: 'Inter', sans-serif;\n}\n","css",[339,876,877,882,894,908,929],{"__ignoreMap":794},[798,878,879],{"class":800,"line":801},[798,880,881],{"class":804},"\u002F* 3.0 *\u002F\n",[798,883,884,887,891],{"class":800,"line":808},[798,885,886],{"class":815},":",[798,888,890],{"class":889},"spNyl","root",[798,892,893],{"class":815}," {\n",[798,895,896,899,901,904,906],{"class":800,"line":834},[798,897,898],{"class":830},"  --cffy-color-brand-primary-500",[798,900,886],{"class":815},[798,902,903],{"class":815}," #",[798,905,840],{"class":830},[798,907,869],{"class":815},[798,909,910,913,915,917,919,921,924,927],{"class":800,"line":845},[798,911,912],{"class":830},"  --cffy-font-primary",[798,914,886],{"class":815},[798,916,816],{"class":815},[798,918,853],{"class":819},[798,920,823],{"class":815},[798,922,923],{"class":815},",",[798,925,926],{"class":830}," sans-serif",[798,928,869],{"class":815},[798,930,931],{"class":800,"line":863},[798,932,933],{"class":815},"}\n",[412,935,358],{"id":936},"namespace-the-custom-properties",[322,938,939,940,942,943,946,947,950,951,954,955,750,958,961,962,965,966,954,969,750,972,961,975,776,978,961,981,984],{},"Every public custom property now starts with ",[339,941,341],{},", so Colorffy's names no\nlonger collide with other libraries on the page. The semantic ",[339,944,945],{},"--theme-*","\ntokens swap ",[339,948,949],{},"theme-"," for the namespace (",[339,952,953],{},"--theme-primary-a10"," →\n",[339,956,957],{},"--cffy-primary-a10",[339,959,960],{},"--theme-surface-container"," → ",[339,963,964],{},"--cffy-surface-container","),\nand every other public name gains it (",[339,967,968],{},"--color-brand-primary-500",[339,970,971],{},"--cffy-color-brand-primary-500",[339,973,974],{},"--space-16",[339,976,977],{},"--cffy-space-16",[339,979,980],{},"--card-bg-color",[339,982,983],{},"--cffy-card-bg-color","). In your stylesheets and inline\nstyles, run these replacements in order:",[344,986,987,996,1011],{},[347,988,989,990,993,994,329],{},"Replace ",[339,991,992],{},"--theme-"," with ",[339,995,341],{},[347,997,998,999,1002,1003],{},"Replace this regular expression with ",[339,1000,1001],{},"--cffy-$1",". It only matches names that\nare Colorffy's alone, so your own custom properties stay untouched:",[789,1004,1009],{"className":1005,"code":1007,"language":1008,"meta":794},[1006],"language-text","(?\u003C![\\w-])--((?:accordion|alert|anchor|avatar|badge|breadcrumb|btn|card|carousel|chip|code|dialog|divider|dots|dropdown|duration|element|fab|fade|footer|form|fs|fw|gradient|header|hero|icon|ie|input|iw|kbd|link|list|loading|menu|navbar|navigation|noise|popover|progress|pwa|segmented|shape|sidebar|skeleton|space|state|stepper|subheading|table|tabs|timeline|toggle|tooltip|vfs|vfw|color-brand|color-wheel|border-width|focus-ring)-|angle\\b|carousel\\b|h-fixed\\b|w-fixed\\b)\n","text",[339,1010,1007],{"__ignoreMap":794},[347,1012,1013,1014,750,1017,750,1020,754,1023,1026,1027,458,1030,458,1033,1036],{},"Review ",[339,1015,1016],{},"--radius-*",[339,1018,1019],{},"--shadow-*",[339,1021,1022],{},"--ease-*",[339,1024,1025],{},"--font-primary"," \u002F\n",[339,1028,1029],{},"-secondary",[339,1031,1032],{},"-code",[339,1034,1035],{},"-icons"," by hand. Tailwind v4 and other libraries\nuse the same names, so rename only the ones that set or read Colorffy's\ntokens.",[322,1038,1039],{},"These variables changed more than their prefix:",[426,1041,1042,1052],{},[429,1043,1044],{},[432,1045,1046,1049],{},[435,1047,1048],{},"2.x",[435,1050,1051],{},"3.0",[448,1053,1054,1071,1083],{},[432,1055,1056,1066],{},[453,1057,1058,1061,1062,1065],{},[339,1059,1060],{},"--theme-nav-drawer-width"," (",[339,1063,1064],{},"--cffy-nav-drawer-width"," after the replacement)",[453,1067,1068],{},[339,1069,1070],{},"--cffy-sidebar-width",[432,1072,1073,1078],{},[453,1074,1075],{},[339,1076,1077],{},"--_drawer-active-color",[453,1079,1080],{},[339,1081,1082],{},"--cffy-sidebar-item-active-icon-color",[432,1084,1085,1094],{},[453,1086,1087,1090,1091,866],{},[339,1088,1089],{},"--_progress-width"," (the fill of a hand-written ",[339,1092,1093],{},".progress-bar",[453,1095,1096],{},[339,1097,1098],{},"--cffy-progress-value",[322,1100,1101,1104,1105,1108],{},[339,1102,1103],{},"UiSidebar","'s ",[339,1106,1107],{},"width"," prop already sets the new name.",[322,1110,1111,1114,1115,1118,1119,961,1122,750,1125,961,1128,776,1131,961,1134,1137,1138,1140],{},[421,1112,1113],{},"Private variables."," Variables that start with ",[339,1116,1117],{},"--_"," were never public API,\nand in 3.0 most of them are named after their public hook\n(",[339,1120,1121],{},"--_card-gutter-x",[339,1123,1124],{},"--_card-padding-inline",[339,1126,1127],{},"--_drawer-*",[339,1129,1130],{},"--_sidebar-*",[339,1132,1133],{},"--_form-*",[339,1135,1136],{},"--_input-*","). A rule that set an old name stops applying without\nan error. Search your stylesheets for ",[339,1139,1117],{}," and set the component's public hook\ninstead, which also survives future refactors:",[789,1142,1144],{"className":872,"code":1143,"language":874,"meta":794,"style":794},"\u002F* 2.x *\u002F\n.compact-card { --_card-gutter-x: var(--space-8); }\n\n\u002F* 3.0 *\u002F\n.compact-card { --cffy-card-padding-inline: var(--cffy-space-8); }\n",[339,1145,1146,1151,1182,1188,1192],{"__ignoreMap":794},[798,1147,1148],{"class":800,"line":801},[798,1149,1150],{"class":804},"\u002F* 2.x *\u002F\n",[798,1152,1153,1155,1159,1162,1165,1167,1170,1173,1176,1179],{"class":800,"line":808},[798,1154,329],{"class":815},[798,1156,1158],{"class":1157},"sBMFI","compact-card",[798,1160,1161],{"class":815}," {",[798,1163,1164],{"class":830}," --_card-gutter-x",[798,1166,886],{"class":815},[798,1168,1169],{"class":826}," var",[798,1171,1172],{"class":815},"(",[798,1174,1175],{"class":830},"--space-8",[798,1177,1178],{"class":815},");",[798,1180,1181],{"class":815}," }\n",[798,1183,1184],{"class":800,"line":834},[798,1185,1187],{"emptyLinePlaceholder":1186},true,"\n",[798,1189,1190],{"class":800,"line":845},[798,1191,881],{"class":804},[798,1193,1194,1196,1198,1200,1203,1205,1207,1209,1212,1214],{"class":800,"line":863},[798,1195,329],{"class":815},[798,1197,1158],{"class":1157},[798,1199,1161],{"class":815},[798,1201,1202],{"class":830}," --cffy-card-padding-inline",[798,1204,886],{"class":815},[798,1206,1169],{"class":826},[798,1208,1172],{"class":815},[798,1210,1211],{"class":830},"--cffy-space-8",[798,1213,1178],{"class":815},[798,1215,1181],{"class":815},[322,1217,1218,1219,329],{},"Each component page lists its hooks under ",[421,1220,1221],{},"CSS variables",[412,1223,364],{"id":1224},"update-tonal-colors",[322,1226,1227,1230,1231,1234,1235,1237,1238,1241,1242,1245],{},[421,1228,1229],{},"Tinted text reads the container tokens."," In dark mode ",[339,1232,1233],{},"a90"," used to be a\nlight tint, the text color for tinted surfaces. Every ramp now darkens step by\nstep in both modes, so ",[339,1236,1233],{}," is its darkest step, and that text role is\n",[339,1239,1240],{},"--cffy-on-\u003Ccolor>-container",". Where you read ",[339,1243,1244],{},"--cffy-\u003Ccolor>-a90"," for text or\nicons on a tonal background, read the container token instead:",[789,1247,1249],{"className":872,"code":1248,"language":874,"meta":794,"style":794},"\u002F* 2.x *\u002F\n.tag-success { color: var(--theme-success-a90); }\n\n\u002F* 3.0 *\u002F\n.tag-success { color: var(--cffy-on-success-container); }\n",[339,1250,1251,1255,1281,1285,1289],{"__ignoreMap":794},[798,1252,1253],{"class":800,"line":801},[798,1254,1150],{"class":804},[798,1256,1257,1259,1262,1264,1268,1270,1272,1274,1277,1279],{"class":800,"line":808},[798,1258,329],{"class":815},[798,1260,1261],{"class":1157},"tag-success",[798,1263,1161],{"class":815},[798,1265,1267],{"class":1266},"sqsOY"," color",[798,1269,886],{"class":815},[798,1271,1169],{"class":826},[798,1273,1172],{"class":815},[798,1275,1276],{"class":830},"--theme-success-a90",[798,1278,1178],{"class":815},[798,1280,1181],{"class":815},[798,1282,1283],{"class":800,"line":834},[798,1284,1187],{"emptyLinePlaceholder":1186},[798,1286,1287],{"class":800,"line":845},[798,1288,881],{"class":804},[798,1290,1291,1293,1295,1297,1299,1301,1303,1305,1308,1310],{"class":800,"line":863},[798,1292,329],{"class":815},[798,1294,1261],{"class":1157},[798,1296,1161],{"class":815},[798,1298,1267],{"class":1266},[798,1300,886],{"class":815},[798,1302,1169],{"class":826},[798,1304,1172],{"class":815},[798,1306,1307],{"class":830},"--cffy-on-success-container",[798,1309,1178],{"class":815},[798,1311,1181],{"class":815},[322,1313,1314,1315,1318],{},"Light mode renders the same either way. ",[339,1316,1317],{},".text-*-emphasis"," and the library's\ncomponents already read the new token.",[322,1320,1321,746,1324,776,1327,754,1330,1333,1334,1337],{},[421,1322,1323],{},"Inverse on-colors are gone.",[339,1325,1326],{},"--cffy-on-primary-inverse",[339,1328,1329],{},"--cffy-on-secondary-inverse",[339,1331,1332],{},"--cffy-on-accent-inverse"," were black in light\nmode and white in dark mode; read ",[339,1335,1336],{},"--cffy-on-background"," instead.",[322,1339,1340,746,1343,1346,1347,1350,1351,737,1354,1357,1358,754,1361,1364,1365,1368],{},[421,1341,1342],{},"Custom intensities.",[339,1344,1345],{},"--cffy-tonal-dark-intensity"," now defaults to ",[339,1348,1349],{},"58%"," and\n",[339,1352,1353],{},"--cffy-tonal-light-intensity",[339,1355,1356],{},"8%"," (were ",[339,1359,1360],{},"70%",[339,1362,1363],{},"15%","), because the ramps\nmix in ",[339,1366,1367],{},"oklab",". A value you set yourself comes out darker in dark mode than it\ndid in 2.x; start again from the new defaults.",[322,1370,1371,1374,1375,754,1378,1381,1382,1385,1386,1389,1390,1392],{},[421,1372,1373],{},"Tonal mixins take the surface"," (SCSS). ",[339,1376,1377],{},"btn-tonal()",[339,1379,1380],{},"container-tonal()","\nno longer compute the container from the base tone and an ",[339,1383,1384],{},"$isDark"," flag. Pass\nthe container token, or build one with the ",[339,1387,1388],{},"tonal()"," function. ",[339,1391,1377],{},"\nalso takes the fill that hover and pressed mix toward:",[789,1394,1396],{"className":791,"code":1395,"language":793,"meta":794,"style":794},"\u002F\u002F 2.x\n@include m.btn-tonal(var(--theme-success-a10), var(--theme-success-a90), true);\n@include m.container-tonal(var(--theme-success-a10), var(--theme-success-a90), true, false, badge);\n\n\u002F\u002F 3.0\n@include m.btn-tonal(var(--cffy-success-container), var(--cffy-success-a10), var(--cffy-on-success-container));\n@include m.container-tonal(var(--cffy-success-container), var(--cffy-on-success-container), false, badge);\n",[339,1397,1398,1402,1443,1479,1483,1488,1532],{"__ignoreMap":794},[798,1399,1400],{"class":800,"line":801},[798,1401,805],{"class":804},[798,1403,1404,1407,1410,1412,1415,1417,1420,1422,1425,1427,1429,1431,1433,1435,1437,1440],{"class":800,"line":808},[798,1405,1406],{"class":811},"@include",[798,1408,1409],{"class":830}," m",[798,1411,329],{"class":815},[798,1413,1414],{"class":826},"btn-tonal",[798,1416,1172],{"class":815},[798,1418,1419],{"class":826},"var",[798,1421,1172],{"class":815},[798,1423,1424],{"class":830},"--theme-success-a10",[798,1426,866],{"class":815},[798,1428,750],{"class":830},[798,1430,1419],{"class":826},[798,1432,1172],{"class":815},[798,1434,1276],{"class":830},[798,1436,866],{"class":815},[798,1438,1439],{"class":830},", true",[798,1441,1442],{"class":815},");\n",[798,1444,1445,1447,1449,1451,1454,1456,1458,1460,1462,1464,1466,1468,1470,1472,1474,1477],{"class":800,"line":834},[798,1446,1406],{"class":811},[798,1448,1409],{"class":830},[798,1450,329],{"class":815},[798,1452,1453],{"class":826},"container-tonal",[798,1455,1172],{"class":815},[798,1457,1419],{"class":826},[798,1459,1172],{"class":815},[798,1461,1424],{"class":830},[798,1463,866],{"class":815},[798,1465,750],{"class":830},[798,1467,1419],{"class":826},[798,1469,1172],{"class":815},[798,1471,1276],{"class":830},[798,1473,866],{"class":815},[798,1475,1476],{"class":830},", true, false, badge",[798,1478,1442],{"class":815},[798,1480,1481],{"class":800,"line":845},[798,1482,1187],{"emptyLinePlaceholder":1186},[798,1484,1485],{"class":800,"line":863},[798,1486,1487],{"class":804},"\u002F\u002F 3.0\n",[798,1489,1491,1493,1495,1497,1499,1501,1503,1505,1508,1510,1512,1514,1516,1519,1521,1523,1525,1527,1529],{"class":800,"line":1490},6,[798,1492,1406],{"class":811},[798,1494,1409],{"class":830},[798,1496,329],{"class":815},[798,1498,1414],{"class":826},[798,1500,1172],{"class":815},[798,1502,1419],{"class":826},[798,1504,1172],{"class":815},[798,1506,1507],{"class":830},"--cffy-success-container",[798,1509,866],{"class":815},[798,1511,750],{"class":830},[798,1513,1419],{"class":826},[798,1515,1172],{"class":815},[798,1517,1518],{"class":830},"--cffy-success-a10",[798,1520,866],{"class":815},[798,1522,750],{"class":830},[798,1524,1419],{"class":826},[798,1526,1172],{"class":815},[798,1528,1307],{"class":830},[798,1530,1531],{"class":815},"));\n",[798,1533,1535,1537,1539,1541,1543,1545,1547,1549,1551,1553,1555,1557,1559,1561,1563,1566],{"class":800,"line":1534},7,[798,1536,1406],{"class":811},[798,1538,1409],{"class":830},[798,1540,329],{"class":815},[798,1542,1453],{"class":826},[798,1544,1172],{"class":815},[798,1546,1419],{"class":826},[798,1548,1172],{"class":815},[798,1550,1507],{"class":830},[798,1552,866],{"class":815},[798,1554,750],{"class":830},[798,1556,1419],{"class":826},[798,1558,1172],{"class":815},[798,1560,1307],{"class":830},[798,1562,866],{"class":815},[798,1564,1565],{"class":830},", false, badge",[798,1567,1442],{"class":815},[412,1569,370],{"id":1570},"replace-the-removed-styles",[322,1572,1573,1574,1576],{},"Some rules only ever served one app, or nothing at all, and are gone from\n",[339,1575,401],{},". Edit your own markup or build only if it used one:",[426,1578,1579,1589],{},[429,1580,1581],{},[432,1582,1583,1586],{},[435,1584,1585],{},"Removed",[435,1587,1588],{},"Use instead",[448,1590,1591,1621,1645,1672],{},[432,1592,1593,1611],{},[453,1594,1595,1598,1599,750,1602,750,1605,750,1608,866],{},[339,1596,1597],{},".menu-tools-container"," mega menu (",[339,1600,1601],{},".menu-tools",[339,1603,1604],{},".menu-tabs",[339,1606,1607],{},".menu-grid",[339,1609,1610],{},".menu-cta",[453,1612,1613,1614,1617,1618],{},"Nothing replaces it. Copy its rules from ",[339,1615,1616],{},"@colorffy\u002Fcss@2.8"," into your own stylesheet, or build the panel with ",[339,1619,1620],{},"UiPopover",[432,1622,1623,1635],{},[453,1624,1625,1628,1629,754,1632,866],{},[339,1626,1627],{},".segmented-control"," (with ",[339,1630,1631],{},".segmented-control-active",[339,1633,1634],{},".active-grid",[453,1636,1637,1640,1641,1644],{},[339,1638,1639],{},"UiSegmentedControls",", or ",[339,1642,1643],{},".tab-segmented-control"," in CSS-only markup",[432,1646,1647,1661],{},[453,1648,1649,1061,1652,750,1655,750,1658,866],{},[339,1650,1651],{},".pwa-alert-container",[339,1653,1654],{},".pwa-content",[339,1656,1657],{},".pwa-content-text-wrapper",[339,1659,1660],{},".pwa-actions",[453,1662,1663,993,1666,1669,1670],{},[339,1664,1665],{},"UiAlert",[339,1667,1668],{},"type=\"snackbar\""," and actions, or copy the rules from ",[339,1671,1616],{},[432,1673,1674,1688],{},[453,1675,1676,750,1679,750,1682,750,1685],{},[339,1677,1678],{},".ripple",[339,1680,1681],{},".ripple-dark",[339,1683,1684],{},".ripple-primary",[339,1686,1687],{},".ripple-secondary",[453,1689,1690,1691,1694],{},"Nothing; the ",[339,1692,1693],{},"ripple-color($color)"," mixin stays, so you can rebuild the effect",[322,1696,1697,746,1700,1702,1703,750,1706,750,1709,750,1712,776,1715,754,1718,1721,1722,1725,1726,1729,1730,1733,1734,1736],{},[421,1698,1699],{},"The PrimeVue skin is gone.",[339,1701,401],{}," no longer styles PrimeVue's\n",[339,1704,1705],{},".p-multiselect",[339,1707,1708],{},".p-select",[339,1710,1711],{},".p-colorpicker",[339,1713,1714],{},".p-toast",[339,1716,1717],{},".p-confirm-dialog",[339,1719,1720],{},".p-inputswitch",", or sets its ",[339,1723,1724],{},"--p-*"," tokens. Move to\nthe native fields in ",[326,1727,1728],{"href":393},"step 8",". If some PrimeVue\ncomponents have to stay for now, copy ",[339,1731,1732],{},"scss\u002Fcomponents\u002F_prime.scss"," from\n",[339,1735,1616],{}," into your app's styles and import it after the framework.",[322,1738,1739,1742],{},[421,1740,1741],{},"Small helpers."," Nothing in Colorffy UI used the rest, so copy any you rely on\ninto your own stylesheet:",[1744,1745,1746,1777],"ul",{},[347,1747,1748,754,1751,750,1754,1757,1758,750,1761,776,1764,750,1767,750,1770,754,1773,1776],{},[339,1749,1750],{},".hover-rotate",[339,1752,1753],{},".hover-scale",[339,1755,1756],{},".vr",", and the ",[339,1759,1760],{},"pulse",[339,1762,1763],{},"glitch",[339,1765,1766],{},"shake-x",[339,1768,1769],{},"shake-y",[339,1771,1772],{},"fade-in-left",[339,1774,1775],{},"slide-in-down"," keyframes.",[347,1778,1779,1780,750,1783,750,1786,750,1789,754,1791,1794,1795,1798,1799,1803,1804,737,1806,750,1809,737,1811,1814,1815,737,1817,329],{},"The ",[339,1781,1782],{},"slide",[339,1784,1785],{},"slide-inline",[339,1787,1788],{},"fade-inline",[339,1790,426],{},[339,1792,1793],{},"table-td-fade","\ntransitions; ",[339,1796,1797],{},"slide-block"," stays. The new\n",[326,1800,1802],{"href":1801},"\u002Fcolorffy-css\u002Futilities\u002Feffects#transitions","transitions"," cover most of\nthem: rename ",[339,1805,1785],{},[339,1807,1808],{},"slide-start",[339,1810,1788],{},[339,1812,1813],{},"slide-end","\nand ",[339,1816,426],{},[339,1818,1819],{},"list",[412,1821,376],{"id":1822},"replace-removed-props-slots-and-components",[426,1824,1825,1836],{},[429,1826,1827],{},[432,1828,1829,1832,1834],{},[435,1830,1831],{},"Component",[435,1833,1585],{},[435,1835,1588],{},[448,1837,1838,1873,1892,1906,1934,1951,1968,1985,2000,2021,2041,2064,2078],{},[432,1839,1840,1845,1859],{},[453,1841,1842],{},[339,1843,1844],{},"UiPopoverMenu",[453,1846,1847,750,1850,750,1853,750,1856],{},[339,1848,1849],{},"user",[339,1851,1852],{},"avatarUrl",[339,1854,1855],{},"avatarCustomClass",[339,1857,1858],{},"subtitle",[453,1860,1861,1864,1865,1868,1869],{},[339,1862,1863],{},"UiPopoverMenuUser"," in ",[339,1866,1867],{},"#header",", see ",[326,1870,1872],{"href":1871},"#the-popover-menu-header-no-longer-renders-identity","the header no longer renders identity",[432,1874,1875,1879,1885],{},[453,1876,1877],{},[339,1878,1844],{},[453,1880,1881,1884],{},[339,1882,1883],{},"#body-extra"," slot",[453,1886,1887,1888,1891],{},"Render the whole body in ",[339,1889,1890],{},"#body"," (below)",[432,1893,1894,1898,1901],{},[453,1895,1896],{},[339,1897,1844],{},[453,1899,1900],{},"Default slot",[453,1902,1903],{},[339,1904,1905],{},"\u003Ctemplate #body>",[432,1907,1908,1912,1924],{},[453,1909,1910],{},[339,1911,1103],{},[453,1913,1914,1915,750,1918,750,1921],{},"Default slot, ",[339,1916,1917],{},"UiSidebarHeader",[339,1919,1920],{},"UiSidebarBody",[339,1922,1923],{},"UiSidebarFooter",[453,1925,1926,750,1928,754,1930,1933],{},[339,1927,1867],{},[339,1929,1890],{},[339,1931,1932],{},"#footer"," slots (below)",[432,1935,1936,1941,1946],{},[453,1937,1938],{},[339,1939,1940],{},"UiEmpty",[453,1942,1943,1884],{},[339,1944,1945],{},"#button",[453,1947,1948],{},[339,1949,1950],{},"#action",[432,1952,1953,1958,1963],{},[453,1954,1955],{},[339,1956,1957],{},"UiInputFile",[453,1959,1960],{},[339,1961,1962],{},"large",[453,1964,1965],{},[339,1966,1967],{},"size=\"lg\"",[432,1969,1970,1975,1980],{},[453,1971,1972],{},[339,1973,1974],{},"BaseSkeleton",[453,1976,1977],{},[339,1978,1979],{},"isThumbnail",[453,1981,1982],{},[339,1983,1984],{},"variant=\"thumbnail\"",[432,1986,1987,1992,1997],{},[453,1988,1989],{},[339,1990,1991],{},"ISegmentedTab",[453,1993,1994],{},[339,1995,1996],{},"position",[453,1998,1999],{},"Nothing; delete it, the indicator measures the active tab",[432,2001,2002,2007,2012],{},[453,2003,2004],{},[339,2005,2006],{},"UiButtonToggleGroup",[453,2008,2009],{},[339,2010,2011],{},"groupLabel",[453,2013,2014,2017,2018,2020],{},[339,2015,2016],{},"ariaLabel","; ",[339,2019,2011],{}," never rendered",[432,2022,2023,2028,2033],{},[453,2024,2025],{},[339,2026,2027],{},"UiModal",[453,2029,2030],{},[339,2031,2032],{},"isHeadless",[453,2034,2035,2017,2038,2040],{},[339,2036,2037],{},"mode=\"headless\"",[339,2039,2032],{}," never applied",[432,2042,2043,2048,2056],{},[453,2044,2045],{},[339,2046,2047],{},"UiButton",[453,2049,2050,750,2053],{},[339,2051,2052],{},"tooltipText",[339,2054,2055],{},"placement",[453,2057,2058,2017,2061,2063],{},[339,2059,2060],{},"UiButtonTooltip",[339,2062,2047],{}," never showed a tooltip",[432,2065,2066,2070,2075],{},[453,2067,2068],{},[339,2069,1844],{},[453,2071,2072],{},[339,2073,2074],{},"auth",[453,2076,2077],{},"Nothing; delete it, it was never read",[432,2079,2080,2085,2096],{},[453,2081,2082],{},[339,2083,2084],{},"UiDatatable",[453,2086,2087,750,2090,750,2093],{},[339,2088,2089],{},"skeletonCols",[339,2091,2092],{},"skeletonColExpanded",[339,2094,2095],{},"isExpanded",[453,2097,2098],{},"Nothing; the loading skeleton matches the visible columns",[322,2100,2101,746,2108,2110,2111,2113],{},[421,2102,2103,2104,2107],{},"Adding rows to a ",[339,2105,2106],{},"menuItems"," menu.",[339,2109,1883],{}," appended content after the\ngenerated items. Render the items yourself in ",[339,2112,1890],{}," instead:",[789,2115,2119],{"className":2116,"code":2117,"language":2118,"meta":794,"style":794},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- 2.x -->\n\u003CUiPopoverMenu :menu-items=\"items\">\n  \u003Ctemplate #body-extra>\n    \u003CThemeSwitch \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FUiPopoverMenu>\n\n\u003C!-- 3.0 -->\n\u003CUiPopoverMenu>\n  \u003Ctemplate #body>\n    \u003CUiPopoverMenuGroup>\n      \u003CUiPopoverMenuItem v-for=\"item in items\" :key=\"item.id\" v-bind=\"item\" \u002F>\n    \u003C\u002FUiPopoverMenuGroup>\n    \u003CThemeSwitch \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FUiPopoverMenu>\n","vue",[339,2120,2121,2126,2154,2159,2164,2169,2178,2182,2188,2197,2203,2209,2215,2221,2226,2231],{"__ignoreMap":794},[798,2122,2123],{"class":800,"line":801},[798,2124,2125],{"class":804},"\u003C!-- 2.x -->\n",[798,2127,2128,2131,2134,2137,2140,2143,2146,2149,2151],{"class":800,"line":808},[798,2129,2130],{"class":815},"\u003C",[798,2132,1844],{"class":2133},"swJcz",[798,2135,2136],{"class":815}," :",[798,2138,2139],{"class":889},"menu-items",[798,2141,2142],{"class":815},"=",[798,2144,2145],{"class":815},"\"",[798,2147,2148],{"class":830},"items",[798,2150,2145],{"class":815},[798,2152,2153],{"class":815},">\n",[798,2155,2156],{"class":800,"line":834},[798,2157,2158],{"class":830},"  \u003Ctemplate #body-extra>\n",[798,2160,2161],{"class":800,"line":845},[798,2162,2163],{"class":830},"    \u003CThemeSwitch \u002F>\n",[798,2165,2166],{"class":800,"line":863},[798,2167,2168],{"class":830},"  \u003C\u002Ftemplate>\n",[798,2170,2171,2174,2176],{"class":800,"line":1490},[798,2172,2173],{"class":815},"\u003C\u002F",[798,2175,1844],{"class":2133},[798,2177,2153],{"class":815},[798,2179,2180],{"class":800,"line":1534},[798,2181,1187],{"emptyLinePlaceholder":1186},[798,2183,2185],{"class":800,"line":2184},8,[798,2186,2187],{"class":804},"\u003C!-- 3.0 -->\n",[798,2189,2191,2193,2195],{"class":800,"line":2190},9,[798,2192,2130],{"class":815},[798,2194,1844],{"class":2133},[798,2196,2153],{"class":815},[798,2198,2200],{"class":800,"line":2199},10,[798,2201,2202],{"class":830},"  \u003Ctemplate #body>\n",[798,2204,2206],{"class":800,"line":2205},11,[798,2207,2208],{"class":830},"    \u003CUiPopoverMenuGroup>\n",[798,2210,2212],{"class":800,"line":2211},12,[798,2213,2214],{"class":830},"      \u003CUiPopoverMenuItem v-for=\"item in items\" :key=\"item.id\" v-bind=\"item\" \u002F>\n",[798,2216,2218],{"class":800,"line":2217},13,[798,2219,2220],{"class":830},"    \u003C\u002FUiPopoverMenuGroup>\n",[798,2222,2224],{"class":800,"line":2223},14,[798,2225,2163],{"class":830},[798,2227,2229],{"class":800,"line":2228},15,[798,2230,2168],{"class":830},[798,2232,2234,2236,2238],{"class":800,"line":2233},16,[798,2235,2173],{"class":815},[798,2237,1844],{"class":2133},[798,2239,2153],{"class":815},[322,2241,2242,746,2245,2247,2248,754,2251,2253,2254,737,2257,750,2260,2263,2264,886],{},[421,2243,2244],{},"Sidebar regions.",[339,2246,1103],{},"'s slots render the header, body and footer\nthemselves, the way ",[339,2249,2250],{},"UiCard",[339,2252,2027],{}," do. Move each region into its slot,\nand its ",[339,2255,2256],{},"custom-class",[339,2258,2259],{},"header-class",[339,2261,2262],{},"body-class"," or ",[339,2265,2266],{},"footer-class",[789,2268,2270],{"className":2116,"code":2269,"language":2118,"meta":794,"style":794},"\u003C!-- 2.x -->\n\u003CUiSidebar>\n  \u003CUiSidebarHeader custom-class=\"px-2\">…\u003C\u002FUiSidebarHeader>\n  \u003CUiSidebarBody>…\u003C\u002FUiSidebarBody>\n  \u003CUiSidebarFooter>…\u003C\u002FUiSidebarFooter>\n\u003C\u002FUiSidebar>\n\n\u003C!-- 3.0 -->\n\u003CUiSidebar header-class=\"px-2\">\n  \u003Ctemplate #header>…\u003C\u002Ftemplate>\n  \u003Ctemplate #body>…\u003C\u002Ftemplate>\n  \u003Ctemplate #footer>…\u003C\u002Ftemplate>\n\u003C\u002FUiSidebar>\n",[339,2271,2272,2276,2284,2289,2294,2299,2307,2311,2315,2335,2340,2345,2350],{"__ignoreMap":794},[798,2273,2274],{"class":800,"line":801},[798,2275,2125],{"class":804},[798,2277,2278,2280,2282],{"class":800,"line":808},[798,2279,2130],{"class":815},[798,2281,1103],{"class":2133},[798,2283,2153],{"class":815},[798,2285,2286],{"class":800,"line":834},[798,2287,2288],{"class":830},"  \u003CUiSidebarHeader custom-class=\"px-2\">…\u003C\u002FUiSidebarHeader>\n",[798,2290,2291],{"class":800,"line":845},[798,2292,2293],{"class":830},"  \u003CUiSidebarBody>…\u003C\u002FUiSidebarBody>\n",[798,2295,2296],{"class":800,"line":863},[798,2297,2298],{"class":830},"  \u003CUiSidebarFooter>…\u003C\u002FUiSidebarFooter>\n",[798,2300,2301,2303,2305],{"class":800,"line":1490},[798,2302,2173],{"class":815},[798,2304,1103],{"class":2133},[798,2306,2153],{"class":815},[798,2308,2309],{"class":800,"line":1534},[798,2310,1187],{"emptyLinePlaceholder":1186},[798,2312,2313],{"class":800,"line":2184},[798,2314,2187],{"class":804},[798,2316,2317,2319,2321,2324,2326,2328,2331,2333],{"class":800,"line":2190},[798,2318,2130],{"class":815},[798,2320,1103],{"class":2133},[798,2322,2323],{"class":889}," header-class",[798,2325,2142],{"class":815},[798,2327,2145],{"class":815},[798,2329,2330],{"class":819},"px-2",[798,2332,2145],{"class":815},[798,2334,2153],{"class":815},[798,2336,2337],{"class":800,"line":2199},[798,2338,2339],{"class":830},"  \u003Ctemplate #header>…\u003C\u002Ftemplate>\n",[798,2341,2342],{"class":800,"line":2205},[798,2343,2344],{"class":830},"  \u003Ctemplate #body>…\u003C\u002Ftemplate>\n",[798,2346,2347],{"class":800,"line":2211},[798,2348,2349],{"class":830},"  \u003Ctemplate #footer>…\u003C\u002Ftemplate>\n",[798,2351,2352,2354,2356],{"class":800,"line":2217},[798,2353,2173],{"class":815},[798,2355,1103],{"class":2133},[798,2357,2153],{"class":815},[412,2359,382],{"id":2360},"rename-event-listeners",[322,2362,2363,2364,2367,2368,2371,2372,2375],{},"Events lost their ",[339,2365,2366],{},"on"," prefix, and tab and step selection now emit the\n",[339,2369,2370],{},"update:"," events ",[339,2373,2374],{},"v-model"," listens to:",[426,2377,2378,2388],{},[429,2379,2380],{},[432,2381,2382,2384,2386],{},[435,2383,1831],{},[435,2385,1048],{},[435,2387,1051],{},[448,2389,2390,2411,2454,2473,2489,2511],{},[432,2391,2392,2401,2406],{},[453,2393,2394,750,2396,750,2399],{},[339,2395,2047],{},[339,2397,2398],{},"UiButtonMenu",[339,2400,2060],{},[453,2402,2403],{},[339,2404,2405],{},"@on-click",[453,2407,2408],{},[339,2409,2410],{},"@click",[432,2412,2413,2444,2449],{},[453,2414,2415,750,2418,750,2421,750,2424,750,2427,750,2430,750,2433,750,2435,750,2438,750,2441],{},[339,2416,2417],{},"UiInputText",[339,2419,2420],{},"UiInputTextarea",[339,2422,2423],{},"UiInputSelect",[339,2425,2426],{},"UiInputCheck",[339,2428,2429],{},"UiInputRadio",[339,2431,2432],{},"UiInputRange",[339,2434,1957],{},[339,2436,2437],{},"UiInputOtp",[339,2439,2440],{},"UiInputPhoneNumber",[339,2442,2443],{},"UiInputColorPicker",[453,2445,2446],{},[339,2447,2448],{},"@on-update",[453,2450,2451],{},[339,2452,2453],{},"@update",[432,2455,2456,2463,2468],{},[453,2457,2458,750,2460],{},[339,2459,2027],{},[339,2461,2462],{},"UiConfirmModal",[453,2464,2465],{},[339,2466,2467],{},"@on-close-dialog",[453,2469,2470],{},[339,2471,2472],{},"@close",[432,2474,2475,2479,2484],{},[453,2476,2477],{},[339,2478,2006],{},[453,2480,2481],{},[339,2482,2483],{},"@on-option-click",[453,2485,2486],{},[339,2487,2488],{},"@option-click",[432,2490,2491,2498,2503],{},[453,2492,2493,750,2496],{},[339,2494,2495],{},"UiTabs",[339,2497,1639],{},[453,2499,2500],{},[339,2501,2502],{},"@update-active-tab",[453,2504,2505,1640,2508],{},[339,2506,2507],{},"v-model:active-tab",[339,2509,2510],{},"@update:active-tab",[432,2512,2513,2518,2523],{},[453,2514,2515],{},[339,2516,2517],{},"UiStepper",[453,2519,2520],{},[339,2521,2522],{},"@update-active-step",[453,2524,2525,1640,2528],{},[339,2526,2527],{},"v-model:active-step",[339,2529,2530],{},"@update:active-step",[322,2532,2533,2534,886],{},"A listener that only stored the new value becomes a ",[339,2535,2374],{},[789,2537,2539],{"className":2116,"code":2538,"language":2118,"meta":794,"style":794},"\u003C!-- 2.x -->\n\u003CUiTabs :tabs=\"tabs\" :active-tab=\"tab\" @update-active-tab=\"tab = $event\" \u002F>\n\n\u003C!-- 3.0 -->\n\u003CUiTabs v-model:active-tab=\"tab\" :tabs=\"tabs\" \u002F>\n",[339,2540,2541,2545,2601,2605,2609],{"__ignoreMap":794},[798,2542,2543],{"class":800,"line":801},[798,2544,2125],{"class":804},[798,2546,2547,2549,2551,2553,2556,2558,2560,2562,2564,2566,2569,2571,2573,2576,2578,2581,2584,2586,2588,2591,2593,2596,2598],{"class":800,"line":808},[798,2548,2130],{"class":815},[798,2550,2495],{"class":2133},[798,2552,2136],{"class":815},[798,2554,2555],{"class":889},"tabs",[798,2557,2142],{"class":815},[798,2559,2145],{"class":815},[798,2561,2555],{"class":830},[798,2563,2145],{"class":815},[798,2565,2136],{"class":815},[798,2567,2568],{"class":889},"active-tab",[798,2570,2142],{"class":815},[798,2572,2145],{"class":815},[798,2574,2575],{"class":830},"tab",[798,2577,2145],{"class":815},[798,2579,2580],{"class":815}," @",[798,2582,2583],{"class":889},"update-active-tab",[798,2585,2142],{"class":815},[798,2587,2145],{"class":815},[798,2589,2590],{"class":830},"tab ",[798,2592,2142],{"class":815},[798,2594,2595],{"class":830}," $event",[798,2597,2145],{"class":815},[798,2599,2600],{"class":815}," \u002F>\n",[798,2602,2603],{"class":800,"line":834},[798,2604,1187],{"emptyLinePlaceholder":1186},[798,2606,2607],{"class":800,"line":845},[798,2608,2187],{"class":804},[798,2610,2611,2613,2615,2618,2620,2622,2624,2626,2628,2630,2632,2634,2636,2638,2640,2642],{"class":800,"line":863},[798,2612,2130],{"class":815},[798,2614,2495],{"class":2133},[798,2616,2617],{"class":889}," v-model",[798,2619,886],{"class":815},[798,2621,2568],{"class":889},[798,2623,2142],{"class":815},[798,2625,2145],{"class":815},[798,2627,2575],{"class":830},[798,2629,2145],{"class":815},[798,2631,2136],{"class":815},[798,2633,2555],{"class":889},[798,2635,2142],{"class":815},[798,2637,2145],{"class":815},[798,2639,2555],{"class":830},[798,2641,2145],{"class":815},[798,2643,2600],{"class":815},[322,2645,2646,2648,2649,2652,2653,750,2656,776,2659,2662,2663,2666],{},[339,2647,2410],{}," on a button already worked through the native event and keeps\nworking; it now also receives the ",[339,2650,2651],{},"MouseEvent",", and a disabled or loading button\nnever emits it. Search your templates for ",[339,2654,2655],{},"@on-",[339,2657,2658],{},"v-on:on-",[339,2660,2661],{},"@update-active-"," and camelCase forms such as ",[339,2664,2665],{},"@onClick"," to find the rest.",[412,2668,388],{"id":2669},"use-the-ids-you-pass",[322,2671,1779,2672,2675],{},[339,2673,2674],{},"id"," prop now lands unchanged on the component's main element. In 2.x some\ncomponents rewrote it:",[426,2677,2678,2690],{},[429,2679,2680],{},[432,2681,2682,2684,2687],{},[435,2683,1831],{},[435,2685,2686],{},"2.x rendered",[435,2688,2689],{},"3.0 renders",[448,2691,2692,2708,2723,2739,2755,2772,2787,2802,2817],{},[432,2693,2694,2698,2703],{},[453,2695,2696],{},[339,2697,2047],{},[453,2699,2700],{},[339,2701,2702],{},"button-\u003Cid>",[453,2704,2705],{},[339,2706,2707],{},"\u003Cid>",[432,2709,2710,2714,2719],{},[453,2711,2712],{},[339,2713,2250],{},[453,2715,2716],{},[339,2717,2718],{},"card-\u003Cid>",[453,2720,2721],{},[339,2722,2707],{},[432,2724,2725,2730,2735],{},[453,2726,2727],{},[339,2728,2729],{},"UiAccordion",[453,2731,2732],{},[339,2733,2734],{},"accordion-\u003Cid>",[453,2736,2737],{},[339,2738,2707],{},[432,2740,2741,2746,2751],{},[453,2742,2743],{},[339,2744,2745],{},"UiLinkTooltip",[453,2747,2748],{},[339,2749,2750],{},"link-\u003Cid>",[453,2752,2753],{},[339,2754,2707],{},[432,2756,2757,2763,2768],{},[453,2758,2759,750,2761],{},[339,2760,2417],{},[339,2762,2440],{},[453,2764,2765],{},[339,2766,2767],{},"\u003Cid>-input-text",[453,2769,2770],{},[339,2771,2707],{},[432,2773,2774,2778,2783],{},[453,2775,2776],{},[339,2777,2420],{},[453,2779,2780],{},[339,2781,2782],{},"\u003Cid>-input-textarea",[453,2784,2785],{},[339,2786,2707],{},[432,2788,2789,2793,2798],{},[453,2790,2791],{},[339,2792,2423],{},[453,2794,2795],{},[339,2796,2797],{},"\u003Cid>-select",[453,2799,2800],{},[339,2801,2707],{},[432,2803,2804,2808,2813],{},[453,2805,2806],{},[339,2807,2432],{},[453,2809,2810],{},[339,2811,2812],{},"\u003Cid>-input-range",[453,2814,2815],{},[339,2816,2707],{},[432,2818,2819,2823,2832],{},[453,2820,2821],{},[339,2822,2443],{},[453,2824,2825,2828,2829,2831],{},[339,2826,2827],{},"\u003Cid>-input-color",", and ",[339,2830,2767],{}," on the text field",[453,2833,2834,2828,2836,2831],{},[339,2835,2707],{},[339,2837,2838],{},"\u003Cid>-text",[322,2840,2841,2842,2845,2846,2849,2850,2853],{},"Update the selectors, ",[339,2843,2844],{},"\u003Clabel for>"," attributes, ",[339,2847,2848],{},"#"," links, ",[339,2851,2852],{},"getElementById()","\ncalls and test queries that used the generated names:",[789,2855,2859],{"className":2856,"code":2857,"language":2858,"meta":794,"style":794},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F 2.x\ndocument.getElementById('email-input-text')?.focus()\n\n\u002F\u002F 3.0\ndocument.getElementById('email')?.focus()\n","js",[339,2860,2861,2865,2895,2899,2903],{"__ignoreMap":794},[798,2862,2863],{"class":800,"line":801},[798,2864,805],{"class":804},[798,2866,2867,2870,2872,2875,2877,2879,2882,2884,2886,2889,2892],{"class":800,"line":808},[798,2868,2869],{"class":830},"document",[798,2871,329],{"class":815},[798,2873,2874],{"class":826},"getElementById",[798,2876,1172],{"class":830},[798,2878,823],{"class":815},[798,2880,2881],{"class":819},"email-input-text",[798,2883,823],{"class":815},[798,2885,866],{"class":830},[798,2887,2888],{"class":815},"?.",[798,2890,2891],{"class":826},"focus",[798,2893,2894],{"class":830},"()\n",[798,2896,2897],{"class":800,"line":834},[798,2898,1187],{"emptyLinePlaceholder":1186},[798,2900,2901],{"class":800,"line":845},[798,2902,1487],{"class":804},[798,2904,2905,2907,2909,2911,2913,2915,2918,2920,2922,2924,2926],{"class":800,"line":863},[798,2906,2869],{"class":830},[798,2908,329],{"class":815},[798,2910,2874],{"class":826},[798,2912,1172],{"class":830},[798,2914,823],{"class":815},[798,2916,2917],{"class":819},"email",[798,2919,823],{"class":815},[798,2921,866],{"class":830},[798,2923,2888],{"class":815},[798,2925,2891],{"class":826},[798,2927,2894],{"class":830},[322,2929,2930,2931,2934,2935,2938],{},"Error messages keep their ids (",[339,2932,2933],{},"\u003Cid>-error-0","), so ",[339,2936,2937],{},"aria-describedby"," still\npoints at them.",[412,2940,2942],{"id":2941},"menu-buttons-have-no-default-tooltip","Menu buttons have no default tooltip",[322,2944,2945,2947,2948,2951,2952,2954],{},[339,2946,2398],{}," showed a \"menu\" tooltip unless you passed ",[339,2949,2950],{},"tooltip-text",". It now\nshows none, so add ",[339,2953,2950],{}," where you want one:",[789,2956,2958],{"className":2116,"code":2957,"language":2118,"meta":794,"style":794},"\u003CUiButtonMenu icon tooltip-text=\"Project actions\">…\u003C\u002FUiButtonMenu>\n",[339,2959,2960],{"__ignoreMap":794},[798,2961,2962,2964,2966,2969,2972,2974,2976,2979,2981,2984,2987,2989,2991],{"class":800,"line":801},[798,2963,2130],{"class":815},[798,2965,2398],{"class":2133},[798,2967,2968],{"class":889}," icon",[798,2970,2971],{"class":889}," tooltip-text",[798,2973,2142],{"class":815},[798,2975,2145],{"class":815},[798,2977,2978],{"class":819},"Project actions",[798,2980,2145],{"class":815},[798,2982,2983],{"class":815},">",[798,2985,2986],{"class":830},"…",[798,2988,2173],{"class":815},[798,2990,2398],{"class":2133},[798,2992,2153],{"class":815},[322,2994,2995,2996,2263,2998,3001,3002,3005,3006,2263,3008,3010],{},"An icon-only menu button without ",[339,2997,2950],{},[339,2999,3000],{},"title"," is named \"Menu\" by\nthe ",[339,3003,3004],{},"buttonMenu.ariaLabel"," label; set ",[339,3007,2950],{},[339,3009,3000],{}," to give it a\nname that says what the menu does.",[412,3012,394],{"id":3013},"replace-primevue-components",[322,3015,3016],{},"This step is optional. 3.0 has native replacements for PrimeVue's Select,\nMultiSelect and DatePicker, the components the Colorffy skin styled, and for\nAutoComplete:",[426,3018,3019,3028],{},[429,3020,3021],{},[432,3022,3023,3026],{},[435,3024,3025],{},"PrimeVue",[435,3027,116],{},[448,3029,3030,3049,3064,3087],{},[432,3031,3032,3041],{},[453,3033,3034,1061,3037,3040],{},[339,3035,3036],{},"Select",[339,3038,3039],{},"Dropdown"," before v4)",[453,3042,3043],{},[326,3044,3046],{"href":3045},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#combobox",[339,3047,3048],{},"UiInputCombobox",[432,3050,3051,3056],{},[453,3052,3053],{},[339,3054,3055],{},"MultiSelect",[453,3057,3058],{},[326,3059,3061],{"href":3060},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#multi-select",[339,3062,3063],{},"UiInputMultiSelect",[432,3065,3066,3071],{},[453,3067,3068],{},[339,3069,3070],{},"AutoComplete",[453,3072,3073,993,3078,1640,3081,3083,3084],{},[326,3074,3076],{"href":3075},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#search-on-the-server",[339,3077,3048],{},[339,3079,3080],{},"remote",[339,3082,3063],{}," for ",[339,3085,3086],{},"multiple",[432,3088,3089,3096],{},[453,3090,3091,1061,3094,3040],{},[339,3092,3093],{},"DatePicker",[339,3095,176],{},[453,3097,3098,1640,3104,3083,3109],{},[326,3099,3101],{"href":3100},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#date",[339,3102,3103],{},"UiInputDate",[326,3105,3106],{"href":177},[339,3107,3108],{},"UiCalendar",[339,3110,3111],{},"inline",[322,3113,3114,3115,750,3118,3121,3122,3126,3127,2263,3130,3133,3134,3137],{},"All of them are complete fields: they take ",[339,3116,3117],{},"label",[339,3119,3120],{},"errorMessages"," and the\n",[326,3123,3125],{"href":3124},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#shared-base-props","shared input props",", so the\n",[339,3128,3129],{},"FloatLabel",[339,3131,3132],{},"IftaLabel"," wrapper and the separate error message go away.\nTheir lists and calendars open in the top layer, above dialogs and outside\nclipping containers, so ",[339,3135,3136],{},"appendTo"," has no equivalent.",[3139,3140,3036],"h4",{"id":3141},"select",[789,3143,3145],{"className":2116,"code":3144,"language":2118,"meta":794,"style":794},"\u003C!-- PrimeVue -->\n\u003CFloatLabel>\n  \u003CSelect v-model=\"leadId\" input-id=\"lead\" :options=\"members\" option-label=\"name\" option-value=\"id\" filter show-clear \u002F>\n  \u003Clabel for=\"lead\">Project lead\u003C\u002Flabel>\n\u003C\u002FFloatLabel>\n\n\u003C!-- Colorffy UI -->\n\u003CUiInputCombobox id=\"lead\" v-model=\"leadId\" label=\"Project lead\" :options=\"members\" option-label=\"name\" option-value=\"id\" clearable \u002F>\n",[339,3146,3147,3152,3160,3165,3170,3178,3182,3187],{"__ignoreMap":794},[798,3148,3149],{"class":800,"line":801},[798,3150,3151],{"class":804},"\u003C!-- PrimeVue -->\n",[798,3153,3154,3156,3158],{"class":800,"line":808},[798,3155,2130],{"class":815},[798,3157,3129],{"class":2133},[798,3159,2153],{"class":815},[798,3161,3162],{"class":800,"line":834},[798,3163,3164],{"class":830},"  \u003CSelect v-model=\"leadId\" input-id=\"lead\" :options=\"members\" option-label=\"name\" option-value=\"id\" filter show-clear \u002F>\n",[798,3166,3167],{"class":800,"line":845},[798,3168,3169],{"class":830},"  \u003Clabel for=\"lead\">Project lead\u003C\u002Flabel>\n",[798,3171,3172,3174,3176],{"class":800,"line":863},[798,3173,2173],{"class":815},[798,3175,3129],{"class":2133},[798,3177,2153],{"class":815},[798,3179,3180],{"class":800,"line":1490},[798,3181,1187],{"emptyLinePlaceholder":1186},[798,3183,3184],{"class":800,"line":1534},[798,3185,3186],{"class":804},"\u003C!-- Colorffy UI -->\n",[798,3188,3189,3191,3193,3196,3198,3200,3203,3205,3207,3209,3211,3214,3216,3219,3221,3223,3226,3228,3230,3233,3235,3237,3240,3242,3245,3247,3249,3252,3254,3257,3259,3261,3263,3265,3268],{"class":800,"line":2184},[798,3190,2130],{"class":815},[798,3192,3048],{"class":2133},[798,3194,3195],{"class":889}," id",[798,3197,2142],{"class":815},[798,3199,2145],{"class":815},[798,3201,3202],{"class":819},"lead",[798,3204,2145],{"class":815},[798,3206,2617],{"class":889},[798,3208,2142],{"class":815},[798,3210,2145],{"class":815},[798,3212,3213],{"class":830},"leadId",[798,3215,2145],{"class":815},[798,3217,3218],{"class":889}," label",[798,3220,2142],{"class":815},[798,3222,2145],{"class":815},[798,3224,3225],{"class":819},"Project lead",[798,3227,2145],{"class":815},[798,3229,2136],{"class":815},[798,3231,3232],{"class":889},"options",[798,3234,2142],{"class":815},[798,3236,2145],{"class":815},[798,3238,3239],{"class":830},"members",[798,3241,2145],{"class":815},[798,3243,3244],{"class":889}," option-label",[798,3246,2142],{"class":815},[798,3248,2145],{"class":815},[798,3250,3251],{"class":819},"name",[798,3253,2145],{"class":815},[798,3255,3256],{"class":889}," option-value",[798,3258,2142],{"class":815},[798,3260,2145],{"class":815},[798,3262,2674],{"class":819},[798,3264,2145],{"class":815},[798,3266,3267],{"class":889}," clearable",[798,3269,2600],{"class":815},[426,3271,3272,3282],{},[429,3273,3274],{},[432,3275,3276,3278],{},[435,3277,3036],{},[435,3279,3280],{},[339,3281,3048],{},[448,3283,3284,3302,3319,3333,3345,3364,3375,3391,3403,3417,3429,3440],{},[432,3285,3286,3299],{},[453,3287,3288,750,3290,750,3293,750,3296],{},[339,3289,3232],{},[339,3291,3292],{},"optionLabel",[339,3294,3295],{},"optionValue",[339,3297,3298],{},"optionDisabled",[453,3300,3301],{},"The same props",[432,3303,3304,3313],{},[453,3305,3306,754,3309,3312],{},[339,3307,3308],{},"optionGroupLabel",[339,3310,3311],{},"optionGroupChildren"," (nested options)",[453,3314,3315,3318],{},[339,3316,3317],{},"optionGroup",", a field on flat options",[432,3320,3321,3326],{},[453,3322,3323],{},[339,3324,3325],{},"filter",[453,3327,3328,3329,3332],{},"Filtering is on by default; ",[339,3330,3331],{},":filterable=\"false\""," for a plain select",[432,3334,3335,3340],{},[453,3336,3337],{},[339,3338,3339],{},"showClear",[453,3341,3342],{},[339,3343,3344],{},"clearable",[432,3346,3347,3355],{},[453,3348,3349,750,3352],{},[339,3350,3351],{},"emptyMessage",[339,3353,3354],{},"emptyFilterMessage",[453,3356,3357,3360,3361,1884],{},[339,3358,3359],{},"emptyText",", or the ",[339,3362,3363],{},"#empty",[432,3365,3366,3371],{},[453,3367,3368],{},[339,3369,3370],{},"invalid",[453,3372,3373],{},[339,3374,3120],{},[432,3376,3377,3385],{},[453,3378,3379,750,3382],{},[339,3380,3381],{},"variant=\"filled\"",[339,3383,3384],{},"size",[453,3386,3387,750,3389],{},[339,3388,3381],{},[339,3390,3384],{},[432,3392,3393,3398],{},[453,3394,3395,1884],{},[339,3396,3397],{},"#option",[453,3399,3400],{},[339,3401,3402],{},"#option=\"{ option, selected, active }\"",[432,3404,3405,3410],{},[453,3406,3407],{},[339,3408,3409],{},"@change",[453,3411,3412,3414,3415],{},[339,3413,2453],{},", or watch the ",[339,3416,2374],{},[432,3418,3419,3424],{},[453,3420,3421],{},[339,3422,3423],{},"editable",[453,3425,3426],{},[339,3427,3428],{},"freeText",[432,3430,3431,3436],{},[453,3432,3433],{},[339,3434,3435],{},"loading",[453,3437,3438],{},[339,3439,3435],{},[432,3441,3442,3448],{},[453,3443,3444,3447],{},[339,3445,3446],{},"#value"," slot, virtual scrolling",[453,3449,3450],{},"Not available yet",[3139,3452,3055],{"id":3453},"multiselect",[322,3455,3456],{},"The option props are the same as on Select. The rest maps like this:",[426,3458,3459,3469],{},[429,3460,3461],{},[432,3462,3463,3465],{},[435,3464,3055],{},[435,3466,3467],{},[339,3468,3063],{},[448,3470,3471,3481,3493,3511,3523,3540],{},[432,3472,3473,3478],{},[453,3474,3475],{},[339,3476,3477],{},"display=\"chip\"",[453,3479,3480],{},"The default: a removable chip per value",[432,3482,3483,3488],{},[453,3484,3485],{},[339,3486,3487],{},"maxSelectedLabels",[453,3489,3490],{},[339,3491,3492],{},"maxChips",[432,3494,3495,3503],{},[453,3496,3497,1061,3500,866],{},[339,3498,3499],{},"selectedItemsLabel",[339,3501,3502],{},"'{0} items selected'",[453,3504,3505,1061,3508,866],{},[339,3506,3507],{},"maxChipsLabel",[339,3509,3510],{},"'{count} selected'",[432,3512,3513,3518],{},[453,3514,3515],{},[339,3516,3517],{},"selectionLimit",[453,3519,3520],{},[339,3521,3522],{},"max",[432,3524,3525,3529],{},[453,3526,3527],{},[339,3528,3409],{},[453,3530,3531,754,3534,3537,3538],{},[339,3532,3533],{},"@add",[339,3535,3536],{},"@remove"," with the value, or ",[339,3539,2453],{},[432,3541,3542,3547],{},[453,3543,3544],{},[339,3545,3546],{},"showToggleAll",[453,3548,3549],{},"Not available",[3139,3551,3070],{"id":3552},"autocomplete",[322,3554,3555,3556,3559,3560,3563,3564,993,3567,3569,3570,329],{},"PrimeVue asks for suggestions with ",[339,3557,3558],{},"@complete"," and shows ",[339,3561,3562],{},"suggestions","; the\nColorffy fields emit ",[339,3565,3566],{},"search",[339,3568,3080],{}," and show ",[339,3571,3232],{},[426,3573,3574,3586],{},[429,3575,3576],{},[432,3577,3578,3580],{},[435,3579,3070],{},[435,3581,3582,993,3584],{},[339,3583,3048],{},[339,3585,3080],{},[448,3587,3588,3598,3613,3631,3640,3652,3665,3675,3686],{},[432,3589,3590,3594],{},[453,3591,3592],{},[339,3593,3562],{},[453,3595,3596],{},[339,3597,3232],{},[432,3599,3600,3607],{},[453,3601,3602,1061,3604,866],{},[339,3603,3558],{},[339,3605,3606],{},"event.query",[453,3608,3609,3612],{},[339,3610,3611],{},"@search"," (the text)",[432,3614,3615,3623],{},[453,3616,3617,750,3620],{},[339,3618,3619],{},"delay",[339,3621,3622],{},"minLength",[453,3624,3625,750,3628],{},[339,3626,3627],{},"searchDelay",[339,3629,3630],{},"minSearchLength",[432,3632,3633,3636],{},[453,3634,3635],{},"Typed text kept as the value",[453,3637,3638],{},[339,3639,3428],{},[432,3641,3642,3647],{},[453,3643,3644],{},[339,3645,3646],{},"forceSelection",[453,3648,3649,3650],{},"The default without ",[339,3651,3428],{},[432,3653,3654,3661],{},[453,3655,3656,750,3658],{},[339,3657,3435],{},[339,3659,3660],{},"loader",[453,3662,3663],{},[339,3664,3435],{},[432,3666,3667,3672],{},[453,3668,3669],{},[339,3670,3671],{},"dropdown",[453,3673,3674],{},"The toggle button is always there",[432,3676,3677,3683],{},[453,3678,3679,750,3681],{},[339,3680,3292],{},[339,3682,3397],{},[453,3684,3685],{},"The same",[432,3687,3688,3692],{},[453,3689,3690],{},[339,3691,3086],{},[453,3693,3694,993,3696,3698,3699,3701],{},[339,3695,3063],{},[339,3697,3080],{},", plus ",[339,3700,3428],{}," for typed values",[3139,3703,3093],{"id":3704},"datepicker",[322,3706,3707,3708,3711,3712,3715],{},"The model is the change to watch: PrimeVue holds a range as ",[339,3709,3710],{},"[start, end]",",\nColorffy as ",[339,3713,3714],{},"{ start, end }",", and only writes it once both ends are picked.",[789,3717,3719],{"className":2116,"code":3718,"language":2118,"meta":794,"style":794},"\u003C!-- PrimeVue -->\n\u003CDatePicker v-model=\"period\" selection-mode=\"range\" :number-of-months=\"2\" show-time :min-date=\"minDate\" show-icon \u002F>\n\n\u003C!-- Colorffy UI -->\n\u003CUiInputDate id=\"period\" v-model=\"period\" label=\"Period\" mode=\"range\" time :min=\"minDate\" \u002F>\n",[339,3720,3721,3725,3791,3795,3799],{"__ignoreMap":794},[798,3722,3723],{"class":800,"line":801},[798,3724,3151],{"class":804},[798,3726,3727,3729,3731,3733,3735,3737,3740,3742,3745,3747,3749,3752,3754,3756,3759,3761,3763,3767,3769,3772,3774,3777,3779,3781,3784,3786,3789],{"class":800,"line":808},[798,3728,2130],{"class":815},[798,3730,3093],{"class":2133},[798,3732,2617],{"class":889},[798,3734,2142],{"class":815},[798,3736,2145],{"class":815},[798,3738,3739],{"class":830},"period",[798,3741,2145],{"class":815},[798,3743,3744],{"class":889}," selection-mode",[798,3746,2142],{"class":815},[798,3748,2145],{"class":815},[798,3750,3751],{"class":819},"range",[798,3753,2145],{"class":815},[798,3755,2136],{"class":815},[798,3757,3758],{"class":889},"number-of-months",[798,3760,2142],{"class":815},[798,3762,2145],{"class":815},[798,3764,3766],{"class":3765},"sbssI","2",[798,3768,2145],{"class":815},[798,3770,3771],{"class":889}," show-time",[798,3773,2136],{"class":815},[798,3775,3776],{"class":889},"min-date",[798,3778,2142],{"class":815},[798,3780,2145],{"class":815},[798,3782,3783],{"class":830},"minDate",[798,3785,2145],{"class":815},[798,3787,3788],{"class":889}," show-icon",[798,3790,2600],{"class":815},[798,3792,3793],{"class":800,"line":834},[798,3794,1187],{"emptyLinePlaceholder":1186},[798,3796,3797],{"class":800,"line":845},[798,3798,3186],{"class":804},[798,3800,3801,3803,3805,3807,3809,3811,3813,3815,3817,3819,3821,3823,3825,3827,3829,3831,3834,3836,3839,3841,3843,3845,3847,3850,3852,3855,3857,3859,3861,3863],{"class":800,"line":863},[798,3802,2130],{"class":815},[798,3804,3103],{"class":2133},[798,3806,3195],{"class":889},[798,3808,2142],{"class":815},[798,3810,2145],{"class":815},[798,3812,3739],{"class":819},[798,3814,2145],{"class":815},[798,3816,2617],{"class":889},[798,3818,2142],{"class":815},[798,3820,2145],{"class":815},[798,3822,3739],{"class":830},[798,3824,2145],{"class":815},[798,3826,3218],{"class":889},[798,3828,2142],{"class":815},[798,3830,2145],{"class":815},[798,3832,3833],{"class":819},"Period",[798,3835,2145],{"class":815},[798,3837,3838],{"class":889}," mode",[798,3840,2142],{"class":815},[798,3842,2145],{"class":815},[798,3844,3751],{"class":819},[798,3846,2145],{"class":815},[798,3848,3849],{"class":889}," time",[798,3851,2136],{"class":815},[798,3853,3854],{"class":889},"min",[798,3856,2142],{"class":815},[798,3858,2145],{"class":815},[798,3860,3783],{"class":830},[798,3862,2145],{"class":815},[798,3864,2600],{"class":815},[322,3866,3867,3868,3870],{},"When an API sends or expects ",[339,3869,3710],{},", convert where you read it:",[789,3872,3876],{"className":3873,"code":3874,"language":3875,"meta":794,"style":794},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import type { IDateRange } from '@colorffy\u002Fui'\n\nconst range = computed\u003CIDateRange | null>({\n  get: () => (period.value ? { start: period.value[0] ?? null, end: period.value[1] ?? null } : null),\n  set: (value) => { period.value = value ? [value.start, value.end] : null },\n})\n","ts",[339,3877,3878,3904,3908,3939,4020,4082],{"__ignoreMap":794},[798,3879,3880,3883,3886,3888,3891,3894,3897,3899,3901],{"class":800,"line":801},[798,3881,3882],{"class":811},"import",[798,3884,3885],{"class":811}," type",[798,3887,1161],{"class":815},[798,3889,3890],{"class":830}," IDateRange",[798,3892,3893],{"class":815}," }",[798,3895,3896],{"class":811}," from",[798,3898,816],{"class":815},[798,3900,405],{"class":819},[798,3902,3903],{"class":815},"'\n",[798,3905,3906],{"class":800,"line":808},[798,3907,1187],{"emptyLinePlaceholder":1186},[798,3909,3910,3913,3916,3918,3921,3923,3926,3929,3932,3934,3936],{"class":800,"line":834},[798,3911,3912],{"class":889},"const",[798,3914,3915],{"class":830}," range ",[798,3917,2142],{"class":815},[798,3919,3920],{"class":826}," computed",[798,3922,2130],{"class":815},[798,3924,3925],{"class":1157},"IDateRange",[798,3927,3928],{"class":815}," |",[798,3930,3931],{"class":1157}," null",[798,3933,2983],{"class":815},[798,3935,1172],{"class":830},[798,3937,3938],{"class":815},"{\n",[798,3940,3941,3944,3946,3949,3952,3955,3957,3960,3963,3965,3968,3970,3973,3975,3978,3981,3984,3987,3990,3993,3995,3997,3999,4001,4004,4006,4008,4010,4012,4014,4016,4018],{"class":800,"line":845},[798,3942,3943],{"class":826},"  get",[798,3945,886],{"class":815},[798,3947,3948],{"class":815}," ()",[798,3950,3951],{"class":889}," =>",[798,3953,3954],{"class":830}," (period",[798,3956,329],{"class":815},[798,3958,3959],{"class":830},"value ",[798,3961,3962],{"class":815},"?",[798,3964,1161],{"class":815},[798,3966,3967],{"class":2133}," start",[798,3969,886],{"class":815},[798,3971,3972],{"class":830}," period",[798,3974,329],{"class":815},[798,3976,3977],{"class":830},"value[",[798,3979,3980],{"class":3765},"0",[798,3982,3983],{"class":830},"] ",[798,3985,3986],{"class":815},"??",[798,3988,3989],{"class":815}," null,",[798,3991,3992],{"class":2133}," end",[798,3994,886],{"class":815},[798,3996,3972],{"class":830},[798,3998,329],{"class":815},[798,4000,3977],{"class":830},[798,4002,4003],{"class":3765},"1",[798,4005,3983],{"class":830},[798,4007,3986],{"class":815},[798,4009,3931],{"class":815},[798,4011,3893],{"class":815},[798,4013,2136],{"class":815},[798,4015,3931],{"class":815},[798,4017,866],{"class":830},[798,4019,776],{"class":815},[798,4021,4022,4025,4027,4029,4033,4035,4037,4039,4041,4043,4045,4048,4051,4054,4057,4059,4061,4064,4066,4068,4070,4073,4075,4077,4079],{"class":800,"line":863},[798,4023,4024],{"class":826},"  set",[798,4026,886],{"class":815},[798,4028,1061],{"class":815},[798,4030,4032],{"class":4031},"sHdIc","value",[798,4034,866],{"class":815},[798,4036,3951],{"class":889},[798,4038,1161],{"class":815},[798,4040,3972],{"class":830},[798,4042,329],{"class":815},[798,4044,4032],{"class":830},[798,4046,4047],{"class":815}," =",[798,4049,4050],{"class":830}," value",[798,4052,4053],{"class":815}," ?",[798,4055,4056],{"class":2133}," [",[798,4058,4032],{"class":830},[798,4060,329],{"class":815},[798,4062,4063],{"class":830},"start",[798,4065,923],{"class":815},[798,4067,4050],{"class":830},[798,4069,329],{"class":815},[798,4071,4072],{"class":830},"end",[798,4074,3983],{"class":2133},[798,4076,886],{"class":815},[798,4078,3931],{"class":815},[798,4080,4081],{"class":815}," },\n",[798,4083,4084,4087],{"class":800,"line":1490},[798,4085,4086],{"class":815},"}",[798,4088,4089],{"class":830},")\n",[426,4091,4092,4102],{},[429,4093,4094],{},[432,4095,4096,4098],{},[435,4097,3093],{},[435,4099,4100],{},[339,4101,3103],{},[448,4103,4104,4121,4138,4148,4161,4176,4192,4208,4226,4250,4263,4285,4302,4320,4330,4346,4361],{},[432,4105,4106,4114],{},[453,4107,4108,750,4111],{},[339,4109,4110],{},"selectionMode=\"single\"",[339,4112,4113],{},"\"range\"",[453,4115,4116,750,4119],{},[339,4117,4118],{},"mode=\"single\"",[339,4120,4113],{},[432,4122,4123,4128],{},[453,4124,4125],{},[339,4126,4127],{},"selectionMode=\"multiple\"",[453,4129,4130,4133,4134,4137],{},[339,4131,4132],{},"mode=\"multiple\"",", with a ",[339,4135,4136],{},"Date[]"," model",[432,4139,4140,4144],{},[453,4141,4142],{},[339,4143,3111],{},[453,4145,4146],{},[339,4147,3108],{},[432,4149,4150,4155],{},[453,4151,4152],{},[339,4153,4154],{},"numberOfMonths",[453,4156,4157,4160],{},[339,4158,4159],{},"months"," (1 for a date, 2 for a range by default)",[432,4162,4163,4170],{},[453,4164,4165,750,4167],{},[339,4166,3783],{},[339,4168,4169],{},"maxDate",[453,4171,4172,750,4174],{},[339,4173,3854],{},[339,4175,3522],{},[432,4177,4178,4184],{},[453,4179,4180,4183],{},[339,4181,4182],{},"disabledDates"," (an array)",[453,4185,4186,4188,4189],{},[339,4187,4182],{},", a function: ",[339,4190,4191],{},"date => booked.some(day => day.toDateString() === date.toDateString())",[432,4193,4194,4200],{},[453,4195,4196,4199],{},[339,4197,4198],{},"disabledDays"," (weekday numbers)",[453,4201,4202,4204,4205],{},[339,4203,4182],{},": ",[339,4206,4207],{},"date => [0, 6].includes(date.getDay())",[432,4209,4210,4216],{},[453,4211,4212,4215],{},[339,4213,4214],{},"firstDayOfWeek"," (locale config)",[453,4217,4218,4221,4222,4225],{},[339,4219,4220],{},"weekStart",", which defaults to the ",[339,4223,4224],{},"locale","'s",[432,4227,4228,4239],{},[453,4229,4230,750,4233,750,4236],{},[339,4231,4232],{},"showTime",[339,4234,4235],{},"showSeconds",[339,4237,4238],{},"stepMinute",[453,4240,4241,750,4244,750,4247],{},[339,4242,4243],{},"time",[339,4245,4246],{},"time=\"seconds\"",[339,4248,4249],{},"minuteStep",[432,4251,4252,4257],{},[453,4253,4254],{},[339,4255,4256],{},"hourFormat",[453,4258,4259,4260],{},"The browser's clock: the time fields are native ",[339,4261,4262],{},"\u003Cinput type=\"time\">",[432,4264,4265,4273],{},[453,4266,4267,1061,4270,866],{},[339,4268,4269],{},"dateFormat",[339,4271,4272],{},"'mm\u002Fdd\u002Fyy'",[453,4274,4275,1061,4278,4281,4282,4284],{},[339,4276,4277],{},"format",[339,4279,4280],{},"Intl.DateTimeFormat"," options); typed dates follow the ",[339,4283,4224],{},"'s order",[432,4286,4287,4295],{},[453,4288,4289,750,4292],{},[339,4290,4291],{},"showIcon",[339,4293,4294],{},"manualInput",[453,4296,4297,4298,4301],{},"Always on: a calendar button and typed dates. ",[339,4299,4300],{},"trigger=\"button\""," gives a button without typing",[432,4303,4304,4310],{},[453,4305,4306,4309],{},[339,4307,4308],{},"showButtonBar"," (Today and Clear)",[453,4311,4312,993,4315,2828,4318],{},[339,4313,4314],{},"presets",[339,4316,4317],{},"datePresets.today()",[339,4319,3344],{},[432,4321,4322,4327],{},[453,4323,4324],{},[339,4325,4326],{},"touchUI",[453,4328,4329],{},"Automatic: a bottom sheet below 600px",[432,4331,4332,4337],{},[453,4333,4334],{},[339,4335,4336],{},"showOtherMonths",[453,4338,4339,4342,4343,4345],{},[339,4340,4341],{},"showOutsideDays"," on ",[339,4344,3108],{}," (shown, not pickable)",[432,4347,4348,4353],{},[453,4349,4350],{},[339,4351,4352],{},"@date-select",[453,4354,4355,1640,4357,4342,4359],{},[339,4356,2453],{},[339,4358,3141],{},[339,4360,3108],{},[432,4362,4363,4374],{},[453,4364,4365,750,4368,750,4371],{},[339,4366,4367],{},"view=\"month\"",[339,4369,4370],{},"view=\"year\"",[339,4372,4373],{},"timeOnly",[453,4375,3549],{},[3139,4377,4379],{"id":4378},"remove-primevue","Remove PrimeVue",[322,4381,4382,4383,1640,4386,1864,4389,4392,4393,4396,4397,1350,4400,329],{},"Once no PrimeVue components are left, delete the PrimeVue plugin\n(",[339,4384,4385],{},"app.use(PrimeVue)",[339,4387,4388],{},"@primevue\u002Fnuxt-module",[339,4390,4391],{},"nuxt.config","), its theme\nsetup and any copied ",[339,4394,4395],{},"_prime.scss",", then uninstall ",[339,4398,4399],{},"primevue",[339,4401,4402],{},"@primevue\u002Fthemes",[331,4404,4406],{"id":4405},"_20-25","2.0 → 2.5",[322,4408,4409],{},"2.5 moved every spacing and font-size value onto design tokens. Nothing broke:\nthe old names kept working as deprecated aliases until 3.0.",[412,4411,4413],{"id":4412},"new-spacing-tokens","New spacing tokens",[322,4415,4416],{},"Spacing now uses a value-encoded numeric scale — the number is the pixel value\nat the default 16px root — derived from a single unit:",[789,4418,4420],{"className":872,"code":4419,"language":874,"meta":794,"style":794},"--space-unit: .25rem;\n--space-4   \u002F* 4px  *\u002F    --space-16  \u002F* 16px *\u002F\n--space-6   \u002F* 6px  *\u002F    --space-20  \u002F* 20px *\u002F\n--space-8   \u002F* 8px  *\u002F    --space-24  \u002F* 24px *\u002F\n--space-12  \u002F* 12px *\u002F    --space-32  \u002F* 32px *\u002F\n--space-14  \u002F* 14px *\u002F    --space-48  \u002F* 48px *\u002F\n",[339,4421,4422,4432,4446,4460,4474,4488],{"__ignoreMap":794},[798,4423,4424,4427,4429],{"class":800,"line":801},[798,4425,4426],{"class":830},"--space-unit: ",[798,4428,329],{"class":815},[798,4430,4431],{"class":830},"25rem;\n",[798,4433,4434,4437,4440,4443],{"class":800,"line":808},[798,4435,4436],{"class":830},"--space-4   ",[798,4438,4439],{"class":804},"\u002F* 4px  *\u002F",[798,4441,4442],{"class":830},"    --space-16  ",[798,4444,4445],{"class":804},"\u002F* 16px *\u002F\n",[798,4447,4448,4451,4454,4457],{"class":800,"line":834},[798,4449,4450],{"class":830},"--space-6   ",[798,4452,4453],{"class":804},"\u002F* 6px  *\u002F",[798,4455,4456],{"class":830},"    --space-20  ",[798,4458,4459],{"class":804},"\u002F* 20px *\u002F\n",[798,4461,4462,4465,4468,4471],{"class":800,"line":845},[798,4463,4464],{"class":830},"--space-8   ",[798,4466,4467],{"class":804},"\u002F* 8px  *\u002F",[798,4469,4470],{"class":830},"    --space-24  ",[798,4472,4473],{"class":804},"\u002F* 24px *\u002F\n",[798,4475,4476,4479,4482,4485],{"class":800,"line":863},[798,4477,4478],{"class":830},"--space-12  ",[798,4480,4481],{"class":804},"\u002F* 12px *\u002F",[798,4483,4484],{"class":830},"    --space-32  ",[798,4486,4487],{"class":804},"\u002F* 32px *\u002F\n",[798,4489,4490,4493,4496,4499],{"class":800,"line":1490},[798,4491,4492],{"class":830},"--space-14  ",[798,4494,4495],{"class":804},"\u002F* 14px *\u002F",[798,4497,4498],{"class":830},"    --space-48  ",[798,4500,4501],{"class":804},"\u002F* 48px *\u002F\n",[322,4503,4504],{},"All components consume these tokens, so you can retheme spacing at runtime:",[789,4506,4508],{"className":872,"code":4507,"language":874,"meta":794,"style":794},"\u002F* denser UI everywhere, proportionally *\u002F\n:root { --space-unit: .2rem; }\n\n\u002F* or adjust one step *\u002F\n:root { --space-12: .7rem; }\n",[339,4509,4510,4515,4536,4540,4545],{"__ignoreMap":794},[798,4511,4512],{"class":800,"line":801},[798,4513,4514],{"class":804},"\u002F* denser UI everywhere, proportionally *\u002F\n",[798,4516,4517,4519,4521,4523,4526,4528,4531,4534],{"class":800,"line":808},[798,4518,886],{"class":815},[798,4520,890],{"class":889},[798,4522,1161],{"class":815},[798,4524,4525],{"class":830}," --space-unit",[798,4527,886],{"class":815},[798,4529,4530],{"class":3765}," .2rem",[798,4532,4533],{"class":815},";",[798,4535,1181],{"class":815},[798,4537,4538],{"class":800,"line":834},[798,4539,1187],{"emptyLinePlaceholder":1186},[798,4541,4542],{"class":800,"line":845},[798,4543,4544],{"class":804},"\u002F* or adjust one step *\u002F\n",[798,4546,4547,4549,4551,4553,4556,4558,4561,4563],{"class":800,"line":863},[798,4548,886],{"class":815},[798,4550,890],{"class":889},[798,4552,1161],{"class":815},[798,4554,4555],{"class":830}," --space-12",[798,4557,886],{"class":815},[798,4559,4560],{"class":3765}," .7rem",[798,4562,4533],{"class":815},[798,4564,1181],{"class":815},[4566,4567,1779,4568,458,4571,458,4574,746,4577,4580,4581,4583,4584,4587],"note",{},[339,4569,4570],{},"m-*",[339,4572,4573],{},"p-*",[339,4575,4576],{},"gap-*",[421,4578,4579],{},"utility classes"," keep their own historical scale\n(",[339,4582,4003],{}," = 0.25rem … ",[339,4585,4586],{},"10"," = 12rem) in 2.5 and are unaffected by these tokens.",[412,4589,4591],{"id":4590},"font-sizes-renamed-to-a-t-shirt-scale","Font sizes renamed to a t-shirt scale",[322,4593,4594,4595,4597,4598,4602,4603,4606,4607,4610,4611,4614],{},"The old ordinal names (",[339,4596,688],{},", where a ",[4599,4600,4601],"em",{},"smaller"," number meant a ",[4599,4604,4605],{},"bigger","\nsize) are replaced by a t-shirt scale anchored at ",[339,4608,4609],{},"--fs-base",". Values are\nunchanged — same fluid ",[339,4612,4613],{},"clamp()","s, new names:",[426,4616,4617,4629],{},[429,4618,4619],{},[432,4620,4621,4624,4627],{},[435,4622,4623],{},"Deprecated (2.x alias)",[435,4625,4626],{},"New token",[435,4628,446],{},[448,4630,4631,4643,4656,4669,4682,4695,4707,4720,4733,4746,4759,4772],{},[432,4632,4633,4637,4641],{},[453,4634,4635],{},[339,4636,457],{},[453,4638,4639],{},[339,4640,733],{},[453,4642,474],{},[432,4644,4645,4649,4654],{},[453,4646,4647],{},[339,4648,481],{},[453,4650,4651],{},[339,4652,4653],{},"--fs-3xs",[453,4655,497],{},[432,4657,4658,4662,4667],{},[453,4659,4660],{},[339,4661,504],{},[453,4663,4664],{},[339,4665,4666],{},"--fs-2xs",[453,4668,520],{},[432,4670,4671,4675,4680],{},[453,4672,4673],{},[339,4674,527],{},[453,4676,4677],{},[339,4678,4679],{},"--fs-xs",[453,4681,543],{},[432,4683,4684,4688,4693],{},[453,4685,4686],{},[339,4687,550],{},[453,4689,4690],{},[339,4691,4692],{},"--fs-sm",[453,4694,566],{},[432,4696,4697,4701,4705],{},[453,4698,4699],{},[339,4700,573],{},[453,4702,4703],{},[339,4704,4609],{},[453,4706,589],{},[432,4708,4709,4713,4718],{},[453,4710,4711],{},[339,4712,596],{},[453,4714,4715],{},[339,4716,4717],{},"--fs-lg",[453,4719,612],{},[432,4721,4722,4726,4731],{},[453,4723,4724],{},[339,4725,619],{},[453,4727,4728],{},[339,4729,4730],{},"--fs-xl",[453,4732,635],{},[432,4734,4735,4739,4744],{},[453,4736,4737],{},[339,4738,642],{},[453,4740,4741],{},[339,4742,4743],{},"--fs-2xl",[453,4745,658],{},[432,4747,4748,4752,4757],{},[453,4749,4750],{},[339,4751,665],{},[453,4753,4754],{},[339,4755,4756],{},"--fs-3xl",[453,4758,681],{},[432,4760,4761,4765,4770],{},[453,4762,4763],{},[339,4764,688],{},[453,4766,4767],{},[339,4768,4769],{},"--fs-4xl",[453,4771,704],{},[432,4773,4774,4778,4783],{},[453,4775,4776],{},[339,4777,711],{},[453,4779,4780],{},[339,4781,4782],{},"--fs-5xl",[453,4784,727],{},[322,4786,4787,4788,4791],{},"Every size also gained a ",[421,4789,4790],{},"line-height companion"," using the double-dash\nsuffix convention:",[789,4793,4795],{"className":872,"code":4794,"language":874,"meta":794,"style":794},".intro {\n  font-size: var(--fs-lg);\n  line-height: var(--fs-lg--line-height); \u002F* 1.4 *\u002F\n}\n",[339,4796,4797,4806,4821,4840],{"__ignoreMap":794},[798,4798,4799,4801,4804],{"class":800,"line":801},[798,4800,329],{"class":815},[798,4802,4803],{"class":1157},"intro",[798,4805,893],{"class":815},[798,4807,4808,4811,4813,4815,4817,4819],{"class":800,"line":808},[798,4809,4810],{"class":1266},"  font-size",[798,4812,886],{"class":815},[798,4814,1169],{"class":826},[798,4816,1172],{"class":815},[798,4818,4717],{"class":830},[798,4820,1442],{"class":815},[798,4822,4823,4826,4828,4830,4832,4835,4837],{"class":800,"line":834},[798,4824,4825],{"class":1266},"  line-height",[798,4827,886],{"class":815},[798,4829,1169],{"class":826},[798,4831,1172],{"class":815},[798,4833,4834],{"class":830},"--fs-lg--line-height",[798,4836,1178],{"class":815},[798,4838,4839],{"class":804}," \u002F* 1.4 *\u002F\n",[798,4841,4842],{"class":800,"line":845},[798,4843,933],{"class":815},[412,4845,4847],{"id":4846},"new-font-size-utility-classes","New font-size utility classes",[322,4849,4850,4851,772,4853,4855,4856,4859,4860,2986,4862,750,4864,2986,4866,776,4868,4870],{},"The new ",[339,4852,471],{},[339,4854,724],{}," classes set the size ",[421,4857,4858],{},"and"," its paired\nline-height. The legacy classes (",[339,4861,691],{},[339,4863,576],{},[339,4865,553],{},[339,4867,461],{},[339,4869,714],{},") still work and still set font-size only, so existing markup\nrenders identically.",[789,4872,4876],{"className":4873,"code":4874,"language":4875,"meta":794,"style":794},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- 2.0 (still works, deprecated) -->\n\u003Cp class=\"fs-500\">Title\u003C\u002Fp>\n\n\u003C!-- 2.5 -->\n\u003Cp class=\"fs-lg\">Title\u003C\u002Fp>\n","html",[339,4877,4878,4883,4912,4916,4921],{"__ignoreMap":794},[798,4879,4880],{"class":800,"line":801},[798,4881,4882],{"class":804},"\u003C!-- 2.0 (still works, deprecated) -->\n",[798,4884,4885,4887,4889,4892,4894,4896,4899,4901,4903,4906,4908,4910],{"class":800,"line":808},[798,4886,2130],{"class":815},[798,4888,322],{"class":2133},[798,4890,4891],{"class":889}," class",[798,4893,2142],{"class":815},[798,4895,2145],{"class":815},[798,4897,4898],{"class":819},"fs-500",[798,4900,2145],{"class":815},[798,4902,2983],{"class":815},[798,4904,4905],{"class":830},"Title",[798,4907,2173],{"class":815},[798,4909,322],{"class":2133},[798,4911,2153],{"class":815},[798,4913,4914],{"class":800,"line":834},[798,4915,1187],{"emptyLinePlaceholder":1186},[798,4917,4918],{"class":800,"line":845},[798,4919,4920],{"class":804},"\u003C!-- 2.5 -->\n",[798,4922,4923,4925,4927,4929,4931,4933,4936,4938,4940,4942,4944,4946],{"class":800,"line":863},[798,4924,2130],{"class":815},[798,4926,322],{"class":2133},[798,4928,4891],{"class":889},[798,4930,2142],{"class":815},[798,4932,2145],{"class":815},[798,4934,4935],{"class":819},"fs-lg",[798,4937,2145],{"class":815},[798,4939,2983],{"class":815},[798,4941,4905],{"class":830},[798,4943,2173],{"class":815},[798,4945,322],{"class":2133},[798,4947,2153],{"class":815},[412,4949,4951],{"id":4950},"deprecated-in-25-removed-in-30","Deprecated in 2.5 (removed in 3.0)",[1744,4953,4954,4957,4964],{},[347,4955,4956],{},"The 12 old font-size token names (aliases of the new tokens).",[347,4958,4959,4960,4963],{},"The 13 legacy ",[339,4961,4962],{},".fs-*"," utility classes.",[347,4965,1779,4966,458,4968,458,4970,4972,4973,329],{},[339,4967,749],{},[339,4969,753],{},[339,4971,757],{}," SCSS variables — use\n",[339,4974,4975],{},"var(--space-16\u002F32\u002F48)",[331,4977,4979],{"id":4978},"new-in-25-breaking-for-hand-written-markup","New in 2.5 (breaking for hand-written markup)",[412,4981,4983],{"id":4982},"tabs-need-an-indicator-element","Tabs need an indicator element",[322,4985,4986,4989,4990,4993],{},[339,4987,4988],{},".tabs-navigation"," no longer draws the active state as a border on the active\nlink. The active link publishes an ",[339,4991,4992],{},"anchor-name"," and a dedicated element is\npositioned over it with CSS anchor positioning, so the list needs one extra\nchild as its last item:",[789,4995,4997],{"className":4873,"code":4996,"language":4875,"meta":794,"style":794},"\u003Cul class=\"tabs-navigation\">\n  \u003Cli class=\"tab-item\">\n    \u003Cbutton class=\"tab-link active\">Overview\u003C\u002Fbutton>\n  \u003C\u002Fli>\n  \u003Cli class=\"tab-item\">\n    \u003Cbutton class=\"tab-link\">Pricing\u003C\u002Fbutton>\n  \u003C\u002Fli>\n\n  \u003C!-- required: the anchored indicator -->\n  \u003Cli class=\"tab-indicator\" aria-hidden=\"true\" role=\"presentation\">\u003C\u002Fli>\n\u003C\u002Ful>\n",[339,4998,4999,5018,5038,5067,5076,5094,5122,5130,5134,5139,5187],{"__ignoreMap":794},[798,5000,5001,5003,5005,5007,5009,5011,5014,5016],{"class":800,"line":801},[798,5002,2130],{"class":815},[798,5004,1744],{"class":2133},[798,5006,4891],{"class":889},[798,5008,2142],{"class":815},[798,5010,2145],{"class":815},[798,5012,5013],{"class":819},"tabs-navigation",[798,5015,2145],{"class":815},[798,5017,2153],{"class":815},[798,5019,5020,5023,5025,5027,5029,5031,5034,5036],{"class":800,"line":808},[798,5021,5022],{"class":815},"  \u003C",[798,5024,347],{"class":2133},[798,5026,4891],{"class":889},[798,5028,2142],{"class":815},[798,5030,2145],{"class":815},[798,5032,5033],{"class":819},"tab-item",[798,5035,2145],{"class":815},[798,5037,2153],{"class":815},[798,5039,5040,5043,5046,5048,5050,5052,5055,5057,5059,5061,5063,5065],{"class":800,"line":834},[798,5041,5042],{"class":815},"    \u003C",[798,5044,5045],{"class":2133},"button",[798,5047,4891],{"class":889},[798,5049,2142],{"class":815},[798,5051,2145],{"class":815},[798,5053,5054],{"class":819},"tab-link active",[798,5056,2145],{"class":815},[798,5058,2983],{"class":815},[798,5060,28],{"class":830},[798,5062,2173],{"class":815},[798,5064,5045],{"class":2133},[798,5066,2153],{"class":815},[798,5068,5069,5072,5074],{"class":800,"line":845},[798,5070,5071],{"class":815},"  \u003C\u002F",[798,5073,347],{"class":2133},[798,5075,2153],{"class":815},[798,5077,5078,5080,5082,5084,5086,5088,5090,5092],{"class":800,"line":863},[798,5079,5022],{"class":815},[798,5081,347],{"class":2133},[798,5083,4891],{"class":889},[798,5085,2142],{"class":815},[798,5087,2145],{"class":815},[798,5089,5033],{"class":819},[798,5091,2145],{"class":815},[798,5093,2153],{"class":815},[798,5095,5096,5098,5100,5102,5104,5106,5109,5111,5113,5116,5118,5120],{"class":800,"line":1490},[798,5097,5042],{"class":815},[798,5099,5045],{"class":2133},[798,5101,4891],{"class":889},[798,5103,2142],{"class":815},[798,5105,2145],{"class":815},[798,5107,5108],{"class":819},"tab-link",[798,5110,2145],{"class":815},[798,5112,2983],{"class":815},[798,5114,5115],{"class":830},"Pricing",[798,5117,2173],{"class":815},[798,5119,5045],{"class":2133},[798,5121,2153],{"class":815},[798,5123,5124,5126,5128],{"class":800,"line":1534},[798,5125,5071],{"class":815},[798,5127,347],{"class":2133},[798,5129,2153],{"class":815},[798,5131,5132],{"class":800,"line":2184},[798,5133,1187],{"emptyLinePlaceholder":1186},[798,5135,5136],{"class":800,"line":2190},[798,5137,5138],{"class":804},"  \u003C!-- required: the anchored indicator -->\n",[798,5140,5141,5143,5145,5147,5149,5151,5154,5156,5159,5161,5163,5166,5168,5171,5173,5175,5178,5180,5183,5185],{"class":800,"line":2199},[798,5142,5022],{"class":815},[798,5144,347],{"class":2133},[798,5146,4891],{"class":889},[798,5148,2142],{"class":815},[798,5150,2145],{"class":815},[798,5152,5153],{"class":819},"tab-indicator",[798,5155,2145],{"class":815},[798,5157,5158],{"class":889}," aria-hidden",[798,5160,2142],{"class":815},[798,5162,2145],{"class":815},[798,5164,5165],{"class":819},"true",[798,5167,2145],{"class":815},[798,5169,5170],{"class":889}," role",[798,5172,2142],{"class":815},[798,5174,2145],{"class":815},[798,5176,5177],{"class":819},"presentation",[798,5179,2145],{"class":815},[798,5181,5182],{"class":815},">\u003C\u002F",[798,5184,347],{"class":2133},[798,5186,2153],{"class":815},[798,5188,5189,5191,5193],{"class":800,"line":2205},[798,5190,2173],{"class":815},[798,5192,1744],{"class":2133},[798,5194,2153],{"class":815},[322,5196,5197,5198,5201],{},"Without that element the active tab shows no underline (or pill, with\n",[339,5199,5200],{},".tabs-pills",") in browsers that support anchor positioning. Browsers that do\nnot support it fall back to the old border\u002Fbackground on the active link, so\nthey look the same either way.",[322,5203,5204,5205,5207,5208,1864,5210,5212,5213,5215,5216,5219],{},"This affects ",[339,5206,401],{}," consumers writing their own markup only —\n",[339,5209,2495],{},[339,5211,405],{}," renders the element for you. The same pattern was\nalready in place for ",[339,5214,1643],{},", whose ",[339,5217,5218],{},".pill-indicator"," child\nis unchanged.",[412,5221,5223],{"id":5222},"the-popover-menu-header-no-longer-renders-identity","The popover menu header no longer renders identity",[322,5225,5226,5228,5229,5231,5232,750,5234,776,5236,2263,5238,5240,5241,5244,5245,5247,5248,5250],{},[339,5227,1844],{},"'s default header is now a ",[339,5230,3000],{}," and the close button, with the\nclose button pinned to the top right. Passing ",[339,5233,1849],{},[339,5235,1852],{},[339,5237,1855],{},[339,5239,1858],{}," no longer draws the avatar block — move it\ninto the ",[339,5242,5243],{},"header"," slot, where ",[339,5246,1863],{}," takes the same ",[339,5249,1849],{}," object\nand lays the avatar beside the name and email:",[789,5252,5254],{"className":2116,"code":5253,"language":2118,"meta":794,"style":794},"\u003C!-- before -->\n\u003CUiPopoverMenu :user=\"user\" avatar-custom-class=\"border\" \u002F>\n\n\u003C!-- after -->\n\u003CUiPopoverMenu>\n  \u003Ctemplate #header>\n    \u003CUiPopoverMenuUser :user=\"user\" avatar-class=\"border\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FUiPopoverMenu>\n",[339,5255,5256,5261,5293,5297,5302,5310,5315,5320,5324],{"__ignoreMap":794},[798,5257,5258],{"class":800,"line":801},[798,5259,5260],{"class":804},"\u003C!-- before -->\n",[798,5262,5263,5265,5267,5269,5271,5273,5275,5277,5279,5282,5284,5286,5289,5291],{"class":800,"line":808},[798,5264,2130],{"class":815},[798,5266,1844],{"class":2133},[798,5268,2136],{"class":815},[798,5270,1849],{"class":889},[798,5272,2142],{"class":815},[798,5274,2145],{"class":815},[798,5276,1849],{"class":830},[798,5278,2145],{"class":815},[798,5280,5281],{"class":889}," avatar-custom-class",[798,5283,2142],{"class":815},[798,5285,2145],{"class":815},[798,5287,5288],{"class":819},"border",[798,5290,2145],{"class":815},[798,5292,2600],{"class":815},[798,5294,5295],{"class":800,"line":834},[798,5296,1187],{"emptyLinePlaceholder":1186},[798,5298,5299],{"class":800,"line":845},[798,5300,5301],{"class":804},"\u003C!-- after -->\n",[798,5303,5304,5306,5308],{"class":800,"line":863},[798,5305,2130],{"class":815},[798,5307,1844],{"class":2133},[798,5309,2153],{"class":815},[798,5311,5312],{"class":800,"line":1490},[798,5313,5314],{"class":830},"  \u003Ctemplate #header>\n",[798,5316,5317],{"class":800,"line":1534},[798,5318,5319],{"class":830},"    \u003CUiPopoverMenuUser :user=\"user\" avatar-class=\"border\" \u002F>\n",[798,5321,5322],{"class":800,"line":2184},[798,5323,2168],{"class":830},[798,5325,5326,5328,5330],{"class":800,"line":2190},[798,5327,2173],{"class":815},[798,5329,1844],{"class":2133},[798,5331,2153],{"class":815},[322,5333,5334,5335,329],{},"Those four props stay declared and deprecated through 2.x, and are removed in\n3.0. The close button used to need an opt-in; it now renders by default and is\nturned off with ",[339,5336,5337],{},":closable=\"false\"",[412,5339,5341],{"id":5340},"the-popover-menu-renders-as-a-native-popover","The popover menu renders as a native popover",[322,5343,5344,5345,5347,5348,5351,5352,5355,5356,5359,5360,5363],{},"In browsers that support both the Popover API and CSS anchor positioning,\n",[339,5346,1844],{}," now renders its panel as a native ",[339,5349,5350],{},"popover=\"auto\"",": it moves to\nthe top layer, anchors itself to its place in the navbar, and the browser\nhandles click-outside and ",[339,5353,5354],{},"Esc"," dismissal (the component emits ",[339,5357,5358],{},"hideDropdown","\nto keep ",[339,5361,5362],{},"isOpened"," in sync). Browsers missing either feature keep the previous\nclass-based rendering, so nothing changes for them.",[322,5365,5366,5367,750,5369,5372,5373,5376,5377,5380,5381,5384,5385,5388],{},"The API is unchanged — ",[339,5368,5362],{},[339,5370,5371],{},"@hide-dropdown",", and any click-outside\nhandler keep working in both branches. The one thing that can break is custom\nCSS that repositioned the panel: in the native branch ",[339,5374,5375],{},".popover-menu"," sits in\nthe top layer as ",[339,5378,5379],{},"position: fixed",", so absolute-positioning overrides written\nagainst the old rendering stop applying there. Either target the native branch\nexplicitly with ",[339,5382,5383],{},".popover-menu[popover]",", or opt the component out with\n",[339,5386,5387],{},":native-popover=\"false\""," to force the class-based rendering everywhere.",[4566,5390,5391,5392,5394,5395,5398,5399,5402,5403,5406],{},"Each item gets its own ",[339,5393,4992],{}," and the indicator references the active\none through a custom property (",[339,5396,5397],{},"anchor(var(--_tabs-indicator-anchor) left)","),\nwhich is what lets ",[339,5400,5401],{},"transition: inset"," animate it: transitions need a computed\nvalue change, and a fixed ",[339,5404,5405],{},"left: anchor(left)"," computes identically before and\nafter, so it would snap instead. Up to 16 tabs animate (8 navigation bar items);\nbeyond that the indicator still positions, it just jumps.",[412,5408,5410],{"id":5409},"chips-split-the-container-from-the-selected-color","Chips split the container from the selected color",[322,5412,5413,5416],{},[339,5414,5415],{},".btn-chip"," used to carry its selected look in one place. It is now two axes:\nthe container the chip rests in, and the fill it takes once selected.",[789,5418,5420],{"className":4873,"code":5419,"language":4875,"meta":794,"style":794},"\u003C!-- container: .btn-chip is the outline one, .chip-elevated the raised one -->\n\u003Cbutton class=\"btn btn-chip\">Outline\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-chip chip-elevated\">Elevated\u003C\u002Fbutton>\n\n\u003C!-- color only lands together with .chip-active -->\n\u003Cbutton class=\"btn btn-chip chip-active\">Primary fill\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-chip chip-secondary chip-active\">Secondary fill\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-chip chip-neutral chip-active\">Neutral fill\u003C\u002Fbutton>\n",[339,5421,5422,5427,5455,5483,5487,5492,5520,5548],{"__ignoreMap":794},[798,5423,5424],{"class":800,"line":801},[798,5425,5426],{"class":804},"\u003C!-- container: .btn-chip is the outline one, .chip-elevated the raised one -->\n",[798,5428,5429,5431,5433,5435,5437,5439,5442,5444,5446,5449,5451,5453],{"class":800,"line":808},[798,5430,2130],{"class":815},[798,5432,5045],{"class":2133},[798,5434,4891],{"class":889},[798,5436,2142],{"class":815},[798,5438,2145],{"class":815},[798,5440,5441],{"class":819},"btn btn-chip",[798,5443,2145],{"class":815},[798,5445,2983],{"class":815},[798,5447,5448],{"class":830},"Outline",[798,5450,2173],{"class":815},[798,5452,5045],{"class":2133},[798,5454,2153],{"class":815},[798,5456,5457,5459,5461,5463,5465,5467,5470,5472,5474,5477,5479,5481],{"class":800,"line":834},[798,5458,2130],{"class":815},[798,5460,5045],{"class":2133},[798,5462,4891],{"class":889},[798,5464,2142],{"class":815},[798,5466,2145],{"class":815},[798,5468,5469],{"class":819},"btn btn-chip chip-elevated",[798,5471,2145],{"class":815},[798,5473,2983],{"class":815},[798,5475,5476],{"class":830},"Elevated",[798,5478,2173],{"class":815},[798,5480,5045],{"class":2133},[798,5482,2153],{"class":815},[798,5484,5485],{"class":800,"line":845},[798,5486,1187],{"emptyLinePlaceholder":1186},[798,5488,5489],{"class":800,"line":863},[798,5490,5491],{"class":804},"\u003C!-- color only lands together with .chip-active -->\n",[798,5493,5494,5496,5498,5500,5502,5504,5507,5509,5511,5514,5516,5518],{"class":800,"line":1490},[798,5495,2130],{"class":815},[798,5497,5045],{"class":2133},[798,5499,4891],{"class":889},[798,5501,2142],{"class":815},[798,5503,2145],{"class":815},[798,5505,5506],{"class":819},"btn btn-chip chip-active",[798,5508,2145],{"class":815},[798,5510,2983],{"class":815},[798,5512,5513],{"class":830},"Primary fill",[798,5515,2173],{"class":815},[798,5517,5045],{"class":2133},[798,5519,2153],{"class":815},[798,5521,5522,5524,5526,5528,5530,5532,5535,5537,5539,5542,5544,5546],{"class":800,"line":1534},[798,5523,2130],{"class":815},[798,5525,5045],{"class":2133},[798,5527,4891],{"class":889},[798,5529,2142],{"class":815},[798,5531,2145],{"class":815},[798,5533,5534],{"class":819},"btn btn-chip chip-secondary chip-active",[798,5536,2145],{"class":815},[798,5538,2983],{"class":815},[798,5540,5541],{"class":830},"Secondary fill",[798,5543,2173],{"class":815},[798,5545,5045],{"class":2133},[798,5547,2153],{"class":815},[798,5549,5550,5552,5554,5556,5558,5560,5563,5565,5567,5570,5572,5574],{"class":800,"line":2184},[798,5551,2130],{"class":815},[798,5553,5045],{"class":2133},[798,5555,4891],{"class":889},[798,5557,2142],{"class":815},[798,5559,2145],{"class":815},[798,5561,5562],{"class":819},"btn btn-chip chip-neutral chip-active",[798,5564,2145],{"class":815},[798,5566,2983],{"class":815},[798,5568,5569],{"class":830},"Neutral fill",[798,5571,2173],{"class":815},[798,5573,5045],{"class":2133},[798,5575,2153],{"class":815},[322,5577,5578,5579,5582,5583,5586],{},"A color class on its own does nothing — an unselected chip is always just its\ncontainer — and ",[339,5580,5581],{},".chip-active"," with no color class takes the primary fill.\n",[339,5584,5585],{},".chip-elevated"," keeps its shadow through selection.",[322,5588,5589],{},"Two things change for existing markup:",[1744,5591,5592,5612],{},[347,5593,5594,5603,5604,5607,5608,5611],{},[421,5595,5596,754,5599,5602],{},[339,5597,5598],{},".a40",[339,5600,5601],{},".a60"," are gone."," They tinted the active chip for side sheets\nand modals. Use ",[339,5605,5606],{},".chip-neutral"," for the same low-emphasis fill, which now\ntracks ",[339,5609,5610],{},"--theme-surface-container-high"," on every surface.",[347,5613,5614,5619,5620,5623,5624,5627],{},[421,5615,5616,5618],{},[339,5617,5581],{}," no longer forces a pill radius."," It keeps the chip's own\n",[339,5621,5622],{},"--_btn-radius",", so selected chips match their unselected siblings. Add\n",[339,5625,5626],{},".btn-rounded"," where you still want the pill.",[412,5629,5631],{"id":5630},"card-surfaces-are-static-and-interaction-is-its-own-class","Card surfaces are static and interaction is its own class",[322,5633,5634,5635,5638,5639,5642],{},"A card's surface and its response to the pointer used to be the same decision.\n",[339,5636,5637],{},".card-elevated"," stepped its shadow on hover and press, and ",[339,5640,5641],{},".card-selectable","\nreset the border every variant had just set, so an outline card lost its outline\nthe moment it became selectable.",[322,5644,5645,5646,750,5649,1350,5652,5654,5655,5657,5658,5661],{},"The two axes are now separate: ",[339,5647,5648],{},".card-outline",[339,5650,5651],{},".card-pane",[339,5653,5637],{}," only describe the surface, and ",[339,5656,5641],{}," or\n",[339,5659,5660],{},".card-link"," carries every hover, press and focus state.",[789,5663,5665],{"className":4873,"code":5664,"language":4875,"meta":794,"style":794},"\u003C!-- surface only: no hover, no press -->\n\u003Cdiv class=\"card card-elevated\">…\u003C\u002Fdiv>\n\n\u003C!-- interactive: the surface answers the pointer, the shadow steps up -->\n\u003Ca class=\"card card-elevated card-link\" href=\"…\">…\u003C\u002Fa>\n\u003Cdiv class=\"card card-elevated card-selectable\">…\u003C\u002Fdiv>\n",[339,5666,5667,5672,5700,5704,5709,5747],{"__ignoreMap":794},[798,5668,5669],{"class":800,"line":801},[798,5670,5671],{"class":804},"\u003C!-- surface only: no hover, no press -->\n",[798,5673,5674,5676,5679,5681,5683,5685,5688,5690,5692,5694,5696,5698],{"class":800,"line":808},[798,5675,2130],{"class":815},[798,5677,5678],{"class":2133},"div",[798,5680,4891],{"class":889},[798,5682,2142],{"class":815},[798,5684,2145],{"class":815},[798,5686,5687],{"class":819},"card card-elevated",[798,5689,2145],{"class":815},[798,5691,2983],{"class":815},[798,5693,2986],{"class":830},[798,5695,2173],{"class":815},[798,5697,5678],{"class":2133},[798,5699,2153],{"class":815},[798,5701,5702],{"class":800,"line":834},[798,5703,1187],{"emptyLinePlaceholder":1186},[798,5705,5706],{"class":800,"line":845},[798,5707,5708],{"class":804},"\u003C!-- interactive: the surface answers the pointer, the shadow steps up -->\n",[798,5710,5711,5713,5715,5717,5719,5721,5724,5726,5729,5731,5733,5735,5737,5739,5741,5743,5745],{"class":800,"line":863},[798,5712,2130],{"class":815},[798,5714,326],{"class":2133},[798,5716,4891],{"class":889},[798,5718,2142],{"class":815},[798,5720,2145],{"class":815},[798,5722,5723],{"class":819},"card card-elevated card-link",[798,5725,2145],{"class":815},[798,5727,5728],{"class":889}," href",[798,5730,2142],{"class":815},[798,5732,2145],{"class":815},[798,5734,2986],{"class":819},[798,5736,2145],{"class":815},[798,5738,2983],{"class":815},[798,5740,2986],{"class":830},[798,5742,2173],{"class":815},[798,5744,326],{"class":2133},[798,5746,2153],{"class":815},[798,5748,5749,5751,5753,5755,5757,5759,5762,5764,5766,5768,5770,5772],{"class":800,"line":1490},[798,5750,2130],{"class":815},[798,5752,5678],{"class":2133},[798,5754,4891],{"class":889},[798,5756,2142],{"class":815},[798,5758,2145],{"class":815},[798,5760,5761],{"class":819},"card card-elevated card-selectable",[798,5763,2145],{"class":815},[798,5765,2983],{"class":815},[798,5767,2986],{"class":830},[798,5769,2173],{"class":815},[798,5771,5678],{"class":2133},[798,5773,2153],{"class":815},[322,5775,5589],{},[1744,5777,5778,5816],{},[347,5779,5780,5786,5787,5790,5791,5793,5794,1061,5796,5799,5800,4342,5803,5805,5806,961,5809,961,5812,5815],{},[421,5781,5782,5783,5785],{},"A plain ",[339,5784,5637],{}," no longer reacts to hover."," It shows\n",[339,5788,5789],{},"--shadow-sm"," and holds it. Add ",[339,5792,5641],{}," for a card the user picks,\nor ",[339,5795,5660],{},[339,5797,5798],{},"to","\u002F",[339,5801,5802],{},"href",[339,5804,2250],{},") for one that navigates, to get the\n",[339,5807,5808],{},"sm",[339,5810,5811],{},"md",[339,5813,5814],{},"lg"," escalation back.",[347,5817,5818,5821,5822,5657,5825,5828,5829,5832],{},[421,5819,5820],{},"A card carries one surface class."," They all set ",[339,5823,5824],{},"--_card-bg-color",[339,5826,5827],{},"--_card-shadow",", so ",[339,5830,5831],{},"card-outline card-pane"," was only ever the last one to\nwin. Drop the extra class rather than relying on the order.",[5834,5835,5836],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":794,"searchDepth":808,"depth":808,"links":5838},[5839,5850,5856],{"id":333,"depth":808,"text":334,"children":5840},[5841,5842,5843,5844,5845,5846,5847,5848,5849],{"id":414,"depth":834,"text":352},{"id":936,"depth":834,"text":358},{"id":1224,"depth":834,"text":364},{"id":1570,"depth":834,"text":370},{"id":1822,"depth":834,"text":376},{"id":2360,"depth":834,"text":382},{"id":2669,"depth":834,"text":388},{"id":2941,"depth":834,"text":2942},{"id":3013,"depth":834,"text":394},{"id":4405,"depth":808,"text":4406,"children":5851},[5852,5853,5854,5855],{"id":4412,"depth":834,"text":4413},{"id":4590,"depth":834,"text":4591},{"id":4846,"depth":834,"text":4847},{"id":4950,"depth":834,"text":4951},{"id":4978,"depth":808,"text":4979,"children":5857},[5858,5859,5860,5861,5862],{"id":4982,"depth":834,"text":4983},{"id":5222,"depth":834,"text":5223},{"id":5340,"depth":834,"text":5341},{"id":5409,"depth":834,"text":5410},{"id":5630,"depth":834,"text":5631},"Upgrade to 3.0, and the token changes from 2.0 to 2.5.",null,{},{"icon":311},{"title":308,"description":5863},"X5po5sEvcgMasruY_xl_4Aughzicb2S7fsi3iGx-EHA",[5870,5872],{"title":303,"path":304,"stem":305,"description":5871,"icon":306,"children":-1},"Translate the text Colorffy UI writes on its own and set the locale for dates, for the whole app or one section.",{"title":313,"path":314,"stem":315,"description":5873,"icon":291,"children":-1},"Notable changes to Colorffy CSS and Colorffy UI, newest first.",1791247316601]