@backstage/ui 0.7.0-next.0 → 0.7.0-next.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @backstage/ui
 
+## 0.7.0-next.2
+
+### Patch Changes
+
+- d4e603e: Updated Menu component in Backstage UI to use useId() from React Aria instead of React to support React 17.
+
+## 0.7.0-next.1
+
+### Patch Changes
+
+- de89a3d: Fixes some styles on the Select component in BUI.
+- 75fead9: Fixes a couple of small bugs in BUI including setting H1 and H2 correctly on the Header and HeaderPage.
+- 2f9a084: We are motion away from `motion` to use `gsap` instead to make Backstage UI backward compatible with React 17.
+
 ## 0.7.0-next.0
 
 ### Minor Changes

package/css/styles.css

@@ -10578,11 +10578,11 @@
   justify-content: space-between;
   align-items: center;
   gap: var(--bui-space-2);
-  max-width: 100%;
-  transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
+  width: 100%;
   display: flex;
 
   & svg {
+    color: var(--bui-fg-secondary);
     flex-shrink: 0;
   }
 
@@ -10612,6 +10612,7 @@
 
   &:hover {
     border-color: var(--bui-border-hover);
+    transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
   }
 
   &:focus-visible {
@@ -10650,6 +10651,7 @@
   font-family: var(--bui-font-regular);
   font-weight: var(--bui-font-weight-regular);
   color: var(--bui-fg-primary);
+  text-align: left;
   overflow: hidden;
 
   & .bui-SelectItemIndicator {
@@ -10664,14 +10666,15 @@
 .bui-SelectItem {
   width: var(--anchor-width);
   padding-block: var(--bui-space-2);
-  padding-inline: var(--bui-space-4);
+  padding-left: var(--bui-space-3);
+  padding-right: var(--bui-space-4);
   color: var(--bui-fg-primary);
   border-radius: var(--bui-radius-3);
   cursor: pointer;
   user-select: none;
   font-size: var(--bui-font-size-3);
   align-items: center;
-  gap: var(--bui-space-2);
+  gap: var(--bui-space-1);
   outline: none;
   grid-template-columns: 1rem 1fr;
   grid-template-areas: "icon text";

package/dist/components/Checkbox/Checkbox.esm.js

@@ -12,15 +12,13 @@ import '../Card/Card.esm.js';
 import '../Collapsible/Collapsible.esm.js';
 import '../DataTable/DataTable.esm.js';
 import '../FieldLabel/FieldLabel.esm.js';
-import 'react-aria-components';
+import '../Header/HeaderToolbar.esm.js';
+import '../Tabs/Tabs.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
-import '@remixicon/react';
-import '../ButtonIcon/ButtonIcon.esm.js';
 import '../Menu/Menu.esm.js';
 import '../Text/Text.esm.js';
-import 'motion/react';
-import 'react-router-dom';
-import '../Tabs/Tabs.esm.js';
+import '../ButtonIcon/ButtonIcon.esm.js';
+import '@remixicon/react';
 import { Icon } from '../Icon/Icon.esm.js';
 import '../ButtonLink/ButtonLink.esm.js';
 import '../RadioGroup/RadioGroup.esm.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"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 { forwardRef } from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';\nimport { Icon } from '../..';\nimport type { CheckboxProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, ref) => {\n    const {\n      label,\n      checked,\n      onChange,\n      disabled,\n      required,\n      className,\n      name,\n      value,\n      style,\n    } = props;\n\n    const { classNames } = useStyles('Checkbox');\n\n    const checkboxElement = (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        checked={checked}\n        onCheckedChange={onChange}\n        disabled={disabled}\n        required={required}\n        name={name}\n        value={value}\n        style={style}\n      >\n        <CheckboxPrimitive.Indicator className={classNames.indicator}>\n          <Icon name=\"check\" size={12} />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n\n    return label ? (\n      <label className={classNames.label}>\n        {checkboxElement}\n        {label}\n      </label>\n    ) : (\n      checkboxElement\n    );\n  },\n);\n"],"names":["CheckboxPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,KAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,KACE,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,UAAU,CAAA;AAE3C,IAAA,MAAM,eACJ,mBAAA,GAAA;AAAA,MAACA,UAAkB,CAAA,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,OAAA;AAAA,QACA,eAAiB,EAAA,QAAA;AAAA,QACjB,QAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QAEA,QAAC,kBAAA,GAAA,CAAAA,UAAA,CAAkB,SAAlB,EAAA,EAA4B,SAAW,EAAA,UAAA,CAAW,SACjD,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,IAAA,EAAM,IAAI,CAC/B,EAAA;AAAA;AAAA,KACF;AAGF,IAAA,OAAO,KACL,mBAAA,IAAA,CAAC,OAAM,EAAA,EAAA,SAAA,EAAW,WAAW,KAC1B,EAAA,QAAA,EAAA;AAAA,MAAA,eAAA;AAAA,MACA;AAAA,KAAA,EACH,CAEA,GAAA,eAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"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 { forwardRef } from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';\nimport { Icon } from '../..';\nimport type { CheckboxProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, ref) => {\n    const {\n      label,\n      checked,\n      onChange,\n      disabled,\n      required,\n      className,\n      name,\n      value,\n      style,\n    } = props;\n\n    const { classNames } = useStyles('Checkbox');\n\n    const checkboxElement = (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        checked={checked}\n        onCheckedChange={onChange}\n        disabled={disabled}\n        required={required}\n        name={name}\n        value={value}\n        style={style}\n      >\n        <CheckboxPrimitive.Indicator className={classNames.indicator}>\n          <Icon name=\"check\" size={12} />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n\n    return label ? (\n      <label className={classNames.label}>\n        {checkboxElement}\n        {label}\n      </label>\n    ) : (\n      checkboxElement\n    );\n  },\n);\n"],"names":["CheckboxPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,KAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,KACE,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,UAAU,CAAA;AAE3C,IAAA,MAAM,eACJ,mBAAA,GAAA;AAAA,MAACA,UAAkB,CAAA,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,OAAA;AAAA,QACA,eAAiB,EAAA,QAAA;AAAA,QACjB,QAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QAEA,QAAC,kBAAA,GAAA,CAAAA,UAAA,CAAkB,SAAlB,EAAA,EAA4B,SAAW,EAAA,UAAA,CAAW,SACjD,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,IAAA,EAAM,IAAI,CAC/B,EAAA;AAAA;AAAA,KACF;AAGF,IAAA,OAAO,KACL,mBAAA,IAAA,CAAC,OAAM,EAAA,EAAA,SAAA,EAAW,WAAW,KAC1B,EAAA,QAAA,EAAA;AAAA,MAAA,eAAA;AAAA,MACA;AAAA,KAAA,EACH,CAEA,GAAA,eAAA;AAAA;AAGN;;;;"}

package/dist/components/Header/HeaderToolbar.esm.js

@@ -6,9 +6,12 @@ import { RiShapesLine, RiArrowRightSLine, RiMore2Line } from '@remixicon/react';
 import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
 import { Menu } from '../Menu/Menu.esm.js';
 import { Text } from '../Text/Text.esm.js';
-import { useScroll, useTransform, motion } from 'motion/react';
 import { useNavigate, useHref } from 'react-router-dom';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { useGSAP } from '@gsap/react';
 
+gsap.registerPlugin(ScrollTrigger);
 const HeaderToolbar = (props) => {
   const {
     icon,
@@ -21,11 +24,10 @@ const HeaderToolbar = (props) => {
   } = props;
   const { classNames } = useStyles("Header");
   let navigate = useNavigate();
-  const { scrollY } = useScroll();
-  const breadcrumbOpacity = useTransform(scrollY, [80, 120], [0, 1]);
   const toolbarWrapperRef = useRef(null);
   const toolbarContentRef = useRef(null);
   const toolbarControlsRef = useRef(null);
+  const breadcrumbsRef = useRef(null);
   const [showBreadcrumbs, setShowBreadcrumbs] = useState(true);
   useEffect(() => {
     const wrapper = toolbarWrapperRef.current;
@@ -53,19 +55,32 @@ const HeaderToolbar = (props) => {
       resizeObserver.disconnect();
     };
   }, []);
+  useGSAP(() => {
+    gsap.to(breadcrumbsRef.current, {
+      scrollTrigger: {
+        start: "10% 10%",
+        end: "20% 20%",
+        scrub: true
+      },
+      opacity: 1,
+      duration: 1,
+      ease: "power2.inOut"
+    });
+  });
   const titleContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: classNames.toolbarIcon, children: icon || /* @__PURE__ */ jsx(RiShapesLine, {}) }),
     /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: title || "Your plugin" })
   ] });
   return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx("div", { className: classNames.toolbar, "data-has-tabs": hasTabs, children: /* @__PURE__ */ jsxs("div", { className: classNames.toolbarWrapper, ref: toolbarWrapperRef, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames.toolbarContent, ref: toolbarContentRef, children: [
-      titleLink ? /* @__PURE__ */ jsx(Link, { className: classNames.toolbarName, href: titleLink, children: titleContent }) : /* @__PURE__ */ jsx("div", { className: classNames.toolbarName, children: titleContent }),
+      /* @__PURE__ */ jsx(Text, { as: "h1", variant: "body-medium", children: titleLink ? /* @__PURE__ */ jsx(Link, { className: classNames.toolbarName, href: titleLink, children: titleContent }) : /* @__PURE__ */ jsx("div", { className: classNames.toolbarName, children: titleContent }) }),
       breadcrumbs && /* @__PURE__ */ jsxs(
-        motion.div,
+        "div",
         {
+          ref: breadcrumbsRef,
           className: classNames.breadcrumbs,
           style: {
-            opacity: breadcrumbOpacity,
+            opacity: 0,
             visibility: showBreadcrumbs ? "visible" : "hidden"
           },
           children: [

package/dist/components/Header/HeaderToolbar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderToolbar.esm.js","sources":["../../../src/components/Header/HeaderToolbar.tsx"],"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 { Link, RouterProvider } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useRef, useState, useEffect } from 'react';\nimport { RiArrowRightSLine, RiMore2Line, RiShapesLine } from '@remixicon/react';\nimport type { HeaderToolbarProps } from './types';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Menu } from '../Menu';\nimport { Text } from '../Text';\nimport { motion, useScroll, useTransform } from 'motion/react';\nimport { useNavigate, useHref } from 'react-router-dom';\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n  const {\n    icon,\n    title,\n    titleLink,\n    menuItems,\n    breadcrumbs,\n    customActions,\n    hasTabs,\n  } = props;\n  const { classNames } = useStyles('Header');\n  let navigate = useNavigate();\n  const { scrollY } = useScroll();\n  const breadcrumbOpacity = useTransform(scrollY, [80, 120], [0, 1]);\n\n  // Refs for collision detection\n  const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n  const toolbarContentRef = useRef<HTMLDivElement>(null);\n  const toolbarControlsRef = useRef<HTMLDivElement>(null);\n\n  // State for breadcrumb visibility\n  const [showBreadcrumbs, setShowBreadcrumbs] = useState(true);\n\n  // Set up resize observer\n  useEffect(() => {\n    const wrapper = toolbarWrapperRef.current;\n    if (!wrapper) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      const wrapper = toolbarWrapperRef.current;\n      const content = toolbarContentRef.current;\n      const options = toolbarControlsRef.current;\n\n      if (!wrapper || !content) return;\n\n      // Get dimensions\n      const wrapperRect = wrapper.getBoundingClientRect();\n      const wrapperWidth = wrapperRect.width;\n      const wrapperPadding = 24; // 12px on each side (var(--bui-space-3))\n      const availableWidth = wrapperWidth - wrapperPadding;\n\n      // Calculate required width for content\n      const contentRect = content.getBoundingClientRect();\n      const contentWidth = contentRect?.width || 0;\n\n      // Calculate options width (if exists)\n      const optionsRect = options?.getBoundingClientRect();\n      const optionsWidth = optionsRect?.width || 0;\n\n      // Check if we need to hide breadcrumbs\n      const shouldShowBreadcrumbs =\n        contentWidth + optionsWidth + 32 <= availableWidth;\n\n      // Only update state if the value actually changed to prevent flickering\n      setShowBreadcrumbs(prev =>\n        prev !== shouldShowBreadcrumbs ? shouldShowBreadcrumbs : prev,\n      );\n    });\n\n    resizeObserver.observe(wrapper);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  const titleContent = (\n    <>\n      <div className={classNames.toolbarIcon}>{icon || <RiShapesLine />}</div>\n      <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n    </>\n  );\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <div className={classNames.toolbar} data-has-tabs={hasTabs}>\n        <div className={classNames.toolbarWrapper} ref={toolbarWrapperRef}>\n          <div className={classNames.toolbarContent} ref={toolbarContentRef}>\n            {titleLink ? (\n              <Link className={classNames.toolbarName} href={titleLink}>\n                {titleContent}\n              </Link>\n            ) : (\n              <div className={classNames.toolbarName}>{titleContent}</div>\n            )}\n            {breadcrumbs && (\n              <motion.div\n                className={classNames.breadcrumbs}\n                style={{\n                  opacity: breadcrumbOpacity,\n                  visibility: showBreadcrumbs ? 'visible' : 'hidden',\n                }}\n              >\n                <RiArrowRightSLine\n                  size={16}\n                  className={classNames.breadcrumbSeparator}\n                />\n                {breadcrumbs.map((breadcrumb, index) => (\n                  <div key={breadcrumb.label} className={classNames.breadcrumb}>\n                    <Link\n                      href={breadcrumb.href}\n                      className={classNames.breadcrumbLink}\n                      data-active={index === breadcrumbs.length - 1}\n                    >\n                      {breadcrumb.label}\n                    </Link>\n                    {index < breadcrumbs.length - 1 && (\n                      <RiArrowRightSLine\n                        size={16}\n                        className={classNames.breadcrumbSeparator}\n                      />\n                    )}\n                  </div>\n                ))}\n              </motion.div>\n            )}\n          </div>\n          <div className={classNames.toolbarControls} ref={toolbarControlsRef}>\n            {customActions}\n            {menuItems && (\n              <Menu.Root>\n                <Menu.Trigger\n                  render={props => (\n                    <ButtonIcon\n                      size=\"small\"\n                      icon={<RiMore2Line />}\n                      variant=\"tertiary\"\n                      {...props}\n                    />\n                  )}\n                />\n                <Menu.Portal>\n                  <Menu.Positioner sideOffset={4} align=\"end\">\n                    <Menu.Popup>\n                      {menuItems.map(option => (\n                        <Menu.Item\n                          key={option.value}\n                          onClick={() => option.onClick?.()}\n                        >\n                          {option.label}\n                        </Menu.Item>\n                      ))}\n                    </Menu.Popup>\n                  </Menu.Positioner>\n                </Menu.Portal>\n              </Menu.Root>\n            )}\n          </div>\n        </div>\n      </div>\n    </RouterProvider>\n  );\n};\n"],"names":["wrapper","props"],"mappings":"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"}
+{"version":3,"file":"HeaderToolbar.esm.js","sources":["../../../src/components/Header/HeaderToolbar.tsx"],"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 { Link, RouterProvider } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useRef, useState, useEffect } from 'react';\nimport { RiArrowRightSLine, RiMore2Line, RiShapesLine } from '@remixicon/react';\nimport type { HeaderToolbarProps } from './types';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Menu } from '../Menu';\nimport { Text } from '../Text';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport { useGSAP } from '@gsap/react';\n\ngsap.registerPlugin(ScrollTrigger);\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n  const {\n    icon,\n    title,\n    titleLink,\n    menuItems,\n    breadcrumbs,\n    customActions,\n    hasTabs,\n  } = props;\n  const { classNames } = useStyles('Header');\n  let navigate = useNavigate();\n\n  // Refs for collision detection\n  const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n  const toolbarContentRef = useRef<HTMLDivElement>(null);\n  const toolbarControlsRef = useRef<HTMLDivElement>(null);\n  const breadcrumbsRef = useRef<HTMLDivElement>(null);\n\n  // State for breadcrumb visibility\n  const [showBreadcrumbs, setShowBreadcrumbs] = useState(true);\n\n  // Set up resize observer\n  useEffect(() => {\n    const wrapper = toolbarWrapperRef.current;\n    if (!wrapper) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      const wrapper = toolbarWrapperRef.current;\n      const content = toolbarContentRef.current;\n      const options = toolbarControlsRef.current;\n\n      if (!wrapper || !content) return;\n\n      // Get dimensions\n      const wrapperRect = wrapper.getBoundingClientRect();\n      const wrapperWidth = wrapperRect.width;\n      const wrapperPadding = 24; // 12px on each side (var(--bui-space-3))\n      const availableWidth = wrapperWidth - wrapperPadding;\n\n      // Calculate required width for content\n      const contentRect = content.getBoundingClientRect();\n      const contentWidth = contentRect?.width || 0;\n\n      // Calculate options width (if exists)\n      const optionsRect = options?.getBoundingClientRect();\n      const optionsWidth = optionsRect?.width || 0;\n\n      // Check if we need to hide breadcrumbs\n      const shouldShowBreadcrumbs =\n        contentWidth + optionsWidth + 32 <= availableWidth;\n\n      // Only update state if the value actually changed to prevent flickering\n      setShowBreadcrumbs(prev =>\n        prev !== shouldShowBreadcrumbs ? shouldShowBreadcrumbs : prev,\n      );\n    });\n\n    resizeObserver.observe(wrapper);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  useGSAP(() => {\n    gsap.to(breadcrumbsRef.current, {\n      scrollTrigger: {\n        start: '10% 10%',\n        end: '20% 20%',\n        scrub: true,\n      },\n      opacity: 1,\n      duration: 1,\n      ease: 'power2.inOut',\n    });\n  });\n\n  const titleContent = (\n    <>\n      <div className={classNames.toolbarIcon}>{icon || <RiShapesLine />}</div>\n      <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n    </>\n  );\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <div className={classNames.toolbar} data-has-tabs={hasTabs}>\n        <div className={classNames.toolbarWrapper} ref={toolbarWrapperRef}>\n          <div className={classNames.toolbarContent} ref={toolbarContentRef}>\n            <Text as=\"h1\" variant=\"body-medium\">\n              {titleLink ? (\n                <Link className={classNames.toolbarName} href={titleLink}>\n                  {titleContent}\n                </Link>\n              ) : (\n                <div className={classNames.toolbarName}>{titleContent}</div>\n              )}\n            </Text>\n            {breadcrumbs && (\n              <div\n                ref={breadcrumbsRef}\n                className={classNames.breadcrumbs}\n                style={{\n                  opacity: 0,\n                  visibility: showBreadcrumbs ? 'visible' : 'hidden',\n                }}\n              >\n                <RiArrowRightSLine\n                  size={16}\n                  className={classNames.breadcrumbSeparator}\n                />\n                {breadcrumbs.map((breadcrumb, index) => (\n                  <div key={breadcrumb.label} className={classNames.breadcrumb}>\n                    <Link\n                      href={breadcrumb.href}\n                      className={classNames.breadcrumbLink}\n                      data-active={index === breadcrumbs.length - 1}\n                    >\n                      {breadcrumb.label}\n                    </Link>\n                    {index < breadcrumbs.length - 1 && (\n                      <RiArrowRightSLine\n                        size={16}\n                        className={classNames.breadcrumbSeparator}\n                      />\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n          <div className={classNames.toolbarControls} ref={toolbarControlsRef}>\n            {customActions}\n            {menuItems && (\n              <Menu.Root>\n                <Menu.Trigger\n                  render={props => (\n                    <ButtonIcon\n                      size=\"small\"\n                      icon={<RiMore2Line />}\n                      variant=\"tertiary\"\n                      {...props}\n                    />\n                  )}\n                />\n                <Menu.Portal>\n                  <Menu.Positioner sideOffset={4} align=\"end\">\n                    <Menu.Popup>\n                      {menuItems.map(option => (\n                        <Menu.Item\n                          key={option.value}\n                          onClick={() => option.onClick?.()}\n                        >\n                          {option.label}\n                        </Menu.Item>\n                      ))}\n                    </Menu.Popup>\n                  </Menu.Positioner>\n                </Menu.Portal>\n              </Menu.Root>\n            )}\n          </div>\n        </div>\n      </div>\n    </RouterProvider>\n  );\n};\n"],"names":["wrapper","props"],"mappings":"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"}

package/dist/components/HeaderPage/HeaderPage.esm.js

@@ -11,7 +11,7 @@ const HeaderPage = (props) => {
   const { classNames } = useStyles("HeaderPage");
   return /* @__PURE__ */ jsxs("div", { className: classNames.root, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames.content, children: [
-      /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", children: title }),
+      /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", as: "h2", children: title }),
       /* @__PURE__ */ jsxs("div", { className: classNames.controls, children: [
         customActions,
         menuItems && /* @__PURE__ */ jsxs(Menu.Root, { children: [

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.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 type { HeaderPageProps } from './types';\nimport { Menu } from '../Menu';\nimport { Text } from '../Text';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { RiMore2Line } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n  const { title, menuItems, tabs, customActions } = props;\n  const { classNames } = useStyles('HeaderPage');\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.content}>\n        <Text variant=\"title-small\" weight=\"bold\">\n          {title}\n        </Text>\n        <div className={classNames.controls}>\n          {customActions}\n          {menuItems && (\n            <Menu.Root>\n              <Menu.Trigger\n                render={props => (\n                  <ButtonIcon\n                    {...props}\n                    size=\"small\"\n                    icon={<RiMore2Line />}\n                    variant=\"tertiary\"\n                  />\n                )}\n              />\n              <Menu.Portal>\n                <Menu.Positioner sideOffset={4} align=\"end\">\n                  <Menu.Popup>\n                    {menuItems.map(menuItem => (\n                      <Menu.Item\n                        key={menuItem.value}\n                        onClick={() => menuItem.onClick?.()}\n                      >\n                        {menuItem.label}\n                      </Menu.Item>\n                    ))}\n                  </Menu.Popup>\n                </Menu.Positioner>\n              </Menu.Portal>\n            </Menu.Root>\n          )}\n        </div>\n      </div>\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs>\n            <TabList>\n              {tabs.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["props"],"mappings":";;;;;;;;AA6Ba,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAA,MAAM,EAAE,KAAA,EAAO,SAAW,EAAA,IAAA,EAAM,eAAkB,GAAA,KAAA;AAClD,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,IACzB,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,OACzB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,aAAc,EAAA,MAAA,EAAO,QAChC,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,QACxB,EAAA,QAAA,EAAA;AAAA,QAAA,aAAA;AAAA,QACA,SACC,oBAAA,IAAA,CAAC,IAAK,CAAA,IAAA,EAAL,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAK,CAAA,OAAA;AAAA,YAAL;AAAA,cACC,MAAA,EAAQ,CAAAA,MACN,qBAAA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACE,GAAGA,MAAAA;AAAA,kBACJ,IAAK,EAAA,OAAA;AAAA,kBACL,IAAA,sBAAO,WAAY,EAAA,EAAA,CAAA;AAAA,kBACnB,OAAQ,EAAA;AAAA;AAAA;AACV;AAAA,WAEJ;AAAA,8BACC,IAAK,CAAA,MAAA,EAAL,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,YAAL,EAAgB,UAAA,EAAY,CAAG,EAAA,KAAA,EAAM,OACpC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,OAAL,EACE,QAAA,EAAA,SAAA,CAAU,IAAI,CACb,QAAA,qBAAA,GAAA;AAAA,YAAC,IAAK,CAAA,IAAA;AAAA,YAAL;AAAA,cAEC,OAAA,EAAS,MAAM,QAAA,CAAS,OAAU,IAAA;AAAA,cAEjC,QAAS,EAAA,QAAA,CAAA;AAAA,aAAA;AAAA,YAHL,QAAS,CAAA;AAAA,WAKjB,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,SACF,EAAA;AAAA,OAEJ,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,IACC,IACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,WAAA,EACzB,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,OAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CACR,GAAA,qBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAI,CAAA,EAAA;AAAA,QACR,MAAM,GAAI,CAAA,IAAA;AAAA,QACV,eAAe,GAAI,CAAA,aAAA;AAAA,QAElB,QAAI,EAAA,GAAA,CAAA;AAAA,OAAA;AAAA,MALA,GAAI,CAAA;AAAA,KAOZ,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.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 type { HeaderPageProps } from './types';\nimport { Menu } from '../Menu';\nimport { Text } from '../Text';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { RiMore2Line } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n  const { title, menuItems, tabs, customActions } = props;\n  const { classNames } = useStyles('HeaderPage');\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.content}>\n        <Text variant=\"title-small\" weight=\"bold\" as=\"h2\">\n          {title}\n        </Text>\n        <div className={classNames.controls}>\n          {customActions}\n          {menuItems && (\n            <Menu.Root>\n              <Menu.Trigger\n                render={props => (\n                  <ButtonIcon\n                    {...props}\n                    size=\"small\"\n                    icon={<RiMore2Line />}\n                    variant=\"tertiary\"\n                  />\n                )}\n              />\n              <Menu.Portal>\n                <Menu.Positioner sideOffset={4} align=\"end\">\n                  <Menu.Popup>\n                    {menuItems.map(menuItem => (\n                      <Menu.Item\n                        key={menuItem.value}\n                        onClick={() => menuItem.onClick?.()}\n                      >\n                        {menuItem.label}\n                      </Menu.Item>\n                    ))}\n                  </Menu.Popup>\n                </Menu.Positioner>\n              </Menu.Portal>\n            </Menu.Root>\n          )}\n        </div>\n      </div>\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs>\n            <TabList>\n              {tabs.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["props"],"mappings":";;;;;;;;AA6Ba,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAA,MAAM,EAAE,KAAA,EAAO,SAAW,EAAA,IAAA,EAAM,eAAkB,GAAA,KAAA;AAClD,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,IACzB,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,OACzB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAK,OAAQ,EAAA,aAAA,EAAc,QAAO,MAAO,EAAA,EAAA,EAAG,MAC1C,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,QACxB,EAAA,QAAA,EAAA;AAAA,QAAA,aAAA;AAAA,QACA,SACC,oBAAA,IAAA,CAAC,IAAK,CAAA,IAAA,EAAL,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAK,CAAA,OAAA;AAAA,YAAL;AAAA,cACC,MAAA,EAAQ,CAAAA,MACN,qBAAA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACE,GAAGA,MAAAA;AAAA,kBACJ,IAAK,EAAA,OAAA;AAAA,kBACL,IAAA,sBAAO,WAAY,EAAA,EAAA,CAAA;AAAA,kBACnB,OAAQ,EAAA;AAAA;AAAA;AACV;AAAA,WAEJ;AAAA,8BACC,IAAK,CAAA,MAAA,EAAL,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,YAAL,EAAgB,UAAA,EAAY,CAAG,EAAA,KAAA,EAAM,OACpC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,OAAL,EACE,QAAA,EAAA,SAAA,CAAU,IAAI,CACb,QAAA,qBAAA,GAAA;AAAA,YAAC,IAAK,CAAA,IAAA;AAAA,YAAL;AAAA,cAEC,OAAA,EAAS,MAAM,QAAA,CAAS,OAAU,IAAA;AAAA,cAEjC,QAAS,EAAA,QAAA,CAAA;AAAA,aAAA;AAAA,YAHL,QAAS,CAAA;AAAA,WAKjB,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,SACF,EAAA;AAAA,OAEJ,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,IACC,IACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,WAAA,EACzB,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,OAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CACR,GAAA,qBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAI,CAAA,EAAA;AAAA,QACR,MAAM,GAAI,CAAA,IAAA;AAAA,QACV,eAAe,GAAI,CAAA,aAAA;AAAA,QAElB,QAAI,EAAA,GAAA,CAAA;AAAA,OAAA;AAAA,MALA,GAAI,CAAA;AAAA,KAOZ,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Menu/Combobox.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { forwardRef, useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import '../Icon/context.esm.js';
 import '../Box/Box.esm.js';
@@ -12,14 +12,12 @@ import '../Card/Card.esm.js';
 import '../Collapsible/Collapsible.esm.js';
 import '../DataTable/DataTable.esm.js';
 import '../FieldLabel/FieldLabel.esm.js';
-import 'react-aria-components';
-import '@remixicon/react';
-import '../ButtonIcon/ButtonIcon.esm.js';
+import '../Header/HeaderToolbar.esm.js';
+import '../Tabs/Tabs.esm.js';
 import './Menu.esm.js';
 import '../Text/Text.esm.js';
-import 'motion/react';
-import 'react-router-dom';
-import '../Tabs/Tabs.esm.js';
+import '../ButtonIcon/ButtonIcon.esm.js';
+import '@remixicon/react';
 import { Icon } from '../Icon/Icon.esm.js';
 import '../ButtonLink/ButtonLink.esm.js';
 import '../Checkbox/Checkbox.esm.js';
@@ -32,6 +30,7 @@ import '../SearchField/SearchField.esm.js';
 import '../Link/Link.esm.js';
 import '../Select/Select.esm.js';
 import '../Switch/Switch.esm.js';
+import { useId } from 'react-aria';
 
 const getListboxItemId = (listboxId, optionValue) => `${listboxId}-option-${optionValue}`;
 function ComboboxItem({

package/dist/components/Menu/Combobox.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.esm.js","sources":["../../../src/components/Menu/Combobox.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 {\n  forwardRef,\n  useState,\n  useMemo,\n  useCallback,\n  useId,\n  ChangeEvent,\n  KeyboardEvent,\n  useRef,\n  useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { MenuComboboxOption, MenuComboboxProps } from './types';\nimport { Icon } from '../..';\n\nconst getListboxItemId = (listboxId: string, optionValue: string): string =>\n  `${listboxId}-option-${optionValue}`;\n\n// Internal component for rendering individual items\nfunction ComboboxItem({\n  option,\n  optionIndex,\n  value,\n  activeOptionIndex,\n  onItemActive,\n  onItemSelect,\n  listboxId,\n}: {\n  option: MenuComboboxOption;\n  optionIndex: number;\n  value?: string[];\n  activeOptionIndex: number;\n  onItemActive: (index: number) => void;\n  onItemSelect: (value: string) => void;\n  listboxId: string;\n}) {\n  const isSelected = value?.includes(option.value) ?? false;\n  const isHighlighted = optionIndex === activeOptionIndex;\n  const itemId = getListboxItemId(listboxId, option.value);\n\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  // Scroll the item into view when it becomes highlighted\n  useEffect(() => {\n    if (isHighlighted && itemRef.current) {\n      itemRef.current.scrollIntoView({ block: 'nearest' });\n    }\n  }, [isHighlighted]);\n\n  return (\n    <div\n      ref={itemRef}\n      className=\"bui-SubmenuComboboxItem\"\n      id={itemId}\n      role=\"option\"\n      aria-selected={isSelected}\n      data-highlighted={isHighlighted ? true : undefined}\n      data-selected={isSelected ? true : undefined}\n      data-disabled={option.disabled ? true : undefined}\n      onMouseOver={() => !option.disabled && onItemActive(optionIndex)}\n      onClick={() => !option.disabled && onItemSelect(option.value)}\n    >\n      <div className=\"bui-SubmenuComboboxItemCheckbox\">\n        {isSelected && <Icon aria-hidden=\"true\" name=\"check\" size={12} />}\n      </div>\n      <div className=\"bui-SubmenuComboboxItemLabel\">{option.label}</div>\n    </div>\n  );\n}\n\n/** @public */\nexport const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(\n  (props, ref) => {\n    const {\n      options,\n      value,\n      onValueChange,\n      multiselect = false,\n      className,\n      ...rest\n    } = props;\n\n    const triggerId = useId();\n    const listboxId = `${triggerId}-listbox`;\n\n    // State management\n    const [filterString, setFilterString] = useState<string>('');\n    const [activeOptionIndex, setActiveOptionIndex] = useState<number>(0);\n\n    // Filter options based on input\n    const filteredOptions = useMemo(() => {\n      if (!filterString) return options;\n      const lowerFilterString = filterString.toLocaleLowerCase('en-US');\n      return options.filter(option =>\n        option.label.toLocaleLowerCase('en-US').includes(lowerFilterString),\n      );\n    }, [filterString, options]);\n\n    // Get the active descendant ID for accessibility\n    const activeDescendantId =\n      activeOptionIndex >= 0 && filteredOptions.length > 0\n        ? getListboxItemId(listboxId, filteredOptions[activeOptionIndex].value)\n        : undefined;\n\n    const handleValueChange = useCallback(\n      (toggledValue: string) => {\n        let newValue: string[];\n        if (multiselect) {\n          newValue = value?.includes(toggledValue)\n            ? value.filter(v => v !== toggledValue)\n            : [...(value ?? []), toggledValue];\n        } else {\n          newValue = value?.includes(toggledValue) ? [] : [toggledValue];\n        }\n\n        onValueChange?.(newValue);\n      },\n      [multiselect, onValueChange, value],\n    );\n\n    const handleSearchChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        setFilterString(e.target.value);\n        setActiveOptionIndex(0);\n        e.preventDefault();\n      },\n      [],\n    );\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        let wasEscapeKey = false;\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            setActiveOptionIndex(prev =>\n              Math.min(prev + 1, filteredOptions.length - 1),\n            );\n            break;\n          case 'ArrowUp':\n            e.preventDefault();\n            setActiveOptionIndex(prev => Math.max(prev - 1, 0));\n            break;\n          case 'Home':\n            e.preventDefault();\n            setActiveOptionIndex(0);\n            break;\n          case 'End':\n            e.preventDefault();\n            setActiveOptionIndex(Math.max(filteredOptions.length - 1, 0));\n            break;\n          case 'Enter':\n            e.preventDefault();\n            if (\n              activeOptionIndex >= 0 &&\n              !filteredOptions[activeOptionIndex].disabled\n            ) {\n              handleValueChange(filteredOptions[activeOptionIndex].value);\n            }\n            break;\n          case 'Escape':\n            // The Menu component should handle this\n            wasEscapeKey = true;\n            break;\n          default:\n            break;\n        }\n\n        if (!wasEscapeKey) {\n          // Stop propagation so Menu components don't prevent the input from updating\n          e.stopPropagation();\n        }\n      },\n      [filteredOptions, activeOptionIndex, handleValueChange],\n    );\n\n    return (\n      <div\n        ref={ref}\n        role=\"combobox\"\n        className={clsx('bui-MenuCombobox', className)}\n        {...rest}\n      >\n        <input\n          className=\"bui-SubmenuComboboxSearch\"\n          type=\"text\"\n          role=\"combobox\"\n          placeholder=\"Filter...\"\n          aria-labelledby={triggerId}\n          aria-controls={listboxId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={activeDescendantId}\n          aria-expanded=\"true\"\n          aria-haspopup=\"listbox\"\n          value={filterString}\n          onKeyDown={handleKeyDown}\n          onChange={handleSearchChange}\n        />\n        <div\n          role=\"listbox\"\n          id={listboxId}\n          tabIndex={-1}\n          aria-multiselectable={multiselect ? true : undefined}\n          className=\"bui-SubmenuComboboxItems\"\n        >\n          {filteredOptions.length === 0 ? (\n            <div className=\"bui-SubmenuComboboxNoResults\">No results found</div>\n          ) : (\n            filteredOptions.map((option, index) => (\n              <ComboboxItem\n                key={option.value}\n                option={option}\n                optionIndex={index}\n                value={value}\n                activeOptionIndex={activeOptionIndex}\n                onItemActive={setActiveOptionIndex}\n                onItemSelect={handleValueChange}\n                listboxId={listboxId}\n              />\n            ))\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nCombobox.displayName = 'Combobox';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Combobox.esm.js","sources":["../../../src/components/Menu/Combobox.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 {\n  forwardRef,\n  useState,\n  useMemo,\n  useCallback,\n  ChangeEvent,\n  KeyboardEvent,\n  useRef,\n  useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { MenuComboboxOption, MenuComboboxProps } from './types';\nimport { Icon } from '../..';\nimport { useId } from 'react-aria';\n\nconst getListboxItemId = (listboxId: string, optionValue: string): string =>\n  `${listboxId}-option-${optionValue}`;\n\n// Internal component for rendering individual items\nfunction ComboboxItem({\n  option,\n  optionIndex,\n  value,\n  activeOptionIndex,\n  onItemActive,\n  onItemSelect,\n  listboxId,\n}: {\n  option: MenuComboboxOption;\n  optionIndex: number;\n  value?: string[];\n  activeOptionIndex: number;\n  onItemActive: (index: number) => void;\n  onItemSelect: (value: string) => void;\n  listboxId: string;\n}) {\n  const isSelected = value?.includes(option.value) ?? false;\n  const isHighlighted = optionIndex === activeOptionIndex;\n  const itemId = getListboxItemId(listboxId, option.value);\n\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  // Scroll the item into view when it becomes highlighted\n  useEffect(() => {\n    if (isHighlighted && itemRef.current) {\n      itemRef.current.scrollIntoView({ block: 'nearest' });\n    }\n  }, [isHighlighted]);\n\n  return (\n    <div\n      ref={itemRef}\n      className=\"bui-SubmenuComboboxItem\"\n      id={itemId}\n      role=\"option\"\n      aria-selected={isSelected}\n      data-highlighted={isHighlighted ? true : undefined}\n      data-selected={isSelected ? true : undefined}\n      data-disabled={option.disabled ? true : undefined}\n      onMouseOver={() => !option.disabled && onItemActive(optionIndex)}\n      onClick={() => !option.disabled && onItemSelect(option.value)}\n    >\n      <div className=\"bui-SubmenuComboboxItemCheckbox\">\n        {isSelected && <Icon aria-hidden=\"true\" name=\"check\" size={12} />}\n      </div>\n      <div className=\"bui-SubmenuComboboxItemLabel\">{option.label}</div>\n    </div>\n  );\n}\n\n/** @public */\nexport const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(\n  (props, ref) => {\n    const {\n      options,\n      value,\n      onValueChange,\n      multiselect = false,\n      className,\n      ...rest\n    } = props;\n\n    const triggerId = useId();\n    const listboxId = `${triggerId}-listbox`;\n\n    // State management\n    const [filterString, setFilterString] = useState<string>('');\n    const [activeOptionIndex, setActiveOptionIndex] = useState<number>(0);\n\n    // Filter options based on input\n    const filteredOptions = useMemo(() => {\n      if (!filterString) return options;\n      const lowerFilterString = filterString.toLocaleLowerCase('en-US');\n      return options.filter(option =>\n        option.label.toLocaleLowerCase('en-US').includes(lowerFilterString),\n      );\n    }, [filterString, options]);\n\n    // Get the active descendant ID for accessibility\n    const activeDescendantId =\n      activeOptionIndex >= 0 && filteredOptions.length > 0\n        ? getListboxItemId(listboxId, filteredOptions[activeOptionIndex].value)\n        : undefined;\n\n    const handleValueChange = useCallback(\n      (toggledValue: string) => {\n        let newValue: string[];\n        if (multiselect) {\n          newValue = value?.includes(toggledValue)\n            ? value.filter(v => v !== toggledValue)\n            : [...(value ?? []), toggledValue];\n        } else {\n          newValue = value?.includes(toggledValue) ? [] : [toggledValue];\n        }\n\n        onValueChange?.(newValue);\n      },\n      [multiselect, onValueChange, value],\n    );\n\n    const handleSearchChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        setFilterString(e.target.value);\n        setActiveOptionIndex(0);\n        e.preventDefault();\n      },\n      [],\n    );\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        let wasEscapeKey = false;\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            setActiveOptionIndex(prev =>\n              Math.min(prev + 1, filteredOptions.length - 1),\n            );\n            break;\n          case 'ArrowUp':\n            e.preventDefault();\n            setActiveOptionIndex(prev => Math.max(prev - 1, 0));\n            break;\n          case 'Home':\n            e.preventDefault();\n            setActiveOptionIndex(0);\n            break;\n          case 'End':\n            e.preventDefault();\n            setActiveOptionIndex(Math.max(filteredOptions.length - 1, 0));\n            break;\n          case 'Enter':\n            e.preventDefault();\n            if (\n              activeOptionIndex >= 0 &&\n              !filteredOptions[activeOptionIndex].disabled\n            ) {\n              handleValueChange(filteredOptions[activeOptionIndex].value);\n            }\n            break;\n          case 'Escape':\n            // The Menu component should handle this\n            wasEscapeKey = true;\n            break;\n          default:\n            break;\n        }\n\n        if (!wasEscapeKey) {\n          // Stop propagation so Menu components don't prevent the input from updating\n          e.stopPropagation();\n        }\n      },\n      [filteredOptions, activeOptionIndex, handleValueChange],\n    );\n\n    return (\n      <div\n        ref={ref}\n        role=\"combobox\"\n        className={clsx('bui-MenuCombobox', className)}\n        {...rest}\n      >\n        <input\n          className=\"bui-SubmenuComboboxSearch\"\n          type=\"text\"\n          role=\"combobox\"\n          placeholder=\"Filter...\"\n          aria-labelledby={triggerId}\n          aria-controls={listboxId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={activeDescendantId}\n          aria-expanded=\"true\"\n          aria-haspopup=\"listbox\"\n          value={filterString}\n          onKeyDown={handleKeyDown}\n          onChange={handleSearchChange}\n        />\n        <div\n          role=\"listbox\"\n          id={listboxId}\n          tabIndex={-1}\n          aria-multiselectable={multiselect ? true : undefined}\n          className=\"bui-SubmenuComboboxItems\"\n        >\n          {filteredOptions.length === 0 ? (\n            <div className=\"bui-SubmenuComboboxNoResults\">No results found</div>\n          ) : (\n            filteredOptions.map((option, index) => (\n              <ComboboxItem\n                key={option.value}\n                option={option}\n                optionIndex={index}\n                value={value}\n                activeOptionIndex={activeOptionIndex}\n                onItemActive={setActiveOptionIndex}\n                onItemSelect={handleValueChange}\n                listboxId={listboxId}\n              />\n            ))\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nCombobox.displayName = 'Combobox';\n"],"names":[],"mappings":"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"}

package/dist/components/Select/Select.esm.js

@@ -33,7 +33,7 @@ const Select = forwardRef((props, ref) => {
   useEffect(() => {
     if (!label && !ariaLabel && !ariaLabelledBy) {
       console.warn(
-        "TextField requires either a visible label, aria-label, or aria-labelledby for accessibility"
+        "Select requires either a visible label, aria-label, or aria-labelledby for accessibility"
       );
     }
   }, [label, ariaLabel, ariaLabelledBy]);

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

@@ -1 +1 @@
-{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.tsx"],"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 { forwardRef, useEffect } from 'react';\nimport {\n  Select as AriaSelect,\n  SelectValue,\n  Button,\n  Popover,\n  ListBox,\n  ListBoxItem,\n  Text,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport './Select.styles.css';\nimport { SelectProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FieldLabel } from '../FieldLabel';\nimport { Icon } from '../Icon';\nimport { FieldError } from '../FieldError';\n\n/** @public */\nexport const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {\n  const {\n    className,\n    label,\n    description,\n    options,\n    placeholder = 'Select an option',\n    size = 'small',\n    icon,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    isRequired,\n    secondaryLabel,\n    style,\n    ...rest\n  } = props;\n\n  const { classNames: popoverClassNames } = useStyles('Popover');\n  const { classNames, dataAttributes } = useStyles('Select', {\n    size,\n  });\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n      );\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n  const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n  return (\n    <AriaSelect\n      className={clsx(classNames.root, className)}\n      {...dataAttributes}\n      ref={ref}\n      {...rest}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n      />\n      <Button\n        className={classNames.trigger}\n        data-size={dataAttributes['data-size']}\n      >\n        {icon}\n        <SelectValue className={classNames.value} />\n        <Icon aria-hidden=\"true\" name=\"chevron-down\" />\n      </Button>\n      <FieldError />\n      <Popover className={popoverClassNames.root}>\n        <ListBox className={classNames.list}>\n          {options?.map(option => (\n            <ListBoxItem\n              key={option.value}\n              id={option.value}\n              className={classNames.item}\n            >\n              <div className={classNames.itemIndicator}>\n                <Icon name=\"check\" />\n              </div>\n              <Text slot=\"label\" className={classNames.itemLabel}>\n                {option.label}\n              </Text>\n            </ListBoxItem>\n          ))}\n        </ListBox>\n      </Popover>\n    </AriaSelect>\n  );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":"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"}
+{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.tsx"],"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 { forwardRef, useEffect } from 'react';\nimport {\n  Select as AriaSelect,\n  SelectValue,\n  Button,\n  Popover,\n  ListBox,\n  ListBoxItem,\n  Text,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport './Select.styles.css';\nimport { SelectProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FieldLabel } from '../FieldLabel';\nimport { Icon } from '../Icon';\nimport { FieldError } from '../FieldError';\n\n/** @public */\nexport const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {\n  const {\n    className,\n    label,\n    description,\n    options,\n    placeholder = 'Select an option',\n    size = 'small',\n    icon,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    isRequired,\n    secondaryLabel,\n    style,\n    ...rest\n  } = props;\n\n  const { classNames: popoverClassNames } = useStyles('Popover');\n  const { classNames, dataAttributes } = useStyles('Select', {\n    size,\n  });\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        'Select requires either a visible label, aria-label, or aria-labelledby for accessibility',\n      );\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n  const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n  return (\n    <AriaSelect\n      className={clsx(classNames.root, className)}\n      {...dataAttributes}\n      ref={ref}\n      {...rest}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n      />\n      <Button\n        className={classNames.trigger}\n        data-size={dataAttributes['data-size']}\n      >\n        {icon}\n        <SelectValue className={classNames.value} />\n        <Icon aria-hidden=\"true\" name=\"chevron-down\" />\n      </Button>\n      <FieldError />\n      <Popover className={popoverClassNames.root}>\n        <ListBox className={classNames.list}>\n          {options?.map(option => (\n            <ListBoxItem\n              key={option.value}\n              id={option.value}\n              className={classNames.item}\n            >\n              <div className={classNames.itemIndicator}>\n                <Icon name=\"check\" />\n              </div>\n              <Text slot=\"label\" className={classNames.itemLabel}>\n                {option.label}\n              </Text>\n            </ListBoxItem>\n          ))}\n        </ListBox>\n      </Popover>\n    </AriaSelect>\n  );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":"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"}

package/dist/components/Select/Select.styles.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 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\n.bui-Select[data-invalid] {\n  & .bui-SelectTrigger {\n    border-color: var(--bui-fg-danger);\n  }\n}\n\n.bui-SelectTrigger {\n  box-sizing: border-box;\n  border-radius: var(--bui-radius-3);\n  border: 1px solid var(--bui-border);\n  background-color: var(--bui-bg-surface-1);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n  cursor: pointer;\n  gap: var(--bui-space-2);\n  max-width: 100%;\n\n  & svg {\n    flex-shrink: 0;\n  }\n\n  &[data-size='small'] {\n    height: 2rem;\n    padding-inline: var(--bui-space-3);\n  }\n\n  &[data-size='medium'] {\n    height: 3rem;\n    padding-inline: var(--bui-space-4);\n  }\n\n  &[data-size='small'] svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  &[data-size='medium'] svg {\n    width: 1.25rem;\n    height: 1.25rem;\n  }\n\n  &::placeholder {\n    color: var(--bui-fg-secondary);\n  }\n\n  &:hover {\n    border-color: var(--bui-border-hover);\n  }\n\n  &:focus-visible {\n    border-color: var(--bui-border-pressed);\n    outline: 0;\n  }\n\n  &[data-invalid] {\n    border-color: var(--bui-fg-danger);\n  }\n  &[data-invalid]:hover {\n    border-width: 2px;\n  }\n\n  &[data-invalid]:focus-visible {\n    border-width: 2px;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    border-color: var(--bui-border-disabled);\n    color: var(--bui-fg-disabled);\n  }\n\n  &[disabled] .bui-SelectValue {\n    color: var(--bui-fg-disabled);\n  }\n\n  &[data-popup-open] .bui-SelectIcon {\n    transform: rotate(180deg);\n  }\n}\n\n.bui-SelectValue {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  width: 100%;\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\n  & .bui-SelectItemIndicator {\n    display: none;\n  }\n\n  &[disabled] {\n    color: var(--bui-fg-disabled);\n  }\n}\n\n.bui-SelectItem {\n  position: relative;\n  width: var(--anchor-width);\n  display: grid;\n  grid-template-areas: 'icon text';\n  grid-template-columns: 1rem 1fr;\n  align-items: center;\n  padding-block: var(--bui-space-2);\n  padding-inline: var(--bui-space-4);\n  color: var(--bui-fg-primary);\n  border-radius: var(--bui-radius-3);\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--bui-font-size-3);\n  gap: var(--bui-space-2);\n  outline: none;\n\n  &[data-focused] {\n    z-index: 0;\n    position: relative;\n    color: var(--bui-fg-primary);\n  }\n\n  &[data-focused]::before {\n    content: '';\n    z-index: -1;\n    position: absolute;\n    inset-block: 0;\n    inset-inline: 0.25rem;\n    border-radius: 0.25rem;\n    background-color: var(--bui-bg-tint-hover);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    color: var(--bui-fg-disabled);\n  }\n\n  &[data-selected] .bui-SelectItemIndicator {\n    opacity: 1;\n  }\n}\n\n.bui-SelectItemIndicator {\n  grid-area: icon;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.bui-SelectItemLabel {\n  flex: 1;\n  grid-area: text;\n}\n";
+var css_248z = "/*\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\n.bui-Select[data-invalid] {\n  & .bui-SelectTrigger {\n    border-color: var(--bui-fg-danger);\n  }\n}\n\n.bui-SelectTrigger {\n  box-sizing: border-box;\n  border-radius: var(--bui-radius-3);\n  border: 1px solid var(--bui-border);\n  background-color: var(--bui-bg-surface-1);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  gap: var(--bui-space-2);\n  width: 100%;\n\n  & svg {\n    flex-shrink: 0;\n    color: var(--bui-fg-secondary);\n  }\n\n  &[data-size='small'] {\n    height: 2rem;\n    padding-inline: var(--bui-space-3);\n  }\n\n  &[data-size='medium'] {\n    height: 3rem;\n    padding-inline: var(--bui-space-4);\n  }\n\n  &[data-size='small'] svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  &[data-size='medium'] svg {\n    width: 1.25rem;\n    height: 1.25rem;\n  }\n\n  &::placeholder {\n    color: var(--bui-fg-secondary);\n  }\n\n  &:hover {\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n    border-color: var(--bui-border-hover);\n  }\n\n  &:focus-visible {\n    border-color: var(--bui-border-pressed);\n    outline: 0;\n  }\n\n  &[data-invalid] {\n    border-color: var(--bui-fg-danger);\n  }\n  &[data-invalid]:hover {\n    border-width: 2px;\n  }\n\n  &[data-invalid]:focus-visible {\n    border-width: 2px;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    border-color: var(--bui-border-disabled);\n    color: var(--bui-fg-disabled);\n  }\n\n  &[disabled] .bui-SelectValue {\n    color: var(--bui-fg-disabled);\n  }\n\n  &[data-popup-open] .bui-SelectIcon {\n    transform: rotate(180deg);\n  }\n}\n\n.bui-SelectValue {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  width: 100%;\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  text-align: left;\n\n  & .bui-SelectItemIndicator {\n    display: none;\n  }\n\n  &[disabled] {\n    color: var(--bui-fg-disabled);\n  }\n}\n\n.bui-SelectItem {\n  position: relative;\n  width: var(--anchor-width);\n  display: grid;\n  grid-template-areas: 'icon text';\n  grid-template-columns: 1rem 1fr;\n  align-items: center;\n  padding-block: var(--bui-space-2);\n  padding-left: var(--bui-space-3);\n  padding-right: var(--bui-space-4);\n  color: var(--bui-fg-primary);\n  border-radius: var(--bui-radius-3);\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--bui-font-size-3);\n  gap: var(--bui-space-1);\n  outline: none;\n\n  &[data-focused] {\n    z-index: 0;\n    position: relative;\n    color: var(--bui-fg-primary);\n  }\n\n  &[data-focused]::before {\n    content: '';\n    z-index: -1;\n    position: absolute;\n    inset-block: 0;\n    inset-inline: 0.25rem;\n    border-radius: 0.25rem;\n    background-color: var(--bui-bg-tint-hover);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    color: var(--bui-fg-disabled);\n  }\n\n  &[data-selected] .bui-SelectItemIndicator {\n    opacity: 1;\n  }\n}\n\n.bui-SelectItemIndicator {\n  grid-area: icon;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.bui-SelectItemLabel {\n  flex: 1;\n  grid-area: text;\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist/index.d.ts

@@ -63,7 +63,7 @@ declare const componentDefinitions: {
         };
         readonly dataAttributes: {
             readonly size: readonly ["small", "medium", "large"];
-            readonly variant: readonly ["primary", "secondary", "ghost"];
+            readonly variant: readonly ["primary", "secondary", "tertiary"];
         };
     };
     readonly ButtonIcon: {

package/dist/utils/componentDefinitions.esm.js

@@ -20,7 +20,7 @@ const componentDefinitions = {
     },
     dataAttributes: {
       size: ["small", "medium", "large"],
-      variant: ["primary", "secondary", "ghost"]
+      variant: ["primary", "secondary", "tertiary"]
     }
   },
   ButtonIcon: {

package/dist/utils/componentDefinitions.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentDefinitions.esm.js","sources":["../../src/utils/componentDefinitions.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 definitions for the Backstage UI library\n * @public\n */\nexport const componentDefinitions = {\n  Avatar: {\n    classNames: {\n      root: 'bui-AvatarRoot',\n      image: 'bui-AvatarImage',\n      fallback: 'bui-AvatarFallback',\n    },\n    dataAttributes: {\n      size: ['small', 'medium', 'large'] as const,\n    },\n  },\n  Box: {\n    classNames: {\n      root: 'bui-Box',\n    },\n  },\n  Button: {\n    classNames: {\n      root: 'bui-Button',\n    },\n    dataAttributes: {\n      size: ['small', 'medium', 'large'] as const,\n      variant: ['primary', 'secondary', 'ghost'] as const,\n    },\n  },\n  ButtonIcon: {\n    classNames: {\n      root: 'bui-ButtonIcon',\n    },\n  },\n  ButtonLink: {\n    classNames: {\n      root: 'bui-ButtonLink',\n    },\n  },\n  Card: {\n    classNames: {\n      root: 'bui-Card',\n      header: 'bui-CardHeader',\n      body: 'bui-CardBody',\n      footer: 'bui-CardFooter',\n    },\n  },\n  Checkbox: {\n    classNames: {\n      root: 'bui-CheckboxRoot',\n      label: 'bui-CheckboxLabel',\n      indicator: 'bui-CheckboxIndicator',\n    },\n    dataAttributes: {\n      checked: [true, false] as const,\n    },\n  },\n  Collapsible: {\n    classNames: {\n      root: 'bui-CollapsibleRoot',\n      trigger: 'bui-CollapsibleTrigger',\n      panel: 'bui-CollapsiblePanel',\n    },\n  },\n  Container: {\n    classNames: {\n      root: 'bui-Container',\n    },\n  },\n  FieldLabel: {\n    classNames: {\n      root: 'bui-FieldLabelWrapper',\n      label: 'bui-FieldLabel',\n      secondaryLabel: 'bui-FieldSecondaryLabel',\n      description: 'bui-FieldDescription',\n    },\n  },\n  Flex: {\n    classNames: {\n      root: 'bui-Flex',\n    },\n  },\n  Grid: {\n    classNames: {\n      root: 'bui-Grid',\n      item: 'bui-GridItem',\n    },\n  },\n  Header: {\n    classNames: {\n      toolbar: 'bui-HeaderToolbar',\n      toolbarWrapper: 'bui-HeaderToolbarWrapper',\n      toolbarContent: 'bui-HeaderToolbarContent',\n      toolbarControls: 'bui-HeaderToolbarControls',\n      toolbarIcon: 'bui-HeaderToolbarIcon',\n      toolbarName: 'bui-HeaderToolbarName',\n      breadcrumbs: 'bui-HeaderBreadcrumbs',\n      breadcrumb: 'bui-HeaderBreadcrumb',\n      breadcrumbLink: 'bui-HeaderBreadcrumbLink',\n      breadcrumbSeparator: 'bui-HeaderBreadcrumbSeparator',\n      tabsWrapper: 'bui-HeaderTabsWrapper',\n    },\n  },\n  HeaderPage: {\n    classNames: {\n      root: 'bui-HeaderPage',\n      content: 'bui-HeaderPageContent',\n      tabsWrapper: 'bui-HeaderPageTabsWrapper',\n      controls: 'bui-HeaderPageControls',\n    },\n  },\n  Heading: {\n    classNames: {\n      root: 'bui-Heading',\n    },\n    dataAttributes: {\n      variant: ['title1', 'title2', 'title3', 'subtitle'] as const,\n      color: ['primary', 'secondary', 'muted'] as const,\n      truncate: [true, false] as const,\n    },\n  },\n  Icon: {\n    classNames: {\n      root: 'bui-Icon',\n    },\n  },\n  Link: {\n    classNames: {\n      root: 'bui-Link',\n    },\n    dataAttributes: {\n      variant: ['subtitle', 'body', 'caption', 'label'] as const,\n      weight: ['regular', 'bold'] as const,\n    },\n  },\n  List: {\n    classNames: {\n      root: 'bui-List',\n      row: 'bui-ListRow',\n      label: 'bui-ListLabel',\n    },\n  },\n  Menu: {\n    classNames: {\n      trigger: 'bui-MenuTrigger',\n      backdrop: 'bui-MenuBackdrop',\n      positioner: 'bui-MenuPositioner',\n      popup: 'bui-MenuPopup',\n      arrow: 'bui-MenuArrow',\n      item: 'bui-MenuItem',\n      group: 'bui-MenuGroup',\n      groupLabel: 'bui-MenuGroupLabel',\n      radioGroup: 'bui-MenuRadioGroup',\n      radioItem: 'bui-MenuRadioItem',\n      radioItemIndicator: 'bui-MenuRadioItemIndicator',\n      checkboxItem: 'bui-MenuCheckboxItem',\n      checkboxItemIndicator: 'bui-MenuCheckboxItemIndicator',\n      submenuTrigger: 'bui-MenuSubmenuTrigger',\n      separator: 'bui-MenuSeparator',\n    },\n  },\n  Popover: {\n    classNames: {\n      root: 'bui-Popover',\n    },\n  },\n  RadioGroup: {\n    classNames: {\n      root: 'bui-RadioGroup',\n      content: 'bui-RadioGroupContent',\n      radio: 'bui-Radio',\n    },\n  },\n  ScrollArea: {\n    classNames: {\n      root: 'bui-ScrollAreaRoot',\n      viewport: 'bui-ScrollAreaViewport',\n      scrollbar: 'bui-ScrollAreaScrollbar',\n      thumb: 'bui-ScrollAreaThumb',\n    },\n  },\n  SearchField: {\n    classNames: {\n      root: 'bui-SearchField',\n      clear: 'bui-InputClear',\n    },\n  },\n  Select: {\n    classNames: {\n      root: 'bui-Select',\n      trigger: 'bui-SelectTrigger',\n      value: 'bui-SelectValue',\n      icon: 'bui-SelectIcon',\n      list: 'bui-SelectList',\n      item: 'bui-SelectItem',\n      itemIndicator: 'bui-SelectItemIndicator',\n      itemLabel: 'bui-SelectItemLabel',\n    },\n    dataAttributes: {\n      size: ['small', 'medium'] as const,\n    },\n  },\n  Skeleton: {\n    classNames: {\n      root: 'bui-Skeleton',\n    },\n  },\n  Switch: {\n    classNames: {\n      root: 'bui-Switch',\n      indicator: 'bui-SwitchIndicator',\n    },\n  },\n  Table: {\n    classNames: {\n      root: 'bui-TableRoot',\n      header: 'bui-TableHeader',\n      body: 'bui-TableBody',\n      row: 'bui-TableRow',\n      head: 'bui-TableHead',\n      caption: 'bui-TableCaption',\n      cell: 'bui-TableCell',\n      cellText: 'bui-TableCellText',\n      cellLink: 'bui-TableCellLink',\n      cellProfile: 'bui-TableCellProfile',\n      cellProfileAvatar: 'bui-TableCellProfileAvatar',\n      cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',\n      cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',\n      cellProfileName: 'bui-TableCellProfileName',\n      cellProfileLink: 'bui-TableCellProfileLink',\n    },\n  },\n  Tabs: {\n    classNames: {\n      tabs: 'bui-Tabs',\n      tabList: 'bui-TabList',\n      tabListWrapper: 'bui-TabListWrapper',\n      tab: 'bui-Tab',\n      tabActive: 'bui-TabActive',\n      tabHovered: 'bui-TabHovered',\n      panel: 'bui-TabPanel',\n    },\n  },\n  Text: {\n    classNames: {\n      root: 'bui-Text',\n    },\n    dataAttributes: {\n      variant: ['subtitle', 'body', 'caption', 'label'] as const,\n      weight: ['regular', 'bold'] as const,\n      color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,\n      truncate: [true, false] as const,\n    },\n  },\n  TextField: {\n    classNames: {\n      root: 'bui-TextField',\n      inputWrapper: 'bui-InputWrapper',\n      input: 'bui-Input',\n      inputIcon: 'bui-InputIcon',\n    },\n    dataAttributes: {\n      invalid: [true, false] as const,\n      disabled: [true, false] as const,\n    },\n  },\n  Tooltip: {\n    classNames: {\n      tooltip: 'bui-Tooltip',\n      arrow: 'bui-TooltipArrow',\n    },\n  },\n} as const satisfies Record<string, ComponentDefinition>;\n"],"names":[],"mappings":"AAsBO,MAAM,oBAAuB,GAAA;AAAA,EAClC,MAAQ,EAAA;AAAA,IACN,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,gBAAA;AAAA,MACN,KAAO,EAAA,iBAAA;AAAA,MACP,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,IAAM,EAAA,CAAC,OAAS,EAAA,QAAA,EAAU,OAAO;AAAA;AACnC,GACF;AAAA,EACA,GAAK,EAAA;AAAA,IACH,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA,KACR;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,IAAM,EAAA,CAAC,OAAS,EAAA,QAAA,EAAU,OAAO,CAAA;AAAA,MACjC,OAAS,EAAA,CAAC,SAAW,EAAA,WAAA,EAAa,OAAO;AAAA;AAC3C,GACF;AAAA,EACA,UAAY,EAAA;AAAA,IACV,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,UAAY,EAAA;AAAA,IACV,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,UAAA;AAAA,MACN,MAAQ,EAAA,gBAAA;AAAA,MACR,IAAM,EAAA,cAAA;AAAA,MACN,MAAQ,EAAA;AAAA;AACV,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,kBAAA;AAAA,MACN,KAAO,EAAA,mBAAA;AAAA,MACP,SAAW,EAAA;AAAA,KACb;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,OAAA,EAAS,CAAC,IAAA,EAAM,KAAK;AAAA;AACvB,GACF;AAAA,EACA,WAAa,EAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,qBAAA;AAAA,MACN,OAAS,EAAA,wBAAA;AAAA,MACT,KAAO,EAAA;AAAA;AACT,GACF;AAAA,EACA,SAAW,EAAA;AAAA,IACT,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,UAAY,EAAA;AAAA,IACV,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,uBAAA;AAAA,MACN,KAAO,EAAA,gBAAA;AAAA,MACP,cAAgB,EAAA,yBAAA;AAAA,MAChB,WAAa,EAAA;AAAA;AACf,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,UAAA;AAAA,MACN,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,UAAY,EAAA;AAAA,MACV,OAAS,EAAA,mBAAA;AAAA,MACT,cAAgB,EAAA,0BAAA;AAAA,MAChB,cAAgB,EAAA,0BAAA;AAAA,MAChB,eAAiB,EAAA,2BAAA;AAAA,MACjB,WAAa,EAAA,uBAAA;AAAA,MACb,WAAa,EAAA,uBAAA;AAAA,MACb,WAAa,EAAA,uBAAA;AAAA,MACb,UAAY,EAAA,sBAAA;AAAA,MACZ,cAAgB,EAAA,0BAAA;AAAA,MAChB,mBAAqB,EAAA,+BAAA;AAAA,MACrB,WAAa,EAAA;AAAA;AACf,GACF;AAAA,EACA,UAAY,EAAA;AAAA,IACV,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,gBAAA;AAAA,MACN,OAAS,EAAA,uBAAA;AAAA,MACT,WAAa,EAAA,2BAAA;AAAA,MACb,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA,OAAS,EAAA;AAAA,IACP,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA,KACR;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,OAAS,EAAA,CAAC,QAAU,EAAA,QAAA,EAAU,UAAU,UAAU,CAAA;AAAA,MAClD,KAAO,EAAA,CAAC,SAAW,EAAA,WAAA,EAAa,OAAO,CAAA;AAAA,MACvC,QAAA,EAAU,CAAC,IAAA,EAAM,KAAK;AAAA;AACxB,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA,KACR;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,OAAS,EAAA,CAAC,UAAY,EAAA,MAAA,EAAQ,WAAW,OAAO,CAAA;AAAA,MAChD,MAAA,EAAQ,CAAC,SAAA,EAAW,MAAM;AAAA;AAC5B,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,UAAA;AAAA,MACN,GAAK,EAAA,aAAA;AAAA,MACL,KAAO,EAAA;AAAA;AACT,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,UAAY,EAAA;AAAA,MACV,OAAS,EAAA,iBAAA;AAAA,MACT,QAAU,EAAA,kBAAA;AAAA,MACV,UAAY,EAAA,oBAAA;AAAA,MACZ,KAAO,EAAA,eAAA;AAAA,MACP,KAAO,EAAA,eAAA;AAAA,MACP,IAAM,EAAA,cAAA;AAAA,MACN,KAAO,EAAA,eAAA;AAAA,MACP,UAAY,EAAA,oBAAA;AAAA,MACZ,UAAY,EAAA,oBAAA;AAAA,MACZ,SAAW,EAAA,mBAAA;AAAA,MACX,kBAAoB,EAAA,4BAAA;AAAA,MACpB,YAAc,EAAA,sBAAA;AAAA,MACd,qBAAuB,EAAA,+BAAA;AAAA,MACvB,cAAgB,EAAA,wBAAA;AAAA,MAChB,SAAW,EAAA;AAAA;AACb,GACF;AAAA,EACA,OAAS,EAAA;AAAA,IACP,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,UAAY,EAAA;AAAA,IACV,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,gBAAA;AAAA,MACN,OAAS,EAAA,uBAAA;AAAA,MACT,KAAO,EAAA;AAAA;AACT,GACF;AAAA,EACA,UAAY,EAAA;AAAA,IACV,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,oBAAA;AAAA,MACN,QAAU,EAAA,wBAAA;AAAA,MACV,SAAW,EAAA,yBAAA;AAAA,MACX,KAAO,EAAA;AAAA;AACT,GACF;AAAA,EACA,WAAa,EAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,iBAAA;AAAA,MACN,KAAO,EAAA;AAAA;AACT,GACF;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,YAAA;AAAA,MACN,OAAS,EAAA,mBAAA;AAAA,MACT,KAAO,EAAA,iBAAA;AAAA,MACP,IAAM,EAAA,gBAAA;AAAA,MACN,IAAM,EAAA,gBAAA;AAAA,MACN,IAAM,EAAA,gBAAA;AAAA,MACN,aAAe,EAAA,yBAAA;AAAA,MACf,SAAW,EAAA;AAAA,KACb;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAC1B,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,YAAA;AAAA,MACN,SAAW,EAAA;AAAA;AACb,GACF;AAAA,EACA,KAAO,EAAA;AAAA,IACL,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,eAAA;AAAA,MACN,MAAQ,EAAA,iBAAA;AAAA,MACR,IAAM,EAAA,eAAA;AAAA,MACN,GAAK,EAAA,cAAA;AAAA,MACL,IAAM,EAAA,eAAA;AAAA,MACN,OAAS,EAAA,kBAAA;AAAA,MACT,IAAM,EAAA,eAAA;AAAA,MACN,QAAU,EAAA,mBAAA;AAAA,MACV,QAAU,EAAA,mBAAA;AAAA,MACV,WAAa,EAAA,sBAAA;AAAA,MACb,iBAAmB,EAAA,4BAAA;AAAA,MACnB,sBAAwB,EAAA,iCAAA;AAAA,MACxB,yBAA2B,EAAA,oCAAA;AAAA,MAC3B,eAAiB,EAAA,0BAAA;AAAA,MACjB,eAAiB,EAAA;AAAA;AACnB,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,UAAA;AAAA,MACN,OAAS,EAAA,aAAA;AAAA,MACT,cAAgB,EAAA,oBAAA;AAAA,MAChB,GAAK,EAAA,SAAA;AAAA,MACL,SAAW,EAAA,eAAA;AAAA,MACX,UAAY,EAAA,gBAAA;AAAA,MACZ,KAAO,EAAA;AAAA;AACT,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA,KACR;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,OAAS,EAAA,CAAC,UAAY,EAAA,MAAA,EAAQ,WAAW,OAAO,CAAA;AAAA,MAChD,MAAA,EAAQ,CAAC,SAAA,EAAW,MAAM,CAAA;AAAA,MAC1B,OAAO,CAAC,SAAA,EAAW,WAAa,EAAA,QAAA,EAAU,WAAW,SAAS,CAAA;AAAA,MAC9D,QAAA,EAAU,CAAC,IAAA,EAAM,KAAK;AAAA;AACxB,GACF;AAAA,EACA,SAAW,EAAA;AAAA,IACT,UAAY,EAAA;AAAA,MACV,IAAM,EAAA,eAAA;AAAA,MACN,YAAc,EAAA,kBAAA;AAAA,MACd,KAAO,EAAA,WAAA;AAAA,MACP,SAAW,EAAA;AAAA,KACb;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,OAAA,EAAS,CAAC,IAAA,EAAM,KAAK,CAAA;AAAA,MACrB,QAAA,EAAU,CAAC,IAAA,EAAM,KAAK;AAAA;AACxB,GACF;AAAA,EACA,OAAS,EAAA;AAAA,IACP,UAAY,EAAA;AAAA,MACV,OAAS,EAAA,aAAA;AAAA,MACT,KAAO,EAAA;AAAA;AACT;AAEJ;;;;"}
+{"version":3,"file":"componentDefinitions.esm.js","sources":["../../src/utils/componentDefinitions.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 definitions for the Backstage UI library\n * @public\n */\nexport const componentDefinitions = {\n  Avatar: {\n    classNames: {\n      root: 'bui-AvatarRoot',\n      image: 'bui-AvatarImage',\n      fallback: 'bui-AvatarFallback',\n    },\n    dataAttributes: {\n      size: ['small', 'medium', 'large'] as const,\n    },\n  },\n  Box: {\n    classNames: {\n      root: 'bui-Box',\n    },\n  },\n  Button: {\n    classNames: {\n      root: 'bui-Button',\n    },\n    dataAttributes: {\n      size: ['small', 'medium', 'large'] as const,\n      variant: ['primary', 'secondary', 'tertiary'] as const,\n    },\n  },\n  ButtonIcon: {\n    classNames: {\n      root: 'bui-ButtonIcon',\n    },\n  },\n  ButtonLink: {\n    classNames: {\n      root: 'bui-ButtonLink',\n    },\n  },\n  Card: {\n    classNames: {\n      root: 'bui-Card',\n      header: 'bui-CardHeader',\n      body: 'bui-CardBody',\n      footer: 'bui-CardFooter',\n    },\n  },\n  Checkbox: {\n    classNames: {\n      root: 'bui-CheckboxRoot',\n      label: 'bui-CheckboxLabel',\n      indicator: 'bui-CheckboxIndicator',\n    },\n    dataAttributes: {\n      checked: [true, false] as const,\n    },\n  },\n  Collapsible: {\n    classNames: {\n      root: 'bui-CollapsibleRoot',\n      trigger: 'bui-CollapsibleTrigger',\n      panel: 'bui-CollapsiblePanel',\n    },\n  },\n  Container: {\n    classNames: {\n      root: 'bui-Container',\n    },\n  },\n  FieldLabel: {\n    classNames: {\n      root: 'bui-FieldLabelWrapper',\n      label: 'bui-FieldLabel',\n      secondaryLabel: 'bui-FieldSecondaryLabel',\n      description: 'bui-FieldDescription',\n    },\n  },\n  Flex: {\n    classNames: {\n      root: 'bui-Flex',\n    },\n  },\n  Grid: {\n    classNames: {\n      root: 'bui-Grid',\n      item: 'bui-GridItem',\n    },\n  },\n  Header: {\n    classNames: {\n      toolbar: 'bui-HeaderToolbar',\n      toolbarWrapper: 'bui-HeaderToolbarWrapper',\n      toolbarContent: 'bui-HeaderToolbarContent',\n      toolbarControls: 'bui-HeaderToolbarControls',\n      toolbarIcon: 'bui-HeaderToolbarIcon',\n      toolbarName: 'bui-HeaderToolbarName',\n      breadcrumbs: 'bui-HeaderBreadcrumbs',\n      breadcrumb: 'bui-HeaderBreadcrumb',\n      breadcrumbLink: 'bui-HeaderBreadcrumbLink',\n      breadcrumbSeparator: 'bui-HeaderBreadcrumbSeparator',\n      tabsWrapper: 'bui-HeaderTabsWrapper',\n    },\n  },\n  HeaderPage: {\n    classNames: {\n      root: 'bui-HeaderPage',\n      content: 'bui-HeaderPageContent',\n      tabsWrapper: 'bui-HeaderPageTabsWrapper',\n      controls: 'bui-HeaderPageControls',\n    },\n  },\n  Heading: {\n    classNames: {\n      root: 'bui-Heading',\n    },\n    dataAttributes: {\n      variant: ['title1', 'title2', 'title3', 'subtitle'] as const,\n      color: ['primary', 'secondary', 'muted'] as const,\n      truncate: [true, false] as const,\n    },\n  },\n  Icon: {\n    classNames: {\n      root: 'bui-Icon',\n    },\n  },\n  Link: {\n    classNames: {\n      root: 'bui-Link',\n    },\n    dataAttributes: {\n      variant: ['subtitle', 'body', 'caption', 'label'] as const,\n      weight: ['regular', 'bold'] as const,\n    },\n  },\n  List: {\n    classNames: {\n      root: 'bui-List',\n      row: 'bui-ListRow',\n      label: 'bui-ListLabel',\n    },\n  },\n  Menu: {\n    classNames: {\n      trigger: 'bui-MenuTrigger',\n      backdrop: 'bui-MenuBackdrop',\n      positioner: 'bui-MenuPositioner',\n      popup: 'bui-MenuPopup',\n      arrow: 'bui-MenuArrow',\n      item: 'bui-MenuItem',\n      group: 'bui-MenuGroup',\n      groupLabel: 'bui-MenuGroupLabel',\n      radioGroup: 'bui-MenuRadioGroup',\n      radioItem: 'bui-MenuRadioItem',\n      radioItemIndicator: 'bui-MenuRadioItemIndicator',\n      checkboxItem: 'bui-MenuCheckboxItem',\n      checkboxItemIndicator: 'bui-MenuCheckboxItemIndicator',\n      submenuTrigger: 'bui-MenuSubmenuTrigger',\n      separator: 'bui-MenuSeparator',\n    },\n  },\n  Popover: {\n    classNames: {\n      root: 'bui-Popover',\n    },\n  },\n  RadioGroup: {\n    classNames: {\n      root: 'bui-RadioGroup',\n      content: 'bui-RadioGroupContent',\n      radio: 'bui-Radio',\n    },\n  },\n  ScrollArea: {\n    classNames: {\n      root: 'bui-ScrollAreaRoot',\n      viewport: 'bui-ScrollAreaViewport',\n      scrollbar: 'bui-ScrollAreaScrollbar',\n      thumb: 'bui-ScrollAreaThumb',\n    },\n  },\n  SearchField: {\n    classNames: {\n      root: 'bui-SearchField',\n      clear: 'bui-InputClear',\n    },\n  },\n  Select: {\n    classNames: {\n      root: 'bui-Select',\n      trigger: 'bui-SelectTrigger',\n      value: 'bui-SelectValue',\n      icon: 'bui-SelectIcon',\n      list: 'bui-SelectList',\n      item: 'bui-SelectItem',\n      itemIndicator: 'bui-SelectItemIndicator',\n      itemLabel: 'bui-SelectItemLabel',\n    },\n    dataAttributes: {\n      size: ['small', 'medium'] as const,\n    },\n  },\n  Skeleton: {\n    classNames: {\n      root: 'bui-Skeleton',\n    },\n  },\n  Switch: {\n    classNames: {\n      root: 'bui-Switch',\n      indicator: 'bui-SwitchIndicator',\n    },\n  },\n  Table: {\n    classNames: {\n      root: 'bui-TableRoot',\n      header: 'bui-TableHeader',\n      body: 'bui-TableBody',\n      row: 'bui-TableRow',\n      head: 'bui-TableHead',\n      caption: 'bui-TableCaption',\n      cell: 'bui-TableCell',\n      cellText: 'bui-TableCellText',\n      cellLink: 'bui-TableCellLink',\n      cellProfile: 'bui-TableCellProfile',\n      cellProfileAvatar: 'bui-TableCellProfileAvatar',\n      cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',\n      cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',\n      cellProfileName: 'bui-TableCellProfileName',\n      cellProfileLink: 'bui-TableCellProfileLink',\n    },\n  },\n  Tabs: {\n    classNames: {\n      tabs: 'bui-Tabs',\n      tabList: 'bui-TabList',\n      tabListWrapper: 'bui-TabListWrapper',\n      tab: 'bui-Tab',\n      tabActive: 'bui-TabActive',\n      tabHovered: 'bui-TabHovered',\n      panel: 'bui-TabPanel',\n    },\n  },\n  Text: {\n    classNames: {\n      root: 'bui-Text',\n    },\n    dataAttributes: {\n      variant: ['subtitle', 'body', 'caption', 'label'] as const,\n      weight: ['regular', 'bold'] as const,\n      color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,\n      truncate: [true, false] as const,\n    },\n  },\n  TextField: {\n    classNames: {\n      root: 'bui-TextField',\n      inputWrapper: 'bui-InputWrapper',\n      input: 'bui-Input',\n      inputIcon: 'bui-InputIcon',\n    },\n    dataAttributes: {\n      invalid: [true, false] as const,\n      disabled: [true, false] as const,\n    },\n  },\n  Tooltip: {\n    classNames: {\n      tooltip: 'bui-Tooltip',\n      arrow: 'bui-TooltipArrow',\n    },\n  },\n} as const satisfies Record<string, ComponentDefinition>;\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/ui",
-  "version": "0.7.0-next.0",
+  "version": "0.7.0-next.2",
   "backstage": {
     "role": "web-library"
   },
@@ -42,14 +42,15 @@
   },
   "dependencies": {
     "@base-ui-components/react": "1.0.0-alpha.7",
+    "@gsap/react": "^2.1.2",
     "@remixicon/react": "^4.6.0",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
-    "motion": "^12.20.1",
+    "gsap": "^3.13.0",
     "react-aria-components": "^1.10.1"
   },
   "devDependencies": {
-    "@backstage/cli": "0.33.1",
+    "@backstage/cli": "0.34.0-next.1",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-interactions": "^8.6.12",
     "@storybook/addon-styling-webpack": "^1.0.1",
@@ -61,6 +62,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "chalk": "^5.4.1",
+    "concurrently": "^9.2.0",
     "eslint-plugin-storybook": "^0.12.0",
     "glob": "^11.0.1",
     "globals": "^15.11.0",