changelog.txt

1:"$Sreact.fragment"
3:I[672913,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"default"]
4:I[893277,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"default"]
6:I[643594,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"OutletBoundary"]
7:"$Sreact.suspense"
a:I[643594,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"ViewportBoundary"]
c:I[643594,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"MetadataBoundary"]
e:I[491590,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"default",1]
:HL["/_next/static/chunks/0tnw~7b.63~al.css","style"]
:HL["/_next/static/chunks/06m9bcip000mn.css","style"]
:HL["/_next/static/chunks/0-mkqzn5q716v.css","style"]
:HL["/_next/static/chunks/0gydkq.yb78d4.css","style"]
0:{"P":null,"c":["","changelog"],"q":"","i":false,"f":[[["",{"children":["changelog",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",16],[["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/0tnw~7b.63~al.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/chunks/06m9bcip000mn.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/_next/static/chunks/0-mkqzn5q716v.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/0y6df42ymgr.v.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/chunks/0vrcwaok~j0q9.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/chunks/10pen.bi_vs3z.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/_next/static/chunks/0len.np11rgvj.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/_next/static/chunks/10fwo3cl093m2.js","async":true,"nonce":"$undefined"}]],"$L2"]}],{"children":[["$","$1","c",{"children":[null,["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":[["$","$1","c",{"children":[[["$","h1",null,{"className":"mdx-module__YUQVZa__h1","children":"Changelog"}],"\n","$L5","\n",["$","h2",null,{"id":"version-010","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-010","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.1.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"We're excited to share the initial release of Backstage UI 💚 In this first alpha version,\nyou'll find the foundation of our design system: a set of versatile layout components\nand a handful of essential atomic elements to help you get started. While Backstage UI is\nstill in its early stages, it's ready for exploration and we'd love for you to give\nit a try and share your feedback."}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/0gydkq.yb78d4.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/13p6wrl03ngu-.js","async":true,"nonce":"$undefined"}]],["$","$L6",null,{"children":["$","$7",null,{"name":"Next.MetadataOutlet","children":"$@8"}]}]]}],{},null,false,null]},null,false,"$@9"]},null,false,null],["$","$1","h",{"children":[null,["$","$La",null,{"children":"$Lb"}],["$","div",null,{"hidden":true,"children":["$","$Lc",null,{"children":["$","$7",null,{"name":"Next.Metadata","children":"$Ld"}]}]}],null]}],false]],"m":"$undefined","G":["$e",[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/0tnw~7b.63~al.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/chunks/06m9bcip000mn.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/_next/static/chunks/0-mkqzn5q716v.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]]],"S":true,"h":null,"s":"$undefined","l":"$undefined","p":"$undefined","d":"$undefined","b":"5VfxghUy7PdgVY6-oOprh"}
f:[]
9:"$Wf"
5:[["$","h2",null,{"id":"version-0140","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-0140","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.14.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}],"\n",["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}],"\n",["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Header"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Header"}]," component's ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"tabs"}]," prop now uses ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"HeaderNavTabItem[]"}]," instead of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"HeaderTab[]"}],". Tabs render as a ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"<nav>"}]," element with links and optional dropdown menus instead of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"role=\"tablist\""}],". A new ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"activeTabId"}]," prop controls which tab is highlighted. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33527","className":"mdx-module__YUQVZa__a","children":"#33527"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n","$L10","\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Dropped support for React 17. The minimum supported React version is now 18. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33422","className":"mdx-module__YUQVZa__a","children":"#33422"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n","$L11","\n","$L12","\n","$L13","\n"]}],"\n","$L14","\n"]}],"\n","$L15","\n","$L16","\n","$L17","\n","$L18","\n","$L19","\n","$L1a","\n","$L1b","\n","$L1c","\n","$L1d","\n","$L1e","\n","$L1f","\n","$L20","\n","$L21","\n","$L22","\n","$L23","\n","$L24","\n","$L25","\n","$L26","\n","$L27","\n","$L28","\n","$L29","\n","$L2a","\n","$L2b","\n","$L2c","\n","$L2d","\n","$L2e","\n","$L2f","\n","$L30","\n","$L31","\n","$L32","\n","$L33","\n","$L34","\n","$L35","\n","$L36","\n","$L37","\n","$L38","\n","$L39","\n","$L3a","\n","$L3b","\n","$L3c","\n","$L3d","\n","$L3e","\n","$L3f","\n","$L40","\n","$L41","\n","$L42","\n","$L43","\n","$L44","\n","$L45","\n","$L46","\n","$L47","\n","$L48","\n","$L49","\n","$L4a","\n","$L4b","\n","$L4c","\n","$L4d","\n","$L4e","\n","$L4f","\n","$L50","\n","$L51","\n","$L52","\n","$L53","\n","$L54","\n","$L55","\n","$L56","\n","$L57","\n","$L58","\n","$L59","\n","$L5a","\n","$L5b","\n","$L5c","\n","$L5d","\n","$L5e","\n","$L5f","\n","$L60","\n","$L61","\n","$L62","\n","$L63","\n","$L64","\n","$L65","\n","$L66","\n","$L67"]
11:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Header"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Tab ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," values in the Header component are now resolved through the router context instead of being passed raw to the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"<a>"}]," tag. This means relative ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," values (e.g. ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"sub3"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"./sub4"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"../catalog"}],") are now resolved against the current route, and absolute ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," values may be affected by the router's ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"basename"}]," configuration. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33783","className":"mdx-module__YUQVZa__a","children":"#33783"}]]}]
12:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}]
13:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Tab navigation should work the same for absolute ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," values in most setups. If you use relative ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," values in tabs, verify they resolve as expected. If your app configures a router ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"basename"}],", check that absolute tab ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," values still navigate correctly."]}]
14:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"PluginHeader"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Removed the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"toolbarWrapper"}]," element from ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeader"}]," and dropped ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"toolbarWrapper"}]," from ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeaderDefinition.classNames"}],". Toolbar layout styles now live on ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"toolbar"}]," (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":".bui-PluginHeaderToolbar"}],")."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","strong",null,{"children":"Migration:"}]," Update custom CSS that targeted ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":".bui-PluginHeaderToolbarWrapper"}]," to use ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":".bui-PluginHeaderToolbar"}]," instead. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33504","className":"mdx-module__YUQVZa__a","children":"#33504"}]]}],"\n"]}]
15:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
16:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Badge"}]," Added new ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Badge"}]," component for non-interactive labeling and categorization of content. It shares the visual appearance of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Tag"}]," but renders as a plain DOM element with no interactive states. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33744","className":"mdx-module__YUQVZa__a","children":"#33744"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Bumped ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"glob"}]," dependency from v7/v8/v11 to v13 to address security vulnerabilities in older versions. Bumped ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"rollup"}]," from v4.27 to v4.59+ to fix a high severity path traversal vulnerability (GHSA-mw96-cpmx-2vgc). ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33687","className":"mdx-module__YUQVZa__a","children":"#33687"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Resolved route-relative ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," props to absolute paths by default in all components, removing the need for the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"resolveHref"}]," option in component definitions. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33804","className":"mdx-module__YUQVZa__a","children":"#33804"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Header"}]," Added automatic active tab detection to the Header component. When ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"activeTabId"}]," is omitted, the active tab is now auto-detected from the current route using ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"matchRoutes"}],". Pass an explicit ","$L68"," to override, or ","$L69"," for no active tab. ","$L6a"]}],"\n"]}],"\n","$L6b","\n","$L6c","\n","$L6d","\n","$L6e","\n","$L6f","\n","$L70","\n","$L71","\n","$L72","\n","$L73","\n","$L74","\n","$L75","\n","$L76","\n","$L77","\n","$L78","\n","$L79","\n","$L7a","\n","$L7b","\n","$L7c","\n"]}]
17:["$","h2",null,{"id":"version-0130","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-0130","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.13.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
18:["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
19:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Box"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Flex"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Grid"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Card"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Accordion"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Popover"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tooltip"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Dialog"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Menu"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Simplified the neutral background prop API for container components. The explicit ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"neutral-1"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"neutral-2"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"neutral-3"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"neutral-auto"}]," values have been removed from ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ProviderBg"}],". They are replaced by a single ","$L7d"," value that always auto-increments from the parent context, making it impossible to skip or pin to an explicit neutral level. ","$L7e"]}],"\n","$L7f","\n","$L80","\n","$L81","\n"]}],"\n","$L82","\n","$L83","\n","$L84","\n","$L85","\n","$L86","\n","$L87","\n"]}]
1a:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
1b:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"List"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ListRow"}]," Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"List"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ListRow"}]," components. These provide a standalone, accessible list of interactive rows built on top of React Aria's ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"GridList"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"GridListItem"}]," primitives. Rows support icons, descriptions, actions, menus, and single or multiple selection modes. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33358","className":"mdx-module__YUQVZa__a","children":"#33358"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Accordion"}]," Made Accordion a ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg"}]," provider so nested components like Button auto-increment their background level. Updated ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useDefinition"}]," to resolve ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg"}]," ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"propDef"}]," defaults for provider components. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32935","className":"mdx-module__YUQVZa__a","children":"#32935"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Card"}]," Added interactive support to the ","$L88"," component. Pass ","$L89"," to make the entire card surface pressable, or ","$L8a"," to make it navigate to a URL. A transparent overlay handles the interaction while nested buttons and links remain independently clickable. ","$L8b"]}],"\n"]}],"\n","$L8c","\n","$L8d","\n","$L8e","\n","$L8f","\n","$L90","\n","$L91","\n","$L92","\n","$L93","\n","$L94","\n","$L95","\n","$L96","\n","$L97","\n","$L98","\n","$L99","\n","$L9a","\n","$L9b","\n","$L9c","\n","$L9d","\n","$L9e","\n","$L9f","\n","$La0","\n","$La1","\n","$La2","\n","$La3","\n","$La4","\n","$La5","\n","$La6","\n","$La7","\n","$La8","\n","$La9","\n","$Laa","\n","$Lab","\n","$Lac","\n","$Lad","\n","$Lae","\n","$Laf","\n","$Lb0","\n","$Lb1","\n","$Lb2","\n","$Lb3","\n","$Lb4","\n","$Lb5","\n"]}]
1c:["$","h2",null,{"id":"version-0120","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-0120","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.12.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
1d:["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
1e:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Alert"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Alert no longer accepts a ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"surface"}]," prop"]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The Alert component's background is now driven entirely by its ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"status"}]," prop. The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"surface"}]," prop has been removed."]}],"\n","$Lb6","\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Removed gray scale tokens and renamed background surface tokens to neutral tokens"]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-gray-1"}]," through ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-gray-8"}]," tokens have been removed. The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-surface-*"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-neutral-on-surface-*"}]," tokens have been replaced by a unified ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-neutral-*"}]," scale. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32723","className":"mdx-module__YUQVZa__a","children":"#32723"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Replace surface tokens directly:"}],"\n","$Lb7","\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Replace on-surface tokens shifted by +1:"}],"\n","$Lb8","\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Replace gray tokens 1-4 with neutral equivalents (","$Lb9"," through ","$Lba"," have no direct replacement):"]}],"\n","$Lbb","\n"]}],"\n","$Lbc","\n","$Lbd","\n","$Lbe","\n","$Lbf","\n","$Lc0","\n","$Lc1","\n","$Lc2","\n"]}]
1f:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
20:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"FullPage"}]," Added a new ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"FullPage"}]," component that fills the remaining viewport height below the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeader"}],"."]}],"\n","$Lc3","\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed dark theme ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-secondary"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-disabled"}]," tokens using black-based ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"oklch(0% ...)"}]," instead of white-based ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"oklch(100% ...)"}],", making secondary and disabled text visible on dark backgrounds. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32825","className":"mdx-module__YUQVZa__a","children":"#32825"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Box"}]," Fixed Box component to forward HTML attributes to the underlying div element. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32536","className":"mdx-module__YUQVZa__a","children":"#32536"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Use node prefix on native imports ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32516","className":"mdx-module__YUQVZa__a","children":"#32516"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Accordion"}]," Fixed nested Accordion icon state issue where the inner accordion's arrow icon would incorrectly show as expanded when only the outer accordion was expanded. The CSS selector now uses a direct parent selector to ensure the icon only responds to its own accordion's expanded state. ","$Lc4"]}],"\n"]}],"\n","$Lc5","\n","$Lc6","\n","$Lc7","\n","$Lc8","\n","$Lc9","\n","$Lca","\n","$Lcb","\n","$Lcc","\n","$Lcd","\n","$Lce","\n","$Lcf","\n","$Ld0","\n","$Ld1","\n","$Ld2","\n","$Ld3","\n","$Ld4","\n","$Ld5","\n","$Ld6","\n","$Ld7","\n"]}]
21:["$","h2",null,{"id":"version-0110","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-0110","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.11.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
22:["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
23:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Redesigned Table component with new ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useTable"}]," hook API."]}],"\n",["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Table"}]," component (React Aria wrapper) is renamed to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"TableRoot"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["New high-level ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Table"}]," component that handles data display, pagination, sorting, and selection"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useTable"}]," hook is completely redesigned with a new API supporting three pagination modes (complete, offset, cursor)"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["New types: ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ColumnConfig"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"TableProps"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"TableItem"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"UseTableOptions"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"UseTableResult"}]]}],"\n"]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["New features include unified pagination modes, debounced query changes, stale data preservation during reloads, and row selection with toggle/replace behaviors. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32050","className":"mdx-module__YUQVZa__a","children":"#32050"}]]}],"\n","$Ld8","\n","$Ld9","\n","$Lda","\n","$Ldb","\n","$Ldc","\n"]}],"\n","$Ldd","\n","$Lde","\n","$Ldf","\n"]}]
24:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
25:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Box"}]," Fixes app background color on dark mode. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32203","className":"mdx-module__YUQVZa__a","children":"#32203"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Checkbox"}]," Added indeterminate state support to the Checkbox component for handling partial selection scenarios like table header checkboxes. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32371","className":"mdx-module__YUQVZa__a","children":"#32371"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Select"}]," Added missing ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"aria-label"}]," attributes to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"SearchField"}]," components in ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Select"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"MenuAutocomplete"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"MenuAutocompleteListbox"}]," to fix accessibility warnings. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32337","className":"mdx-module__YUQVZa__a","children":"#32337"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Button"}]," Fixes disabled state in primary and secondary buttons in Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32297","className":"mdx-module__YUQVZa__a","children":"#32297"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["build(deps-dev): bump ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"storybook"}]," from 10.1.9 to 10.1.10 ","$Le0"]}],"\n"]}],"\n","$Le1","\n","$Le2","\n","$Le3","\n","$Le4","\n","$Le5","\n","$Le6","\n","$Le7","\n","$Le8","\n","$Le9","\n","$Lea","\n"]}]
26:["$","h2",null,{"id":"version-0100","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-0100","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.10.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
27:["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
28:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Cell"}]," component has been refactored to be a generic wrapper component that accepts ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"children"}]," for custom cell content. The text-specific functionality (previously part of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Cell"}],") has been moved to a new ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"CellText"}]," component. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31917","className":"mdx-module__YUQVZa__a","children":"#31917"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["If you were using ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Cell"}]," with text-specific props (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"title"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"description"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"leadingIcon"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}],"), you need to update your code to use ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"CellText"}]," instead:"]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["$","strong",null,{"children":"Before:"}]}],"\n","$Leb","\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["$","strong",null,{"children":"After:"}]}],"\n","$Lec","\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["For custom cell content, use the new generic ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Cell"}]," component:"]}],"\n","$Led","\n"]}],"\n"]}]
29:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
2a:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Checkbox"}]," Fixed Checkbox indicator showing checkmark color when unchecked. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31904","className":"mdx-module__YUQVZa__a","children":"#31904"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonIcon"}]," Fixed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ButtonIcon"}]," incorrectly applying ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"className"}]," to inner elements instead of only the root element. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31900","className":"mdx-module__YUQVZa__a","children":"#31900"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed Table Row component to correctly handle cases where no ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," is provided, preventing unnecessary router provider wrapping and fixing the cursor incorrectly showing as a pointer despite the element not being a link. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31843","className":"mdx-module__YUQVZa__a","children":"#31843"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," Added row selection support with visual state styling for hover, selected, and pressed states. Fixed checkbox rendering to only show for multi-select toggle mode. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31907","className":"mdx-module__YUQVZa__a","children":"#31907"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useTable"}]," hook to prioritize ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"providedRowCount"}]," over data length for accurate row count in server-side pagination scenarios. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31817","className":"mdx-module__YUQVZa__a","children":"#31817"}]]}],"\n"]}],"\n","$Lee","\n"]}]
2b:["$","h2",null,{"id":"version-091","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-091","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.9.1",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
2c:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
2d:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed Table Row component to correctly handle cases where no ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," is provided, preventing unnecessary router provider wrapping and fixing the cursor incorrectly showing as a pointer despite the element not being a link. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31843","className":"mdx-module__YUQVZa__a","children":"#31843"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useTable"}]," hook to prioritize ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"providedRowCount"}]," over data length for accurate row count in server-side pagination scenarios. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31817","className":"mdx-module__YUQVZa__a","children":"#31817"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed Table column sorting indicator to show up arrow when no sort is active, correctly indicating that clicking will sort ascending. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31844","className":"mdx-module__YUQVZa__a","children":"#31844"}]]}],"\n"]}],"\n"]}]
2e:["$","h2",null,{"id":"version-090","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-090","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.9.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
2f:["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
30:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Avatar"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Migrated Avatar component from Base UI to custom implementation with size changes:"]}],"\n",["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":"Base UI-specific props are no longer supported"}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Size values have been updated:","\n",["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["New ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"x-small"}]," size added (1.25rem / 20px)"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"small"}]," size unchanged (1.5rem / 24px)"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"medium"}]," size unchanged (2rem / 32px, default)"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"large"}]," size ",["$","strong",null,{"children":"changed from 3rem to 2.5rem"}]," (40px)"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["New ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"x-large"}]," size added (3rem / 48px) ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31566","className":"mdx-module__YUQVZa__a","children":"#31566"}]]}],"\n"]}],"\n"]}],"\n"]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n","$Lef","\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"purpose"}]," prop for accessibility control (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'informative'"}]," or ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'decoration'"}],")."]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Migrated Checkbox component from Base UI to React Aria Components."]}],"\n","$Lf0","\n","$Lf1","\n","$Lf2","\n","$Lf3","\n","$Lf4","\n","$Lf5","\n","$Lf6","\n","$Lf7","\n","$Lf8","\n","$Lf9","\n","$Lfa","\n","$Lfb","\n","$Lfc","\n","$Lfd","\n","$Lfe","\n"]}],"\n","$Lff","\n","$L100","\n","$L101","\n","$L102","\n","$L103","\n"]}]
31:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
32:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"PluginHeader"}]," Fix broken external links in Backstage UI PluginHeader component. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31525","className":"mdx-module__YUQVZa__a","children":"#31525"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Select"}]," Fixed CSS issues in Select component including popover width constraints, focus outline behavior, and overflow handling. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31618","className":"mdx-module__YUQVZa__a","children":"#31618"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"PasswordField"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Searchfield"}]," Improved visual consistency of PasswordField, SearchField, and MenuAutocomplete components. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31679","className":"mdx-module__YUQVZa__a","children":"#31679"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Text"}]," Fix default text color in Backstage UI ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31429","className":"mdx-module__YUQVZa__a","children":"#31429"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Text"}]," Fixed Text component to prevent ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"truncate"}]," prop from being spread to the underlying DOM element. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31615","className":"mdx-module__YUQVZa__a","children":"#31615"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Link"}]," Improved the Link component structure in Backstage UI. ","$L104"]}],"\n"]}],"\n","$L105","\n","$L106","\n","$L107","\n","$L108","\n","$L109","\n","$L10a","\n","$L10b","\n","$L10c","\n","$L10d","\n","$L10e","\n","$L10f","\n","$L110","\n","$L111","\n","$L112","\n"]}]
33:["$","h2",null,{"id":"version-082","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-082","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.8.2",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
34:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
35:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix default text color in Backstage UI ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31429","className":"mdx-module__YUQVZa__a","children":"#31429"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix the default font size in Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31435","className":"mdx-module__YUQVZa__a","children":"#31435"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix CSS layer ordering in Backstage UI to make sure component styles are loaded after tokens and base declarations. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31448","className":"mdx-module__YUQVZa__a","children":"#31448"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix font smoothing as default in Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31444","className":"mdx-module__YUQVZa__a","children":"#31444"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix default font wight and font family in Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31432","className":"mdx-module__YUQVZa__a","children":"#31432"}]]}],"\n"]}],"\n"]}]
36:["$","h2",null,{"id":"version-080","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-080","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.8.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
37:["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
38:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Added a new ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PasswordField"}]," component. As part of this change, the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"password"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"search"}]," types have been removed from ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"TextField"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31238","className":"mdx-module__YUQVZa__a","children":"#31238"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Restructure Backstage UI component styling to use CSS Modules instead of pure CSS. We don't expect this to be an issue in practice but it is important to call out that all styles are now loaded through CSS modules with generated class names. We are still providing fixed class names for all components to allow anyone to style their Backstage instance. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31399","className":"mdx-module__YUQVZa__a","children":"#31399"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," The ScrollArea component has been removed from Backstage UI because it did not meet our accessibility standards. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31409","className":"mdx-module__YUQVZa__a","children":"#31409"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Remove Icon component in Backstage UI. This component was creating issue for tree-shaking. It is recommended to use icons from @remixicon/react until we found a better alternative in Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31407","className":"mdx-module__YUQVZa__a","children":"#31407"}]]}],"\n"]}],"\n"]}]
39:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
3a:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Adding a new Dialog component to Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31371","className":"mdx-module__YUQVZa__a","children":"#31371"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["remove default selection of tab ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31216","className":"mdx-module__YUQVZa__a","children":"#31216"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix margin utility classes in Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31389","className":"mdx-module__YUQVZa__a","children":"#31389"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix scroll jumping when opening menu in Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31394","className":"mdx-module__YUQVZa__a","children":"#31394"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Making href mandatory in tabs that are part of a Header component ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31343","className":"mdx-module__YUQVZa__a","children":"#31343"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Update react-aria-components to version 1.13.0 ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31367","className":"mdx-module__YUQVZa__a","children":"#31367"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix table sorting icon position in Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31393","className":"mdx-module__YUQVZa__a","children":"#31393"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add new ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"virtualized"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"maxWidth"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"maxHeight"}]," props to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Menu"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"MenuListBox"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"MenuAutocomplete"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"MenuAutocompleteListBox"}]," to allow for virtalization of long lists inside menus. ","$L113"]}],"\n"]}],"\n","$L114","\n","$L115","\n","$L116","\n","$L117","\n","$L118","\n","$L119","\n","$L11a","\n","$L11b","\n","$L11c","\n"]}]
3b:["$","h2",null,{"id":"version-072","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-072","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.7.2",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
3c:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
3d:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Making href mandatory in tabs that are part of a Header component ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31343","className":"mdx-module__YUQVZa__a","children":"#31343"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add react router for internal routing for ButtonLinks ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31276","className":"mdx-module__YUQVZa__a","children":"#31276"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Remove auto selection of tabs for tabs that all have href defined ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31281","className":"mdx-module__YUQVZa__a","children":"#31281"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Using react router for internal links in the Menu component ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31339","className":"mdx-module__YUQVZa__a","children":"#31339"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Enable tooltips on disabled buttons with automatic wrapper ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31230","className":"mdx-module__YUQVZa__a","children":"#31230"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Avoid overriding onChange when spreading props ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31232","className":"mdx-module__YUQVZa__a","children":"#31232"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["remove default selection of tab ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31216","className":"mdx-module__YUQVZa__a","children":"#31216"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Improved SearchField component flex layout and animations. Fixed SearchField behavior in Header components by switching from width-based transitions to flex-basis transitions for better responsive behavior. Added new Storybook stories to test SearchField integration with Header component. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31158","className":"mdx-module__YUQVZa__a","children":"#31158"}]]}],"\n"]}],"\n"]}]
3e:["$","h2",null,{"id":"version-071","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-071","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.7.1",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
3f:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
40:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add missing class for flex: baseline ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31013","className":"mdx-module__YUQVZa__a","children":"#31013"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix Select component to properly attach aria-label and aria-labelledby props to the rendered element for improved accessibility. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31037","className":"mdx-module__YUQVZa__a","children":"#31037"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Removed the need to mock ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"window.matchMedia"}]," in tests, falling back to default breakpoint values instead. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31148","className":"mdx-module__YUQVZa__a","children":"#31148"}]]}],"\n"]}],"\n"]}]
41:["$","h2",null,{"id":"version-070","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-070","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.7.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
42:["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
43:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," We are moving our DataTable component to React Aria. We removed our DataTable to only use Table as a single and opinionated option for tables. This new structure is made possible by using React Aria under the hood. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30654","className":"mdx-module__YUQVZa__a","children":"#30654"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Backstage UI - HeaderPage - We are updating the breadcrumb to be more visible and accessible. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30874","className":"mdx-module__YUQVZa__a","children":"#30874"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," We are updating the Menu component to use React Aria under the hood. The structure and all props are changing to follow React Aria's guidance. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30908","className":"mdx-module__YUQVZa__a","children":"#30908"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," We are upgrading our ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Text"}]," component to support all font sizes making the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Heading"}]," component redundant. The new ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Text"}]," component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"as"}]," prop to include all possible values. The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Link"}]," component has also been updated to match the new ","$L11d"," component. ","$L11e"]}],"\n"]}],"\n"]}]
44:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
45:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixes some styles on the Select component in BUI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30642","className":"mdx-module__YUQVZa__a","children":"#30642"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Export CardHeader, CardBody and CardFooter from Card component index ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30882","className":"mdx-module__YUQVZa__a","children":"#30882"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add new TagGroup component to Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30919","className":"mdx-module__YUQVZa__a","children":"#30919"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixes a couple of small bugs in BUI including setting H1 and H2 correctly on the Header and HeaderPage. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30636","className":"mdx-module__YUQVZa__a","children":"#30636"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Update styling of Tooltip element ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30591","className":"mdx-module__YUQVZa__a","children":"#30591"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Move breadcrumb to fit in the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"HeaderPage"}]," instead of the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Header"}]," in Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30701","className":"mdx-module__YUQVZa__a","children":"#30701"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["We are motion away from ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"motion"}]," to use ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"gsap"}]," instead to make Backstage UI backward compatible with React 17. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30626","className":"mdx-module__YUQVZa__a","children":"#30626"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Updated Menu component in Backstage UI to use useId() from React Aria instead of React to support React 17. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30675","className":"mdx-module__YUQVZa__a","children":"#30675"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Remove stylesheet import from Select component. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30800","className":"mdx-module__YUQVZa__a","children":"#30800"}]]}],"\n"]}],"\n","$L11f","\n","$L120","\n"]}]
46:["$","h2",null,{"id":"version-060","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-060","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.6.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
47:["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
48:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Canon has been renamed to Backstage UI. This means that ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"@backstage/canon"}]," has been deprecated and replaced by ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"@backstage/ui"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30525","className":"mdx-module__YUQVZa__a","children":"#30525"}]]}],"\n"]}]
49:["$","h2",null,{"id":"version-050","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-050","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.5.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
4a:["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
4b:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," We are updating the default size of the Button component in Canon to be small instead of medium. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30085","className":"mdx-module__YUQVZa__a","children":"#30085"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," We set the default size for IconButton in Canon to be small instead of medium. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30097","className":"mdx-module__YUQVZa__a","children":"#30097"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Move TextField component to use react Aria under the hood. Introducing a new FieldLabel component to help build custom fields. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30286","className":"mdx-module__YUQVZa__a","children":"#30286"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," We are adding a new as prop on the Heading and Text component to make it easier to change the component tag. We are removing the render prop in favour of the as prop. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30291","className":"mdx-module__YUQVZa__a","children":"#30291"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," TextField in Canon now has multiple label sizes as well as the capacity to hide label and description but still make them available for screen readers. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30249","className":"mdx-module__YUQVZa__a","children":"#30249"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Fixes spacing props on layout components and aligned on naming for the Grid component. You should now call the Grid root component using ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"<Grid.Root />"}]," instead of just ","$L121",". ","$L122"]}],"\n"]}],"\n"]}]
4c:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
4d:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add min-width: 0; by default on every Flex components in Canon to help support truncated texts inside flex elements. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30168","className":"mdx-module__YUQVZa__a","children":"#30168"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix styling for the title4 prop on the Heading component in Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30167","className":"mdx-module__YUQVZa__a","children":"#30167"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Added a render prop to the Button component in Canon to use it as a link. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30165","className":"mdx-module__YUQVZa__a","children":"#30165"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add new Switch component in Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30251","className":"mdx-module__YUQVZa__a","children":"#30251"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The filter input in menu comboboxes should now always use the full width of the menu it's in. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30104","className":"mdx-module__YUQVZa__a","children":"#30104"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Remove leftover console.log from Container component. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30040","className":"mdx-module__YUQVZa__a","children":"#30040"}]]}],"\n"]}],"\n"]}]
4e:["$","h2",null,{"id":"version-040","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-040","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.4.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
4f:["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
50:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Icons on Button and IconButton now need to be imported and placed like this: ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"<Button iconStart={<ChevronDownIcon />} />"}]," ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29667","className":"mdx-module__YUQVZa__a","children":"#29667"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," We are modifying the way we treat custom render using 'useRender()' under the hood from BaseUI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29989","className":"mdx-module__YUQVZa__a","children":"#29989"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," The icon prop in TextField now accept a ReactNode instead of an icon name. We also updated the icon sizes for each input sizes. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29974","className":"mdx-module__YUQVZa__a","children":"#29974"}]]}],"\n"]}],"\n"]}]
51:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
52:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Use correct colour token for TextField clear button icon, prevent layout shift whenever it is hidden or shown and properly size focus area around it. Also stop leading icon shrinking when used together with clear button. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29878","className":"mdx-module__YUQVZa__a","children":"#29878"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix Canon missing dependencies ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29642","className":"mdx-module__YUQVZa__a","children":"#29642"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["For improved a11y, clicking a Select component label now focuses the Select trigger element, and the TextField component's label is now styled to indicate it's interactive. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29755","className":"mdx-module__YUQVZa__a","children":"#29755"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Added new icon and onClear props to the TextField to make it easier to accessorize inputs. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29820","className":"mdx-module__YUQVZa__a","children":"#29820"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add new Tabs component to Canon ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29996","className":"mdx-module__YUQVZa__a","children":"#29996"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Pin version of @base-ui-components/react. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29782","className":"mdx-module__YUQVZa__a","children":"#29782"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed an issue with Canon's DataTable.Pagination component showing the wrong number for the \"to\" count. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29688","className":"mdx-module__YUQVZa__a","children":"#29688"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Removed various typos ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29665","className":"mdx-module__YUQVZa__a","children":"#29665"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Update Menu component in Canon to make the UI more condensed. We are also adding a new Combobox option for nested navigation. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29986","className":"mdx-module__YUQVZa__a","children":"#29986"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Use the Field component from Base UI within the TextField. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29826","className":"mdx-module__YUQVZa__a","children":"#29826"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add new truncate prop to Text and Heading components in Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29988","className":"mdx-module__YUQVZa__a","children":"#29988"}]]}],"\n"]}],"\n"]}]
53:["$","h2",null,{"id":"version-032","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-032","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.3.2",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
54:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
55:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Fix Canon missing dependencies ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29642","className":"mdx-module__YUQVZa__a","children":"#29642"}]]}],"\n"]}]
56:["$","h2",null,{"id":"version-030","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-030","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.3.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
57:["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
58:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Improve class name structure using data attributes instead of class names. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29560","className":"mdx-module__YUQVZa__a","children":"#29560"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Updated TextField and Select component to work with React Hook Form. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29482","className":"mdx-module__YUQVZa__a","children":"#29482"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Add new Select component for Canon ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29440","className":"mdx-module__YUQVZa__a","children":"#29440"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Added a new TextField component to replace the Field and Input component. After feedback, it became clear that we needed to build a more opinionated version to avoid any problem in the future. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29364","className":"mdx-module__YUQVZa__a","children":"#29364"}]]}],"\n"]}],"\n"]}]
59:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
5a:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Updated styles for the Menu component in Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29351","className":"mdx-module__YUQVZa__a","children":"#29351"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix Checkbox styles on dark theme in Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29544","className":"mdx-module__YUQVZa__a","children":"#29544"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add new breakpoint helpers up(), down() and current breakpoint to help you use our breakpoints in your React components. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29564","className":"mdx-module__YUQVZa__a","children":"#29564"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Internal refactor and fixes to the prop extraction logic for layout components. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29389","className":"mdx-module__YUQVZa__a","children":"#29389"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add new Collapsible component for Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29617","className":"mdx-module__YUQVZa__a","children":"#29617"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Removes instances of default React imports, a necessary update for the upcoming React 19 migration."}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29499","className":"mdx-module__YUQVZa__a","children":"#29499"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add global CSS reset for anchor tags. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29357","className":"mdx-module__YUQVZa__a","children":"#29357"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Improved Container styles, changing our max-width to 120rem and improving padding on smaller screens. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29475","className":"mdx-module__YUQVZa__a","children":"#29475"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add new Avatar component to Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29594","className":"mdx-module__YUQVZa__a","children":"#29594"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add new TableCellProfile component for Table and DataTable in Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29600","className":"mdx-module__YUQVZa__a","children":"#29600"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix types on the Icon component. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29306","className":"mdx-module__YUQVZa__a","children":"#29306"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add new DataTable component and update Table component styles. ","$L123"]}],"\n"]}],"\n","$L124","\n","$L125","\n","$L126","\n","$L127","\n","$L128","\n","$L129","\n"]}]
5b:["$","h2",null,{"id":"version-021","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-021","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.2.1",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
5c:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
5d:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Internal refactor and fixes to the prop extraction logic for layout components. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29389","className":"mdx-module__YUQVZa__a","children":"#29389"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix types on the Icon component. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29306","className":"mdx-module__YUQVZa__a","children":"#29306"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Updated styles for the Menu component in Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29351","className":"mdx-module__YUQVZa__a","children":"#29351"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add global CSS reset for anchor tags. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29357","className":"mdx-module__YUQVZa__a","children":"#29357"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix the Icon component when the name is not found to return null instead of an empty SVG. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29280","className":"mdx-module__YUQVZa__a","children":"#29280"}]]}],"\n"]}],"\n"]}]
5e:["$","h2",null,{"id":"version-020","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-020","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.2.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
5f:["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
60:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Fix CSS imports and move CSS outputs out of the dist folder. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/28961","className":"mdx-module__YUQVZa__a","children":"#28961"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Added a new Tooltip component to Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29241","className":"mdx-module__YUQVZa__a","children":"#29241"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," We added a new IconButton component with fixed sizes showcasing a single icon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29239","className":"mdx-module__YUQVZa__a","children":"#29239"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Added about 40 new icons to Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29264","className":"mdx-module__YUQVZa__a","children":"#29264"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," We are renaming CanonProvider to IconProvider to improve clarity on how to override icons. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29002","className":"mdx-module__YUQVZa__a","children":"#29002"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Added a new Menu component to Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29151","className":"mdx-module__YUQVZa__a","children":"#29151"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Updating styles for Text and Link components as well as global surface tokens. ","$L12a"]}],"\n"]}],"\n","$L12b","\n"]}]
61:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
62:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix Button types that was preventing the use of native attributes like onClick. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29205","className":"mdx-module__YUQVZa__a","children":"#29205"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["To avoid conflicts with Backstage, we removed global styles and set font-family and font-weight for each components. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/28972","className":"mdx-module__YUQVZa__a","children":"#28972"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Introducing Canon to Backstage. Canon styling system is based on pure CSS. We are adding our styles.css at the top of your Backstage instance. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29137","className":"mdx-module__YUQVZa__a","children":"#29137"}]]}],"\n"]}],"\n"]}]
63:["$","h2",null,{"id":"version-010","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#version-010","className":"mdx-module__YUQVZa__anchorLink","children":["Version 0.1.0",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
64:["$","h3",null,{"id":"breaking-changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#breaking-changes","className":"mdx-module__YUQVZa__anchorLink","children":["Breaking Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
65:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Merged the Stack and Inline component into a single component called Flex. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/28634","className":"mdx-module__YUQVZa__a","children":"#28634"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," This is the first alpha release for Canon. As part of this release we are introducing 5 layout components and 7 components. All theming is done through CSS variables. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/28562","className":"mdx-module__YUQVZa__a","children":"#28562"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Fixing css structure and making sure that props are applying the correct styles for all responsive values. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/28630","className":"mdx-module__YUQVZa__a","children":"#28630"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Updated core CSS tokens and fixing the Button component accordingly. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/28789","className":"mdx-module__YUQVZa__a","children":"#28789"}]]}],"\n"]}],"\n"]}]
66:["$","h3",null,{"id":"changes","className":"mdx-module__YUQVZa__h3 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#changes","className":"mdx-module__YUQVZa__anchorLink","children":["Changes",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
67:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Removed client directive as they are not needed in React 18. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/28626","className":"mdx-module__YUQVZa__a","children":"#28626"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix spacing props not being applied for custom values. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/28770","className":"mdx-module__YUQVZa__a","children":"#28770"}]]}],"\n"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Removed older versions of React packages as a preparatory step for upgrading to React 19. This commit does not introduce any functional changes, but removes dependencies on previous React versions, allowing for a cleaner upgrade path in subsequent commits. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/28579","className":"mdx-module__YUQVZa__a","children":"#28579"}]]}],"\n"]}],"\n"]}]
68:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"activeTabId"}]
69:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"null"}]
6a:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33783","className":"mdx-module__YUQVZa__a","children":"#33783"}]
6b:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Slider"}]," Added RangeSlider component for selecting numeric ranges. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33112","className":"mdx-module__YUQVZa__a","children":"#33112"}]]}],"\n"]}]
6c:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"SearchAutocomplete"}]," Made ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"SearchAutocomplete"}]," background-aware. The input now adapts its background color based on its parent container's background level. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33437","className":"mdx-module__YUQVZa__a","children":"#33437"}]]}],"\n"]}]
6d:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Exported the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"TableBodySkeleton"}]," component as a public API for use outside of the built-in ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Table"}]," component. The component now accepts any column array whose items have an ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"id"}]," property, making it compatible with custom column types. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33731","className":"mdx-module__YUQVZa__a","children":"#33731"}]]}],"\n"]}]
6e:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Avatar"}]," Fixed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Avatar"}]," becoming elliptical in flex layouts by preventing it from shrinking. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33574","className":"mdx-module__YUQVZa__a","children":"#33574"}]]}],"\n"]}]
6f:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonLink"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Card"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"CellProfile"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"CellText"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Link"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ListRow"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"MenuItem"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"MenuListBoxItem"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Row"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"SearchAutocompleteItem"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tab"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tag"}]," Fixed relative ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," resolution for BUI link components. Relative paths like ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"../other"}]," are now correctly turned into absolute paths before reaching the React Aria layer, ensuring client-side navigation goes to the right place. ","$L12c"]}],"\n"]}]
70:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"PluginHeader"}]," Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"aria-hidden"}]," to the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeader"}]," icon to prevent screen readers from announcing decorative plugin icons. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33437","className":"mdx-module__YUQVZa__a","children":"#33437"}]]}],"\n"]}]
71:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"useTable"}]," Added support for disabling pagination in ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useTable"}]," complete mode by setting ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"paginationOptions: { type: 'none' }"}],". This skips data slicing and produces ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"pagination: { type: 'none' }"}]," in ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"tableProps"}],", removing the need for consumers to manually override the pagination prop on ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Table"}],". Also fixed complete mode not reacting to dynamic changes in ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"paginationOptions.pageSize"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33614","className":"mdx-module__YUQVZa__a","children":"#33614"}]]}],"\n"]}]
72:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Dialog"}]," Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ModalOverlay"}]," to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Dialog"}]," so overlay styles are applied to the actual overlay rather than the modal content, and fixed dismissing via outside click in the process. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33785","className":"mdx-module__YUQVZa__a","children":"#33785"}]]}],"\n"]}]
73:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add an initial CheckboxGroup component implementation and docs coverage. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33051","className":"mdx-module__YUQVZa__a","children":"#33051"}]]}],"\n"]}]
74:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tabs"}]," Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"prefers-reduced-motion"}]," support to Tab indicator animations. Users with reduced motion preferences will no longer see sliding transitions on the active and hover indicators. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33527","className":"mdx-module__YUQVZa__a","children":"#33527"}]]}],"\n"]}]
75:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Updated dependency ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"@types/use-sync-external-store"}]," to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"^1.0.0"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33250","className":"mdx-module__YUQVZa__a","children":"#33250"}]]}],"\n"]}]
76:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"TablePagination"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"useTable"}]," Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"showPaginationLabel"}]," prop to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"TablePagination"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useTable"}]," pagination options. When set to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"false"}],", the pagination label (e.g., \"1 - 20 of 150\") is hidden while navigation controls remain visible. Defaults to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"true"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33552","className":"mdx-module__YUQVZa__a","children":"#33552"}]]}],"\n"]}]
77:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"FieldLabel"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Textfield"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"PasswordField"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Searchfield"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Select"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"RadioGroup"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"CheckboxGroup"}]," Fixed form field descriptions not being connected to inputs via ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"aria-describedby"}],", making them accessible to screen readers. Added a ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"descriptionSlot"}]," prop to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"FieldLabel"}]," that uses React Aria's slot mechanism to automatically wire up the connection. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33817","className":"mdx-module__YUQVZa__a","children":"#33817"}]]}],"\n"]}]
78:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonIcon"}]," Fixed the ButtonIcon's loading spinner animation ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33425","className":"mdx-module__YUQVZa__a","children":"#33425"}]]}],"\n"]}]
79:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tabs"}]," Fixed the Tabs active indicator not hiding when no tab matches the current route. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33784","className":"mdx-module__YUQVZa__a","children":"#33784"}]]}],"\n"]}]
7a:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Menu"}]," Simplified the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Menu"}]," component's item structure by removing the inner wrapper element and applying styles directly to the menu item, improving DOM clarity. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33524","className":"mdx-module__YUQVZa__a","children":"#33524"}]]}],"\n"]}]
7b:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"react-aria"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"react-stately"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"@react-aria/interactions"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"@react-stately/layout"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"@react-stately/overlays"}]," as dependencies. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33424","className":"mdx-module__YUQVZa__a","children":"#33424"}]]}],"\n"]}]
7c:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Header"}]," Fixed HeaderNav hover indicator covering tab text when theme uses opaque background colors. Also fixed an incorrect CSS variable reference (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-font-family"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-font-regular"}],"). ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33696","className":"mdx-module__YUQVZa__a","children":"#33696"}]]}],"\n"]}]
7d:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'neutral'"}]
7e:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33002","className":"mdx-module__YUQVZa__a","children":"#33002"}]
7f:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}]
80:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Replace any explicit ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg=\"neutral-1\""}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg=\"neutral-2\""}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg=\"neutral-3\""}],", or ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg=\"neutral-auto\""}]," props with ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg=\"neutral\""}],". To achieve a specific neutral level in stories or tests, use nested containers — each additional ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg=\"neutral\""}]," wrapper increments by one level."]}]
82:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Popover"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tooltip"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Menu"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Dialog"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Removed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-popover"}]," CSS token. Popover, Tooltip, Menu, and Dialog now use ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-app"}]," for their outer shell and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Box bg=\"neutral-1\""}]," for content areas, providing better theme consistency and eliminating a redundant token. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32979","className":"mdx-module__YUQVZa__a","children":"#32979"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Replace any usage of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-popover"}]," with ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-neutral-1"}]," (for content surfaces) or ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-app"}]," (for outer shells):"]}],"\n","$L12d","\n"]}]
83:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Searchfield"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Data attributes rendered by components are now always lowercase. This affects CSS selectors targeting camelCase data attributes. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33050","className":"mdx-module__YUQVZa__a","children":"#33050"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Update any custom CSS selectors that target camelCase data attributes to use lowercase instead:"}],"\n","$L12e","\n"]}]
84:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Removed deprecated types ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ComponentDefinition"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ClassNamesMap"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"DataAttributeValues"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"DataAttributesMap"}]," from the public API. These were internal styling infrastructure types that have been replaced by the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"defineComponent"}]," system. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33050","className":"mdx-module__YUQVZa__a","children":"#33050"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Remove any direct usage of these types. Component definitions now use ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"defineComponent()"}]," and their shapes are not part of the public API contract."]}],"\n","$L12f","\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["If you were reading ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"definition.dataAttributes"}],", use ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"definition.propDefs"}]," instead — props with ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"dataAttribute: true"}]," in ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"propDefs"}]," are the equivalent."]}],"\n"]}]
85:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Link"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonLink"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tabs"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Menu"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"TagGroup"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Centralized client-side routing in ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"BUIProvider"}],". Components like Link, ButtonLink, Tabs, Menu, TagGroup, and Table now require a ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"BUIProvider"}]," rendered inside a React Router context for client-side navigation to work. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33267","className":"mdx-module__YUQVZa__a","children":"#33267"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["This change requires updating ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"@backstage/plugin-app"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"@backstage/core-app-api"}]," alongside ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"@backstage/ui"}],". If you only upgrade ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"@backstage/ui"}],", BUI components will fall back to full-page navigation."]}],"\n","$L130","\n","$L131","\n"]}]
86:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Header"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Renamed internal CSS classes to match the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Header"}]," component name."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","strong",null,{"children":"Migration:"}]," If you are targeting these classes directly in your styles, update the following:"]}],"\n",["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bui-HeaderPage"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bui-Header"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bui-HeaderPageContent"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bui-HeaderContent"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bui-HeaderPageBreadcrumbs"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bui-HeaderBreadcrumbs"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bui-HeaderPageTabsWrapper"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bui-HeaderTabsWrapper"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bui-HeaderPageControls"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bui-HeaderControls"}]," ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33354","className":"mdx-module__YUQVZa__a","children":"#33354"}]]}],"\n"]}],"\n"]}]
87:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Checkbox"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Removed redundant ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"selected"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"indeterminate"}]," props from the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Checkbox"}]," component. Use the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"isSelected"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"isIndeterminate"}]," props instead, which are the standard React Aria props and already handle both the checkbox behaviour and the corresponding CSS data attributes. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33323","className":"mdx-module__YUQVZa__a","children":"#33323"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Replace any usage of the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"selected"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"indeterminate"}]," props on ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Checkbox"}]," with the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"isSelected"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"isIndeterminate"}]," props. Note that the checked state and related CSS data attributes (such as ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-selected"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-indeterminate"}],") are now driven by React Aria, so any custom logic that previously inspected or set these via the old props should instead rely on the React Aria-managed state and attributes exposed through the new props."]}],"\n"]}]
88:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Card"}]
89:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"onPress"}]
8a:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]
8b:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33116","className":"mdx-module__YUQVZa__a","children":"#33116"}]
8c:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Link"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonLink"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tab"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"MenuItem"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tag"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Row"}]," Added analytics capabilities to the component library. Components with navigation behavior (Link, ButtonLink, Tab, MenuItem, Tag, Row) now fire analytics events on click when a ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"BUIProvider"}]," is present."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["New exports: ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"BUIProvider"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useAnalytics"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"getNodeText"}],", and associated types (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"AnalyticsTracker"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"UseAnalyticsFn"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"BUIProviderProps"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"AnalyticsEventAttributes"}],")."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Components with analytics support now accept a ","$L132"," prop to suppress event firing. ","$L133"]}],"\n"]}]
8d:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"TableRoot"}]," Added a ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"loading"}]," prop and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-loading"}]," data attribute to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"TableRoot"}],", allowing consumers to distinguish between stale data and initial loading states. Both ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"stale"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"loading"}]," set ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"aria-busy"}]," on the table. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33322","className":"mdx-module__YUQVZa__a","children":"#33322"}]]}],"\n"]}]
8e:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," Improved the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Table"}]," component loading state to show a skeleton UI with visible headers instead of plain \"Loading...\" text. The table now renders its full structure during loading, with animated skeleton rows in place of data. The loading state includes proper accessibility support with ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"aria-busy"}]," on the table and screen reader announcements. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33322","className":"mdx-module__YUQVZa__a","children":"#33322"}]]}],"\n"]}]
8f:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed neutral-1 hover & pressed state in light mode. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33078","className":"mdx-module__YUQVZa__a","children":"#33078"}]]}],"\n"]}]
90:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Avatar"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Checkbox"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Container"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Dialog"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"FieldError"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"FieldLabel"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Flex"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"FullPage"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Grid"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"HeaderPage"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Link"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Menu"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"PasswordField"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"PluginHeader"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Popover"}]," ","$L134"," ","$L135"," ","$L136"," ","$L137"," ","$L138"," ","$L139"," ","$L13a"," ","$L13b"," ","$L13c"," ","$L13d"," ","$L13e"," ","$L13f"," ","$L140"," ","$L141"," ","$L142"," Migrated all components from ","$L143"," to ","$L144"," hook. Exported ","$L145"," types for each component, enabling better type composition for consumers. ","$L146"]}],"\n"]}]
91:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Card"}]," Fixed interactive cards so that CardBody can scroll when the card has a constrained height. Previously, the overlay element blocked scroll events. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33151","className":"mdx-module__YUQVZa__a","children":"#33151"}]]}],"\n"]}]
92:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Container"}]," Removed the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"transition"}]," on ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Container"}]," padding to prevent an unwanted animation when the viewport is resized. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32984","className":"mdx-module__YUQVZa__a","children":"#32984"}]]}],"\n"]}]
93:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed --bui-fg-success token in light mode to be more accessible. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32542","className":"mdx-module__YUQVZa__a","children":"#32542"}]]}],"\n"]}]
94:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Deprecated the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"HeaderPage"}]," component name in favor of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Header"}],". The old ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"HeaderPage"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"HeaderPageProps"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"HeaderPageOwnProps"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"HeaderPageBreadcrumb"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"HeaderPageDefinition"}]," exports are still available as deprecated aliases. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33188","className":"mdx-module__YUQVZa__a","children":"#33188"}]]}],"\n"]}]
95:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Added documentation for the table cell wrapper requirement to TSDoc comments for ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Cell"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"CellText"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"CellProfile"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ColumnConfig"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"RowRenderFn"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33379","className":"mdx-module__YUQVZa__a","children":"#33379"}]]}],"\n"]}]
96:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"SearchAutocomplete"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"SearchAutocompleteItem"}]," Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"SearchAutocomplete"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"SearchAutocompleteItem"}]," components for building accessible search-with-results patterns. Built on React Aria's Autocomplete with keyboard navigation and screen reader support. Designed for async/external search results with a configurable popover width. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33340","className":"mdx-module__YUQVZa__a","children":"#33340"}]]}],"\n"]}]
97:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Checkbox"}]," Made Checkbox ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"children"}]," optional and added a dev warning when neither a visible label, ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"aria-label"}],", nor ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"aria-labelledby"}]," is provided. The label wrapper div is no longer rendered when there are no children, removing the unnecessary gap. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33394","className":"mdx-module__YUQVZa__a","children":"#33394"}]]}],"\n"]}]
98:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Dialog"}]," Fixed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Dialog"}]," content overflowing when no ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"height"}]," prop is set. The dialog now grows with its content and scrolls when content exceeds the viewport height. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33352","className":"mdx-module__YUQVZa__a","children":"#33352"}]]}],"\n"]}]
99:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Accordion"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Button"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonIcon"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonLink"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Card"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"List"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Menu"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Select"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ToggleButtonGroup"}]," Fixed focus ring styles to use React Aria's ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"[data-focus-visible]"}]," data attribute instead of the native CSS ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":":focus-visible"}]," pseudo-class. This ensures keyboard focus rings render reliably when focus is managed programmatically by React Aria (e.g. inside a GridList, Menu, or Select). ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33358","className":"mdx-module__YUQVZa__a","children":"#33358"}]]}],"\n"]}]
9a:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Container"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Header"}]," Fixed incorrect bottom spacing caused by ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Container"}]," using ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"padding-bottom"}]," for its default bottom spacing. Changed to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"margin-bottom"}]," and prevented it from applying when ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Container"}]," is used as the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Header"}]," root element. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33354","className":"mdx-module__YUQVZa__a","children":"#33354"}]]}],"\n"]}]
9b:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"PluginHeader"}]," Fixed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeader"}]," to avoid triggering ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ResizeObserver loop completed with undelivered notifications"}]," warnings when used in layouts that react to the header height, such as pages that use ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"FullPage"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33368","className":"mdx-module__YUQVZa__a","children":"#33368"}]]}],"\n"]}]
9c:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tabs"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"PluginHeader"}]," Fixed tab ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"matchStrategy"}]," matching to ignore query parameters and hash fragments in tab ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," values. Previously, tabs with query params in their ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," (e.g., ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"/page?group=foo"}],") would never show as active since matching compared the full ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," string against ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"location.pathname"}]," which never includes query params. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33047","className":"mdx-module__YUQVZa__a","children":"#33047"}]]}],"\n"]}]
9d:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed Table component to use current ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-neutral-1"}]," tokens instead of the removed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-tint"}]," tokens, restoring row hover, selected, pressed, and disabled background colors. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33363","className":"mdx-module__YUQVZa__a","children":"#33363"}]]}],"\n"]}]
9e:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed a bug in the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useTable"}]," hook where the loading skeleton was never shown for ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"complete"}]," mode when using ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"getData"}],". The initial data state was an empty array instead of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"undefined"}],", causing the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Table"}]," component to skip the loading state. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33378","className":"mdx-module__YUQVZa__a","children":"#33378"}]]}],"\n"]}]
9f:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," Fixed Table column headers overflowing and wrapping when there is not enough space. Headers now truncate with ellipsis instead. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33256","className":"mdx-module__YUQVZa__a","children":"#33256"}]]}],"\n"]}]
a0:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Row"}]," Fixed Table row hover, selected, pressed, and disabled background states to use the correct neutral token level based on the container background. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33394","className":"mdx-module__YUQVZa__a","children":"#33394"}]]}],"\n"]}]
a1:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Row"}]," Fixed Table rows showing a pointer cursor when not interactive. Rows now only show ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"cursor: pointer"}]," when they have an ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}],", are selectable, or are pressable. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33256","className":"mdx-module__YUQVZa__a","children":"#33256"}]]}],"\n"]}]
a2:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Row"}]," Fixed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Table"}]," rows with external ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," values to open in a new tab by automatically applying ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"target=\"_blank\""}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"rel=\"noopener noreferrer\""}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33353","className":"mdx-module__YUQVZa__a","children":"#33353"}]]}],"\n"]}]
a3:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," Updated Table selection checkboxes to use ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"aria-label"}]," instead of empty fragment children, improving accessibility and removing the unnecessary label gap in the selection cells. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33394","className":"mdx-module__YUQVZa__a","children":"#33394"}]]}],"\n"]}]
a4:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Button"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonIcon"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonLink"}]," Fixed handling of the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"style"}]," prop on ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Button"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ButtonIcon"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ButtonLink"}]," so that it is now correctly forwarded to the underlying element instead of being silently dropped. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33095","className":"mdx-module__YUQVZa__a","children":"#33095"}]]}],"\n"]}]
a5:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Link"}]," Fixed Link variant default from ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'body'"}]," to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'body-medium'"}]," to match actual CSS selectors. The previous default did not correspond to a valid variant value. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33050","className":"mdx-module__YUQVZa__a","children":"#33050"}]]}],"\n"]}]
a6:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Menu"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Select"}]," Fixed scroll overflow in Menu and Select popover content when constrained by viewport height. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33049","className":"mdx-module__YUQVZa__a","children":"#33049"}]]}],"\n"]}]
a7:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Flex"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Grid"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"GridItem"}]," Added support for native HTML div attributes on the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Flex"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Grid"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Grid.Item"}]," components. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33136","className":"mdx-module__YUQVZa__a","children":"#33136"}]]}],"\n"]}]
a8:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"virtualized"}]," prop to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Table"}]," component for virtualized rendering of large datasets. Accepts ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"true"}]," for default row height, ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"{ rowHeight: number }"}]," for fixed height, or ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"{ estimatedRowHeight: number }"}]," for variable height rows. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33246","className":"mdx-module__YUQVZa__a","children":"#33246"}]]}],"\n"]}]
a9:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Menu"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Select"}]," Fixed focus-visible outline styles for Menu and Select components. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32983","className":"mdx-module__YUQVZa__a","children":"#32983"}]]}],"\n"]}]
aa:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed MenuItem ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"onAction"}]," prop ordering so user-provided ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"onAction"}]," handlers are chained rather than silently overwritten. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33150","className":"mdx-module__YUQVZa__a","children":"#33150"}]]}],"\n"]}]
ab:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Pages created with ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PageBlueprint"}]," now render the plugin header by default in the new frontend system. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33389","className":"mdx-module__YUQVZa__a","children":"#33389"}]]}],"\n"]}]
ac:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Select"}]," The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Select"}]," trigger now automatically adapts its background colour based on the parent background context. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33102","className":"mdx-module__YUQVZa__a","children":"#33102"}]]}],"\n"]}]
ad:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"PluginHeader"}]," Merged the internal ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeaderToolbar"}]," component into ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeader"}],", removing the separate component and its associated types (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeaderToolbarOwnProps"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeaderToolbarProps"}],") and definition (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeaderToolbarDefinition"}],"). This is an internal refactor with no changes to the public API of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeader"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33085","className":"mdx-module__YUQVZa__a","children":"#33085"}]]}],"\n"]}]
ae:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Updated dependency ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"globals"}]," to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"^17.0.0"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33251","className":"mdx-module__YUQVZa__a","children":"#33251"}]]}],"\n"]}]
af:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Improved type safety in ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useDefinition"}]," by centralizing prop resolution and strengthening the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"BgPropsConstraint"}]," to require that ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg"}]," provider components declare ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"children"}]," as a required prop in their OwnProps type. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32971","className":"mdx-module__YUQVZa__a","children":"#32971"}]]}],"\n"]}]
b0:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"RadioGroup"}]," Added proper cursor styles for RadioGroup items. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32983","className":"mdx-module__YUQVZa__a","children":"#32983"}]]}],"\n"]}]
b1:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Card"}]," Fixed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Card"}]," interactive cards not firing the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"onPress"}]," handler when clicking the card surface. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33343","className":"mdx-module__YUQVZa__a","children":"#33343"}]]}],"\n"]}]
b2:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Textfield"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Searchfield"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"PasswordField"}]," Fixed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"isRequired"}]," prop not being passed to the underlying React Aria field components in TextField, SearchField, and PasswordField. Previously, ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"isRequired"}]," was consumed locally for the secondary label text but never forwarded, which meant the input elements lacked ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"aria-required=\"true\""}]," and React Aria's built-in required validation was not activated. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33050","className":"mdx-module__YUQVZa__a","children":"#33050"}]]}],"\n"]}]
b3:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Searchfield"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Textfield"}]," ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"SearchField"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"TextField"}]," now automatically adapt their background color based on the parent bg context, stepping up one neutral level (e.g. neutral-1 → neutral-2) when placed on a neutral background. ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"TextField"}]," also gains a focus ring using the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-ring"}]," token. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33081","className":"mdx-module__YUQVZa__a","children":"#33081"}]]}],"\n"]}]
b4:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Improved ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useBreakpoint"}]," performance by sharing a single set of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"matchMedia"}]," listeners across all component instances instead of creating independent listeners per hook call. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33045","className":"mdx-module__YUQVZa__a","children":"#33045"}]]}],"\n"]}]
b5:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Alert"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Container"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"DialogBody"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"FieldLabel"}]," Extended ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"AlertProps"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ContainerProps"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"DialogBodyProps"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"FieldLabelProps"}]," with native div element props to allow passing attributes like ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"aria-*"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-*"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33095","className":"mdx-module__YUQVZa__a","children":"#33095"}]]}],"\n"]}]
b9:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-gray-5"}]
ba:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-gray-8"}]
bc:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Box"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Button"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonIcon"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonLink"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ToggleButton"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Card"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Flex"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Grid"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Replaced ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Surface"}]," / ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"onSurface"}]," system with new provider/consumer background system"]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The old ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Surface"}]," type (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'0'"}],"–",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'3'"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'auto'"}],") and its associated props (","$L147",", ","$L148",") have been replaced by a provider/consumer ","$L149"," architecture."]}],"\n","$L14a","\n","$L14b","\n","$L14c","\n","$L14d","\n","$L14e","\n","$L14f","\n","$L150","\n","$L151","\n","$L152","\n","$L153","\n","$L154","\n","$L155","\n","$L156","\n","$L157","\n","$L158","\n","$L159","\n","$L15a","\n","$L15b","\n","$L15c","\n","$L15d","\n","$L15e","\n"]}]
bd:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," ",["$","strong",null,{"children":"BREAKING:"}]," Renamed, added, and removed CSS tokens."]}],"\n",["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Renamed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-neutral-0"}]," to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-app"}],"."]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Renamed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-border"}]," to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-border-2"}],"."]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-border-1"}]," for subtle, low-contrast borders."]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-popover"}]," for the background color of popovers, tooltips, menus, and dialogs."]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Removed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-border-hover"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-border-pressed"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-border-disabled"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32837","className":"mdx-module__YUQVZa__a","children":"#32837"}]]}],"\n"]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n","$L15f","\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Remove any references to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-border-hover"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-border-pressed"}],", and ","$L160"," as these tokens no longer exist."]}],"\n"]}]
be:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonIcon"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonLink"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Changed CSS selectors for ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ButtonIcon"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ButtonLink"}]," components. Custom styles targeting ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":".bui-Button"}]," to style these components must be updated to use ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":".bui-ButtonIcon"}]," or ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":".bui-ButtonLink"}]," respectively."]}],"\n","$L161","\n"]}]
bf:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"cell"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"header"}]," properties in ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ColumnConfig"}]," now return ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ReactElement"}]," instead of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ReactNode"}],"."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["This fixes an issue where React Aria's Collection component would inject an ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"id"}]," prop into Fragment wrappers, causing \"Invalid prop ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"id"}]," supplied to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"React.Fragment"}],"\" errors on render."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration:"}],"\n","$L162","\n"]}]
c0:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"PluginHeader"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Renamed the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Header"}]," component to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeader"}]," for clarity."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"The following exports have been renamed:"}],"\n",["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Header"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeader"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"HeaderProps"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeaderProps"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"HeaderDefinition"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"PluginHeaderDefinition"}]]}],"\n"]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"HeaderTab"}]," type is unchanged as it is shared with ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"HeaderPage"}],"."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["CSS class names have been updated from ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bui-Header*"}]," to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bui-PluginHeader*"}],". ","$L163"]}],"\n","$L164","\n","$L165","\n"]}]
c1:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Button"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Removed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"large"}]," size variant from Button component as it was never implemented. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32541","className":"mdx-module__YUQVZa__a","children":"#32541"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n","$L166","\n"]}]
c2:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Link"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Removed link and tint color tokens, added new status foreground tokens, and improved Link component styling"]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"The following color tokens have been removed:"}],"\n",["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-link"}]," (and all related tokens: ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"-hover"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"-pressed"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"-disabled"}],")"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-tint"}]," (and all related tokens: ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"-hover"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"-pressed"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"-disabled"}],")"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-tint"}]," (and all related tokens: ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"-hover"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"-pressed"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"-disabled"}],")"]}],"\n","$L167","\n"]}],"\n","$L168","\n","$L169","\n","$L16a","\n","$L16b","\n","$L16c","\n","$L16d","\n","$L16e","\n","$L16f","\n","$L170","\n","$L171","\n","$L172","\n"]}]
c4:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32488","className":"mdx-module__YUQVZa__a","children":"#32488"}]
c5:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Popover"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tooltip"}]," Fixed CSS Module syntax to comply with Next.js 16 Turbopack validation by flattening nested dark theme selectors. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32575","className":"mdx-module__YUQVZa__a","children":"#32575"}]]}],"\n"]}]
c6:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Button"}]," Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"destructive"}]," prop to Button for dangerous actions like delete or remove. Works with all variants (primary, secondary, tertiary). ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32554","className":"mdx-module__YUQVZa__a","children":"#32554"}]]}],"\n"]}]
c7:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useDefinition"}]," hook adding literal \"undefined\" class name when no className prop was passed. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32553","className":"mdx-module__YUQVZa__a","children":"#32553"}]]}],"\n"]}]
c8:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tag"}]," Allow ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ref"}]," as a prop on the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Tag"}]," component ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32742","className":"mdx-module__YUQVZa__a","children":"#32742"}]]}],"\n"]}]
c9:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Cleaned up ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useDefinition"}]," ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ownProps"}]," types to remove never-typed ghost properties from autocomplete. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32799","className":"mdx-module__YUQVZa__a","children":"#32799"}]]}],"\n"]}]
ca:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," Allow data to be passed directly to the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useTable"}]," hook using the property ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data"}]," instead of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"getData()"}]," for mode ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"\"complete\""}],"."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["This simplifies usage as data changes, rather than having to perform a ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useEffect"}]," when data changes, and then reloading the data. It also happens immediately, so stale data won't remain until a rerender (with an internal async state change), so less flickering. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32685","className":"mdx-module__YUQVZa__a","children":"#32685"}]]}],"\n"]}]
cb:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," Fixed changing columns after first render from crashing. It now renders the table with the new column layout as columns change. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32684","className":"mdx-module__YUQVZa__a","children":"#32684"}]]}],"\n"]}]
cc:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Alert"}]," Added new ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Alert"}]," component with support for status variants (info, success, warning, danger), icons, loading states, and custom actions."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Updated status color tokens for improved contrast and consistency across light and dark themes:"}],"\n",["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Added new ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-info"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-info"}]," tokens for info status"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Updated ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-danger"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-danger"}]," tokens"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Updated ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-warning"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-warning"}]," tokens"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Updated ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-success"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-success"}]," tokens ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32520","className":"mdx-module__YUQVZa__a","children":"#32520"}]]}],"\n"]}],"\n"]}]
cd:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tabs"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tab"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"TagGroup"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tag"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Menu"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"MenuItem"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"MenuAutocomplete"}]," Fixed client-side navigation for container components by wrapping the container (not individual items) in RouterProvider. Components now conditionally provide routing context only when children have internal links, removing the Router context requirement when not needed. This also removes the need to wrap these components in MemoryRouter during tests when they are not using the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," prop."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Additionally, when multiple tabs match the current URL via prefix matching, the tab with the most specific path (highest segment count) is now selected. For example, with URL ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"/catalog/users/john"}],", a tab with path ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"/catalog/users"}]," is now selected over a tab with path ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"/catalog"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32373","className":"mdx-module__YUQVZa__a","children":"#32373"}]]}],"\n"]}]
ce:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed an infinite render loop in Tabs when navigating to a URL that doesn't match any tab ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32540","className":"mdx-module__YUQVZa__a","children":"#32540"}]]}],"\n"]}]
cf:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["export PasswordField component ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32643","className":"mdx-module__YUQVZa__a","children":"#32643"}]]}],"\n"]}]
d0:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Migrated Accordion components to use ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useDefinition"}]," instead of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useStyles"}],", and added automatic background adaptation based on parent container context. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32843","className":"mdx-module__YUQVZa__a","children":"#32843"}]]}],"\n"]}]
d1:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Link"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonLink"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Row"}]," Fixed components to not require a Router context when rendering without internal links. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32373","className":"mdx-module__YUQVZa__a","children":"#32373"}]]}],"\n"]}]
d2:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Updated ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"react-router-dom"}]," peer dependency to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"^6.30.2"}]," and explicitly disabled v7 future flags to suppress deprecation warnings. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31818","className":"mdx-module__YUQVZa__a","children":"#31818"}]]}],"\n"]}]
d3:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," The Table component now wraps the react-aria-components ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Table"}]," with a ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ResizableTableContainer"}]," only if any column has a width property set. This means that column widths can adapt to the content otherwise (if no width is explicitly set). ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32686","className":"mdx-module__YUQVZa__a","children":"#32686"}]]}],"\n"]}]
d4:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Bump react-aria-components to v1.14.0 ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32537","className":"mdx-module__YUQVZa__a","children":"#32537"}]]}],"\n"]}]
d5:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed React 17 compatibility by using ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useId"}]," from ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"react-aria"}]," instead of the built-in React hook which is only available in React 18+. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32428","className":"mdx-module__YUQVZa__a","children":"#32428"}]]}],"\n"]}]
d6:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Switch"}]," Fixed Switch component disabled state styling to show ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"not-allowed"}]," cursor and disabled text color. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32551","className":"mdx-module__YUQVZa__a","children":"#32551"}]]}],"\n"]}]
d7:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Migrated to use the standard ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"backstage-cli package build"}]," for CSS bundling instead of a custom build script. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32761","className":"mdx-module__YUQVZa__a","children":"#32761"}]]}],"\n"]}]
d8:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}]
d9:["$","ol",null,{"children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Update imports and use the new ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useTable"}]," hook:"]}],"\n"]}]
db:["$","ol",null,{"start":"2","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":"Define columns and render with the new Table API:"}],"\n"]}]
dd:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Updating color tokens to match the new neutral style on different surfaces. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32202","className":"mdx-module__YUQVZa__a","children":"#32202"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"There's no direct replacement for the old tint tokens but you can use the new neutral set of color tokens on surface 0 or 1 as a replacement."}],"\n",["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-tint"}]," can be replaced by ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-neutral-on-surface-0"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-tint-hover"}]," can be replaced by ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-neutral-on-surface-0-hover"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-tint-pressed"}]," can be replaced by ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-neutral-on-surface-0-pressed"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-tint-disabled"}]," can be replaced by ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-neutral-on-surface-0-disabled"}]]}],"\n"]}],"\n"]}]
de:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Introduce new ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ToggleButton"}]," & ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ToggleButtonGroup"}]," components in Backstage UI ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32232","className":"mdx-module__YUQVZa__a","children":"#32232"}]]}],"\n"]}]
df:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Renamed CSS variable ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg"}]," to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-surface-0"}]," for consistency. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32200","className":"mdx-module__YUQVZa__a","children":"#32200"}]]}],"\n"]}]
e0:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32185","className":"mdx-module__YUQVZa__a","children":"#32185"}]
e1:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Button"}]," Fixed disabled tertiary buttons incorrectly showing hover effects on surfaces. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32385","className":"mdx-module__YUQVZa__a","children":"#32385"}]]}],"\n"]}]
e2:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Added new Popover component for Backstage UI with automatic overflow handling, and full placement support. Also introduced ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-shadow"}]," token for consistent elevation styling across overlay components (Popover, Tooltip, Menu). ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32313","className":"mdx-module__YUQVZa__a","children":"#32313"}]]}],"\n"]}]
e3:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," Fixed Table sorting indicator not being visible when a column is actively sorted. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32350","className":"mdx-module__YUQVZa__a","children":"#32350"}]]}],"\n"]}]
e4:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Menu"}]," Fixed Menu component trigger button not toggling correctly. Removed custom click-outside handler that was interfering with React Aria's built-in state management, allowing the menu to properly open and close when clicking the trigger button. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32347","className":"mdx-module__YUQVZa__a","children":"#32347"}]]}],"\n"]}]
e5:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," Added support for column width configuration in Table component. Columns now accept ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"width"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"defaultWidth"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"minWidth"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"maxWidth"}]," props for responsive layout control. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32336","className":"mdx-module__YUQVZa__a","children":"#32336"}]]}],"\n"]}]
e6:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Searchfield"}]," Fixed SearchField ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"startCollapsed"}]," prop not working correctly in Backstage UI. The field now properly starts in a collapsed state, expands when clicked and focused, and collapses back when unfocused with no input. Also fixed CSS logic to work correctly in all layout contexts (flex row, flex column, and regular containers). ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32123","className":"mdx-module__YUQVZa__a","children":"#32123"}]]}],"\n"]}]
e7:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Link"}]," component causing hard page refreshes for internal routes. The component now properly uses React Router's navigation instead of full page reloads. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32265","className":"mdx-module__YUQVZa__a","children":"#32265"}]]}],"\n"]}]
e8:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," Added support for custom pagination options in ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useTable"}]," hook and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Table"}]," component. You can now configure ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"pageSizeOptions"}]," to customize the page size dropdown, and hook into pagination events via ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"onPageSizeChange"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"onNextPage"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"onPreviousPage"}]," callbacks. When ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"pageSize"}]," doesn't match any option, the first option is used and a warning is logged. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32321","className":"mdx-module__YUQVZa__a","children":"#32321"}]]}],"\n"]}]
e9:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," Fixed missing border styles on table selection cells in multi-select mode. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32369","className":"mdx-module__YUQVZa__a","children":"#32369"}]]}],"\n"]}]
ea:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"className"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"style"}]," props to the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Table"}]," component. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32342","className":"mdx-module__YUQVZa__a","children":"#32342"}]]}],"\n"]}]
ee:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fixed Table column sorting indicator to show up arrow when no sort is active, correctly indicating that clicking will sort ascending. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31844","className":"mdx-module__YUQVZa__a","children":"#31844"}]]}],"\n"]}]
f0:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"API changes required:"}]
f1:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"checked"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"isSelected"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"defaultChecked"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"defaultSelected"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"disabled"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"isDisabled"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"required"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"isRequired"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"label"}]," prop removed - use ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"children"}]," instead"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["CSS: ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bui-CheckboxLabel"}]," class removed"]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Data attribute: ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-checked"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-selected"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["Use without label is no longer supported ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31517","className":"mdx-module__YUQVZa__a","children":"#31517"}]]}],"\n"]}]
f2:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}]
f3:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Before:"}]
f5:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"After:"}]
f7:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Before:"}]
f9:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"After:"}]
fb:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Before:"}]
fd:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"After:"}]
ff:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Fixing styles on SearchField in Backstage UI after migration to CSS modules. ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"SearchField"}]," has now its own set of class names. We previously used class names from ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"TextField"}]," but this approach was creating some confusion so going forward in your theme you'll be able to theme ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"TextField"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"SearchField"}]," separately. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31507","className":"mdx-module__YUQVZa__a","children":"#31507"}]]}],"\n"]}]
100:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Removed central ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"componentDefinitions"}]," object and related type utilities (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ComponentDefinitionName"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ComponentClassNames"}],")."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Component definitions are primarily intended for documenting the CSS class API for theming purposes, not for programmatic use in JavaScript/TypeScript. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31744","className":"mdx-module__YUQVZa__a","children":"#31744"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"If you were using component definitions or class names to build custom components, we recommend migrating to either:"}],"\n",["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":"Use Backstage UI components directly as building blocks, or"}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":"Duplicate the component CSS in your own stylesheets instead of relying on internal class names"}],"\n"]}],"\n"]}]
101:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Menu"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Switch"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Skeleton"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"PluginHeader"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Header"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tabs"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Changed className prop behavior to augment default styles instead of being ignored or overriding them."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["If you were passing custom className values to any of these components that relied on the previous behavior, you may need to adjust your styles to account for the default classes now being applied alongside your custom classes. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31496","className":"mdx-module__YUQVZa__a","children":"#31496"}]]}],"\n"]}]
102:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Removed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Collapsible"}]," component. Migrate to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Accordion"}]," or use React Aria ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Disclosure"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31493","className":"mdx-module__YUQVZa__a","children":"#31493"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["$","strong",null,{"children":"Path 1: Accordion (Opinionated Styled Component)"}]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Accordion provides preset styling with a similar component structure."}],"\n","$L173","\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["CSS classes: ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":".bui-CollapsibleRoot"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":".bui-Accordion"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":".bui-CollapsibleTrigger"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":".bui-AccordionTrigger"}]," (now on heading element), ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":".bui-CollapsiblePanel"}]," → ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":".bui-AccordionPanel"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["$","strong",null,{"children":"Path 2: React Aria Disclosure (Full Customization)"}]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"For custom styling without preset styles:"}],"\n","$L174","\n"]}]
103:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Select"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"SelectProps"}]," interface now accepts a generic type parameter for selection mode."]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Added searchable and multiple selection support to Select component. The component now accepts ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"searchable"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"selectionMode"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"searchPlaceholder"}]," props to enable filtering and multi-selection modes. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31649","className":"mdx-module__YUQVZa__a","children":"#31649"}]]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["If you're using ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"SelectProps"}]," type directly, update from ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"SelectProps"}]," to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"SelectProps<'single' | 'multiple'>"}],". Component usage remains backward compatible."]}],"\n"]}]
104:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31524","className":"mdx-module__YUQVZa__a","children":"#31524"}]
105:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Dialog"}]," Fixed dialog backdrop appearance in dark mode. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31673","className":"mdx-module__YUQVZa__a","children":"#31673"}]]}],"\n"]}]
106:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Avatar"}]," Migrated CellProfile component from Base UI Avatar to Backstage UI Avatar component. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31608","className":"mdx-module__YUQVZa__a","children":"#31608"}]]}],"\n"]}]
107:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Avatar"}]," Avatar components in x-small and small sizes now display only one initial instead of two, improving readability at smaller dimensions. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31623","className":"mdx-module__YUQVZa__a","children":"#31623"}]]}],"\n"]}]
108:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Removed ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"@base-ui-components/react"}]," dependency as all components now use React Aria Components. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31672","className":"mdx-module__YUQVZa__a","children":"#31672"}]]}],"\n"]}]
109:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix the default font size in Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31435","className":"mdx-module__YUQVZa__a","children":"#31435"}]]}],"\n"]}]
10a:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix CSS layer ordering in Backstage UI to make sure component styles are loaded after tokens and base declarations. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31448","className":"mdx-module__YUQVZa__a","children":"#31448"}]]}],"\n"]}]
10b:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"RadioGroup"}]," Fixed RadioGroup radio button ellipse distortion by preventing flex shrink and grow. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31576","className":"mdx-module__YUQVZa__a","children":"#31576"}]]}],"\n"]}]
10c:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix font smoothing as default in Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31444","className":"mdx-module__YUQVZa__a","children":"#31444"}]]}],"\n"]}]
10d:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Enable tree-shaking of imports other than ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"*.css"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31516","className":"mdx-module__YUQVZa__a","children":"#31516"}]]}],"\n"]}]
10e:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Button"}]," ",["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ButtonIcon"}]," Added ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"loading"}]," prop to Button and ButtonIcon components for displaying spinner during async operations. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31681","className":"mdx-module__YUQVZa__a","children":"#31681"}]]}],"\n"]}]
10f:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]," Fixed Table Row component to properly support opening links in new tabs via right-click or Cmd+Click when using the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"href"}]," prop. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31680","className":"mdx-module__YUQVZa__a","children":"#31680"}]]}],"\n"]}]
110:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Set the color-scheme property depending on theme ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31469","className":"mdx-module__YUQVZa__a","children":"#31469"}]]}],"\n"]}]
111:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"VisuallyHidden"}]," Added new VisuallyHidden component for hiding content visually while keeping it accessible to screen readers. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31484","className":"mdx-module__YUQVZa__a","children":"#31484"}]]}],"\n"]}]
112:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix default font weight and font family in Backstage UI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31432","className":"mdx-module__YUQVZa__a","children":"#31432"}]]}],"\n"]}]
113:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31375","className":"mdx-module__YUQVZa__a","children":"#31375"}]
114:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Added support for data attributes in ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"<Box />"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"<Container />"}],", ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"<Flex />"}],", and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"<Grid />"}]," components, ensuring they are correctly applied to the rendered elements. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31374","className":"mdx-module__YUQVZa__a","children":"#31374"}]]}],"\n"]}]
115:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Cleaning up Backstage UI props definitions as well as removing ScrollArea in Card to improve accessibility. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31404","className":"mdx-module__YUQVZa__a","children":"#31404"}]]}],"\n"]}]
116:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add react router for internal routing for ButtonLinks ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31276","className":"mdx-module__YUQVZa__a","children":"#31276"}]]}],"\n"]}]
117:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Added a background color default on the body ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31365","className":"mdx-module__YUQVZa__a","children":"#31365"}]]}],"\n"]}]
118:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["We are restructuring our CSS to have a better layer structure. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31362","className":"mdx-module__YUQVZa__a","children":"#31362"}]]}],"\n"]}]
119:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Improved SearchField component flex layout and animations. Fixed SearchField behavior in Header components by switching from width-based transitions to flex-basis transitions for better responsive behavior. Added new Storybook stories to test SearchField integration with Header component. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31158","className":"mdx-module__YUQVZa__a","children":"#31158"}]]}],"\n"]}]
11a:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Remove auto selection of tabs for tabs that all have href defined ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31281","className":"mdx-module__YUQVZa__a","children":"#31281"}]]}],"\n"]}]
11b:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Avoid overriding onChange when spreading props ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31232","className":"mdx-module__YUQVZa__a","children":"#31232"}]]}],"\n"]}]
11c:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Using react router for internal links in the Menu component ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/31339","className":"mdx-module__YUQVZa__a","children":"#31339"}]]}],"\n"]}]
11d:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"Text"}]
11e:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30592","className":"mdx-module__YUQVZa__a","children":"#30592"}]
11f:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"startCollapsed"}]," prop on the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"SearchField"}]," component in BUI. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30729","className":"mdx-module__YUQVZa__a","children":"#30729"}]]}],"\n"]}]
120:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Adds onTabSelectionChange to ui header component. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30588","className":"mdx-module__YUQVZa__a","children":"#30588"}]]}],"\n"]}]
121:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"<Grid />"}]
122:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/30013","className":"mdx-module__YUQVZa__a","children":"#30013"}]
123:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29484","className":"mdx-module__YUQVZa__a","children":"#29484"}]
124:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Move styles to the root of the TextField component. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29466","className":"mdx-module__YUQVZa__a","children":"#29466"}]]}],"\n"]}]
125:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["We added a render prop to the Link component to make sure it can work with React Router. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29247","className":"mdx-module__YUQVZa__a","children":"#29247"}]]}],"\n"]}]
126:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix Select styles on small sizes + with long option names in Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29545","className":"mdx-module__YUQVZa__a","children":"#29545"}]]}],"\n"]}]
127:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Added a new gray scale for Canon for both light and dark theme. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29543","className":"mdx-module__YUQVZa__a","children":"#29543"}]]}],"\n"]}]
128:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Add support for column sizing in DataTable. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29603","className":"mdx-module__YUQVZa__a","children":"#29603"}]]}],"\n"]}]
129:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Fix the Icon component when the name is not found to return null instead of an empty SVG. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29280","className":"mdx-module__YUQVZa__a","children":"#29280"}]]}],"\n"]}]
12a:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29200","className":"mdx-module__YUQVZa__a","children":"#29200"}]
12b:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":["\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-red-bg)","color":"var(--badge-red-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Breaking"}]," Added a new ScrollArea component for Canon. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/29240","className":"mdx-module__YUQVZa__a","children":"#29240"}]]}],"\n"]}]
12c:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33597","className":"mdx-module__YUQVZa__a","children":"#33597"}]
130:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["If you cannot upgrade all packages together, or if you have a custom app shell, add a ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"BUIProvider"}]," inside your Router:"]}]
132:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"noTrack"}]
133:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33150","className":"mdx-module__YUQVZa__a","children":"#33150"}]
134:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"RadioGroup"}]
135:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Searchfield"}]
136:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Select"}]
137:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Skeleton"}]
138:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Switch"}]
139:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Table"}]
13a:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"TablePagination"}]
13b:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tabs"}]
13c:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"TagGroup"}]
13d:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Text"}]
13e:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Textfield"}]
13f:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ToggleButton"}]
140:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"ToggleButtonGroup"}]
141:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"Tooltip"}]
142:["$","span",null,{"style":{"display":"inline-block","backgroundColor":"var(--badge-gray-bg)","color":"var(--badge-gray-color)","padding":"0.125rem 0.375rem","borderRadius":"0.25rem","fontSize":"0.75rem","fontWeight":600,"marginRight":"0.25rem","lineHeight":1.3},"children":"VisuallyHidden"}]
143:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useStyles"}]
144:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useDefinition"}]
145:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"OwnProps"}]
146:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/33050","className":"mdx-module__YUQVZa__a","children":"#33050"}]
147:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"surface"}]
148:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"onSurface"}]
149:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg"}]
14a:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["$","strong",null,{"children":"Types:"}]}]
14b:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ContainerBg"}]," — ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'neutral-1'"}]," | ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'neutral-2'"}]," | ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'neutral-3'"}]," | ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'danger'"}]," | ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'warning'"}]," | ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'success'"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ProviderBg"}]," — ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"ContainerBg | 'neutral-auto'"}]]}],"\n"]}]
14c:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Consumer components (e.g. Button) inherit the parent's ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg"}]," via ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-on-bg"}],", and CSS handles the visual step-up. See \"Neutral level capping\" below for details on how levels are bounded."]}]
14d:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["$","strong",null,{"children":"Hooks:"}]}]
14e:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useBgProvider(bg?)"}]," — for provider components. Returns ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"{ bg: undefined }"}]," when no ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg"}]," is given (transparent). Supports ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"'neutral-auto'"}]," to auto-increment from the parent context."]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"useBgConsumer()"}]," — for consumer components. Returns the parent container's ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg"}]," unchanged."]}],"\n"]}]
14f:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["$","strong",null,{"children":"Component roles:"}]}]
150:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","strong",null,{"children":"Provider-only"}]," (Box, Flex, Grid): set ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-bg"}],", wrap children in ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"BgProvider"}],". ",["$","strong",null,{"children":"Transparent by default"}]," — they do ",["$","em",null,{"children":"not"}]," auto-increment; pass ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg=\"neutral-auto\""}]," explicitly if you want automatic neutral stepping."]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","strong",null,{"children":"Consumer-only"}]," (Button, ButtonIcon, ButtonLink): set ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-on-bg"}],", inherit the parent container's ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg"}]," unchanged."]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","strong",null,{"children":"Provider + Consumer"}]," (Card): sets both ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-bg"}]," and ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-on-bg"}],", wraps children. Card passes ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg=\"neutral-auto\""}]," to its inner Box, so it auto-increments from the parent context."]}],"\n"]}]
151:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["$","strong",null,{"children":"Neutral level capping:"}]}]
152:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Provider components cap at ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"neutral-3"}],". There is no ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"neutral-4"}]," prop value. The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"neutral-4"}]," level exists only in consumer component CSS — for example, a Button sitting on a ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"neutral-3"}]," surface uses ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"neutral-4"}]," tokens internally via ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-on-bg"}],". ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32711","className":"mdx-module__YUQVZa__a","children":"#32711"}]]}]
153:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}]
154:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Rename the ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"surface"}]," prop to ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg"}]," on provider components and update values:"]}]
156:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Remove ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"onSurface"}]," from consumer components — they now always inherit from the parent container:"]}]
158:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Update type imports:"}]
15a:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Replace hook usage in custom components:"}]
15c:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Update CSS selectors targeting surface data attributes:"}]
15e:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Note: Provider components use ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-bg"}]," (values: ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"neutral-1"}]," through ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"neutral-3"}],", plus intent values). Consumer components use ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-on-bg"}],", which reflects the parent container's ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"bg"}]," directly. The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"neutral-4"}]," level never appears as a prop or ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"data-bg"}]," value — it is used only in consumer CSS."]}]
160:["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-border-disabled"}]
163:["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32875","className":"mdx-module__YUQVZa__a","children":"#32875"}]
164:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}]
167:["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-border-tint"}]," (and all related tokens)"]}]
168:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["$","strong",null,{"children":"New Status Tokens:"}]}]
169:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Added dedicated tokens for status colors that distinguish between usage on status backgrounds vs. standalone usage:"}]
16a:["$","ul",null,{"className":"mdx-module__YUQVZa__ul","children":["\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-danger-on-bg"}]," / ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-danger"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-warning-on-bg"}]," / ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-warning"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-success-on-bg"}]," / ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-success"}]]}],"\n",["$","li",null,{"className":"mdx-module__YUQVZa__li","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-info-on-bg"}]," / ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-fg-info"}]]}],"\n"]}]
16b:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"-on-bg"}]," variants are designed for text on colored backgrounds, while the base variants are for standalone status indicators with improved visibility and contrast. ",["$","a",null,{"href":"https://github.com/backstage/backstage/pull/32608","className":"mdx-module__YUQVZa__a","children":"#32608"}]]}]
16c:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Migration Guide:"}]
16d:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"For link colors, migrate to one of the following alternatives:"}]
16f:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"For tint colors (backgrounds, foregrounds, borders), migrate to appropriate status or neutral colors:"}]
171:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["If you're using status foreground colors on colored backgrounds, update to the new ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"-on-bg"}]," tokens:"]}]
b:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
175:I[815120,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"IconMark"]
8:null
d:[["$","title","0",{"children":"Backstage UI"}],["$","meta","1",{"name":"description","content":"UI library for Backstage"}],["$","meta","2",{"property":"og:title","content":"Backstage UI"}],["$","meta","3",{"property":"og:description","content":"UI library for Backstage"}],["$","meta","4",{"property":"og:image","content":"https://ui.backstage.io/opengraph-image.jpg?opengraph-image.10.22h8p4jpb-.jpg"}],["$","meta","5",{"property":"og:image:type","content":"image/jpeg"}],["$","meta","6",{"property":"og:image:width","content":"1200"}],["$","meta","7",{"property":"og:image:height","content":"630"}],["$","meta","8",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","9",{"name":"twitter:title","content":"Backstage UI"}],["$","meta","10",{"name":"twitter:description","content":"UI library for Backstage"}],["$","meta","11",{"name":"twitter:image","content":"https://ui.backstage.io/opengraph-image.jpg?opengraph-image.10.22h8p4jpb-.jpg"}],["$","meta","12",{"name":"twitter:image:type","content":"image/jpeg"}],["$","meta","13",{"name":"twitter:image:width","content":"1200"}],["$","meta","14",{"name":"twitter:image:height","content":"630"}],["$","link","15",{"rel":"icon","href":"/icon.svg?icon.06utu8u71m2--.svg","sizes":"any","type":"image/svg+xml"}],["$","$L175","16",{}]]
176:I[178805,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js","/_next/static/chunks/13p6wrl03ngu-.js"],"CodeBlockClient"]
177:T1670,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> import</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { Header</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#F97583;--shiki-dark:#F97583"> type</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> HeaderTab } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '@backstage/ui'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> import</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { Header</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#F97583;--shiki-dark:#F97583"> type</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> HeaderNavTabItem } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '@backstage/ui'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;--shiki-dark:#6B737C">  // Tabs no longer support matchStrategy — active state is controlled via activeTabId</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> const</span><span style="color:#79B8FF;--shiki-dark:#79B8FF"> tabs</span><span style="color:#F97583;--shiki-dark:#F97583">:</span><span style="color:#B392F0;--shiki-dark:#B392F0"> HeaderTab</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">[] </span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> [</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">   { id</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'overview'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> label</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'Overview'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> href</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '/overview'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> matchStrategy</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'prefix'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> const tabs: HeaderNavTabItem[] </span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> [</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">   { id</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'overview'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> label</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'Overview'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> href</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '/overview'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  ];</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Header title</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"My Page"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> tabs</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{tabs} </span><span style="color:#F97583;--shiki-dark:#F97583">/></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Header title</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"My Page"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> tabs</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{tabs} activeTabId</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"overview"</span><span style="color:#F97583;--shiki-dark:#F97583"> /></span></span>
<span class="line"></span></code></pre>10:["$","$L176",null,{"out":"$177","title":"$undefined"}]
178:T525,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Alert surface</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"1"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> status</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"info"</span><span style="color:#F97583;--shiki-dark:#F97583"> /></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Alert status</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"info"</span><span style="color:#F97583;--shiki-dark:#F97583"> /></span></span>
<span class="line"><span style="color:#9ECBFF;--shiki-dark:#FFAB70">``` [#32711](https://github.com/backstage/backstage/pull/32711)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre>b6:["$","$L176",null,{"out":"$178","title":"$undefined"}]
b7:["$","$L176",null,{"out":"<pre class=\"shiki shiki-themes github-dark min-dark\" style=\"--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#F97583;--shiki-dark:#F97583\">-</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> background</span><span style=\"color:#E1E4E8;--shiki-dark:#BBBBBB\">:</span><span style=\"color:#F97583;--shiki-dark:#F97583\"> var</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">(--bui-bg-surface-0);</span></span>\n<span class=\"line\"><span style=\"color:#F97583;--shiki-dark:#F97583\">+</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> background</span><span style=\"color:#E1E4E8;--shiki-dark:#BBBBBB\">:</span><span style=\"color:#F97583;--shiki-dark:#F97583\"> var</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">(--bui-bg-neutral-0);</span></span>\n<span class=\"line\"></span></code></pre>","title":"$undefined"}]
b8:["$","$L176",null,{"out":"<pre class=\"shiki shiki-themes github-dark min-dark\" style=\"--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#F97583;--shiki-dark:#F97583\">-</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> background</span><span style=\"color:#E1E4E8;--shiki-dark:#BBBBBB\">:</span><span style=\"color:#F97583;--shiki-dark:#F97583\"> var</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">(--bui-bg-neutral-on-surface-0);</span></span>\n<span class=\"line\"><span style=\"color:#F97583;--shiki-dark:#F97583\">+</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> background</span><span style=\"color:#E1E4E8;--shiki-dark:#BBBBBB\">:</span><span style=\"color:#F97583;--shiki-dark:#F97583\"> var</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">(--bui-bg-neutral-1);</span></span>\n<span class=\"line\"></span></code></pre>","title":"$undefined"}]
179:T5fd,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">PluginHeader</span><span style="color:#B392F0;--shiki-dark:#B392F0"> title</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"My Plugin"</span><span style="color:#B392F0;--shiki-dark:#B392F0"> tabs</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{tabs} /></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">FullPage</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  {</span><span style="color:#6A737D;--shiki-dark:#6B737C">/* content fills remaining height */</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">}</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">FullPage</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#9ECBFF;--shiki-dark:#FFAB70">``` [#32822](https://github.com/backstage/backstage/pull/32822)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre>c3:["$","$L176",null,{"out":"$179","title":"$undefined"}]
17a:T573,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Cell</span></span>
<span class="line"><span style="color:#B392F0;--shiki-dark:#B392F0">  title</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"My Title"</span></span>
<span class="line"><span style="color:#B392F0;--shiki-dark:#B392F0">  description</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"My description"</span></span>
<span class="line"><span style="color:#B392F0;--shiki-dark:#B392F0">  leadingIcon</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{&#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Icon</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> />}</span></span>
<span class="line"><span style="color:#B392F0;--shiki-dark:#B392F0">  href</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"/path"</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">/></span></span>
<span class="line"></span></code></pre>eb:["$","$L176",null,{"out":"$17a","title":"$undefined"}]
17b:T577,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">CellText</span></span>
<span class="line"><span style="color:#B392F0;--shiki-dark:#B392F0">  title</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"My Title"</span></span>
<span class="line"><span style="color:#B392F0;--shiki-dark:#B392F0">  description</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"My description"</span></span>
<span class="line"><span style="color:#B392F0;--shiki-dark:#B392F0">  leadingIcon</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{&#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Icon</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> />}</span></span>
<span class="line"><span style="color:#B392F0;--shiki-dark:#B392F0">  href</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"/path"</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">/></span></span>
<span class="line"></span></code></pre>ec:["$","$L176",null,{"out":"$17b","title":"$undefined"}]
ed:["$","$L176",null,{"out":"<pre class=\"shiki shiki-themes github-dark min-dark\" style=\"--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">&#x3C;</span><span style=\"color:#79B8FF;--shiki-dark:#79B8FF\">Cell</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">>{</span><span style=\"color:#6A737D;--shiki-dark:#6B737C\">/* Your custom content */</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">}&#x3C;/</span><span style=\"color:#79B8FF;--shiki-dark:#79B8FF\">Cell</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">></span></span>\n<span class=\"line\"></span></code></pre>","title":"$undefined"}]
17c:Te58,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0"># Remove Base </span><span style="color:#79B8FF;--shiki-dark:#79B8FF">UI</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">specific props</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Avatar src</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"..."</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> name</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"..."</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> render</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{</span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">} </span><span style="color:#F97583;--shiki-dark:#F97583">/></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Avatar src</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"..."</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> name</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"..."</span><span style="color:#F97583;--shiki-dark:#F97583"> /></span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0"># Update large size usage to x</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">large for same visual size</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Avatar src</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"..."</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> name</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"..."</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> size</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"large"</span><span style="color:#F97583;--shiki-dark:#F97583"> /></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Avatar src</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"..."</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> name</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"..."</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> size</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"x-large"</span><span style="color:#F97583;--shiki-dark:#F97583"> /></span></span>
<span class="line"></span></code></pre>ef:["$","$L176",null,{"out":"$17c","title":"$undefined"}]
17d:T7d8,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#6A737D;--shiki-dark:#6B737C">// Before</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#B392F0;--shiki-dark:#B392F0"> bg</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"neutral-2"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">>...&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;--shiki-dark:#6B737C">// After</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#B392F0;--shiki-dark:#B392F0"> bg</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"neutral"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#B392F0;--shiki-dark:#B392F0"> bg</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"neutral"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">>...&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Box</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"></span></code></pre>81:["$","$L176",null,{"out":"$17d","title":"$undefined"}]
12d:["$","$L176",null,{"out":"<pre class=\"shiki shiki-themes github-dark min-dark\" style=\"--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#F97583;--shiki-dark:#F97583\">-</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> background</span><span style=\"color:#E1E4E8;--shiki-dark:#BBBBBB\">:</span><span style=\"color:#F97583;--shiki-dark:#F97583\"> var</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">(--bui-bg-popover);</span></span>\n<span class=\"line\"><span style=\"color:#F97583;--shiki-dark:#F97583\">+</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> background</span><span style=\"color:#E1E4E8;--shiki-dark:#BBBBBB\">:</span><span style=\"color:#F97583;--shiki-dark:#F97583\"> var</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">(--bui-bg-neutral-1);</span></span>\n<span class=\"line\"></span></code></pre>","title":"$undefined"}]
17e:T524,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> [data</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">startCollapsed</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">'true'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">] { </span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> [data</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">startcollapsed</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">'true'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">] { </span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }</span></span>
<span class="line"></span></code></pre>12e:["$","$L176",null,{"out":"$17e","title":"$undefined"}]
12f:["$","$L176",null,{"out":"<pre class=\"shiki shiki-themes github-dark min-dark\" style=\"--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#F97583;--shiki-dark:#F97583\">-</span><span style=\"color:#F97583;--shiki-dark:#F97583\"> import</span><span style=\"color:#F97583;--shiki-dark:#F97583\"> type</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\"> { ComponentDefinition</span><span style=\"color:#E1E4E8;--shiki-dark:#BBBBBB\">,</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\"> ClassNamesMap } </span><span style=\"color:#F97583;--shiki-dark:#F97583\">from</span><span style=\"color:#9ECBFF;--shiki-dark:#FFAB70\"> '@backstage/ui'</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">;</span></span>\n<span class=\"line\"></span></code></pre>","title":"$undefined"}]
bb:["$","$L176",null,{"out":"<pre class=\"shiki shiki-themes github-dark min-dark\" style=\"--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#F97583;--shiki-dark:#F97583\">-</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> background</span><span style=\"color:#E1E4E8;--shiki-dark:#BBBBBB\">:</span><span style=\"color:#F97583;--shiki-dark:#F97583\"> var</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">(--bui-gray-1);</span></span>\n<span class=\"line\"><span style=\"color:#F97583;--shiki-dark:#F97583\">+</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> background</span><span style=\"color:#E1E4E8;--shiki-dark:#BBBBBB\">:</span><span style=\"color:#F97583;--shiki-dark:#F97583\"> var</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">(--bui-bg-neutral-1);</span></span>\n<span class=\"line\"></span></code></pre>","title":"$undefined"}]
17f:T42d,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> var</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(--bui-bg-neutral-0)</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> var</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(--bui-bg-app)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> var</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(--bui-border)</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> var</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(--bui-border-2)</span></span>
<span class="line"></span></code></pre>15f:["$","$L176",null,{"out":"$17f","title":"$undefined"}]
180:Tae6,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#6A737D;--shiki-dark:#6B737C">/* This no longer styles ButtonIcon or ButtonLink */</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.bui</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Button[data</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">variant</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"primary"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">] { </span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#6A737D;--shiki-dark:#6B737C">/* Use component-specific selectors */</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.bui</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">ButtonIcon[data</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">variant</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"primary"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">] { </span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.bui</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">ButtonLink[data</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">variant</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"primary"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">] { </span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }</span></span>
<span class="line"><span style="color:#9ECBFF;--shiki-dark:#FFAB70">``` [#32308](https://github.com/backstage/backstage/pull/32308)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre>161:["$","$L176",null,{"out":"$180","title":"$undefined"}]
181:T1166,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">const</span><span style="color:#79B8FF;--shiki-dark:#79B8FF"> columns</span><span style="color:#F97583;--shiki-dark:#F97583">:</span><span style="color:#B392F0;--shiki-dark:#B392F0"> ColumnConfig</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;</span><span style="color:#B392F0;--shiki-dark:#B392F0">MyItem</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">>[] </span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> [</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  {</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">    id</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'name'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">    label</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'Name'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">-   </span><span style="color:#B392F0;--shiki-dark:#B392F0">cell</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> (</span><span style="color:#FFAB70;--shiki-dark:#B392F0">item</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">) </span><span style="color:#F97583;--shiki-dark:#F97583">=></span><span style="color:#E1E4E8;--shiki-dark:#79B8FF"> item</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.name</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">+   </span><span style="color:#B392F0;--shiki-dark:#B392F0">cell</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> (</span><span style="color:#FFAB70;--shiki-dark:#B392F0">item</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">) </span><span style="color:#F97583;--shiki-dark:#F97583">=></span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">CellText</span><span style="color:#B392F0;--shiki-dark:#B392F0"> title</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{</span><span style="color:#E1E4E8;--shiki-dark:#79B8FF">item</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.name} /></span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">-   </span><span style="color:#B392F0;--shiki-dark:#B392F0">header</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> () </span><span style="color:#F97583;--shiki-dark:#F97583">=></span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'Name'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">+   </span><span style="color:#B392F0;--shiki-dark:#B392F0">header</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> () </span><span style="color:#F97583;--shiki-dark:#F97583">=></span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Column</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">>Name&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Column</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  }</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">];</span></span>
<span class="line"><span style="color:#9ECBFF;--shiki-dark:#FFAB70">``` [#32472](https://github.com/backstage/backstage/pull/32472)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre>162:["$","$L176",null,{"out":"$181","title":"$undefined"}]
182:T5ad,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Button size</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"large"</span><span style="color:#F97583;--shiki-dark:#F97583">></span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Click me</span><span style="color:#F97583;--shiki-dark:#F97583">&#x3C;/</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Button</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Button size</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"medium"</span><span style="color:#F97583;--shiki-dark:#F97583">></span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Click me</span><span style="color:#F97583;--shiki-dark:#F97583">&#x3C;/</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Button</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"></span></code></pre>166:["$","$L176",null,{"out":"$182","title":"$undefined"}]
183:Te1e,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-import</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { Table</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> useTable } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '@backstage/ui'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-const</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { </span><span style="color:#79B8FF;--shiki-dark:#79B8FF">data</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#79B8FF;--shiki-dark:#79B8FF"> paginationProps</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> } </span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#B392F0;--shiki-dark:#B392F0"> useTable</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">({ data</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> items</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> pagination</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> {</span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">} });</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+import</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { Table</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> useTable</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#F97583;--shiki-dark:#F97583"> type</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> ColumnConfig } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '@backstage/ui'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+const</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { </span><span style="color:#79B8FF;--shiki-dark:#79B8FF">tableProps</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> } </span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#B392F0;--shiki-dark:#B392F0"> useTable</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">({</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">+  mode</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'complete'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">+  </span><span style="color:#B392F0;--shiki-dark:#B392F0">getData</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> () </span><span style="color:#F97583;--shiki-dark:#F97583">=></span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> items</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">+});</span></span>
<span class="line"></span></code></pre>da:["$","$L176",null,{"out":"$183","title":"$undefined"}]
184:T184b,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-&#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Table aria</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">label</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"My table"</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583">  &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">TableHeader</span><span style="color:#F97583;--shiki-dark:#F97583">>...&#x3C;/</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">TableHeader</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583">  &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">TableBody items</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{data}</span><span style="color:#F97583;--shiki-dark:#F97583">>...&#x3C;/</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">TableBody</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-&#x3C;/</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Table</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-&#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">TablePagination {</span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">paginationProps} </span><span style="color:#F97583;--shiki-dark:#F97583">/></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+const</span><span style="color:#79B8FF;--shiki-dark:#79B8FF"> columns</span><span style="color:#F97583;--shiki-dark:#F97583">:</span><span style="color:#B392F0;--shiki-dark:#B392F0"> ColumnConfig</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;</span><span style="color:#B392F0;--shiki-dark:#B392F0">Item</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">>[] </span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> [</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">  { id</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'name'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> label</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'Name'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> isRowHeader</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#79B8FF;--shiki-dark:#79B8FF"> true</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#B392F0;--shiki-dark:#B392F0"> cell</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#FFAB70;--shiki-dark:#B392F0"> item</span><span style="color:#F97583;--shiki-dark:#F97583"> =></span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">CellText</span><span style="color:#B392F0;--shiki-dark:#B392F0"> title</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{</span><span style="color:#E1E4E8;--shiki-dark:#79B8FF">item</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.name} /> }</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">  { id</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'type'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> label</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'Type'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#B392F0;--shiki-dark:#B392F0"> cell</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#FFAB70;--shiki-dark:#B392F0"> item</span><span style="color:#F97583;--shiki-dark:#F97583"> =></span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">CellText</span><span style="color:#B392F0;--shiki-dark:#B392F0"> title</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{</span><span style="color:#E1E4E8;--shiki-dark:#79B8FF">item</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.type} /> }</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">];</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+&#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Table columnConfig</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{columns} {</span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">tableProps} </span><span style="color:#F97583;--shiki-dark:#F97583">/></span></span>
<span class="line"></span></code></pre>dc:["$","$L176",null,{"out":"$184","title":"$undefined"}]
f4:["$","$L176",null,{"out":"<pre class=\"shiki shiki-themes github-dark min-dark\" style=\"--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">&#x3C;</span><span style=\"color:#79B8FF;--shiki-dark:#79B8FF\">Checkbox</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> label</span><span style=\"color:#F97583;--shiki-dark:#F97583\">=</span><span style=\"color:#9ECBFF;--shiki-dark:#FFAB70\">\"Accept terms\"</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> checked</span><span style=\"color:#F97583;--shiki-dark:#F97583\">=</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">{agreed} </span><span style=\"color:#B392F0;--shiki-dark:#B392F0\">onChange</span><span style=\"color:#F97583;--shiki-dark:#F97583\">=</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">{setAgreed} /></span></span>\n<span class=\"line\"></span></code></pre>","title":"$undefined"}]
f6:["$","$L176",null,{"out":"<pre class=\"shiki shiki-themes github-dark min-dark\" style=\"--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">&#x3C;</span><span style=\"color:#79B8FF;--shiki-dark:#79B8FF\">Checkbox</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> isSelected</span><span style=\"color:#F97583;--shiki-dark:#F97583\">=</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">{agreed} </span><span style=\"color:#B392F0;--shiki-dark:#B392F0\">onChange</span><span style=\"color:#F97583;--shiki-dark:#F97583\">=</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">{setAgreed}></span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">  Accept terms</span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">&#x3C;/</span><span style=\"color:#79B8FF;--shiki-dark:#79B8FF\">Checkbox</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">></span></span>\n<span class=\"line\"></span></code></pre>","title":"$undefined"}]
f8:["$","$L176",null,{"out":"<pre class=\"shiki shiki-themes github-dark min-dark\" style=\"--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">&#x3C;</span><span style=\"color:#79B8FF;--shiki-dark:#79B8FF\">Checkbox</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> label</span><span style=\"color:#F97583;--shiki-dark:#F97583\">=</span><span style=\"color:#9ECBFF;--shiki-dark:#FFAB70\">\"Option\"</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> disabled</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\"> /></span></span>\n<span class=\"line\"></span></code></pre>","title":"$undefined"}]
fa:["$","$L176",null,{"out":"<pre class=\"shiki shiki-themes github-dark min-dark\" style=\"--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">&#x3C;</span><span style=\"color:#79B8FF;--shiki-dark:#79B8FF\">Checkbox</span><span style=\"color:#B392F0;--shiki-dark:#B392F0\"> isDisabled</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">>Option&#x3C;/</span><span style=\"color:#79B8FF;--shiki-dark:#79B8FF\">Checkbox</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">></span></span>\n<span class=\"line\"></span></code></pre>","title":"$undefined"}]
fc:["$","$L176",null,{"out":"<pre class=\"shiki shiki-themes github-dark min-dark\" style=\"--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">&#x3C;</span><span style=\"color:#79B8FF;--shiki-dark:#79B8FF\">Checkbox</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\"> /></span></span>\n<span class=\"line\"></span></code></pre>","title":"$undefined"}]
fe:["$","$L176",null,{"out":"<pre class=\"shiki shiki-themes github-dark min-dark\" style=\"--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">&#x3C;</span><span style=\"color:#79B8FF;--shiki-dark:#79B8FF\">Checkbox</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">></span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">  &#x3C;</span><span style=\"color:#79B8FF;--shiki-dark:#79B8FF\">VisuallyHidden</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">>Accessible label&#x3C;/</span><span style=\"color:#79B8FF;--shiki-dark:#79B8FF\">VisuallyHidden</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">></span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">&#x3C;/</span><span style=\"color:#79B8FF;--shiki-dark:#79B8FF\">Checkbox</span><span style=\"color:#E1E4E8;--shiki-dark:#B392F0\">></span></span>\n<span class=\"line\"></span></code></pre>","title":"$undefined"}]
185:T1271,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> import</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { Collapsible } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '@backstage/ui'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> import</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { Accordion</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> AccordionTrigger</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> AccordionPanel } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '@backstage/ui'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#79B8FF">Collapsible</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.Root</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583">   &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#79B8FF">Collapsible</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.Trigger render</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{(props) => &#x3C;Button {</span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">props}>Toggle&#x3C;/Button>} </span><span style="color:#F97583;--shiki-dark:#F97583">/></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583">   &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#79B8FF">Collapsible</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.Panel</span><span style="color:#F97583;--shiki-dark:#F97583">></span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Content</span><span style="color:#F97583;--shiki-dark:#F97583">&#x3C;/</span><span style="color:#E1E4E8;--shiki-dark:#79B8FF">Collapsible</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.Panel</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;/</span><span style="color:#E1E4E8;--shiki-dark:#79B8FF">Collapsible</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.Root</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Accordion</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583">   &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">AccordionTrigger title</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"Toggle"</span><span style="color:#F97583;--shiki-dark:#F97583"> /></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583">   &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">AccordionPanel</span><span style="color:#F97583;--shiki-dark:#F97583">></span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Content</span><span style="color:#F97583;--shiki-dark:#F97583">&#x3C;/</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">AccordionPanel</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;/</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Accordion</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"></span></code></pre>173:["$","$L176",null,{"out":"$185","title":"$undefined"}]
186:T84c,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">import</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { Disclosure</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> Button</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> DisclosurePanel } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'react-aria-components'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Disclosure</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Button</span><span style="color:#B392F0;--shiki-dark:#B392F0"> slot</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"trigger"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">>Toggle&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Button</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">DisclosurePanel</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">>Content&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">DisclosurePanel</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">&#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Disclosure</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">>;</span></span>
<span class="line"></span></code></pre>174:["$","$L176",null,{"out":"$186","title":"$undefined"}]
187:T6a8,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> import</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { BUIProvider } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '@backstage/ui'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">BrowserRouter</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">+   &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">BUIProvider</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">      &#x3C;</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">AppContent</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> /></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">+   &#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">BUIProvider</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">  &#x3C;/</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">BrowserRouter</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"></span></code></pre>131:["$","$L176",null,{"out":"$187","title":"$undefined"}]
188:Tda7,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Box surface</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"1"</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Box bg</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"neutral-1"</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Card surface</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"2"</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Card bg</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"neutral-2"</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Flex surface</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"0"</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Flex bg</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"neutral-1"</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#79B8FF">Grid</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.Root surface</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"1"</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#79B8FF">Grid</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.Root bg</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"neutral-1"</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"></span></code></pre>155:["$","$L176",null,{"out":"$188","title":"$undefined"}]
189:Tb36,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Button onSurface</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"1"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> variant</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"secondary"</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Button variant</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"secondary"</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">ButtonIcon onSurface</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"2"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> variant</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"secondary"</span><span style="color:#F97583;--shiki-dark:#F97583"> /></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">ButtonIcon variant</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"secondary"</span><span style="color:#F97583;--shiki-dark:#F97583"> /></span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">ToggleButton onSurface</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"1"</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> &#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">ToggleButton</span><span style="color:#F97583;--shiki-dark:#F97583">></span></span>
<span class="line"></span></code></pre>157:["$","$L176",null,{"out":"$189","title":"$undefined"}]
18a:T5df,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> import</span><span style="color:#F97583;--shiki-dark:#F97583"> type</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { Surface</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> LeafSurfaceProps</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> ContainerSurfaceProps } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '@backstage/ui'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> import</span><span style="color:#F97583;--shiki-dark:#F97583"> type</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { ContainerBg</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> ProviderBg } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '@backstage/ui'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"></span></code></pre>159:["$","$L176",null,{"out":"$18a","title":"$undefined"}]
18b:Tf8b,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> import</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { useSurface</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> SurfaceProvider } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '@backstage/ui'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> import</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { useBgProvider</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> useBgConsumer</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> BgProvider } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '@backstage/ui'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> const</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { </span><span style="color:#79B8FF;--shiki-dark:#79B8FF">surface</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> } </span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#B392F0;--shiki-dark:#B392F0"> useSurface</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">({ surface</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#E1E4E8;--shiki-dark:#79B8FF"> props</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.surface });</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> const</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { </span><span style="color:#79B8FF;--shiki-dark:#79B8FF">bg</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> } </span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#B392F0;--shiki-dark:#B392F0"> useBgProvider</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(</span><span style="color:#E1E4E8;--shiki-dark:#79B8FF">props</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.bg);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#F97583;--shiki-dark:#F97583"> const</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { </span><span style="color:#79B8FF;--shiki-dark:#79B8FF">surface</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> } </span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#B392F0;--shiki-dark:#B392F0"> useSurface</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">({ onSurface</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#E1E4E8;--shiki-dark:#79B8FF"> props</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">.onSurface });</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#F97583;--shiki-dark:#F97583"> const</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { </span><span style="color:#79B8FF;--shiki-dark:#79B8FF">bg</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> } </span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#B392F0;--shiki-dark:#B392F0"> useBgConsumer</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">();</span></span>
<span class="line"></span></code></pre>15b:["$","$L176",null,{"out":"$18b","title":"$undefined"}]
18c:Ta75,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> [data</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">surface</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">'1'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">] { </span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> [data</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">bg</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">'neutral-1'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">] { </span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> [data</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">on</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">surface</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">'1'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">] { </span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> [data</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">on</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">bg</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">'neutral-1'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">] { </span><span style="color:#F97583;--shiki-dark:#F97583">...</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }</span></span>
<span class="line"></span></code></pre>15d:["$","$L176",null,{"out":"$18c","title":"$undefined"}]
18d:T743,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-import</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { Header</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> HeaderDefinition } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '@backstage/ui'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+import</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> { PluginHeader</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> PluginHeaderDefinition } </span><span style="color:#F97583;--shiki-dark:#F97583">from</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> '@backstage/ui'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-&#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">Header title</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"My plugin"</span><span style="color:#F97583;--shiki-dark:#F97583"> /></span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+&#x3C;</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">PluginHeader title</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"My plugin"</span><span style="color:#F97583;--shiki-dark:#F97583"> /></span></span>
<span class="line"></span></code></pre>165:["$","$L176",null,{"out":"$18d","title":"$undefined"}]
18e:T70a,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">.custom</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">link {</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#B392F0;--shiki-dark:#B392F0"> color</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">:</span><span style="color:#F97583;--shiki-dark:#F97583"> var</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(--bui-fg-link);</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#B392F0;--shiki-dark:#B392F0"> color</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">:</span><span style="color:#F97583;--shiki-dark:#F97583"> var</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(--bui-fg-info);  </span><span style="color:#6A737D;--shiki-dark:#6B737C">/* For informational links */</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#6A737D;--shiki-dark:#6B737C"> /* or */</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#B392F0;--shiki-dark:#B392F0"> color</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">:</span><span style="color:#F97583;--shiki-dark:#F97583"> var</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(--bui-fg-primary);  </span><span style="color:#6A737D;--shiki-dark:#6B737C">/* For standard text links */</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">}</span></span>
<span class="line"></span></code></pre>16e:["$","$L176",null,{"out":"$18e","title":"$undefined"}]
18f:T71c,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">.info</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">section {</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#B392F0;--shiki-dark:#B392F0"> background</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">:</span><span style="color:#F97583;--shiki-dark:#F97583"> var</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(--bui-bg-tint);</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#B392F0;--shiki-dark:#B392F0"> background</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">:</span><span style="color:#F97583;--shiki-dark:#F97583"> var</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(--bui-bg-info);  </span><span style="color:#6A737D;--shiki-dark:#6B737C">/* For informational sections */</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#6A737D;--shiki-dark:#6B737C"> /* or */</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#B392F0;--shiki-dark:#B392F0"> background</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">:</span><span style="color:#F97583;--shiki-dark:#F97583"> var</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(--bui-bg-neutral-1);  </span><span style="color:#6A737D;--shiki-dark:#6B737C">/* For neutral emphasis */</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">}</span></span>
<span class="line"></span></code></pre>170:["$","$L176",null,{"out":"$18f","title":"$undefined"}]
190:T59d,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">.error</span><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">badge {</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">-</span><span style="color:#B392F0;--shiki-dark:#B392F0"> color</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">:</span><span style="color:#F97583;--shiki-dark:#F97583"> var</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(--bui-fg-danger);</span></span>
<span class="line"><span style="color:#F97583;--shiki-dark:#F97583">+</span><span style="color:#B392F0;--shiki-dark:#B392F0"> color</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">:</span><span style="color:#F97583;--shiki-dark:#F97583"> var</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(--bui-fg-danger-on-bg);</span></span>
<span class="line"><span style="color:#B392F0;--shiki-dark:#B392F0">  background</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">:</span><span style="color:#F97583;--shiki-dark:#F97583"> var</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">(--bui-bg-danger);</span></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0">}</span></span>
<span class="line"></span></code></pre>172:["$","$L176",null,{"out":"$190","title":"$undefined"}]
191:I[619210,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"Providers"]
192:I[889424,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"Sidebar"]
193:I[335702,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"Toolbar"]
194:I[637718,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"TableOfContents"]
195:I[256054,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"MobileBottomNav"]
196:I[120426,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"CustomTheme"]
2:["$","html",null,{"lang":"en","data-theme-mode":"light","data-theme-name":"backstage","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L191",null,{"children":[["$","$L192",null,{}],["$","div",null,{"className":"layout-module__qLTo7q__container","children":["$","div",null,{"className":"layout-module__qLTo7q__contentWrapper","children":[["$","$L193",null,{"version":"0.14.2"}],["$","div",null,{"className":"layout-module__qLTo7q__content","children":[["$","div",null,{"className":"layout-module__qLTo7q__contentInner","children":["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","aside",null,{"className":"layout-module__qLTo7q__toc","children":["$","$L194",null,{}]}]]}]]}]}],["$","$L195",null,{}],["$","$L196",null,{}]]}]}]}]