[{"data":1,"prerenderedAt":6788},["ShallowReactive",2],{"navigation_docs":3,"-changelog":316,"-changelog-surround":6785},[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":313,"body":318,"description":6779,"extension":2494,"links":6780,"meta":6781,"navigation":6782,"path":314,"seo":6783,"stem":315,"__hash__":6784},"docs\u002F5.changelog.md",{"type":319,"value":320,"toc":6742},"minimark",[321,339,344,349,2155,2159,2967,2971,3656,3660,4698,4702,4705,4750,4753,4823,4826,4852,4855,4924,4928,4931,5089,5092,5246,5249,5344,5348,5351,5491,5495,5498,5623,5626,5670,5673,5687,5690,5783,5787,5790,5872,5875,6297,6300,6362,6365,6490,6495,6518,6522,6549,6553,6575,6585,6588,6660,6677,6689,6693,6714,6718,6721,6738],[322,323,324,325,329,330,333,334,338],"p",{},"Notable changes to ",[326,327,328],"code",{},"@colorffy\u002Fcss"," and ",[326,331,332],{},"@colorffy\u002Fui",", newest first. Anything\nthat needs you to edit your own markup is written up in full in the\n",[335,336,337],"a",{"href":309},"migration guide"," — those entries link there instead of\nrepeating it.",[340,341,343],"h2",{"id":342},"_300","3.0.0",[345,346,348],"h3",{"id":347},"added","Added",[350,351,352,393,444,482,518,544,569,587,608,621,634,715,737,751,791,812,846,879,889,899,909,919,950,963,973,983,1007,1033,1053,1084,1110,1140,1194,1226,1264,1316,1356,1384,1413,1445,1460,1504,1541,1560,1581,1619,1686,1705,1789,1835,1891,1972,2004,2041,2095,2120,2134],"ul",{},[353,354,355,359,360,363,364,367,368,371,372,375,376,379,380,383,384,387,388,392],"li",{},[356,357,358],"strong",{},"Density modes."," ",[326,361,362],{},"data-density=\"compact | comfortable | spacious\""," on\n",[326,365,366],{},"\u003Chtml>"," or any element tightens or loosens the spacing and the height of\nfields and buttons inside it; the nearest one wins, and touch screens keep\ncomfortable heights in ",[326,369,370],{},"compact",". Where container style queries are\nsupported, the ",[326,373,374],{},"--cffy-density"," custom property selects a mode from CSS as\nwell. Two new token scales carry the heights, ",[326,377,378],{},"--cffy-field-height-sm|md|lg","\nand ",[326,381,382],{},"--cffy-control-height-sm|md|lg",", and the input, button and calendar day\nhooks default to them; ",[326,385,386],{},"comfortable"," matches the previous sizes. See\n",[335,389,391],{"href":390},"\u002Fcolorffy-css\u002Fcustomization#density","Density",".",[353,394,395,359,398,401,402,329,405,408,409,401,412,329,415,418,419,401,422,401,425,428,429,329,432,435,436,439,440,443],{},[356,396,397],{},"Spacing tokens for the large steps.",[326,399,400],{},"--cffy-space-28",", ",[326,403,404],{},"-36",[326,406,407],{},"-40","\n(behind ",[326,410,411],{},"gap-7",[326,413,414],{},"gap-9",[326,416,417],{},"gap-10",") and ",[326,420,421],{},"--cffy-space-72",[326,423,424],{},"-96",[326,426,427],{},"-120",",\n",[326,430,431],{},"-144",[326,433,434],{},"-192"," (behind spacing steps ",[326,437,438],{},"6","–",[326,441,442],{},"10",") join the scale. They follow\nthe unit and the density like the other steps, and custom CSS can use them\ntoo.",[353,445,446,359,449,452,453,329,456,459,460,401,463,466,467,470,471,428,474,477,478,392],{},[356,447,448],{},"Navbar CSS variables.",[326,450,451],{},".navbar"," reads 25 public variables, from\n",[326,454,455],{},"--cffy-navbar-bg-color",[326,457,458],{},"--cffy-navbar-radius"," to the link states\n(",[326,461,462],{},"--cffy-navbar-link-hover-color",[326,464,465],{},"--cffy-navbar-link-active-bg-color",", …). Set them on\n",[326,468,469],{},":root"," or on a wrapper to restyle every navbar inside it; ",[326,472,473],{},"nav-island",[326,475,476],{},"nav-transparent"," and the stuck state keep their own values. See\n",[335,479,481],{"href":480},"\u002Fcolorffy-ui\u002Fcomponents\u002Fnavbar#css-variables","Navbar → CSS variables",[353,483,484,359,487,490,491,401,494,428,497,401,500,503,504,428,507,401,510,513,514,392],{},[356,485,486],{},"Popover menu CSS variables.",[326,488,489],{},".popover-menu-container"," reads 16\npublic variables for the panel (",[326,492,493],{},"--cffy-popover-menu-bg-color",[326,495,496],{},"-radius",[326,498,499],{},"-shadow",[326,501,502],{},"-min-width",", …) and its items (",[326,505,506],{},"--cffy-popover-menu-item-color",[326,508,509],{},"-hover-*",[326,511,512],{},"-active-*","). Destructive items keep their danger color. See\n",[335,515,517],{"href":516},"\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover-menu#css-variables","Popover menu → CSS variables",[353,519,520,523,524,401,527,401,529,531,532,401,535,401,537,539,540,392],{},[356,521,522],{},"Dropdown CSS variables."," Every dropdown panel reads 17 public variables\n(",[326,525,526],{},"--cffy-dropdown-bg-color",[326,528,496],{},[326,530,502],{},", …) and its items\n(",[326,533,534],{},"--cffy-dropdown-item-color",[326,536,509],{},[326,538,512],{},", padding and radius). The\neasing and duration hooks also reach the mobile bottom sheet, whose\nvariant no longer repeats the base timing. See\n",[335,541,543],{"href":542},"\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-menu#css-variables","Button menu → CSS variables",[353,545,546,549,550,401,553,401,555,401,558,428,561,564,565,392],{},[356,547,548],{},"Dialog CSS variables."," Dialogs read 18 public variables\n(",[326,551,552],{},"--cffy-dialog-bg-color",[326,554,496],{},[326,556,557],{},"-padding",[326,559,560],{},"-backdrop-color",[326,562,563],{},"-backdrop-blur",", title, subtitle and icon colors, …). The easing and\nduration now reach modals and side sheets: they re-declared the same\novershoot curve and 600ms over a base easing that never ran, and the side\nsheet repeated the base radius, so those duplicates are gone. See\n",[335,566,568],{"href":567},"\u002Fcolorffy-ui\u002Fcomponents\u002Fmodal#css-variables","Modal → CSS variables",[353,570,571,574,575,401,578,401,580,582,583,392],{},[356,572,573],{},"Sidebar CSS variables."," The drawer reads 19 public variables\n(",[326,576,577],{},"--cffy-sidebar-bg-color",[326,579,496],{},[326,581,557],{},", item colors and their active\nstate, the overlay color and blur, …). See\n",[335,584,586],{"href":585},"\u002Fcolorffy-ui\u002Fcomponents\u002Fsidebar#css-variables","Sidebar → CSS variables",[353,588,589,359,592,595,596,599,600,603,604,392],{},[356,590,591],{},"Tabs CSS variables.",[326,593,594],{},"UiTabs"," reads 14 public variables: the underline\nindicator, the border, tab text and its hover and active states, and\n",[326,597,598],{},"--cffy-tabs-pills-*"," for pill tabs (container, radius, raised indicator). Pill\ntabs no longer repeat the base active color, so ",[326,601,602],{},"--cffy-tabs-link-active-color","\nreaches them too. See\n",[335,605,607],{"href":606},"\u002Fcolorffy-ui\u002Fcomponents\u002Ftabs#css-variables","Tabs → CSS variables",[353,609,610,359,613,616,617,392],{},[356,611,612],{},"Segmented control CSS variables.",[326,614,615],{},"UiSegmentedControls"," reads 11 public\nvariables for its frame, items and sliding pill. See\n",[335,618,620],{"href":619},"\u002Fcolorffy-ui\u002Fcomponents\u002Fsegmented-controls#css-variables","Segmented controls → CSS variables",[353,622,623,359,626,629,630,392],{},[356,624,625],{},"Footer CSS variables.",[326,627,628],{},"UiFooter"," reads 14 public variables for its\ncolors, padding, the space above it (now independent of the padding), the\ntitle, links and icons. See\n",[335,631,633],{"href":632},"\u002Fcolorffy-ui\u002Fcomponents\u002Flayout#footer-css-variables","Layout → Footer CSS variables",[353,635,636,359,639,642,643,401,646,401,649,401,652,401,655,428,657,401,660,401,663,329,666,669,670,673,674,677,678,681,682,329,685,688,689,692,693,696,697,700,701,704,705,708,709,700,712,392],{},[356,637,638],{},"Progress, spinner and skeleton CSS variables.",[326,640,641],{},"UiProgressBar"," reads\n",[326,644,645],{},"--cffy-progress-bg-color",[326,647,648],{},"-color",[326,650,651],{},"-label-color",[326,653,654],{},"-height",[326,656,496],{},[326,658,659],{},"-font-size",[326,661,662],{},"-easing",[326,664,665],{},"-duration",[326,667,668],{},"-value"," (the fill, which the\n",[326,671,672],{},"value"," prop sets and which replaces the private ",[326,675,676],{},"--_progress-width","; see\n",[335,679,308],{"href":680},"\u002Fmigration#namespace-the-custom-properties","); the spinner reads\n",[326,683,684],{},"--cffy-progress-spinner-color",[326,686,687],{},"--cffy-progress-spinner-size",", which\n",[326,690,691],{},"UiProgressSpinner","'s ",[326,694,695],{},"size"," prop sets; skeletons read ",[326,698,699],{},"--cffy-skeleton-color"," and\n",[326,702,703],{},"--cffy-skeleton-radius"," (the shimmer follows the color); the shapes loader reads\n",[326,706,707],{},"--cffy-loading-shapes-color",". See\n",[335,710,258],{"href":711},"\u002Fcolorffy-ui\u002Fcomponents\u002Fprogress#css-variables",[335,713,273],{"href":714},"\u002Fcolorffy-ui\u002Fcomponents\u002Fskeleton#css-variables",[353,716,717,720,721,724,725,728,729,732,733,392],{},[356,718,719],{},"Alert CSS variables."," Alerts read 18 public variables: colors, radius,\ntype, padding and gaps, the title, and ",[326,722,723],{},"--cffy-alert-snackbar-*"," \u002F\n",[326,726,727],{},"--cffy-alert-toast-*"," for snackbars. Alerts with an icon\nno longer repeat the base gap, so ",[326,730,731],{},"--cffy-alert-gap"," reaches them. See\n",[335,734,736],{"href":735},"\u002Fcolorffy-ui\u002Fcomponents\u002Falert#css-variables","Alert → CSS variables",[353,738,739,742,743,746,747,392],{},[356,740,741],{},"Card CSS variables."," Cards read 13 public variables for their surface,\nborder, radius, padding, title and text, plus the selected border of\nselectable and link cards. The header and footer corners\nnow follow the card radius instead of the compiled ",[326,744,745],{},"$card-border-radius",".\nSee ",[335,748,750],{"href":749},"\u002Fcolorffy-ui\u002Fcomponents\u002Fcard#css-variables","Card → CSS variables",[353,752,753,756,757,401,760,428,762,401,765,401,768,401,770,428,773,401,776,401,778,329,780,782,783,786,787,392],{},[356,754,755],{},"Button CSS variables."," Buttons read ",[326,758,759],{},"--cffy-btn-radius",[326,761,654],{},[326,763,764],{},"-padding-inline",[326,766,767],{},"-padding-block",[326,769,659],{},[326,771,772],{},"-font-weight",[326,774,775],{},"-icon-size",[326,777,499],{},[326,779,662],{},[326,781,665],{},", shared by every\nvariant; sizes, icon buttons, FABs and ",[326,784,785],{},"rounded"," keep their own values. See\n",[335,788,790],{"href":789},"\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton#css-variables","Button → CSS variables",[353,792,793,796,797,401,800,428,802,329,805,807,808,392],{},[356,794,795],{},"Chip CSS variables."," Chips read ",[326,798,799],{},"--cffy-chip-bg-color",[326,801,648],{},[326,803,804],{},"-border-color",[326,806,496],{},"; selected chips keep the\ntheme's tonal colors. See\n",[335,809,811],{"href":810},"\u002Fcolorffy-ui\u002Fcomponents\u002Fchip#css-variables","Chip → CSS variables",[353,813,814,817,401,820,401,823,724,826,829,830,833,834,837,838,841,842,392],{},[356,815,816],{},"Button group, chip group, FAB group and toggle CSS variables.",[326,818,819],{},"--cffy-btn-group-gap",[326,821,822],{},"--cffy-chip-group-gap",[326,824,825],{},"--cffy-fab-group-offset-block",[326,827,828],{},"-inline"," \u002F ",[326,831,832],{},"-gap",", and ",[326,835,836],{},"--cffy-toggle-btn-*"," for ",[326,839,840],{},"UiButtonToggleGroup"," (surface,\nborder, radius, padding, subtitle and the hover and selected outlines). The\nselected toggle's inset ring now follows its border color. See\n",[335,843,845],{"href":844},"\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-group#css-variables","Button group → CSS variables",[353,847,848,851,852,401,855,428,857,401,859,401,861,401,863,401,865,428,867,329,869,871,872,708,875,392],{},[356,849,850],{},"Badge CSS variables."," Badges read ",[326,853,854],{},"--cffy-badge-bg-color",[326,856,648],{},[326,858,804],{},[326,860,496],{},[326,862,659],{},[326,864,772],{},[326,866,767],{},[326,868,764],{},[326,870,775],{},", and badge groups ",[326,873,874],{},"--cffy-badge-group-gap",[335,876,878],{"href":877},"\u002Fcolorffy-ui\u002Fcomponents\u002Fbadge#css-variables","Badge → CSS variables",[353,880,881,884,885,392],{},[356,882,883],{},"Accordion CSS variables."," Accordions read 13 public variables for their\nsurface, radius (the outer corners of a stacked group), padding, title and\nbody text, icons, hover state, motion and the gap between items. See\n",[335,886,888],{"href":887},"\u002Fcolorffy-ui\u002Fcomponents\u002Faccordion#css-variables","Accordion → CSS variables",[353,890,891,894,895,392],{},[356,892,893],{},"Avatar CSS variables."," Avatars read 17 public variables for their\nradius, motion, initials tint and text, group overlap and ring, and the\nstatus dot's size, ring and colors. See\n",[335,896,898],{"href":897},"\u002Fcolorffy-ui\u002Fcomponents\u002Favatar#css-variables","Avatar → CSS variables",[353,900,901,904,905,392],{},[356,902,903],{},"List CSS variables."," Lists read 26 public variables for the item\nsurface, text, corners, padding, icon tile, image, active state, trailing\narrow and motion. See\n",[335,906,908],{"href":907},"\u002Fcolorffy-ui\u002Fcomponents\u002Flist#css-variables","List → CSS variables",[353,910,911,914,915,392],{},[356,912,913],{},"Popover CSS variables."," Popovers read 15 public variables for the\npanel surface, border, radius, shadow, size limits, spacing, offset from the\ntrigger, header text and motion. See\n",[335,916,918],{"href":917},"\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover#css-variables","Popover → CSS variables",[353,920,921,924,925,401,928,428,930,401,932,401,934,401,936,401,938,428,940,329,943,708,946,392],{},[356,922,923],{},"Tooltip CSS variables."," Tooltips read ",[326,926,927],{},"--cffy-tooltip-bg-color",[326,929,648],{},[326,931,557],{},[326,933,496],{},[326,935,499],{},[326,937,659],{},[326,939,772],{},[326,941,942],{},"-kbd-bg-color",[326,944,945],{},"-kbd-color",[335,947,949],{"href":948},"\u002Fcolorffy-ui\u002Fcomponents\u002Ftooltip#css-variables","Tooltip → CSS variables",[353,951,952,955,956,708,959,392],{},[356,953,954],{},"Breadcrumb CSS variables."," Breadcrumbs read 12 public variables for the\ngap, link, hover and current-page colors, the current label's weight and\nmaximum width, separators, text and icon size, and motion. Icon separators\nnow follow ",[326,957,958],{},"--cffy-breadcrumb-separator-color",[335,960,962],{"href":961},"\u002Fcolorffy-ui\u002Fcomponents\u002Fbreadcrumb#css-variables","Breadcrumb → CSS variables",[353,964,965,968,969,392],{},[356,966,967],{},"Stepper CSS variables."," Steppers read 24 public variables for the\nindicator size, corners, text and pending, current and completed colors, the\nconnector, labels, descriptions, the vertical gap and motion. See\n",[335,970,972],{"href":971},"\u002Fcolorffy-ui\u002Fcomponents\u002Fstepper#css-variables","Stepper → CSS variables",[353,974,975,978,979,392],{},[356,976,977],{},"Timeline CSS variables."," Timelines read 18 public variables for the\ngap, item spacing, connector, dot, icon and image markers, title, text and\ntimestamp. See\n",[335,980,982],{"href":981},"\u002Fcolorffy-ui\u002Fcomponents\u002Ftimeline#css-variables","Timeline → CSS variables",[353,984,985,359,988,991,992,995,996,999,1000,708,1003,392],{},[356,986,987],{},"Table CSS variables.",[326,989,990],{},".table"," (and ",[326,993,994],{},"UiDatatable",") reads 20 public\nvariables for the surface, borders, cell padding, text, header, icons,\nselected and striped rows, the row hover motion, the sticky-header height and the\npinned column. ",[326,997,998],{},".td-text"," now follows ",[326,1001,1002],{},"--cffy-table-font-size",[335,1004,1006],{"href":1005},"\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable#css-variables","Datatable → CSS variables",[353,1008,1009,1012,1013,1016,1017,1020,1021,1024,1025,1028,1029,392],{},[356,1010,1011],{},"Input CSS variables."," Text inputs, textareas, selects and the color\npicker's field read ",[326,1014,1015],{},"--cffy-input-*"," variables for their size, padding, radius,\nsurface, border, text, placeholder, shadow, hover, focus and invalid states,\nlabel and motion; ",[326,1018,1019],{},"--cffy-form-group-spacing"," sets the space below each field.\nRanges read ",[326,1022,1023],{},"--cffy-input-range-*"," and the file dropbox ",[326,1026,1027],{},"--cffy-input-file-*",". A\nrange's thumb now stays centered on the track when either size changes. See\n",[335,1030,1032],{"href":1031},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#css-variables","Inputs → CSS variables",[353,1034,1035,359,1038,642,1041,1044,1045,1048,1049,392],{},[356,1036,1037],{},"Checkbox, switch and radio CSS variables.",[326,1039,1040],{},".form-check",[326,1042,1043],{},"--cffy-input-check-*"," variables for the box size, gap, spacing, surface, border,\nchecked color, checkbox radius and motion, and switches\n",[326,1046,1047],{},"--cffy-input-switch-*"," for the track and thumb. See\n",[335,1050,1052],{"href":1051},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#checkbox-switch-and-radio-css-variables","Inputs → Checkbox, switch and radio CSS variables",[353,1054,1055,1058,1059,401,1062,329,1065,1068,1069,401,1072,401,1074,401,1076,700,1078,708,1080,392],{},[356,1056,1057],{},"Prefix and suffix CSS variables."," Input adornments follow the field's\n",[326,1060,1061],{},"--cffy-input-radius",[326,1063,1064],{},"--cffy-input-border-*",[326,1066,1067],{},"--cffy-input-bg-color",", and read\n",[326,1070,1071],{},"--cffy-input-group-bg-color",[326,1073,648],{},[326,1075,764],{},[326,1077,659],{},[326,1079,775],{},[335,1081,1083],{"href":1082},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#prefix-and-suffix-css-variables","Inputs → Prefix and suffix CSS variables",[353,1085,1086,359,1089,1092,1093,428,1096,329,1099,1102,1103,1105,1106,392],{},[356,1087,1088],{},"OTP CSS variables.",[326,1090,1091],{},".form-otp"," reads ",[326,1094,1095],{},"--cffy-input-otp-gap",[326,1097,1098],{},"--cffy-input-otp-font-size",[326,1100,1101],{},"--cffy-input-otp-font-weight","; the boxes follow the\nother ",[326,1104,1015],{}," variables. See\n",[335,1107,1109],{"href":1108},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#otp-css-variables","Inputs → OTP CSS variables",[353,1111,1112,1115,1116,401,1119,428,1121,401,1124,401,1127,401,1130,329,1133,708,1136,392],{},[356,1113,1114],{},"Divider CSS variables."," Dividers read ",[326,1117,1118],{},"--cffy-divider-thickness",[326,1120,648],{},[326,1122,1123],{},"-spacing",[326,1125,1126],{},"-inset",[326,1128,1129],{},"-text-gap",[326,1131,1132],{},"-text-color",[326,1134,1135],{},"-text-font-size",[335,1137,1139],{"href":1138},"\u002Fcolorffy-ui\u002Fcomponents\u002Fdivider#css-variables","Divider → CSS variables",[353,1141,1142,1145,1146,1149,1150,1153,1154,1157,1158,1161,1162,1165,1166,1169,1170,1165,1173,1169,1176,1165,1179,1182,1183,1186,1187,1182,1190,1193],{},[356,1143,1144],{},"Carousel CSS variables."," The ",[326,1147,1148],{},".carousel"," scroll buttons (native\n",[326,1151,1152],{},"::scroll-button()"," and the ",[326,1155,1156],{},".carousel-btn"," fallback) read\n",[326,1159,1160],{},"--cffy-carousel-btn-size"," (default ",[326,1163,1164],{},"44px","), ",[326,1167,1168],{},"--cffy-carousel-btn-bg-color","\n(",[326,1171,1172],{},"--cffy-surface-body-pane",[326,1174,1175],{},"--cffy-carousel-btn-color",[326,1177,1178],{},"--cffy-on-background",[326,1180,1181],{},"--cffy-carousel-btn-shadow"," (",[326,1184,1185],{},"--cffy-shadow-sm",") and\n",[326,1188,1189],{},"--cffy-carousel-btn-radius",[326,1191,1192],{},"--cffy-radius-full",").",[353,1195,1196,359,1199,642,1202,1205,1206,1209,1212,1213,359,1216,700,1219,708,1222,392],{},[356,1197,1198],{},"Header, hero and subheading CSS variables.",[326,1200,1201],{},"UiHeaderContent",[326,1203,1204],{},"--cffy-header-*"," (spacing, gap, title and description), ",[326,1207,1208],{},"UiHeroContent",[326,1210,1211],{},"--cffy-hero-*"," (gaps, spacing, line length, description and the actions' offset\nand gap) and ",[326,1214,1215],{},"UiSubheadingContent",[326,1217,1218],{},"--cffy-subheading-gap",[326,1220,1221],{},"--cffy-subheading-actions-gap",[335,1223,1225],{"href":1224},"\u002Fcolorffy-ui\u002Fcomponents\u002Flayout#header-css-variables","Layout → Header CSS variables",[353,1227,1228,1231,1232,401,1235,401,1237,401,1240,428,1243,401,1246,401,1248,401,1250,428,1253,401,1256,329,1258,708,1260,392],{},[356,1229,1230],{},"Navigation bar CSS variables."," The bottom navigation bar reads\n",[326,1233,1234],{},"--cffy-navigation-bar-bg-color",[326,1236,499],{},[326,1238,1239],{},"-item-color",[326,1241,1242],{},"-item-active-color",[326,1244,1245],{},"-item-hover-color",[326,1247,659],{},[326,1249,775],{},[326,1251,1252],{},"-indicator-color",[326,1254,1255],{},"-indicator-radius",[326,1257,662],{},[326,1259,665],{},[335,1261,1263],{"href":1262},"\u002Fcolorffy-ui\u002Fcomponents\u002Fnavigation-bar#css-variables","Navigation bar → CSS variables",[353,1265,1266,1269,1270,428,1273,401,1276,401,1279,401,1282,700,1284,1286,1287,1092,1290,329,1293,1296,1297,1300,1301,401,1304,401,1306,401,1308,329,1310,708,1312,392],{},[356,1267,1268],{},"Link, code and kbd CSS variables."," Base links read ",[326,1271,1272],{},"--cffy-link-color",[326,1274,1275],{},"-hover-color",[326,1277,1278],{},"-active-color",[326,1280,1281],{},"-underline-color",[326,1283,662],{},[326,1285,665],{},"; ",[326,1288,1289],{},"\u003Ccode>",[326,1291,1292],{},"--cffy-code-color",[326,1294,1295],{},"--cffy-code-font-size","; and ",[326,1298,1299],{},"\u003Ckbd>","\nreads ",[326,1302,1303],{},"--cffy-kbd-bg-color",[326,1305,648],{},[326,1307,659],{},[326,1309,496],{},[326,1311,499],{},[335,1313,1315],{"href":1314},"\u002Fcolorffy-css\u002Futilities\u002Ftypography#css-variables","Typography → CSS variables",[353,1317,1318,359,1321,1092,1324,1327,1328,1165,1331,1182,1334,1336,1337,1182,1340,1165,1343,1169,1346,418,1349,1182,1352,1355],{},[356,1319,1320],{},"Icon wrap CSS variables.",[326,1322,1323],{},".icon-wrap",[326,1325,1326],{},"--cffy-icon-wrap-padding","\n(default ",[326,1329,1330],{},"20px",[326,1332,1333],{},"--cffy-icon-wrap-radius",[326,1335,1192],{},"),\n",[326,1338,1339],{},"--cffy-icon-wrap-bg-color",[326,1341,1342],{},"--cffy-background",[326,1344,1345],{},"--cffy-icon-wrap-color",[326,1347,1348],{},"--cffy-primary-a10",[326,1350,1351],{},"--cffy-icon-wrap-tint-alpha",[326,1353,1354],{},"10%",", the strength of\nthe colored variants' tint). Sizes keep their own padding and corners, and\ncolored variants their own colors.",[353,1357,1358,359,1361,1363,1364,1367,1368,1371,1372,1375,1376,1379,1380,392],{},[356,1359,1360],{},"Icon-only tabs.",[326,1362,594],{}," takes ",[326,1365,1366],{},"iconOnly",": tabs with an ",[326,1369,1370],{},"icon"," render as\nsquare icon buttons (",[326,1373,1374],{},".tabs-icon-only","), with the label kept as visually\nhidden text for screen readers and a native ",[326,1377,1378],{},"title"," tooltip. See\n",[335,1381,1383],{"href":1382},"\u002Fcolorffy-ui\u002Fcomponents\u002Ftabs#icon-only-tabs","Tabs → Icon-only tabs",[353,1385,1386,359,1389,1392,1393,1165,1396,1182,1399,1186,1402,1182,1405,1408,1409,392],{},[356,1387,1388],{},"State layer tokens.",[326,1390,1391],{},"--cffy-state-layer-color"," (default\n",[326,1394,1395],{},"--cffy-primary-base",[326,1397,1398],{},"--cffy-state-hover-opacity",[326,1400,1401],{},"8%",[326,1403,1404],{},"--cffy-state-pressed-opacity",[326,1406,1407],{},"12%",") set the hover and pressed background of\nevery interactive surface in one place. See\n",[335,1410,1412],{"href":1411},"\u002Fcolorffy-css\u002Fcustomization#hover-and-pressed-states","Customization → Hover and pressed states",[353,1414,1415,1418,1419,1422,1423,1426,1427,1430,1431,1434,1435,329,1438,1441,1442,392],{},[356,1416,1417],{},"Container tokens for tinted surfaces."," For primary, secondary, accent,\nsuccess, warning, danger, info and muted, ",[326,1420,1421],{},"--cffy-\u003Ccolor>-container"," is the\ntinted surface (a pale tint in light mode, a dark one in dark mode) and\n",[326,1424,1425],{},"--cffy-on-\u003Ccolor>-container"," the text and icon color on it, so a custom\ntonal block takes two tokens. Tonal buttons, badges and alerts paint the\npair; the ",[326,1428,1429],{},".text-*-emphasis"," utilities and the active navbar, popover-menu\nand list states read the text token. ",[326,1432,1433],{},"--cffy-on-primary-container"," existed\nbefore as plain black or white and was unused; it now carries the primary\ntint. The ",[326,1436,1437],{},".bg-\u003Ccolor>-container",[326,1439,1440],{},".text-on-\u003Ccolor>-container"," utilities\napply them. See ",[335,1443,1444],{"href":112},"Tonal tokens",[353,1446,1447,1455,1456,1459],{},[356,1448,1449,359,1452,392],{},[326,1450,1451],{},"UiButtonMenuItem",[326,1453,1454],{},"keepOpen"," Items now close their menu when clicked (see\nFixed); set ",[326,1457,1458],{},"keep-open"," on an item that toggles a setting or opens a further\nstep so the menu stays put.",[353,1461,1462,1473,1474,1477,1478,1481,1482,1485,1486,1489,1490,1493,1494,1496,1497,1500,1501,392],{},[356,1463,1464,401,1467,329,1470,392],{},[326,1465,1466],{},"UiInputPassword",[326,1468,1469],{},"UiInputSearch",[326,1471,1472],{},"UiInputTags"," A password field\nwith a show\u002Fhide toggle (",[326,1475,1476],{},"v-model:revealed","), a search field with a clear\nbutton that emits ",[326,1479,1480],{},"search"," on Enter and ",[326,1483,1484],{},"clear"," on clear or Esc, and a tags\nfield that keeps a ",[326,1487,1488],{},"string[]"," (Enter or a separator adds, Backspace removes,\npasted lines split, ",[326,1491,1492],{},"max"," caps the count, and a duplicate or a tag past ",[326,1495,1492],{},"\nis announced and emitted as ",[326,1498,1499],{},"reject","). They take the shared input props. See\n",[335,1502,211],{"href":1503},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#password-search-and-tags",[353,1505,1506,359,1509,1363,1512,1515,1516,329,1519,1522,1523,1526,1527,1530,1531,1534,1535,1537,1538,392],{},[356,1507,1508],{},"Inline input adornments.",[326,1510,1511],{},"UiInputText",[326,1513,1514],{},"adornments=\"inline\"",", which\nputs the ",[326,1517,1518],{},"#prefix",[326,1520,1521],{},"#suffix"," slots inside the field (",[326,1524,1525],{},".input-group-inline",")\nfor icons and icon buttons, and ",[326,1528,1529],{},"autocomplete",", which reaches the field\ninstead of the wrapper. The tags field is ",[326,1532,1533],{},".form-tags",", which reads the\n",[326,1536,1015],{}," variables plus ",[326,1539,1540],{},"--cffy-input-tags-gap",[353,1542,1543,359,1546,1549,1550,1553,1554,1557,1558,392],{},[356,1544,1545],{},"Inverse color tokens.",[326,1547,1548],{},"--cffy-\u003Ccolor>-inverse"," (primary, secondary,\naccent, success, warning, danger, info and muted) is the color to use on an\ninverse surface such as a toast, snackbar or tooltip, which is dark in light\nmode and light in dark mode. It takes the light brand tone in light mode and\nthe dark one in dark mode, kept light or dark enough to read on any brand\ncolor; browsers without relative color syntax use the plain brand tones. The\n",[326,1551,1552],{},".text-\u003Ccolor>-inverse"," utilities apply them, and the ",[326,1555,1556],{},"inverse-color()"," SCSS\nfunction builds one. See ",[335,1559,1444],{"href":112},[353,1561,1562,359,1565,1568,1569,1572,1573,1576,1577,392],{},[356,1563,1564],{},"Container width scale.",[326,1566,1567],{},"--cffy-container-3xs"," (16rem) to ",[326,1570,1571],{},"--cffy-container-7xl","\n(80rem) give component widths one t-shirt scale, and ",[326,1574,1575],{},"max-w-{size}"," utilities\nread the same steps. The sidebar, popovers, popover menu, toasts and dialogs\ntake their widths from it, so one token resizes everything on that step. See\n",[335,1578,1580],{"href":1579},"\u002Fcolorffy-css\u002Fcustomization#container-widths","Customization → Container widths",[353,1582,1583,1588,1589,1592,1593,1596,1597,1600,1601,1604,1605,1608,1609,329,1612,1615,1616,392],{},[356,1584,1585,1586,392],{},"Utility columns in ",[326,1587,994],{}," Columns take ",[326,1590,1591],{},"hideLabel",", which keeps\nthe label for screen readers but hides it in the header, ",[326,1594,1595],{},"hideable: false",",\nwhich keeps the column on screen and out of the column manager, and ",[326,1598,1599],{},"fit",",\nwhich sizes it to its content through the new ",[326,1602,1603],{},".table-col-fit"," class. A\ncolumn with an empty ",[326,1606,1607],{},"label"," is no longer listed in the column manager as a\nblank row, and an always-visible column no longer counts toward the one\ncolumn the manager keeps on screen. The ",[326,1610,1611],{},"column-manager",[326,1613,1614],{},"column-toggle","\nslots receive only the hideable columns. See\n",[335,1617,191],{"href":1618},"\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable#hide-align-and-manage-columns",[353,1620,1621,1626,1627,1630,1631,1634,1635,329,1638,1641,1642,1645,1646,1649,1650,1652,1653,1656,1657,1660,1661,1664,1665,1668,1669,401,1672,401,1674,401,1677,700,1680,1683,1684,392],{},[356,1622,1623,392],{},[326,1624,1625],{},"UiPagination"," Page buttons in a ",[326,1628,1629],{},"\u003Cnav>",", bound with ",[326,1632,1633],{},"v-model:page",",\nsized from ",[326,1636,1637],{},"total",[326,1639,1640],{},"pageSize"," or from ",[326,1643,1644],{},"totalPages",". Long ranges collapse\naround the current page (",[326,1647,1648],{},"siblingCount",") with a fixed number of buttons, and\nbelow 600px, or with ",[326,1651,370],{},", the numbers give way to ",[326,1654,1655],{},"Page 3 of 12",".\n",[326,1658,1659],{},"showEdges"," adds first and last buttons, ",[326,1662,1663],{},"labels"," translates the text, and\npage moves are announced. The ",[326,1666,1667],{},".pagination"," classes read\n",[326,1670,1671],{},"--cffy-pagination-gap",[326,1673,496],{},[326,1675,1676],{},"-current-bg-color",[326,1678,1679],{},"-current-color",[326,1681,1682],{},"-status-color",". See ",[335,1685,244],{"href":245},[353,1687,1688,359,1691,1363,1693,700,1696,1698,1699,1701,1702,392],{},[356,1689,1690],{},"Datatable pagination.",[326,1692,994],{},[326,1694,1695],{},"pagination: { pageSize }",[326,1697,1633],{},": it sorts every row, shows one page and renders a\n",[326,1700,1625],{}," under the table. Select-all covers the current page, and the\npage goes back to 1 when the sort, the page size or the row count changes.\nSee ",[335,1703,191],{"href":1704},"\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable#split-rows-into-pages",[353,1706,1707,1712,1713,428,1716,329,1719,1722,1723,1726,1727,1730,1731,401,1734,1737,1738,1741,1742,1745,1746,1749,1750,829,1753,1756,1757,1760,1761,1763,1764,1767,1768,1770,1771,401,1774,1165,1777,1780,1781,1784,1785,392],{},[356,1708,1709,392],{},[326,1710,1711],{},"UiInputCombobox"," A field that picks one value from a list you can\nsearch, a native replacement for a filterable select. It takes ",[326,1714,1715],{},"options",[326,1717,1718],{},"optionLabel",[326,1720,1721],{},"optionValue"," like ",[326,1724,1725],{},"UiInputSelect",", plus ",[326,1728,1729],{},"optionGroup","\nfor headings, ",[326,1732,1733],{},"optionDisabled",[326,1735,1736],{},"clearable"," and an ",[326,1739,1740],{},"#option"," slot. Typing\nfilters by label, ignoring case and accents; ",[326,1743,1744],{},":filterable=\"false\""," makes\nit select-only with type-to-jump. The keyboard follows the WAI-ARIA\ncombobox pattern, with focus kept in the field. The list is a\n",[326,1747,1748],{},"popover"," placed with CSS anchor positioning, so it opens over dialogs and\noutside clipping containers and flips above the field when needed;\nbrowsers without anchor positioning get the same placement from a small\nscript. It's styled by the new ",[326,1751,1752],{},".listbox-popup",[326,1754,1755],{},".listbox-option","\nclasses and ",[326,1758,1759],{},"--cffy-listbox-*"," variables, and ",[326,1762,1525],{}," now\nfits a second suffix. With ",[326,1765,1766],{},"remote"," the server filters: typing emits\n",[326,1769,1480],{}," after a pause (",[326,1772,1773],{},"searchDelay",[326,1775,1776],{},"minSearchLength",[326,1778,1779],{},"loading"," shows\na searching row, results are announced, and a picked option keeps its\nlabel across searches. ",[326,1782,1783],{},"freeText"," keeps typed text that isn't an option.\nSee ",[335,1786,1788],{"href":1787},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#combobox","Inputs → Combobox",[353,1790,1791,1796,1797,1799,1800,1803,1804,1807,1808,1810,1811,329,1814,1817,1818,1820,1821,1823,1824,401,1827,1830,1831,392],{},[356,1792,1793,392],{},[326,1794,1795],{},"UiInputMultiSelect"," The same searchable list for several values, a\nnative replacement for a multi-select. The model is an array in pick\norder; the field shows a removable chip per value like ",[326,1798,1472],{},"\n(Backspace removes the last), and past ",[326,1801,1802],{},"maxChips"," values a ",[326,1805,1806],{},"maxChipsLabel","\nsummary such as \"5 selected\" instead, so the field keeps to one row. The\nlist stays open while you pick, ",[326,1809,1492],{}," disables the\nother options once it's reached, and it emits ",[326,1812,1813],{},"add",[326,1815,1816],{},"remove",". It takes\nthe same ",[326,1819,1766],{}," search, and ",[326,1822,1783],{}," adds typed text through an\n\"Add “…”\" row (",[326,1825,1826],{},".listbox-option-create",[326,1828,1829],{},"--cffy-listbox-create-color","). See\n",[335,1832,1834],{"href":1833},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#multi-select","Inputs → Multi-select",[353,1836,1837,1842,1843,1846,1847,1850,1851,1854,1855,401,1858,1860,1861,1864,1865,1868,1869,1872,1873,1876,1877,1880,1881,1884,1885,1888,1889,392],{},[356,1838,1839,392],{},[326,1840,1841],{},"UiCalendar"," An inline month grid that picks one date, several dates\nor a range (",[326,1844,1845],{},"mode","), with ",[326,1848,1849],{},"Date"," values at midnight local time. It shows\none or more months side by side (",[326,1852,1853],{},"months","), honors ",[326,1856,1857],{},"min",[326,1859,1492],{}," and a\n",[326,1862,1863],{},"disabledDates"," callback, and takes month and weekday names and the first\nday of the week from the locale through ",[326,1866,1867],{},"Intl",". A pending range follows the\npointer, ",[326,1870,1871],{},"v-model:month"," controls the visible month, ",[326,1874,1875],{},"fluid"," fills the\ncontainer's width like a mobile app calendar, and the ",[326,1878,1879],{},"#day"," slot adds\ncontent such as dots. Keyboard navigation follows the WAI-ARIA date\ngrid (arrows, Home\u002FEnd, Page Up\u002FDown, Shift for years). The ",[326,1882,1883],{},".calendar","\nclasses read 15 ",[326,1886,1887],{},"--cffy-calendar-*"," variables, and days take the control\nshape. See ",[335,1890,176],{"href":177},[353,1892,1893,1898,1899,401,1901,1904,1905,1908,1909,1904,1912,1915,1916,1919,1920,1923,1924,401,1927,401,1930,1933,1934,1937,1938,1941,1942,1945,1946,1949,1950,1953,1954,1957,1958,1961,1962,700,1965,1105,1968,392],{},[356,1894,1895,392],{},[326,1896,1897],{},"UiInputDate"," A date field with a calendar popup, a native replacement\nfor PrimeVue's DatePicker. It holds a ",[326,1900,1849],{},[326,1902,1903],{},"{ start, end }"," with\n",[326,1906,1907],{},"mode=\"range\""," (written once both ends are picked) or a ",[326,1910,1911],{},"Date[]",[326,1913,1914],{},"mode=\"multiple\"",", and accepts dates typed in the locale's numeric order,\nseveral separated by commas. ",[326,1917,1918],{},"presets"," lists shortcuts built with the new\n",[326,1921,1922],{},"datePresets"," helpers (",[326,1925,1926],{},"lastDays(7)",[326,1928,1929],{},"lastMonths(6)",[326,1931,1932],{},"lastYear()",", …),\n",[326,1935,1936],{},"time"," adds hour and minute fields (or seconds, with ",[326,1939,1940],{},"minuteStep",") with a\nNow button, ",[326,1943,1944],{},"timeOptions"," lists time slots beside the calendar instead\n(",[326,1947,1948],{},"disabledTimes"," marks booked ones), ",[326,1951,1952],{},"confirm"," holds the picks until Apply\n(on by default with times, or for a range with presets), and\n",[326,1955,1956],{},"trigger=\"button\""," shows the matching preset (\"Last 7 days\") or the dates on\na button, with From and To fields in the popup. The popup is anchored like\nthe combobox list, Esc closes it without closing a dialog around it, and\nbelow 600px it becomes a bottom sheet with preset chips and stacked months.\nThe ",[326,1959,1960],{},".calendar-popup"," classes read 10 ",[326,1963,1964],{},"--cffy-calendar-popup-*",[326,1966,1967],{},"--cffy-calendar-preset-*",[335,1969,1971],{"href":1970},"\u002Fcolorffy-ui\u002Fcomponents\u002Finputs#date","Inputs → Date",[353,1973,1974,1977,1978,1981,1982,1985,1986,1989,1990,401,1993,329,1996,1999,2000,392],{},[356,1975,1976],{},"Shape roles."," Components take their corners from three tokens:\n",[326,1979,1980],{},"--cffy-shape-container"," (cards, dialogs, popovers, menus, alerts, lists),\n",[326,1983,1984],{},"--cffy-shape-field"," (inputs, selects, the file drop zone) and\n",[326,1987,1988],{},"--cffy-shape-control"," (buttons, chips, toggle buttons, sidebar items). Set\nthe three to make the whole interface sharp, soft or pill-shaped at runtime;\nnested and tall shapes derive from them, and badges and avatars stay round.\n",[326,1991,1992],{},"$shape-container",[326,1994,1995],{},"$shape-field",[326,1997,1998],{},"$shape-control"," set the defaults in\nSCSS. See ",[335,2001,2003],{"href":2002},"\u002Fcolorffy-css\u002Fcustomization#shape-roles","Customization → Shape roles",[353,2005,2006,359,2009,2012,2013,2016,2017,2020,2021,700,2024,401,2027,2030,2031,2034,2035,2038,2039,392],{},[356,2007,2008],{},"Localization.",[326,2010,2011],{},"app.use(ColorffyUI, { locale, labels })",", the Nuxt\nmodule's ",[326,2014,2015],{},"colorffyUI: { locale, labels: 'es' }"," option or ",[326,2018,2019],{},"UiConfigProvider","\nset the locale and every text the components write on their own: button\nnames, the \"Optional\" hint, empty states, screen-reader announcements and\ndate names. English and Spanish ship as ",[326,2022,2023],{},"@colorffy\u002Fui\u002Flocales\u002Fen",[326,2025,2026],{},"@colorffy\u002Fui\u002Flocales\u002Fes",[326,2028,2029],{},"useColorffyConfig()"," switches language at\nruntime, and props such as ",[326,2032,2033],{},"clearLabel"," still override one component. Texts\nwith placeholders can also be functions of their values (",[326,2036,2037],{},"LabelTemplate","),\nfor singular and plural wording such as the Spanish pack's \"1 seleccionado\".\nSee ",[335,2040,303],{"href":304},[353,2042,2043,2046,2047,401,2050,401,2053,401,2056,428,2059,401,2062,2065,2066,2069,2070,2073,2074,2077,2078,1286,2081,2083,2084,401,2087,2090,2091,392],{},[356,2044,2045],{},"Vue transitions."," Pass ",[326,2048,2049],{},"fade",[326,2051,2052],{},"slide-up",[326,2054,2055],{},"slide-down",[326,2057,2058],{},"slide-start",[326,2060,2061],{},"slide-end",[326,2063,2064],{},"scale"," or ",[326,2067,2068],{},"list"," as the ",[326,2071,2072],{},"name"," of a ",[326,2075,2076],{},"\u003CTransition>"," or\n",[326,2079,2080],{},"\u003CTransitionGroup>",[326,2082,2068],{}," also moves the items that stay. They share six\nvariables for duration, easing, distance and scale\n(",[326,2085,2086],{},"--cffy-transition-enter-duration",[326,2088,2089],{},"--cffy-transition-distance",", …), and\nreduced motion keeps the fade without the movement. See\n",[335,2092,2094],{"href":2093},"\u002Fcolorffy-css\u002Futilities\u002Feffects#transitions","Effects → Transitions",[353,2096,2097,359,2100,2103,2104,2107,2108,2111,2112,2115,2116,392],{},[356,2098,2099],{},"Keyboard navigation in menus.",[326,2101,2102],{},"UiButtonMenu"," follows the WAI-ARIA menu\nbutton pattern: ↓ or ↑ on the button opens the menu on its first or last\nitem, ↑ and ↓ move between items and wrap, Home and End jump to the ends, and\na letter moves to the next item starting with it. → opens a\n",[326,2105,2106],{},"UiButtonMenuSubmenu"," on its first item and ← closes it, Tab closes the menu\nand moves on, and an item picked from the keyboard gives focus back to the\nbutton. The panel is a ",[326,2109,2110],{},"role=\"menu\""," of menu items and separators.\n",[326,2113,2114],{},"UiPopoverMenu"," takes the same arrow, Home, End and letter keys. See\n",[335,2117,2119],{"href":2118},"\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-menu#keyboard","Button Menu → Keyboard",[353,2121,2122,2129,2130,2133],{},[356,2123,2124,359,2126,392],{},[326,2125,1451],{},[326,2127,2128],{},"checked"," Makes the item a menu checkbox\n(",[326,2131,2132],{},"role=\"menuitemcheckbox\"",") and sets its state. The datatable's column\nmanager uses it, so screen readers announce which columns are shown.",[353,2135,2136,359,2142,2145,2146,1182,2148,2151,2152,392],{},[356,2137,2138,2141],{},[326,2139,2140],{},"autofocus"," on a field in a modal.",[326,2143,2144],{},"UiModal"," focuses the control of a\nfield component marked ",[326,2147,2140],{},[326,2149,2150],{},"\u003CUiInputText autofocus>",") when it\nopens. The attribute lands on the component's wrapper, and browsers only\nautofocus an element that takes focus itself, so the modal opened on its\nfirst button instead. See ",[335,2153,230],{"href":2154},"\u002Fcolorffy-ui\u002Fcomponents\u002Fmodal#start-in-a-field",[345,2156,2158],{"id":2157},"changed","Changed",[350,2160,2161,2185,2199,2215,2243,2261,2313,2357,2370,2391,2467,2482,2500,2512,2551,2578,2606,2624,2672,2726,2781,2808,2830,2839,2851,2865,2894,2920,2933,2941,2958],{},[353,2162,2163,2171,2172,2174,2175,2177,2178,2180,2181,2184],{},[356,2164,2165,2167,2168,392],{},[326,2166,328],{}," doesn't install ",[326,2169,2170],{},"floating-vue"," It styles FloatingVue's\npoppers but doesn't need the package, so ",[326,2173,2170],{}," is an optional peer\nand CSS-only projects no longer get it; ",[326,2176,332],{}," still requires it.\n",[326,2179,332],{}," also declares ",[326,2182,2183],{},"@nuxt\u002Fkit",", which its Nuxt module imports, as\nan optional peer.",[353,2186,2187,2194,2195,2198],{},[356,2188,2189,2190,2193],{},"Mask shapes use the standard ",[326,2191,2192],{},"mask-image"," only."," Each shape declared its\nSVG twice, once for ",[326,2196,2197],{},"-webkit-mask-image",". The unprefixed property has worked\nin every major browser since December 2023 (Safari 15.4), so the prefixed\ncopies are gone, which halves the masks' minified size; Safari before 15.4\nshows the element without the shape.",[353,2200,2201,2204,2205,2208,2209,2212,2213,392],{},[356,2202,2203],{},"The sidebar's active-icon color is a public variable."," The leading icon of\nthe current-route item read ",[326,2206,2207],{},"--_drawer-active-color",", a private variable\nnothing declared. Set ",[326,2210,2211],{},"--cffy-sidebar-item-active-icon-color"," instead; see\n",[335,2214,308],{"href":680},[353,2216,2217,359,2220,2223,2224,1169,2227,2230,2231,2234,2235,2238,2239,2242],{},[356,2218,2219],{},"Small ranges scale their track and thumb.",[326,2221,2222],{},"size=\"sm\""," on ",[326,2225,2226],{},"UiInputRange",[326,2228,2229],{},".form-range.form-sm",") used to shrink only the field's height, leaving the\nfull-size track and thumb. It now also uses a ",[326,2232,2233],{},"0.5rem"," track and a\n",[326,2236,2237],{},"1.35rem"," × ",[326,2240,2241],{},"0.25rem"," thumb.",[353,2244,2245,2248,2249,2252,2253,2256,2257,2260],{},[356,2246,2247],{},"One hover and pressed background for every interactive surface."," Each\ncomponent used to pick its own surface token for hover (the card the overlay\nsurface, list items and dropdown items ",[326,2250,2251],{},"container-high",", tabs and the sidebar\n",[326,2254,2255],{},"container",", table rows ",[326,2258,2259],{},"surface-a10",", popover menu items a primary tint),\nso the same gesture looked different from one component to the next and\nbarely showed on some surfaces. List items, selectable and link cards,\naccordion headers, dropdown and popover-menu items, tabs, chips, table rows,\nthe file dropbox, and sidebar, navbar and menu-tools links now mix their own\nbackground with the primary color, the same tint the surface ramp is built\nfrom: 8% on hover, 12% while pressed or focused from the keyboard. Navbar, sidebar, popover-menu and menu-tools\nlinks gain that pressed state, accordions highlight only while the header\nitself is hovered, disabled list items no longer react to hover, and the\ndestructive popover-menu item and a file dropbox holding a valid file use a\ndanger or success layer.",[353,2262,2263,1145,2269,439,2272,2275,2276,2279,2280,2282,2283,2285,2286,2288,2289,2292,2293,700,2296,2299,2300,2302,2303,329,2306,2309,2310,2312],{},[356,2264,2265,2266,392],{},"Tonal ramps mix in ",[326,2267,2268],{},"oklab",[326,2270,2271],{},"a10",[326,2273,2274],{},"a90"," ramps, the surface ramp, the\ndisabled tokens, tonal button, badge and alert backgrounds, and the remaining\ncomponent mixes blended in ",[326,2277,2278],{},"srgb",". They now mix in ",[326,2281,2268],{},", like the state\nlayer and text selection, with the percentages retuned so each token keeps\nits lightness: nothing moves more than about 0.03 ΔE in OKLab, and the\ndeepest light-mode steps come out a touch darker. Light tonal backgrounds are\nslightly less saturated, since ",[326,2284,2268],{}," doesn't add the extra chroma ",[326,2287,2278],{},"\npicks up when mixing toward white. In dark mode\n",[326,2290,2291],{},"--cffy-tonal-dark-intensity"," now defaults to ",[326,2294,2295],{},"58%",[326,2297,2298],{},"--cffy-tonal-light-intensity"," to ",[326,2301,1401],{}," (were ",[326,2304,2305],{},"70%",[326,2307,2308],{},"15%","). Overridden\nintensities blend in ",[326,2311,2268],{}," too, so a custom dark-mode value comes out\ndarker than before; compare it against the new defaults.",[353,2314,2315,2318,2319,2299,2321,2324,2325,2327,2328,2330,2331,329,2334,2337,2338,2340,2341,2343,2344,2346,2347,2350,2351,2353,2354,392],{},[356,2316,2317],{},"Dark-mode tonal ramps darken step by step."," In dark mode the primary,\nsecondary and accent ramps darkened from ",[326,2320,2271],{},[326,2322,2323],{},"a80"," and then jumped back\nto a light tint at ",[326,2326,2274],{},", and the success, warning, danger, info and muted\nramps mixed toward white from an already light base, so they stayed\nnear-white with ",[326,2329,2274],{}," landing between ",[326,2332,2333],{},"a60",[326,2335,2336],{},"a70",". Every ramp now darkens\nfrom one step to the next in both modes, ",[326,2339,2274],{}," included; the light text tone\nit used to hold is ",[326,2342,1425],{},", which the library now reads\nwherever it read ",[326,2345,2274],{},". Filled semantic buttons darken on hover and press\ninstead of lightening, tonal backgrounds and bordered-badge borders come out\na step deeper, and ",[326,2348,2349],{},"--cffy-muted-a10"," (secondary text) is slightly dimmer. If\nyour own styles read ",[326,2352,2274],{}," as a text color, see\n",[335,2355,308],{"href":2356},"\u002Fmigration#update-tonal-colors",[353,2358,2359,359,2362,2365,2366,2369],{},[356,2360,2361],{},"Text on a brand color follows the brand color.",[326,2363,2364],{},"--cffy-on-\u003Ccolor>"," was\nfixed per color (white on primary, secondary, success, danger and info in\nlight mode, black in dark mode, always black on accent and warning), so a\nlight custom color kept white text unless you overrode it. Each one now\npicks black or white from the lightness of the solid fill the components\npaint, ",[326,2367,2368],{},"--cffy-\u003Ccolor>-a10",", whichever has more contrast, in both modes. In\nthe default theme, info fills switch to black text (white measured 3.1:1,\nblack measures 6.8:1). Values you set yourself still win. Browsers that\ncan't evaluate the calculation keep the fixed values: those without\nrelative color syntax, and Safari 16.4–17, which implements an older draft\nof it.",[353,2371,2372,2375,2376,2378,2379,2381,2382,329,2385,2388,2389,392],{},[356,2373,2374],{},"Tonal buttons step from their container."," Hover and pressed used to lower\n",[326,2377,2291],{}," by 10% and 20%, so a tonal button ignored any\nsurface you set. Each state now mixes the container 15% and 30% back toward\nthe fill, which matches the previous colors within ΔE 0.03 and carries an\noverridden ",[326,2380,1421],{}," through every state. For SCSS users,\n",[326,2383,2384],{},"btn-tonal()",[326,2386,2387],{},"container-tonal()"," now take the surface instead of\ncomputing it; see ",[335,2390,308],{"href":2356},[353,2392,2393,359,2400,401,2403,329,2405,2408,2409,2412,2413,2416,2417,2420,2421,2424,2425,1286,2428,329,2430,2433,2434,2437,2438,1286,2441,2443,2444,2437,2447,2450,2451,2453,2454,2457,2458,2461,2462,708,2464,392],{},[356,2394,2395,2396,2399],{},"Events drop the ",[326,2397,2398],{},"on"," prefix.",[326,2401,2402],{},"UiButton",[326,2404,2102],{},[326,2406,2407],{},"UiButtonTooltip","\nemit ",[326,2410,2411],{},"click"," (with the ",[326,2414,2415],{},"MouseEvent",") instead of ",[326,2418,2419],{},"onClick","; the inputs emit ",[326,2422,2423],{},"update","\ninstead of ",[326,2426,2427],{},"onUpdate",[326,2429,2144],{},[326,2431,2432],{},"UiConfirmModal"," emit ",[326,2435,2436],{},"close"," instead of\n",[326,2439,2440],{},"onCloseDialog",[326,2442,840],{}," emits ",[326,2445,2446],{},"optionClick",[326,2448,2449],{},"onOptionClick",". Vue adds ",[326,2452,2398],{}," itself when it builds a listener, so the old names\nhad to be written ",[326,2455,2456],{},"@on-click",", while a plain ",[326,2459,2460],{},"@click"," only worked because the\nnative click fell through. A disabled or loading button never emits ",[326,2463,2411],{},[335,2465,308],{"href":2466},"\u002Fmigration#rename-event-listeners",[353,2468,2469,359,2472,2475,2476,2479,2480,392],{},[356,2470,2471],{},"Sidebar width hook renamed.",[326,2473,2474],{},"--cffy-nav-drawer-width"," is now\n",[326,2477,2478],{},"--cffy-sidebar-width",", named like every other component hook; the default is\nstill 18rem. See ",[335,2481,308],{"href":680},[353,2483,2484,2487,2488,2491,2492,2495,2496,2499],{},[356,2485,2486],{},"Dialogs and toasts snap to the container scale."," Their widths moved to the\nnearest step: the confirm dialog tops out at 24rem (was 25rem), ",[326,2489,2490],{},"sm"," at 28rem\n(was 26rem), ",[326,2493,2494],{},"md"," at 42rem (was 40rem) and ",[326,2497,2498],{},"lg"," at 56rem (was 60rem), with\nminimums following the step below; the toast minimum is 18rem (was 300px).\nThe sidebar, side sheet, popover and popover menu keep their sizes.",[353,2501,2502,2507,2508,2511],{},[356,2503,2504,2506],{},[326,2505,994],{},"'s toolbar buttons use the default icon-button shape."," The\ncolumn toggle and column manager were small-radius squares (",[326,2509,2510],{},"shape-sm","); they\nnow use the same shape as any other icon button in the toolbar.",[353,2513,2514,359,2520,329,2522,2408,2524,2527,2528,833,2531,2534,2535,2527,2538,2541,2542,700,2545,2548,2549,392],{},[356,2515,2516,2517,392],{},"Tab and step selection works with ",[326,2518,2519],{},"v-model",[326,2521,594],{},[326,2523,615],{},[326,2525,2526],{},"update:activeTab"," instead of ",[326,2529,2530],{},"updateActiveTab",[326,2532,2533],{},"UiStepper"," emits\n",[326,2536,2537],{},"update:activeStep",[326,2539,2540],{},"updateActiveStep",", so ",[326,2543,2544],{},"v-model:active-tab",[326,2546,2547],{},"v-model:active-step"," keep the selection in sync. See\n",[335,2550,308],{"href":2466},[353,2552,2553,2559,2560,2563,2564,2567,2568,2571,2572,2574,2575,392],{},[356,2554,2555,2558],{},[326,2556,2557],{},"id"," renders as given."," Buttons, cards, accordions and link tooltips prefixed\nit (",[326,2561,2562],{},"button-save","), and inputs suffixed it on the field (",[326,2565,2566],{},"email-input-text","), so\nthe value you passed could not be used for anchors, ",[326,2569,2570],{},"\u003Clabel for>",", scripts or\ntests. The ",[326,2573,2557],{}," now lands unchanged on the main element. See\n",[335,2576,308],{"href":2577},"\u002Fmigration#use-the-ids-you-pass",[353,2579,2580,2583,2584,2587,2588,2591,2592,2595,2596,329,2599,2601,2602,2605],{},[356,2581,2582],{},"Spacing utilities follow the spacing tokens."," The margin, padding, flow,\nblock-spacing, position (",[326,2585,2586],{},"top-*"," …), translate and gap utilities compiled\nfixed ",[326,2589,2590],{},"rem"," values, so changing ",[326,2593,2594],{},"--cffy-space-unit"," rescaled components but left\nutilities behind. They now read ",[326,2597,2598],{},"--cffy-space-*",[326,2600,2594],{},": same class\nnames and the same values at the default unit, no markup changes. ",[326,2603,2604],{},"px"," stays a\n1px hairline.",[353,2607,2608,2611,401,2614,401,2617,329,2620,2623],{},[356,2609,2610],{},"Empty-state and loading titles use the paired line-height.",[326,2612,2613],{},"UiEmpty",[326,2615,2616],{},"UiLoading",[326,2618,2619],{},"UiShapeLoading",[326,2621,2622],{},"UiExpressiveLoading"," titles\nmoved from the legacy font-size classes to the t-shirt ones, which pair each\nsize with its line-height, so a 20px title's line box grows from 20–24px to\n28px. Icons keep their tight line box.",[353,2625,2626,2641,2642,2645,2646,700,2649,2651,2652,724,2655,829,2658,2661,2662,829,2665,829,2668,2671],{},[356,2627,2628,692,2631,401,2634,329,2637,2640],{},[326,2629,2630],{},"UiSidebar",[326,2632,2633],{},"header",[326,2635,2636],{},"body",[326,2638,2639],{},"footer"," slots render their regions.","\nThey used to place content inside ",[326,2643,2644],{},".drawer-content"," without a wrapper, so\nthey only worked when filled with the region components. Like ",[326,2647,2648],{},"UiCard",[326,2650,2144],{},", each slot now renders inside its own ",[326,2653,2654],{},".drawer-header",[326,2656,2657],{},".drawer-body",[326,2659,2660],{},".drawer-footer",", skipped when empty, with\n",[326,2663,2664],{},"headerClass",[326,2666,2667],{},"bodyClass",[326,2669,2670],{},"footerClass"," for extra classes.",[353,2673,2674,2677,2678,2681,2682,2685,2686,401,2689,2692,2693,428,2696,2692,2699,401,2702,2692,2705,2708,2709,2712,2713,2715,2716,2718,2719,2722,2723,392],{},[356,2675,2676],{},"Private variables are named after their hooks."," Every ",[326,2679,2680],{},"--_*"," variable\nfed by a public hook now carries that hook's name (",[326,2683,2684],{},"--_card-gutter-x"," →\n",[326,2687,2688],{},"--_card-padding-inline",[326,2690,2691],{},"--_nav-tabs-link-color"," → ",[326,2694,2695],{},"--_tabs-link-color",[326,2697,2698],{},"--_drawer-*",[326,2700,2701],{},"--_sidebar-*",[326,2703,2704],{},"--_form-*",[326,2706,2707],{},"--_input-*","), and the\n",[326,2710,2711],{},"--_color-pickerp-width"," typo is fixed. Rendering is unchanged. Private\nvariables were never public API, but if your CSS overrode one, set its\npublic hook instead; see\n",[335,2714,308],{"href":680},". ",[326,2717,994],{},"'s\n",[326,2720,2721],{},"stickyHeight"," now sets the public ",[326,2724,2725],{},"--cffy-table-sticky-max-height",[353,2727,2728,2734,2735,329,2738,2741,2742,2744,2745,1182,2748,2692,2751,2753,2754,2757,2758,2692,2761,401,2764,2685,2767,2770,2771,2773,2774,2777,2778,2780],{},[356,2729,2730,2731,392],{},"Every public custom property is namespaced with ",[326,2732,2733],{},"--cffy-"," Unprefixed\nnames like ",[326,2736,2737],{},"--space-*",[326,2739,2740],{},"--theme-*"," could collide with other libraries on\nthe same page. The semantic ",[326,2743,2740],{}," tokens now use the namespace in\nplace of ",[326,2746,2747],{},"theme-",[326,2749,2750],{},"--theme-primary-a10",[326,2752,1348],{},"), and every\nother public token, component variable, animated ",[326,2755,2756],{},"@property"," and internal\nanchor name gains it (",[326,2759,2760],{},"--space-16",[326,2762,2763],{},"--cffy-space-16",[326,2765,2766],{},"--card-bg-color",[326,2768,2769],{},"--cffy-card-bg-color","). Private ",[326,2772,2680],{}," variables are unchanged, and the\nunused ",[326,2775,2776],{},"$property-prefix"," SCSS variable is gone. See the ",[335,2779,337],{"href":680},"\nfor the find-and-replace.",[353,2782,2783,2791,2792,2795,2796,2798,2799,2801,2802,359,2804,2807],{},[356,2784,2785,2787,2788,2790],{},[326,2786,332],{}," declares ",[326,2789,328],{}," as an optional peer dependency.","\nThe components set ",[326,2793,2794],{},"--cffy-*"," variables that only ",[326,2797,328],{}," 3.x reads,\nso pairing UI 3.0 with CSS 2.x left them without effect and without a\nwarning. ",[326,2800,332],{}," now lists ",[326,2803,328],{},[326,2805,2806],{},"^3.0.0"," as an optional\npeer, so package managers warn about a mismatched version and still install\nUI on its own.",[353,2809,2810,2813,2814,2817,2818,2821,2822,2825,2826,2829],{},[356,2811,2812],{},"Groups of text buttons sit closer."," A ",[326,2815,2816],{},".btn-group"," whose buttons are all\n",[326,2819,2820],{},".btn-text"," uses a ",[326,2823,2824],{},"--cffy-space-4"," gap instead of the 12px \u002F 8px one. A text\nbutton has no visible edge, so its padding already spaces it and the wider\ngap pushed the icons apart. Text-button toolbars, including the datatable's\nwhen its slots and ",[326,2827,2828],{},"toolbarButton"," use the text variant, now match the\nspacing of a hand-built icon row. Groups that mix in any other variant keep\nthe wider gap.",[353,2831,2832,2835,2836,2838],{},[356,2833,2834],{},"The datatable's column manager stays open while you toggle columns."," Each\npick used to close the menu, so hiding three columns took three trips. Its\nitems now keep the menu open (",[326,2837,1454],{},"); click outside or press Esc to\nclose it.",[353,2840,2841,359,2844,2847,2848,392],{},[356,2842,2843],{},"Selected table rows are tinted.",[326,2845,2846],{},"--cffy-table-selected-bg-color","\ndefaulted to the page background, so a selected row looked almost the same\nas the others in light mode. It now defaults to ",[326,2849,2850],{},"--cffy-primary-container",[353,2852,2853,2856,2857,2860,2861,2864],{},[356,2854,2855],{},"Radius settings reach the related parts."," With the shape roles, a\n",[326,2858,2859],{},"$form-border-radius"," you set also shapes the file drop zone, input-group\nadornments and checkboxes (half the field radius), and ",[326,2862,2863],{},"$button-border-radius","\nshapes the floating action button (twice the button radius). They used\nfixed radii before. The defaults look the same.",[353,2866,2867,359,2870,692,2872,2875,2876,2879,2880,2883,2884,2886,2887,2890,2891,392],{},[356,2868,2869],{},"Menu buttons have no default tooltip.",[326,2871,2102],{},[326,2873,2874],{},"tooltipText","\ndefaulted to ",[326,2877,2878],{},"'menu'",", so every menu button without one showed a lowercase\nEnglish \"menu\" tooltip, text buttons included. The tooltip now only shows\nwhen you pass ",[326,2881,2882],{},"tooltip-text",", and an icon-only trigger without a ",[326,2885,1378],{}," or\ntooltip is named by the new ",[326,2888,2889],{},"buttonMenu.ariaLabel"," label (\"Menu\", \"Menú\"). See\nthe ",[335,2892,337],{"href":2893},"\u002Fmigration#menu-buttons-have-no-default-tooltip",[353,2895,2896,2899,2900,2902,2903,2905,2906,2909,2910,2912,2913,2915,2916,2919],{},[356,2897,2898],{},"Every part follows the shape roles."," A few parts kept a fixed step of the\nradius scale, so a sharp or pill theme left them behind. Navbar links, tab\nlinks, ",[326,2901,1299],{},", breadcrumb links and the navbar initials now take\n",[326,2904,1988],{},"; tables, ",[326,2907,2908],{},"\u003Cdetails>",", list and timeline icons and\nimages, icon tiles and the headless dialog icon follow\n",[326,2911,1980],{},", never rounder than before; skeletons follow the\nfield role; and the mobile dropdown sheet and the navigation drawer round at\ntwice the container radius, like bottom sheets. Icon buttons, carousel\narrows, the alert close and chip remove buttons, progress bars, the\nnavigation bar indicator and the ends of connected button groups stay round\nunless ",[326,2914,1988],{}," is ",[326,2917,2918],{},"0",", and the pill tabs track no longer keeps\nrounded corners around square pills. With the default roles everything looks\nthe same; the dropdown sheet and drawer round at 24px instead of 25px.",[353,2921,2922,2928,2929,2932],{},[356,2923,2924,2925,392],{},"The shape loader's angle is ",[326,2926,2927],{},"--cffy-shape-loading-angle"," It was\n",[326,2930,2931],{},"--cffy-shape-angle",", which now reads like a shape role.",[353,2934,2935,359,2938,2940],{},[356,2936,2937],{},"Toggle buttons are named by their content.",[326,2939,840],{}," named\neach option \"Pro (selected)\", repeating the state its radio role already\nannounces, and its badge \"Tier: Save 20%\". Options now take their name from\ntheir title, text and badge.",[353,2942,2943,359,2946,2949,2950,2953,2954,2957],{},[356,2944,2945],{},"The dark-mode danger color is a clear red.",[326,2947,2948],{},"--cffy-color-brand-danger-50",",\nthe danger base in dark mode, was ",[326,2951,2952],{},"oklch(90% 0.04 12)",", a pale pink that\nerror text and borders barely set apart from white. It's now\n",[326,2955,2956],{},"oklch(80% 0.11 20)",", about 7:1 against dialogs and 9:1 against the page.",[353,2959,2960,2963,2964,2966],{},[356,2961,2962],{},"Active navbar links keep their size."," The current-page link widened its\ninline padding to ",[326,2965,2763],{}," and turned extra bold, which pushed the\nlinks beside it. It now only changes its background and color.",[345,2968,2970],{"id":2969},"removed","Removed",[350,2972,2973,2992,3034,3097,3117,3161,3177,3190,3206,3238,3254,3281,3293,3309,3345,3365,3395,3437,3461,3598],{},[353,2974,2975,2986,2987,2989,2990,392],{},[356,2976,2977,401,2980,700,2983,392],{},[326,2978,2979],{},"--cffy-on-primary-inverse",[326,2981,2982],{},"--cffy-on-secondary-inverse",[326,2984,2985],{},"--cffy-on-accent-inverse"," They held the same value as\n",[326,2988,1178],{}," and nothing in the library read them. See\n",[335,2991,308],{"href":2356},[353,2993,2994,2997,2998,3001,3002,428,3005,3001,3008,329,3011,3014,3015,3018,3019,3022,3023,401,3026,3029,3030,392],{},[356,2995,2996],{},"Legacy font-size tokens and classes."," The ordinal ",[326,2999,3000],{},"--fs-100"," … ",[326,3003,3004],{},"--fs-600",[326,3006,3007],{},"--fs-sm-100",[326,3009,3010],{},"--fs-sm-500",[326,3012,3013],{},"--fs-xl-100"," tokens and their ",[326,3016,3017],{},".fs-*","\nclasses, deprecated since 2.5, are gone. Use the t-shirt scale (",[326,3020,3021],{},"--cffy-fs-4xs"," …\n",[326,3024,3025],{},"--cffy-fs-5xl",[326,3027,3028],{},".fs-base",", …); the t-shirt classes also set the paired\nline-height. See the\n",[335,3031,3033],{"href":3032},"\u002Fmigration#clear-the-2x-deprecations","rename table",[353,3035,3036,359,3039,829,3042,829,3045,3048,3049,3052,3053,401,3056,401,3059,401,3062,401,3065,401,3068,428,3071,401,3074,401,3077,401,3080,3083,3084,3087,3088,829,3091,3094,3095,392],{},[356,3037,3038],{},"Deprecated SCSS variables.",[326,3040,3041],{},"$space-1",[326,3043,3044],{},"$space-2",[326,3046,3047],{},"$space-3"," (use\n",[326,3050,3051],{},"var(--cffy-space-16\u002F32\u002F48)",") and the color and font variables deprecated in 2.8\n(",[326,3054,3055],{},"$primary",[326,3057,3058],{},"$secondary",[326,3060,3061],{},"$accent",[326,3063,3064],{},"$success",[326,3066,3067],{},"$warning",[326,3069,3070],{},"$danger",[326,3072,3073],{},"$info",[326,3075,3076],{},"$muted",[326,3078,3079],{},"$primary-colors",[326,3081,3082],{},"$font-*",") are gone. Nothing read them;\na ",[326,3085,3086],{},"@forward … with (…)"," that still sets one now fails to compile, so drop it\nand set the ",[326,3089,3090],{},"--cffy-color-brand-*",[326,3092,3093],{},"--cffy-font-*"," tokens instead. See\n",[335,3096,308],{"href":3032},[353,3098,3099,3104,3105,3108,3109,3112,3113,3116],{},[356,3100,3101,392],{},[326,3102,3103],{},"ISegmentedTab.position"," Ignored since the segmented pill started\nreading the active tab's real geometry; the field is gone and\n",[326,3106,3107],{},"ISegmentedTab"," is now an alias of ",[326,3110,3111],{},"ITabItem",". Delete ",[326,3114,3115],{},"position"," from your\nitems.",[353,3118,3119,359,3128,428,3131,401,3134,329,3137,3140,3141,3143,3144,2715,3147,3149,3150,3153,3154,3157,3158,392],{},[356,3120,3121,3123,3124,3127],{},[326,3122,2114],{},"'s identity props and ",[326,3125,3126],{},"body-extra"," slot.",[326,3129,3130],{},"user",[326,3132,3133],{},"avatarUrl",[326,3135,3136],{},"avatarCustomClass",[326,3138,3139],{},"subtitle"," rendered nothing since the\nheader became a title plus the close button; put the identity in the ",[326,3142,2633],{},"\nslot with ",[326,3145,3146],{},"UiPopoverMenuUser",[326,3148,3126],{}," is gone too: to add rows to a\n",[326,3151,3152],{},"menuItems"," menu, render the body yourself in ",[326,3155,3156],{},"#body",". See the\n",[335,3159,337],{"href":3160},"\u002Fmigration#replace-removed-props-slots-and-components",[353,3162,3163,3172,3173,3176],{},[356,3164,3165,692,3168,3171],{},[326,3166,3167],{},"UiInputFile",[326,3169,3170],{},"large"," prop."," Use ",[326,3174,3175],{},"size=\"lg\"",", which every input\nshares, for the taller dropbox.",[353,3178,3179,3172,3187,392],{},[356,3180,3181,692,3184,3171],{},[326,3182,3183],{},"BaseSkeleton",[326,3185,3186],{},"isThumbnail",[326,3188,3189],{},"variant=\"thumbnail\"",[353,3191,3192,3199,3200,3203,3204,392],{},[356,3193,3194,692,3196,3127],{},[326,3195,2613],{},[326,3197,3198],{},"#button"," The legacy fallback inside ",[326,3201,3202],{},"#action"," is\ngone; rename the slot to ",[326,3205,3202],{},[353,3207,3208,3224,3225,428,3228,329,3230,3233,3234,3157,3236,392],{},[356,3209,3210,401,3213,329,3216,3219,3220,329,3222,392],{},[326,3211,3212],{},"UiSidebarHeader",[326,3214,3215],{},"UiSidebarBody",[326,3217,3218],{},"UiSidebarFooter",", and the default\nslots of ",[326,3221,2630],{},[326,3223,2114],{}," Panel components now take their\nregions through named slots only. Move sidebar regions into ",[326,3226,3227],{},"#header",[326,3229,3156],{},[326,3231,3232],{},"#footer",", and a menu's default-slot content into ",[326,3235,3156],{},[335,3237,337],{"href":3160},[353,3239,3240,3247,3248,3251,3252,392],{},[356,3241,3242,692,3244,3171],{},[326,3243,840],{},[326,3245,3246],{},"groupLabel"," It was declared but never\nrendered; ",[326,3249,3250],{},"ariaLabel"," names the group. See the\n",[335,3253,337],{"href":3160},[353,3255,3256,3266,3267,3269,3270,3272,3273,329,3275,3278,3279,392],{},[356,3257,3258,692,3260,329,3262,3265],{},[326,3259,2402],{},[326,3261,2874],{},[326,3263,3264],{},"placement"," props."," They came from the\nprops every button shares, but ",[326,3268,2402],{}," never showed a tooltip. Use\n",[326,3271,2407],{},"; it, ",[326,3274,2102],{},[326,3276,3277],{},"UiLinkTooltip"," keep both. See the\n",[335,3280,337],{"href":3160},[353,3282,3283,3290,3291,392],{},[356,3284,3285,692,3287,3171],{},[326,3286,2114],{},[326,3288,3289],{},"auth"," It was declared but never read. See the\n",[335,3292,337],{"href":3160},[353,3294,3295,3302,3303,3306,3307,392],{},[356,3296,3297,692,3299,3171],{},[326,3298,2144],{},[326,3300,3301],{},"isHeadless"," It was declared but never read;\n",[326,3304,3305],{},"mode=\"headless\""," gives the headless layout. See the\n",[335,3308,337],{"href":3160},[353,3310,3311,3325,3326,3328,3329,3331,3332,3334,3335,3338,3339,3342,3343,392],{},[356,3312,3313,692,3315,401,3318,329,3321,3324],{},[326,3314,994],{},[326,3316,3317],{},"skeletonCols",[326,3319,3320],{},"skeletonColExpanded",[326,3322,3323],{},"isExpanded","\nprops."," The loading skeleton always drew one cell per visible column and\nignored ",[326,3327,3317],{},", while ",[326,3330,3323],{}," swapped in ",[326,3333,3320],{},"\ncells that no longer matched the header. The skeleton now always matches the\nvisible columns; ",[326,3336,3337],{},"skeletonRows"," still sets the row count. ",[326,3340,3341],{},"UiTableSkeleton","\nkeeps these props for standalone use. See the\n",[335,3344,337],{"href":3160},[353,3346,3347,359,3354,3357,3358,3361,3362,392],{},[356,3348,3349,3350,3353],{},"The ",[326,3351,3352],{},".menu-tools"," mega menu.",[326,3355,3356],{},".menu-tools-container"," and its tabs, tool\ngrid and call-to-action cards served one app's navigation, and no component\nrendered them. They are gone, along with ",[326,3359,3360],{},".navbar:has(.menu-tools-visible)",".\nSee the ",[335,3363,337],{"href":3364},"\u002Fmigration#replace-the-removed-styles",[353,3366,3367,3372,3373,401,3375,401,3378,428,3381,3384,3385,3388,3389,3392,3393,392],{},[356,3368,3369,392],{},[326,3370,3371],{},".pwa-alert-container"," The PWA install\u002Foffline prompt\n(",[326,3374,3371],{},[326,3376,3377],{},".pwa-content",[326,3379,3380],{},".pwa-content-text-wrapper",[326,3382,3383],{},".pwa-actions",") served one app and no component rendered it. Build the prompt\nfrom ",[326,3386,3387],{},"UiAlert"," with ",[326,3390,3391],{},"type=\"snackbar\""," and actions. See the\n",[335,3394,337],{"href":3364},[353,3396,3397,3405,3406,1182,3408,3410,3411,3414,3415,401,3417,401,3420,329,3423,3426,3427,3430,3431,3434,3435,392],{},[356,3398,3399,329,3402,392],{},[326,3400,3401],{},".segmented-control",[326,3403,3404],{},".ripple"," The legacy two-segment\n",[326,3407,3401],{},[326,3409,615],{}," uses ",[326,3412,3413],{},".tab-segmented-control",")\nand ",[326,3416,3404],{},[326,3418,3419],{},".ripple-dark",[326,3421,3422],{},".ripple-primary",[326,3424,3425],{},".ripple-secondary"," are\ngone, along with ",[326,3428,3429],{},"_button-effects.scss",". The ",[326,3432,3433],{},"ripple-color()"," mixin stays. See\nthe ",[335,3436,337],{"href":3364},[353,3438,3439,359,3442,3445,3446,3449,3450,428,3452,329,3454,3456,3457,392],{},[356,3440,3441],{},"The PrimeVue skin.",[326,3443,3444],{},"scss\u002Fcomponents\u002F_prime.scss",", which styled\nPrimeVue's MultiSelect, Select, ColorPicker, Toast, ConfirmDialog and\nInputSwitch and set its ",[326,3447,3448],{},"--p-*"," tokens, is gone. ",[326,3451,1711],{},[326,3453,1795],{},[326,3455,1897],{}," replace Select, MultiSelect,\nAutoComplete and DatePicker; see the\n",[335,3458,3460],{"href":3459},"\u002Fmigration#replace-primevue-components","PrimeVue migration",[353,3462,3463,3466,3467,3592,3595,3596,392],{},[356,3464,3465],{},"Unused helpers."," Nothing in Colorffy UI used these:",[350,3468,3469,3480,3493,3529,3554,3561,3578],{},[353,3470,3471,401,3474,329,3477,392],{},[326,3472,3473],{},".hover-rotate",[326,3475,3476],{},".hover-scale",[326,3478,3479],{},".vr",[353,3481,3482,329,3485,3488,3489,3492],{},[326,3483,3484],{},".placeholder-list",[326,3486,3487],{},".placeholder-loader",", whose ",[326,3490,3491],{},"placeholderLoading","\nanimation never existed.",[353,3494,3349,3495,401,3498,401,3501,401,3504,401,3507,428,3510,401,3513,401,3516,401,3519,428,3522,329,3525,3528],{},[326,3496,3497],{},"pulse",[326,3499,3500],{},"glitch",[326,3502,3503],{},"shake-x",[326,3505,3506],{},"shake-y",[326,3508,3509],{},"fade-in-left",[326,3511,3512],{},"slide-in-down",[326,3514,3515],{},"spin-wheel",[326,3517,3518],{},"animate-wheel",[326,3520,3521],{},"shine-light",[326,3523,3524],{},"dots-scroll",[326,3526,3527],{},"animate-gradient-shape-*"," keyframes.",[353,3530,3349,3531,401,3534,401,3537,401,3540,329,3543,3546,3547,1182,3550,3553],{},[326,3532,3533],{},"slide",[326,3535,3536],{},"slide-inline",[326,3538,3539],{},"fade-inline",[326,3541,3542],{},"table",[326,3544,3545],{},"table-td-fade","\ntransitions, replaced by the new\n",[335,3548,3549],{"href":2093},"transitions",[326,3551,3552],{},"slide-block","\nstays).",[353,3555,3556,3557,3560],{},"The spinning icon on ",[326,3558,3559],{},".nav-link"," hover.",[353,3562,3563,3564,428,3567,401,3570,3573,3574,3577],{},"The custom color-picker popover styles (",[326,3565,3566],{},".color-picker-popper",[326,3568,3569],{},".color-swatch",[326,3571,3572],{},".form-color-picker-wrapper","). ",[326,3575,3576],{},"UiInputColorPicker"," uses\nthe native color input.",[353,3579,3580,3583,3584,3587,3588,3591],{},[326,3581,3582],{},"layout\u002F_grid.scss",", a copy of ",[326,3585,3586],{},"layout\u002F_flex-container.scss","; import\n",[326,3589,3590],{},"@colorffy\u002Fcss\u002Fscss\u002Flayout\u002Fflex-container"," instead.",[3593,3594],"br",{},"See the ",[335,3597,337],{"href":3364},[353,3599,3600,359,3603,700,3606,401,3609,2299,3612,329,3615,3618,3619,3621,3622,428,3625,401,3628,428,3631,329,3634,3637,3638,428,3641,329,3644,3647,3648,3651,3652,3655],{},[356,3601,3602],{},"Unused tokens and SCSS API.",[326,3604,3605],{},"--cffy-img-testimonial-filter",[326,3607,3608],{},"-invert",[326,3610,3611],{},"--cffy-vfw-400",[326,3613,3614],{},"-800",[326,3616,3617],{},"--cffy-surface-text-field","; the\n",[326,3620,2756],{}," registrations of ",[326,3623,3624],{},"--cffy-color-wheel-radius",[326,3626,3627],{},"--cffy-element-radius",[326,3629,3630],{},"--cffy-dots-scroll-position",[326,3632,3633],{},"--cffy-gradient-shape-*",[326,3635,3636],{},"--cffy-noise-lines","; the ",[326,3639,3640],{},"$dark",[326,3642,3643],{},"$scheme-colors",[326,3645,3646],{},"$fs-table"," variables; and ",[326,3649,3650],{},"generate-static-gradients()",",\nwhich matched ",[326,3653,3654],{},"generate-gradients()"," (its unused third argument is gone too).",[345,3657,3659],{"id":3658},"fixed","Fixed",[350,3661,3662,3711,3729,3749,3759,3772,3797,3813,3834,3854,3869,3892,3901,3920,3930,3943,3967,3974,3983,4008,4031,4048,4056,4069,4083,4100,4116,4136,4152,4169,4182,4192,4200,4237,4258,4277,4283,4293,4309,4322,4328,4340,4358,4379,4414,4434,4457,4484,4495,4526,4548,4567,4576,4597,4615,4634,4652,4674],{},[353,3663,3664,359,3667,3669,3670,401,3673,401,3675,3677,3678,2715,3681,700,3683,3685,3686,3689,3690,3692,3693,2077,3696,3699,3700,329,3703,3706,3707,3710],{},[356,3665,3666],{},"Menus and tooltips work inside modals.",[326,3668,2102],{}," and every tooltip\n(",[326,3671,3672],{},"UiTooltip",[326,3674,2407],{},[326,3676,3277],{},", the sidebar dropdown and\nlink tooltips) rendered their popup at the end of ",[326,3679,3680],{},"\u003Cbody>",[326,3682,2144],{},[326,3684,2432],{}," open with ",[326,3687,3688],{},"showModal()",", which puts the dialog on top of the\npage and makes everything outside it inert, so those popups sat behind the\nbackdrop and ignored clicks: a ",[326,3691,994],{}," column manager inside a modal\ncouldn't be opened. Popups now render inside the nearest ",[326,3694,3695],{},"\u003Cdialog>",[326,3697,3698],{},"[popover]"," with fixed positioning, ",[326,3701,3702],{},".dialog",[326,3704,3705],{},".popover"," let them overflow\ntheir box (their body still scrolls), and clicking a menu item no longer\ncounts as a click outside the modal. Colorffy CSS also gives FloatingVue\npoppers their ",[326,3708,3709],{},"top: 0; left: 0"," origin, which only FloatingVue's own\nstylesheet set before, so they're placed correctly without it.",[353,3712,3713,3716,3717,3719,3720,3722,3723,329,3726,392],{},[356,3714,3715],{},"Esc closes a menu without closing the modal around it."," The menu didn't\nhandle Esc, so the key reached the ",[326,3718,3695],{},", which closed. ",[326,3721,2102],{}," now\ntakes Esc while it's open, closes, and returns focus to its button. Its\nbutton also reports ",[326,3724,3725],{},"aria-expanded",[326,3727,3728],{},"aria-controls",[353,3730,3731,3736,3737,3740,3741,3744,3745,3748],{},[356,3732,3733,3735],{},[326,3734,2407],{}," no longer announces itself as collapsed."," Its optional\n",[326,3738,3739],{},"ariaExpanded"," prop is a boolean, which Vue reads as ",[326,3742,3743],{},"false"," when it isn't\npassed, so every tooltip button said ",[326,3746,3747],{},"aria-expanded=\"false\"",". It's now only\nset when you pass it.",[353,3750,3751,359,3754,329,3756,3758],{},[356,3752,3753],{},"Reopened modals start at the top.",[326,3755,2144],{},[326,3757,2432],{}," kept\nthe body's scroll position from the last time they were open, so the first\nfields could be scrolled out of view.",[353,3760,3761,359,3764,3767,3768,3771],{},[356,3762,3763],{},"A modal's close button stays on the title row.",[326,3765,3766],{},".dialog-header"," wrapped\nits children, so on a phone a title and subtitle wider than the space left\npushed the close button onto a line of its own. The header no longer wraps:\nthe title block shrinks and its text wraps, with a ",[326,3769,3770],{},"--cffy-space-12"," gap\nbefore the button.",[353,3773,3774,359,3777,3780,3781,3784,3785,3388,3788,329,3791,3388,3794,392],{},[356,3775,3776],{},"Select text stops before the arrow.",[326,3778,3779],{},".form-select"," had the same inline\npadding on both sides, so in a narrow field a long option ran under the arrow\nicon. The end padding now clears the icon at every size: ",[326,3782,3783],{},"2.25rem",", or\n",[326,3786,3787],{},"1.75rem",[326,3789,3790],{},".form-sm",[326,3792,3793],{},"2.75rem",[326,3795,3796],{},".form-lg",[353,3798,3799,1145,3802,3805,3806,3808,3809,3812],{},[356,3800,3801],{},"Datatable captions stay readable on phones.",[326,3803,3804],{},"\u003Ccaption>"," sat inside\nthe table's horizontal scroll, centered across the whole table, so on a\nnarrow screen part of it was cut off. ",[326,3807,994],{}," keeps the caption for\nscreen readers and shows its text below the scroll area as ",[326,3810,3811],{},".table-caption",",\nin the muted text color.",[353,3814,3815,3818,3819,3822,3823,3826,3827,3830,3831,3833],{},[356,3816,3817],{},"The navigation bar's indicator leaves when no item is active."," It started\non the first item and only moved to a link with the router's exact-active\nclass, so on a page outside the bar (",[326,3820,3821],{},"\u002Fbilling",") it stayed on Home, and with\nplain links and ",[326,3824,3825],{},"activeItem"," it never moved. It now also follows\n",[326,3828,3829],{},"aria-current=\"page\"",", which ",[326,3832,3825],{}," sets, and fades out when no item\nis active.",[353,3835,3836,359,3839,3842,3843,3846,3847,3850,3851,392],{},[356,3837,3838],{},"Tables hide their scrollbar in every browser.",[326,3840,3841],{},".table-responsive"," hid\nits scrollbar only through ",[326,3844,3845],{},"::-webkit-scrollbar",", which Chrome ignores once\n",[326,3848,3849],{},"scrollbar-width"," is set, as the reboot does for every element, so a thin\nbar showed under tables that scroll sideways. It now also sets\n",[326,3852,3853],{},"scrollbar-width: none",[353,3855,3856,2813,3859,3861,3862,3865,3866,3868],{},[356,3857,3858],{},"Selects in tables keep their width.",[326,3860,3779],{}," fills its cell\n(",[326,3863,3864],{},"width: 100%","), which gives an automatic table nothing to size the column\nby, so on a phone a select in a table shrank to a square. Inside ",[326,3867,990],{}," a\nselect is now at least as wide as its longest option.",[353,3870,3871,2928,3876,3879,3880,3883,3884,3887,3888,3891],{},[356,3872,3873,3875],{},[326,3874,1192],{}," makes pills and circles at any size.",[326,3877,3878],{},"50px",", so a 150px ",[326,3881,3882],{},"avatar-lg"," was a rounded square and a pill taller than\n100px lost its round ends. It is now ",[326,3885,3886],{},"9999px",". The raw ",[326,3889,3890],{},".border-radius-50","\nutility keeps 50px.",[353,3893,3894,3897,3898,3900],{},[356,3895,3896],{},"Small dialogs fit their content on phones."," Below 992px every dialog\nbecame a bottom sheet 75% of the screen tall, including ",[326,3899,2222],{},", whose\ncontent keeps its own height. The form sat at the top of a mostly empty\nsheet, and a tap on the empty part landed outside the content, which closed\nthe dialog. Small dialogs now grow with their content, up to 75% of the\nscreen.",[353,3902,3903,3906,3907,3909,3910,3912,3913,3915,3916,3919],{},[356,3904,3905],{},"Tables don't widen the page on phones."," The screen-reader label of a\n",[326,3908,1591],{}," column is positioned absolutely, and ",[326,3911,3841],{}," wasn't\na positioned box, so the label escaped the table's horizontal scroll and\nwidened the page. ",[326,3914,3841],{}," is now ",[326,3917,3918],{},"position: relative",". It also\nhides vertical overflow (except with a sticky header), which removes a\nscrollbar that a 1px caption rounding left next to some tables.",[353,3921,3922,3925,3926,3929],{},[356,3923,3924],{},"The indeterminate checkbox shows a dash."," There was no ",[326,3927,3928],{},":indeterminate","\nstyle, so the datatable's header checkbox looked unchecked while some rows\nwere selected. It now shows a dash on the checked color.",[353,3931,3932,3938,3939,3942],{},[356,3933,3934,3935,3937],{},"Pasting a list into ",[326,3936,1472],{}," keeps every value."," Only pastes with\nline breaks were split; a comma-separated line went into the field, where\n",[326,3940,3941],{},"maxlength"," cut it short before it was split. Pastes that contain the\nseparator are now split too.",[353,3944,3945,1145,3948,329,3951,3954,3955,3958,3959,3962,3963,3966],{},[356,3946,3947],{},"Nuxt pages fade in, not only out.",[326,3949,3950],{},"page",[326,3952,3953],{},"layout"," transitions\nstyled Vue 2's ",[326,3956,3957],{},"-enter"," class, which Vue 3 renamed ",[326,3960,3961],{},"-enter-from",", so with\n",[326,3964,3965],{},"pageTransition: { name: 'page' }"," the old page faded out and the new one\nappeared at once. They now fade both ways.",[353,3968,3969],{},[356,3970,3971,3972,392],{},"Esc no longer clears a disabled or read-only ",[326,3973,1469],{},[353,3975,3976,3979,3980,392],{},[356,3977,3978],{},"List items animate their background and border."," The item transition had\nno duration, so hover, pressed and active changes snapped. They now ease over\n",[326,3981,3982],{},"--cffy-duration-200",[353,3984,3985,359,3990,3992,3993,3996,3997,4000,4001,4003,4004,4007],{},[356,3986,3987,3989],{},[326,3988,2622],{}," title sizes were inverted.",[326,3991,2222],{}," used the\nlegacy ",[326,3994,3995],{},"fs-500"," (20px), the default ",[326,3998,3999],{},"fs-600"," (16px), and ",[326,4002,2498],{}," a ",[326,4005,4006],{},"fs-700"," class\nthat never existed, so it fell back to 15px: the larger the size, the smaller\nthe title. They are now 16px, 20px and 24px.",[353,4009,4010,4016,4017,4020,4021,4024,4025,4028,4029,392],{},[356,4011,4012,4015],{},[326,4013,4014],{},"UiGridSkeleton"," previews have their height again."," Each card set\n",[326,4018,4019],{},"--fixed-size: 6.25rem",", but the ",[326,4022,4023],{},".h-fixed"," utility reads ",[326,4026,4027],{},"--cffy-h-fixed",", so the\npreview block fell back to its 2.5rem minimum. It now sets ",[326,4030,4027],{},[353,4032,4033,4036,4037,329,4040,4043,4044,4047],{},[356,4034,4035],{},"Popover menu items no longer restyle what you put in them."," The item\ncolored and resized every ",[326,4038,4039],{},"\u003Cp>",[326,4041,4042],{},"\u003Ci>"," inside it, so buttons placed in the\n",[326,4045,4046],{},"trailing"," slot (a theme switcher, say) lost their own text and icon colors.\nThe rules now apply only to the item's label, leading icon and trailing icon.",[353,4049,4050,4055],{},[356,4051,4052,4054],{},[326,4053,1451],{}," closes its menu."," Clicking an item left the dropdown open\nuntil you clicked elsewhere, and items inside a submenu left both levels open.\nA click now closes the whole menu.",[353,4057,4058,4068],{},[356,4059,4060,4062,4063,329,4065,392],{},[326,4061,2144],{}," renders ",[326,4064,1378],{},[326,4066,4067],{},"message"," Both props were declared and\ndocumented but never shown. They now fill the header and body when those slots\nare empty. Clicks outside a closed modal also stopped emitting a close event:\nthe outside-click listener ran whether or not the dialog was open.",[353,4070,4071,4082],{},[356,4072,4073,4075,4076,4079,4080,392],{},[326,4074,2432],{}," shows ",[326,4077,4078],{},"loadingLabel"," and emits ",[326,4081,2436],{}," The confirm\nbutton kept its label while loading, and the documented close event was never\nemitted. Both now work, and outside clicks are ignored while it is closed.",[353,4084,4085,1145,4090,4092,4093,4095,4096,4099],{},[356,4086,4087,4089],{},[326,4088,2648],{}," no longer shows its title as a browser tooltip.",[326,4091,1378],{}," prop was\nalso bound to the root's native ",[326,4094,1378],{}," attribute. The card body also stopped\nre-applying the card color, so a text utility on the card (",[326,4097,4098],{},"text-on-primary",")\nnow reaches the body.",[353,4101,4102,4115],{},[356,4103,4104,4107,4108,329,4111,4114],{},[326,4105,4106],{},"UiAvatar"," shows the photo when both ",[326,4109,4110],{},"src",[326,4112,4113],{},"initials"," are set."," Initials\ntook priority, so the image never appeared. They are now the fallback for a\nmissing or broken image, as documented.",[353,4117,4118,359,4123,401,4126,401,4129,329,4132,4135],{},[356,4119,4120,4122],{},[326,4121,2407],{}," links.",[326,4124,4125],{},"to",[326,4127,4128],{},"href",[326,4130,4131],{},"as",[326,4133,4134],{},"type"," were accepted but not\npassed to the button, so a tooltip button couldn't navigate.",[353,4137,4138,4143,4144,700,4146,1722,4149,4151],{},[356,4139,4140,4142],{},[326,4141,615],{}," renders tab icons and badges."," Its tabs accept ",[326,4145,1370],{},[326,4147,4148],{},"badge",[326,4150,594],{},", but only the label was drawn.",[353,4153,4154,1145,4163,4166,4167,392],{},[356,4155,4156,4159,4160,392],{},[326,4157,4158],{},"UiBadge"," renders a ",[326,4161,4162],{},"\u003Cspan>",[326,4164,4165],{},"\u003Cdiv>"," root made badges invalid inside\nparagraphs and buttons (tabs, menu items), which broke SSR hydration when a badge\nsat in a ",[326,4168,4039],{},[353,4170,4171,4181],{},[356,4172,4173,4176,4177,4180],{},[326,4174,4175],{},"UiTimeline"," styles the ",[326,4178,4179],{},"neutral"," variant."," It was accepted but had no marker\ncolors; it now uses the muted container pair.",[353,4183,4184,4191],{},[356,4185,4186,4188,4189,392],{},[326,4187,3277],{}," honors ",[326,4190,3264],{}," The prop was declared but never passed to\nthe tooltip.",[353,4193,4194,4199],{},[356,4195,4196,4198],{},[326,4197,1725],{}," placeholder is in English."," The default was\n\"Clic para seleccionar\"; it is now \"Select an option\".",[353,4201,4202,4210,4211,4214,4215,418,4218,4221,4222,4225,4226,4228,4229,4231,4232,4234,4235,392],{},[356,4203,4204,359,4207,4209],{},[326,4205,4206],{},"UiNavbarNav",[326,4208,3115],{}," aligns as documented."," From 992px, ",[326,4212,4213],{},"start"," pushed its\ngroup away from the brand (",[326,4216,4217],{},"margin-left: auto",[326,4219,4220],{},"end"," pushed away from the\nfar edge (",[326,4223,4224],{},"margin-right: auto","), so a start and an end group floated toward the\nmiddle with a gap after the last item. ",[326,4227,4213],{}," now sits next to the brand and\n",[326,4230,4220],{}," against the far edge. If you used two ",[326,4233,4213],{}," groups to push everything\nto the right, make the right-hand group ",[326,4236,4220],{},[353,4238,4239,4242,4243,4246,4247,4250,4251,4254,4255,4257],{},[356,4240,4241],{},"Prefixed and suffixed inputs line up."," An input with a prefix or suffix nests\nan ",[326,4244,4245],{},".input-group"," inside its ",[326,4248,4249],{},".form-group",", and both added the bottom margin, so\nthe field took twice the spacing. Inside a navbar item the form margin is now\ndropped entirely, and the prefix and suffix follow ",[326,4252,4253],{},"variant=\"transparent\""," (no\nborder or background) and ",[326,4256,785],{}," (full radius) instead of keeping the default\nboxed look.",[353,4259,4260,4266,4267,4270,4271,4273,4274,392],{},[356,4261,4262,4265],{},[326,4263,4264],{},".grid-main-content"," no longer scrolls sideways."," Its content column was\n",[326,4268,4269],{},"1fr",", which cannot shrink below the widest thing inside it, so a wide table\npushed the whole page past the viewport instead of scrolling in its own\n",[326,4272,3841],{},". The column is now ",[326,4275,4276],{},"minmax(0, 1fr)",[353,4278,4279,4282],{},[356,4280,4281],{},"Alert actions stay beside the text."," An alert with a title switched to a\nsingle column, which pushed its actions onto a row of their own at the bottom.\nActions now sit next to the content and only drop below it when the alert is\n450px wide or less.",[353,4284,4285,4288,4289,4292],{},[356,4286,4287],{},"The segmented control indicator moves without lagging."," The labels\ntransitioned ",[326,4290,4291],{},"font-weight",", so with a proportional font the active label kept\ngrowing while the indicator travelled toward it, and the indicator trailed\nbehind a moving target. The weight now changes at once.",[353,4294,4295,4300,4301,4304,4305,4308],{},[356,4296,4297,4299],{},[326,4298,2613],{}," centers its action."," Buttons in the ",[326,4302,4303],{},"action"," slot sat at the left\nedge because they are block-level; the slot is now wrapped in a centered\n",[326,4306,4307],{},"UiButtonGroup",", which also spaces several actions.",[353,4310,4311,4314,4315,4317,4318,4321],{},[356,4312,4313],{},"List item actions keep their width."," The item content took ",[326,4316,3864],{},",\nso the ",[326,4319,4320],{},"list-action"," slot was squeezed until its button labels wrapped. The\ncontent now takes the free space and the actions keep their natural width.",[353,4323,4324,4327],{},[356,4325,4326],{},"The sidebar rail centers its header."," The rail nudged an image or icon logo\nwith a fixed 1rem offset and left anything else at the start edge. The header\nnow centers whatever logo it holds.",[353,4329,4330,4335,4336,4339],{},[356,4331,4332,4334],{},[326,4333,2619],{}," subtitle is readable."," It carried ",[326,4337,4338],{},"text-muted",", which overrode\nthe label color meant for text on the blob, so the subtitle faded into the shape.\nIt now uses the same color as the title, and both lines are centered on the\nshape (a shorter subtitle used to sit at the left edge).",[353,4341,4342,4347,4350,4351,4354,4355,4357],{},[356,4343,4344,4346],{},[326,4345,1299],{}," keeps its light-mode background in older browsers.",[326,4348,4349],{},"--cffy-surface-kbd"," called ",[326,4352,4353],{},"color-mix()"," without an interpolation space,\nwhich only browsers supporting the newer optional-space syntax accept, so\nelsewhere the token was invalid and the key rendered unpainted. It now names\n",[326,4356,2268],{},", the space those browsers default to, so they render it the same.",[353,4359,4360,4368,4369,4372,4373,4375,4376,4378],{},[356,4361,4362,4365,4366,392],{},[326,4363,4364],{},"UiChip"," renders its ",[326,4367,2557],{}," The prop was declared but bound to neither\nroot, so the chip had no id. It now lands unchanged on the chip's root.\n",[326,4370,4371],{},"UiChipGroup"," no longer passes each option's ",[326,4374,2557],{}," down as a DOM id, so\noption ids such as ",[326,4377,2068],{}," don't collide with ids elsewhere on the page.",[353,4380,4381,359,4387,329,4389,4391,4392,4394,4395,4398,4399,4401,4402,4404,4405,4407,4408,4410,4411,4413],{},[356,4382,4383,4384,4386],{},"Dialogs emit ",[326,4385,2436],{}," when closed with Esc.",[326,4388,2144],{},[326,4390,2432],{},"\nemitted ",[326,4393,2436],{}," from ",[326,4396,4397],{},"closeDialog()"," only, so pressing Esc closed the native\n",[326,4400,3695],{}," without telling the parent. Both now emit ",[326,4403,2436],{}," from the\ndialog's own ",[326,4406,2436],{}," event, which covers ",[326,4409,4397],{},", outside clicks\nand Esc alike. The event now fires once the dialog has closed, a moment after\n",[326,4412,4397],{}," returns.",[353,4415,4416,4423,4424,4427,4428,4430,4431,4433],{},[356,4417,4418,4188,4420,392],{},[326,4419,2432],{},[326,4421,4422],{},"closeOnClickOutside"," It closed on every outside\nclick whatever the prop said. It now defaults to ",[326,4425,4426],{},"true",", as on ",[326,4429,2144],{},",\nand ",[326,4432,3743],{}," keeps the dialog open.",[353,4435,4436,359,4443,4446,4447,4450,4451,4453,4454,4456],{},[356,4437,4438,4439,4442],{},"A disabled ",[326,4440,4441],{},"UiAccordion"," stays put.",[326,4444,4445],{},"disabled"," only set ",[326,4448,4449],{},"aria-disabled","\non the ",[326,4452,2908],{},", so the header still toggled the item and nothing looked\ndisabled. The header now ignores clicks and Enter\u002FSpace, leaves the tab\norder, carries ",[326,4455,4449],{},", and renders at reduced opacity with a\nnot-allowed cursor and no hover layer.",[353,4458,4459,4470,4471,4473,4474,3001,4477,4480,4481,4483],{},[356,4460,4461,4464,4465,329,4467,392],{},[326,4462,4463],{},"UiIconMaterial"," applies ",[326,4466,695],{},[326,4468,4469],{},"color"," Both props were declared but\nnever bound, so the icon always took the surrounding text size and color.\n",[326,4472,695],{}," now sets the glyph size (",[326,4475,4476],{},"xs",[326,4478,4479],{},"xl"," = 20 … 48px, numbers are px) and\n",[326,4482,4469],{}," its color; left unset, the icon follows the text as before.",[353,4485,4486,4492,4493,392],{},[356,4487,4488,4464,4490,392],{},[326,4489,3277],{},[326,4491,1875],{}," The prop was declared but never applied;\nit now makes the link full width, like ",[326,4494,2402],{},[353,4496,4497,359,4500,4503,4504,4506,4507,4510,4511,4514,4515,4517,4518,4521,4522,4525],{},[356,4498,4499],{},"Using the SCSS mixins adds nothing to your CSS.",[326,4501,4502],{},"abstracts\u002Fmixins","\ndeclared eight ",[326,4505,2756],{}," rules and wrote its doc comments as CSS comments,\nso every stylesheet or Vue ",[326,4508,4509],{},"\u003Cstyle>"," block that loaded it with ",[326,4512,4513],{},"@use"," got\nthem in its output. The ",[326,4516,2756],{}," rules moved to ",[326,4519,4520],{},"base\u002Fproperties",", which\nthe main bundle loads once, and the comments are Sass comments now. The\ncompiled ",[326,4523,4524],{},"colorffy.min.css"," is unchanged.",[353,4527,4528,4531,4532,4535,4536,4539,4540,4542,4543,428,4545,4547],{},[356,4529,4530],{},"Snackbar icons and actions are readable in both modes."," Variant icons used\n",[326,4533,4534],{},"--cffy-\u003Ccolor>-base-fixed",", the light-mode brand tone, in both modes, so on\nthe dark light-mode snackbar a primary icon measured 1.7:1 and danger 2.8:1,\nand on the white dark-mode snackbar warning measured 1.7:1, secondary 1.9:1\nand info 2.3:1. Text buttons in the ",[326,4537,4538],{},"actions"," slot took the page's primary\nand text colors and nearly vanished. Icons now use ",[326,4541,1548],{},"\n(6.6:1 or more), and the snackbar points ",[326,4544,1395],{},[326,4546,1178],{}," and the state layer at their inverse tones, so its\nactions read at 11:1 or more.",[353,4549,4550,4555,4556,4559,4560,4562,4563,4566],{},[356,4551,4552,4554],{},[326,4553,1511],{}," renders a prefix or suffix added after mount."," It decided\nwhether the slots existed once, in a ",[326,4557,4558],{},"computed",", and slots aren't reactive,\nso a ",[326,4561,1521],{}," shown with ",[326,4564,4565],{},"v-if"," later (a clear button, for example) never\nappeared. The template now reads the slots on every render.",[353,4568,4569,4572,4573,4575],{},[356,4570,4571],{},"Errors show under inputs with a prefix or suffix."," The message follows the\n",[326,4574,4245],{}," instead of the field, so the rule that styles it as an error\nnever matched: it showed as plain body text. It now gets the error color and\nsize there too.",[353,4577,4578,4585,4586,2065,4589,4592,4593,4596],{},[356,4579,4580,329,4582,4584],{},[326,4581,641],{},[326,4583,691],{}," accept string styles."," A string\n",[326,4587,4588],{},"barStyles",[326,4590,4591],{},"customStyles"," was joined to the component's own style object,\nwhich turned it into ",[326,4594,4595],{},"[object Object]",", so the bar lost its fill width and\nthe spinner its size. Both now pass a style array, which Vue merges, so\nstrings and objects apply on top of the component's own values.",[353,4598,4599,359,4607,4610,4611,4614],{},[356,4600,4601,4604,4605,392],{},[326,4602,4603],{},"IToastDisplay"," includes ",[326,4606,1378],{},[326,4608,4609],{},"UiAlertToast"," exposes its title, but\nthe type for its template ref left it out, so setting the title before\n",[326,4612,4613],{},"showToast()"," needed a cast in TypeScript.",[353,4616,4617,4627,4628,4630,4631,4633],{},[356,4618,4619,4464,4621,329,4624,392],{},[326,4620,3576],{},[326,4622,4623],{},"placeholder",[326,4625,4626],{},"readonly"," Both props\nwere accepted but never bound, so the hex field showed no placeholder and\nstayed editable. The hex field now takes both, and ",[326,4629,4626],{}," also keeps the\nswatch's picker closed, since a color input ignores the ",[326,4632,4626],{}," attribute.",[353,4635,4636,4639,4640,4643,4644,4647,4648,4651],{},[356,4637,4638],{},"Corner toasts fit their text and center on phones."," The toast container\nis a size container (",[326,4641,4642],{},"container-type: inline-size",") so the alert inside can\nadapt to its width, but a corner placement left it without a width, so it\nmeasured 0px: every corner toast fell to its 288px minimum and took the\nstacked narrow layout, icon above the text. On phones it also slid left: the\nrule that spans the toast across screens up to 576px wide had less\nspecificity than the placement classes, so a ",[326,4645,4646],{},"bottom-right"," toast kept its\ncorner insets while gaining the side padding. Corner placements now give the\ncontainer ",[326,4649,4650],{},"min(--cffy-container-lg, 100% - 2 × offset)",", and the phone rule\ncovers every placement.",[353,4653,4654,359,4657,4659,4660,4663,4664,4667,4668,700,4671,4673],{},[356,4655,4656],{},"The color picker is one field.",[326,4658,3576],{}," wraps a swatch and\na hex text field in ",[326,4661,4662],{},".form-color-group",", but the text field kept its own\nshadow, focus ring and invalid border, drawn in the field shape inside the\ngroup: with pill fields it showed as a second capsule, and an error turned\nonly the text field red. The swatch was fixed at ",[326,4665,4666],{},"--cffy-radius-md"," whatever\nthe field shape, and shrank when the field was narrow. The group now carries\nthe shadow, the focus ring and the invalid border and ring, the text field\ndraws none of them, the swatch rounds to half the field radius and keeps its\nsize, and the error message gets the error color and size. The ",[326,4669,4670],{},"variant",[326,4672,785],{}," props, accepted but never applied, now style the whole field.",[353,4675,4676,4679,4680,4683,4684,4686,4687,4689,4690,4693,4694,4697],{},[356,4677,4678],{},"Connected button groups keep their shape with pill controls."," The ends of\n",[326,4681,4682],{},".btn-group-connected"," round to half the button's height and the inner\ncorners took ",[326,4685,1988],{},". Set to ",[326,4688,1192],{},", a side then\nasked for 9999px against a 32px box, and the spec answer to radii that\noverflow a side is to scale every corner of that button by the same factor:\nthe pill ends shrank to nothing and the inner corners came out round, so the\ngroup looked inside out and its middle icon button turned into a circle.\nInner corners now stop at a quarter of the button's height (8px on ",[326,4691,4692],{},"btn-sm",",\n9px at the default size, 12px on ",[326,4695,4696],{},"btn-lg","), so the radii on a side never\noverflow it; below that they still follow the shape role.",[340,4699,4701],{"id":4700},"_280","2.8.0",[345,4703,348],{"id":4704},"added-1",[350,4706,4707],{},[353,4708,4709,359,4712,401,4715,401,4718,401,4721,401,4724,428,4727,401,4730,401,4733,329,4736,4738,4739,1182,4742,4745,4746,4749],{},[356,4710,4711],{},"Duration tokens.",[326,4713,4714],{},"--duration-100",[326,4716,4717],{},"-150",[326,4719,4720],{},"-200",[326,4722,4723],{},"-250",[326,4725,4726],{},"-300",[326,4728,4729],{},"-400",[326,4731,4732],{},"-500",[326,4734,4735],{},"-600",[326,4737,3614],{}," are milliseconds derived from\n",[326,4740,4741],{},"--duration-unit",[326,4743,4744],{},"1ms","), and every component transition reads them, so\n",[326,4747,4748],{},"--duration-unit: .8ms"," speeds up all motion by 20%, globally or for one\nsubtree. Long looping animations (spinners, shimmers) keep their own timing.",[345,4751,2158],{"id":4752},"changed-1",[350,4754,4755,4783],{},[353,4756,4757,4760,829,4763,4766,4767,3001,4769,4771,4772,4775,4776,4779,4780,392],{},[356,4758,4759],{},"Ripples, the spinner and the galaxy gradient follow the theme.",[326,4761,4762],{},"ripple-primary",[326,4764,4765],{},"ripple-secondary"," and the spinner's color cycle used the\ncompiled ",[326,4768,3055],{},[326,4770,3064],{}," colors, so they ignored your brand tokens and\ndark mode; they now use ",[326,4773,4774],{},"--theme-{color}-base",". The white and dark ripples use\nthe brand white and black tokens, and ",[326,4777,4778],{},"gradient-fuchsia"," starts and ends on\n",[326,4781,4782],{},"--color-brand-accent-500",[353,4784,4785,359,4788,428,4790,401,4792,401,4794,401,4796,401,4798,401,4800,401,4802,428,4804,329,4806,4808,4809,4812,4813,329,4816,4819,4820,1193],{},[356,4786,4787],{},"The SCSS color and font variables are deprecated.",[326,4789,3055],{},[326,4791,3058],{},[326,4793,3061],{},[326,4795,3064],{},[326,4797,3067],{},[326,4799,3070],{},[326,4801,3073],{},[326,4803,3076],{},[326,4805,3079],{},[326,4807,3082],{}," are no longer read anywhere; they still compile\nso existing ",[326,4810,4811],{},"@forward … with"," configurations keep building, and they will be\nremoved in 3.0. Set the ",[326,4814,4815],{},"--color-brand-*",[326,4817,4818],{},"--font-*"," tokens instead (see\n",[335,4821,4822],{"href":39},"customization",[345,4824,2970],{"id":4825},"removed-1",[350,4827,4828],{},[353,4829,4830,359,4833,428,4836,401,4839,428,4842,401,4845,329,4848,4851],{},[356,4831,4832],{},"Private variables that never did anything:",[326,4834,4835],{},"--_dialog-easing-out",[326,4837,4838],{},"--_dialog-easing-out-duration",[326,4840,4841],{},"--_navigation-bar-easing-out-duration",[326,4843,4844],{},"--_nav-tabs-gutter-y",[326,4846,4847],{},"--_shape-offset",[326,4849,4850],{},"--_container-gutter-y",". They\nwere declared but never read, so overriding them had no effect.",[345,4853,3659],{"id":4854},"fixed-1",[350,4856,4857,4875,4898],{},[353,4858,4859,4862,4863,4866,4867,4870,4871,4874],{},[356,4860,4861],{},"Alerts with an icon stack in narrow containers."," Below 350px the alert\nset ",[326,4864,4865],{},"--_alert-flex-direction: column",", but ",[326,4868,4869],{},".alert-content"," wrote\n",[326,4872,4873],{},"flex-direction: row"," directly, so the icon never moved above the text. The\ncontent now reads the variable and left-aligns when stacked.",[353,4876,4877,359,4880,4883,4884,4886,4887,4890,4891,700,4894,4897],{},[356,4878,4879],{},"Tab colors go through the button variables.",[326,4881,4882],{},".tab-link"," set ",[326,4885,4469],{}," and\nthe hover ",[326,4888,4889],{},"background"," directly, overriding ",[326,4892,4893],{},"--_btn-color",[326,4895,4896],{},"--_btn-bg-color",", so setting those had no effect. The rest, hover and active\nstates now set the variables; the rendered colors are unchanged.",[353,4899,4900,4906,4907,4916,4917,329,4920,4923],{},[356,4901,4902,4905],{},[326,4903,4904],{},"--_progress-color"," sets the progress bar fill",", and\n",[356,4908,4909,829,4912,4915],{},[326,4910,4911],{},"--_table-bg-color",[326,4913,4914],{},"--_table-color"," set the table's background and text\ncolor."," They were declared but never applied. Their defaults now match what\nrendered before (",[326,4918,4919],{},"transparent",[326,4921,4922],{},"currentColor"," for the table).",[340,4925,4927],{"id":4926},"_270","2.7.0",[345,4929,348],{"id":4930},"added-2",[350,4932,4933,4959,4990,5026,5057],{},[353,4934,4935,359,4943,4945,4946,4948,4949,4951,4952,4955,4956,392],{},[356,4936,4937,1363,4939,329,4941,392],{},[326,4938,594],{},[326,4940,1599],{},[326,4942,785],{},[326,4944,1599],{}," makes the tab bar only as wide\nas its tabs instead of spanning its container (ignored with ",[326,4947,1875],{},").\n",[326,4950,785],{}," makes pill tabs and their indicator fully rounded; it only applies\nwith ",[326,4953,4954],{},"pillTabs",". Both radii come from one private variable,\n",[326,4957,4958],{},"--_nav-tabs-item-radius",[353,4960,4961,4971,4972,4975,4976,4979,4980,4983,4984,379,4987,392],{},[356,4962,4963,329,4965,4968,4969,3171],{},[326,4964,4106],{},[326,4966,4967],{},"UiAvatarGroup"," take a ",[326,4970,4469],{}," It tints initials and\nplaceholder avatars with any theme color, at the color's fixed tone and 25%\nopacity, in place of adding a ",[326,4973,4974],{},"bg-*-fixed"," class. On the group it applies to\nevery avatar and the \"+N\" overflow avatar, and ",[326,4977,4978],{},"avatars"," entries can override\nit. The CSS classes are ",[326,4981,4982],{},".avatar-{color}",", driven by ",[326,4985,4986],{},"--_initials-base-color",[326,4988,4989],{},"--_initials-alpha",[353,4991,4992,359,5000,5002,5003,5006,5007,5010,5011,401,5014,4948,5017,5019,5020,1286,5022,5019,5024,392],{},[356,4993,4994,329,4996,4968,4998,3171],{},[326,4995,4106],{},[326,4997,4967],{},[326,4999,4670],{},[326,5001,4919],{}," is\nthe see-through tint, ",[326,5004,5005],{},"tonal"," the same tint made opaque, and ",[326,5008,5009],{},"filled"," the\nfull theme color with its on-color text (",[326,5012,5013],{},".avatar-tonal",[326,5015,5016],{},".avatar-filled",[326,5018,4106],{}," defaults to ",[326,5021,4919],{},[326,5023,4967],{},[326,5025,5005],{},[353,5027,5028,359,5039,5041,5042,5044,5045,2715,5048,5051,5052,5054,5055,392],{},[356,5029,5030,401,5033,329,5036,392],{},[326,5031,5032],{},"border-neutral",[326,5034,5035],{},"border-black",[326,5037,5038],{},"border-opacity-*",[326,5040,5032],{},"\nuses the body text color, so it flips with dark mode; ",[326,5043,5035],{}," matches\n",[326,5046,5047],{},"text-black",[326,5049,5050],{},"border-opacity-{0…100}"," fades any border color toward\ntransparent with ",[326,5053,4353],{}," in ",[326,5056,2268],{},[353,5058,5059,359,5062,428,5065,829,5068,401,5071,401,5074,700,5077,829,5080,5083,5084,5086,5087,392],{},[356,5060,5061],{},"Shape, weight, motion and focus tokens.",[326,5063,5064],{},"--radius-*",[326,5066,5067],{},"--border-width-sm",[326,5069,5070],{},"-md",[326,5072,5073],{},"--fw-400…800",[326,5075,5076],{},"--ease-*",[326,5078,5079],{},"--focus-ring-color",[326,5081,5082],{},"--focus-ring-offset"," are CSS custom properties on\n",[326,5085,469],{},", and every component reads them. Override them at runtime without\nrecompiling; the SCSS variables still set their defaults. See\n",[335,5088,4822],{"href":39},[345,5090,2158],{"id":5091},"changed-2",[350,5093,5094,5110,5130,5153,5176,5196,5221],{},[353,5095,5096,5102,5103,5106,5107,5109],{},[356,5097,5098,5099,5101],{},"Avatars in a ",[326,5100,4967],{}," are opaque."," Initials and the \"+N\" overflow\navatar used a 25% transparent background, so the image they overlap showed\nthrough. The group now defaults to ",[326,5104,5105],{},"variant=\"tonal\"",", the same tint made\nopaque; pass ",[326,5108,4253],{}," for the previous look.",[353,5111,5112,359,5119,5122,5123,5126,5127,5129],{},[356,5113,5114,5115,5118],{},"Easing curves no longer have ",[326,5116,5117],{},"cubic-bezier()"," fallbacks.",[326,5120,5121],{},"linear()"," is\nsupported in every current browser, so the 25 ",[326,5124,5125],{},"@supports"," blocks that swapped\nthem in are gone and each component declares its curve once. Browsers\nwithout ",[326,5128,5121],{}," support (before Chrome 113, Firefox 112 and Safari 17.2)\nnow skip those transitions instead of using a simpler curve.",[353,5131,5132,5135,5136,401,5139,401,5142,700,5145,5148,5149,5152],{},[356,5133,5134],{},"Reduced motion calms the overshooting curves."," Under\n",[326,5137,5138],{},"prefers-reduced-motion: reduce",[326,5140,5141],{},"--ease-spring",[326,5143,5144],{},"--ease-overshoot-soft",[326,5146,5147],{},"--ease-bounce"," resolve to ",[326,5150,5151],{},"--ease-decelerate",", so dialogs, dropdowns,\navatars and the rest of the components using them settle without overshooting\nor bouncing.",[353,5154,5155,5163,5164,5167,5168,5171,5172,5175],{},[356,5156,5157,5158,5160,5161,392],{},"Font sizes are in ",[326,5159,2590],{},", not ",[326,5162,2604],{}," The 17 remaining pixel font sizes\n(body text, buttons, tables, tooltips, badges, icons) render the same at the\ndefault browser size and now follow the user's font-size setting. If your\nsite changes the root font size (e.g. ",[326,5165,5166],{},"html { font-size: 62.5% }","), these\nnow scale with it like the spacing and ",[326,5169,5170],{},"--fs-*"," tokens already did: body\ntext set to ",[326,5173,5174],{},".875rem"," renders at 8.75px with a 10px root.",[353,5177,5178,5184,5185,5188,5189,5192,5193,392],{},[356,5179,5180,5181,392],{},"Full-height layouts use ",[326,5182,5183],{},"dvh"," The sidebar, dialogs, the PrimeVue dialog\nand ",[326,5186,5187],{},".pane-content"," size themselves with dynamic viewport units, so mobile\nbrowser toolbars no longer push them past the visible area. The ",[326,5190,5191],{},".vh-*","\nutilities keep ",[326,5194,5195],{},"vh",[353,5197,5198,5207,5208,5211,5212,329,5215,5217,5218,392],{},[356,5199,5200,5203,5204,392],{},[326,5201,5202],{},"--fs-xs"," no longer shrinks below ",[326,5205,5206],{},"--fs-2xs"," Its minimum was ",[326,5209,5210],{},"0.60rem",",\nsmaller than ",[326,5213,5214],{},"--fs-3xs",[326,5216,5206],{},", so on narrow screens \"xs\" text\nrendered smaller than the steps below it. The minimum is now ",[326,5219,5220],{},"0.75rem",[353,5222,5223,1169,5232,401,5235,5238,5239,700,5242,5245],{},[356,5224,5225,329,5228,5231],{},[326,5226,5227],{},"border-white",[326,5229,5230],{},"border-dark"," use the brand color tokens",[326,5233,5234],{},"--color-brand-white-500",[326,5236,5237],{},"--color-brand-dark-500","), like ",[326,5240,5241],{},"text-white",[326,5243,5244],{},"text-dark",", instead of compiled SCSS colors.",[345,5247,3659],{"id":5248},"fixed-2",[350,5250,5251,5268,5286,5310],{},[353,5252,5253,5256,5257,5260,5261,5264,5265,392],{},[356,5254,5255],{},"Focused inputs are visible in forced-colors mode."," Form controls drew\ntheir focus ring with ",[326,5258,5259],{},"box-shadow"," and removed the outline; forced-colors\nmode (Windows High Contrast) drops box-shadows, so focus disappeared. They\nnow add a ",[326,5262,5263],{},"Highlight"," outline under ",[326,5266,5267],{},"@media (forced-colors: active)",[353,5269,5270,5273,5276,5277,5279,5281,5282,5285],{},[356,5271,5272],{},"The progress bar transition always has a duration.",[326,5274,5275],{},"--_progress-easing-duration"," was only declared inside the ",[326,5278,5121],{},[326,5280,5125],{}," block; it is now part of ",[326,5283,5284],{},".progress","'s defaults.",[353,5287,5288,5294,5295,5298,5299,5302,5303,5306,5307,392],{},[356,5289,5290,5293],{},[326,5291,5292],{},"border-animated"," glows without a gradient preset."," Its glow is a\n",[326,5296,5297],{},"conic-gradient()"," of ",[326,5300,5301],{},"--_border-gradient",", which only the ",[326,5304,5305],{},"gradient-{name}","\nclasses set, so on its own the gradient was invalid, the background was\ndropped and nothing showed. It now defaults to the same primary gradient as\n",[326,5308,5309],{},"border-gradient",[353,5311,5312,5317,5318,700,5321,5324,5325,5328,5329,5332,5333,5336,5337,5339,5340,5343],{},[356,5313,5314,5316],{},[326,5315,5292],{}," stops spinning under reduced motion."," Its ",[326,5319,5320],{},"::before",[326,5322,5323],{},"::after"," ran ",[326,5326,5327],{},"angle-spin"," with no ",[326,5330,5331],{},"prefers-reduced-motion"," check, unlike\n",[326,5334,5335],{},"border-gradient-spin",". Under ",[326,5338,5138],{}," the animation\nis now ",[326,5341,5342],{},"none",", so the glow stays still at its starting angle.",[340,5345,5347],{"id":5346},"_261","2.6.1",[345,5349,3659],{"id":5350},"fixed-3",[350,5352,5353,5366,5383,5400,5412,5431,5475],{},[353,5354,5355,359,5358,5361,5362,5365],{},[356,5356,5357],{},"Shimmer skeletons render again.",[326,5359,5360],{},".skeleton-shimmer"," built its gradient\nfrom ",[326,5363,5364],{},"--theme-muted-a5",", a token that doesn't exist, so the whole background\nwas dropped and the skeleton was invisible. The highlight is now the muted\ntone at half opacity.",[353,5367,5368,5371,5372,5375,5376,5379,5380,5382],{},[356,5369,5370],{},"The segmented control's easing variable is spelled correctly."," It was\ndeclared as ",[326,5373,5374],{},"--_sc_easing-in"," but read as ",[326,5377,5378],{},"--_sc-easing-in",", so browsers\nwithout ",[326,5381,5121],{}," support got no transition.",[353,5384,5385,5388,5389,5392,5393,5396,5397,392],{},[356,5386,5387],{},"The side-sheet dialog's fallback animation uses an easing curve."," Its\n",[326,5390,5391],{},"animation-timing-function"," read ",[326,5394,5395],{},"--_dialog-easing-duration"," (a duration)\ninstead of ",[326,5398,5399],{},"--_dialog-easing-in",[353,5401,5402,5405,5406,5409,5410,392],{},[356,5403,5404],{},"The active menu-tools subtitle in the navbar is primary-colored."," It\nreferenced ",[326,5407,5408],{},"--theme-primary-a0",", which doesn't exist; it now uses\n",[326,5411,2750],{},[353,5413,5414,5417,5418,829,5421,5424,5425,829,5428,392],{},[356,5415,5416],{},"The navigation bar's reduced-motion indicator fades with its own easing.","\nIt referenced the undefined ",[326,5419,5420],{},"--easing-in",[326,5422,5423],{},"--easing-out","; it now uses\n",[326,5426,5427],{},"--_navigation-bar-easing-in",[326,5429,5430],{},"--_navigation-bar-easing-out",[353,5432,5433,5436,5472,5474],{},[356,5434,5435],{},"Private variables that were declared but ignored now apply:",[350,5437,5438,5450,5456,5462],{},[353,5439,5440,5443,5444,5447,5448,392],{},[326,5441,5442],{},"--_drawer-radius"," sets the sidebar's corners. It held the wrong corners\nand the radius was written directly; ",[326,5445,5446],{},"drawer-bordered"," sets it to ",[326,5449,2918],{},[353,5451,5452,5455],{},[326,5453,5454],{},"--_dropdown-shadow"," sets the dropdown panel's shadow.",[353,5457,5458,5461],{},[326,5459,5460],{},"--_table-border-color"," sets every table border.",[353,5463,5464,5467,5468,5471],{},[326,5465,5466],{},"--_form-check-input-active-border-color"," (previously the misspelled\n",[326,5469,5470],{},"--_form-check-input-activeborder-color",") sets a checked input's border.",[3593,5473],{},"Their defaults match what rendered before, so nothing changes visually\nunless you override them.",[353,5476,5477,5482,5485,5486,5488,5489,392],{},[356,5478,5479,5481],{},[326,5480,1323],{}," no longer emits an invalid border.",[326,5483,5484],{},"--_icon-wrap-border-size"," defaulted to ",[326,5487,5342],{},", which isn't a width; it is\nnow ",[326,5490,2918],{},[340,5492,5494],{"id":5493},"_260","2.6.0",[345,5496,348],{"id":5497},"added-3",[350,5499,5500,5519,5538,5582,5603],{},[353,5501,5502,359,5509,5511,5512,5515,5516,5518],{},[356,5503,5504,5506,5507,3171],{},[326,5505,594],{}," takes a ",[326,5508,695],{},[326,5510,2222],{}," adds ",[326,5513,5514],{},".tabs-sm",", which puts the\ntab buttons back on the default button height, padding, icon size and font\nsize instead of the larger tab defaults. ",[326,5517,2494],{}," (or leaving it unset) keeps the\ncurrent size.",[353,5520,5521,5530,5531,5534,5535,5537],{},[356,5522,3349,5523,5526,5527,5529],{},[326,5524,5525],{},"btn-size"," mixin has an ",[326,5528,2494],{}," step."," It emits the default ",[326,5532,5533],{},".btn","\nsizing, so a component that enlarges its buttons can reset them in one line;\n",[326,5536,5514],{}," uses it.",[353,5539,5540,359,5545,329,5548,5551,5552,329,5555,5558,5559,401,5562,401,5565,401,5568,428,5571,401,5574,5577,5578,5581],{},[356,5541,5542,5544],{},[326,5543,994],{}," toolbar slots.",[326,5546,5547],{},"#actions-start",[326,5549,5550],{},"#actions-end"," add\nyour own buttons to the built-in column button group, before and after it.\n",[326,5553,5554],{},"#column-toggle",[326,5556,5557],{},"#column-manager"," replace the built-in buttons and\nreceive the column state (",[326,5560,5561],{},"columns",[326,5563,5564],{},"allVisible",[326,5566,5567],{},"isVisible",[326,5569,5570],{},"isLocked",[326,5572,5573],{},"toggle",[326,5575,5576],{},"toggleAll",", typed as ",[326,5579,5580],{},"IDatatableColumnSlotProps","), so a custom\ncontrol drives the same visibility logic.",[353,5583,5584,5590,5591,428,5593,401,5595,401,5597,401,5600,5602],{},[356,5585,5586,5506,5588,3171],{},[326,5587,994],{},[326,5589,2828],{}," One object (",[326,5592,4670],{},[326,5594,4469],{},[326,5596,695],{},[326,5598,5599],{},"customClass",[326,5601,785],{},") restyles both built-in toolbar\nbuttons, instead of a prop per button per option.",[353,5604,5605,5611,5612,5615,5616,5619,5620,392],{},[356,5606,5607,5506,5609,3171],{},[326,5608,994],{},[326,5610,2721],{}," It sets the sticky scroll\ncontainer's max height (",[326,5613,5614],{},"sticky-height=\"18rem\"","; a number is read as pixels),\nreplacing the inline ",[326,5617,5618],{},"--_table-sticky-max-height"," style binding. The variable\nstill works and still defaults to ",[326,5621,5622],{},"32rem",[345,5624,2158],{"id":5625},"changed-3",[350,5627,5628,5647],{},[353,5629,5630,5635,5636,5639,5640,5642,5643,5646],{},[356,5631,5632,5634],{},[326,5633,994],{},"'s column manager is an icon-only button."," It shows the\n",[326,5637,5638],{},"view_column"," icon with the same outline, small, ",[326,5641,2510],{}," style as the\ncolumn toggle beside it; ",[326,5644,5645],{},"columnManagerTooltip"," is its tooltip and\naccessible name.",[353,5648,5649,359,5656,5658,5659,5661,5662,5664,5665,5667,5668,392],{},[356,5650,5651,5653,5654,3171],{},[326,5652,3167],{}," reads the shared ",[326,5655,695],{},[326,5657,3175],{}," renders the\ntaller dropbox. The input already inherited ",[326,5660,695],{}," from the base input props\nbut ignored it, so the dropbox had its own ",[326,5663,3170],{}," boolean; ",[326,5666,3170],{}," still\nworks but is deprecated in favour of ",[326,5669,3175],{},[345,5671,2970],{"id":5672},"removed-2",[350,5674,5675],{},[353,5676,5677,5684,5685,392],{},[356,5678,5679,692,5681,3171],{},[326,5680,994],{},[326,5682,5683],{},"columnManagerText"," The column manager button has\nno label anymore; drop the prop, or move the wording to\n",[326,5686,5645],{},[345,5688,3659],{"id":5689},"fixed-4",[350,5691,5692,5707,5725,5742,5775],{},[353,5693,5694,359,5697,5699,5700,5703,5704,5706],{},[356,5695,5696],{},"Text-only tabs are no longer wider on the right.",[326,5698,4882],{}," kept the\nbutton grid's two columns and a ",[326,5701,5702],{},"--space-4"," gap even with nothing in the\nsecond column, adding 4px after the label; a tab with an icon but no badge\ngot the same phantom gap. Tab links now lay out with flex, so the gap only\nsits between items that exist. As a side effect, ",[326,5705,1875],{}," tabs with an icon\ncentre the icon, label and badge together instead of pinning the icon to the\nleft edge.",[353,5708,5709,5718,5719,5721,5722,5724],{},[356,5710,5711,5713,5714,5717],{},[326,5712,994],{},"'s toolbar renders for ",[326,5715,5716],{},"#controls"," alone."," It only rendered\nwhen a column started hidden or ",[326,5720,1611],{}," was on, so a table using\njust the ",[326,5723,5716],{}," slot showed nothing. Any toolbar slot now renders it.",[353,5726,5727,5732,5733,428,5736,401,5738,5741],{},[356,5728,5729,5731],{},[326,5730,994],{}," toolbar ids are unique per table."," The column toggle, column\nmanager and each menu item used fixed ids (",[326,5734,5735],{},"columns-toggle",[326,5737,1611],{},[326,5739,5740],{},"column-\u003Ckey>","), which collided with two tables on one\npage. They are now prefixed with a per-instance id.",[353,5743,5744,5751,5753,5754,2299,5756,5759,5760,1286,5763,5765,5766,700,5769,5772,5773,392],{},[356,5745,5746,329,5748,5750],{},[326,5747,2407],{},[326,5749,2102],{}," no longer share ids.",[326,5752,2407],{}," defaulted ",[326,5755,2557],{},[326,5757,5758],{},"'tooltip'",", so every instance without\nan id rendered ",[326,5761,5762],{},"button-tooltip",[326,5764,2102],{}," built ",[326,5767,5768],{},"-dropdown",[326,5770,5771],{},"-tooltip"," popper ids from an empty id. Both now default to no id and leave\nthe popper id to floating-vue unless you pass one, like ",[326,5774,3277],{},[353,5776,5777,5782],{},[356,5778,5779,5781],{},[326,5780,994],{},"'s default empty-state subtitle reads correctly."," \"Try may\nwant to try…\" is now \"You may want to try…\".",[340,5784,5786],{"id":5785},"_251","2.5.1",[345,5788,348],{"id":5789},"added-4",[350,5791,5792,5833,5851],{},[353,5793,5794,5804,5805,5807,5808,5811,5812,5814,5815,5817,5818,5821,5822,5825,5826,5828,5829,5832],{},[356,5795,5796,401,5798,329,5801,392],{},[326,5797,628],{},[326,5799,5800],{},"UiFooterGroup",[326,5802,5803],{},"UiFooterItem"," The footer styles existed\nin ",[326,5806,328],{}," with nothing rendering them; these cover the brand block,\nthe link groups (column or row) and the links themselves, including the\nplain ",[326,5809,5810],{},".anchor-link"," entry for a group member with no target. ",[326,5813,628],{},"\nsupplies its own container and takes the same ",[326,5816,1875],{}," prop as ",[326,5819,5820],{},"UiNavbar",",\nplus a ",[326,5823,5824],{},"#bottom"," slot for the divided bar under the groups; ",[326,5827,5800],{},"\ntakes ",[326,5830,5831],{},"overline"," for a small uppercase heading.",[353,5834,5835,5839,5840,5843,5844,5846,5847,5850],{},[356,5836,5837,392],{},[326,5838,1208],{}," A page-opening hero: eyebrow, display-sized title,\ndescription and a ",[326,5841,5842],{},"#actions"," slot for CTAs, with ",[326,5845,695],{}," selecting the display\nstep and ",[326,5848,5849],{},"align"," moving the whole block.",[353,5852,5853,5857,5858,5861,5862,5864,5865,5868,5869,5871],{},[356,5854,5855,392],{},[326,5856,1215],{}," A section subheading with an optional description,\nbuilt on ",[326,5859,5860],{},".text-subheading",", with ",[326,5863,4131],{}," to keep the heading order valid, a\n",[326,5866,5867],{},"gutter"," prop for the space below it, and an ",[326,5870,5842],{}," slot for a badge or\ncontrol beside it.",[345,5873,2158],{"id":5874},"changed-4",[350,5876,5877,5899,5939,5956,5981,6002,6020,6032,6067,6088,6101,6131,6170,6198,6207,6216,6251,6274,6287],{},[353,5878,5879,5884,5885,1153,5888,5890,5891,5894,5895,5898],{},[356,5880,5881,5883],{},[326,5882,5860],{}," uses the type tokens."," It picks up\n",[326,5886,5887],{},"--fs-lg--line-height",[326,5889,2737],{}," gutters, and no longer runs the\n",[326,5892,5893],{},"text-variable"," mixin: it sets ",[326,5896,5897],{},"--font-primary"," directly, which every font\nhonours.",[353,5900,5901,359,5904,5907,5908,5911,5912,401,5915,401,5918,5921,5922,2715,5925,329,5928,5931,5932,5934,5935,392],{},[356,5902,5903],{},"Chips split the container from the selected color.",[326,5905,5906],{},".btn-chip"," is the\noutline container and ",[326,5909,5910],{},".chip-elevated"," the raised one; the color classes\n(",[326,5913,5914],{},".chip-primary",[326,5916,5917],{},".chip-secondary",[326,5919,5920],{},".chip-neutral",") only apply together with\n",[326,5923,5924],{},".chip-active",[326,5926,5927],{},".a40",[326,5929,5930],{},".a60"," are removed, and ",[326,5933,5924],{}," no longer\nforces a pill radius. See\n",[335,5936,5938],{"href":5937},"\u002Fmigration#chips-split-the-container-from-the-selected-color","the migration note",[353,5940,5941,5955],{},[356,5942,5943,5945,5946,2299,5949,5952,5953,392],{},[326,5944,1201],{}," renamed ",[326,5947,5948],{},"hideActionsOnMobile",[326,5950,5951],{},"hideActionsWhenNarrow",",\ndefaulting to ",[326,5954,3743],{}," The old name described a device, but the mechanism is\na container query: a narrow header collapses inside a wide window too. The old\ndefault also destroyed the page's primary actions below 700px unless you opted\nout, so hiding them is now something you opt in to; otherwise they wrap below\nthe title.",[353,5957,5958,5967,5968,5970,5971,5973,5974,5976,5977,5980],{},[356,5959,5960,2443,5962,2527,5965,392],{},[326,5961,1201],{},[326,5963,5964],{},"back",[326,5966,2411],{}," Declaring ",[326,5969,2411],{}," as an\nemit meant a consumer's ",[326,5972,2460],{}," never attached as a native listener — it\nfired only for the back button. ",[326,5975,2460],{}," now behaves like any other native\nlistener, and ",[326,5978,5979],{},"@back"," carries the intent.",[353,5982,5983,5994,5995,5998,5999,6001],{},[356,5984,5985,692,5987,5990,5991,392],{},[326,5986,1201],{},[326,5988,5989],{},"containerClass"," accepts ",[326,5992,5993],{},"ClassValue"," It previously\ntook ",[326,5996,5997],{},"string | string[]"," and stringified the object form to ",[326,6000,4595],{},".\nExisting values keep working.",[353,6003,6004,6016,6017,6019],{},[356,6005,6006,692,6009,329,6011,6013,6014,392],{},[326,6007,6008],{},"UiPaneContent",[326,6010,5599],{},[326,6012,5989],{}," accept ",[326,6015,5993],{},"\nSame widening as ",[326,6018,1201],{},"; existing values keep working.",[353,6021,6022,2928,6028,6031],{},[356,6023,6024,6025,392],{},"The page header's back-navigation class is ",[326,6026,6027],{},".page-header-back",[326,6029,6030],{},".page-header-breadcrumb",", which described a component the header does not\nrender. The back button is also centred against the title block now, instead\nof aligning to its top edge.",[353,6033,6034,359,6041,329,6044,6047,6048,6051,6052,6055,6056,6059,6060,6063,6064,392],{},[356,6035,6036,6037,6040],{},"The header's bottom margin moved to ",[326,6038,6039],{},".header-container"," and has its own\ntoken.",[326,6042,6043],{},"--_header-block-end",[326,6045,6046],{},"--_header-back-gap"," split out of\n",[326,6049,6050],{},"--_header-columns-gap",", which was setting the title\u002Factions gap and the space\nbelow the header at once. The margin sat on the inner ",[326,6053,6054],{},".header",", so a padded\nor tinted container trapped it inside its own box and a ",[326,6057,6058],{},"mb-*"," utility on the\ncontainer stacked on top of it. On the container it is a single margin that\nutilities override, since ",[326,6061,6062],{},"utilities"," is layered after ",[326,6065,6066],{},"components",[353,6068,6069,6076,6077,6080,6081,6083,6084,6087],{},[356,6070,6071,6073,6074,3171],{},[326,6072,1201],{}," takes an ",[326,6075,4131],{}," The title was always an ",[326,6078,6079],{},"h1",", so a\npage using the component for its section headers emitted several. It defaults\nto ",[326,6082,6079],{},"; pass ",[326,6085,6086],{},"as=\"h2\""," and below for sections.",[353,6089,6090,6097,6098,392],{},[356,6091,6092,5506,6094,3171],{},[326,6093,1201],{},[326,6095,6096],{},"headline"," It renders a small eyebrow\nlabel above the title with ",[326,6099,6100],{},"caption text-primary",[353,6102,6103,359,6109,6111,6112,6115,6116,1182,6119,6122,6123,6125,6126,439,6128,6130],{},[356,6104,6105,5506,6107,3171],{},[326,6106,1201],{},[326,6108,695],{},[326,6110,2490],{}," (the default, ",[326,6113,6114],{},"--fs-xl",")\nthrough ",[326,6117,6118],{},"2xl",[326,6120,6121],{},"--fs-5xl","), each step also applying the line height the type\nscale pairs with it. ",[326,6124,1208],{}," uses the same ",[326,6127,2490],{},[326,6129,4479],{}," vocabulary on the\ndisplay scale, so one size language covers both.",[353,6132,6133,6139,6140,6143,6144,6143,6147,6150,6151,6153,6154,6157,6158,6160,6161,6163,6164,4020,6167,6169],{},[356,6134,6135,6136,6138],{},"The header title no longer uses the ",[326,6137,5893],{}," mixin, and its 992px\nbreakpoint is gone."," The mixin pinned the title to ",[326,6141,6142],{},"wght","\u002F",[326,6145,6146],{},"GRAD",[326,6148,6149],{},"wdth","\nvariation axes that most families do not ship, and swapped the typeface behind\nan ",[326,6152,5125],{}," test; ",[326,6155,6156],{},"$type-h1"," already gives the ",[326,6159,6079],{}," the same family and\nweight in a way every font honours. The breakpoint then swapped ",[326,6162,6114],{}," for\n",[326,6165,6166],{},"--fs-lg",[326,6168,5170],{}," scale is already fluid, so the title shrank twice\nand landed at 16px on a phone. It now scales once, 20px to 24px.",[353,6171,6172,6181,6182,6185,6186,6189,6190,6193,6194,6197],{},[356,6173,6174,329,6176,4968,6178,3171],{},[326,6175,1201],{},[326,6177,1208],{},[326,6179,6180],{},"viewTransitionName","\nThe header hard-coded ",[326,6183,6184],{},"view-transition-name: selected-header"," on every title\nand ",[326,6187,6188],{},"selected-description"," on every description. A name has to be unique per\ndocument, so a page with more than one header — a page title plus its section\nheaders — made the browser skip the transition entirely rather than run it.\nThe name is also the key pairing two pages, which only the app knows, so it\nis now passed in and nothing is emitted without it. ",[326,6191,6192],{},"contain: paint"," and the\n",[326,6195,6196],{},"fit-content"," inline size come with it instead of applying to every header.",[353,6199,6200,6206],{},[356,6201,6202,6203,392],{},"The footer's gradient underlay, hover radius and rounded top corners, and\n",[326,6204,6205],{},".dialog-highlight"," Both drew a gradient through a pseudo-element; the\nfooter also squared its top corners on hover, and its corners are now flat\nwith no radius transition left to animate.",[353,6208,6209,6215],{},[356,6210,6211,6214],{},[326,6212,6213],{},".footer-row"," declares its own direction."," It set a custom property the\nbase rule never read, so a row group was horizontal only because that is the\nflex default. A row group with a title now keeps the heading on its own line\ninstead of inline with the links.",[353,6217,6218,6221,401,6224,329,6227,6230,6231,329,6234,6237,6238,2692,6240,2692,6242,6244,6245,6247,6248,392],{},[356,6219,6220],{},"Card surfaces are static and interaction is its own class.",[326,6222,6223],{},".card-outline",[326,6225,6226],{},".card-pane",[326,6228,6229],{},".card-elevated"," now only describe the\nsurface; ",[326,6232,6233],{},".card-selectable",[326,6235,6236],{},".card-link"," carry every hover, press and\nfocus state, including the elevated card's ",[326,6239,2490],{},[326,6241,2494],{},[326,6243,2498],{}," shadow\nescalation. A plain elevated card previously animated its shadow with nothing\nclickable behind it. ",[326,6246,6236],{}," also picks up the same background feedback\nas a selectable card, which it had diverged from. See\n",[335,6249,5938],{"href":6250},"\u002Fmigration#card-surfaces-are-static-and-interaction-is-its-own-class",[353,6252,6253,6256,6257,6260,6261,6263,6264,829,6267,6270,6271,6273],{},[356,6254,6255],{},"The selectable card keeps its variant's border and its own radius."," It set\na 2px transparent border to reserve room for the selected ring; with\n",[326,6258,6259],{},"box-sizing: border-box"," the outer box never moved anyway, so the ring is a\n1px border that matches a static ",[326,6262,6223],{}," beside it. The selected and\npressed states also hard-coded ",[326,6265,6266],{},"$rounded-lg",[326,6268,6269],{},"$rounded-xl",", which ignored a\nconfigured ",[326,6272,745],{}," — on a 4px theme, clicking a card ran it\n4px → 25px → 12px and left it there. The radius no longer changes.",[353,6275,6276,6282,6283,6286],{},[356,6277,6278,6279,392],{},"The selectable card's ring answers ",[326,6280,6281],{},":focus-visible"," It was ",[326,6284,6285],{},":focus",", so\na mouse click left the ring on the card until it lost focus.",[353,6288,6289,6292,6293,6296],{},[356,6290,6291],{},"The selectable card's hover lift is 4px."," It was 8px, which read as a\ndrag rather than a hover; ",[326,6294,6295],{},"card-sm"," steps down to 2px alongside it.",[345,6298,2970],{"id":6299},"removed-3",[350,6301,6302,6314,6332,6346],{},[353,6303,6304,6310,6311,6313],{},[356,6305,6306,692,6308,3171],{},[326,6307,1201],{},[326,6309,4538],{}," Filling the ",[326,6312,5842],{}," slot is the\nsignal; passing the slot without the flag used to render nothing, silently.",[353,6315,6316,6321,6322,6324,6325,329,6328,6331],{},[356,6317,6318,392],{},[326,6319,6320],{},".subheading-m2"," It set the same gutter ",[326,6323,5860],{}," already\ndefaults to, so it never changed anything, and the reference documented it as\na \"large margin\" it could not produce. ",[326,6326,6327],{},"subheading-m1",[326,6329,6330],{},"subheading-m0","\nstay for a tighter gutter or none.",[353,6333,6334,6342,6343,6345],{},[356,6335,6336,692,6338,6341],{},[326,6337,332],{},[326,6339,6340],{},".\u002Fstyle.css"," export."," The package no longer emits a\nstylesheet: its one scoped style block moved into ",[326,6344,328],{},", which every\nconsumer already loads. Nothing referenced the export, and it now pointed at a\nfile that is not built.",[353,6347,6348,6361],{},[356,6349,6350,6353,6354,829,6357,6360],{},[326,6351,6352],{},".page-header-featured"," and the header's ",[326,6355,6356],{},".col-heading",[326,6358,6359],{},".col-actions","\nrules."," None of them had any markup behind them: the featured badge block\nstyled a composition no component rendered, and the two media queries targeted\nclasses that exist nowhere. The back-navigation and actions layouts are\nunaffected.",[345,6363,3659],{"id":6364},"fixed-5",[350,6366,6367,6382,6398,6423,6468],{},[353,6368,6369,6377,6378,6381],{},[356,6370,6371,829,6373,6376],{},[326,6372,6330],{},[326,6374,6375],{},"m1"," now move the space below the block."," The modifiers\nset ",[326,6379,6380],{},"--_text-subheading-gutter"," on the heading, and a custom property never\nreaches a sibling, so the description below kept its default margin whichever\nmodifier was applied. Each modifier now also sets the description's margin.",[353,6383,6384,6387,6388,6390,6391,6394,6395,392],{},[356,6385,6386],{},"The title-to-description gap no longer follows the gutter."," It was half the\ngutter, so tightening the space below the block squeezed the title against its\nown description — 2px at ",[326,6389,6327],{},". It is now its own\n",[326,6392,6393],{},"--_text-subheading-gap",", fixed at ",[326,6396,6397],{},"--space-8",[353,6399,6400,6405,329,6408,6411,6412,6414,6415,6418,6419,6422],{},[356,6401,6402,6404],{},[326,6403,6233],{}," no longer erases the variant's border.",[326,6406,6407],{},".card-outline.card-selectable",[326,6409,6410],{},".card-frosted.card-selectable"," matched at\nthe same specificity, and ",[326,6413,6233],{}," came last in the file, so its\n",[326,6416,6417],{},"--_card-border-color: transparent"," won and the card rendered with no outline\nat all until it was pressed or selected. It no longer declares the colour at\nrest, which the base ",[326,6420,6421],{},".card"," already defaults to transparent.",[353,6424,6425,359,6428,700,6430,6432,6433,6436,6437,6439,6440,6443,6444,6143,6446,6448,6449,6451,6452,6455,6456,6458,6459,6461,6462,6464,6465,6467],{},[356,6426,6427],{},"An interactive card's transitions all run.",[326,6429,6233],{},[326,6431,6236],{}," each declared their own ",[326,6434,6435],{},"transition",", so on a card that was both\n— which ",[326,6438,2648],{}," produces whenever ",[326,6441,6442],{},"selectable"," meets ",[326,6445,4125],{},[326,6447,4128],{}," — the\nlater rule won and the lift and the ring never animated. ",[326,6450,5259],{}," was also\nmissing from the selectable list, so an elevated card jumped straight to its\nhover shadow. One shared declaration now covers every interactive card.\n",[326,6453,6454],{},"--_card-easing-in"," also has its non-",[326,6457,5121],{}," fallback back: it was only\ndefined inside the ",[326,6460,5125],{}," block, and an undefined custom property in a\n",[326,6463,6435],{}," makes the whole declaration invalid at computed-value time, so\nwithout ",[326,6466,5121],{}," support the card had no transition at all.",[353,6469,6470,6477,6478,6481,6482,6485,6486,6489],{},[356,6471,6472,6473,6476],{},"A ",[326,6474,6475],{},"card-pane"," card gives hover feedback in light mode."," The shared hover\nsteps the background to ",[326,6479,6480],{},"--theme-surface-overlay",", which resolves to the same\nwhite as the pane's own surface in a light theme — an interactive pane card\nchanged nothing under the pointer. Pane now steps to ",[326,6483,6484],{},"--theme-surface-a30",",\nwhich contrasts in both schemes, and carries its own press step so ",[326,6487,6488],{},":active","\nis not outranked by it.",[6491,6492,6494],"h4",{"id":6493},"the-page-header-title-scales-down-again","The page header title scales down again",[322,6496,6497,6499,6500,6502,6503,6506,6507,6510,6511,6514,6515,6517],{},[326,6498,6054],{}," stepped its title down to ",[326,6501,6166],{}," below 992px through\n",[326,6504,6505],{},":where(.col-heading h1:is(.text-title))"," — a selector that matched nothing, and\nwhose ",[326,6508,6509],{},":where()"," wrapper would have given it zero specificity even if it had.\nThe size now flows through ",[326,6512,6513],{},"--_header-title-size",", overridden inside the\n",[326,6516,6054],{}," rule itself, so it carries the same specificity as the value it\nreplaces.",[6491,6519,6521],{"id":6520},"the-headers-view-transitions-actually-apply","The header's view transitions actually apply",[322,6523,6524,401,6527,1153,6529,6531,6532,829,6535,6538,6539,692,6541,6544,6545,6548],{},[326,6525,6526],{},"view-transition-name",[326,6528,6192],{},[326,6530,6196],{}," inline size for\n",[326,6533,6534],{},".text-title",[326,6536,6537],{},".text-description"," lived in a Vue scoped style block that\ncompiled to ",[326,6540,332],{},[326,6542,6543],{},"dist\u002Fui.css"," — a file nothing imported, so the\ndeclarations never reached the page. They now live here in ",[326,6546,6547],{},"_header.scss","\nalongside the rest of the header rules.",[6491,6550,6552],{"id":6551},"connected-groups-no-longer-flatten-their-inner-corners","Connected groups no longer flatten their inner corners",[322,6554,6555,6556,6558,6559,6562,6563,6566,6567,6570,6571,6574],{},"The rounded end of ",[326,6557,4682],{}," came from a fixed\n",[326,6560,6561],{},"--_btn-connected-radius: 50px",". On a 32px-tall button that is 50px + 50px down\none side against a 32px box, and the spec answer to radii that overflow a side\nis to scale ",[356,6564,6565],{},"every corner of that element"," by the same factor — here\n",[326,6568,6569],{},"32 \u002F 100",". The first button's inner corners, asking for the 4px of\n",[326,6572,6573],{},"--_btn-radius",", rendered at 1.3px and read as square next to their siblings:",[6576,6577,6582],"pre",{"className":6578,"code":6580,"language":6581},[6579],"language-text","before   first: 50, 1.3, 1.3, 50   middle: 4, 4, 4, 4\nafter    first: 16, 4,   4,   16   middle: 4, 4, 4, 4\n","text",[326,6583,6580],{"__ignoreMap":6584},"",[322,6586,6587],{},"The radius is now derived from the button instead of hard-coded:",[6576,6589,6593],{"className":6590,"code":6591,"language":6592,"meta":6584,"style":6584},"language-scss shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".btn-group-connected .btn {\n  --_btn-connected-radius: calc(var(--_btn-height) \u002F 2);\n}\n","scss",[326,6594,6595,6616,6654],{"__ignoreMap":6584},[6596,6597,6600,6603,6607,6610,6613],"span",{"class":6598,"line":6599},"line",1,[6596,6601,392],{"class":6602},"sMK4o",[6596,6604,6606],{"class":6605},"sBMFI","btn-group-connected",[6596,6608,6609],{"class":6602}," .",[6596,6611,6612],{"class":6605},"btn",[6596,6614,6615],{"class":6602}," {\n",[6596,6617,6619,6623,6626,6630,6633,6636,6638,6641,6644,6647,6651],{"class":6598,"line":6618},2,[6596,6620,6622],{"class":6621},"sTEyZ","  --_btn-connected-radius",[6596,6624,6625],{"class":6602},":",[6596,6627,6629],{"class":6628},"s2Zo4"," calc",[6596,6631,6632],{"class":6602},"(",[6596,6634,6635],{"class":6628},"var",[6596,6637,6632],{"class":6602},[6596,6639,6640],{"class":6621},"--_btn-height",[6596,6642,6643],{"class":6602},")",[6596,6645,6646],{"class":6602}," \u002F",[6596,6648,6650],{"class":6649},"sbssI"," 2",[6596,6652,6653],{"class":6602},");\n",[6596,6655,6657],{"class":6598,"line":6656},3,[6596,6658,6659],{"class":6602},"}\n",[322,6661,6662,6663,3830,6665,6668,6669,428,6671,329,6673,6676],{},"The two radii on a side then sum to exactly ",[326,6664,6640],{},[326,6666,6667],{},"min-height","\nguarantees is never taller than the button, so the scale factor stays 1 and the\ninner corners keep their own value. It also tracks the size variants — ",[326,6670,4692],{},[326,6672,4696],{},[326,6674,6675],{},"btn-icon"," each get the pill that fits them.",[6678,6679,6680,6681,6684,6685,6688],"note",{},"If you set ",[326,6682,6683],{},"--_btn-connected-radius"," yourself, move it onto the buttons\n(",[326,6686,6687],{},".btn-group-connected .btn",") — a declaration on the group is now shadowed by\nthe one above.",[6491,6690,6692],{"id":6691},"vertical-connected-groups-follow-the-button-radius","Vertical connected groups follow the button radius",[322,6694,6695,6698,6699,2527,6701,6703,6704,6706,6707,6709,6710,6713],{},[326,6696,6697],{},".btn-group-vertical.btn-group-connected"," had three separate mismatches: middle\nbuttons were pinned to ",[326,6700,2863],{},[326,6702,6573],{},", so a\ngroup of ",[326,6705,4692],{}," got 8px corners where the horizontal variant gave 4px; the\nfirst and last button squared their inner corners to ",[326,6708,2918],{},", although the group is\nseparated by a gap; and the joined variant set ",[326,6711,6712],{},"border-radius: 0"," as a shorthand\nthat outranked the end rules, so vertical joined groups lost their pill ends\nentirely. All three now behave like the horizontal variant.",[340,6715,6717],{"id":6716},"_250","2.5.0",[345,6719,2158],{"id":6720},"changed-5",[350,6722,6723,6731],{},[353,6724,6725,6726,6728,6729,392],{},"Every spacing and font-size value moved onto ",[326,6727,469],{}," design tokens, with the\nold names kept as deprecated aliases. See the\n",[335,6730,337],{"href":309},[353,6732,6733,6734,392],{},"Tabs draw their active state with an anchored indicator element, the popover\nmenu renders as a native popover, and its default header no longer draws the\navatar block. See\n",[335,6735,6737],{"href":6736},"\u002Fmigration#new-in-25-breaking-for-hand-written-markup","new in 2.5",[6739,6740,6741],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":6584,"searchDepth":6618,"depth":6618,"links":6743},[6744,6750,6756,6761,6764,6770,6776],{"id":342,"depth":6618,"text":343,"children":6745},[6746,6747,6748,6749],{"id":347,"depth":6656,"text":348},{"id":2157,"depth":6656,"text":2158},{"id":2969,"depth":6656,"text":2970},{"id":3658,"depth":6656,"text":3659},{"id":4700,"depth":6618,"text":4701,"children":6751},[6752,6753,6754,6755],{"id":4704,"depth":6656,"text":348},{"id":4752,"depth":6656,"text":2158},{"id":4825,"depth":6656,"text":2970},{"id":4854,"depth":6656,"text":3659},{"id":4926,"depth":6618,"text":4927,"children":6757},[6758,6759,6760],{"id":4930,"depth":6656,"text":348},{"id":5091,"depth":6656,"text":2158},{"id":5248,"depth":6656,"text":3659},{"id":5346,"depth":6618,"text":5347,"children":6762},[6763],{"id":5350,"depth":6656,"text":3659},{"id":5493,"depth":6618,"text":5494,"children":6765},[6766,6767,6768,6769],{"id":5497,"depth":6656,"text":348},{"id":5625,"depth":6656,"text":2158},{"id":5672,"depth":6656,"text":2970},{"id":5689,"depth":6656,"text":3659},{"id":5785,"depth":6618,"text":5786,"children":6771},[6772,6773,6774,6775],{"id":5789,"depth":6656,"text":348},{"id":5874,"depth":6656,"text":2158},{"id":6299,"depth":6656,"text":2970},{"id":6364,"depth":6656,"text":3659},{"id":6716,"depth":6618,"text":6717,"children":6777},[6778],{"id":6720,"depth":6656,"text":2158},"Notable changes to Colorffy CSS and Colorffy UI, newest first.",null,{},{"icon":291},{"title":313,"description":6779},"namITyeggg35WC--0aLChvGGFCgndi8c0moEy3p4f6A",[6786,6780],{"title":308,"path":309,"stem":310,"description":6787,"icon":311,"children":-1},"Upgrade to 3.0, and the token changes from 2.0 to 2.5.",1791247316601]