@backstage/ui 0.0.0-nightly-20260114025400 → 0.0.0-nightly-20260115025113

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @backstage/ui
 
-## 0.0.0-nightly-20260114025400
+## 0.0.0-nightly-20260115025113
 
 ### Minor Changes
 
@@ -64,6 +64,7 @@
 - 1880402: Fixes app background color on dark mode.
 - 21c87cc: Fixes disabled state in primary and secondary buttons in Backstage UI.
 - 9c76682: build(deps-dev): bump `storybook` from 10.1.9 to 10.1.10
+- 133d5c6: Added new Popover component for Backstage UI with automatic overflow handling, and full placement support. Also introduced `--bui-shadow` token for consistent elevation styling across overlay components (Popover, Tooltip, Menu).
 - b4a4911: Fixed SearchField `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).
 
   Affected components: SearchField

package/css/styles.css

@@ -100,6 +100,7 @@
     --bui-ring: #1f5493;
     --bui-scrollbar: #a0a0a03b;
     --bui-scrollbar-thumb: #a0a0a0;
+    --bui-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
     --bui-animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
   }
 
@@ -161,6 +162,7 @@
     --bui-ring: #1f5493;
     --bui-scrollbar: #3636363a;
     --bui-scrollbar-thumb: #575757;
+    --bui-shadow: none;
   }
 }
 

package/dist/components/Menu/Menu.module.css.esm.js

@@ -1,6 +1,6 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Menu-module_bui-MenuPopover__2_pRD {\n    display: flex;\n    flex-direction: column;\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-2);\n    background: var(--bui-bg-surface-1);\n    color: var(--bui-fg-primary);\n    outline: none;\n    transition: transform 200ms, opacity 200ms;\n    /* Let React Aria handle height constraints naturally */\n    min-height: 0;\n    /* Remove overflow from popover since ScrollArea will handle it */\n    overflow: hidden;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(8px);\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-8px);\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-8px);\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(8px);\n    }\n  }\n\n  .Menu-module_bui-MenuContent__3DAPp {\n    max-height: inherit;\n    box-sizing: border-box;\n    overflow: auto;\n    min-width: 150px;\n    box-sizing: border-box;\n    outline: none;\n    padding-block: var(--bui-space-1);\n  }\n\n  .Menu-module_bui-MenuItem__2UbNh {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &[data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-open] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-color='danger'] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-color='danger'][data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-danger);\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-has-submenu] {\n      & > .Menu-module_bui-MenuItemWrapper__3SEGE > .Menu-module_bui-MenuItemArrow__2Gdal {\n        display: block;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemWrapper__3SEGE {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 2rem;\n    padding-inline: var(--bui-space-2);\n    border-radius: var(--bui-radius-2);\n    outline: none;\n    cursor: default;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-6);\n  }\n\n  .Menu-module_bui-MenuItemListBox__3OVkY {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &:hover .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-selected] .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n      & > svg {\n        opacity: 1;\n        color: var(--bui-fg-primary);\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      opacity: 0;\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuItemContent__2jc-_ {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuItemArrow__2Gdal {\n    display: none;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuSection__3OeyZ {\n    &:first-child .Menu-module_bui-MenuSectionHeader__yFmfK {\n      padding-top: 0;\n    }\n  }\n\n  .Menu-module_bui-MenuSectionHeader__yFmfK {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Menu-module_bui-MenuSeparator__-EtU8 {\n    height: 1px;\n    background: var(--bui-border);\n    margin-inline: var(--bui-space-1_5);\n    margin-block: var(--bui-space-1);\n  }\n\n  .Menu-module_bui-MenuSearchField__1sNMj {\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    height: 2rem;\n\n    &[data-empty] {\n      .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n        visibility: hidden;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuSearchFieldInput__2jPs5 {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    width: 100%;\n    height: 100%;\n    outline: none;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &:first-child {\n      padding-inline: var(--bui-space-3) 0;\n    }\n  }\n\n  .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: 2rem;\n    height: 2rem;\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuEmptyState__wPwuq {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Menu-module_bui-MenuPopover__2_pRD {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--bui-shadow);\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-2);\n    background: var(--bui-bg-surface-1);\n    color: var(--bui-fg-primary);\n    outline: none;\n    transition: transform 200ms, opacity 200ms;\n    /* Let React Aria handle height constraints naturally */\n    min-height: 0;\n    /* Remove overflow from popover since ScrollArea will handle it */\n    overflow: hidden;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(8px);\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-8px);\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-8px);\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(8px);\n    }\n  }\n\n  .Menu-module_bui-MenuContent__3DAPp {\n    max-height: inherit;\n    box-sizing: border-box;\n    overflow: auto;\n    min-width: 150px;\n    box-sizing: border-box;\n    outline: none;\n    padding-block: var(--bui-space-1);\n  }\n\n  .Menu-module_bui-MenuItem__2UbNh {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &[data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-open] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-color='danger'] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-color='danger'][data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-danger);\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-has-submenu] {\n      & > .Menu-module_bui-MenuItemWrapper__3SEGE > .Menu-module_bui-MenuItemArrow__2Gdal {\n        display: block;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemWrapper__3SEGE {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 2rem;\n    padding-inline: var(--bui-space-2);\n    border-radius: var(--bui-radius-2);\n    outline: none;\n    cursor: default;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-6);\n  }\n\n  .Menu-module_bui-MenuItemListBox__3OVkY {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &:hover .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-selected] .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n      & > svg {\n        opacity: 1;\n        color: var(--bui-fg-primary);\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      opacity: 0;\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuItemContent__2jc-_ {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuItemArrow__2Gdal {\n    display: none;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuSection__3OeyZ {\n    &:first-child .Menu-module_bui-MenuSectionHeader__yFmfK {\n      padding-top: 0;\n    }\n  }\n\n  .Menu-module_bui-MenuSectionHeader__yFmfK {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Menu-module_bui-MenuSeparator__-EtU8 {\n    height: 1px;\n    background: var(--bui-border);\n    margin-inline: var(--bui-space-1_5);\n    margin-block: var(--bui-space-1);\n  }\n\n  .Menu-module_bui-MenuSearchField__1sNMj {\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    height: 2rem;\n\n    &[data-empty] {\n      .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n        visibility: hidden;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuSearchFieldInput__2jPs5 {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    width: 100%;\n    height: 100%;\n    outline: none;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &:first-child {\n      padding-inline: var(--bui-space-3) 0;\n    }\n  }\n\n  .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: 2rem;\n    height: 2rem;\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuEmptyState__wPwuq {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
 var styles = {"bui-MenuPopover":"Menu-module_bui-MenuPopover__2_pRD","bui-MenuContent":"Menu-module_bui-MenuContent__3DAPp","bui-MenuItem":"Menu-module_bui-MenuItem__2UbNh","bui-MenuItemWrapper":"Menu-module_bui-MenuItemWrapper__3SEGE","bui-MenuItemArrow":"Menu-module_bui-MenuItemArrow__2Gdal","bui-MenuItemListBox":"Menu-module_bui-MenuItemListBox__3OVkY","bui-MenuItemListBoxCheck":"Menu-module_bui-MenuItemListBoxCheck__3flwX","bui-MenuItemContent":"Menu-module_bui-MenuItemContent__2jc-_","bui-MenuSection":"Menu-module_bui-MenuSection__3OeyZ","bui-MenuSectionHeader":"Menu-module_bui-MenuSectionHeader__yFmfK","bui-MenuSeparator":"Menu-module_bui-MenuSeparator__-EtU8","bui-MenuSearchField":"Menu-module_bui-MenuSearchField__1sNMj","bui-MenuSearchFieldClear":"Menu-module_bui-MenuSearchFieldClear__3bwIe","bui-MenuSearchFieldInput":"Menu-module_bui-MenuSearchFieldInput__2jPs5","bui-MenuEmptyState":"Menu-module_bui-MenuEmptyState__wPwuq"};
 styleInject(css_248z);
 

package/dist/components/Popover/Popover.esm.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Popover as Popover$1, OverlayArrow } from 'react-aria-components';
+import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import { PopoverDefinition } from './definition.esm.js';
+import stylesPopover from './Popover.module.css.esm.js';
+
+const Popover = forwardRef(
+  (props, ref) => {
+    const { classNames, cleanedProps } = useStyles(PopoverDefinition, props);
+    const { className, children, hideArrow, ...rest } = cleanedProps;
+    return /* @__PURE__ */ jsx(
+      Popover$1,
+      {
+        className: clsx(classNames.root, stylesPopover[classNames.root], className),
+        ...rest,
+        ref,
+        children: ({ trigger }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          !hideArrow && trigger !== "MenuTrigger" && trigger !== "SubmenuTrigger" && /* @__PURE__ */ jsx(
+            OverlayArrow,
+            {
+              className: clsx(classNames.arrow, stylesPopover[classNames.arrow]),
+              children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+                /* @__PURE__ */ jsx("path", { d: "M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V7.94781e-07L1.74846e-07 -9.53674e-07L0 2L1.4651 2C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z" }),
+                /* @__PURE__ */ jsx("path", { d: "M11.0046 8.14124C10.2439 8.82575 9.08939 8.82578 8.32869 8.14122L3.47189 3.77011C2.92109 3.27432 2.20619 2.99999 1.46509 2.99999L4.10999 3L8.99769 7.39793C9.37799 7.7402 9.95529 7.7402 10.3356 7.39793L15.2226 3L17.8683 2.99999C17.1271 2.99999 16.4122 3.27432 15.8614 3.77011L11.0046 8.14124Z" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(classNames.content, stylesPopover[classNames.content]),
+              children
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Popover.displayName = "Popover";
+
+export { Popover };
+//# sourceMappingURL=Popover.esm.js.map

package/dist/components/Popover/Popover.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.esm.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { OverlayArrow, Popover as AriaPopover } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { PopoverProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { PopoverDefinition } from './definition';\nimport styles from './Popover.module.css';\n\n/**\n * A popover component built on React Aria Components that displays floating\n * content anchored to a trigger element.\n *\n * @remarks\n * The Popover component supports multiple placements (top, right, bottom, left),\n * automatic viewport-constrained scrolling, and conditional arrow rendering. It\n * automatically handles positioning, collision detection, and ARIA attributes for\n * accessibility. Content is automatically padded and scrollable when it exceeds\n * available space.\n *\n * @example\n * Basic usage with DialogTrigger:\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open Popover</Button>\n *   <Popover>\n *     <Text>Popover content</Text>\n *   </Popover>\n * </DialogTrigger>\n * ```\n *\n * @example\n * With custom placement and no arrow:\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <Popover placement=\"right\" hideArrow>\n *     <Text>Content without arrow</Text>\n *   </Popover>\n * </DialogTrigger>\n * ```\n *\n * @public\n */\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(\n  (props, ref) => {\n    const { classNames, cleanedProps } = useStyles(PopoverDefinition, props);\n    const { className, children, hideArrow, ...rest } = cleanedProps;\n\n    return (\n      <AriaPopover\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        {...rest}\n        ref={ref}\n      >\n        {({ trigger }) => (\n          <>\n            {!hideArrow &&\n              trigger !== 'MenuTrigger' &&\n              trigger !== 'SubmenuTrigger' && (\n                <OverlayArrow\n                  className={clsx(classNames.arrow, styles[classNames.arrow])}\n                >\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V7.94781e-07L1.74846e-07 -9.53674e-07L0 2L1.4651 2C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z\" />\n                    <path d=\"M11.0046 8.14124C10.2439 8.82575 9.08939 8.82578 8.32869 8.14122L3.47189 3.77011C2.92109 3.27432 2.20619 2.99999 1.46509 2.99999L4.10999 3L8.99769 7.39793C9.37799 7.7402 9.95529 7.7402 10.3356 7.39793L15.2226 3L17.8683 2.99999C17.1271 2.99999 16.4122 3.27432 15.8614 3.77011L11.0046 8.14124Z\" />\n                  </svg>\n                </OverlayArrow>\n              )}\n            <div\n              className={clsx(classNames.content, styles[classNames.content])}\n            >\n              {children}\n            </div>\n          </>\n        )}\n      </AriaPopover>\n    );\n  },\n);\n\nPopover.displayName = 'Popover';\n"],"names":["AriaPopover","styles"],"mappings":";;;;;;;;AA2DO,MAAM,OAAA,GAAU,UAAA;AAAA,EACrB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,mBAAmB,KAAK,CAAA;AACvE,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,YAAA;AAEpD,IAAA,uBACE,GAAA;AAAA,MAACA,SAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAMC,cAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC,QAAA,EAAA,CAAC,EAAE,OAAA,EAAQ,qBACV,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAC,SAAA,IACA,OAAA,KAAY,aAAA,IACZ,OAAA,KAAY,gBAAA,oBACV,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAOA,aAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,cAE1D,QAAA,kBAAA,IAAA,CAAC,SAAI,KAAA,EAAM,IAAA,EAAK,QAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EACnD,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,8NAAA,EAA+N,CAAA;AAAA,gCACvO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,qSAAA,EAAsS;AAAA,eAAA,EAChT;AAAA;AAAA,WACF;AAAA,0BAEJ,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAASA,aAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAE7D;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;;;;"}

package/dist/components/Popover/Popover.module.css.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Popover-module_bui-Popover__100-n {\n    margin-right: 12px;\n    overflow-x: hidden;\n    overflow-y: auto;\n    background-color: var(--bui-bg-surface-1);\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-3);\n    padding-block: var(--bui-space-1);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n}\n";
-var stylesPopover = {"bui-Popover":"Popover-module_bui-Popover__100-n"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Popover-module_bui-Popover__100-n {\n    box-shadow: var(--bui-shadow);\n    border-radius: var(--bui-radius-3);\n    background: var(--bui-bg-surface-1);\n    border: 1px solid var(--bui-gray-3);\n    forced-color-adjust: none;\n    outline: none;\n    max-height: inherit;\n    display: flex;\n    flex-direction: column;\n    /* fixes FF gap */\n    transform: translate3d(0, 0, 0);\n    transition: transform 200ms, opacity 200ms;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(4px);\n\n      &:has(.Popover-module_bui-PopoverArrow__BRh92) {\n        margin-bottom: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-4px);\n\n      &:has(.Popover-module_bui-PopoverArrow__BRh92) {\n        margin-left: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-4px);\n\n      &:has(.Popover-module_bui-PopoverArrow__BRh92) {\n        margin-top: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(4px);\n\n      &:has(.Popover-module_bui-PopoverArrow__BRh92) {\n        margin-right: var(--bui-space-3);\n      }\n    }\n  }\n\n  .Popover-module_bui-PopoverContent__H3nrI {\n    overflow-x: hidden;\n    overflow-y: auto;\n    padding: var(--bui-space-4);\n    flex: 1 1 auto;\n    min-height: 0;\n  }\n\n  .Popover-module_bui-PopoverArrow__BRh92 {\n    & svg {\n      display: block;\n\n      /* The popover is rendered overlaying the main\n      popover element by 1px. This causes the borders\n      to overlap, which causes minor visual artifacts\n      with transparent border colors. To mitigate this,\n      we split the stroke and fill across separate\n      elements in order to guarantee that the stroke is\n      always overlaying a consistent color. */\n      path:nth-child(1) {\n        fill: var(--bui-bg-surface-1);\n      }\n\n      path:nth-child(2) {\n        fill: var(--bui-gray-3);\n      }\n\n      /* The arrow svg overlaps the popover by 2px, so we\n      need to adjust the margins accordingly. */\n      --popover-arrow-overlap: -2px;\n    }\n\n    &[data-placement='top'] svg {\n      margin-top: var(--popover-arrow-overlap);\n    }\n\n    &[data-placement='bottom'] svg {\n      margin-bottom: var(--popover-arrow-overlap);\n      transform: rotate(180deg);\n    }\n\n    &[data-placement='right'] svg {\n      margin-right: var(--popover-arrow-overlap);\n      transform: rotate(90deg);\n    }\n\n    &[data-placement='left'] svg {\n      margin-left: var(--popover-arrow-overlap);\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-theme='dark'] {\n    .Popover-module_bui-Popover__100-n {\n      background: var(--bui-bg-surface-2);\n      border: 1px solid var(--bui-gray-4);\n    }\n\n    .Popover-module_bui-PopoverArrow__BRh92 {\n      svg path:nth-child(1) {\n        fill: var(--bui-bg-surface-2);\n      }\n\n      svg path:nth-child(2) {\n        fill: var(--bui-gray-4);\n      }\n    }\n  }\n}\n";
+var stylesPopover = {"bui-Popover":"Popover-module_bui-Popover__100-n","bui-PopoverArrow":"Popover-module_bui-PopoverArrow__BRh92","bui-PopoverContent":"Popover-module_bui-PopoverContent__H3nrI"};
 styleInject(css_248z);
 
 export { stylesPopover as default };

package/dist/components/Popover/definition.esm.js

@@ -1,6 +1,8 @@
 const PopoverDefinition = {
   classNames: {
-    root: "bui-Popover"
+    root: "bui-Popover",
+    arrow: "bui-PopoverArrow",
+    content: "bui-PopoverContent"
   }
 };
 

package/dist/components/Popover/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Popover/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Popover\n * @public\n */\nexport const PopoverDefinition = {\n  classNames: {\n    root: 'bui-Popover',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,iBAAA,GAAoB;AAAA,EAC/B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA;AAEV;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Popover/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Popover\n * @public\n */\nexport const PopoverDefinition = {\n  classNames: {\n    root: 'bui-Popover',\n    arrow: 'bui-PopoverArrow',\n    content: 'bui-PopoverContent',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,iBAAA,GAAoB;AAAA,EAC/B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,aAAA;AAAA,IACN,KAAA,EAAO,kBAAA;AAAA,IACP,OAAA,EAAS;AAAA;AAEb;;;;"}

package/dist/components/Tooltip/Tooltip.module.css.esm.js

@@ -1,6 +1,6 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Tooltip-module_bui-Tooltip__1xkDA {\n    box-shadow: 0 10px 15px -3px rgba(0 0 0 / 0.1),\n      0 4px 6px -4px rgba(0 0 0 / 0.1);\n    border-radius: 4px;\n    background: var(--bui-bg-surface-1);\n    border: 1px solid var(--bui-gray-3);\n    forced-color-adjust: none;\n    outline: none;\n    padding: var(--bui-space-2) var(--bui-space-3);\n    max-width: 240px;\n    /* fixes FF gap */\n    transform: translate3d(0, 0, 0);\n    transition: transform 200ms, opacity 200ms;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    color: var(--bui-fg-primary);\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    --tooltip-offset: var(--bui-space-3);\n\n    &[data-placement='top'] {\n      margin-bottom: var(--tooltip-offset);\n      --origin: translateY(4px);\n    }\n\n    &[data-placement='right'] {\n      margin-left: var(--tooltip-offset);\n      --origin: translateX(-4px);\n    }\n\n    &[data-placement='bottom'] {\n      margin-top: var(--tooltip-offset);\n      --origin: translateY(-4px);\n    }\n\n    &[data-placement='left'] {\n      margin-right: var(--tooltip-offset);\n      --origin: translateX(4px);\n    }\n  }\n\n  .Tooltip-module_bui-TooltipArrow__3lFI0 {\n    & svg {\n      display: block;\n\n      /* The tooltip is rendered overlaying the main\n      tooltip element by 1px. This causes the borders\n      to overlap, which causes minor visual artifacts\n      with transparent border colors. To mitigate this,\n      we split the stroke and fill across separate\n      elements in order to guarantee that the stroke is\n      always overlaying a consistent color. */\n      path:nth-child(1) {\n        fill: var(--bui-bg-surface-1);\n      }\n\n      path:nth-child(2) {\n        fill: var(--bui-gray-3);\n      }\n\n      /* The arrow svg overlaps the tooltip by 2px, so we\n      need to adjust the margins accordingly. */\n      --tooltip-arrow-overlap: -2px;\n    }\n\n    &[data-placement='top'] svg {\n      margin-top: var(--tooltip-arrow-overlap);\n    }\n\n    &[data-placement='bottom'] svg {\n      margin-bottom: var(--tooltip-arrow-overlap);\n      transform: rotate(180deg);\n    }\n\n    &[data-placement='right'] svg {\n      margin-right: var(--tooltip-arrow-overlap);\n      transform: rotate(90deg);\n    }\n\n    &[data-placement='left'] svg {\n      margin-left: var(--tooltip-arrow-overlap);\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-theme='dark'] {\n    .Tooltip-module_bui-Tooltip__1xkDA {\n      background: var(--bui-bg-surface-2);\n      box-shadow: none;\n      border: 1px solid var(--bui-gray-4);\n    }\n\n    .Tooltip-module_bui-TooltipArrow__3lFI0 {\n      svg path:nth-child(1) {\n        fill: var(--bui-bg-surface-2);\n      }\n\n      svg path:nth-child(2) {\n        fill: var(--bui-gray-4);\n      }\n    }\n  }\n}\n";
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Tooltip-module_bui-Tooltip__1xkDA {\n    box-shadow: var(--bui-shadow);\n    border-radius: 4px;\n    background: var(--bui-bg-surface-1);\n    border: 1px solid var(--bui-gray-3);\n    forced-color-adjust: none;\n    outline: none;\n    padding: var(--bui-space-2) var(--bui-space-3);\n    max-width: 240px;\n    /* fixes FF gap */\n    transform: translate3d(0, 0, 0);\n    transition: transform 200ms, opacity 200ms;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    color: var(--bui-fg-primary);\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    --tooltip-offset: var(--bui-space-3);\n\n    &[data-placement='top'] {\n      margin-bottom: var(--tooltip-offset);\n      --origin: translateY(4px);\n    }\n\n    &[data-placement='right'] {\n      margin-left: var(--tooltip-offset);\n      --origin: translateX(-4px);\n    }\n\n    &[data-placement='bottom'] {\n      margin-top: var(--tooltip-offset);\n      --origin: translateY(-4px);\n    }\n\n    &[data-placement='left'] {\n      margin-right: var(--tooltip-offset);\n      --origin: translateX(4px);\n    }\n  }\n\n  .Tooltip-module_bui-TooltipArrow__3lFI0 {\n    & svg {\n      display: block;\n\n      /* The tooltip is rendered overlaying the main\n      tooltip element by 1px. This causes the borders\n      to overlap, which causes minor visual artifacts\n      with transparent border colors. To mitigate this,\n      we split the stroke and fill across separate\n      elements in order to guarantee that the stroke is\n      always overlaying a consistent color. */\n      path:nth-child(1) {\n        fill: var(--bui-bg-surface-1);\n      }\n\n      path:nth-child(2) {\n        fill: var(--bui-gray-3);\n      }\n\n      /* The arrow svg overlaps the tooltip by 2px, so we\n      need to adjust the margins accordingly. */\n      --tooltip-arrow-overlap: -2px;\n    }\n\n    &[data-placement='top'] svg {\n      margin-top: var(--tooltip-arrow-overlap);\n    }\n\n    &[data-placement='bottom'] svg {\n      margin-bottom: var(--tooltip-arrow-overlap);\n      transform: rotate(180deg);\n    }\n\n    &[data-placement='right'] svg {\n      margin-right: var(--tooltip-arrow-overlap);\n      transform: rotate(90deg);\n    }\n\n    &[data-placement='left'] svg {\n      margin-left: var(--tooltip-arrow-overlap);\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-theme='dark'] {\n    .Tooltip-module_bui-Tooltip__1xkDA {\n      background: var(--bui-bg-surface-2);\n      box-shadow: none;\n      border: 1px solid var(--bui-gray-4);\n    }\n\n    .Tooltip-module_bui-TooltipArrow__3lFI0 {\n      svg path:nth-child(1) {\n        fill: var(--bui-bg-surface-2);\n      }\n\n      svg path:nth-child(2) {\n        fill: var(--bui-gray-4);\n      }\n    }\n  }\n}\n";
 var styles = {"bui-Tooltip":"Tooltip-module_bui-Tooltip__1xkDA","bui-TooltipArrow":"Tooltip-module_bui-TooltipArrow__3lFI0"};
 styleInject(css_248z);
 

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactElement, ReactNode, ElementType, ComponentPropsWithRef, ComponentProps } from 'react';
-import { ButtonProps as ButtonProps$1, DisclosureProps, HeadingProps, DisclosurePanelProps, DisclosureGroupProps, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps as TableProps$1, ColumnProps as ColumnProps$1, CellProps as CellProps$1, TableHeaderProps, TableBodyProps, RowProps, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1 } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, DisclosureProps, HeadingProps, DisclosurePanelProps, DisclosureGroupProps, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps as TableProps$1, ColumnProps as ColumnProps$1, CellProps as CellProps$1, TableHeaderProps, TableBodyProps, RowProps, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps as PopoverProps$1, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1 } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NavigateOptions } from 'react-router-dom';
 import { SortDescriptor as SortDescriptor$1 } from 'react-stately';
@@ -1319,14 +1319,14 @@ interface SubmenuTriggerProps extends SubmenuTriggerProps$1 {
 }
 /** @public */
 interface MenuProps<T> extends MenuProps$1<T>, Omit<MenuProps$1<T>, 'children'> {
-    placement?: PopoverProps['placement'];
+    placement?: PopoverProps$1['placement'];
     virtualized?: boolean;
     maxWidth?: string;
     maxHeight?: string;
 }
 /** @public */
 interface MenuListBoxProps<T> extends ListBoxProps<T>, Omit<ListBoxProps<T>, 'children'> {
-    placement?: PopoverProps['placement'];
+    placement?: PopoverProps$1['placement'];
     virtualized?: boolean;
     maxWidth?: string;
     maxHeight?: string;
@@ -1334,7 +1334,7 @@ interface MenuListBoxProps<T> extends ListBoxProps<T>, Omit<ListBoxProps<T>, 'ch
 /** @public */
 interface MenuAutocompleteProps<T> extends MenuProps$1<T>, Omit<MenuProps$1<T>, 'children'> {
     placeholder?: string;
-    placement?: PopoverProps['placement'];
+    placement?: PopoverProps$1['placement'];
     virtualized?: boolean;
     maxWidth?: string;
     maxHeight?: string;
@@ -1342,7 +1342,7 @@ interface MenuAutocompleteProps<T> extends MenuProps$1<T>, Omit<MenuProps$1<T>,
 /** @public */
 interface MenuAutocompleteListBoxProps<T> extends ListBoxProps<T>, Omit<ListBoxProps<T>, 'children'> {
     placeholder?: string;
-    placement?: PopoverProps['placement'];
+    placement?: PopoverProps$1['placement'];
     virtualized?: boolean;
     maxWidth?: string;
     maxHeight?: string;
@@ -1412,6 +1412,75 @@ declare const MenuDefinition: {
     };
 };
 
+/**
+ * Properties for {@link Popover}
+ *
+ * @public
+ */
+interface PopoverProps extends Omit<PopoverProps$1, 'children'> {
+    /**
+     * The content to display inside the popover.
+     * Content is automatically wrapped with padding and scroll behavior.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to hide the arrow pointing to the trigger element.
+     * Arrow is also automatically hidden for MenuTrigger and SubmenuTrigger contexts.
+     *
+     * @defaultValue false
+     */
+    hideArrow?: boolean;
+}
+
+/**
+ * A popover component built on React Aria Components that displays floating
+ * content anchored to a trigger element.
+ *
+ * @remarks
+ * The Popover component supports multiple placements (top, right, bottom, left),
+ * automatic viewport-constrained scrolling, and conditional arrow rendering. It
+ * automatically handles positioning, collision detection, and ARIA attributes for
+ * accessibility. Content is automatically padded and scrollable when it exceeds
+ * available space.
+ *
+ * @example
+ * Basic usage with DialogTrigger:
+ * ```tsx
+ * <DialogTrigger>
+ *   <Button>Open Popover</Button>
+ *   <Popover>
+ *     <Text>Popover content</Text>
+ *   </Popover>
+ * </DialogTrigger>
+ * ```
+ *
+ * @example
+ * With custom placement and no arrow:
+ * ```tsx
+ * <DialogTrigger>
+ *   <Button>Open</Button>
+ *   <Popover placement="right" hideArrow>
+ *     <Text>Content without arrow</Text>
+ *   </Popover>
+ * </DialogTrigger>
+ * ```
+ *
+ * @public
+ */
+declare const Popover: react.ForwardRefExoticComponent<PopoverProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Component definition for Popover
+ * @public
+ */
+declare const PopoverDefinition: {
+    readonly classNames: {
+        readonly root: "bui-Popover";
+        readonly arrow: "bui-PopoverArrow";
+        readonly content: "bui-PopoverContent";
+    };
+};
+
 /** @public */
 interface SearchFieldProps extends SearchFieldProps$1, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
     /**
@@ -1680,5 +1749,5 @@ declare const useBreakpoint: () => {
     down: (key: Breakpoint) => boolean;
 };
 
-export { Accordion, AccordionDefinition, AccordionGroup, AccordionPanel, AccordionTrigger, Avatar, AvatarDefinition, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardDefinition, CardFooter, CardHeader, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, Column, Container, ContainerDefinition, Dialog, DialogBody, DialogDefinition, DialogFooter, DialogHeader, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, Radio, RadioGroup, RadioGroupDefinition, Row, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, useBreakpoint, useTable };
-export type { AccordionGroupProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlignItems, AvatarProps, Border, BorderRadius, BoxProps, Breakpoint, ButtonIconProps, ButtonLinkProps, ButtonProps, CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, CellProfileProps, CellProps, CellTextProps, CheckboxProps, ClassNamesMap, ColumnConfig, ColumnProps, Columns, ComponentDefinition, ContainerProps, CursorParams, CursorResponse, DataAttributeValues, DataAttributesMap, DialogBodyProps, DialogHeaderProps, DialogProps, DialogTriggerProps, Display, FieldLabelProps, FilterState, FlexDirection, FlexProps, FlexWrap, GridItemProps, GridProps, HeaderPageBreadcrumb, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkProps, MenuAutocompleteListBoxProps, MenuAutocompleteProps, MenuItemProps, MenuListBoxItemProps, MenuListBoxProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, PagePagination, PaginationOptions, QueryOptions, RadioGroupProps, RadioProps, Responsive, RowConfig, RowRenderFn, SearchFieldProps, SearchState, SelectProps, SkeletonProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, Surface, SwitchProps, TabListProps, TabMatchStrategy, TabPanelProps, TabProps, TableItem, TablePaginationProps, TablePaginationType, TableProps, TableRootProps, TableSelection, TabsProps, TagGroupProps, TagProps, TextColorStatus, TextColors, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupProps, ToggleButtonProps, TooltipProps, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VisuallyHiddenProps };
+export { Accordion, AccordionDefinition, AccordionGroup, AccordionPanel, AccordionTrigger, Avatar, AvatarDefinition, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardDefinition, CardFooter, CardHeader, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, Column, Container, ContainerDefinition, Dialog, DialogBody, DialogDefinition, DialogFooter, DialogHeader, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, Popover, PopoverDefinition, Radio, RadioGroup, RadioGroupDefinition, Row, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, useBreakpoint, useTable };
+export type { AccordionGroupProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlignItems, AvatarProps, Border, BorderRadius, BoxProps, Breakpoint, ButtonIconProps, ButtonLinkProps, ButtonProps, CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, CellProfileProps, CellProps, CellTextProps, CheckboxProps, ClassNamesMap, ColumnConfig, ColumnProps, Columns, ComponentDefinition, ContainerProps, CursorParams, CursorResponse, DataAttributeValues, DataAttributesMap, DialogBodyProps, DialogHeaderProps, DialogProps, DialogTriggerProps, Display, FieldLabelProps, FilterState, FlexDirection, FlexProps, FlexWrap, GridItemProps, GridProps, HeaderPageBreadcrumb, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkProps, MenuAutocompleteListBoxProps, MenuAutocompleteProps, MenuItemProps, MenuListBoxItemProps, MenuListBoxProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, PagePagination, PaginationOptions, PopoverProps, QueryOptions, RadioGroupProps, RadioProps, Responsive, RowConfig, RowRenderFn, SearchFieldProps, SearchState, SelectProps, SkeletonProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, Surface, SwitchProps, TabListProps, TabMatchStrategy, TabPanelProps, TabProps, TableItem, TablePaginationProps, TablePaginationType, TableProps, TableRootProps, TableSelection, TabsProps, TagGroupProps, TagProps, TextColorStatus, TextColors, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupProps, ToggleButtonProps, TooltipProps, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VisuallyHiddenProps };

package/dist/index.esm.js

@@ -55,6 +55,8 @@ export { Tooltip, TooltipTrigger } from './components/Tooltip/Tooltip.esm.js';
 export { TooltipDefinition } from './components/Tooltip/definition.esm.js';
 export { Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, SubmenuTrigger } from './components/Menu/Menu.esm.js';
 export { MenuDefinition } from './components/Menu/definition.esm.js';
+export { Popover } from './components/Popover/Popover.esm.js';
+export { PopoverDefinition } from './components/Popover/definition.esm.js';
 export { SearchField } from './components/SearchField/SearchField.esm.js';
 export { SearchFieldDefinition } from './components/SearchField/definition.esm.js';
 export { Link } from './components/Link/Link.esm.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/ui",
-  "version": "0.0.0-nightly-20260114025400",
+  "version": "0.0.0-nightly-20260115025113",
   "backstage": {
     "role": "web-library"
   },
@@ -47,7 +47,7 @@
     "react-aria-components": "^1.13.0"
   },
   "devDependencies": {
-    "@backstage/cli": "0.0.0-nightly-20260114025400",
+    "@backstage/cli": "0.0.0-nightly-20260115025113",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "chalk": "^5.4.1",