@backstage/ui 0.15.0-next.0 → 0.15.0-next.1

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

@@ -10,12 +10,27 @@ import styles from './Header.module.css.esm.js';
 
 const HeaderDefinition = defineComponent()({
   styles,
+  bg: "consumer",
   classNames: {
-    root: "bui-Header",
+    headerTop: "bui-HeaderTop",
+    stickySentinel: "bui-HeaderStickySentinel",
     content: "bui-HeaderContent",
+    headerBottom: "bui-HeaderBottom",
     breadcrumbs: "bui-HeaderBreadcrumbs",
+    breadcrumbsSmall: "bui-HeaderBreadcrumbsSmall",
+    breadcrumbLink: "bui-HeaderBreadcrumbLink",
+    breadcrumbLinkSmall: "bui-HeaderBreadcrumbLinkSmall",
+    breadcrumbSeparator: "bui-HeaderBreadcrumbSeparator",
+    titleStack: "bui-HeaderTitleStack",
+    title: "bui-HeaderTitle",
+    titleSmall: "bui-HeaderTitleSmall",
     tabsWrapper: "bui-HeaderTabsWrapper",
-    controls: "bui-HeaderControls"
+    controls: "bui-HeaderControls",
+    tags: "bui-HeaderTags",
+    tag: "bui-HeaderTag",
+    description: "bui-HeaderDescription",
+    metaRow: "bui-HeaderMetaRow",
+    metaItem: "bui-HeaderMetaItem"
   },
   propDefs: {
     title: {},
@@ -23,7 +38,11 @@ const HeaderDefinition = defineComponent()({
     tabs: {},
     activeTabId: {},
     breadcrumbs: {},
-    className: {}
+    description: {},
+    tags: {},
+    metadata: {},
+    className: {},
+    sticky: {}
   }
 });
 const HeaderPageDefinition = HeaderDefinition;

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Header/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 { defineComponent } from '../../hooks/useDefinition';\nimport type { HeaderOwnProps } from './types';\nimport styles from './Header.module.css';\n\n/**\n * Component definition for Header\n * @public\n */\nexport const HeaderDefinition = defineComponent<HeaderOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Header',\n    content: 'bui-HeaderContent',\n    breadcrumbs: 'bui-HeaderBreadcrumbs',\n    tabsWrapper: 'bui-HeaderTabsWrapper',\n    controls: 'bui-HeaderControls',\n  },\n  propDefs: {\n    title: {},\n    customActions: {},\n    tabs: {},\n    activeTabId: {},\n    breadcrumbs: {},\n    className: {},\n  },\n});\n\n/**\n * @public\n * @deprecated Use {@link HeaderDefinition} instead.\n */\nexport const HeaderPageDefinition = HeaderDefinition;\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS,mBAAA;AAAA,IACT,WAAA,EAAa,uBAAA;AAAA,IACb,WAAA,EAAa,uBAAA;AAAA,IACb,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAO,EAAC;AAAA,IACR,eAAe,EAAC;AAAA,IAChB,MAAM,EAAC;AAAA,IACP,aAAa,EAAC;AAAA,IACd,aAAa,EAAC;AAAA,IACd,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,oBAAA,GAAuB;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Header/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 { defineComponent } from '../../hooks/useDefinition';\nimport type { HeaderOwnProps } from './types';\nimport styles from './Header.module.css';\n\n/**\n * Component definition for Header\n * @public\n */\nexport const HeaderDefinition = defineComponent<HeaderOwnProps>()({\n  styles,\n  bg: 'consumer',\n  classNames: {\n    headerTop: 'bui-HeaderTop',\n    stickySentinel: 'bui-HeaderStickySentinel',\n    content: 'bui-HeaderContent',\n    headerBottom: 'bui-HeaderBottom',\n    breadcrumbs: 'bui-HeaderBreadcrumbs',\n    breadcrumbsSmall: 'bui-HeaderBreadcrumbsSmall',\n    breadcrumbLink: 'bui-HeaderBreadcrumbLink',\n    breadcrumbLinkSmall: 'bui-HeaderBreadcrumbLinkSmall',\n    breadcrumbSeparator: 'bui-HeaderBreadcrumbSeparator',\n    titleStack: 'bui-HeaderTitleStack',\n    title: 'bui-HeaderTitle',\n    titleSmall: 'bui-HeaderTitleSmall',\n    tabsWrapper: 'bui-HeaderTabsWrapper',\n    controls: 'bui-HeaderControls',\n    tags: 'bui-HeaderTags',\n    tag: 'bui-HeaderTag',\n    description: 'bui-HeaderDescription',\n    metaRow: 'bui-HeaderMetaRow',\n    metaItem: 'bui-HeaderMetaItem',\n  },\n  propDefs: {\n    title: {},\n    customActions: {},\n    tabs: {},\n    activeTabId: {},\n    breadcrumbs: {},\n    description: {},\n    tags: {},\n    metadata: {},\n    className: {},\n    sticky: {},\n  },\n});\n\n/**\n * @public\n * @deprecated Use {@link HeaderDefinition} instead.\n */\nexport const HeaderPageDefinition = HeaderDefinition;\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,UAAA,EAAY;AAAA,IACV,SAAA,EAAW,eAAA;AAAA,IACX,cAAA,EAAgB,0BAAA;AAAA,IAChB,OAAA,EAAS,mBAAA;AAAA,IACT,YAAA,EAAc,kBAAA;AAAA,IACd,WAAA,EAAa,uBAAA;AAAA,IACb,gBAAA,EAAkB,4BAAA;AAAA,IAClB,cAAA,EAAgB,0BAAA;AAAA,IAChB,mBAAA,EAAqB,+BAAA;AAAA,IACrB,mBAAA,EAAqB,+BAAA;AAAA,IACrB,UAAA,EAAY,sBAAA;AAAA,IACZ,KAAA,EAAO,iBAAA;AAAA,IACP,UAAA,EAAY,sBAAA;AAAA,IACZ,WAAA,EAAa,uBAAA;AAAA,IACb,QAAA,EAAU,oBAAA;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,GAAA,EAAK,eAAA;AAAA,IACL,WAAA,EAAa,uBAAA;AAAA,IACb,OAAA,EAAS,mBAAA;AAAA,IACT,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAO,EAAC;AAAA,IACR,eAAe,EAAC;AAAA,IAChB,MAAM,EAAC;AAAA,IACP,aAAa,EAAC;AAAA,IACd,aAAa,EAAC;AAAA,IACd,aAAa,EAAC;AAAA,IACd,MAAM,EAAC;AAAA,IACP,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,QAAQ;AAAC;AAEb,CAAC;AAMM,MAAM,oBAAA,GAAuB;;;;"}

package/dist/components/Link/Link.esm.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useLink } from 'react-aria';
 import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import { useResolvedHref } from '../../hooks/useResolvedHref.esm.js';
 import { LinkDefinition } from './definition.esm.js';
 import { getNodeText } from '../../analytics/getNodeText.esm.js';
 
@@ -14,6 +15,7 @@ const LinkInternal = forwardRef((props, ref) => {
   const internalRef = useRef(null);
   const linkRef = ref || internalRef;
   const { linkProps } = useLink(restProps, linkRef);
+  const resolvedHref = useResolvedHref(restProps.href);
   const handleClick = (e) => {
     linkProps.onClick?.(e);
     const text = restProps["aria-label"] ?? getNodeText(children) ?? String(restProps.href ?? "");
@@ -27,6 +29,7 @@ const LinkInternal = forwardRef((props, ref) => {
       ...linkProps,
       ...dataAttributes,
       ...restProps,
+      href: resolvedHref,
       ref: linkRef,
       title,
       className: classes.root,

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

@@ -1 +1 @@
-{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.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, useRef } from 'react';\nimport { useLink } from 'react-aria';\nimport type { LinkProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { LinkDefinition } from './definition';\nimport { getNodeText } from '../../analytics/getNodeText';\n\nconst LinkInternal = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const { ownProps, restProps, dataAttributes, analytics } = useDefinition(\n    LinkDefinition,\n    props,\n  );\n  const { classes, title, children } = ownProps;\n\n  const internalRef = useRef<HTMLAnchorElement>(null);\n  const linkRef = (ref || internalRef) as React.RefObject<HTMLAnchorElement>;\n\n  const { linkProps } = useLink(restProps, linkRef);\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    linkProps.onClick?.(e);\n    const text =\n      restProps['aria-label'] ??\n      getNodeText(children) ??\n      String(restProps.href ?? '');\n    analytics.captureEvent('click', text, {\n      attributes: { to: String(restProps.href ?? '') },\n    });\n  };\n\n  return (\n    <a\n      {...linkProps}\n      {...dataAttributes}\n      {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      ref={linkRef}\n      title={title}\n      className={classes.root}\n      onClick={handleClick}\n    >\n      {children}\n    </a>\n  );\n});\n\nLinkInternal.displayName = 'LinkInternal';\n\n/**\n * A styled anchor element that supports analytics event tracking on click.\n *\n * @public\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  return <LinkInternal {...props} ref={ref} />;\n});\n\nLink.displayName = 'Link';\n"],"names":[],"mappings":";;;;;;;AAuBA,MAAM,YAAA,GAAe,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,WAAU,GAAI,aAAA;AAAA,IACzD,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,QAAA,EAAS,GAAI,QAAA;AAErC,EAAA,MAAM,WAAA,GAAc,OAA0B,IAAI,CAAA;AAClD,EAAA,MAAM,UAAW,GAAA,IAAO,WAAA;AAExB,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,OAAA,CAAQ,WAAW,OAAO,CAAA;AAEhD,EAAA,MAAM,WAAA,GAAc,CAAC,CAAA,KAA2C;AAC9D,IAAA,SAAA,CAAU,UAAU,CAAC,CAAA;AACrB,IAAA,MAAM,IAAA,GACJ,SAAA,CAAU,YAAY,CAAA,IACtB,WAAA,CAAY,QAAQ,CAAA,IACpB,MAAA,CAAO,SAAA,CAAU,IAAA,IAAQ,EAAE,CAAA;AAC7B,IAAA,SAAA,CAAU,YAAA,CAAa,SAAS,IAAA,EAAM;AAAA,MACpC,YAAY,EAAE,EAAA,EAAI,OAAO,SAAA,CAAU,IAAA,IAAQ,EAAE,CAAA;AAAE,KAChD,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,GAAG,cAAA;AAAA,MACH,GAAI,SAAA;AAAA,MACL,GAAA,EAAK,OAAA;AAAA,MACL,KAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,OAAA,EAAS,WAAA;AAAA,MAER;AAAA;AAAA,GACH;AAEJ,CAAC,CAAA;AAED,YAAA,CAAa,WAAA,GAAc,cAAA;AAOpB,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,GAAA,EAAU,CAAA;AAC5C,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.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, useRef } from 'react';\nimport { useLink } from 'react-aria';\nimport type { LinkProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { useResolvedHref } from '../../hooks/useResolvedHref';\nimport { LinkDefinition } from './definition';\nimport { getNodeText } from '../../analytics/getNodeText';\n\nconst LinkInternal = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const { ownProps, restProps, dataAttributes, analytics } = useDefinition(\n    LinkDefinition,\n    props,\n  );\n  const { classes, title, children } = ownProps;\n\n  const internalRef = useRef<HTMLAnchorElement>(null);\n  const linkRef = (ref || internalRef) as React.RefObject<HTMLAnchorElement>;\n\n  const { linkProps } = useLink(restProps, linkRef);\n  const resolvedHref = useResolvedHref(restProps.href);\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    linkProps.onClick?.(e);\n    const text =\n      restProps['aria-label'] ??\n      getNodeText(children) ??\n      String(restProps.href ?? '');\n    analytics.captureEvent('click', text, {\n      attributes: { to: String(restProps.href ?? '') },\n    });\n  };\n\n  return (\n    <a\n      {...linkProps}\n      {...dataAttributes}\n      {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      href={resolvedHref}\n      ref={linkRef}\n      title={title}\n      className={classes.root}\n      onClick={handleClick}\n    >\n      {children}\n    </a>\n  );\n});\n\nLinkInternal.displayName = 'LinkInternal';\n\n/**\n * A styled anchor element that supports analytics event tracking on click.\n *\n * @public\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  return <LinkInternal {...props} ref={ref} />;\n});\n\nLink.displayName = 'Link';\n"],"names":[],"mappings":";;;;;;;;AAwBA,MAAM,YAAA,GAAe,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,WAAU,GAAI,aAAA;AAAA,IACzD,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,QAAA,EAAS,GAAI,QAAA;AAErC,EAAA,MAAM,WAAA,GAAc,OAA0B,IAAI,CAAA;AAClD,EAAA,MAAM,UAAW,GAAA,IAAO,WAAA;AAExB,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,OAAA,CAAQ,WAAW,OAAO,CAAA;AAChD,EAAA,MAAM,YAAA,GAAe,eAAA,CAAgB,SAAA,CAAU,IAAI,CAAA;AAEnD,EAAA,MAAM,WAAA,GAAc,CAAC,CAAA,KAA2C;AAC9D,IAAA,SAAA,CAAU,UAAU,CAAC,CAAA;AACrB,IAAA,MAAM,IAAA,GACJ,SAAA,CAAU,YAAY,CAAA,IACtB,WAAA,CAAY,QAAQ,CAAA,IACpB,MAAA,CAAO,SAAA,CAAU,IAAA,IAAQ,EAAE,CAAA;AAC7B,IAAA,SAAA,CAAU,YAAA,CAAa,SAAS,IAAA,EAAM;AAAA,MACpC,YAAY,EAAE,EAAA,EAAI,OAAO,SAAA,CAAU,IAAA,IAAQ,EAAE,CAAA;AAAE,KAChD,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,GAAG,cAAA;AAAA,MACH,GAAI,SAAA;AAAA,MACL,IAAA,EAAM,YAAA;AAAA,MACN,GAAA,EAAK,OAAA;AAAA,MACL,KAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,OAAA,EAAS,WAAA;AAAA,MAER;AAAA;AAAA,GACH;AAEJ,CAAC,CAAA;AAED,YAAA,CAAa,WAAA,GAAc,cAAA;AAOpB,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,GAAA,EAAU,CAAA;AAC5C,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

package/dist/components/Select/Select.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  .Select_bui-Select__b6322df3ac,\n  .Select_bui-SelectPopover__b6322df3ac {\n    &[data-size='small'] {\n      --select-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --select-item-height: 2.5rem;\n    }\n  }\n\n  .Select_bui-SelectPopover__b6322df3ac {\n    min-width: var(--trigger-width);\n  }\n\n  .Select_bui-SelectTrigger__b6322df3ac {\n    box-sizing: border-box;\n    border-radius: var(--bui-radius-3);\n    border: none;\n    outline: none;\n    background-color: var(--bui-bg-neutral-1);\n    transition: box-shadow 0.2s ease-in-out;\n\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-4);\n    }\n\n    .Select_bui-Select__b6322df3ac[data-focused] & {\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\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    height: var(--select-item-height);\n\n    .Select_bui-Select__b6322df3ac[data-size='small'] & {\n      padding-inline: var(--bui-space-3) 0;\n    }\n\n    .Select_bui-Select__b6322df3ac[data-size='medium'] & {\n      padding-inline: var(--bui-space-4) 0;\n    }\n\n    & svg {\n      flex-shrink: 0;\n      color: var(--bui-fg-secondary);\n\n      .Select_bui-Select__b6322df3ac[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .Select_bui-Select__b6322df3ac[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    .Select_bui-Select__b6322df3ac[data-invalid] & {\n      box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectTriggerChevron__b6322df3ac {\n    display: grid;\n    place-content: center;\n    width: var(--select-item-height);\n    height: var(--select-item-height);\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  .Select_bui-SelectValue__b6322df3ac {\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    & .Select_bui-SelectItemIndicator__b6322df3ac {\n      display: none;\n    }\n\n    &[disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectList__b6322df3ac {\n    overflow: auto;\n    min-height: 0;\n    padding-block: var(--bui-space-1);\n    padding-inline: var(--bui-space-1);\n\n    &[data-focus-visible] {\n      /* Remove default focus-visible outline because React Aria\n       * triggers it on mouse click open of the list for some reason.\n       * On keyboard use, the top item receives the focus style,\n       * so it's not needed anyway. */\n      outline: none;\n    }\n  }\n\n  .Select_bui-SelectItem__b6322df3ac {\n    box-sizing: border-box;\n    position: relative;\n    display: grid;\n    grid-template-areas: 'icon text';\n    grid-template-columns: 1rem 1fr;\n    align-items: center;\n    min-height: var(--select-item-height);\n    padding-block: var(--bui-space-1);\n    padding-left: var(--bui-space-3);\n    padding-right: var(--bui-space-4);\n    color: var(--bui-fg-primary);\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    border-radius: var(--bui-radius-2);\n\n    &[data-focused] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-selected] .Select_bui-SelectItemIndicator__b6322df3ac {\n      opacity: 1;\n    }\n  }\n\n  .Select_bui-SelectItemIndicator__b6322df3ac {\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  .Select_bui-SelectItemLabel__b6322df3ac {\n    flex: 1;\n    grid-area: text;\n  }\n\n  .Select_bui-SelectSearchWrapper__b6322df3ac {\n    flex-shrink: 0;\n    margin-bottom: var(--bui-space-1);\n    display: flex;\n    align-items: center;\n    padding-inline: var(--bui-space-3) 0;\n    border-bottom: 1px solid var(--bui-border-2);\n  }\n\n  .Select_bui-SelectSearch__b6322df3ac {\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    color: var(--bui-fg-primary);\n    flex: 1;\n    outline: none;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    height: var(--select-item-height);\n    line-height: var(--select-item-height);\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    /* Hide native browser clear button */\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n  }\n\n  .Select_bui-SelectSearchClear__b6322df3ac {\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: var(--select-item-height);\n    height: var(--select-item-height);\n\n    input:placeholder-shown + & {\n      display: none;\n    }\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Select_bui-SelectNoResults__b6322df3ac {\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-Select":"Select_bui-Select__b6322df3ac","bui-SelectPopover":"Select_bui-SelectPopover__b6322df3ac","bui-SelectTrigger":"Select_bui-SelectTrigger__b6322df3ac","bui-SelectTriggerChevron":"Select_bui-SelectTriggerChevron__b6322df3ac","bui-SelectValue":"Select_bui-SelectValue__b6322df3ac","bui-SelectItemIndicator":"Select_bui-SelectItemIndicator__b6322df3ac","bui-SelectList":"Select_bui-SelectList__b6322df3ac","bui-SelectItem":"Select_bui-SelectItem__b6322df3ac","bui-SelectItemLabel":"Select_bui-SelectItemLabel__b6322df3ac","bui-SelectSearchWrapper":"Select_bui-SelectSearchWrapper__b6322df3ac","bui-SelectSearch":"Select_bui-SelectSearch__b6322df3ac","bui-SelectSearchClear":"Select_bui-SelectSearchClear__b6322df3ac","bui-SelectNoResults":"Select_bui-SelectNoResults__b6322df3ac"};
+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  .Select_bui-Select__5d73c6077a,\n  .Select_bui-SelectPopover__5d73c6077a {\n    &[data-size='small'] {\n      --select-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --select-item-height: 2.5rem;\n    }\n  }\n\n  .Select_bui-SelectPopover__5d73c6077a {\n    min-width: var(--trigger-width);\n  }\n\n  .Select_bui-SelectTrigger__5d73c6077a {\n    box-sizing: border-box;\n    border-radius: var(--bui-radius-3);\n    border: none;\n    outline: none;\n    background-color: var(--bui-bg-neutral-1);\n    transition: box-shadow 0.2s ease-in-out;\n\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-4);\n    }\n\n    .Select_bui-Select__5d73c6077a[data-focused] & {\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\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    height: var(--select-item-height);\n\n    .Select_bui-Select__5d73c6077a[data-size='small'] & {\n      padding-inline: var(--bui-space-3) 0;\n    }\n\n    .Select_bui-Select__5d73c6077a[data-size='medium'] & {\n      padding-inline: var(--bui-space-4) 0;\n    }\n\n    & svg {\n      flex-shrink: 0;\n      color: var(--bui-fg-secondary);\n\n      .Select_bui-Select__5d73c6077a[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .Select_bui-Select__5d73c6077a[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    .Select_bui-Select__5d73c6077a[data-invalid] & {\n      box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectTriggerChevron__5d73c6077a {\n    display: grid;\n    place-content: center;\n    width: var(--select-item-height);\n    height: var(--select-item-height);\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  .Select_bui-SelectValue__5d73c6077a {\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    & .Select_bui-SelectItemIndicator__5d73c6077a {\n      display: none;\n    }\n\n    &[disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectList__5d73c6077a {\n    overflow: auto;\n    min-height: 0;\n    padding-block: var(--bui-space-1);\n    padding-inline: var(--bui-space-1);\n\n    &[data-focus-visible] {\n      /* Remove default focus-visible outline because React Aria\n       * triggers it on mouse click open of the list for some reason.\n       * On keyboard use, the top item receives the focus style,\n       * so it's not needed anyway. */\n      outline: none;\n    }\n  }\n\n  .Select_bui-SelectItem__5d73c6077a {\n    box-sizing: border-box;\n    position: relative;\n    display: grid;\n    grid-template-areas: 'icon text';\n    grid-template-columns: 1rem 1fr;\n    align-items: center;\n    min-height: var(--select-item-height);\n    padding-block: var(--bui-space-1);\n    padding-left: var(--bui-space-3);\n    padding-right: var(--bui-space-4);\n    color: var(--bui-fg-primary);\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    border-radius: var(--bui-radius-2);\n\n    &[data-focused] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-selected] .Select_bui-SelectItemIndicator__5d73c6077a {\n      opacity: 1;\n    }\n  }\n\n  .Select_bui-SelectItemIndicator__5d73c6077a {\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  .Select_bui-SelectItemLabel__5d73c6077a {\n    flex: 1;\n    grid-area: text;\n  }\n\n  .Select_bui-SelectSearchWrapper__5d73c6077a {\n    flex-shrink: 0;\n    margin-bottom: var(--bui-space-1);\n    display: flex;\n    align-items: center;\n    padding-inline: var(--bui-space-3) 0;\n    border-bottom: 1px solid var(--bui-border-2);\n  }\n\n  .Select_bui-SelectSearch__5d73c6077a {\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    color: var(--bui-fg-primary);\n    flex: 1;\n    outline: none;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    height: var(--select-item-height);\n    line-height: var(--select-item-height);\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    /* Hide native browser clear button */\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n  }\n\n  .Select_bui-SelectSearchClear__5d73c6077a {\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: var(--select-item-height);\n    height: var(--select-item-height);\n\n    input:placeholder-shown + & {\n      display: none;\n    }\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Select_bui-SelectSection__5d73c6077a {\n    &:first-child .Select_bui-SelectSectionHeader__5d73c6077a {\n      padding-top: 0;\n    }\n  }\n\n  .Select_bui-SelectSectionHeader__5d73c6077a {\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  .Select_bui-SelectNoResults__5d73c6077a {\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-Select":"Select_bui-Select__5d73c6077a","bui-SelectPopover":"Select_bui-SelectPopover__5d73c6077a","bui-SelectTrigger":"Select_bui-SelectTrigger__5d73c6077a","bui-SelectTriggerChevron":"Select_bui-SelectTriggerChevron__5d73c6077a","bui-SelectValue":"Select_bui-SelectValue__5d73c6077a","bui-SelectItemIndicator":"Select_bui-SelectItemIndicator__5d73c6077a","bui-SelectList":"Select_bui-SelectList__5d73c6077a","bui-SelectItem":"Select_bui-SelectItem__5d73c6077a","bui-SelectItemLabel":"Select_bui-SelectItemLabel__5d73c6077a","bui-SelectSearchWrapper":"Select_bui-SelectSearchWrapper__5d73c6077a","bui-SelectSearch":"Select_bui-SelectSearch__5d73c6077a","bui-SelectSearchClear":"Select_bui-SelectSearchClear__5d73c6077a","bui-SelectSection":"Select_bui-SelectSection__5d73c6077a","bui-SelectSectionHeader":"Select_bui-SelectSectionHeader__5d73c6077a","bui-SelectNoResults":"Select_bui-SelectNoResults__5d73c6077a"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.esm.js","sources":["../../../src/components/Select/SelectContent.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  Input,\n  SearchField,\n  Autocomplete,\n  Button,\n} from 'react-aria-components';\nimport { useFilter } from 'react-aria';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectContentDefinition } from './definition';\nimport { SelectListBox } from './SelectListBox';\nimport type { Option } from './types';\n\ninterface SelectContentProps {\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  options?: Array<Option>;\n}\n\nexport function SelectContent(props: SelectContentProps) {\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const { ownProps } = useDefinition(SelectContentDefinition, props);\n  const { classes, searchable, searchPlaceholder, options } = ownProps;\n\n  if (!searchable) {\n    return <SelectListBox options={options} />;\n  }\n\n  return (\n    <Autocomplete filter={contains}>\n      <SearchField\n        autoFocus\n        className={classes.root}\n        aria-label={searchPlaceholder}\n      >\n        <Input placeholder={searchPlaceholder} className={classes.search} />\n        <Button className={classes.searchClear}>\n          <RiCloseCircleLine />\n        </Button>\n      </SearchField>\n      <SelectListBox options={options} />\n    </Autocomplete>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAmCO,SAAS,cAAc,KAAA,EAA2B;AACvD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AACtD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,yBAAyB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,OAAA,EAAS,UAAA,EAAY,iBAAA,EAAmB,SAAQ,GAAI,QAAA;AAE5D,EAAA,IAAI,CAAC,UAAA,EAAY;AACf,IAAA,uBAAO,GAAA,CAAC,iBAAc,OAAA,EAAkB,CAAA;AAAA,EAC1C;AAEA,EAAA,uBACE,IAAA,CAAC,YAAA,EAAA,EAAa,MAAA,EAAQ,QAAA,EACpB,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAS,IAAA;AAAA,QACT,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,YAAA,EAAY,iBAAA;AAAA,QAEZ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAM,WAAA,EAAa,iBAAA,EAAmB,SAAA,EAAW,QAAQ,MAAA,EAAQ,CAAA;AAAA,8BACjE,MAAA,EAAA,EAAO,SAAA,EAAW,QAAQ,WAAA,EACzB,QAAA,kBAAA,GAAA,CAAC,qBAAkB,CAAA,EACrB;AAAA;AAAA;AAAA,KACF;AAAA,oBACA,GAAA,CAAC,iBAAc,OAAA,EAAkB;AAAA,GAAA,EACnC,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SelectContent.esm.js","sources":["../../../src/components/Select/SelectContent.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  Input,\n  SearchField,\n  Autocomplete,\n  Button,\n} from 'react-aria-components';\nimport { useFilter } from 'react-aria';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectContentDefinition } from './definition';\nimport { SelectListBox } from './SelectListBox';\nimport type { SelectOwnProps } from './types';\n\ninterface SelectContentProps {\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  options?: SelectOwnProps['options'];\n}\n\nexport function SelectContent(props: SelectContentProps) {\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const { ownProps } = useDefinition(SelectContentDefinition, props);\n  const { classes, searchable, searchPlaceholder, options } = ownProps;\n\n  if (!searchable) {\n    return <SelectListBox options={options} />;\n  }\n\n  return (\n    <Autocomplete filter={contains}>\n      <SearchField\n        autoFocus\n        className={classes.root}\n        aria-label={searchPlaceholder}\n      >\n        <Input placeholder={searchPlaceholder} className={classes.search} />\n        <Button className={classes.searchClear}>\n          <RiCloseCircleLine />\n        </Button>\n      </SearchField>\n      <SelectListBox options={options} />\n    </Autocomplete>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAmCO,SAAS,cAAc,KAAA,EAA2B;AACvD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AACtD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,yBAAyB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,OAAA,EAAS,UAAA,EAAY,iBAAA,EAAmB,SAAQ,GAAI,QAAA;AAE5D,EAAA,IAAI,CAAC,UAAA,EAAY;AACf,IAAA,uBAAO,GAAA,CAAC,iBAAc,OAAA,EAAkB,CAAA;AAAA,EAC1C;AAEA,EAAA,uBACE,IAAA,CAAC,YAAA,EAAA,EAAa,MAAA,EAAQ,QAAA,EACpB,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAS,IAAA;AAAA,QACT,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,YAAA,EAAY,iBAAA;AAAA,QAEZ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAM,WAAA,EAAa,iBAAA,EAAmB,SAAA,EAAW,QAAQ,MAAA,EAAQ,CAAA;AAAA,8BACjE,MAAA,EAAA,EAAO,SAAA,EAAW,QAAQ,WAAA,EACzB,QAAA,kBAAA,GAAA,CAAC,qBAAkB,CAAA,EACrB;AAAA;AAAA;AAAA,KACF;AAAA,oBACA,GAAA,CAAC,iBAAc,OAAA,EAAkB;AAAA,GAAA,EACnC,CAAA;AAEJ;;;;"}

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

@@ -1,31 +1,45 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { ListBox, ListBoxItem, Text } from 'react-aria-components';
+import { ListBox, ListBoxSection, Header, ListBoxItem, Text } from 'react-aria-components';
 import { RiCheckLine } from '@remixicon/react';
 import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
-import { SelectListBoxDefinition } from './definition.esm.js';
+import { SelectListBoxDefinition, SelectSectionDefinition, SelectListBoxItemDefinition } from './definition.esm.js';
 
 const NoResults = () => {
   const { ownProps } = useDefinition(SelectListBoxDefinition, {});
   const { classes } = ownProps;
   return /* @__PURE__ */ jsx("div", { className: classes.noResults, children: "No results found." });
 };
-function SelectListBox(props) {
-  const { ownProps } = useDefinition(SelectListBoxDefinition, props);
-  const { classes, options } = ownProps;
-  return /* @__PURE__ */ jsx(ListBox, { className: classes.root, renderEmptyState: () => /* @__PURE__ */ jsx(NoResults, {}), children: options?.map((option) => /* @__PURE__ */ jsxs(
+function SelectItem({ option }) {
+  const { ownProps } = useDefinition(SelectListBoxItemDefinition, {});
+  const { classes } = ownProps;
+  return /* @__PURE__ */ jsxs(
     ListBoxItem,
     {
       id: option.value,
       textValue: option.label,
-      className: classes.item,
+      className: classes.root,
       isDisabled: option.disabled,
       children: [
-        /* @__PURE__ */ jsx("div", { className: classes.itemIndicator, children: /* @__PURE__ */ jsx(RiCheckLine, {}) }),
-        /* @__PURE__ */ jsx(Text, { slot: "label", className: classes.itemLabel, children: option.label })
+        /* @__PURE__ */ jsx("div", { className: classes.indicator, children: /* @__PURE__ */ jsx(RiCheckLine, {}) }),
+        /* @__PURE__ */ jsx(Text, { slot: "label", className: classes.label, children: option.label })
       ]
-    },
-    option.value
-  )) });
+    }
+  );
+}
+function SelectSectionItems({ section }) {
+  const { ownProps } = useDefinition(SelectSectionDefinition, {});
+  const { classes } = ownProps;
+  return /* @__PURE__ */ jsxs(ListBoxSection, { className: classes.root, children: [
+    /* @__PURE__ */ jsx(Header, { className: classes.header, children: section.title }),
+    section.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { option }, option.value))
+  ] });
+}
+function SelectListBox(props) {
+  const { ownProps } = useDefinition(SelectListBoxDefinition, props);
+  const { classes, options } = ownProps;
+  return /* @__PURE__ */ jsx(ListBox, { className: classes.root, renderEmptyState: () => /* @__PURE__ */ jsx(NoResults, {}), children: options?.map(
+    (item) => "options" in item ? /* @__PURE__ */ jsx(SelectSectionItems, { section: item }, item.title) : /* @__PURE__ */ jsx(SelectItem, { option: item }, item.value)
+  ) });
 }
 
 export { SelectListBox };

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

@@ -1 +1 @@
-{"version":3,"file":"SelectListBox.esm.js","sources":["../../../src/components/Select/SelectListBox.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 { ListBox, ListBoxItem, Text } from 'react-aria-components';\nimport { RiCheckLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectListBoxDefinition } from './definition';\nimport type { Option } from './types';\n\ninterface SelectListBoxProps {\n  options?: Array<Option>;\n}\n\nconst NoResults = () => {\n  const { ownProps } = useDefinition(SelectListBoxDefinition, {});\n  const { classes } = ownProps;\n\n  return <div className={classes.noResults}>No results found.</div>;\n};\n\nexport function SelectListBox(props: SelectListBoxProps) {\n  const { ownProps } = useDefinition(SelectListBoxDefinition, props);\n  const { classes, options } = ownProps;\n\n  return (\n    <ListBox className={classes.root} renderEmptyState={() => <NoResults />}>\n      {options?.map(option => (\n        <ListBoxItem\n          key={option.value}\n          id={option.value}\n          textValue={option.label}\n          className={classes.item}\n          isDisabled={option.disabled}\n        >\n          <div className={classes.itemIndicator}>\n            <RiCheckLine />\n          </div>\n          <Text slot=\"label\" className={classes.itemLabel}>\n            {option.label}\n          </Text>\n        </ListBoxItem>\n      ))}\n    </ListBox>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA0BA,MAAM,YAAY,MAAM;AACtB,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,uBAAA,EAAyB,EAAE,CAAA;AAC9D,EAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,WAAW,QAAA,EAAA,mBAAA,EAAiB,CAAA;AAC7D,CAAA;AAEO,SAAS,cAAc,KAAA,EAA2B;AACvD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,yBAAyB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,QAAA;AAE7B,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,OAAA,CAAQ,IAAA,EAAM,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EAClE,QAAA,EAAA,OAAA,EAAS,GAAA,CAAI,CAAA,MAAA,qBACZ,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MAEC,IAAI,MAAA,CAAO,KAAA;AAAA,MACX,WAAW,MAAA,CAAO,KAAA;AAAA,MAClB,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,YAAY,MAAA,CAAO,QAAA;AAAA,MAEnB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,OAAA,CAAQ,aAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,eAAY,CAAA,EACf,CAAA;AAAA,wBACA,GAAA,CAAC,QAAK,IAAA,EAAK,OAAA,EAAQ,WAAW,OAAA,CAAQ,SAAA,EACnC,iBAAO,KAAA,EACV;AAAA;AAAA,KAAA;AAAA,IAXK,MAAA,CAAO;AAAA,GAaf,CAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SelectListBox.esm.js","sources":["../../../src/components/Select/SelectListBox.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  ListBox,\n  ListBoxItem,\n  ListBoxSection,\n  Header,\n  Text,\n} from 'react-aria-components';\nimport { RiCheckLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  SelectListBoxDefinition,\n  SelectListBoxItemDefinition,\n  SelectSectionDefinition,\n} from './definition';\nimport type { Option, OptionSection, SelectOwnProps } from './types';\n\ninterface SelectListBoxProps {\n  options?: SelectOwnProps['options'];\n}\n\nconst NoResults = () => {\n  const { ownProps } = useDefinition(SelectListBoxDefinition, {});\n  const { classes } = ownProps;\n\n  return <div className={classes.noResults}>No results found.</div>;\n};\n\nfunction SelectItem({ option }: { option: Option }) {\n  const { ownProps } = useDefinition(SelectListBoxItemDefinition, {});\n  const { classes } = ownProps;\n\n  return (\n    <ListBoxItem\n      id={option.value}\n      textValue={option.label}\n      className={classes.root}\n      isDisabled={option.disabled}\n    >\n      <div className={classes.indicator}>\n        <RiCheckLine />\n      </div>\n      <Text slot=\"label\" className={classes.label}>\n        {option.label}\n      </Text>\n    </ListBoxItem>\n  );\n}\n\nfunction SelectSectionItems({ section }: { section: OptionSection }) {\n  const { ownProps } = useDefinition(SelectSectionDefinition, {});\n  const { classes } = ownProps;\n\n  return (\n    <ListBoxSection className={classes.root}>\n      <Header className={classes.header}>{section.title}</Header>\n      {section.options.map(option => (\n        <SelectItem key={option.value} option={option} />\n      ))}\n    </ListBoxSection>\n  );\n}\n\nexport function SelectListBox(props: SelectListBoxProps) {\n  const { ownProps } = useDefinition(SelectListBoxDefinition, props);\n  const { classes, options } = ownProps;\n\n  return (\n    <ListBox className={classes.root} renderEmptyState={() => <NoResults />}>\n      {options?.map(item =>\n        'options' in item ? (\n          <SelectSectionItems key={item.title} section={item} />\n        ) : (\n          <SelectItem key={item.value} option={item} />\n        ),\n      )}\n    </ListBox>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAoCA,MAAM,YAAY,MAAM;AACtB,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,uBAAA,EAAyB,EAAE,CAAA;AAC9D,EAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,WAAW,QAAA,EAAA,mBAAA,EAAiB,CAAA;AAC7D,CAAA;AAEA,SAAS,UAAA,CAAW,EAAE,MAAA,EAAO,EAAuB;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,2BAAA,EAA6B,EAAE,CAAA;AAClE,EAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,EAAA,uBACE,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,IAAI,MAAA,CAAO,KAAA;AAAA,MACX,WAAW,MAAA,CAAO,KAAA;AAAA,MAClB,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,YAAY,MAAA,CAAO,QAAA;AAAA,MAEnB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,OAAA,CAAQ,SAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,eAAY,CAAA,EACf,CAAA;AAAA,wBACA,GAAA,CAAC,QAAK,IAAA,EAAK,OAAA,EAAQ,WAAW,OAAA,CAAQ,KAAA,EACnC,iBAAO,KAAA,EACV;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,SAAS,kBAAA,CAAmB,EAAE,OAAA,EAAQ,EAA+B;AACnE,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,uBAAA,EAAyB,EAAE,CAAA;AAC9D,EAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,EAAA,uBACE,IAAA,CAAC,cAAA,EAAA,EAAe,SAAA,EAAW,OAAA,CAAQ,IAAA,EACjC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,SAAA,EAAW,OAAA,CAAQ,MAAA,EAAS,kBAAQ,KAAA,EAAM,CAAA;AAAA,IACjD,OAAA,CAAQ,QAAQ,GAAA,CAAI,CAAA,MAAA,yBAClB,UAAA,EAAA,EAA8B,MAAA,EAAA,EAAd,MAAA,CAAO,KAAuB,CAChD;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,cAAc,KAAA,EAA2B;AACvD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,yBAAyB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,QAAA;AAE7B,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,OAAA,CAAQ,IAAA,EAAM,kBAAkB,sBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EAClE,QAAA,EAAA,OAAA,EAAS,GAAA;AAAA,IAAI,CAAA,IAAA,KACZ,SAAA,IAAa,IAAA,mBACX,GAAA,CAAC,sBAAoC,OAAA,EAAS,IAAA,EAAA,EAArB,IAAA,CAAK,KAAsB,oBAEpD,GAAA,CAAC,UAAA,EAAA,EAA4B,MAAA,EAAQ,IAAA,EAAA,EAApB,KAAK,KAAqB;AAAA,GAE/C,EACF,CAAA;AAEJ;;;;"}

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

@@ -61,9 +61,6 @@ const SelectListBoxDefinition = defineComponent()(
     styles,
     classNames: {
       root: "bui-SelectList",
-      item: "bui-SelectItem",
-      itemIndicator: "bui-SelectItemIndicator",
-      itemLabel: "bui-SelectItemLabel",
       noResults: "bui-SelectNoResults"
     },
     propDefs: {
@@ -71,6 +68,25 @@ const SelectListBoxDefinition = defineComponent()(
     }
   }
 );
+const SelectListBoxItemDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-SelectItem",
+    indicator: "bui-SelectItemIndicator",
+    label: "bui-SelectItemLabel"
+  },
+  propDefs: {}
+});
+const SelectSectionDefinition = defineComponent()(
+  {
+    styles,
+    classNames: {
+      root: "bui-SelectSection",
+      header: "bui-SelectSectionHeader"
+    },
+    propDefs: {}
+  }
+);
 
-export { SelectContentDefinition, SelectDefinition, SelectListBoxDefinition, SelectTriggerDefinition };
+export { SelectContentDefinition, SelectDefinition, SelectListBoxDefinition, SelectListBoxItemDefinition, SelectSectionDefinition, SelectTriggerDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Select/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 { defineComponent } from '../../hooks/useDefinition';\nimport type {\n  SelectOwnProps,\n  SelectTriggerOwnProps,\n  SelectContentOwnProps,\n  SelectListBoxOwnProps,\n} from './types';\nimport styles from './Select.module.css';\n\n/**\n * Component definition for Select\n * @public\n */\nexport const SelectDefinition = defineComponent<SelectOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Select',\n    popover: 'bui-SelectPopover',\n  },\n  propDefs: {\n    icon: {},\n    size: { dataAttribute: true, default: 'small' },\n    options: {},\n    searchable: {},\n    searchPlaceholder: {},\n    label: {},\n    secondaryLabel: {},\n    description: {},\n    isRequired: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for SelectTrigger\n * @internal\n */\nexport const SelectTriggerDefinition = defineComponent<SelectTriggerOwnProps>()(\n  {\n    styles,\n    classNames: {\n      root: 'bui-SelectTrigger',\n      chevron: 'bui-SelectTriggerChevron',\n      value: 'bui-SelectValue',\n    },\n    bg: 'consumer',\n    propDefs: {\n      icon: {},\n    },\n  },\n);\n\n/**\n * Component definition for SelectContent\n * @internal\n */\nexport const SelectContentDefinition = defineComponent<SelectContentOwnProps>()(\n  {\n    styles,\n    classNames: {\n      root: 'bui-SelectSearchWrapper',\n      search: 'bui-SelectSearch',\n      searchClear: 'bui-SelectSearchClear',\n    },\n    propDefs: {\n      searchable: {},\n      searchPlaceholder: { default: 'Search...' },\n      options: {},\n    },\n  },\n);\n\n/**\n * Component definition for SelectListBox\n * @internal\n */\nexport const SelectListBoxDefinition = defineComponent<SelectListBoxOwnProps>()(\n  {\n    styles,\n    classNames: {\n      root: 'bui-SelectList',\n      item: 'bui-SelectItem',\n      itemIndicator: 'bui-SelectItemIndicator',\n      itemLabel: 'bui-SelectItemLabel',\n      noResults: 'bui-SelectNoResults',\n    },\n    propDefs: {\n      options: {},\n    },\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;AA6BO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,MAAM,EAAC;AAAA,IACP,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,SAAS,EAAC;AAAA,IACV,YAAY,EAAC;AAAA,IACb,mBAAmB,EAAC;AAAA,IACpB,OAAO,EAAC;AAAA,IACR,gBAAgB,EAAC;AAAA,IACjB,aAAa,EAAC;AAAA,IACd,YAAY,EAAC;AAAA,IACb,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,0BAA0B,eAAA,EAAuC;AAAA,EAC5E;AAAA,IACE,MAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,mBAAA;AAAA,MACN,OAAA,EAAS,0BAAA;AAAA,MACT,KAAA,EAAO;AAAA,KACT;AAAA,IACA,EAAA,EAAI,UAAA;AAAA,IACJ,QAAA,EAAU;AAAA,MACR,MAAM;AAAC;AACT;AAEJ;AAMO,MAAM,0BAA0B,eAAA,EAAuC;AAAA,EAC5E;AAAA,IACE,MAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,yBAAA;AAAA,MACN,MAAA,EAAQ,kBAAA;AAAA,MACR,WAAA,EAAa;AAAA,KACf;AAAA,IACA,QAAA,EAAU;AAAA,MACR,YAAY,EAAC;AAAA,MACb,iBAAA,EAAmB,EAAE,OAAA,EAAS,WAAA,EAAY;AAAA,MAC1C,SAAS;AAAC;AACZ;AAEJ;AAMO,MAAM,0BAA0B,eAAA,EAAuC;AAAA,EAC5E;AAAA,IACE,MAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,gBAAA;AAAA,MACN,IAAA,EAAM,gBAAA;AAAA,MACN,aAAA,EAAe,yBAAA;AAAA,MACf,SAAA,EAAW,qBAAA;AAAA,MACX,SAAA,EAAW;AAAA,KACb;AAAA,IACA,QAAA,EAAU;AAAA,MACR,SAAS;AAAC;AACZ;AAEJ;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Select/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 { defineComponent } from '../../hooks/useDefinition';\nimport type {\n  SelectOwnProps,\n  SelectTriggerOwnProps,\n  SelectContentOwnProps,\n  SelectListBoxOwnProps,\n  SelectListBoxItemOwnProps,\n  SelectSectionOwnProps,\n} from './types';\nimport styles from './Select.module.css';\n\n/**\n * Component definition for Select\n * @public\n */\nexport const SelectDefinition = defineComponent<SelectOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Select',\n    popover: 'bui-SelectPopover',\n  },\n  propDefs: {\n    icon: {},\n    size: { dataAttribute: true, default: 'small' },\n    options: {},\n    searchable: {},\n    searchPlaceholder: {},\n    label: {},\n    secondaryLabel: {},\n    description: {},\n    isRequired: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for SelectTrigger\n * @internal\n */\nexport const SelectTriggerDefinition = defineComponent<SelectTriggerOwnProps>()(\n  {\n    styles,\n    classNames: {\n      root: 'bui-SelectTrigger',\n      chevron: 'bui-SelectTriggerChevron',\n      value: 'bui-SelectValue',\n    },\n    bg: 'consumer',\n    propDefs: {\n      icon: {},\n    },\n  },\n);\n\n/**\n * Component definition for SelectContent\n * @internal\n */\nexport const SelectContentDefinition = defineComponent<SelectContentOwnProps>()(\n  {\n    styles,\n    classNames: {\n      root: 'bui-SelectSearchWrapper',\n      search: 'bui-SelectSearch',\n      searchClear: 'bui-SelectSearchClear',\n    },\n    propDefs: {\n      searchable: {},\n      searchPlaceholder: { default: 'Search...' },\n      options: {},\n    },\n  },\n);\n\n/**\n * Component definition for SelectListBox\n * @internal\n */\nexport const SelectListBoxDefinition = defineComponent<SelectListBoxOwnProps>()(\n  {\n    styles,\n    classNames: {\n      root: 'bui-SelectList',\n      noResults: 'bui-SelectNoResults',\n    },\n    propDefs: {\n      options: {},\n    },\n  },\n);\n\n/**\n * Component definition for SelectListBoxItem\n * @internal\n */\nexport const SelectListBoxItemDefinition =\n  defineComponent<SelectListBoxItemOwnProps>()({\n    styles,\n    classNames: {\n      root: 'bui-SelectItem',\n      indicator: 'bui-SelectItemIndicator',\n      label: 'bui-SelectItemLabel',\n    },\n    propDefs: {},\n  });\n\n/**\n * Component definition for SelectSection\n * @internal\n */\nexport const SelectSectionDefinition = defineComponent<SelectSectionOwnProps>()(\n  {\n    styles,\n    classNames: {\n      root: 'bui-SelectSection',\n      header: 'bui-SelectSectionHeader',\n    },\n    propDefs: {},\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;AA+BO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,MAAM,EAAC;AAAA,IACP,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,SAAS,EAAC;AAAA,IACV,YAAY,EAAC;AAAA,IACb,mBAAmB,EAAC;AAAA,IACpB,OAAO,EAAC;AAAA,IACR,gBAAgB,EAAC;AAAA,IACjB,aAAa,EAAC;AAAA,IACd,YAAY,EAAC;AAAA,IACb,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,0BAA0B,eAAA,EAAuC;AAAA,EAC5E;AAAA,IACE,MAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,mBAAA;AAAA,MACN,OAAA,EAAS,0BAAA;AAAA,MACT,KAAA,EAAO;AAAA,KACT;AAAA,IACA,EAAA,EAAI,UAAA;AAAA,IACJ,QAAA,EAAU;AAAA,MACR,MAAM;AAAC;AACT;AAEJ;AAMO,MAAM,0BAA0B,eAAA,EAAuC;AAAA,EAC5E;AAAA,IACE,MAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,yBAAA;AAAA,MACN,MAAA,EAAQ,kBAAA;AAAA,MACR,WAAA,EAAa;AAAA,KACf;AAAA,IACA,QAAA,EAAU;AAAA,MACR,YAAY,EAAC;AAAA,MACb,iBAAA,EAAmB,EAAE,OAAA,EAAS,WAAA,EAAY;AAAA,MAC1C,SAAS;AAAC;AACZ;AAEJ;AAMO,MAAM,0BAA0B,eAAA,EAAuC;AAAA,EAC5E;AAAA,IACE,MAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,gBAAA;AAAA,MACN,SAAA,EAAW;AAAA,KACb;AAAA,IACA,QAAA,EAAU;AAAA,MACR,SAAS;AAAC;AACZ;AAEJ;AAMO,MAAM,2BAAA,GACX,iBAA2C,CAAE;AAAA,EAC3C,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,SAAA,EAAW,yBAAA;AAAA,IACX,KAAA,EAAO;AAAA,GACT;AAAA,EACA,UAAU;AACZ,CAAC;AAMI,MAAM,0BAA0B,eAAA,EAAuC;AAAA,EAC5E;AAAA,IACE,MAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,mBAAA;AAAA,MACN,MAAA,EAAQ;AAAA,KACV;AAAA,IACA,UAAU;AAAC;AAEf;;;;"}

package/dist/hooks/useDefinition/useDefinition.esm.js

@@ -4,16 +4,18 @@ import { useBreakpoint } from '../useBreakpoint.esm.js';
 import { useBgProvider, useBgConsumer, BgProvider } from '../useBg.esm.js';
 import { resolveDefinitionProps, processUtilityProps } from './helpers.esm.js';
 import { useAnalytics, noopTracker } from '../../analytics/useAnalytics.esm.js';
-import { useInRouterContext, useHref } from 'react-router-dom';
+import { useInRouterContext, useResolvedPath, createPath } from 'react-router-dom';
+import { isExternalLink } from '../../utils/linkUtils.esm.js';
 
 function useDefinition(definition, props, options) {
   const { breakpoint } = useBreakpoint();
   let hrefResolvedProps = props;
   const hasRouter = useInRouterContext();
   if (hasRouter) {
-    const absoluteHref = useHref(props.href ?? "");
-    if (props.href !== void 0) {
-      hrefResolvedProps = { ...props, href: absoluteHref };
+    const rawHref = props.href;
+    const resolved = useResolvedPath(rawHref ?? "");
+    if (rawHref !== void 0 && !isExternalLink(rawHref)) {
+      hrefResolvedProps = { ...props, href: createPath(resolved) };
     }
   }
   const { ownPropsResolved, restProps } = resolveDefinitionProps(
@@ -50,8 +52,8 @@ function useDefinition(definition, props, options) {
     const tracker = useAnalytics();
     analytics = ownPropsResolved.noTrack ? noopTracker : tracker;
   }
-  const utilityTarget = options?.utilityTarget ?? "root";
-  const classNameTarget = options?.classNameTarget ?? "root";
+  const utilityTarget = options?.utilityTarget !== void 0 ? options.utilityTarget : "root";
+  const classNameTarget = options?.classNameTarget !== void 0 ? options.classNameTarget : "root";
   const classes = {};
   for (const [name, cssKey] of Object.entries(definition.classNames)) {
     classes[name] = clsx(

package/dist/hooks/useDefinition/useDefinition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDefinition.esm.js","sources":["../../../src/hooks/useDefinition/useDefinition.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 { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useBreakpoint } from '../useBreakpoint';\nimport { useBgProvider, useBgConsumer, BgProvider } from '../useBg';\nimport { resolveDefinitionProps, processUtilityProps } from './helpers';\nimport { useAnalytics } from '../../analytics/useAnalytics';\nimport { noopTracker } from '../../analytics/useAnalytics';\nimport { useInRouterContext, useHref } from 'react-router-dom';\nimport type {\n  ComponentConfig,\n  UseDefinitionOptions,\n  UseDefinitionResult,\n  UtilityKeys,\n} from './types';\n\nexport function useDefinition<\n  D extends ComponentConfig<any, any>,\n  P extends Record<string, any>,\n>(\n  definition: D,\n  props: P,\n  options?: UseDefinitionOptions<D>,\n): UseDefinitionResult<D, P> {\n  const { breakpoint } = useBreakpoint();\n\n  // Turn relative href into an absolute path using the current route\n  // context, so that client-side navigation works correctly.\n  let hrefResolvedProps = props;\n  const hasRouter = useInRouterContext();\n  // useHref throws outside a Router, so we guard with useInRouterContext.\n  // The guard is safe because a component's router context does not\n  // change during its lifetime, keeping the hook call count stable.\n  if (hasRouter) {\n    const absoluteHref = useHref((props as any).href ?? '');\n    if ((props as any).href !== undefined) {\n      hrefResolvedProps = { ...props, href: absoluteHref } as P;\n    }\n  }\n\n  // Resolve all props centrally — applies responsive values and defaults\n  const { ownPropsResolved, restProps } = resolveDefinitionProps(\n    definition,\n    hrefResolvedProps,\n    breakpoint,\n  );\n\n  const dataAttributes: Record<string, string | undefined> = {};\n\n  for (const [key, config] of Object.entries(definition.propDefs)) {\n    const finalValue = ownPropsResolved[key];\n\n    if (finalValue !== undefined) {\n      // Skip data-bg for bg prop when the provider path handles it\n      if (key === 'bg' && definition.bg === 'provider') continue;\n\n      if ((config as any).dataAttribute) {\n        // eslint-disable-next-line no-restricted-syntax\n        dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);\n      }\n    }\n  }\n\n  // Provider: resolve bg and provide context for children\n  const providerBg = useBgProvider(\n    definition.bg === 'provider' ? ownPropsResolved.bg : undefined,\n  );\n\n  // Consumer: read parent context bg\n  const consumerBg = useBgConsumer();\n\n  // Provider: set data-bg from the resolved provider bg\n  if (definition.bg === 'provider' && providerBg.bg !== undefined) {\n    dataAttributes['data-bg'] = String(providerBg.bg);\n  }\n\n  // Consumer: set data-on-bg from the parent context\n  if (definition.bg === 'consumer' && consumerBg.bg !== undefined) {\n    dataAttributes['data-on-bg'] = String(consumerBg.bg);\n  }\n\n  const { utilityClasses, utilityStyle } = processUtilityProps<UtilityKeys<D>>(\n    props,\n    (definition.utilityProps ?? []) as readonly UtilityKeys<D>[],\n  );\n\n  // Analytics: conditionally call useAnalytics based on definition flag\n  let analytics = noopTracker;\n  if (definition.analytics) {\n    const tracker = useAnalytics();\n    analytics = ownPropsResolved.noTrack ? noopTracker : tracker;\n  }\n\n  const utilityTarget = options?.utilityTarget ?? 'root';\n  const classNameTarget = options?.classNameTarget ?? 'root';\n\n  const classes: Record<string, string> = {};\n\n  for (const [name, cssKey] of Object.entries(definition.classNames)) {\n    classes[name] = clsx(\n      cssKey as string,\n      definition.styles[cssKey as keyof typeof definition.styles],\n      utilityTarget === name && utilityClasses,\n      classNameTarget === name && ownPropsResolved.className,\n    );\n  }\n\n  let children: ReactNode | undefined;\n  let childrenWithBgProvider: ReactNode | undefined;\n\n  if (definition.bg === 'provider') {\n    childrenWithBgProvider = providerBg.bg ? (\n      <BgProvider bg={providerBg.bg}>{props.children}</BgProvider>\n    ) : (\n      props.children\n    );\n  } else {\n    children = props.children;\n  }\n\n  return {\n    ownProps: {\n      classes,\n      ...ownPropsResolved,\n      ...(definition.bg === 'provider'\n        ? { childrenWithBgProvider }\n        : { children }),\n    },\n    restProps,\n    dataAttributes,\n    utilityStyle,\n    ...(definition.analytics ? { analytics } : {}),\n  } as unknown as UseDefinitionResult<D, P>;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useDefinition.esm.js","sources":["../../../src/hooks/useDefinition/useDefinition.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 { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useBreakpoint } from '../useBreakpoint';\nimport { useBgProvider, useBgConsumer, BgProvider } from '../useBg';\nimport { resolveDefinitionProps, processUtilityProps } from './helpers';\nimport { useAnalytics } from '../../analytics/useAnalytics';\nimport { noopTracker } from '../../analytics/useAnalytics';\nimport {\n  useResolvedPath,\n  useInRouterContext,\n  createPath,\n} from 'react-router-dom';\nimport { isExternalLink } from '../../utils/linkUtils';\nimport type {\n  ComponentConfig,\n  UseDefinitionOptions,\n  UseDefinitionResult,\n  UtilityKeys,\n} from './types';\n\nexport function useDefinition<\n  D extends ComponentConfig<any, any>,\n  P extends Record<string, any>,\n>(\n  definition: D,\n  props: P,\n  options?: UseDefinitionOptions<D>,\n): UseDefinitionResult<D, P> {\n  const { breakpoint } = useBreakpoint();\n\n  let hrefResolvedProps = props;\n  const hasRouter = useInRouterContext();\n  if (hasRouter) {\n    const rawHref = (props as any).href;\n    const resolved = useResolvedPath(rawHref ?? '');\n    if (rawHref !== undefined && !isExternalLink(rawHref)) {\n      hrefResolvedProps = { ...props, href: createPath(resolved) } as P;\n    }\n  }\n\n  // Resolve all props centrally — applies responsive values and defaults\n  const { ownPropsResolved, restProps } = resolveDefinitionProps(\n    definition,\n    hrefResolvedProps,\n    breakpoint,\n  );\n\n  const dataAttributes: Record<string, string | undefined> = {};\n\n  for (const [key, config] of Object.entries(definition.propDefs)) {\n    const finalValue = ownPropsResolved[key];\n\n    if (finalValue !== undefined) {\n      // Skip data-bg for bg prop when the provider path handles it\n      if (key === 'bg' && definition.bg === 'provider') continue;\n\n      if ((config as any).dataAttribute) {\n        // eslint-disable-next-line no-restricted-syntax\n        dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);\n      }\n    }\n  }\n\n  // Provider: resolve bg and provide context for children\n  const providerBg = useBgProvider(\n    definition.bg === 'provider' ? ownPropsResolved.bg : undefined,\n  );\n\n  // Consumer: read parent context bg\n  const consumerBg = useBgConsumer();\n\n  // Provider: set data-bg from the resolved provider bg\n  if (definition.bg === 'provider' && providerBg.bg !== undefined) {\n    dataAttributes['data-bg'] = String(providerBg.bg);\n  }\n\n  // Consumer: set data-on-bg from the parent context\n  if (definition.bg === 'consumer' && consumerBg.bg !== undefined) {\n    dataAttributes['data-on-bg'] = String(consumerBg.bg);\n  }\n\n  const { utilityClasses, utilityStyle } = processUtilityProps<UtilityKeys<D>>(\n    props,\n    (definition.utilityProps ?? []) as readonly UtilityKeys<D>[],\n  );\n\n  // Analytics: conditionally call useAnalytics based on definition flag\n  let analytics = noopTracker;\n  if (definition.analytics) {\n    const tracker = useAnalytics();\n    analytics = ownPropsResolved.noTrack ? noopTracker : tracker;\n  }\n\n  const utilityTarget =\n    options?.utilityTarget !== undefined ? options.utilityTarget : 'root';\n  const classNameTarget =\n    options?.classNameTarget !== undefined ? options.classNameTarget : 'root';\n\n  const classes: Record<string, string> = {};\n\n  for (const [name, cssKey] of Object.entries(definition.classNames)) {\n    classes[name] = clsx(\n      cssKey as string,\n      definition.styles[cssKey as keyof typeof definition.styles],\n      utilityTarget === name && utilityClasses,\n      classNameTarget === name && ownPropsResolved.className,\n    );\n  }\n\n  let children: ReactNode | undefined;\n  let childrenWithBgProvider: ReactNode | undefined;\n\n  if (definition.bg === 'provider') {\n    childrenWithBgProvider = providerBg.bg ? (\n      <BgProvider bg={providerBg.bg}>{props.children}</BgProvider>\n    ) : (\n      props.children\n    );\n  } else {\n    children = props.children;\n  }\n\n  return {\n    ownProps: {\n      classes,\n      ...ownPropsResolved,\n      ...(definition.bg === 'provider'\n        ? { childrenWithBgProvider }\n        : { children }),\n    },\n    restProps,\n    dataAttributes,\n    utilityStyle,\n    ...(definition.analytics ? { analytics } : {}),\n  } as unknown as UseDefinitionResult<D, P>;\n}\n"],"names":[],"mappings":"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"}

package/dist/hooks/useResolvedHref.esm.js

@@ -0,0 +1,17 @@
+import { useInRouterContext, useHref } from 'react-router-dom';
+import { isExternalLink } from '../utils/linkUtils.esm.js';
+
+function useResolvedHref(href) {
+  const hasRouter = useInRouterContext();
+  if (!hasRouter) {
+    return href;
+  }
+  const resolved = useHref(href ?? "");
+  if (!href || isExternalLink(href)) {
+    return href;
+  }
+  return resolved;
+}
+
+export { useResolvedHref };
+//# sourceMappingURL=useResolvedHref.esm.js.map

package/dist/hooks/useResolvedHref.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResolvedHref.esm.js","sources":["../../src/hooks/useResolvedHref.ts"],"sourcesContent":["/*\n * Copyright 2026 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 { useHref, useInRouterContext } from 'react-router-dom';\nimport { isExternalLink } from '../utils/linkUtils';\n\n/**\n * Resolves an href for rendering. External URLs are returned unchanged;\n * internal paths are resolved through react-router's useHref so they\n * respect the current basename and route context.\n *\n * @internal\n */\nexport function useResolvedHref(href: string): string;\nexport function useResolvedHref(href: string | undefined): string | undefined;\nexport function useResolvedHref(href: string | undefined): string | undefined {\n  const hasRouter = useInRouterContext();\n  // useHref throws outside a Router, so we guard with useInRouterContext.\n  // The guard is safe because a component's router context does not\n  // change during its lifetime, keeping the hook call count stable.\n  if (!hasRouter) {\n    return href;\n  }\n  const resolved = useHref(href ?? '');\n  if (!href || isExternalLink(href)) {\n    return href;\n  }\n  return resolved;\n}\n"],"names":[],"mappings":";;;AA4BO,SAAS,gBAAgB,IAAA,EAA8C;AAC5E,EAAA,MAAM,YAAY,kBAAA,EAAmB;AAIrC,EAAA,IAAI,CAAC,SAAA,EAAW;AACd,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,MAAM,QAAA,GAAW,OAAA,CAAQ,IAAA,IAAQ,EAAE,CAAA;AACnC,EAAA,IAAI,CAAC,IAAA,IAAQ,cAAA,CAAe,IAAI,CAAA,EAAG;AACjC,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,OAAO,QAAA;AACT;;;;"}