@backstage/ui 0.15.1-next.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,172 @@
 # @backstage/ui
 
+## 0.16.0
+
+### Minor Changes
+
+- fc4e624: `Combobox` now supports async collections, incremental loading, client and server search, and rich or custom item rendering. Loading placeholders expose `.bui-ComboboxLoading` and `.bui-ComboboxLoadingRow`, and stale visible results expose `data-stale` on `.bui-ComboboxList`.
+
+  **BREAKING**: The public `ComboboxProps` interface is now a union type.
+
+  **Migration:**
+
+  **Required on upgrade:**
+
+  Replace interfaces that extend `ComboboxProps` with type intersections.
+
+  ```diff
+  - interface MyComboboxProps extends ComboboxProps {
+  -   trackingId: string;
+  - }
+  + type MyComboboxProps = ComboboxProps & {
+  +   trackingId: string;
+  + };
+  ```
+
+  **Optional migration away from deprecated APIs:**
+
+  Prefer `id` instead of `value` for plain options. Existing array-valued options using `value` remain supported as a deprecated compatibility path, but new option content fields and async option sources require `id`.
+
+  Move input state and custom filtering into the nested `search` configuration:
+
+  ```diff
+  - <Combobox inputValue={query} onInputChange={setQuery} />
+  + <Combobox search={{ inputValue: query, onInputChange: setQuery }} />
+  ```
+
+  The existing top-level input state props remain supported as a deprecated compatibility path for plain-array `options`.
+
+  **Affected components:** Combobox
+
+- fc4e624: `Select` now supports async collections, incremental loading, client and server search, and rich or custom item rendering. Loading placeholders expose `.bui-SelectLoading` and `.bui-SelectLoadingRow`, and stale retained results expose `data-stale` on `.bui-SelectList`.
+
+  **BREAKING**: The public `SelectProps` interface is now a union type, and Select popover list content is no longer a direct child of `.bui-SelectPopover`.
+
+  **Migration:**
+
+  **Required on upgrade:**
+
+  Replace interfaces that extend `SelectProps` with type intersections.
+
+  ```diff
+  - interface MySelectProps extends SelectProps {
+  -   trackingId: string;
+  - }
+  + type MySelectProps = SelectProps & {
+  +   trackingId: string;
+  + };
+  ```
+
+  Update CSS selectors that rely on list content being a direct child of `.bui-SelectPopover`. Select popovers now use the standard BUI Popover content structure, with contents wrapped in `.bui-Box.bui-PopoverContent`. The existing `.bui-Popover.bui-SelectPopover` root classes are unchanged.
+
+  **Optional migration away from deprecated APIs:**
+
+  Prefer `id` instead of `value` for plain options. Existing array-valued options using `value` remain supported as a deprecated compatibility path, but new option content fields and async option sources require `id`.
+
+  Replace `searchable` and `searchPlaceholder` with nested `search` configuration:
+
+  ```diff
+  - <Select searchable searchPlaceholder="Search owners" />
+  + <Select search={{ placeholder: 'Search owners' }} />
+  ```
+
+  **Affected components:** Select
+
+### Patch Changes
+
+- 3d6c2e4: Updated the dark theme neutral background tokens to provide clearer contrast between neutral surfaces.
+- c86efcd: Fixed the Table component not filling its container width in Firefox. The `overflow` style is now applied to a wrapper element instead of the `<table>` element directly, which avoids a Firefox behavior where non-visible overflow on tables causes them to shrink-wrap to content size.
+- adf94f5: Make Skeleton component background aware, automatically adjusting its color to maintain visible contrast against neutral parent surfaces.
+
+  **Affected components:** Skeleton
+
+- b06b3c7: Fixed header tab links to respect the configured router `basename`.
+
+  **Affected components:** Header
+
+- 14a101f: Switch now adapts its track and thumb colors based on the background context of its parent container, and uses the accent token family when selected.
+
+  **Affected components:** Switch
+
+- 66c4e55: Fixed tab indicator not updating position when tab content changes width dynamically.
+- b33bb24: Added a new `NumberField` component for numeric input with support for min, max, step, and keyboard increment/decrement.
+
+  **Affected components:** NumberField
+
+- 350407d: Fixed async pagination in `Combobox` and `Select` popovers so additional pages load as users scroll instead of loading every page immediately. `Combobox` now uses `.bui-PopoverContent` as its scroll container, while all `Select` variants use the new `.bui-SelectResults` results container.
+
+  Searchable `Select` keeps its search field fixed while results scroll. The new public classes `.bui-SelectContent` and `.bui-SelectResults` expose this layout for theme customization.
+
+  **Affected components:** Combobox, Select
+
+- e989f95: Fixed `Combobox` client search crashing when used with plain options.
+
+  **Affected components:** Combobox
+
+- 1f709a3: Fixed Header breadcrumb typography so it remains consistent when component styles are loaded in different orders.
+
+  **Affected components:** Header
+
+- 5d80f77: Introduces a new set of semantic color token families — Accent, Announcement, Warning, Negative, and Positive — each providing a consistent set of background, foreground, and border tokens for both light and dark themes. A gray scale (`--bui-gray-1` through `--bui-gray-11`) and updated foreground tokens are also included.
+
+  The previous tokens remain in place for backward compatibility but are now deprecated and will be removed in a future release.
+
+  **Migration:**
+
+  **Neutral backgrounds**
+
+  The neutral background tokens keep their existing names (`--bui-bg-app`, `--bui-bg-neutral-1` through `--bui-bg-neutral-4`) but are updated with new solid-color values for both light and dark themes. No token renaming is required. The `-hover`, `-pressed`, and `-disabled` interaction variants of these tokens are deprecated and should be removed.
+
+  **Foreground**
+
+  | Deprecated         | Replacement             |
+  | ------------------ | ----------------------- |
+  | `--bui-fg-danger`  | `--bui-fg-negative`     |
+  | `--bui-fg-success` | `--bui-fg-positive`     |
+  | `--bui-fg-info`    | `--bui-fg-announcement` |
+
+  **Accent**
+
+  | Deprecated                | Replacement                |
+  | ------------------------- | -------------------------- |
+  | `--bui-bg-solid`          | `--bui-accent-bg`          |
+  | `--bui-bg-solid-hover`    | `--bui-accent-bg-hover`    |
+  | `--bui-bg-solid-disabled` | `--bui-accent-bg-disabled` |
+  | `--bui-fg-solid`          | `--bui-accent-fg`          |
+  | `--bui-fg-solid-disabled` | `--bui-accent-fg-disabled` |
+
+  **Positive**
+
+  | Deprecated               | Replacement                 |
+  | ------------------------ | --------------------------- |
+  | `--bui-bg-success`       | `--bui-positive-bg-subdued` |
+  | `--bui-fg-success-on-bg` | `--bui-positive-fg-subdued` |
+  | `--bui-border-success`   | `--bui-positive-border`     |
+
+  **Negative**
+
+  | Deprecated              | Replacement                 |
+  | ----------------------- | --------------------------- |
+  | `--bui-bg-danger`       | `--bui-negative-bg-subdued` |
+  | `--bui-fg-danger-on-bg` | `--bui-negative-fg-subdued` |
+  | `--bui-border-danger`   | `--bui-negative-border`     |
+
+  **Warning**
+
+  | Deprecated               | Replacement                |
+  | ------------------------ | -------------------------- |
+  | `--bui-bg-warning`       | `--bui-warning-bg-subdued` |
+  | `--bui-fg-warning-on-bg` | `--bui-warning-fg-subdued` |
+  | `--bui-border-warning`   | `--bui-warning-border`     |
+
+  **Announcement**
+
+  | Deprecated            | Replacement                     |
+  | --------------------- | ------------------------------- |
+  | `--bui-bg-info`       | `--bui-announcement-bg-subdued` |
+  | `--bui-fg-info-on-bg` | `--bui-announcement-fg-subdued` |
+  | `--bui-border-info`   | `--bui-announcement-border`     |
+
 ## 0.15.1-next.0
 
 ### Patch Changes

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

@@ -12,60 +12,158 @@ import { FieldError } from '../FieldError/FieldError.esm.js';
 import '../FieldError/FieldError.module.css.esm.js';
 import { ComboboxInput } from './ComboboxInput.esm.js';
 import { ComboboxListBox } from './ComboboxListBox.esm.js';
+import { useCollectionAdapter } from '../../hooks/useCollectionAdapter.esm.js';
+import { resolveCollectionSource, isAsyncListSource } from '../../utils/selectableCollection.esm.js';
+import { useAsyncComboboxState, getAsyncComboboxItemTextValue } from './useAsyncComboboxState.esm.js';
 
-const Combobox = forwardRef(
-  (props, ref) => {
-    const { contains } = useFilter({ sensitivity: "base" });
-    const { ownProps, restProps, dataAttributes } = useDefinition(
-      ComboboxDefinition,
-      props
-    );
-    const {
-      classes,
-      label,
-      description,
-      options,
-      icon,
-      placeholder,
-      isRequired,
-      secondaryLabel
-    } = ownProps;
-    const ariaLabel = restProps["aria-label"];
-    const ariaLabelledBy = restProps["aria-labelledby"];
-    useEffect(() => {
-      if (!label && !ariaLabel && !ariaLabelledBy) {
-        console.warn(
-          "Combobox requires either a visible label, aria-label, or aria-labelledby for accessibility"
-        );
-      }
-    }, [label, ariaLabel, ariaLabelledBy]);
-    const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
-    return /* @__PURE__ */ jsxs(
-      ComboBox,
-      {
-        className: classes.root,
-        defaultFilter: contains,
-        ...dataAttributes,
-        ref,
-        ...restProps,
-        children: [
-          /* @__PURE__ */ jsx(
-            FieldLabel,
-            {
-              label,
-              secondaryLabel: secondaryLabelText,
-              description,
-              descriptionSlot: "description"
-            }
-          ),
-          /* @__PURE__ */ jsx(ComboboxInput, { icon, placeholder }),
-          /* @__PURE__ */ jsx(FieldError, {}),
-          /* @__PURE__ */ jsx(Popover, { className: classes.popover, hideArrow: true, ...dataAttributes, children: /* @__PURE__ */ jsx(ComboboxListBox, { options }) })
-        ]
-      }
-    );
+function resolveComboboxStateProps({
+  runtimeState,
+  asyncState,
+  collection,
+  hasSearch
+}) {
+  if (asyncState) {
+    return asyncState;
   }
-);
+  const selectionProps = {
+    value: runtimeState.value,
+    defaultValue: runtimeState.defaultValue,
+    onChange: runtimeState.onChange
+  };
+  if (hasSearch) {
+    return {
+      ...selectionProps,
+      inputValue: collection.inputValue,
+      defaultInputValue: collection.defaultInputValue,
+      onInputChange: collection.onInputChange
+    };
+  }
+  return {
+    ...selectionProps,
+    inputValue: runtimeState.inputValue,
+    defaultInputValue: runtimeState.defaultInputValue,
+    onInputChange: runtimeState.onInputChange
+  };
+}
+function ComboboxImpl(props, ref) {
+  const { contains } = useFilter({ sensitivity: "base" });
+  const { ownProps, restProps, dataAttributes } = useDefinition(
+    ComboboxDefinition,
+    props
+  );
+  const {
+    classes,
+    label,
+    description,
+    options,
+    items,
+    children,
+    dependencies,
+    icon,
+    placeholder,
+    isRequired,
+    secondaryLabel,
+    search,
+    loading
+  } = ownProps;
+  const ariaLabel = restProps["aria-label"];
+  const ariaLabelledBy = restProps["aria-labelledby"];
+  useEffect(() => {
+    if (!label && !ariaLabel && !ariaLabelledBy) {
+      console.warn(
+        "Combobox requires either a visible label, aria-label, or aria-labelledby for accessibility"
+      );
+    }
+  }, [label, ariaLabel, ariaLabelledBy]);
+  const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+  const collectionSource = resolveCollectionSource({
+    options,
+    items
+  });
+  const collection = useCollectionAdapter({
+    items: collectionSource.source,
+    search,
+    loading,
+    retainSelectedItems: false
+  });
+  const renderedItems = collectionSource.rendersItems ? collection.canonicalItems : void 0;
+  const rootItems = renderedItems ?? (collectionSource.options !== void 0 && search !== void 0 ? collection.canonicalItems : void 0);
+  const searchProps = typeof search === "object" ? search : void 0;
+  const isDirectAsyncServer = searchProps?.mode === "server" && isAsyncListSource(collectionSource.source);
+  const shouldDisableRootFilter = searchProps?.mode === "server" || searchProps?.filter !== void 0;
+  const {
+    value,
+    defaultValue,
+    onChange,
+    inputValue,
+    defaultInputValue,
+    onInputChange,
+    ...ariaProps
+  } = restProps;
+  const asyncComboboxProps = isDirectAsyncServer ? {
+    source: collectionSource.source,
+    value,
+    defaultValue,
+    onChange,
+    allowsCustomValue: restProps.allowsCustomValue
+  } : void 0;
+  const asyncComboboxState = useAsyncComboboxState(asyncComboboxProps);
+  const comboboxStateProps = resolveComboboxStateProps({
+    runtimeState: {
+      value,
+      defaultValue,
+      onChange,
+      inputValue,
+      defaultInputValue,
+      onInputChange
+    },
+    asyncState: asyncComboboxState,
+    collection,
+    hasSearch: search !== void 0
+  });
+  const defaultFilter = shouldDisableRootFilter ? () => true : contains;
+  const getItemTextValue = isDirectAsyncServer && items !== void 0 ? getAsyncComboboxItemTextValue : void 0;
+  return /* @__PURE__ */ jsxs(
+    ComboBox,
+    {
+      className: classes.root,
+      defaultFilter,
+      items: rootItems,
+      ...dataAttributes,
+      ref,
+      ...ariaProps,
+      ...comboboxStateProps,
+      allowsEmptyCollection: true,
+      children: [
+        /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            label,
+            secondaryLabel: secondaryLabelText,
+            description,
+            descriptionSlot: "description"
+          }
+        ),
+        /* @__PURE__ */ jsx(ComboboxInput, { icon, placeholder }),
+        /* @__PURE__ */ jsx(FieldError, {}),
+        /* @__PURE__ */ jsx(Popover, { className: classes.popover, hideArrow: true, ...dataAttributes, children: /* @__PURE__ */ jsx(
+          ComboboxListBox,
+          {
+            options: collectionSource.options,
+            items: renderedItems,
+            dependencies,
+            search,
+            loading: collection.loading,
+            isStale: collection.isStale,
+            getItemTextValue,
+            children
+          }
+        ) })
+      ]
+    }
+  );
+}
+const Combobox = forwardRef(ComboboxImpl);
 Combobox.displayName = "Combobox";
 
 export { Combobox };

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.esm.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"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 { forwardRef, useEffect } from 'react';\nimport { ComboBox as AriaComboBox } from 'react-aria-components';\nimport { useFilter } from 'react-aria';\nimport { ComboboxProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { ComboboxDefinition } from './definition';\nimport { Popover } from '../Popover';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { ComboboxInput } from './ComboboxInput';\nimport { ComboboxListBox } from './ComboboxListBox';\n\n/**\n * A text input combined with a dropdown list of options. The user can type to filter\n * suggestions, navigate with the keyboard, and pick a value. With `allowsCustomValue`\n * the typed text can be committed even if no option matches.\n *\n * @public\n */\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(\n  (props, ref) => {\n    const { contains } = useFilter({ sensitivity: 'base' });\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      ComboboxDefinition,\n      props,\n    );\n    const {\n      classes,\n      label,\n      description,\n      options,\n      icon,\n      placeholder,\n      isRequired,\n      secondaryLabel,\n    } = ownProps;\n\n    const ariaLabel = restProps['aria-label'];\n    const ariaLabelledBy = restProps['aria-labelledby'];\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'Combobox requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    return (\n      <AriaComboBox\n        className={classes.root}\n        defaultFilter={contains}\n        {...dataAttributes}\n        ref={ref}\n        {...restProps}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n          descriptionSlot=\"description\"\n        />\n        <ComboboxInput icon={icon} placeholder={placeholder} />\n        <FieldError />\n        <Popover className={classes.popover} hideArrow {...dataAttributes}>\n          <ComboboxListBox options={options} />\n        </Popover>\n      </AriaComboBox>\n    );\n  },\n);\n\nCombobox.displayName = 'Combobox';\n"],"names":["AriaComboBox"],"mappings":";;;;;;;;;;;;;;;AAmCO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAS,GAAI,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AACtD,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,kBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM;AAAA,MACJ,OAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,GAAI,QAAA;AAEJ,IAAA,MAAM,SAAA,GAAY,UAAU,YAAY,CAAA;AACxC,IAAA,MAAM,cAAA,GAAiB,UAAU,iBAAiB,CAAA;AAElD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,uBACE,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,aAAA,EAAe,QAAA;AAAA,QACd,GAAG,cAAA;AAAA,QACJ,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAA,EAAgB,kBAAA;AAAA,cAChB,WAAA;AAAA,cACA,eAAA,EAAgB;AAAA;AAAA,WAClB;AAAA,0BACA,GAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EAAY,WAAA,EAA0B,CAAA;AAAA,8BACpD,UAAA,EAAA,EAAW,CAAA;AAAA,0BACZ,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,OAAA,CAAQ,OAAA,EAAS,SAAA,EAAS,IAAA,EAAE,GAAG,cAAA,EACjD,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAkB,CAAA,EACrC;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;;;;"}
+{"version":3,"file":"Combobox.esm.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"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 { forwardRef, useEffect } from 'react';\nimport { ComboBox as AriaComboBox } from 'react-aria-components';\nimport { useFilter } from 'react-aria';\nimport type {\n  ComboboxAsyncItemsProps,\n  ComboboxAsyncOptionsProps,\n  ComboboxItemsProps,\n  ComboboxListBoxOwnProps,\n  ComboboxOptionsProps,\n  ComboboxProps,\n  ComboboxServerItem,\n  ComboboxServerItemsProps,\n  ComboboxServerOptionsProps,\n  ComboboxStaticProps,\n} from './types';\nimport type { Key } from 'react-aria-components';\nimport type {\n  AsyncListSource,\n  CollectionItem,\n  NormalizedOption,\n} from '../../types/selectableCollection';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { ComboboxDefinition } from './definition';\nimport { Popover } from '../Popover';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { ComboboxInput } from './ComboboxInput';\nimport { ComboboxListBox } from './ComboboxListBox';\nimport {\n  useCollectionAdapter,\n  type CollectionAdapterResult,\n} from '../../hooks/useCollectionAdapter';\nimport {\n  isAsyncListSource,\n  resolveCollectionSource,\n} from '../../utils/selectableCollection';\nimport {\n  getAsyncComboboxItemTextValue,\n  useAsyncComboboxState,\n} from './useAsyncComboboxState';\n\ntype ComboboxRuntimeStateProps<T extends CollectionItem> = {\n  value?: Key | T | null;\n  defaultValue?: Key | T | null;\n  onChange?: ((value: Key | null) => void) | ((value: T | null) => void);\n  inputValue?: string;\n  defaultInputValue?: string;\n  onInputChange?: (value: string) => void;\n};\n\ntype ComboboxAriaStateProps = {\n  value?: Key | null;\n  defaultValue?: Key | null;\n  onChange?: (value: Key | null) => void;\n  inputValue?: string;\n  defaultInputValue?: string;\n  onInputChange?: (value: string) => void;\n};\n\ntype AsyncComboboxState = {\n  value: Key | null;\n  inputValue: string;\n  onChange: (value: Key | null) => void;\n  onInputChange: (value: string) => void;\n};\n\nfunction resolveComboboxStateProps<T extends CollectionItem>({\n  runtimeState,\n  asyncState,\n  collection,\n  hasSearch,\n}: {\n  runtimeState: ComboboxRuntimeStateProps<T>;\n  asyncState?: AsyncComboboxState;\n  collection: CollectionAdapterResult<T>;\n  hasSearch: boolean;\n}): ComboboxAriaStateProps {\n  if (asyncState) {\n    return asyncState;\n  }\n\n  const selectionProps = {\n    value: runtimeState.value as Key | null | undefined,\n    defaultValue: runtimeState.defaultValue as Key | null | undefined,\n    onChange: runtimeState.onChange as\n      | ((value: Key | null) => void)\n      | undefined,\n  };\n\n  if (hasSearch) {\n    return {\n      ...selectionProps,\n      inputValue: collection.inputValue,\n      defaultInputValue: collection.defaultInputValue,\n      onInputChange: collection.onInputChange,\n    };\n  }\n\n  return {\n    ...selectionProps,\n    inputValue: runtimeState.inputValue,\n    defaultInputValue: runtimeState.defaultInputValue,\n    onInputChange: runtimeState.onInputChange,\n  };\n}\n\n/**\n * A text input combined with a dropdown list of options. The user can type to filter\n * suggestions, navigate with the keyboard, and pick a value. With\n * `allowsCustomValue`, unmatched typed text can remain in the input without\n * selecting an option.\n *\n * @public\n */\nfunction ComboboxImpl<T extends CollectionItem = NormalizedOption>(\n  props: ComboboxProps<T>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    ComboboxDefinition,\n    props,\n  );\n  const {\n    classes,\n    label,\n    description,\n    options,\n    items,\n    children,\n    dependencies,\n    icon,\n    placeholder,\n    isRequired,\n    secondaryLabel,\n    search,\n    loading,\n  } = ownProps;\n\n  const ariaLabel = restProps['aria-label'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        'Combobox requires either a visible label, aria-label, or aria-labelledby for accessibility',\n      );\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n  const collectionSource = resolveCollectionSource<T>({\n    options,\n    items: items as Iterable<T> | AsyncListSource<T> | undefined,\n  });\n  const collection = useCollectionAdapter({\n    items: collectionSource.source,\n    search,\n    loading,\n    retainSelectedItems: false,\n  });\n  const renderedItems = collectionSource.rendersItems\n    ? collection.canonicalItems\n    : undefined;\n  const rootItems =\n    renderedItems ??\n    (collectionSource.options !== undefined && search !== undefined\n      ? collection.canonicalItems\n      : undefined);\n  const searchProps = typeof search === 'object' ? search : undefined;\n  const isDirectAsyncServer =\n    searchProps?.mode === 'server' &&\n    isAsyncListSource(collectionSource.source);\n  const shouldDisableRootFilter =\n    searchProps?.mode === 'server' || searchProps?.filter !== undefined;\n  const {\n    value,\n    defaultValue,\n    onChange,\n    inputValue,\n    defaultInputValue,\n    onInputChange,\n    ...ariaProps\n  } = restProps as typeof restProps & ComboboxRuntimeStateProps<T>;\n  const asyncComboboxProps = isDirectAsyncServer\n    ? {\n        source: collectionSource.source as AsyncListSource<T>,\n        value: value as T | null | undefined,\n        defaultValue: defaultValue as T | null | undefined,\n        onChange: onChange as ((value: T | null) => void) | undefined,\n        allowsCustomValue: restProps.allowsCustomValue,\n      }\n    : undefined;\n  const asyncComboboxState = useAsyncComboboxState(asyncComboboxProps);\n  const comboboxStateProps = resolveComboboxStateProps({\n    runtimeState: {\n      value,\n      defaultValue,\n      onChange,\n      inputValue,\n      defaultInputValue,\n      onInputChange,\n    },\n    asyncState: asyncComboboxState,\n    collection,\n    hasSearch: search !== undefined,\n  });\n  const defaultFilter = shouldDisableRootFilter ? () => true : contains;\n  const getItemTextValue =\n    isDirectAsyncServer && items !== undefined\n      ? getAsyncComboboxItemTextValue\n      : undefined;\n\n  return (\n    <AriaComboBox<T>\n      className={classes.root}\n      defaultFilter={defaultFilter}\n      items={rootItems}\n      {...dataAttributes}\n      ref={ref}\n      {...ariaProps}\n      {...comboboxStateProps}\n      allowsEmptyCollection\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n        descriptionSlot=\"description\"\n      />\n      <ComboboxInput icon={icon} placeholder={placeholder} />\n      <FieldError />\n      <Popover className={classes.popover} hideArrow {...dataAttributes}>\n        <ComboboxListBox\n          options={collectionSource.options}\n          items={renderedItems}\n          dependencies={dependencies}\n          search={search as never}\n          loading={collection.loading}\n          isStale={collection.isStale}\n          getItemTextValue={getItemTextValue}\n        >\n          {children as ComboboxListBoxOwnProps<T>['children']}\n        </ComboboxListBox>\n      </Popover>\n    </AriaComboBox>\n  );\n}\n\n/** @public */\nexport const Combobox = forwardRef(ComboboxImpl) as unknown as {\n  (\n    props: ComboboxOptionsProps & React.RefAttributes<HTMLDivElement>,\n  ): React.ReactElement;\n  (\n    props: ComboboxAsyncOptionsProps & React.RefAttributes<HTMLDivElement>,\n  ): React.ReactElement;\n  <T extends { id: Key }>(\n    props: ComboboxItemsProps<T> & React.RefAttributes<HTMLDivElement>,\n  ): React.ReactElement;\n  <T extends { id: Key }>(\n    props: ComboboxAsyncItemsProps<T> & React.RefAttributes<HTMLDivElement>,\n  ): React.ReactElement;\n  (\n    props: ComboboxStaticProps & React.RefAttributes<HTMLDivElement>,\n  ): React.ReactElement;\n  (\n    props: ComboboxServerOptionsProps & React.RefAttributes<HTMLDivElement>,\n  ): React.ReactElement;\n  <T extends ComboboxServerItem>(\n    props: ComboboxServerItemsProps<T> & React.RefAttributes<HTMLDivElement>,\n  ): React.ReactElement;\n  displayName?: string;\n};\n\nCombobox.displayName = 'Combobox';\n"],"names":["AriaComboBox"],"mappings":"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"}

package/dist/components/Combobox/Combobox.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 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\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Combobox_bui-Combobox__38e006d509,\n  .Combobox_bui-ComboboxPopover__38e006d509 {\n    &[data-size='small'] {\n      --combobox-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --combobox-item-height: 2.5rem;\n    }\n  }\n\n  .Combobox_bui-Combobox__38e006d509 {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n  }\n\n  .Combobox_bui-ComboboxPopover__38e006d509 {\n    min-width: var(--trigger-width);\n\n    .bui-PopoverContent {\n      padding: 0;\n    }\n  }\n\n  .Combobox_bui-ComboboxInput__38e006d509 {\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    .Combobox_bui-Combobox__38e006d509[data-focus-within] & {\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n\n    .Combobox_bui-Combobox__38e006d509[data-invalid] & {\n      box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n    }\n\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n    width: 100%;\n    height: var(--combobox-item-height);\n\n    .Combobox_bui-Combobox__38e006d509[data-size='small'] & {\n      padding-inline: var(--bui-space-3) 0;\n    }\n\n    .Combobox_bui-Combobox__38e006d509[data-size='medium'] & {\n      padding-inline: var(--bui-space-4) 0;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .Combobox_bui-ComboboxInputIcon__38e006d509 {\n    display: grid;\n    place-content: center;\n    flex-shrink: 0;\n    color: var(--bui-fg-secondary);\n    pointer-events: none;\n\n    .Combobox_bui-Combobox__38e006d509[data-size='small'] & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n\n    .Combobox_bui-Combobox__38e006d509[data-size='medium'] & svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .Combobox_bui-ComboboxInputField__38e006d509 {\n    flex: 1;\n    min-width: 0;\n    width: 100%;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    padding: 0;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    line-height: var(--combobox-item-height);\n    height: 100%;\n    text-overflow: ellipsis;\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Combobox_bui-ComboboxInputChevron__38e006d509 {\n    flex-shrink: 0;\n    flex-grow: 0;\n    display: grid;\n    place-content: center;\n    width: var(--combobox-item-height);\n    height: var(--combobox-item-height);\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    outline: none;\n    transition: color 0.2s ease-in-out;\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      .Combobox_bui-Combobox__38e006d509[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .Combobox_bui-Combobox__38e006d509[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Combobox_bui-ComboboxList__38e006d509 {\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      outline: none;\n    }\n  }\n\n  .Combobox_bui-ComboboxItem__38e006d509 {\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(--combobox-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] .Combobox_bui-ComboboxItemIndicator__38e006d509 {\n      opacity: 1;\n    }\n  }\n\n  .Combobox_bui-ComboboxItemIndicator__38e006d509 {\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  .Combobox_bui-ComboboxItemLabel__38e006d509 {\n    flex: 1;\n    grid-area: text;\n  }\n\n  .Combobox_bui-ComboboxSection__38e006d509 {\n    &:first-child .Combobox_bui-ComboboxSectionHeader__38e006d509 {\n      padding-top: 0;\n    }\n  }\n\n  .Combobox_bui-ComboboxSectionHeader__38e006d509 {\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  .Combobox_bui-ComboboxNoResults__38e006d509 {\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-Combobox":"Combobox_bui-Combobox__38e006d509","bui-ComboboxPopover":"Combobox_bui-ComboboxPopover__38e006d509","bui-ComboboxInput":"Combobox_bui-ComboboxInput__38e006d509","bui-ComboboxInputIcon":"Combobox_bui-ComboboxInputIcon__38e006d509","bui-ComboboxInputField":"Combobox_bui-ComboboxInputField__38e006d509","bui-ComboboxInputChevron":"Combobox_bui-ComboboxInputChevron__38e006d509","bui-ComboboxList":"Combobox_bui-ComboboxList__38e006d509","bui-ComboboxItem":"Combobox_bui-ComboboxItem__38e006d509","bui-ComboboxItemIndicator":"Combobox_bui-ComboboxItemIndicator__38e006d509","bui-ComboboxItemLabel":"Combobox_bui-ComboboxItemLabel__38e006d509","bui-ComboboxSection":"Combobox_bui-ComboboxSection__38e006d509","bui-ComboboxSectionHeader":"Combobox_bui-ComboboxSectionHeader__38e006d509","bui-ComboboxNoResults":"Combobox_bui-ComboboxNoResults__38e006d509"};
+var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Combobox_bui-Combobox__1aa41a0b62,\n  .Combobox_bui-ComboboxPopover__1aa41a0b62 {\n    &[data-size='small'] {\n      --combobox-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --combobox-item-height: 2.5rem;\n    }\n  }\n\n  .Combobox_bui-Combobox__1aa41a0b62 {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n  }\n\n  .Combobox_bui-ComboboxPopover__1aa41a0b62 {\n    min-width: var(--trigger-width);\n\n    .bui-PopoverContent {\n      padding: 0;\n    }\n  }\n\n  .Combobox_bui-ComboboxInput__1aa41a0b62 {\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    .Combobox_bui-Combobox__1aa41a0b62[data-focus-within] & {\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n\n    .Combobox_bui-Combobox__1aa41a0b62[data-invalid] & {\n      box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n    }\n\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n    width: 100%;\n    height: var(--combobox-item-height);\n\n    .Combobox_bui-Combobox__1aa41a0b62[data-size='small'] & {\n      padding-inline: var(--bui-space-3) 0;\n    }\n\n    .Combobox_bui-Combobox__1aa41a0b62[data-size='medium'] & {\n      padding-inline: var(--bui-space-4) 0;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .Combobox_bui-ComboboxInputIcon__1aa41a0b62 {\n    display: grid;\n    place-content: center;\n    flex-shrink: 0;\n    color: var(--bui-fg-secondary);\n    pointer-events: none;\n\n    .Combobox_bui-Combobox__1aa41a0b62[data-size='small'] & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n\n    .Combobox_bui-Combobox__1aa41a0b62[data-size='medium'] & svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .Combobox_bui-ComboboxInputField__1aa41a0b62 {\n    flex: 1;\n    min-width: 0;\n    width: 100%;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    padding: 0;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    line-height: var(--combobox-item-height);\n    height: 100%;\n    text-overflow: ellipsis;\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Combobox_bui-ComboboxInputChevron__1aa41a0b62 {\n    flex-shrink: 0;\n    flex-grow: 0;\n    display: grid;\n    place-content: center;\n    width: var(--combobox-item-height);\n    height: var(--combobox-item-height);\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    outline: none;\n    transition: color 0.2s ease-in-out;\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      .Combobox_bui-Combobox__1aa41a0b62[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .Combobox_bui-Combobox__1aa41a0b62[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Combobox_bui-ComboboxList__1aa41a0b62 {\n    padding-block: var(--bui-space-1);\n    padding-inline: var(--bui-space-1);\n    transition: opacity 0.2s ease-in-out;\n\n    &[data-stale] {\n      opacity: 0.6;\n    }\n\n    &[data-focus-visible] {\n      outline: none;\n    }\n  }\n\n  .Combobox_bui-ComboboxItem__1aa41a0b62 {\n    box-sizing: border-box;\n    position: relative;\n    display: block;\n    min-height: var(--combobox-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    outline: none;\n    border-radius: var(--bui-radius-2);\n\n    &:has(> .Combobox_bui-ComboboxItemIndicator__1aa41a0b62) {\n      display: grid;\n      grid-template-areas: 'icon text';\n      grid-template-columns: 1rem 1fr;\n      align-items: center;\n      gap: var(--bui-space-2);\n    }\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] .Combobox_bui-ComboboxItemIndicator__1aa41a0b62 {\n      opacity: 1;\n    }\n  }\n\n  .Combobox_bui-ComboboxItemIndicator__1aa41a0b62 {\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  .Combobox_bui-ComboboxItemLabel__1aa41a0b62 {\n    flex: 1;\n    grid-area: text;\n  }\n\n  .Combobox_bui-ComboboxItemContent__1aa41a0b62 {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n    grid-area: text;\n    min-width: 0;\n  }\n\n  .Combobox_bui-ComboboxItemText__1aa41a0b62,\n  .Combobox_bui-ComboboxItemProfile__1aa41a0b62 {\n    min-width: 0;\n  }\n\n  .Combobox_bui-ComboboxItemTextLeadingIcon__1aa41a0b62 {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n    flex-shrink: 0;\n\n    & > svg {\n      width: 1em;\n      height: 1em;\n    }\n  }\n\n  .Combobox_bui-ComboboxItemAvatar__1aa41a0b62 {\n    flex-shrink: 0;\n  }\n\n  .Combobox_bui-ComboboxItemTextContent__1aa41a0b62 {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  .Combobox_bui-ComboboxItemTitle__1aa41a0b62,\n  .Combobox_bui-ComboboxItemDescription__1aa41a0b62 {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .Combobox_bui-ComboboxItemDescription__1aa41a0b62 {\n    font-size: var(--bui-font-size-2);\n    color: var(--bui-fg-secondary);\n  }\n\n  .Combobox_bui-ComboboxSection__1aa41a0b62 {\n    &:first-child .Combobox_bui-ComboboxSectionHeader__1aa41a0b62 {\n      padding-top: 0;\n    }\n  }\n\n  .Combobox_bui-ComboboxSectionHeader__1aa41a0b62 {\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  .Combobox_bui-ComboboxNoResults__1aa41a0b62 {\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  .Combobox_bui-ComboboxLoading__1aa41a0b62 {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .Combobox_bui-ComboboxLoadingRow__1aa41a0b62 {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    min-height: var(--combobox-item-height);\n    padding-block: var(--bui-space-1);\n    padding-left: calc(var(--bui-space-3) + 1rem + var(--bui-space-2));\n    padding-right: var(--bui-space-4);\n  }\n}\n";
+var styles = {"bui-Combobox":"Combobox_bui-Combobox__1aa41a0b62","bui-ComboboxPopover":"Combobox_bui-ComboboxPopover__1aa41a0b62","bui-ComboboxInput":"Combobox_bui-ComboboxInput__1aa41a0b62","bui-ComboboxInputIcon":"Combobox_bui-ComboboxInputIcon__1aa41a0b62","bui-ComboboxInputField":"Combobox_bui-ComboboxInputField__1aa41a0b62","bui-ComboboxInputChevron":"Combobox_bui-ComboboxInputChevron__1aa41a0b62","bui-ComboboxList":"Combobox_bui-ComboboxList__1aa41a0b62","bui-ComboboxItem":"Combobox_bui-ComboboxItem__1aa41a0b62","bui-ComboboxItemIndicator":"Combobox_bui-ComboboxItemIndicator__1aa41a0b62","bui-ComboboxItemLabel":"Combobox_bui-ComboboxItemLabel__1aa41a0b62","bui-ComboboxItemContent":"Combobox_bui-ComboboxItemContent__1aa41a0b62","bui-ComboboxItemText":"Combobox_bui-ComboboxItemText__1aa41a0b62","bui-ComboboxItemProfile":"Combobox_bui-ComboboxItemProfile__1aa41a0b62","bui-ComboboxItemTextLeadingIcon":"Combobox_bui-ComboboxItemTextLeadingIcon__1aa41a0b62","bui-ComboboxItemAvatar":"Combobox_bui-ComboboxItemAvatar__1aa41a0b62","bui-ComboboxItemTextContent":"Combobox_bui-ComboboxItemTextContent__1aa41a0b62","bui-ComboboxItemTitle":"Combobox_bui-ComboboxItemTitle__1aa41a0b62","bui-ComboboxItemDescription":"Combobox_bui-ComboboxItemDescription__1aa41a0b62","bui-ComboboxSection":"Combobox_bui-ComboboxSection__1aa41a0b62","bui-ComboboxSectionHeader":"Combobox_bui-ComboboxSectionHeader__1aa41a0b62","bui-ComboboxNoResults":"Combobox_bui-ComboboxNoResults__1aa41a0b62","bui-ComboboxLoading":"Combobox_bui-ComboboxLoading__1aa41a0b62","bui-ComboboxLoadingRow":"Combobox_bui-ComboboxLoadingRow__1aa41a0b62"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -0,0 +1,76 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ListBoxItem, Text } from 'react-aria-components';
+import { RiCheckLine } from '@remixicon/react';
+import { Avatar } from '../Avatar/Avatar.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import '../Avatar/Avatar.module.css.esm.js';
+import { ComboboxItemDefinition, ComboboxItemProfileDefinition, ComboboxItemTextDefinition } from './definition.esm.js';
+
+function ComboboxItem(props) {
+  const { ownProps, restProps } = useDefinition(ComboboxItemDefinition, props);
+  const { classes, children, textValue, showSelectionIndicator } = ownProps;
+  return /* @__PURE__ */ jsx(ListBoxItem, { ...restProps, className: classes.root, textValue, children: (values) => {
+    const content = typeof children === "function" ? children(values) : children;
+    if (!showSelectionIndicator) {
+      return content;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: classes.indicator, children: /* @__PURE__ */ jsx(RiCheckLine, { "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsx("div", { className: classes.content, children: content })
+    ] });
+  } });
+}
+function ComboboxItemText(props) {
+  const { ownProps, restProps } = useDefinition(
+    ComboboxItemTextDefinition,
+    props
+  );
+  const { classes, title, description, leadingIcon, textValue } = ownProps;
+  return /* @__PURE__ */ jsxs(
+    ComboboxItem,
+    {
+      ...restProps,
+      className: classes.root,
+      textValue: textValue ?? title,
+      showSelectionIndicator: true,
+      children: [
+        leadingIcon && /* @__PURE__ */ jsx("div", { className: classes.leadingIcon, children: leadingIcon }),
+        /* @__PURE__ */ jsxs("div", { className: classes.text, children: [
+          /* @__PURE__ */ jsx(Text, { slot: "label", className: classes.title, children: title }),
+          description && /* @__PURE__ */ jsx(Text, { slot: "description", className: classes.description, children: description })
+        ] })
+      ]
+    }
+  );
+}
+function ComboboxItemProfile(props) {
+  const { ownProps, restProps } = useDefinition(
+    ComboboxItemProfileDefinition,
+    props
+  );
+  const { classes, name, src, textValue } = ownProps;
+  return /* @__PURE__ */ jsxs(
+    ComboboxItem,
+    {
+      ...restProps,
+      className: classes.root,
+      textValue: textValue ?? name,
+      showSelectionIndicator: true,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: classes.avatar, children: /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            src: src ?? "",
+            name,
+            size: "x-small",
+            purpose: "decoration"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Text, { slot: "label", className: classes.name, children: name })
+      ]
+    }
+  );
+}
+
+export { ComboboxItem, ComboboxItemProfile, ComboboxItemText };
+//# sourceMappingURL=ComboboxItem.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxItem.esm.js","sources":["../../../src/components/Combobox/ComboboxItem.tsx"],"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 { ListBoxItem, Text } from 'react-aria-components';\nimport { RiCheckLine } from '@remixicon/react';\nimport { Avatar } from '../Avatar';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  ComboboxItemDefinition,\n  ComboboxItemProfileDefinition,\n  ComboboxItemTextDefinition,\n} from './definition';\nimport type {\n  ComboboxItemProfileProps,\n  ComboboxItemProps,\n  ComboboxItemTextProps,\n} from './types';\n\n/**\n * A combobox item wrapper for custom content.\n *\n * @public\n */\nexport function ComboboxItem<T extends object = object>(\n  props: ComboboxItemProps<T>,\n) {\n  const { ownProps, restProps } = useDefinition(ComboboxItemDefinition, props);\n  const { classes, children, textValue, showSelectionIndicator } = ownProps;\n\n  return (\n    <ListBoxItem {...restProps} className={classes.root} textValue={textValue}>\n      {values => {\n        const content =\n          typeof children === 'function' ? children(values) : children;\n\n        if (!showSelectionIndicator) {\n          return content;\n        }\n\n        return (\n          <>\n            <div className={classes.indicator}>\n              <RiCheckLine aria-hidden=\"true\" />\n            </div>\n            <div className={classes.content}>{content}</div>\n          </>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\n/**\n * A combobox item that renders a title with an optional description and\n * leading icon.\n *\n * @public\n */\nexport function ComboboxItemText<T extends object = object>(\n  props: ComboboxItemTextProps<T>,\n) {\n  const { ownProps, restProps } = useDefinition(\n    ComboboxItemTextDefinition,\n    props,\n  );\n  const { classes, title, description, leadingIcon, textValue } = ownProps;\n\n  return (\n    <ComboboxItem\n      {...restProps}\n      className={classes.root}\n      textValue={textValue ?? title}\n      showSelectionIndicator\n    >\n      {leadingIcon && <div className={classes.leadingIcon}>{leadingIcon}</div>}\n      <div className={classes.text}>\n        <Text slot=\"label\" className={classes.title}>\n          {title}\n        </Text>\n        {description && (\n          <Text slot=\"description\" className={classes.description}>\n            {description}\n          </Text>\n        )}\n      </div>\n    </ComboboxItem>\n  );\n}\n\n/**\n * A combobox item that renders a profile name with an optional avatar.\n *\n * @public\n */\nexport function ComboboxItemProfile<T extends object = object>(\n  props: ComboboxItemProfileProps<T>,\n) {\n  const { ownProps, restProps } = useDefinition(\n    ComboboxItemProfileDefinition,\n    props,\n  );\n  const { classes, name, src, textValue } = ownProps;\n\n  return (\n    <ComboboxItem\n      {...restProps}\n      className={classes.root}\n      textValue={textValue ?? name}\n      showSelectionIndicator\n    >\n      <div className={classes.avatar}>\n        <Avatar\n          src={src ?? ''}\n          name={name}\n          size=\"x-small\"\n          purpose=\"decoration\"\n        />\n      </div>\n      <Text slot=\"label\" className={classes.name}>\n        {name}\n      </Text>\n    </ComboboxItem>\n  );\n}\n"],"names":[],"mappings":"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"}