@vollowx/seele 0.13.10 → 0.14.0

package/src/base/{experimental/popup.js → popup.js}

@@ -1,68 +1,20 @@
 /**
  * NOTE: demos at dev/pending.html
- * NOTE: should apply writing style on event listeners to other files
- * TODO: consider removing popoverController, but in case of tooltip, reserve
- *       for now
  * TODO: hijack all `hidePopover()`s to allow more complex JS animations
- * TODO: simpler Menu that just inherits List - do we really need a separated
- *       Menu? Why not just `<md-list role="presentation">`?
- *
- * Design: TO BE ADDED
  */
 var _a;
 import { __decorate } from "tslib";
 import { LitElement, html, isServer } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { autoUpdate, computePosition, arrow, flip, offset, shift, } from '@floating-ui/dom';
-import { InternalsAttached } from '../mixins/internals-attached.js';
-import { Attachable, autoAttachToParent, handleControlChange, } from '../mixins/attachable.js';
-import { transformOriginFromArrow } from '../controllers/popover-controller.js';
+import { getFirstTabbable } from '../core/focus.js';
+import { InternalsAttached } from './mixins/internals-attached.js';
+import { Attachable, autoAttachToParent, handleControlChange, } from './mixins/attachable.js';
+import { transformOriginFromArrow } from './controllers/popover-controller.js';
 import { popupStyles } from './popup-styles.css.js';
-// Returns the first tabbable element within an eleent
-//
-// TODO: reverse search?
-export function lookForTabbable(root) {
-    const FOCUSABLE_SELECTOR = [
-        'a[href]',
-        'button',
-        'input',
-        'textarea',
-        'select',
-        'summary',
-        '[tabindex]',
-        '[contenteditable=true]',
-    ].join(',');
-    const isTabbable = (el) => el.matches(FOCUSABLE_SELECTOR) &&
-        !el.hasAttribute('disabled') &&
-        el.getAttribute('tabindex') !== '-1';
-    if ('shadowRoot' in root && root.shadowRoot) {
-        const shadowResult = lookForTabbable(root.shadowRoot);
-        if (shadowResult)
-            return shadowResult;
-    }
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
-        acceptNode: (node) => {
-            const el = node;
-            return isTabbable(el) || el.shadowRoot
-                ? NodeFilter.FILTER_ACCEPT
-                : NodeFilter.FILTER_SKIP;
-        },
-    });
-    let currentNode = walker.nextNode();
-    while (currentNode) {
-        if (isTabbable(currentNode)) {
-            return currentNode;
-        }
-        if (currentNode.shadowRoot) {
-            const shadowFocusable = lookForTabbable(currentNode.shadowRoot);
-            if (shadowFocusable) {
-                return shadowFocusable;
-            }
-        }
-        currentNode = walker.nextNode();
-    }
-    return null;
-}
+/**
+ * When using popup with menu, you need to manually bind them using `aria-controls`
+ */
 let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
     static { this.styles = [popupStyles]; }
     render() {
@@ -72,16 +24,16 @@ let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
         super();
         this.open = false;
         this.noFocusControl = false;
-        this.placement = 'bottom-start';
+        this.align = 'bottom-start';
         this.strategy = 'absolute';
         this.offset = 0;
         this.windowPadding = 8;
         this[_a] = false;
-        this.#onRequestHide = () => {
+        this.#handleRequestHide = () => {
             this.hide();
         };
         // #allowHidePopover = false;
-        // #onBeforeToggle = (e: ToggleEvent) => {
+        // #handleBeforeToggle = (e: ToggleEvent) => {
         //   // Intercept browser light-dismiss (ESC, click outside) or external hidePopover() calls
         //   if (e.newState === 'closed' && !this.#allowHidePopover) {
         //     e.preventDefault();
@@ -90,12 +42,12 @@ let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
         //     }
         //   }
         // };
-        this.#onToggle = (e) => {
+        this.#handleToggle = (e) => {
             e.preventDefault();
             if (e.newState === 'closed' && this.open)
                 this.hide();
         };
-        this.#onFocusOut = (e) => {
+        this.#handleFocusOut = (e) => {
             // for `this` and `this.$control`
             if (this.noFocusControl || !this.open)
                 return;
@@ -112,20 +64,20 @@ let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
                     this.hide();
             });
         };
-        this.#onTriggerClick = (e) => {
+        this.#handleTriggerClick = (e) => {
             e.preventDefault();
             this.toggle();
         };
         this.#dummyArrow = isServer ? null : document.createElement('div');
+        this.setAttribute('notransition', '');
         if (!this.hasAttribute('popover'))
             this.setAttribute('popover', 'auto');
         if (!isServer) {
-            this.addEventListener('request-popup-hide', this.#onRequestHide);
-            // this.addEventListener('beforetoggle', this.#onBeforeToggle);
-            this.addEventListener('toggle', this.#onToggle);
-            this.addEventListener('focusout', this.#onFocusOut);
+            this.addEventListener('request-popup-hide', this.#handleRequestHide);
+            // this.addEventListener('beforetoggle', this.#handleBeforeToggle);
+            this.addEventListener('toggle', this.#handleToggle);
+            this.addEventListener('focusout', this.#handleFocusOut);
         }
-        this.setAttribute('notransition', '');
     }
     connectedCallback() {
         super.connectedCallback();
@@ -137,29 +89,30 @@ let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
     }
     updated(changedProperties) {
         if (changedProperties.has('open')) {
+            this.#syncTriggerAria();
             if (this.open)
                 this._show();
             else
                 this._hide();
-            this.#syncTriggerAria();
         }
     }
     [(_a = autoAttachToParent, handleControlChange)](prev, next) {
         if (prev) {
-            prev.removeEventListener('click', this.#onTriggerClick);
-            prev.removeEventListener('focusout', this.#onFocusOut);
+            prev.removeEventListener('click', this.#handleTriggerClick);
+            prev.removeEventListener('focusout', this.#handleFocusOut);
         }
         if (next) {
-            next.addEventListener('click', this.#onTriggerClick);
-            next.addEventListener('focusout', this.#onFocusOut);
-            next.ariaHasPopup = 'true';
-            next.ariaExpanded = String(this.open);
-            next.ariaControlsElements = [this];
+            next.addEventListener('click', this.#handleTriggerClick);
+            next.addEventListener('focusout', this.#handleFocusOut);
+            const ariaNext = this.$ariaControl ? this.$ariaControl : next;
+            if (!next.ariaHasPopup)
+                ariaNext.ariaHasPopup = 'true';
+            ariaNext.ariaExpanded = String(this.open);
         }
     }
-    #onRequestHide;
+    #handleRequestHide;
     // #allowHidePopover = false;
-    // #onBeforeToggle = (e: ToggleEvent) => {
+    // #handleBeforeToggle = (e: ToggleEvent) => {
     //   // Intercept browser light-dismiss (ESC, click outside) or external hidePopover() calls
     //   if (e.newState === 'closed' && !this.#allowHidePopover) {
     //     e.preventDefault();
@@ -168,23 +121,25 @@ let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
     //     }
     //   }
     // };
-    #onToggle;
-    #onFocusOut;
-    #onTriggerClick;
+    #handleToggle;
+    #handleFocusOut;
+    #handleTriggerClick;
     #syncTriggerAria() {
-        this.$control?.setAttribute('aria-expanded', String(this.open));
+        if (this.$ariaControl)
+            this.$ariaControl.ariaExpanded = String(this.open);
+        else if (this.$control)
+            this.$control.ariaExpanded = String(this.open);
     }
     #focusFirstInteractiveElement() {
         if (this.noFocusControl)
             return;
-        const autoFocusEl = this.querySelector('[autofocus]');
-        if (autoFocusEl) {
-            autoFocusEl.focus();
-            return;
+        const autoFocus = this.querySelector('[autofocus]');
+        if (autoFocus) {
+            autoFocus.focus();
         }
-        const firstFocusable = lookForTabbable(this);
-        if (firstFocusable) {
-            firstFocusable.focus();
+        else {
+            const firstTabbable = getFirstTabbable(this);
+            firstTabbable?.focus();
         }
     }
     async toggle() {
@@ -234,7 +189,7 @@ let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
         if (!trigger)
             return;
         const { x, y, placement, middlewareData } = await computePosition(trigger, this, {
-            placement: this.placement,
+            placement: this.align,
             strategy: this.strategy,
             middleware: [
                 offset(this.offset),
@@ -262,7 +217,7 @@ __decorate([
 ], Popup.prototype, "noFocusControl", void 0);
 __decorate([
     property({ type: String })
-], Popup.prototype, "placement", void 0);
+], Popup.prototype, "align", void 0);
 __decorate([
     property({ type: String })
 ], Popup.prototype, "strategy", void 0);
@@ -270,7 +225,7 @@ __decorate([
     property({ type: Number })
 ], Popup.prototype, "offset", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, attribute: 'window-padding' })
 ], Popup.prototype, "windowPadding", void 0);
 Popup = __decorate([
     customElement('complementary-popup')

package/src/base/radio.js

@@ -1,6 +1,6 @@
 var _a;
 import { __decorate } from "tslib";
-import { LitElement } from 'lit';
+import { isServer, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { FormAssociated } from './mixins/form-associated.js';
 import { InternalsAttached, internals, replaceStates, updateInternals, } from './mixins/internals-attached.js';
@@ -15,17 +15,17 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
         this.#currentName = '';
         this.checked = false;
         this[internals].role = 'radio';
+        if (!isServer) {
+            this.addEventListener('click', this.#handleClick);
+            this.addEventListener('keydown', this.#handleKeyDown);
+        }
     }
     connectedCallback() {
         super.connectedCallback();
         this.#registerToGroup();
         this[updateInternals]();
-        this.addEventListener('click', this.#handleClick);
-        this.addEventListener('keydown', this.#handleKeyDown);
     }
     disconnectedCallback() {
-        this.removeEventListener('click', this.#handleClick);
-        this.removeEventListener('keydown', this.#handleKeyDown);
         this.#unregisterFromGroup();
         super.disconnectedCallback();
     }

package/src/base/select.d.ts

@@ -1,29 +1,24 @@
 import { LitElement, PropertyValues } from 'lit';
-import type { Placement, Strategy } from '@floating-ui/dom';
 import type { Field } from './field.js';
-import type { Menu, MenuItemFocusEvent, MenuSelectEvent } from './menu.js';
 import type { Option } from './option.js';
+import type { Popup } from './popup.js';
+import type { Menu, MenuItemFocusEvent, MenuActionEvent } from './menu.js';
 declare const VALUE: unique symbol;
 declare const Base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/focus-delegated.js").FocusDelegatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 /**
  * @csspart field
+ * @csspart popup
  * @csspart menu
- * @csspart items
  *
  * @fires {Event} change - Fires when the value is changed.
  * @fires {Event} input - Fires when the value is changed.
  *
  * TODO: Render multiple values
- * FIXME: `aria-expanded` set twice by both Lit and Menu
  */
 export declare class Select extends Base {
     #private;
     required: boolean;
     error: boolean;
-    quick: boolean;
-    offset: number;
-    align: Placement;
-    alignStrategy: Strategy;
     open: boolean;
     /**
      * Text to display in the field. Only set for SSR.
@@ -37,6 +32,7 @@ export declare class Select extends Base {
     set selectedIndex(index: number);
     get selectedOptions(): Option[];
     $field: Field;
+    $popup: Popup;
     $menu: Menu;
     private lastUserSetValue;
     private lastUserSetSelectedIndex;
@@ -44,49 +40,11 @@ export declare class Select extends Base {
     private lastSelectedOptionRecords;
     render(): import("lit-html").TemplateResult<1>;
     /**
-     * Example content:
-     *
-     * ```html
-     * <your-field
-     *   id="field"
-     *   part="field"
-     *   @click=${this.toggle}
-     *   @keydown=${this.handleFieldKeydown}
-     *   tabindex=${this.disabled ? '-1' : '0'}
-     *   role="combobox"
-     *   aria-haspopup="listbox"
-     *   aria-expanded=${this.open}
-     *   aria-controls="menu"
-     *   aria-disabled=${this.disabled}
-     *   aria-required=${this.required}
-     * >
-     *   ${this.renderFieldContent()}
-     * </your-field>
-     * ```
+     * Check example content from the m3 implementation
      */
     protected renderField(): import("lit-html").TemplateResult<1>;
     /**
-     * Example content:
-     *
-     * ```html
-     * <your-menu
-     *   id="menu"
-     *   for="field"
-     *   type="listbox"
-     *   data-tabindex="-1"
-     *   ?quick="${this.quick}"
-     *   offset="${this.offset}"
-     *   align="${this.align}"
-     *   align-strategy="${this.alignStrategy}"
-     *   keep-open-blur
-     *   no-focus-control
-     *   ?open="${this.open}"
-     *   @item-focus="${this.handleMenuItemFocus}"
-     *   @select="${this.handleMenuSelect}"
-     * >
-     *   <slot part="items" @slotchange=${this.handleSlotChange}></slot>
-     * </your-menu>
-     * ```
+     * Check example content from the m3 implementation
      */
     protected renderMenu(): import("lit-html").TemplateResult<1>;
     protected renderFieldContent(): import("lit-html").TemplateResult<1>;
@@ -94,13 +52,9 @@ export declare class Select extends Base {
     protected firstUpdated(changed: PropertyValues<Select>): Promise<void>;
     protected update(changed: PropertyValues<Select>): void;
     protected updated(changed: PropertyValues): void;
-    /**
-     * TODO: Handle clear action
-     */
     protected _handleFieldKeydown(event: KeyboardEvent): void;
-    protected _handleMenuSelect(event: MenuSelectEvent): void;
+    protected _handleMenuAction(event: MenuActionEvent): void;
     protected _handleMenuItemFocus(event: MenuItemFocusEvent): void;
-    protected _handleFocusOut(event: FocusEvent): void;
     protected _handleSlotChange(): void;
     private selectItem;
     private initUserSelection;

package/src/base/select.js

@@ -5,18 +5,18 @@ import { property, query } from 'lit/decorators.js';
 import { InternalsAttached } from './mixins/internals-attached.js';
 import { FocusDelegated } from './mixins/focus-delegated.js';
 import { FormAssociated } from './mixins/form-associated.js';
+import { getActionFromKey, MenuAction } from './menu.js';
 const VALUE = Symbol('value');
 const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
 /**
  * @csspart field
+ * @csspart popup
  * @csspart menu
- * @csspart items
  *
  * @fires {Event} change - Fires when the value is changed.
  * @fires {Event} input - Fires when the value is changed.
  *
  * TODO: Render multiple values
- * FIXME: `aria-expanded` set twice by both Lit and Menu
  */
 export class Select extends Base {
     static { _a = VALUE; }
@@ -50,51 +50,13 @@ export class Select extends Base {
         return html `${this.renderField()}${this.renderMenu()}`;
     }
     /**
-     * Example content:
-     *
-     * ```html
-     * <your-field
-     *   id="field"
-     *   part="field"
-     *   @click=${this.toggle}
-     *   @keydown=${this.handleFieldKeydown}
-     *   tabindex=${this.disabled ? '-1' : '0'}
-     *   role="combobox"
-     *   aria-haspopup="listbox"
-     *   aria-expanded=${this.open}
-     *   aria-controls="menu"
-     *   aria-disabled=${this.disabled}
-     *   aria-required=${this.required}
-     * >
-     *   ${this.renderFieldContent()}
-     * </your-field>
-     * ```
+     * Check example content from the m3 implementation
      */
     renderField() {
         return html ``;
     }
     /**
-     * Example content:
-     *
-     * ```html
-     * <your-menu
-     *   id="menu"
-     *   for="field"
-     *   type="listbox"
-     *   data-tabindex="-1"
-     *   ?quick="${this.quick}"
-     *   offset="${this.offset}"
-     *   align="${this.align}"
-     *   align-strategy="${this.alignStrategy}"
-     *   keep-open-blur
-     *   no-focus-control
-     *   ?open="${this.open}"
-     *   @item-focus="${this.handleMenuItemFocus}"
-     *   @select="${this.handleMenuSelect}"
-     * >
-     *   <slot part="items" @slotchange=${this.handleSlotChange}></slot>
-     * </your-menu>
-     * ```
+     * Check example content from the m3 implementation
      */
     renderMenu() {
         return html ``;
@@ -104,15 +66,8 @@ export class Select extends Base {
     }
     constructor() {
         super();
-        // Form-related
         this.required = false;
-        // Passed to field
         this.error = false;
-        // Passed to menu
-        this.quick = false;
-        this.offset = 0;
-        this.align = 'bottom-start';
-        this.alignStrategy = 'absolute';
         this.open = false;
         /**
          * Text to display in the field. Only set for SSR.
@@ -128,7 +83,7 @@ export class Select extends Base {
             this.dispatchEvent(new Event('change', { bubbles: true }));
         };
         if (!isServer) {
-            this.addEventListener('focusout', this._handleFocusOut);
+            this.addEventListener('focusout', this.#handleFocusOut.bind(this));
         }
     }
     async firstUpdated(changed) {
@@ -160,35 +115,55 @@ export class Select extends Base {
                 this.#focusSelectedItemOrFirst();
             }
             else {
-                this.$field.setAttribute('aria-activedescendant', '');
+                this.$field.ariaActiveDescendantElement = null;
             }
         }
     }
-    /**
-     * TODO: Handle clear action
-     */
     _handleFieldKeydown(event) {
         if (this.disabled)
             return;
-        const eventClone = new KeyboardEvent(event.type, event);
-        eventClone.preventDefault = () => event.preventDefault();
-        eventClone.stopPropagation = () => event.stopPropagation();
-        this.$menu.$menu.dispatchEvent(eventClone);
+        if (!this.open) {
+            if (['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
+                event.preventDefault();
+                this.open = true;
+                return;
+            }
+            const action = getActionFromKey(event);
+            if (action === MenuAction.Type) {
+                this.open = true;
+            }
+            else {
+                return;
+            }
+        }
+        if (this.open)
+            this.$menu.handleKeyDown(event);
     }
-    _handleMenuSelect(event) {
+    _handleMenuAction(event) {
         if (this.selectItem(event.detail.item)) {
             this.#dispatchChangeEvent();
+            this.$field.focus();
+            // For Narrator, activating an option moves focus the document then
         }
-        this.open = false;
     }
     _handleMenuItemFocus(event) {
-        this.$field.setAttribute('aria-activedescendant', event.detail.item.id);
+        this.$field.ariaActiveDescendantElement = event.detail.item;
     }
-    _handleFocusOut(event) {
-        const relatedTarget = event.relatedTarget;
-        if (!this.contains(relatedTarget) && !this.$menu.contains(relatedTarget)) {
-            this.open = false;
+    #handleFocusOut(event) {
+        if (!this.open)
+            return;
+        const target = event.relatedTarget;
+        if (target && this.contains(target)) {
+            return;
         }
+        if (target) {
+            this.$popup.hide();
+            return;
+        }
+        requestAnimationFrame(() => {
+            if (!document.hasFocus())
+                this.$popup.hide();
+        });
     }
     _handleSlotChange() {
         // When slots change, check for initially selected items if value is not set
@@ -298,18 +273,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "error", void 0);
-__decorate([
-    property({ type: Boolean })
-], Select.prototype, "quick", void 0);
-__decorate([
-    property({ type: Number })
-], Select.prototype, "offset", void 0);
-__decorate([
-    property({ reflect: true })
-], Select.prototype, "align", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'align-strategy' })
-], Select.prototype, "alignStrategy", void 0);
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "open", void 0);
@@ -323,8 +286,11 @@ __decorate([
     property({ type: Number, attribute: 'selected-index' })
 ], Select.prototype, "selectedIndex", null);
 __decorate([
-    query('[part="field"]')
+    query('[part=field]')
 ], Select.prototype, "$field", void 0);
 __decorate([
-    query('[part="menu"]')
+    query('[part=popup]')
+], Select.prototype, "$popup", void 0);
+__decorate([
+    query('[part=menu]')
 ], Select.prototype, "$menu", void 0);

package/src/base/tooltip.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { focusVisible } from '../core/focus-visible.js';
+import { focusVisible } from '../core/focus.js';
 import { Attachable, handleControlChange } from './mixins/attachable.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
 import { PopoverController } from './controllers/popover-controller.js';
@@ -139,7 +139,7 @@ __decorate([
     property({ type: Number, reflect: true })
 ], Tooltip.prototype, "offset", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ type: Boolean, reflect: true, attribute: 'force-invisible' })
 ], Tooltip.prototype, "forceInvisible", void 0);
 __decorate([
     query('slot')

package/src/core/focus.d.ts

@@ -0,0 +1,11 @@
+export declare let focusVisible: boolean;
+export declare function setFocusVisible(value: boolean): void;
+/**
+ * Recursively walks the DOM tree, piercing Shadow DOM boundaries and
+ * resolving slots, to find the first tabbable element.
+ *
+ * TODO: consider use document.createTreeWalker which might be faster, yet more
+ *       complex in code; may find references in the core/experimental/popup
+ *       before the commit that added this function
+ */
+export declare function getFirstTabbable(root: Element | DocumentFragment): HTMLElement | null;

package/src/core/focus.js

@@ -0,0 +1,53 @@
+import { isServer } from 'lit';
+export let focusVisible = false;
+export function setFocusVisible(value) {
+    focusVisible = value;
+}
+if (!isServer) {
+    window.addEventListener('keydown', () => (focusVisible = true), {
+        capture: true,
+    });
+    window.addEventListener('mousedown', () => (focusVisible = false), {
+        capture: true,
+    });
+}
+/**
+ * Recursively walks the DOM tree, piercing Shadow DOM boundaries and
+ * resolving slots, to find the first tabbable element.
+ *
+ * TODO: consider use document.createTreeWalker which might be faster, yet more
+ *       complex in code; may find references in the core/experimental/popup
+ *       before the commit that added this function
+ */
+export function getFirstTabbable(root) {
+    if (root.nodeName === 'SLOT') {
+        const assigned = root.assignedElements({
+            flatten: true,
+        });
+        for (const el of assigned) {
+            const found = getFirstTabbable(el);
+            if (found)
+                return found;
+        }
+        return null;
+    }
+    if (root instanceof HTMLElement) {
+        const isTabbable = root.tabIndex >= 0 &&
+            !root.hasAttribute('disabled') &&
+            !root.hidden &&
+            root.getAttribute('tabindex') !== '-1';
+        if (isTabbable)
+            return root;
+    }
+    if ('shadowRoot' in root && root.shadowRoot) {
+        const found = getFirstTabbable(root.shadowRoot);
+        if (found)
+            return found;
+    }
+    for (const child of root.children) {
+        const found = getFirstTabbable(child);
+        if (found)
+            return found;
+    }
+    return null;
+}

package/src/m3/autocomplete/autocomplete-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const autocompleteStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}::slotted([slot=input]){cursor:pointer;outline:none;width:100%}[part=menu]{--md-menu-max-height:300px;min-width:100%}`;
+export const autocompleteStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}::slotted([slot=input]){cursor:pointer;outline:none;width:100%}[part=popup]{--md-menu-max-height:300px;min-width:inherit}`;

package/src/m3/autocomplete/autocomplete.d.ts

@@ -1,4 +1,5 @@
 import { Autocomplete } from '../../base/autocomplete.js';
+import '../popup/popup.js';
 import '../menu/menu.js';
 /**
  * TODO: Check if manually dispatching input/change events on input is necessary