@api-client/ui 0.2.4 → 0.2.5

package/.aiexclude

@@ -0,0 +1,3 @@
+coverage/
+.tmp/
+build/

package/.vscode/settings.json

@@ -9,5 +9,8 @@
     "startactivityforresult",
     "typescale"
   ],
-  "vscode-wtr-runner.testRunnerCommand": "npm run tsc:all && npx wtr --playwright --browsers \"chromium\""
+  "vscode-wtr-runner.testRunnerCommand": "npm run tsc:all && npx wtr --playwright --browsers \"chromium\"",
+  "geminicodeassist.customCommands": {
+    "add-comments": "add comments to my code. add examples whenever reasonable. focus on another developer understanding what the function is about. don't forget about class fields."
+  }
 }

package/build/src/elements/autocomplete/internals/autocomplete.d.ts

@@ -20,10 +20,20 @@ import type UiListbox from '../../../md/listbox/internals/Listbox.js';
  *   - If a `ui-list-item` has a `data-index` attribute (e.g., `data-index="name email"`), filtering will search
  *     within the specified `data-*` attributes (e.g., `data-name`, `data-email`).
  * - **Mutation Awareness**: Reacts to changes in slotted suggestions, re-filtering them if necessary.
- * - **Event-Driven**: Notifies the parent application via an `autocomplete` event when a suggestion is selected,
- *   without directly modifying the input's value. This allows the application author to control the input update logic.
- * - **Accessibility**: Designed with accessibility in mind, ensuring keyboard navigability and proper ARIA attribute
- *   management (handled by `ui-listbox`).
+ * - **Event-Driven**: Notifies the application via an `autocomplete` event when a suggestion is selected.
+ *   The component itself does not modify the input's value, giving the application author full control.
+ *
+ * ### Accessibility
+ *
+ * The `autocomplete-input` component is designed with accessibility at its core:
+ * - **Keyboard Navigation**: Full keyboard support for navigating suggestions (ArrowUp, ArrowDown),
+ *   selecting (Enter), and closing (Escape), all while focus remains on the input field.
+ * - **ARIA Attributes**: While the `autocomplete-input` manages ARIA attributes related to the popover's
+ *   state, the slotted `ui-listbox` is responsible for its internal ARIA roles and states
+ *   (e.g., `role="listbox"`, `aria-activedescendant`).
+ * - **Labeling Suggestions**: It is **crucial** for accessibility that the slotted `ui-listbox`
+ *   has an `aria-label` attribute. This provides a descriptive name for the list of suggestions,
+ *   which is announced by screen readers.
  *
  * The component uses CSS anchor positioning to place the suggestions popover relative to the input.
  * Ensure your `ui-listbox` is styled appropriately for popover display (e.g., `popover="manual"`, `position-anchor`).
@@ -33,6 +43,10 @@ import type UiListbox from '../../../md/listbox/internals/Listbox.js';
  *               or behave like one (have a `value` property and dispatch `input`, `focus`, `blur`, and `keydown`
  *               events).
  * @slot suggestions - The `ui-listbox` element containing `ui-list-item` elements as suggestions.
+ * @slot anchor - An optional element that points to element that will be used as the anchor for the popover.
+ *                This is useful if you want to position the suggestions relative to a different element than the input.
+ *                If not provided, the input element will be used as the anchor.
+ * @slot Any additional content that should be rendered inside the component.
  *
  * @fires autocomplete - Dispatched when a suggestion is selected by the user (e.g., via click or Enter key).
  * The `event.detail` object contains:
@@ -47,6 +61,12 @@ import type UiListbox from '../../../md/listbox/internals/Listbox.js';
  *     <ui-list-item data-value="banana">Banana</ui-list-item>
  *     <ui-list-item data-value="cherry">Cherry</ui-list-item>
  *   </ui-listbox>
+ *   <!-- With aria-label for accessibility -->
+ *   <ui-listbox slot="suggestions" aria-label="Fruit suggestions">
+ *     <ui-list-item data-value="apple">Apple</ui-list-item>
+ *     <ui-list-item data-value="banana">Banana</ui-list-item>
+ *     <ui-list-item data-value="cherry">Cherry</ui-list-item>
+ *   </ui-listbox>
  * </autocomplete-input>
  *
  * <script>
@@ -66,7 +86,7 @@ import type UiListbox from '../../../md/listbox/internals/Listbox.js';
  * ```html
  * <autocomplete-input @autocomplete="${this.handleUserSelection}">
  *   <input slot="input" type="text" placeholder="Search users..." />
- *   <ui-listbox slot="suggestions">
+ *   <ui-listbox slot="suggestions" aria-label="User suggestions">
  *     <ui-list-item data-id="1" data-name="Alice Wonderland" data-email="alice@example.com" data-index="name email">
  *       Alice Wonderland
  *       <span slot="supporting-text">alice@example.com</span>
@@ -93,6 +113,7 @@ import type UiListbox from '../../../md/listbox/internals/Listbox.js';
  * ```
  */
 export default class Autocomplete extends LitElement {
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
     /**
      * The MutationObserver instance used to watch for changes in slotted children.
      */
@@ -102,6 +123,19 @@ export default class Autocomplete extends LitElement {
      * This is used for CSS anchoring and to ensure unique IDs for accessibility.
      */
     protected accessor inputId: string;
+    /**
+     * The position area for the suggestions popover.
+     * This can be 'bottom' or 'top', depending on available space.
+     * Default is 'bottom'.
+     *
+     * Note, this is set dynamically based on available space
+     * and the position of the input element. This only sets the initial value.
+     *
+     * @attribute
+     * @type {'bottom' | 'top'}
+     * @default 'bottom'
+     */
+    accessor positionArea: 'bottom' | 'top';
     /**
      * The reference to the slotted input element.
      * This should be an `HTMLInputElement` or behave like one.
@@ -194,6 +228,20 @@ export default class Autocomplete extends LitElement {
      * Opens the suggestions popover if it's not already open and there are visible items.
      */
     protected openSuggestions(): void;
+    /**
+     * Decides the position area for the popover based on available space.
+     * It checks if there is enough space below or above the anchor element and decides accordingly.
+     *
+     * We need to do this because we set the popover height to `100%`, `-webkit-fill-available`, or `-moz-available`
+     * and it makes the popover to always open at the bottom, even if there is no space. The `position-try-fallbacks`
+     * will not work in this case, because from its perspective there is always enough space, even if that will cause
+     * the popover to have a height of just a few pixels.
+     *
+     * @param popover The popover element to position.
+     * @param anchor The anchor element relative to which the popover will be positioned.
+     * @returns 'top' or 'bottom' based on available space.
+     */
+    protected decidePositionArea(popover: HTMLElement, anchor: HTMLElement): 'top' | 'bottom';
     /**
      * Closes the suggestions popover if it's open and clears any highlighted item.
      */

package/build/src/elements/autocomplete/internals/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/elements/autocomplete/internals/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAEtE,OAAO,KAAK,SAAS,MAAM,0CAA0C,CAAA;AAIrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,UAAU;IAClD;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAErC;;;OAGG;IACM,SAAS,CAAC,QAAQ,CAAC,OAAO,SAAK;IAExC;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,EAAE,gBAAgB,GAAG,WAAW,GAAG,IAAI,CAAA;IAC1D;;;OAGG;IACH,SAAS,CAAC,cAAc,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IAE3C;;OAEG;IACH,IAAI,MAAM,IAAI,OAAO,CAEpB;IAEQ,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;cAQlB,YAAY,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI;IAKzD;;;OAGG;IACG,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAmBjC;;;;OAIG;IACH,SAAS,CAAC,eAAe,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,IAAI;IAyB5D;;OAEG;IACH,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAUrC;;OAEG;IACH,SAAS,CAAC,yBAAyB,IAAI,IAAI;IAY3C;;;;OAIG;IACH,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAwB9C;;;;OAIG;IACH,SAAS,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,SAAS,GAAG,IAAI;IAmB/D;;;OAGG;IAEH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAalC;;;;OAIG;IAEH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAMzC;;;;;;OAMG;IAEH,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA4BnD;;;OAGG;IACH,SAAS,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAazC;;;OAGG;IAEH,SAAS,CAAC,eAAe,IAAI,IAAI;IAajC;;;;OAIG;IAEH,SAAS,CAAC,sBAAsB,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAa1D;;;OAGG;IAEH,SAAS,CAAC,2BAA2B,IAAI,IAAI;IAS7C;;OAEG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;IAMjC;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAMlC;;;;OAIG;IACH,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;cA6C7B,MAAM,IAAI,cAAc;CAM5C"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/elements/autocomplete/internals/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAEtE,OAAO,KAAK,SAAS,MAAM,0CAA0C,CAAA;AAIrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+GG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,UAAU;cAC/B,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAIrE;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAErC;;;OAGG;IACM,SAAS,CAAC,QAAQ,CAAC,OAAO,SAAK;IAExC;;;;;;;;;;;OAWG;IACS,QAAQ,CAAC,YAAY,EAAE,QAAQ,GAAG,KAAK,CAAW;IAE9D;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,EAAE,gBAAgB,GAAG,WAAW,GAAG,IAAI,CAAA;IAC1D;;;OAGG;IACH,SAAS,CAAC,cAAc,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IAE3C;;OAEG;IACH,IAAI,MAAM,IAAI,OAAO,CAEpB;IAEQ,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;cAQlB,YAAY,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI;IAKzD;;;OAGG;IACG,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAYjC;;;;OAIG;IACH,SAAS,CAAC,eAAe,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,IAAI;IAyB5D;;OAEG;IACH,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAUrC;;OAEG;IACH,SAAS,CAAC,yBAAyB,IAAI,IAAI;IAY3C;;;;OAIG;IACH,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IA0B9C;;;;OAIG;IACH,SAAS,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,SAAS,GAAG,IAAI;IAmB/D;;;OAGG;IAEH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAalC;;;;OAIG;IAEH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAMzC;;;;;;OAMG;IAEH,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA4BnD;;;OAGG;IACH,SAAS,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAazC;;;OAGG;IAEH,SAAS,CAAC,eAAe,IAAI,IAAI;IAajC;;;;OAIG;IAEH,SAAS,CAAC,sBAAsB,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAa1D;;;OAGG;IAEH,SAAS,CAAC,2BAA2B,IAAI,IAAI;IAS7C;;OAEG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;IAcjC;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,kBAAkB,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;IAuBzF;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAMlC;;;;OAIG;IACH,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;cA6C7B,MAAM,IAAI,cAAc;CAmC5C"}

package/build/src/elements/autocomplete/internals/autocomplete.js

@@ -1,6 +1,6 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { html, LitElement } from 'lit';
-import { state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { bound } from '../../../decorators/bound.js';
 let Autocomplete = (() => {
     let _classSuper = LitElement;
@@ -8,6 +8,9 @@ let Autocomplete = (() => {
     let _inputId_decorators;
     let _inputId_initializers = [];
     let _inputId_extraInitializers = [];
+    let _positionArea_decorators;
+    let _positionArea_initializers = [];
+    let _positionArea_extraInitializers = [];
     let _handleInputFocus_decorators;
     let _handleInput_decorators;
     let _handleKeydown_decorators;
@@ -18,6 +21,7 @@ let Autocomplete = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _inputId_decorators = [state()];
+            _positionArea_decorators = [property()];
             _handleInputFocus_decorators = [bound];
             _handleInput_decorators = [bound];
             _handleKeydown_decorators = [bound];
@@ -25,6 +29,7 @@ let Autocomplete = (() => {
             _handleSuggestionSelect_decorators = [bound];
             _handleSuggestionsSlotChange_decorators = [bound];
             __esDecorate(this, null, _inputId_decorators, { kind: "accessor", name: "inputId", static: false, private: false, access: { has: obj => "inputId" in obj, get: obj => obj.inputId, set: (obj, value) => { obj.inputId = value; } }, metadata: _metadata }, _inputId_initializers, _inputId_extraInitializers);
+            __esDecorate(this, null, _positionArea_decorators, { kind: "accessor", name: "positionArea", static: false, private: false, access: { has: obj => "positionArea" in obj, get: obj => obj.positionArea, set: (obj, value) => { obj.positionArea = value; } }, metadata: _metadata }, _positionArea_initializers, _positionArea_extraInitializers);
             __esDecorate(this, null, _handleInputFocus_decorators, { kind: "method", name: "handleInputFocus", static: false, private: false, access: { has: obj => "handleInputFocus" in obj, get: obj => obj.handleInputFocus }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleInput_decorators, { kind: "method", name: "handleInput", static: false, private: false, access: { has: obj => "handleInput" in obj, get: obj => obj.handleInput }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleKeydown_decorators, { kind: "method", name: "handleKeydown", static: false, private: false, access: { has: obj => "handleKeydown" in obj, get: obj => obj.handleKeydown }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -33,14 +38,25 @@ let Autocomplete = (() => {
             __esDecorate(this, null, _handleSuggestionsSlotChange_decorators, { kind: "method", name: "handleSuggestionsSlotChange", static: false, private: false, access: { has: obj => "handleSuggestionsSlotChange" in obj, get: obj => obj.handleSuggestionsSlotChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        createRenderRoot() {
+            return this;
+        }
         /**
          * The MutationObserver instance used to watch for changes in slotted children.
          */
         observer = __runInitializers(this, _instanceExtraInitializers);
         #inputId_accessor_storage = __runInitializers(this, _inputId_initializers, ''
         /**
-         * The reference to the slotted input element.
-         * This should be an `HTMLInputElement` or behave like one.
+         * The position area for the suggestions popover.
+         * This can be 'bottom' or 'top', depending on available space.
+         * Default is 'bottom'.
+         *
+         * Note, this is set dynamically based on available space
+         * and the position of the input element. This only sets the initial value.
+         *
+         * @attribute
+         * @type {'bottom' | 'top'}
+         * @default 'bottom'
          */
         );
         /**
@@ -49,11 +65,31 @@ let Autocomplete = (() => {
          */
         get inputId() { return this.#inputId_accessor_storage; }
         set inputId(value) { this.#inputId_accessor_storage = value; }
+        #positionArea_accessor_storage = (__runInitializers(this, _inputId_extraInitializers), __runInitializers(this, _positionArea_initializers, 'bottom'
         /**
          * The reference to the slotted input element.
          * This should be an `HTMLInputElement` or behave like one.
          */
-        inputRef = __runInitializers(this, _inputId_extraInitializers);
+        ));
+        /**
+         * The position area for the suggestions popover.
+         * This can be 'bottom' or 'top', depending on available space.
+         * Default is 'bottom'.
+         *
+         * Note, this is set dynamically based on available space
+         * and the position of the input element. This only sets the initial value.
+         *
+         * @attribute
+         * @type {'bottom' | 'top'}
+         * @default 'bottom'
+         */
+        get positionArea() { return this.#positionArea_accessor_storage; }
+        set positionArea(value) { this.#positionArea_accessor_storage = value; }
+        /**
+         * The reference to the slotted input element.
+         * This should be an `HTMLInputElement` or behave like one.
+         */
+        inputRef = __runInitializers(this, _positionArea_extraInitializers);
         /**
          * The reference to the slotted suggestions element, which should be a `ui-listbox`.
          * This is used to manage the suggestions popover and filtering.
@@ -69,6 +105,9 @@ let Autocomplete = (() => {
             super.connectedCallback();
             this.observer = new MutationObserver(this.handleMutations.bind(this));
             this.observer.observe(this, { childList: true });
+            if (!this.id) {
+                this.id = `autocomplete-${Math.random().toString(36).substring(2, 15)}`;
+            }
         }
         disconnectedCallback() {
             super.disconnectedCallback();
@@ -87,20 +126,13 @@ let Autocomplete = (() => {
          */
         async firstSetup() {
             await this.updateComplete;
-            const input = this.shadowRoot?.querySelector('slot[name="input"]');
-            const suggestions = this.shadowRoot?.querySelector('slot[name="suggestions"]');
+            const input = this.querySelector('[slot="input"]');
+            const suggestions = this.querySelector('[slot="suggestions"]');
             if (input) {
-                const elements = input.assignedElements();
-                if (elements.length > 0 && elements[0] instanceof HTMLElement) {
-                    this.setupInput(elements[0]);
-                }
+                this.setupInput(input);
             }
             if (suggestions) {
-                const elements = suggestions.assignedElements();
-                if (elements.length > 0 && elements[0] instanceof HTMLElement) {
-                    // Assuming the slotted element is ui-listbox or compatible
-                    this.setupSuggestions(elements[0]);
-                }
+                this.setupSuggestions(suggestions);
             }
         }
         /**
@@ -174,8 +206,10 @@ let Autocomplete = (() => {
             else {
                 this.inputId = input.id;
             }
+            const anchorElement = this.querySelector('[slot="anchor"]');
             // Ensure CSS anchor positioning can work
-            input.style.setProperty('anchor-name', `--${this.inputId}`);
+            const anchor = anchorElement || input;
+            anchor.style.setProperty('anchor-name', `--${this.inputId}`);
             this.inputRef = input; // Assuming it behaves like an input
             this.inputRef.addEventListener('focus', this.handleInputFocus);
             this.inputRef.addEventListener('input', this.handleInput);
@@ -330,9 +364,52 @@ let Autocomplete = (() => {
          * Opens the suggestions popover if it's not already open and there are visible items.
          */
         openSuggestions() {
-            if (this.suggestionsRef && !this.suggestionsRef.matches(':popover-open')) {
-                this.suggestionsRef.showPopover();
+            const popover = this.suggestionsRef;
+            if (!popover || popover.matches(':popover-open')) {
+                return;
+            }
+            // we need to open the popover first to make any measurements
+            popover.showPopover();
+            const anchor = this.querySelector('[slot="anchor"]') || this.inputRef;
+            if (!anchor) {
+                return;
             }
+            this.positionArea = this.decidePositionArea(popover, anchor);
+        }
+        /**
+         * Decides the position area for the popover based on available space.
+         * It checks if there is enough space below or above the anchor element and decides accordingly.
+         *
+         * We need to do this because we set the popover height to `100%`, `-webkit-fill-available`, or `-moz-available`
+         * and it makes the popover to always open at the bottom, even if there is no space. The `position-try-fallbacks`
+         * will not work in this case, because from its perspective there is always enough space, even if that will cause
+         * the popover to have a height of just a few pixels.
+         *
+         * @param popover The popover element to position.
+         * @param anchor The anchor element relative to which the popover will be positioned.
+         * @returns 'top' or 'bottom' based on available space.
+         */
+        decidePositionArea(popover, anchor) {
+            let newArea = 'bottom';
+            // Get bounding rectangles
+            const anchorRect = anchor.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const spaceBelow = viewportHeight - anchorRect.bottom;
+            const spaceAbove = anchorRect.top;
+            // Estimate a typical/minimum height the popover might need to be useful
+            const popoverThresholdHeight = popover.scrollHeight || 150;
+            if (spaceBelow < popoverThresholdHeight && spaceAbove > spaceBelow && spaceAbove > popoverThresholdHeight) {
+                // Not enough space below, but more (and sufficient) space above
+                newArea = 'top';
+            }
+            else if (spaceBelow < popoverThresholdHeight && spaceAbove > spaceBelow) {
+                // Not enough space below, and space above is more than space below (even if not "sufficient")
+                newArea = 'top';
+            }
+            else {
+                newArea = 'bottom'; // Default to bottom if enough space or if top is worse
+            }
+            return newArea;
         }
         /**
          * Closes the suggestions popover if it's open and clears any highlighted item.
@@ -390,9 +467,38 @@ let Autocomplete = (() => {
             }
         }
         render() {
+            const { id, positionArea } = this;
             return html `
-      <slot name="input"></slot>
-      <slot name="suggestions"></slot>
+      <style>
+        #${id} {
+          display: inline-block;
+
+          [popover] {
+            border: none;
+            margin: 0;
+            position-area: ${positionArea};
+            position-try-fallbacks:
+              flip-block,
+              flip-inline,
+              flip-block flip-inline;
+            width: anchor-size(width);
+
+            box-shadow: var(--md-sys-elevation-1);
+            border-radius: var(--md-sys-shape-corner-medium);
+
+            overflow: auto;
+            /* We try 100% and then vendor options which are more accurate */
+            height: 100%;
+            height: -webkit-fill-available;
+            height: -moz-available;
+            max-height: max-content;
+          }
+
+          [popover]:not(:popover-open) {
+            display: none;
+          }
+        }
+      </style>
     `;
         }
     };
@@ -417,10 +523,20 @@ let Autocomplete = (() => {
  *   - If a `ui-list-item` has a `data-index` attribute (e.g., `data-index="name email"`), filtering will search
  *     within the specified `data-*` attributes (e.g., `data-name`, `data-email`).
  * - **Mutation Awareness**: Reacts to changes in slotted suggestions, re-filtering them if necessary.
- * - **Event-Driven**: Notifies the parent application via an `autocomplete` event when a suggestion is selected,
- *   without directly modifying the input's value. This allows the application author to control the input update logic.
- * - **Accessibility**: Designed with accessibility in mind, ensuring keyboard navigability and proper ARIA attribute
- *   management (handled by `ui-listbox`).
+ * - **Event-Driven**: Notifies the application via an `autocomplete` event when a suggestion is selected.
+ *   The component itself does not modify the input's value, giving the application author full control.
+ *
+ * ### Accessibility
+ *
+ * The `autocomplete-input` component is designed with accessibility at its core:
+ * - **Keyboard Navigation**: Full keyboard support for navigating suggestions (ArrowUp, ArrowDown),
+ *   selecting (Enter), and closing (Escape), all while focus remains on the input field.
+ * - **ARIA Attributes**: While the `autocomplete-input` manages ARIA attributes related to the popover's
+ *   state, the slotted `ui-listbox` is responsible for its internal ARIA roles and states
+ *   (e.g., `role="listbox"`, `aria-activedescendant`).
+ * - **Labeling Suggestions**: It is **crucial** for accessibility that the slotted `ui-listbox`
+ *   has an `aria-label` attribute. This provides a descriptive name for the list of suggestions,
+ *   which is announced by screen readers.
  *
  * The component uses CSS anchor positioning to place the suggestions popover relative to the input.
  * Ensure your `ui-listbox` is styled appropriately for popover display (e.g., `popover="manual"`, `position-anchor`).
@@ -430,6 +546,10 @@ let Autocomplete = (() => {
  *               or behave like one (have a `value` property and dispatch `input`, `focus`, `blur`, and `keydown`
  *               events).
  * @slot suggestions - The `ui-listbox` element containing `ui-list-item` elements as suggestions.
+ * @slot anchor - An optional element that points to element that will be used as the anchor for the popover.
+ *                This is useful if you want to position the suggestions relative to a different element than the input.
+ *                If not provided, the input element will be used as the anchor.
+ * @slot Any additional content that should be rendered inside the component.
  *
  * @fires autocomplete - Dispatched when a suggestion is selected by the user (e.g., via click or Enter key).
  * The `event.detail` object contains:
@@ -444,6 +564,12 @@ let Autocomplete = (() => {
  *     <ui-list-item data-value="banana">Banana</ui-list-item>
  *     <ui-list-item data-value="cherry">Cherry</ui-list-item>
  *   </ui-listbox>
+ *   <!-- With aria-label for accessibility -->
+ *   <ui-listbox slot="suggestions" aria-label="Fruit suggestions">
+ *     <ui-list-item data-value="apple">Apple</ui-list-item>
+ *     <ui-list-item data-value="banana">Banana</ui-list-item>
+ *     <ui-list-item data-value="cherry">Cherry</ui-list-item>
+ *   </ui-listbox>
  * </autocomplete-input>
  *
  * <script>
@@ -463,7 +589,7 @@ let Autocomplete = (() => {
  * ```html
  * <autocomplete-input @autocomplete="${this.handleUserSelection}">
  *   <input slot="input" type="text" placeholder="Search users..." />
- *   <ui-listbox slot="suggestions">
+ *   <ui-listbox slot="suggestions" aria-label="User suggestions">
  *     <ui-list-item data-id="1" data-name="Alice Wonderland" data-email="alice@example.com" data-index="name email">
  *       Alice Wonderland
  *       <span slot="supporting-text">alice@example.com</span>

package/build/src/elements/autocomplete/internals/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../../../src/elements/autocomplete/internals/autocomplete.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkC,MAAM,KAAK,CAAA;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGzC,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;;sBA8FV,UAAU;;;;;;;;;;;iBAA/B,YAAa,SAAQ,WAAU;;;mCAUjD,KAAK,EAAE;4CAiLP,KAAK;uCAmBL,KAAK;yCAcL,KAAK;2CAkDL,KAAK;kDAmBL,KAAK;uDAkBL,KAAK;YAzSG,0KAAmB,OAAO,6BAAP,OAAO,yFAAK;YAkLxC,mMAAU,gBAAgB,6DAWzB;YAQD,oLAAU,WAAW,6DAIpB;YAUD,0LAAU,aAAa,6DA0BtB;YAwBD,gMAAU,eAAe,6DAWxB;YAQD,qNAAU,sBAAsB,6DAW/B;YAOD,oOAAU,2BAA2B,6DAOpC;;;QA1TD;;WAEG;QACO,QAAQ,GAJC,mDAAY,CAIM;QAM5B,2EAA6B,EAAE;QAExC;;;WAGG;UALqC;QAJxC;;;WAGG;QACM,IAAmB,OAAO,6CAAK;QAA/B,IAAmB,OAAO,mDAAK;QAExC;;;WAGG;QACO,QAAQ,uDAAwC;QAC1D;;;WAGG;QACO,cAAc,CAAmB;QAE3C;;WAEG;QACH,IAAI,MAAM;YACR,OAAO,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,eAAe,CAAC,IAAI,KAAK,CAAA;QAC/D,CAAC;QAEQ,iBAAiB;YACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACrE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;QAClD,CAAC;QAEQ,oBAAoB;YAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;YAC5B,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAA;YAC3B,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;YACzB,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC1B,IAAI,CAAC,yBAAyB,EAAE,CAAA;QAClC,CAAC;QAEkB,YAAY,CAAC,EAAkB;YAChD,KAAK,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA;YACtB,IAAI,CAAC,UAAU,EAAE,CAAA;QACnB,CAAC;QAED;;;WAGG;QACH,KAAK,CAAC,UAAU;YACd,MAAM,IAAI,CAAC,cAAc,CAAA;YACzB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAA2B,CAAA;YAC5F,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,0BAA0B,CAA2B,CAAA;YACxG,IAAI,KAAK,EAAE,CAAC;gBACV,MAAM,QAAQ,GAAG,KAAK,CAAC,gBAAgB,EAAE,CAAA;gBACzC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,YAAY,WAAW,EAAE,CAAC;oBAC9D,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;gBAC9B,CAAC;YACH,CAAC;YACD,IAAI,WAAW,EAAE,CAAC;gBAChB,MAAM,QAAQ,GAAG,WAAW,CAAC,gBAAgB,EAAE,CAAA;gBAC/C,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,YAAY,WAAW,EAAE,CAAC;oBAC9D,2DAA2D;oBAC3D,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAc,CAAC,CAAA;gBACjD,CAAC;YACH,CAAC;QACH,CAAC;QAED;;;;WAIG;QACO,eAAe,CAAC,SAA2B;YACnD,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;gBACjC,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;oBAClC,KAAK,MAAM,IAAI,IAAI,QAAQ,CAAC,YAAY,EAAE,CAAC;wBACzC,IAAI,IAAI,YAAY,WAAW,EAAE,CAAC;4BAChC,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;gCACpD,IAAI,CAAC,mBAAmB,EAAE,CAAA;4BAC5B,CAAC;iCAAM,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE,CAAC;gCACvE,IAAI,CAAC,yBAAyB,EAAE,CAAA;4BAClC,CAAC;wBACH,CAAC;oBACH,CAAC;oBACD,KAAK,MAAM,IAAI,IAAI,QAAQ,CAAC,UAAU,EAAE,CAAC;wBACvC,IAAI,IAAI,YAAY,WAAW,EAAE,CAAC;4BAChC,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gCAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;4BACvB,CAAC;iCAAM,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE,CAAC;gCACvC,IAAI,CAAC,gBAAgB,CAAC,IAAiB,CAAC,CAAA;4BAC1C,CAAC;wBACH,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAED;;WAEG;QACO,mBAAmB;YAC3B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;gBACjE,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;gBAC5D,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAA8B,CAAC,CAAA;gBACjF,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;YACjE,CAAC;YACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACtB,CAAC;QAED;;WAEG;QACO,yBAAyB;YACjC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,sBAAuC,CAAC,CAAA;gBAC/F,oEAAoE;gBACpE,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAA;gBACxF,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;oBACjD,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,CAAA;gBACnC,CAAC;YACH,CAAC;YACD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;QAC5B,CAAC;QAED;;;;WAIG;QACO,UAAU,CAAC,KAAkB;YACrC,IAAI,CAAC,mBAAmB,EAAE,CAAA,CAAC,0BAA0B;YACrD,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;gBACd,IAAI,CAAC,OAAO,GAAG,sBAAsB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAA;gBAClF,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA;YACzB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,EAAE,CAAA;YACzB,CAAC;YACD,yCAAyC;YACzC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA;YAE3D,IAAI,CAAC,QAAQ,GAAG,KAAyB,CAAA,CAAC,oCAAoC;YAC9E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;YAC9D,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;YACzD,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAA8B,CAAC,CAAA;YAC9E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;YAE5D,6DAA6D;YAC7D,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA;gBAC7E,IAAI,CAAC,iBAAiB,CAAE,IAAI,CAAC,QAA6B,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA;YACzE,CAAC;QACH,CAAC;QAED;;;;WAIG;QACO,gBAAgB,CAAC,kBAA6B;YACtD,IAAI,CAAC,yBAAyB,EAAE,CAAA,CAAC,0BAA0B;YAE3D,IAAI,CAAC,cAAc,GAAG,kBAAkB,CAAA;YACxC,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,QAAQ,CAAA;YACtC,IAAI,CAAC,cAAc,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAA,CAAC,uBAAuB;YAEzD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA;YAC/E,CAAC;YAED,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,sBAAuC,CAAC,CAAA;YAC5F,qFAAqF;YACrF,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAA;YAErF,iBAAiB;YACjB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAE,IAAI,CAAC,QAA6B,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;QACxF,CAAC;QAED;;;WAGG;QAEO,gBAAgB;YACxB,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,KAAK,CAAA;YACxC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACjC,iCAAiC;gBACjC,OAAM;YACR,CAAC;YACD,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YACjD,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,eAAe,EAAE,CAAA;gBACtB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAE,IAAI,CAAC,QAA6B,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;YACxF,CAAC;QACH,CAAC;QAED;;;;WAIG;QAEO,WAAW,CAAC,KAAY;YAChC,IAAI,CAAC,eAAe,EAAE,CAAA;YACtB,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAA;YACtD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;QAC/B,CAAC;QAED;;;;;;WAMG;QAEO,aAAa,CAAC,KAAoB;YAC1C,IAAI,CAAC,IAAI,CAAC,cAAc;gBAAE,OAAM;YAEhC,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAA;YACrB,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,eAAe,CAAC,CAAA;YAEtE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC3C,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;oBACvB,IAAI,CAAC,eAAe,EAAE,CAAA;oBACtB,2DAA2D;oBAC3D,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAA;gBACrD,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;gBACxB,CAAC;YACH,CAAC;iBAAM,IAAI,GAAG,KAAK,OAAO,EAAE,CAAC;gBAC3B,IAAI,iBAAiB,IAAI,IAAI,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAC;oBAC/D,KAAK,CAAC,cAAc,EAAE,CAAA;oBACtB,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;gBACzE,CAAC;YACH,CAAC;iBAAM,IAAI,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC5B,IAAI,iBAAiB,EAAE,CAAC;oBACtB,KAAK,CAAC,cAAc,EAAE,CAAA;oBACtB,IAAI,CAAC,gBAAgB,EAAE,CAAA;gBACzB,CAAC;YACH,CAAC;QACH,CAAC;QAED;;;WAGG;QACO,YAAY,CAAC,GAAW;YAChC,IAAI,CAAC,IAAI,CAAC,cAAc;gBAAE,OAAM;YAChC,QAAQ,GAAG,EAAE,CAAC;gBACZ,KAAK,WAAW;oBACd,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,CAAA;oBACnC,MAAK;gBACP,KAAK,SAAS;oBACZ,IAAI,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAA;oBACvC,MAAK;gBACP,gFAAgF;YAClF,CAAC;QACH,CAAC;QAED;;;WAGG;QAEO,eAAe;YACvB,kEAAkE;YAClE,kGAAkG;YAClG,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IACE,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;oBAChD,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,EAC/E,CAAC;oBACD,IAAI,CAAC,gBAAgB,EAAE,CAAA;gBACzB,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;QAED;;;;WAIG;QAEO,sBAAsB,CAAC,KAAkB;YACjD,KAAK,CAAC,eAAe,EAAE,CAAA;YACvB,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAkB,CAAA;YACpD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE;gBAC9B,OAAO,EAAE,KAAK;gBACd,QAAQ,EAAE,KAAK;aAChB,CAAC,CACH,CAAA;YACD,IAAI,CAAC,gBAAgB,EAAE,CAAA;QACzB,CAAC;QAED;;;WAGG;QAEO,2BAA2B;YACnC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAE,IAAI,CAAC,QAA6B,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;YAC5E,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAM;YACR,CAAC;YACD,IAAI,CAAC,eAAe,EAAE,CAAA;YACtB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;QAC/B,CAAC;QAED;;WAEG;QACO,eAAe;YACvB,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;gBACzE,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,CAAA;YACnC,CAAC;QACH,CAAC;QAED;;WAEG;QACO,gBAAgB;YACxB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;gBACxE,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,CAAA;YACnC,CAAC;QACH,CAAC;QAED;;;;WAIG;QACO,iBAAiB,CAAC,KAAa;YACvC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;gBACzB,OAAM;YACR,CAAC;YAED,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAA;YACjD,IAAI,gBAAgB,GAAsB,IAAI,CAAA;YAE9C,0FAA0F;YAC1F,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAqB,CAAA;YAEvD,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;gBACzB,IAAI,OAAO,GAAG,KAAK,CAAA;gBACnB,IAAI,cAAc,KAAK,EAAE,EAAE,CAAC;oBAC1B,OAAO,GAAG,IAAI,CAAA;gBAChB,CAAC;qBAAM,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;oBAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;oBACjE,KAAK,MAAM,KAAK,IAAI,WAAW,EAAE,CAAC;wBAChC,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,CAAA;wBAC/C,IAAI,aAAa,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC;4BACzD,OAAO,GAAG,IAAI,CAAA;4BACd,MAAK;wBACP,CAAC;oBACH,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,CAAA;oBAClE,OAAO,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAA;gBAChE,CAAC;gBACD,IAAI,CAAC,MAAM,GAAG,CAAC,OAAO,CAAA;gBACtB,IAAI,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBACjC,gBAAgB,GAAG,IAAI,CAAA;gBACzB,CAAC;YACH,CAAC;YAED,oGAAoG;YACpG,IAAI,IAAI,CAAC,cAAc,CAAC,iBAAiB,EAAE,MAAM,EAAE,CAAC;gBAClD,qFAAqF;gBACrF,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAA;YACtD,CAAC;YACD,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACtB,gCAAgC;gBAChC,IAAI,CAAC,gBAAgB,EAAE,CAAA;YACzB,CAAC;QACH,CAAC;QAEkB,MAAM;YACvB,OAAO,IAAI,CAAA;;;KAGV,CAAA;QACH,CAAC;;;AAleH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FG;AACH,4BAuYC","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { state } from 'lit/decorators.js'\nimport type UiListbox from '../../../md/listbox/internals/Listbox.js'\nimport type UiListItem from '../../../md/list/internals/ListItem.js'\nimport { bound } from '../../../decorators/bound.js'\n\n/**\n * An accessible and performant autocomplete component that enhances a text input with a list of suggestions.\n *\n * The `autocomplete-input` component provides a flexible way to add autocomplete functionality\n * to any text input. It works by coordinating a slotted input element with a slotted `ui-listbox`\n * containing suggestions.\n *\n * Key Features:\n *\n * - **Popover Management**: Automatically shows and hides the suggestions popover based on input focus\n *   and user interaction.\n * - **Keyboard Navigation**: Allows users to navigate suggestions using ArrowUp, ArrowDown keys directly\n *   from the input. Enter selects a suggestion, and Escape closes the popover.\n *   The suggestion list itself never gains focus.\n * - **Dynamic Filtering**: Filters the list of suggestions as the user types into the input. Items not matching\n *   the query are hidden (not removed).\n *   - By default, filtering checks `item.dataset.value` and then `item.textContent`.\n *   - If a `ui-list-item` has a `data-index` attribute (e.g., `data-index=\"name email\"`), filtering will search\n *     within the specified `data-*` attributes (e.g., `data-name`, `data-email`).\n * - **Mutation Awareness**: Reacts to changes in slotted suggestions, re-filtering them if necessary.\n * - **Event-Driven**: Notifies the parent application via an `autocomplete` event when a suggestion is selected,\n *   without directly modifying the input's value. This allows the application author to control the input update logic.\n * - **Accessibility**: Designed with accessibility in mind, ensuring keyboard navigability and proper ARIA attribute\n *   management (handled by `ui-listbox`).\n *\n * The component uses CSS anchor positioning to place the suggestions popover relative to the input.\n * Ensure your `ui-listbox` is styled appropriately for popover display (e.g., `popover=\"manual\"`, `position-anchor`).\n * The component will manage `showPopover()` and `hidePopover()` calls.\n *\n * @slot input - The input element that will be used for autocomplete. This element should be an `HTMLInputElement`\n *               or behave like one (have a `value` property and dispatch `input`, `focus`, `blur`, and `keydown`\n *               events).\n * @slot suggestions - The `ui-listbox` element containing `ui-list-item` elements as suggestions.\n *\n * @fires autocomplete - Dispatched when a suggestion is selected by the user (e.g., via click or Enter key).\n * The `event.detail` object contains:\n *   - `item`: The selected `UiListItem` instance.\n *\n * @example\n * ```html\n * <autocomplete-input @autocomplete=\"${this.handleAutocompleteSelection}\">\n *   <input slot=\"input\" type=\"text\" placeholder=\"Search fruits...\" />\n *   <ui-listbox slot=\"suggestions\">\n *     <ui-list-item data-value=\"apple\">Apple</ui-list-item>\n *     <ui-list-item data-value=\"banana\">Banana</ui-list-item>\n *     <ui-list-item data-value=\"cherry\">Cherry</ui-list-item>\n *   </ui-listbox>\n * </autocomplete-input>\n *\n * <script>\n *   // In your component/script\n *   handleAutocompleteSelection(event) {\n *     const selectedItem = event.detail.item;\n *     const inputElement = this.shadowRoot.querySelector('input[slot=\"input\"]');\n *     if (inputElement) {\n *       inputElement.value = selectedItem.dataset.value || selectedItem.textContent;\n *     }\n *     console.log('Selected:', selectedItem.dataset.value);\n *   }\n * </script>\n * ```\n *\n * @example Dynamic filtering with `data-index`\n * ```html\n * <autocomplete-input @autocomplete=\"${this.handleUserSelection}\">\n *   <input slot=\"input\" type=\"text\" placeholder=\"Search users...\" />\n *   <ui-listbox slot=\"suggestions\">\n *     <ui-list-item data-id=\"1\" data-name=\"Alice Wonderland\" data-email=\"alice@example.com\" data-index=\"name email\">\n *       Alice Wonderland\n *       <span slot=\"supporting-text\">alice@example.com</span>\n *     </ui-list-item>\n *     <ui-list-item data-id=\"2\" data-name=\"Bob The Builder\" data-email=\"bob@example.com\" data-index=\"name email\">\n *       Bob The Builder\n *       <span slot=\"supporting-text\">bob@example.com</span>\n *     </ui-list-item>\n *   </ui-listbox>\n * </autocomplete-input>\n *\n * <script>\n *   // In your component/script\n *   handleUserSelection(event) {\n *     const selectedItem = event.detail.item;\n *     const inputElement = this.shadowRoot.querySelector('input[slot=\"input\"]');\n *     if (inputElement) {\n *       // You might want to display the name, but store the ID\n *       inputElement.value = selectedItem.dataset.name;\n *     }\n *     console.log('Selected user ID:', selectedItem.dataset.id);\n *   }\n * </script>\n * ```\n */\nexport default class Autocomplete extends LitElement {\n  /**\n   * The MutationObserver instance used to watch for changes in slotted children.\n   */\n  protected observer?: MutationObserver\n\n  /**\n   * The ID of the input element, generated if not provided.\n   * This is used for CSS anchoring and to ensure unique IDs for accessibility.\n   */\n  @state() protected accessor inputId = ''\n\n  /**\n   * The reference to the slotted input element.\n   * This should be an `HTMLInputElement` or behave like one.\n   */\n  protected inputRef?: HTMLInputElement | HTMLElement | null\n  /**\n   * The reference to the slotted suggestions element, which should be a `ui-listbox`.\n   * This is used to manage the suggestions popover and filtering.\n   */\n  protected suggestionsRef?: UiListbox | null\n\n  /**\n   * Checks if the suggestions popover is currently open.\n   */\n  get opened(): boolean {\n    return this.suggestionsRef?.matches(':popover-open') || false\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.observer = new MutationObserver(this.handleMutations.bind(this))\n    this.observer.observe(this, { childList: true })\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.observer?.disconnect()\n    this.observer = undefined\n    this.clearInputListeners()\n    this.clearSuggestionsListeners()\n  }\n\n  protected override firstUpdated(cp: PropertyValues): void {\n    super.firstUpdated(cp)\n    this.firstSetup()\n  }\n\n  /**\n   * Performs initial setup after the first update, ensuring that slotted input\n   * and suggestions elements are configured.\n   */\n  async firstSetup(): Promise<void> {\n    await this.updateComplete\n    const input = this.shadowRoot?.querySelector('slot[name=\"input\"]') as HTMLSlotElement | null\n    const suggestions = this.shadowRoot?.querySelector('slot[name=\"suggestions\"]') as HTMLSlotElement | null\n    if (input) {\n      const elements = input.assignedElements()\n      if (elements.length > 0 && elements[0] instanceof HTMLElement) {\n        this.setupInput(elements[0])\n      }\n    }\n    if (suggestions) {\n      const elements = suggestions.assignedElements()\n      if (elements.length > 0 && elements[0] instanceof HTMLElement) {\n        // Assuming the slotted element is ui-listbox or compatible\n        this.setupSuggestions(elements[0] as UiListbox)\n      }\n    }\n  }\n\n  /**\n   * Handles mutations observed on the component's slotted children.\n   * This is used to set up or tear down input and suggestions elements when they are added or removed.\n   * @param mutations An array of MutationRecord objects.\n   */\n  protected handleMutations(mutations: MutationRecord[]): void {\n    for (const mutation of mutations) {\n      if (mutation.type === 'childList') {\n        for (const node of mutation.removedNodes) {\n          if (node instanceof HTMLElement) {\n            if (node.slot === 'input' && this.inputRef === node) {\n              this.clearInputListeners()\n            } else if (node.slot === 'suggestions' && this.suggestionsRef === node) {\n              this.clearSuggestionsListeners()\n            }\n          }\n        }\n        for (const node of mutation.addedNodes) {\n          if (node instanceof HTMLElement) {\n            if (node.slot === 'input') {\n              this.setupInput(node)\n            } else if (node.slot === 'suggestions') {\n              this.setupSuggestions(node as UiListbox)\n            }\n          }\n        }\n      }\n    }\n  }\n\n  /**\n   * Clears event listeners from the current input reference and resets it.\n   */\n  protected clearInputListeners(): void {\n    if (this.inputRef) {\n      this.inputRef.removeEventListener('focus', this.handleInputFocus)\n      this.inputRef.removeEventListener('input', this.handleInput)\n      this.inputRef.removeEventListener('keydown', this.handleKeydown as EventListener)\n      this.inputRef.removeEventListener('blur', this.handleInputBlur)\n    }\n    this.inputRef = null\n  }\n\n  /**\n   * Clears event listeners from the current suggestions reference and resets it.\n   */\n  protected clearSuggestionsListeners(): void {\n    if (this.suggestionsRef) {\n      this.suggestionsRef.removeEventListener('select', this.handleSuggestionSelect as EventListener)\n      // If ui-listbox uses a slot for its items, listen to its slotchange\n      this.suggestionsRef.removeEventListener('itemschange', this.handleSuggestionsSlotChange)\n      if (this.suggestionsRef.matches(':popover-open')) {\n        this.suggestionsRef.hidePopover()\n      }\n    }\n    this.suggestionsRef = null\n  }\n\n  /**\n   * Sets up the slotted input element.\n   * Assigns an ID if necessary, sets up CSS anchoring, and attaches event listeners.\n   * @param input The HTMLElement to be used as the input.\n   */\n  protected setupInput(input: HTMLElement): void {\n    this.clearInputListeners() // Clear any old listeners\n    if (!input.id) {\n      this.inputId = `autocomplete-input-${Math.random().toString(36).substring(2, 15)}`\n      input.id = this.inputId\n    } else {\n      this.inputId = input.id\n    }\n    // Ensure CSS anchor positioning can work\n    input.style.setProperty('anchor-name', `--${this.inputId}`)\n\n    this.inputRef = input as HTMLInputElement // Assuming it behaves like an input\n    this.inputRef.addEventListener('focus', this.handleInputFocus)\n    this.inputRef.addEventListener('input', this.handleInput)\n    this.inputRef.addEventListener('keydown', this.handleKeydown as EventListener)\n    this.inputRef.addEventListener('blur', this.handleInputBlur)\n\n    // Apply initial filtering if suggestions are already present\n    if (this.suggestionsRef) {\n      this.suggestionsRef.style.setProperty('position-anchor', `--${this.inputId}`)\n      this.filterSuggestions((this.inputRef as HTMLInputElement).value || '')\n    }\n  }\n\n  /**\n   * Sets up the slotted suggestions element (assumed to be a `UiListbox`).\n   * Configures popover behavior, CSS anchoring, and attaches event listeners.\n   * @param suggestionsElement The `UiListbox` element to be used for suggestions.\n   */\n  protected setupSuggestions(suggestionsElement: UiListbox): void {\n    this.clearSuggestionsListeners() // Clear any old listeners\n\n    this.suggestionsRef = suggestionsElement\n    this.suggestionsRef.popover = 'manual'\n    this.suggestionsRef.tabIndex = -1 // Prevent direct focus\n\n    if (this.inputId) {\n      this.suggestionsRef.style.setProperty('position-anchor', `--${this.inputId}`)\n    }\n\n    this.suggestionsRef.addEventListener('select', this.handleSuggestionSelect as EventListener)\n    // The `List` dispatches `itemschange` when the slot changes, so we can listen to it.\n    this.suggestionsRef.addEventListener('itemschange', this.handleSuggestionsSlotChange)\n\n    // Initial filter\n    this.filterSuggestions(this.inputRef ? (this.inputRef as HTMLInputElement).value : '')\n  }\n\n  /**\n   * Handles the focus event on the input element.\n   * Opens the suggestions popover if there are items to display.\n   */\n  @bound\n  protected handleInputFocus(): void {\n    const items = this.suggestionsRef?.items\n    if (!items || items.length === 0) {\n      // If no suggestions, do not open\n      return\n    }\n    const active = items.find((item) => !item.hidden)\n    if (active) {\n      this.openSuggestions()\n      this.filterSuggestions(this.inputRef ? (this.inputRef as HTMLInputElement).value : '')\n    }\n  }\n\n  /**\n   * Handles the input event on the input element.\n   * Filters suggestions based on the input query and opens/closes the popover accordingly.\n   * @param event The input event.\n   */\n  @bound\n  protected handleInput(event: Event): void {\n    this.openSuggestions()\n    const query = (event.target as HTMLInputElement).value\n    this.filterSuggestions(query)\n  }\n\n  /**\n   * Handles keydown events on the input element for navigating and selecting suggestions.\n   * - ArrowDown/ArrowUp: Navigates the suggestion list.\n   * - Enter: Selects the highlighted suggestion.\n   * - Escape: Closes the suggestions popover.\n   * @param event The keyboard event.\n   */\n  @bound\n  protected handleKeydown(event: KeyboardEvent): void {\n    if (!this.suggestionsRef) return\n\n    const { key } = event\n    const isSuggestionsOpen = this.suggestionsRef.matches(':popover-open')\n\n    if (['ArrowDown', 'ArrowUp'].includes(key)) {\n      event.preventDefault()\n      if (!isSuggestionsOpen) {\n        this.openSuggestions()\n        // Give popover a moment to open before trying to highlight\n        requestAnimationFrame(() => this.navigateList(key))\n      } else {\n        this.navigateList(key)\n      }\n    } else if (key === 'Enter') {\n      if (isSuggestionsOpen && this.suggestionsRef.highlightListItem) {\n        event.preventDefault()\n        this.suggestionsRef.notifySelect(this.suggestionsRef.highlightListItem)\n      }\n    } else if (key === 'Escape') {\n      if (isSuggestionsOpen) {\n        event.preventDefault()\n        this.closeSuggestions()\n      }\n    }\n  }\n\n  /**\n   * Navigates the suggestion list based on the pressed key.\n   * @param key The key that was pressed (ArrowDown or ArrowUp).\n   */\n  protected navigateList(key: string): void {\n    if (!this.suggestionsRef) return\n    switch (key) {\n      case 'ArrowDown':\n        this.suggestionsRef.highlightNext()\n        break\n      case 'ArrowUp':\n        this.suggestionsRef.highlightPrevious()\n        break\n      // Don't handle Home or End keys here, as they break the usability of the input.\n    }\n  }\n\n  /**\n   * Handles the blur event on the input element.\n   * Closes the suggestions popover if focus moves outside the autocomplete component.\n   */\n  @bound\n  protected handleInputBlur(): void {\n    // We use the manual popover mode, so we need to close suggestions\n    // when the input loses focus, but only the current active element is not part of the suggestions.\n    requestAnimationFrame(() => {\n      if (\n        !this.inputRef?.contains(document.activeElement) &&\n        (!this.suggestionsRef || !this.suggestionsRef.contains(document.activeElement))\n      ) {\n        this.closeSuggestions()\n      }\n    })\n  }\n\n  /**\n   * Handles the `select` event dispatched by the `ui-listbox` when a suggestion is chosen.\n   * Dispatches an `autocomplete` event and closes the popover.\n   * @param event The custom event from `ui-listbox`.\n   */\n  @bound\n  protected handleSuggestionSelect(event: CustomEvent): void {\n    event.stopPropagation()\n    const selectedItem = event.detail.item as UiListItem\n    this.dispatchEvent(\n      new CustomEvent('autocomplete', {\n        detail: { item: selectedItem },\n        bubbles: false,\n        composed: false,\n      })\n    )\n    this.closeSuggestions()\n  }\n\n  /**\n   * Handles the `itemschange` event dispatched by the `ui-listbox` when its slotted items change.\n   * Re-filters the suggestions.\n   */\n  @bound\n  protected handleSuggestionsSlotChange(): void {\n    const value = this.inputRef ? (this.inputRef as HTMLInputElement).value : ''\n    if (!value) {\n      return\n    }\n    this.openSuggestions()\n    this.filterSuggestions(value)\n  }\n\n  /**\n   * Opens the suggestions popover if it's not already open and there are visible items.\n   */\n  protected openSuggestions(): void {\n    if (this.suggestionsRef && !this.suggestionsRef.matches(':popover-open')) {\n      this.suggestionsRef.showPopover()\n    }\n  }\n\n  /**\n   * Closes the suggestions popover if it's open and clears any highlighted item.\n   */\n  protected closeSuggestions(): void {\n    if (this.suggestionsRef && this.suggestionsRef.matches(':popover-open')) {\n      this.suggestionsRef.hidePopover()\n    }\n  }\n\n  /**\n   * Filters the suggestions based on the provided query.\n   * Hides items that do not match and manages the highlighted item state.\n   * @param query The search query string.\n   */\n  protected filterSuggestions(query: string): void {\n    if (!this.suggestionsRef) {\n      return\n    }\n\n    const lowerCaseQuery = query.toLowerCase().trim()\n    let firstVisibleItem: UiListItem | null = null\n\n    // The `items` getter in `List.ts` (parent of UiListbox) correctly gets assigned elements.\n    const items = this.suggestionsRef.items as UiListItem[]\n\n    for (const item of items) {\n      let matches = false\n      if (lowerCaseQuery === '') {\n        matches = true\n      } else if (item.dataset.index) {\n        const indexFields = item.dataset.index.split(' ').filter(Boolean)\n        for (const field of indexFields) {\n          const valueToSearch = item.dataset[field] || ''\n          if (valueToSearch.toLowerCase().includes(lowerCaseQuery)) {\n            matches = true\n            break\n          }\n        }\n      } else {\n        const valueToSearch = item.dataset.value || item.textContent || ''\n        matches = valueToSearch.toLowerCase().includes(lowerCaseQuery)\n      }\n      item.hidden = !matches\n      if (matches && !firstVisibleItem) {\n        firstVisibleItem = item\n      }\n    }\n\n    // If the currently highlighted item is now hidden, try to highlight the first visible one or clear.\n    if (this.suggestionsRef.highlightListItem?.hidden) {\n      // the highlightListItem clears the highlighted item if it is not passed an argument.\n      this.suggestionsRef?.highlightItem(firstVisibleItem)\n    }\n    if (!firstVisibleItem) {\n      // Close if no items are visible\n      this.closeSuggestions()\n    }\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n      <slot name=\"input\"></slot>\n      <slot name=\"suggestions\"></slot>\n    `\n  }\n}\n"]}
+{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../../../src/elements/autocomplete/internals/autocomplete.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport type UiListbox from '../../../md/listbox/internals/Listbox.js'\nimport type UiListItem from '../../../md/list/internals/ListItem.js'\nimport { bound } from '../../../decorators/bound.js'\n\n/**\n * An accessible and performant autocomplete component that enhances a text input with a list of suggestions.\n *\n * The `autocomplete-input` component provides a flexible way to add autocomplete functionality\n * to any text input. It works by coordinating a slotted input element with a slotted `ui-listbox`\n * containing suggestions.\n *\n * Key Features:\n *\n * - **Popover Management**: Automatically shows and hides the suggestions popover based on input focus\n *   and user interaction.\n * - **Keyboard Navigation**: Allows users to navigate suggestions using ArrowUp, ArrowDown keys directly\n *   from the input. Enter selects a suggestion, and Escape closes the popover.\n *   The suggestion list itself never gains focus.\n * - **Dynamic Filtering**: Filters the list of suggestions as the user types into the input. Items not matching\n *   the query are hidden (not removed).\n *   - By default, filtering checks `item.dataset.value` and then `item.textContent`.\n *   - If a `ui-list-item` has a `data-index` attribute (e.g., `data-index=\"name email\"`), filtering will search\n *     within the specified `data-*` attributes (e.g., `data-name`, `data-email`).\n * - **Mutation Awareness**: Reacts to changes in slotted suggestions, re-filtering them if necessary.\n * - **Event-Driven**: Notifies the application via an `autocomplete` event when a suggestion is selected.\n *   The component itself does not modify the input's value, giving the application author full control.\n *\n * ### Accessibility\n *\n * The `autocomplete-input` component is designed with accessibility at its core:\n * - **Keyboard Navigation**: Full keyboard support for navigating suggestions (ArrowUp, ArrowDown),\n *   selecting (Enter), and closing (Escape), all while focus remains on the input field.\n * - **ARIA Attributes**: While the `autocomplete-input` manages ARIA attributes related to the popover's\n *   state, the slotted `ui-listbox` is responsible for its internal ARIA roles and states\n *   (e.g., `role=\"listbox\"`, `aria-activedescendant`).\n * - **Labeling Suggestions**: It is **crucial** for accessibility that the slotted `ui-listbox`\n *   has an `aria-label` attribute. This provides a descriptive name for the list of suggestions,\n *   which is announced by screen readers.\n *\n * The component uses CSS anchor positioning to place the suggestions popover relative to the input.\n * Ensure your `ui-listbox` is styled appropriately for popover display (e.g., `popover=\"manual\"`, `position-anchor`).\n * The component will manage `showPopover()` and `hidePopover()` calls.\n *\n * @slot input - The input element that will be used for autocomplete. This element should be an `HTMLInputElement`\n *               or behave like one (have a `value` property and dispatch `input`, `focus`, `blur`, and `keydown`\n *               events).\n * @slot suggestions - The `ui-listbox` element containing `ui-list-item` elements as suggestions.\n * @slot anchor - An optional element that points to element that will be used as the anchor for the popover.\n *                This is useful if you want to position the suggestions relative to a different element than the input.\n *                If not provided, the input element will be used as the anchor.\n * @slot Any additional content that should be rendered inside the component.\n *\n * @fires autocomplete - Dispatched when a suggestion is selected by the user (e.g., via click or Enter key).\n * The `event.detail` object contains:\n *   - `item`: The selected `UiListItem` instance.\n *\n * @example\n * ```html\n * <autocomplete-input @autocomplete=\"${this.handleAutocompleteSelection}\">\n *   <input slot=\"input\" type=\"text\" placeholder=\"Search fruits...\" />\n *   <ui-listbox slot=\"suggestions\">\n *     <ui-list-item data-value=\"apple\">Apple</ui-list-item>\n *     <ui-list-item data-value=\"banana\">Banana</ui-list-item>\n *     <ui-list-item data-value=\"cherry\">Cherry</ui-list-item>\n *   </ui-listbox>\n *   <!-- With aria-label for accessibility -->\n *   <ui-listbox slot=\"suggestions\" aria-label=\"Fruit suggestions\">\n *     <ui-list-item data-value=\"apple\">Apple</ui-list-item>\n *     <ui-list-item data-value=\"banana\">Banana</ui-list-item>\n *     <ui-list-item data-value=\"cherry\">Cherry</ui-list-item>\n *   </ui-listbox>\n * </autocomplete-input>\n *\n * <script>\n *   // In your component/script\n *   handleAutocompleteSelection(event) {\n *     const selectedItem = event.detail.item;\n *     const inputElement = this.shadowRoot.querySelector('input[slot=\"input\"]');\n *     if (inputElement) {\n *       inputElement.value = selectedItem.dataset.value || selectedItem.textContent;\n *     }\n *     console.log('Selected:', selectedItem.dataset.value);\n *   }\n * </script>\n * ```\n *\n * @example Dynamic filtering with `data-index`\n * ```html\n * <autocomplete-input @autocomplete=\"${this.handleUserSelection}\">\n *   <input slot=\"input\" type=\"text\" placeholder=\"Search users...\" />\n *   <ui-listbox slot=\"suggestions\" aria-label=\"User suggestions\">\n *     <ui-list-item data-id=\"1\" data-name=\"Alice Wonderland\" data-email=\"alice@example.com\" data-index=\"name email\">\n *       Alice Wonderland\n *       <span slot=\"supporting-text\">alice@example.com</span>\n *     </ui-list-item>\n *     <ui-list-item data-id=\"2\" data-name=\"Bob The Builder\" data-email=\"bob@example.com\" data-index=\"name email\">\n *       Bob The Builder\n *       <span slot=\"supporting-text\">bob@example.com</span>\n *     </ui-list-item>\n *   </ui-listbox>\n * </autocomplete-input>\n *\n * <script>\n *   // In your component/script\n *   handleUserSelection(event) {\n *     const selectedItem = event.detail.item;\n *     const inputElement = this.shadowRoot.querySelector('input[slot=\"input\"]');\n *     if (inputElement) {\n *       // You might want to display the name, but store the ID\n *       inputElement.value = selectedItem.dataset.name;\n *     }\n *     console.log('Selected user ID:', selectedItem.dataset.id);\n *   }\n * </script>\n * ```\n */\nexport default class Autocomplete extends LitElement {\n  protected override createRenderRoot(): HTMLElement | DocumentFragment {\n    return this\n  }\n\n  /**\n   * The MutationObserver instance used to watch for changes in slotted children.\n   */\n  protected observer?: MutationObserver\n\n  /**\n   * The ID of the input element, generated if not provided.\n   * This is used for CSS anchoring and to ensure unique IDs for accessibility.\n   */\n  @state() protected accessor inputId = ''\n\n  /**\n   * The position area for the suggestions popover.\n   * This can be 'bottom' or 'top', depending on available space.\n   * Default is 'bottom'.\n   *\n   * Note, this is set dynamically based on available space\n   * and the position of the input element. This only sets the initial value.\n   *\n   * @attribute\n   * @type {'bottom' | 'top'}\n   * @default 'bottom'\n   */\n  @property() accessor positionArea: 'bottom' | 'top' = 'bottom'\n\n  /**\n   * The reference to the slotted input element.\n   * This should be an `HTMLInputElement` or behave like one.\n   */\n  protected inputRef?: HTMLInputElement | HTMLElement | null\n  /**\n   * The reference to the slotted suggestions element, which should be a `ui-listbox`.\n   * This is used to manage the suggestions popover and filtering.\n   */\n  protected suggestionsRef?: UiListbox | null\n\n  /**\n   * Checks if the suggestions popover is currently open.\n   */\n  get opened(): boolean {\n    return this.suggestionsRef?.matches(':popover-open') || false\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.observer = new MutationObserver(this.handleMutations.bind(this))\n    this.observer.observe(this, { childList: true })\n    if (!this.id) {\n      this.id = `autocomplete-${Math.random().toString(36).substring(2, 15)}`\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.observer?.disconnect()\n    this.observer = undefined\n    this.clearInputListeners()\n    this.clearSuggestionsListeners()\n  }\n\n  protected override firstUpdated(cp: PropertyValues): void {\n    super.firstUpdated(cp)\n    this.firstSetup()\n  }\n\n  /**\n   * Performs initial setup after the first update, ensuring that slotted input\n   * and suggestions elements are configured.\n   */\n  async firstSetup(): Promise<void> {\n    await this.updateComplete\n    const input = this.querySelector('[slot=\"input\"]') as HTMLElement | null\n    const suggestions = this.querySelector('[slot=\"suggestions\"]') as HTMLElement | null\n    if (input) {\n      this.setupInput(input)\n    }\n    if (suggestions) {\n      this.setupSuggestions(suggestions as UiListbox)\n    }\n  }\n\n  /**\n   * Handles mutations observed on the component's slotted children.\n   * This is used to set up or tear down input and suggestions elements when they are added or removed.\n   * @param mutations An array of MutationRecord objects.\n   */\n  protected handleMutations(mutations: MutationRecord[]): void {\n    for (const mutation of mutations) {\n      if (mutation.type === 'childList') {\n        for (const node of mutation.removedNodes) {\n          if (node instanceof HTMLElement) {\n            if (node.slot === 'input' && this.inputRef === node) {\n              this.clearInputListeners()\n            } else if (node.slot === 'suggestions' && this.suggestionsRef === node) {\n              this.clearSuggestionsListeners()\n            }\n          }\n        }\n        for (const node of mutation.addedNodes) {\n          if (node instanceof HTMLElement) {\n            if (node.slot === 'input') {\n              this.setupInput(node)\n            } else if (node.slot === 'suggestions') {\n              this.setupSuggestions(node as UiListbox)\n            }\n          }\n        }\n      }\n    }\n  }\n\n  /**\n   * Clears event listeners from the current input reference and resets it.\n   */\n  protected clearInputListeners(): void {\n    if (this.inputRef) {\n      this.inputRef.removeEventListener('focus', this.handleInputFocus)\n      this.inputRef.removeEventListener('input', this.handleInput)\n      this.inputRef.removeEventListener('keydown', this.handleKeydown as EventListener)\n      this.inputRef.removeEventListener('blur', this.handleInputBlur)\n    }\n    this.inputRef = null\n  }\n\n  /**\n   * Clears event listeners from the current suggestions reference and resets it.\n   */\n  protected clearSuggestionsListeners(): void {\n    if (this.suggestionsRef) {\n      this.suggestionsRef.removeEventListener('select', this.handleSuggestionSelect as EventListener)\n      // If ui-listbox uses a slot for its items, listen to its slotchange\n      this.suggestionsRef.removeEventListener('itemschange', this.handleSuggestionsSlotChange)\n      if (this.suggestionsRef.matches(':popover-open')) {\n        this.suggestionsRef.hidePopover()\n      }\n    }\n    this.suggestionsRef = null\n  }\n\n  /**\n   * Sets up the slotted input element.\n   * Assigns an ID if necessary, sets up CSS anchoring, and attaches event listeners.\n   * @param input The HTMLElement to be used as the input.\n   */\n  protected setupInput(input: HTMLElement): void {\n    this.clearInputListeners() // Clear any old listeners\n    if (!input.id) {\n      this.inputId = `autocomplete-input-${Math.random().toString(36).substring(2, 15)}`\n      input.id = this.inputId\n    } else {\n      this.inputId = input.id\n    }\n    const anchorElement = this.querySelector('[slot=\"anchor\"]') as HTMLElement | null\n    // Ensure CSS anchor positioning can work\n    const anchor = anchorElement || input\n    anchor.style.setProperty('anchor-name', `--${this.inputId}`)\n\n    this.inputRef = input as HTMLInputElement // Assuming it behaves like an input\n    this.inputRef.addEventListener('focus', this.handleInputFocus)\n    this.inputRef.addEventListener('input', this.handleInput)\n    this.inputRef.addEventListener('keydown', this.handleKeydown as EventListener)\n    this.inputRef.addEventListener('blur', this.handleInputBlur)\n\n    // Apply initial filtering if suggestions are already present\n    if (this.suggestionsRef) {\n      this.suggestionsRef.style.setProperty('position-anchor', `--${this.inputId}`)\n      this.filterSuggestions((this.inputRef as HTMLInputElement).value || '')\n    }\n  }\n\n  /**\n   * Sets up the slotted suggestions element (assumed to be a `UiListbox`).\n   * Configures popover behavior, CSS anchoring, and attaches event listeners.\n   * @param suggestionsElement The `UiListbox` element to be used for suggestions.\n   */\n  protected setupSuggestions(suggestionsElement: UiListbox): void {\n    this.clearSuggestionsListeners() // Clear any old listeners\n\n    this.suggestionsRef = suggestionsElement\n    this.suggestionsRef.popover = 'manual'\n    this.suggestionsRef.tabIndex = -1 // Prevent direct focus\n\n    if (this.inputId) {\n      this.suggestionsRef.style.setProperty('position-anchor', `--${this.inputId}`)\n    }\n\n    this.suggestionsRef.addEventListener('select', this.handleSuggestionSelect as EventListener)\n    // The `List` dispatches `itemschange` when the slot changes, so we can listen to it.\n    this.suggestionsRef.addEventListener('itemschange', this.handleSuggestionsSlotChange)\n\n    // Initial filter\n    this.filterSuggestions(this.inputRef ? (this.inputRef as HTMLInputElement).value : '')\n  }\n\n  /**\n   * Handles the focus event on the input element.\n   * Opens the suggestions popover if there are items to display.\n   */\n  @bound\n  protected handleInputFocus(): void {\n    const items = this.suggestionsRef?.items\n    if (!items || items.length === 0) {\n      // If no suggestions, do not open\n      return\n    }\n    const active = items.find((item) => !item.hidden)\n    if (active) {\n      this.openSuggestions()\n      this.filterSuggestions(this.inputRef ? (this.inputRef as HTMLInputElement).value : '')\n    }\n  }\n\n  /**\n   * Handles the input event on the input element.\n   * Filters suggestions based on the input query and opens/closes the popover accordingly.\n   * @param event The input event.\n   */\n  @bound\n  protected handleInput(event: Event): void {\n    this.openSuggestions()\n    const query = (event.target as HTMLInputElement).value\n    this.filterSuggestions(query)\n  }\n\n  /**\n   * Handles keydown events on the input element for navigating and selecting suggestions.\n   * - ArrowDown/ArrowUp: Navigates the suggestion list.\n   * - Enter: Selects the highlighted suggestion.\n   * - Escape: Closes the suggestions popover.\n   * @param event The keyboard event.\n   */\n  @bound\n  protected handleKeydown(event: KeyboardEvent): void {\n    if (!this.suggestionsRef) return\n\n    const { key } = event\n    const isSuggestionsOpen = this.suggestionsRef.matches(':popover-open')\n\n    if (['ArrowDown', 'ArrowUp'].includes(key)) {\n      event.preventDefault()\n      if (!isSuggestionsOpen) {\n        this.openSuggestions()\n        // Give popover a moment to open before trying to highlight\n        requestAnimationFrame(() => this.navigateList(key))\n      } else {\n        this.navigateList(key)\n      }\n    } else if (key === 'Enter') {\n      if (isSuggestionsOpen && this.suggestionsRef.highlightListItem) {\n        event.preventDefault()\n        this.suggestionsRef.notifySelect(this.suggestionsRef.highlightListItem)\n      }\n    } else if (key === 'Escape') {\n      if (isSuggestionsOpen) {\n        event.preventDefault()\n        this.closeSuggestions()\n      }\n    }\n  }\n\n  /**\n   * Navigates the suggestion list based on the pressed key.\n   * @param key The key that was pressed (ArrowDown or ArrowUp).\n   */\n  protected navigateList(key: string): void {\n    if (!this.suggestionsRef) return\n    switch (key) {\n      case 'ArrowDown':\n        this.suggestionsRef.highlightNext()\n        break\n      case 'ArrowUp':\n        this.suggestionsRef.highlightPrevious()\n        break\n      // Don't handle Home or End keys here, as they break the usability of the input.\n    }\n  }\n\n  /**\n   * Handles the blur event on the input element.\n   * Closes the suggestions popover if focus moves outside the autocomplete component.\n   */\n  @bound\n  protected handleInputBlur(): void {\n    // We use the manual popover mode, so we need to close suggestions\n    // when the input loses focus, but only the current active element is not part of the suggestions.\n    requestAnimationFrame(() => {\n      if (\n        !this.inputRef?.contains(document.activeElement) &&\n        (!this.suggestionsRef || !this.suggestionsRef.contains(document.activeElement))\n      ) {\n        this.closeSuggestions()\n      }\n    })\n  }\n\n  /**\n   * Handles the `select` event dispatched by the `ui-listbox` when a suggestion is chosen.\n   * Dispatches an `autocomplete` event and closes the popover.\n   * @param event The custom event from `ui-listbox`.\n   */\n  @bound\n  protected handleSuggestionSelect(event: CustomEvent): void {\n    event.stopPropagation()\n    const selectedItem = event.detail.item as UiListItem\n    this.dispatchEvent(\n      new CustomEvent('autocomplete', {\n        detail: { item: selectedItem },\n        bubbles: false,\n        composed: false,\n      })\n    )\n    this.closeSuggestions()\n  }\n\n  /**\n   * Handles the `itemschange` event dispatched by the `ui-listbox` when its slotted items change.\n   * Re-filters the suggestions.\n   */\n  @bound\n  protected handleSuggestionsSlotChange(): void {\n    const value = this.inputRef ? (this.inputRef as HTMLInputElement).value : ''\n    if (!value) {\n      return\n    }\n    this.openSuggestions()\n    this.filterSuggestions(value)\n  }\n\n  /**\n   * Opens the suggestions popover if it's not already open and there are visible items.\n   */\n  protected openSuggestions(): void {\n    const popover = this.suggestionsRef\n    if (!popover || popover.matches(':popover-open')) {\n      return\n    }\n    // we need to open the popover first to make any measurements\n    popover.showPopover()\n    const anchor = (this.querySelector('[slot=\"anchor\"]') as HTMLElement | null) || this.inputRef\n    if (!anchor) {\n      return\n    }\n    this.positionArea = this.decidePositionArea(popover, anchor)\n  }\n\n  /**\n   * Decides the position area for the popover based on available space.\n   * It checks if there is enough space below or above the anchor element and decides accordingly.\n   *\n   * We need to do this because we set the popover height to `100%`, `-webkit-fill-available`, or `-moz-available`\n   * and it makes the popover to always open at the bottom, even if there is no space. The `position-try-fallbacks`\n   * will not work in this case, because from its perspective there is always enough space, even if that will cause\n   * the popover to have a height of just a few pixels.\n   *\n   * @param popover The popover element to position.\n   * @param anchor The anchor element relative to which the popover will be positioned.\n   * @returns 'top' or 'bottom' based on available space.\n   */\n  protected decidePositionArea(popover: HTMLElement, anchor: HTMLElement): 'top' | 'bottom' {\n    let newArea: 'top' | 'bottom' = 'bottom'\n    // Get bounding rectangles\n    const anchorRect = anchor.getBoundingClientRect()\n    const viewportHeight = window.innerHeight\n\n    const spaceBelow = viewportHeight - anchorRect.bottom\n    const spaceAbove = anchorRect.top\n\n    // Estimate a typical/minimum height the popover might need to be useful\n    const popoverThresholdHeight = popover.scrollHeight || 150\n    if (spaceBelow < popoverThresholdHeight && spaceAbove > spaceBelow && spaceAbove > popoverThresholdHeight) {\n      // Not enough space below, but more (and sufficient) space above\n      newArea = 'top'\n    } else if (spaceBelow < popoverThresholdHeight && spaceAbove > spaceBelow) {\n      // Not enough space below, and space above is more than space below (even if not \"sufficient\")\n      newArea = 'top'\n    } else {\n      newArea = 'bottom' // Default to bottom if enough space or if top is worse\n    }\n    return newArea\n  }\n\n  /**\n   * Closes the suggestions popover if it's open and clears any highlighted item.\n   */\n  protected closeSuggestions(): void {\n    if (this.suggestionsRef && this.suggestionsRef.matches(':popover-open')) {\n      this.suggestionsRef.hidePopover()\n    }\n  }\n\n  /**\n   * Filters the suggestions based on the provided query.\n   * Hides items that do not match and manages the highlighted item state.\n   * @param query The search query string.\n   */\n  protected filterSuggestions(query: string): void {\n    if (!this.suggestionsRef) {\n      return\n    }\n\n    const lowerCaseQuery = query.toLowerCase().trim()\n    let firstVisibleItem: UiListItem | null = null\n\n    // The `items` getter in `List.ts` (parent of UiListbox) correctly gets assigned elements.\n    const items = this.suggestionsRef.items as UiListItem[]\n\n    for (const item of items) {\n      let matches = false\n      if (lowerCaseQuery === '') {\n        matches = true\n      } else if (item.dataset.index) {\n        const indexFields = item.dataset.index.split(' ').filter(Boolean)\n        for (const field of indexFields) {\n          const valueToSearch = item.dataset[field] || ''\n          if (valueToSearch.toLowerCase().includes(lowerCaseQuery)) {\n            matches = true\n            break\n          }\n        }\n      } else {\n        const valueToSearch = item.dataset.value || item.textContent || ''\n        matches = valueToSearch.toLowerCase().includes(lowerCaseQuery)\n      }\n      item.hidden = !matches\n      if (matches && !firstVisibleItem) {\n        firstVisibleItem = item\n      }\n    }\n\n    // If the currently highlighted item is now hidden, try to highlight the first visible one or clear.\n    if (this.suggestionsRef.highlightListItem?.hidden) {\n      // the highlightListItem clears the highlighted item if it is not passed an argument.\n      this.suggestionsRef?.highlightItem(firstVisibleItem)\n    }\n    if (!firstVisibleItem) {\n      // Close if no items are visible\n      this.closeSuggestions()\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { id, positionArea } = this\n    return html`\n      <style>\n        #${id} {\n          display: inline-block;\n\n          [popover] {\n            border: none;\n            margin: 0;\n            position-area: ${positionArea};\n            position-try-fallbacks:\n              flip-block,\n              flip-inline,\n              flip-block flip-inline;\n            width: anchor-size(width);\n\n            box-shadow: var(--md-sys-elevation-1);\n            border-radius: var(--md-sys-shape-corner-medium);\n\n            overflow: auto;\n            /* We try 100% and then vendor options which are more accurate */\n            height: 100%;\n            height: -webkit-fill-available;\n            height: -moz-available;\n            max-height: max-content;\n          }\n\n          [popover]:not(:popover-open) {\n            display: none;\n          }\n        }\n      </style>\n    `\n  }\n}\n"]}

package/demo/elements/autocomplete/index.html

@@ -14,6 +14,46 @@
   <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
   <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <link href="../../page.css" rel="stylesheet" type="text/css" />
+  <style>
+    .share-input {
+      .input-container {
+        min-height: 3em;
+        border: none;
+        padding: 4px 12px;
+        display: flex;
+        flex-wrap: wrap;
+        box-sizing: border-box;
+        gap: 4px;
+        border-radius: 4px;
+        background-color: var(--md-sys-color-surface-container-lowest);
+
+        outline-color: var(--md-sys-color-primary);
+        outline-style: solid;
+        outline-width: 1px;
+        outline-offset: -1px;
+        transition:
+          outline-width 0.14s ease-in-out,
+          outline-offset 0.14s ease-in-out;
+
+        &:focus-within {
+          outline-width: 2px;
+          outline-offset: -2px;
+        }
+
+        .native-input {
+          flex: 1;
+          outline: none;
+          border: none;
+          background: transparent;
+          color: var(--md-sys-color-on-surface);
+          font-size: 1rem;
+          font-family: var(--md-sys-typescale-body-large-font-family);
+          line-height: var(--md-sys-typescale-body-large-line-height);
+          padding: 0;
+        }
+      }
+    }
+  </style>
 </head>
 
 <body class="demo">

package/demo/elements/autocomplete/index.ts

@@ -15,7 +15,9 @@ class ComponentDemoPage extends DemoPage {
 
   @reactive() accessor fixedValue = ''
   @reactive() accessor dynamicValue = ''
+  @reactive() accessor dynamicCustomValue = ''
   @reactive() accessor users: IUser[] = []
+  @reactive() accessor customUsers: IUser[] = []
 
   userMock = new User()
 
@@ -37,22 +39,33 @@ class ComponentDemoPage extends DemoPage {
   handleDynamicInput(event: InputEvent): void {
     const target = event.target as HTMLInputElement
     this.dynamicValue = target.value
-    this.generateMockUsers(target.value)
+    this.generateMockUsers(target.value, 'users')
   }
 
-  generateMockUsers(startsWith: string): void {
+  generateMockUsers(startsWith: string, prop: 'users' | 'customUsers'): void {
     const timeout = this.userMock.types.number({ min: 100, max: 1000 })
     const results = this.userMock.types.number({ min: 0, max: 30 })
     setTimeout(() => {
-      this.users = Array.from({ length: results }, () => {
+      this[prop] = Array.from({ length: results }, () => {
         const item = this.userMock.user()
         item.name = item.name.startsWith(startsWith) ? item.name : `${startsWith}${item.name}`
         return item
       })
-      console.log('Generated users:', this.users)
+      console.log('Generated users:', this[prop])
     }, timeout)
   }
 
+  handleDynamicCustomInput(event: InputEvent): void {
+    const target = event.target as HTMLInputElement
+    this.dynamicCustomValue = target.value
+    this.generateMockUsers(target.value, 'customUsers')
+  }
+
+  handleDynamicCustomAutocomplete(event: CustomEvent<{ item: HTMLElement }>): void {
+    const item = event.detail.item
+    this.dynamicCustomValue = item.dataset.name || ''
+  }
+
   override contentTemplate(): TemplateResult {
     return html`
       <a href="../">Back</a>
@@ -116,6 +129,41 @@ class ComponentDemoPage extends DemoPage {
           </autocomplete-input>
         </div>
       </section>
+
+      <section class="demo-section">
+        <h2 class="title-large">Custom Input</h2>
+
+        <div class="demo-row">
+          <autocomplete-input @autocomplete="${this.handleDynamicCustomAutocomplete}">
+            <div class="share-input" slot="anchor">
+              <div class="input-container">
+                <input
+                  type="text"
+                  slot="input"
+                  autocomplete="off"
+                  placeholder="Enter name or email"
+                  name="dynamic-custom"
+                  class="native-input"
+                  .value="${live(this.dynamicCustomValue)}"
+                  @input="${this.handleDynamicCustomInput}"
+                />
+              </div>
+            </div>
+            <ui-listbox slot="suggestions"
+              >${this.customUsers.map(
+                (user) =>
+                  html`<ui-list-item
+                    data-name="${user.name}"
+                    data-email="${user.email[0].email}"
+                    data-index="name email"
+                    role="option"
+                    >${user.name}<span slot="supporting-text">${user.email[0].email}</span></ui-list-item
+                  >`
+              )}</ui-listbox
+            >
+          </autocomplete-input>
+        </div>
+      </section>
     `
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/elements/autocomplete/internals/autocomplete.ts

@@ -1,5 +1,5 @@
 import { html, LitElement, PropertyValues, TemplateResult } from 'lit'
-import { state } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 import type UiListbox from '../../../md/listbox/internals/Listbox.js'
 import type UiListItem from '../../../md/list/internals/ListItem.js'
 import { bound } from '../../../decorators/bound.js'
@@ -24,10 +24,20 @@ import { bound } from '../../../decorators/bound.js'
  *   - If a `ui-list-item` has a `data-index` attribute (e.g., `data-index="name email"`), filtering will search
  *     within the specified `data-*` attributes (e.g., `data-name`, `data-email`).
  * - **Mutation Awareness**: Reacts to changes in slotted suggestions, re-filtering them if necessary.
- * - **Event-Driven**: Notifies the parent application via an `autocomplete` event when a suggestion is selected,
- *   without directly modifying the input's value. This allows the application author to control the input update logic.
- * - **Accessibility**: Designed with accessibility in mind, ensuring keyboard navigability and proper ARIA attribute
- *   management (handled by `ui-listbox`).
+ * - **Event-Driven**: Notifies the application via an `autocomplete` event when a suggestion is selected.
+ *   The component itself does not modify the input's value, giving the application author full control.
+ *
+ * ### Accessibility
+ *
+ * The `autocomplete-input` component is designed with accessibility at its core:
+ * - **Keyboard Navigation**: Full keyboard support for navigating suggestions (ArrowUp, ArrowDown),
+ *   selecting (Enter), and closing (Escape), all while focus remains on the input field.
+ * - **ARIA Attributes**: While the `autocomplete-input` manages ARIA attributes related to the popover's
+ *   state, the slotted `ui-listbox` is responsible for its internal ARIA roles and states
+ *   (e.g., `role="listbox"`, `aria-activedescendant`).
+ * - **Labeling Suggestions**: It is **crucial** for accessibility that the slotted `ui-listbox`
+ *   has an `aria-label` attribute. This provides a descriptive name for the list of suggestions,
+ *   which is announced by screen readers.
  *
  * The component uses CSS anchor positioning to place the suggestions popover relative to the input.
  * Ensure your `ui-listbox` is styled appropriately for popover display (e.g., `popover="manual"`, `position-anchor`).
@@ -37,6 +47,10 @@ import { bound } from '../../../decorators/bound.js'
  *               or behave like one (have a `value` property and dispatch `input`, `focus`, `blur`, and `keydown`
  *               events).
  * @slot suggestions - The `ui-listbox` element containing `ui-list-item` elements as suggestions.
+ * @slot anchor - An optional element that points to element that will be used as the anchor for the popover.
+ *                This is useful if you want to position the suggestions relative to a different element than the input.
+ *                If not provided, the input element will be used as the anchor.
+ * @slot Any additional content that should be rendered inside the component.
  *
  * @fires autocomplete - Dispatched when a suggestion is selected by the user (e.g., via click or Enter key).
  * The `event.detail` object contains:
@@ -51,6 +65,12 @@ import { bound } from '../../../decorators/bound.js'
  *     <ui-list-item data-value="banana">Banana</ui-list-item>
  *     <ui-list-item data-value="cherry">Cherry</ui-list-item>
  *   </ui-listbox>
+ *   <!-- With aria-label for accessibility -->
+ *   <ui-listbox slot="suggestions" aria-label="Fruit suggestions">
+ *     <ui-list-item data-value="apple">Apple</ui-list-item>
+ *     <ui-list-item data-value="banana">Banana</ui-list-item>
+ *     <ui-list-item data-value="cherry">Cherry</ui-list-item>
+ *   </ui-listbox>
  * </autocomplete-input>
  *
  * <script>
@@ -70,7 +90,7 @@ import { bound } from '../../../decorators/bound.js'
  * ```html
  * <autocomplete-input @autocomplete="${this.handleUserSelection}">
  *   <input slot="input" type="text" placeholder="Search users..." />
- *   <ui-listbox slot="suggestions">
+ *   <ui-listbox slot="suggestions" aria-label="User suggestions">
  *     <ui-list-item data-id="1" data-name="Alice Wonderland" data-email="alice@example.com" data-index="name email">
  *       Alice Wonderland
  *       <span slot="supporting-text">alice@example.com</span>
@@ -97,6 +117,10 @@ import { bound } from '../../../decorators/bound.js'
  * ```
  */
 export default class Autocomplete extends LitElement {
+  protected override createRenderRoot(): HTMLElement | DocumentFragment {
+    return this
+  }
+
   /**
    * The MutationObserver instance used to watch for changes in slotted children.
    */
@@ -108,6 +132,20 @@ export default class Autocomplete extends LitElement {
    */
   @state() protected accessor inputId = ''
 
+  /**
+   * The position area for the suggestions popover.
+   * This can be 'bottom' or 'top', depending on available space.
+   * Default is 'bottom'.
+   *
+   * Note, this is set dynamically based on available space
+   * and the position of the input element. This only sets the initial value.
+   *
+   * @attribute
+   * @type {'bottom' | 'top'}
+   * @default 'bottom'
+   */
+  @property() accessor positionArea: 'bottom' | 'top' = 'bottom'
+
   /**
    * The reference to the slotted input element.
    * This should be an `HTMLInputElement` or behave like one.
@@ -130,6 +168,9 @@ export default class Autocomplete extends LitElement {
     super.connectedCallback()
     this.observer = new MutationObserver(this.handleMutations.bind(this))
     this.observer.observe(this, { childList: true })
+    if (!this.id) {
+      this.id = `autocomplete-${Math.random().toString(36).substring(2, 15)}`
+    }
   }
 
   override disconnectedCallback(): void {
@@ -151,20 +192,13 @@ export default class Autocomplete extends LitElement {
    */
   async firstSetup(): Promise<void> {
     await this.updateComplete
-    const input = this.shadowRoot?.querySelector('slot[name="input"]') as HTMLSlotElement | null
-    const suggestions = this.shadowRoot?.querySelector('slot[name="suggestions"]') as HTMLSlotElement | null
+    const input = this.querySelector('[slot="input"]') as HTMLElement | null
+    const suggestions = this.querySelector('[slot="suggestions"]') as HTMLElement | null
     if (input) {
-      const elements = input.assignedElements()
-      if (elements.length > 0 && elements[0] instanceof HTMLElement) {
-        this.setupInput(elements[0])
-      }
+      this.setupInput(input)
     }
     if (suggestions) {
-      const elements = suggestions.assignedElements()
-      if (elements.length > 0 && elements[0] instanceof HTMLElement) {
-        // Assuming the slotted element is ui-listbox or compatible
-        this.setupSuggestions(elements[0] as UiListbox)
-      }
+      this.setupSuggestions(suggestions as UiListbox)
     }
   }
 
@@ -239,8 +273,10 @@ export default class Autocomplete extends LitElement {
     } else {
       this.inputId = input.id
     }
+    const anchorElement = this.querySelector('[slot="anchor"]') as HTMLElement | null
     // Ensure CSS anchor positioning can work
-    input.style.setProperty('anchor-name', `--${this.inputId}`)
+    const anchor = anchorElement || input
+    anchor.style.setProperty('anchor-name', `--${this.inputId}`)
 
     this.inputRef = input as HTMLInputElement // Assuming it behaves like an input
     this.inputRef.addEventListener('focus', this.handleInputFocus)
@@ -417,9 +453,53 @@ export default class Autocomplete extends LitElement {
    * Opens the suggestions popover if it's not already open and there are visible items.
    */
   protected openSuggestions(): void {
-    if (this.suggestionsRef && !this.suggestionsRef.matches(':popover-open')) {
-      this.suggestionsRef.showPopover()
+    const popover = this.suggestionsRef
+    if (!popover || popover.matches(':popover-open')) {
+      return
+    }
+    // we need to open the popover first to make any measurements
+    popover.showPopover()
+    const anchor = (this.querySelector('[slot="anchor"]') as HTMLElement | null) || this.inputRef
+    if (!anchor) {
+      return
+    }
+    this.positionArea = this.decidePositionArea(popover, anchor)
+  }
+
+  /**
+   * Decides the position area for the popover based on available space.
+   * It checks if there is enough space below or above the anchor element and decides accordingly.
+   *
+   * We need to do this because we set the popover height to `100%`, `-webkit-fill-available`, or `-moz-available`
+   * and it makes the popover to always open at the bottom, even if there is no space. The `position-try-fallbacks`
+   * will not work in this case, because from its perspective there is always enough space, even if that will cause
+   * the popover to have a height of just a few pixels.
+   *
+   * @param popover The popover element to position.
+   * @param anchor The anchor element relative to which the popover will be positioned.
+   * @returns 'top' or 'bottom' based on available space.
+   */
+  protected decidePositionArea(popover: HTMLElement, anchor: HTMLElement): 'top' | 'bottom' {
+    let newArea: 'top' | 'bottom' = 'bottom'
+    // Get bounding rectangles
+    const anchorRect = anchor.getBoundingClientRect()
+    const viewportHeight = window.innerHeight
+
+    const spaceBelow = viewportHeight - anchorRect.bottom
+    const spaceAbove = anchorRect.top
+
+    // Estimate a typical/minimum height the popover might need to be useful
+    const popoverThresholdHeight = popover.scrollHeight || 150
+    if (spaceBelow < popoverThresholdHeight && spaceAbove > spaceBelow && spaceAbove > popoverThresholdHeight) {
+      // Not enough space below, but more (and sufficient) space above
+      newArea = 'top'
+    } else if (spaceBelow < popoverThresholdHeight && spaceAbove > spaceBelow) {
+      // Not enough space below, and space above is more than space below (even if not "sufficient")
+      newArea = 'top'
+    } else {
+      newArea = 'bottom' // Default to bottom if enough space or if top is worse
     }
+    return newArea
   }
 
   /**
@@ -482,9 +562,38 @@ export default class Autocomplete extends LitElement {
   }
 
   protected override render(): TemplateResult {
+    const { id, positionArea } = this
     return html`
-      <slot name="input"></slot>
-      <slot name="suggestions"></slot>
+      <style>
+        #${id} {
+          display: inline-block;
+
+          [popover] {
+            border: none;
+            margin: 0;
+            position-area: ${positionArea};
+            position-try-fallbacks:
+              flip-block,
+              flip-inline,
+              flip-block flip-inline;
+            width: anchor-size(width);
+
+            box-shadow: var(--md-sys-elevation-1);
+            border-radius: var(--md-sys-shape-corner-medium);
+
+            overflow: auto;
+            /* We try 100% and then vendor options which are more accurate */
+            height: 100%;
+            height: -webkit-fill-available;
+            height: -moz-available;
+            max-height: max-content;
+          }
+
+          [popover]:not(:popover-open) {
+            display: none;
+          }
+        }
+      </style>
     `
   }
 }

package/test/elements/autocomplete/autocomplete-input.spec.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { fixture, expect, html, oneEvent, nextFrame, aTimeout } from '@open-wc/testing'
+import { fixture, expect, html, oneEvent, nextFrame, aTimeout, assert } from '@open-wc/testing'
 import sinon from 'sinon'
 
 import { AutocompleteInput } from '../../../src/elements/autocomplete/autocomplete-input.js'
@@ -16,7 +16,7 @@ describe('AutocompleteInput', () => {
     return fixture(html`
       <autocomplete-input>
         <input id="test-input" slot="input" type="text" placeholder="Search..." />
-        <ui-listbox slot="suggestions">
+        <ui-listbox slot="suggestions" aria-label="Suggestions">
           <ui-list-item data-value="apple">Apple</ui-list-item>
           <ui-list-item data-value="banana">Banana</ui-list-item>
           <ui-list-item data-value="cherry" data-index="value customField" data-custom-field="Sweet Cherry"
@@ -31,7 +31,7 @@ describe('AutocompleteInput', () => {
     return fixture(html`
       <autocomplete-input>
         <input slot="input" type="text" placeholder="Search..." />
-        <ui-listbox slot="suggestions"></ui-listbox>
+        <ui-listbox slot="suggestions" aria-label="Suggestions"></ui-listbox>
       </autocomplete-input>
     `)
   }
@@ -45,13 +45,11 @@ describe('AutocompleteInput', () => {
   }
 
   function getSlottedInput(el: AutocompleteInput): HTMLInputElement | null {
-    const slot = el.shadowRoot!.querySelector('slot[name="input"]') as HTMLSlotElement
-    return (slot.assignedElements({ flatten: true })[0] as HTMLInputElement) || null
+    return el.querySelector('[slot="input"]') as HTMLInputElement | null
   }
 
   function getSlottedSuggestions(el: AutocompleteInput): MdListbox | null {
-    const slot = el.shadowRoot!.querySelector('slot[name="suggestions"]') as HTMLSlotElement
-    return (slot.assignedElements({ flatten: true })[0] as MdListbox) || null
+    return el.querySelector('[slot="suggestions"]') as MdListbox | null
   }
 
   function getSuggestionItems(suggestionsEl: MdListbox): MdListItem[] {
@@ -445,4 +443,201 @@ describe('AutocompleteInput', () => {
       expect(suggestions.matches(':popover-open')).to.be.false
     })
   })
+
+  describe('Popover Positioning', () => {
+    let el: AutocompleteInput
+    let input: HTMLInputElement
+    let suggestionsBox: MdListbox
+    let getBoundingClientRectStub: sinon.SinonStub
+
+    // Define a standard popover height for consistent threshold calculation
+    const popoverVisibleHeight = 200 // px, used for scrollHeight
+
+    beforeEach(async () => {
+      el = await basicFixture() // This fixture has suggestions
+      await el.updateComplete // Ensures inputRef is set up
+      input = getSlottedInput(el)!
+      suggestionsBox = getSlottedSuggestions(el)!
+
+      // Set a known height for the suggestions box to make its scrollHeight predictable
+      suggestionsBox.style.height = `${popoverVisibleHeight}px`
+      suggestionsBox.style.display = 'block' // Ensure it's not display:none from other CSS
+      suggestionsBox.style.overflow = 'auto'
+      // Ensure it has some content to have a scrollHeight if not stubbed
+      if (getSuggestionItems(suggestionsBox).length === 0) {
+        const item = document.createElement('ui-list-item')
+        item.textContent = 'Dummy Item'
+        suggestionsBox.appendChild(item)
+      }
+      await nextFrame() // Allow DOM to update for scrollHeight calculation
+
+      // @ts-expect-error accessing protected member `inputRef`
+      const anchorEl = el.inputRef as HTMLElement // Default anchor
+      if (!anchorEl) {
+        throw new Error('el.inputRef was not initialized')
+      }
+      getBoundingClientRectStub = sinon.stub(anchorEl, 'getBoundingClientRect')
+    })
+
+    afterEach(() => {
+      sinon.restore() // Restores window.innerHeight and the getBoundingClientRectStub
+    })
+
+    function setAnchorPosition(
+      anchorRect: Partial<DOMRect & { height: number; width: number }>,
+      viewportHeight: number
+    ) {
+      getBoundingClientRectStub.returns(anchorRect as DOMRect)
+      // Stub window.innerHeight for this call, will be restored by sinon.restore() in afterEach
+      sinon.stub(window, 'innerHeight').get(() => viewportHeight)
+    }
+
+    it('positions at bottom when ample space below', async () => {
+      // Anchor near top, viewport large. popoverThresholdHeight will be popoverVisibleHeight (200)
+      setAnchorPosition({ top: 50, bottom: 80, height: 30, x: 0, y: 50, width: 100, left: 0, right: 100 }, 800)
+      // spaceBelow = 800 - 80 = 720. 720 > 200.
+
+      input.focus() // Triggers openSuggestions
+      await el.updateComplete // For positionArea state change and re-render
+      await nextFrame() // For DOM to reflect changes
+
+      expect(el.positionArea).to.equal('bottom')
+    })
+
+    it('positions at top when insufficient space below but sufficient space above', async () => {
+      // popoverThresholdHeight = 200
+      // Anchor bottom: 750. Viewport: 800. spaceBelow = 50. (50 < 200)
+      // Anchor top: 500. spaceAbove = 500. (500 > 50) && (500 > 200) -> true
+      setAnchorPosition({ top: 500, bottom: 750, height: 250, x: 0, y: 500, width: 100, left: 0, right: 100 }, 800)
+
+      input.focus()
+      await el.updateComplete
+      await nextFrame()
+
+      expect(el.positionArea).to.equal('top')
+    })
+
+    it('positions at top when insufficient space below and more space above', async () => {
+      // popoverThresholdHeight = 200
+      // spaceBelow = 50 (anchor.bottom = viewportHeight - 50)
+      // spaceAbove = 100 (anchor.top = 100)
+      // viewportHeight = anchor.top + anchor.height + spaceBelow = 100 + 30 + 50 = 180
+      // Test case: spaceBelow=50, spaceAbove=100. popoverThresholdHeight=200.
+      // (50 < 200) is true.
+      // (100 > 50) is true.
+      // (100 > 200) is false. -> first 'top' condition fails.
+      // Second 'top' condition: (spaceBelow < popoverThresholdHeight && spaceAbove > spaceBelow) -> true.
+      setAnchorPosition({ top: 100, bottom: 130, height: 30, x: 0, y: 100, width: 100, left: 0, right: 100 }, 180)
+
+      input.focus()
+      await el.updateComplete
+      await nextFrame()
+
+      expect(el.positionArea).to.equal('top')
+    })
+
+    it('positions at bottom when insufficient space below and also insufficient (or less) space above', async () => {
+      // popoverThresholdHeight = 200
+      // spaceBelow = 50 (anchor.bottom = viewportHeight - 50)
+      // spaceAbove = 40 (anchor.top = 40)
+      // viewportHeight = anchor.top + anchor.height + spaceBelow = 40 + 30 + 50 = 120
+      // Test case: spaceBelow=50, spaceAbove=40.
+      // (50 < 200) is true.
+      // (40 > 50) is false. -> both 'top' conditions fail. Defaults to 'bottom'.
+      setAnchorPosition({ top: 40, bottom: 70, height: 30, x: 0, y: 40, width: 100, left: 0, right: 100 }, 120)
+
+      input.focus()
+      await el.updateComplete
+      await nextFrame()
+
+      expect(el.positionArea).to.equal('bottom')
+    })
+
+    it('uses fallback threshold of 150px if popover scrollHeight is 0', async () => {
+      // Stub scrollHeight to be 0 for this test.
+      const scrollHeightStub = sinon.stub(suggestionsBox, 'scrollHeight').get(() => 0)
+
+      // popoverThresholdHeight will be 150 (the fallback).
+      // Scenario: spaceBelow = 100, spaceAbove = 200.
+      // (100 < 150) is true.
+      // (200 > 100) is true. (200 > 150) is true. -> Should be 'top'.
+      setAnchorPosition({ top: 500, bottom: 700, height: 200, x: 0, y: 500, width: 100, left: 0, right: 100 }, 800)
+      // spaceBelow = 800 - 700 = 100
+      // spaceAbove = 500 (mistake in manual calc above, should be 500)
+      // Corrected: spaceBelow = 100. spaceAbove = 500. Threshold = 150.
+      // (100 < 150) -> true
+      // (500 > 100) -> true. (500 > 150) -> true. Result: 'top'.
+
+      input.focus()
+      await el.updateComplete
+      await nextFrame()
+
+      expect(el.positionArea).to.equal('top')
+      scrollHeightStub.restore()
+    })
+
+    it('uses slotted anchor for positioning if provided', async () => {
+      // Need to create a new fixture for this specific setup
+      el = await fixture(html`
+        <autocomplete-input>
+          <div slot="anchor" id="custom-anchor" style="height: 20px; width: 100px; border: 1px solid red;"></div>
+          <input slot="input" type="text" />
+          <ui-listbox slot="suggestions" style="height: ${popoverVisibleHeight}px; overflow: auto;">
+            <ui-list-item>Item 1</ui-list-item>
+          </ui-listbox>
+        </autocomplete-input>
+      `)
+      await el.updateComplete
+      input = getSlottedInput(el)! // Still need to focus input
+      const customAnchor = el.querySelector('#custom-anchor') as HTMLElement
+
+      getBoundingClientRectStub.restore() // remove stub from default input anchor
+      getBoundingClientRectStub = sinon.stub(customAnchor, 'getBoundingClientRect')
+
+      // Scenario: custom anchor is near bottom, should open top. popoverThresholdHeight = 200.
+      setAnchorPosition({ top: 720, bottom: 750, height: 30, x: 0, y: 720, width: 100, left: 0, right: 100 }, 800)
+
+      input.focus() // Triggers openSuggestions
+      await el.updateComplete
+      await nextFrame()
+
+      expect(el.positionArea).to.equal('top')
+      expect(getBoundingClientRectStub.called).to.be.true
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('is accessible when initially rendered', async () => {
+      const el = await basicFixture()
+      await el.updateComplete
+      await assert.isAccessible(el)
+    })
+
+    it('is accessible when popover is open', async () => {
+      const el = await basicFixture()
+      await el.updateComplete
+      const input = getSlottedInput(el)!
+
+      input.focus() // Opens popover
+      await nextFrame() // Allow popover to open
+      await el.updateComplete // Ensure state updates related to opening are done
+
+      await assert.isAccessible(el)
+    })
+
+    it('is accessible when popover is open and an item is highlighted', async () => {
+      const el = await basicFixture()
+      await el.updateComplete
+      const input = getSlottedInput(el)!
+
+      input.focus() // Opens popover
+      await nextFrame()
+
+      // Simulate highlighting the first item
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, composed: true }))
+      await aTimeout(0) // for rAF in handleKeydown
+      await nextFrame() // for highlight to apply
+      await assert.isAccessible(el)
+    })
+  })
 })