@gooddata/sdk-ui-kit 11.42.0-alpha.1 → 11.42.0-alpha.3

package/esm/locales.d.ts

@@ -202,4 +202,21 @@ export declare const olpGranteeControlsMessages: {
         id: string;
     };
 };
+export declare const uiAutocompleteMessages: {
+    searchPlaceholder: {
+        id: string;
+    };
+    stateLoading: {
+        id: string;
+    };
+    stateError: {
+        id: string;
+    };
+    stateNoMatch: {
+        id: string;
+    };
+    loadMore: {
+        id: string;
+    };
+};
 //# sourceMappingURL=locales.d.ts.map

package/esm/locales.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"locales.d.ts","sourceRoot":"","sources":["../src/locales.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB;;;;CAE/B,CAAC;AAEH,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;CAMpC,CAAC;AAEH,eAAO,MAAM,+BAA+B;;;;;;;CAG1C,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;CAG/B,CAAC;AAEH,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;CAK1C,CAAC;AAEH,eAAO,MAAM,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgB5C,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;CAI/B,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;CAGnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;CAEhC,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;CAKvC,CAAC;AAEH,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;CAMtC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;CAMnC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAK3B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUhC,CAAC;AAEH,eAAO,MAAM,0BAA0B;;;;;;;CAGrC,CAAC"}
+{"version":3,"file":"locales.d.ts","sourceRoot":"","sources":["../src/locales.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB;;;;CAE/B,CAAC;AAEH,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;CAMpC,CAAC;AAEH,eAAO,MAAM,+BAA+B;;;;;;;CAG1C,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;CAG/B,CAAC;AAEH,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;CAK1C,CAAC;AAEH,eAAO,MAAM,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgB5C,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;CAI/B,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;CAGnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;CAEhC,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;CAKvC,CAAC;AAEH,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;CAMtC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;CAMnC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAK3B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUhC,CAAC;AAEH,eAAO,MAAM,0BAA0B;;;;;;;CAGrC,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;CAMjC,CAAC"}

package/esm/locales.js

@@ -95,3 +95,10 @@ export const olpGranteeControlsMessages = defineMessages({
     allLabels: { id: "shareDialog.olp.granteeControls.allLabels" },
     labelsCount: { id: "shareDialog.olp.granteeControls.labelsCount" },
 });
+export const uiAutocompleteMessages = defineMessages({
+    searchPlaceholder: { id: "uiKit.autocomplete.searchPlaceholder" },
+    stateLoading: { id: "uiKit.autocomplete.stateLoading" },
+    stateError: { id: "uiKit.autocomplete.stateError" },
+    stateNoMatch: { id: "uiKit.autocomplete.stateNoMatch" },
+    loadMore: { id: "uiKit.autocomplete.loadMore" },
+});

package/esm/sdk-ui-kit.d.ts

@@ -54,7 +54,6 @@ import { IFilter } from '@gooddata/sdk-model';
 import { ILocale } from '@gooddata/sdk-ui';
 import { IMeasureSortTarget } from '@gooddata/sdk-model';
 import { IMetadataObjectBase } from '@gooddata/sdk-model';
-import { InputHTMLAttributes } from 'react';
 import { IntlShape } from 'react-intl';
 import { INumberParameterConstraints } from '@gooddata/sdk-model';
 import { IParameterMetadataObject } from '@gooddata/sdk-model';
@@ -101,7 +100,6 @@ import { ShareStatus } from '@gooddata/sdk-model';
 import { SortDirection } from '@gooddata/sdk-model';
 import { Strategy } from '@floating-ui/react';
 import { SyntheticEvent } from 'react';
-import type { UseInteractionsReturn } from '@floating-ui/react';
 import { VirtualElement } from '@floating-ui/react';
 import { WeekStart } from '@gooddata/sdk-model';
 import { WithIntlProps } from 'react-intl';
@@ -6154,6 +6152,7 @@ export declare interface ITab {
     values?: Record<string, string | number | boolean | null | undefined | Date | FormatXMLElementFn<string, string>>;
     iconOnly?: boolean;
     icon?: string;
+    iconNode?: ReactNode;
 }
 
 /**
@@ -6491,6 +6490,70 @@ export declare interface IUiAsyncTableTitleProps {
     scrollToStart: () => void;
 }
 
+/** @internal */
+export declare interface IUiAutocompleteLoadResult<T extends IUiAutocompleteOption = IUiAutocompleteOption> {
+    sections: IUiAutocompleteSection<T>[];
+    /** Show a "Load more" row whose activation calls the loader with the next page. */
+    hasNextPage?: boolean;
+}
+
+/**
+ * User-facing copy overrides. Omitted fields fall back to the kit default.
+ *
+ * @internal
+ */
+export declare interface IUiAutocompleteMessages {
+    searchPlaceholder?: string;
+    stateLoading?: string;
+    stateError?: string;
+    stateNoMatch?: string;
+    loadMore?: string;
+}
+
+/**
+ * Minimal option shape; specialized pickers map their domain objects onto it.
+ *
+ * @internal
+ */
+export declare interface IUiAutocompleteOption {
+    id: string;
+    label: string;
+    /** Secondary label rendered muted next to the primary label. */
+    secondaryText?: string;
+}
+
+/** @internal */
+export declare interface IUiAutocompleteProps<T extends IUiAutocompleteOption = IUiAutocompleteOption> {
+    /**
+     * Called with the debounced search and zero-based `page` index. Page 0
+     * fires on every query change; subsequent pages fire on Load-more.
+     *
+     * Must be referentially stable (memoize with `useCallback`) — it is a
+     * fetch dependency, so a new identity each render re-runs the page-0 query.
+     */
+    loadOptions: (search: string, page: number) => Promise<IUiAutocompleteLoadResult<T>>;
+    /** Filtered out of the dropdown so the user cannot pick the same option twice. */
+    selectedIds?: ReadonlyArray<string>;
+    onSelect: (option: T) => void;
+    /** Debounce delay for the input → loader path. Defaults to 400 ms. */
+    debounceMs?: number;
+    messages?: IUiAutocompleteMessages;
+    /**
+     * Forwarded to the search input for the accessible name / description.
+     * The combobox-internal attributes (`role`, `ariaExpanded`, `ariaControls`,
+     * `ariaAutocomplete`) are owned by the component and cannot be overridden.
+     */
+    accessibilityConfig?: IAccessibilityConfigBase;
+    dataTestId?: string;
+}
+
+/** @internal */
+export declare interface IUiAutocompleteSection<T extends IUiAutocompleteOption = IUiAutocompleteOption> {
+    id: string;
+    label: string;
+    options: T[];
+}
+
 /**
  * @internal
  */
@@ -6668,6 +6731,26 @@ export declare interface IUiChipProps {
     renderDeleteButton?: (button: ReactNode) => ReactNode;
 }
 
+/** @internal */
+export declare interface IUiComboboxInputProps {
+    /**
+     * Accessible name/description for the input (e.g. `ariaLabel`,
+     * `ariaDescribedBy`). The combobox role and listbox-wiring attributes are
+     * owned by the component and override anything passed here.
+     */
+    accessibilityConfig?: IAccessibilityConfigBase;
+    /** Visible placeholder. */
+    placeholder?: string;
+    /** Form field name forwarded to the underlying input. */
+    name?: string;
+    autoFocus?: boolean;
+    onKeyDown?: (event: KeyboardEvent_2<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent_2<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent_2<HTMLInputElement>) => void;
+    onClick?: (event: MouseEvent_2<HTMLInputElement>) => void;
+    dataTestId?: string;
+}
+
 /** @internal */
 export declare interface IUiComboboxListItemProps extends HTMLAttributes<HTMLLIElement> {
     option: IUiComboboxOption;
@@ -6705,7 +6788,10 @@ export declare interface IUiComboboxParams {
      */
     defaultValue?: string;
     /**
-     * Event handler called when the selected value of the combobox changes.
+     * Called whenever the input value changes — on typing, on Escape reset,
+     * and when an option is selected. The combobox is fully controlled when
+     * paired with `value`; consumers that need to distinguish selection from
+     * typing should inspect the current `selectedOption` state.
      */
     onValueChange?: (value: string) => void;
     /**
@@ -6715,6 +6801,12 @@ export declare interface IUiComboboxParams {
     creatable?: boolean;
 }
 
+/** @internal */
+export declare interface IUiComboboxPopupProps {
+    children?: ReactNode;
+    style?: CSSProperties;
+}
+
 /** @internal */
 export declare interface IUiComboboxProps extends IUiComboboxParams {
     children?: ReactNode;
@@ -6734,14 +6826,20 @@ export declare interface IUiComboboxState {
     selectOption: (option: IUiComboboxOption, index?: number) => void;
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
-    setReferenceRef: (node: ReferenceType | null) => void;
-    setFloatingRef: (node: HTMLDivElement | null) => void;
+    /**
+     * Drives popup visibility. Sync combobox sets it to `availableOptions.length > 0`;
+     * async sources keep it `true` so status rows (loading / error / no-match) can show.
+     */
+    shouldRenderPopup: boolean;
+    /** Anchor for the popup — typically the input's outer wrapper, so the popup matches the visible field width. */
+    anchorRef: RefObject<HTMLElement | null>;
     registerItemRef: (node: HTMLElement | null, index: number) => void;
-    getReferenceProps: UseInteractionsReturn["getReferenceProps"];
-    getFloatingProps: UseInteractionsReturn["getFloatingProps"];
-    getItemProps: UseInteractionsReturn["getItemProps"];
-    floatingStyles: CSSProperties;
     creatable: boolean;
+    /**
+     * Stable id of the `<ul role="listbox">`. The input advertises it via
+     * `aria-controls`; the listbox sets it as its `id`.
+     */
+    listboxId: string;
 }
 
 /**
@@ -7119,6 +7217,19 @@ export declare interface IUiFloatingElementProps {
     onPlacementChange?: (placement: Placement) => void;
 }
 
+/**
+ * Props passed through to `UiFloatingElement`. The `Omit` narrows the surface
+ * away from props the canonical panel chrome owns or doesn't want callers to
+ * tune (`className` / `contentClassName` — chrome is bundled; positioning
+ * knobs reserved for low-level use).
+ *
+ * @internal
+ */
+export declare interface IUiFloatingPanelProps extends Omit<IUiFloatingElementProps, "className" | "contentClassName" | "strategy" | "autoFlip" | "maxWidth" | "maxHeight" | "onPlacementChange"> {
+    /** Vertical padding bundled with the panel chrome. Defaults to `"none"`. */
+    padding?: UiFloatingPanelPadding;
+}
+
 /**
  * @internal
  */
@@ -8460,6 +8571,17 @@ export declare interface IUiTextInputProps {
     onClick?: MouseEventHandler<HTMLInputElement>;
     /** Test id forwarded to the input element. */
     dataTestId?: string;
+    inputRef?: Ref<HTMLInputElement>;
+    /** Use as the floating-popup anchor when the popup should match the full field width. */
+    wrapperRef?: Ref<HTMLDivElement>;
+    name?: string;
+    /**
+     * Browser-autofill control. Combobox/autocomplete patterns should set
+     * `"off"` so the native dropdown doesn't overlap the listbox.
+     */
+    autoComplete?: string;
+    autoCapitalize?: string;
+    autoCorrect?: string;
 }
 
 /**
@@ -10045,6 +10167,14 @@ export declare function UiAsyncTableTitle({ title, onSearch, renderIcon, actions
  */
 export declare type UiAsyncTableVariant = "regular" | "small";
 
+/**
+ * Async autocomplete: text input + sectioned listbox driven by a `loadOptions`
+ * loader. Implements the ARIA combobox+listbox APG pattern.
+ *
+ * @internal
+ */
+export declare function UiAutocomplete<T extends IUiAutocompleteOption = IUiAutocompleteOption>({ loadOptions, selectedIds, onSelect, debounceMs, messages, accessibilityConfig, dataTestId }: IUiAutocompleteProps<T>): JSX.Element;
+
 /**
  * Wrapper that focuses the first focusable child when it mounts, or when `refocusKey` changes.
  *
@@ -10155,11 +10285,13 @@ export declare function UiChip({ label, tag, isDeletable, isActive, isLocked, is
  */
 export declare function UiCombobox({ children, ...props }: IUiComboboxProps): JSX.Element;
 
-/** @internal */
-export declare const UiComboboxInput: ForwardRefExoticComponent<UiComboboxInputProps & RefAttributes<HTMLInputElement>>;
-
-/** @internal */
-export declare type UiComboboxInputProps = InputHTMLAttributes<HTMLInputElement>;
+/**
+ * Binds `UiTextInput` to the surrounding `UiCombobox` state: value, keyboard
+ * handler, open/close, ARIA combobox+listbox attributes.
+ *
+ * @internal
+ */
+export declare const UiComboboxInput: ForwardRefExoticComponent<IUiComboboxInputProps & RefAttributes<HTMLInputElement>>;
 
 /** @internal */
 export declare function UiComboboxList({ children, className, ...htmlProps }: IUiComboboxListProps): JSX.Element;
@@ -10167,33 +10299,20 @@ export declare function UiComboboxList({ children, className, ...htmlProps }: IU
 /** @internal */
 export declare function UiComboboxListItem(props: IUiComboboxListItemProps): JSX.Element;
 
-/**
- * Renders the "creatable" label suffix within a combobox list item.
- * Use this component for composable customization of list item content.
- *
- * @internal
- */
+/** @internal */
 export declare function UiComboboxListItemCreatableLabel(props: UiComboboxListItemCreatableLabelProps): JSX.Element;
 
 /** @internal */
 export declare type UiComboboxListItemCreatableLabelProps = HTMLAttributes<HTMLSpanElement>;
 
-/**
- * Renders the primary label content within a combobox list item.
- * Use this component for composable customization of list item content.
- *
- * @internal
- */
+/** @internal */
 export declare function UiComboboxListItemLabel(props: UiComboboxListItemLabelProps): JSX.Element;
 
 /** @internal */
 export declare type UiComboboxListItemLabelProps = HTMLAttributes<HTMLSpanElement>;
 
 /** @internal */
-export declare function UiComboboxPopup({ style, className, children, ...htmlProps }: UiComboboxPopupProps): JSX.Element | null;
-
-/** @internal */
-export declare type UiComboboxPopupProps = HTMLAttributes<HTMLDivElement>;
+export declare function UiComboboxPopup({ children, style }: IUiComboboxPopupProps): JSX.Element | null;
 
 /**
  * Modal confirm dialog used for actions that need explicit user confirmation
@@ -10326,6 +10445,22 @@ export declare function UiErrorPage({ title, description, dataTestId, accessibil
  */
 export declare function UiFloatingElement({ children, anchor, isOpen, onClose, placement, alignPoints, strategy, offset, autoFlip, closeOnOutsideClick, closeOnEscape, closeOnParentScroll, closeOnMouseDrag, ignoreClicksOn, shouldCloseOnClick, zIndex: zIndexProp, className, contentClassName, style, width, maxWidth, maxHeight, accessibilityConfig, onPlacementChange }: IUiFloatingElementProps): JSX.Element | null;
 
+/**
+ * `UiFloatingElement` plus the kit's canonical popup chrome (background,
+ * border-radius, shadow). Shared surface for dropdowns, comboboxes, pickers.
+ *
+ * @internal
+ */
+export declare function UiFloatingPanel({ children, padding, ...rest }: IUiFloatingPanelProps): JSX.Element;
+
+/**
+ * - `"none"` — content owns its own padding.
+ * - `"listbox"` — `4px 0` so listbox-style popups breathe at top/bottom.
+ *
+ * @internal
+ */
+export declare type UiFloatingPanelPadding = "none" | "listbox";
+
 /**
  * @internal
  */
@@ -10691,7 +10826,7 @@ export declare function UiTags({ tags, tagOptions, addLabel, nameLabel, cancelLa
  *
  * @internal
  */
-export declare function UiTextInput({ type, value, onChange, label, placeholder, iconBefore, iconAfter, onIconAfter, accessibilityConfig, disabled, autoFocus, onKeyDown, onFocus, onBlur, onClick, dataTestId }: IUiTextInputProps): JSX.Element;
+export declare function UiTextInput({ type, value, onChange, label, placeholder, iconBefore, iconAfter, onIconAfter, accessibilityConfig, disabled, autoFocus, onKeyDown, onFocus, onBlur, onClick, dataTestId, inputRef, wrapperRef, name, autoComplete, autoCapitalize, autoCorrect }: IUiTextInputProps): JSX.Element;
 
 /**
  * Interpolation values accepted by `react-intl`'s `formatMessage`, **narrowed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.42.0-alpha.1",
+  "version": "11.42.0-alpha.3",
   "description": "GoodData SDK - UI Building Components",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -75,11 +75,11 @@
     "tslib": "2.8.1",
     "unified": "^11.0.5",
     "uuid": "11.1.1",
-    "@gooddata/sdk-backend-spi": "11.42.0-alpha.1",
-    "@gooddata/sdk-model": "11.42.0-alpha.1",
-    "@gooddata/sdk-ui": "11.42.0-alpha.1",
-    "@gooddata/sdk-ui-theme-provider": "11.42.0-alpha.1",
-    "@gooddata/util": "11.42.0-alpha.1"
+    "@gooddata/sdk-backend-spi": "11.42.0-alpha.3",
+    "@gooddata/sdk-model": "11.42.0-alpha.3",
+    "@gooddata/sdk-ui": "11.42.0-alpha.3",
+    "@gooddata/sdk-ui-theme-provider": "11.42.0-alpha.3",
+    "@gooddata/util": "11.42.0-alpha.3"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -128,11 +128,11 @@
     "typescript": "5.9.3",
     "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.42.0-alpha.1",
-    "@gooddata/oxlint-config": "11.42.0-alpha.1",
-    "@gooddata/sdk-backend-mockingbird": "11.42.0-alpha.1",
-    "@gooddata/stylelint-config": "11.42.0-alpha.1",
-    "@gooddata/reference-workspace": "11.42.0-alpha.1"
+    "@gooddata/eslint-config": "11.42.0-alpha.3",
+    "@gooddata/oxlint-config": "11.42.0-alpha.3",
+    "@gooddata/reference-workspace": "11.42.0-alpha.3",
+    "@gooddata/sdk-backend-mockingbird": "11.42.0-alpha.3",
+    "@gooddata/stylelint-config": "11.42.0-alpha.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiAutocomplete/UiAutocomplete.scss

@@ -0,0 +1,53 @@
+.gd-ui-kit-autocomplete {
+    position: relative;
+
+    &__list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        max-height: 320px;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+    }
+
+    &__section-header {
+        padding: 4px 12px;
+    }
+
+    &__option {
+        display: flex;
+        align-items: baseline;
+        gap: 6px;
+        padding: 6px 12px;
+        line-height: 20px;
+        cursor: pointer;
+
+        &--isActive {
+            background: var(--gd-palette-complementary-2);
+        }
+
+        &:hover {
+            background: var(--gd-palette-complementary-2);
+        }
+    }
+
+    &__option-label {
+        color: var(--gd-palette-complementary-9);
+        font-size: 14px;
+    }
+
+    &__option-secondary {
+        color: var(--gd-palette-complementary-6);
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__state {
+        padding: 12px;
+        color: var(--gd-palette-complementary-6);
+        font-size: 14px;
+        text-align: center;
+    }
+}

package/src/@ui/UiCombobox/UiCombobox.scss

@@ -58,22 +58,6 @@
         }
     }
 
-    &__popup {
-        background-color: variables.$gd-color-white;
-        border: 1px solid variables.$gd-border-color;
-        @include mixins.border-radius(8px);
-        @include mixins.box-shadow(0 16px 32px rgb(12 23 31 / 16%));
-
-        overflow: hidden;
-        padding: 4px 0;
-        max-width: 480px;
-        z-index: 10;
-
-        @media #{variables.$small-only} {
-            max-width: 100vw;
-        }
-    }
-
     &__list {
         list-style: none;
         margin: 0;

package/src/@ui/UiDropdown/UiDropdown.scss

@@ -1,25 +1,6 @@
-// (C) 2025 GoodData Corporation
-
-@use "../../../styles/scss/variables";
+// (C) 2025-2026 GoodData Corporation
 
 .gd-ui-kit-dropdown {
-    &__body {
-        position: relative;
-        border-radius: 3px;
-        font-family: var(--gd-font-family), gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif;
-        background-color: var(--gd-palette-complementary-0, #fff);
-        box-shadow: 0 1px 20px var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
-
-        @media (forced-colors: active) {
-            // stylelint-disable-next-line declaration-no-important
-            border: 1px solid transparent !important;
-        }
-
-        @media #{variables.$small-only} {
-            border-radius: 0;
-        }
-    }
-
     &__button {
         &--fullWidth {
             width: 100%;

package/src/@ui/UiFloatingPanel/UiFloatingPanel.scss

@@ -0,0 +1,27 @@
+// (C) 2026 GoodData Corporation
+
+@use "../../../styles/scss/variables";
+
+// Canonical kit floating-panel chrome. Used by dropdowns, comboboxes, and any
+// other primitive that renders a list-shaped popup over the current view.
+.gd-ui-kit-floating-panel {
+    position: relative;
+    background-color: var(--gd-palette-complementary-0, #fff);
+    border-radius: 3px;
+    box-shadow: 0 1px 20px var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
+    font-family: var(--gd-font-family), gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif;
+
+    @media (forced-colors: active) {
+        // stylelint-disable-next-line declaration-no-important
+        border: 1px solid transparent !important;
+    }
+
+    @media #{variables.$small-only} {
+        border-radius: 0;
+    }
+
+    // Listbox-style padding for popups whose direct children are option rows.
+    &--padding-listbox {
+        padding: 4px 0;
+    }
+}

package/src/@ui/UiPopover/UiPopover.scss

@@ -60,6 +60,14 @@ $popover_footer_gap: 10px;
         &:empty {
             display: none;
         }
+
+        // `align-items: flex-start` shrinks block children to intrinsic width.
+        // Stretch direct UiTextInput descendants — combobox listboxes anchor
+        // to the text-input wrapper and a too-narrow anchor produces a too-
+        // narrow popup.
+        > .gd-ui-kit-text-input {
+            width: 100%;
+        }
     }
 
     &__footer {

package/src/@ui/UiTags/UiTags.scss

@@ -152,7 +152,3 @@ $tags_tooltip_viewport_margin: 160px;
         @include tagFocused();
     }
 }
-
-.gd-ui-kit-tags__add-input {
-    width: 100%;
-}

package/src/@ui/UiTextInput/UiTextInput.scss

@@ -49,16 +49,20 @@
         flex: 1 1 auto;
         min-width: 0;
         height: 100%;
-        padding: 0;
+        // 2px sits on top of the field's 7px padding so text isn't flush to the border.
+        padding: 0 0 0 2px;
         border: none;
         background: transparent;
         font-family: inherit;
         font-size: 14px;
+        line-height: 22px;
         color: var(--gd-palette-complementary-8);
         outline: none;
 
         &::placeholder {
-            color: var(--gd-palette-complementary-5);
+            // `opacity` not `rgba(var(...))` so theme overrides of complementary-7 still apply.
+            color: var(--gd-palette-complementary-7);
+            opacity: 0.75;
         }
 
         &:disabled {

package/src/@ui/index.scss

@@ -10,6 +10,7 @@
 @use "./UiChip/UiChip.scss";
 @use "./UiControlButton/UiControlButton.scss";
 @use "./UiCombobox/UiCombobox.scss";
+@use "./UiAutocomplete/UiAutocomplete.scss";
 @use "./UiListbox/UiListbox.scss";
 @use "./UiTreeview/UiTreeview.scss";
 @use "./UiMenu/UiMenu.scss";
@@ -27,6 +28,7 @@
 @use "./UiCard/UiCard.scss";
 @use "./UiSubmenuHeader/UiSubmenuHeader.scss";
 @use "./UiDropdown/UiDropdown.scss";
+@use "./UiFloatingPanel/UiFloatingPanel.scss";
 @use "./UiBreadcrumb/UiBreadcrumb.scss";
 @use "./UiInlineTextGenerator/UiInlineTextGenerator.scss";
 @use "./UiErrorPage/UiErrorPage.scss";