@api-client/ui 0.2.4 → 0.2.6

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;IAUzB,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;IAoB9C;;;;OAIG;IACH,SAAS,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,SAAS,GAAG,IAAI;IAe/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;CAuC5C"}

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.
+         */
+        ));
+        /**
+         * 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, _inputId_extraInitializers);
+        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,10 @@ 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)}`;
+            }
+            this.classList.add(this.id);
         }
         disconnectedCallback() {
             super.disconnectedCallback();
@@ -87,20 +127,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,18 +207,15 @@ 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);
             this.inputRef.addEventListener('keydown', this.handleKeydown);
             this.inputRef.addEventListener('blur', this.handleInputBlur);
-            // Apply initial filtering if suggestions are already present
-            if (this.suggestionsRef) {
-                this.suggestionsRef.style.setProperty('position-anchor', `--${this.inputId}`);
-                this.filterSuggestions(this.inputRef.value || '');
-            }
         }
         /**
          * Sets up the slotted suggestions element (assumed to be a `UiListbox`).
@@ -197,9 +227,6 @@ let Autocomplete = (() => {
             this.suggestionsRef = suggestionsElement;
             this.suggestionsRef.popover = 'manual';
             this.suggestionsRef.tabIndex = -1; // Prevent direct focus
-            if (this.inputId) {
-                this.suggestionsRef.style.setProperty('position-anchor', `--${this.inputId}`);
-            }
             this.suggestionsRef.addEventListener('select', this.handleSuggestionSelect);
             // The `List` dispatches `itemschange` when the slot changes, so we can listen to it.
             this.suggestionsRef.addEventListener('itemschange', this.handleSuggestionsSlotChange);
@@ -330,9 +357,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 +460,42 @@ let Autocomplete = (() => {
             }
         }
         render() {
+            const { id, positionArea, inputId } = this;
+            /*
+            position-try-fallbacks:
+                      flip-block,
+                      flip-inline,
+                      flip-block flip-inline;
+            */
             return html `
-      <slot name="input"></slot>
-      <slot name="suggestions"></slot>
+      <style>
+        .${id} {
+          display: inline-block;
+
+          [popover] {
+            border: none;
+            margin: 0;
+
+            box-shadow: var(--md-sys-elevation-1);
+            border-radius: var(--md-sys-shape-corner-medium);
+
+            position-area: ${positionArea};
+            position-anchor: --${inputId};
+
+            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;
+            width: anchor-size(width);
+          }
+
+          [popover]:not(:popover-open) {
+            display: none;
+          }
+        }
+      </style>
     `;
         }
     };
@@ -417,10 +520,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 +543,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 +561,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 +586,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":"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","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    this.classList.add(this.id)\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\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    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, inputId } = this\n    /*\n    position-try-fallbacks:\n              flip-block,\n              flip-inline,\n              flip-block flip-inline;\n    */\n    return html`\n      <style>\n        .${id} {\n          display: inline-block;\n\n          [popover] {\n            border: none;\n            margin: 0;\n\n            box-shadow: var(--md-sys-elevation-1);\n            border-radius: var(--md-sys-shape-corner-medium);\n\n            position-area: ${positionArea};\n            position-anchor: --${inputId};\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            width: anchor-size(width);\n          }\n\n          [popover]:not(:popover-open) {\n            display: none;\n          }\n        }\n      </style>\n    `\n  }\n}\n"]}

package/build/src/elements/highlight/MarkedHighlight.d.ts

@@ -129,12 +129,13 @@ export default class MarkedHighlight extends LitElement {
      * @returns A reference to the output element.
      */
     get outputElement(): HTMLElement | null;
-    protected updated(cp: PropertyValues<this>): void;
+    protected willUpdate(cp: PropertyValues<this>): void;
     protected markdownElement?: HTMLScriptElement | null;
     protected attachedValue: boolean;
     firstUpdated(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected processScript(): Promise<void>;
     /**
      * Renders `markdown` into this element's DOM.
      *

package/build/src/elements/highlight/MarkedHighlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkedHighlight.d.ts","sourceRoot":"","sources":["../../../../src/elements/highlight/MarkedHighlight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAMtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;IACrD;;;OAGG;IACyB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAEjE;;;;OAIG;IACyC,QAAQ,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAA;IAEhF;;;;OAIG;IACyC,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;IAElF;;;;;;OAMG;IAEyB,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAA;IAEnE;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;IAElF;;;;;;;;OAQG;IAEyB,QAAQ,CAAC,SAAS,EAAE,QAAQ,GAAG,SAAS,CAAA;IAEpE;;;;;;;OAOG;IACyC,QAAQ,CAAC,yBAAyB,EAAE,OAAO,GAAG,SAAS,CAAA;IAEnG;;OAEG;IACH,IAAI,aAAa,IAAI,WAAW,GAAG,IAAI,CAUtC;cAEkB,OAAO,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc1D,SAAS,CAAC,eAAe,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAEpD,SAAS,CAAC,aAAa,UAAQ;IAEtB,YAAY,IAAI,IAAI;IA2BpB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAKrC;;;;;;;;;OASG;IACH,cAAc,IAAI,IAAI;IA0CtB;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM;IA6B/B;;OAEG;cACa,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAkB3D;;OAEG;IACH,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAarC,SAAS,CAAC,sBAAsB,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,IAAI;IAUzD,MAAM,IAAI,cAAc;CAGlC"}
+{"version":3,"file":"MarkedHighlight.d.ts","sourceRoot":"","sources":["../../../../src/elements/highlight/MarkedHighlight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAMtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;IACrD;;;OAGG;IACyB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAEjE;;;;OAIG;IACyC,QAAQ,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAA;IAEhF;;;;OAIG;IACyC,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;IAElF;;;;;;OAMG;IAEyB,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAA;IAEnE;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;IAElF;;;;;;;;OAQG;IAEyB,QAAQ,CAAC,SAAS,EAAE,QAAQ,GAAG,SAAS,CAAA;IAEpE;;;;;;;OAOG;IACyC,QAAQ,CAAC,yBAAyB,EAAE,OAAO,GAAG,SAAS,CAAA;IAEnG;;OAEG;IACH,IAAI,aAAa,IAAI,WAAW,GAAG,IAAI,CAUtC;cAEkB,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc7D,SAAS,CAAC,eAAe,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAEpD,SAAS,CAAC,aAAa,UAAQ;IAEtB,YAAY,IAAI,IAAI;IAOpB,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;cAKrB,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC;IAsB9C;;;;;;;;;OASG;IACH,cAAc,IAAI,IAAI;IA0CtB;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM;IA6B/B;;OAEG;cACa,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAkB3D;;OAEG;IACH,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAarC,SAAS,CAAC,sBAAsB,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,IAAI;IAUzD,MAAM,IAAI,cAAc;CAGlC"}