@vollowx/seele 0.13.10 → 0.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.13.10",
+  "version": "0.14.1",
   "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",

package/src/all.d.ts

@@ -17,8 +17,10 @@ import './m3/list/list-item.js';
 import './m3/loading-indicator/loading-indicator.js';
 import './m3/menu/menu.js';
 import './m3/menu/menu-item.js';
+import './m3/menu/composed-menu.js';
 import './m3/navigation/navigation-rail.js';
 import './m3/navigation/navigation-rail-item.js';
+import './m3/popup/popup.js';
 import './m3/radio/radio.js';
 import './m3/ripple/ripple.js';
 import './m3/select/filled-select.js';
@@ -35,5 +37,3 @@ import './m3/text-field/outlined-text-field.js';
 import './m3/toolbar/toolbar.js';
 import './m3/tooltip/tooltip.js';
 import './win98/button/button.js';
-import './base/experimental/popup.js';
-import './m3/experimental/popup.js';

package/src/all.js

@@ -17,8 +17,10 @@ import './m3/list/list-item.js';
 import './m3/loading-indicator/loading-indicator.js';
 import './m3/menu/menu.js';
 import './m3/menu/menu-item.js';
+import './m3/menu/composed-menu.js';
 import './m3/navigation/navigation-rail.js';
 import './m3/navigation/navigation-rail-item.js';
+import './m3/popup/popup.js';
 import './m3/radio/radio.js';
 import './m3/ripple/ripple.js';
 import './m3/select/filled-select.js';
@@ -35,5 +37,3 @@ import './m3/text-field/outlined-text-field.js';
 import './m3/toolbar/toolbar.js';
 import './m3/tooltip/tooltip.js';
 import './win98/button/button.js';
-import './base/experimental/popup.js';
-import './m3/experimental/popup.js';

package/src/base/autocomplete.d.ts

@@ -1,57 +1,33 @@
 import { LitElement, PropertyValues } from 'lit';
-import type { Placement, Strategy } from '@floating-ui/dom';
-import type { Menu, MenuSelectEvent } from './menu.js';
+import type { Popup } from './popup.js';
+import type { Menu, MenuActionEvent } from './menu.js';
 declare const Base: Constructor<import("./mixins/focus-delegated.js").FocusDelegatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
-type AutocompleteMode = 'none' | 'list' | 'both';
+export type AutocompleteMode = 'none' | 'list' | 'both';
 /**
  * TODO: Check if manually dispatching input/change events on input is necessary
- * TODO: handle slotchange
  */
 export declare class Autocomplete extends Base {
+    #private;
     open: boolean;
-    quick: boolean;
-    offset: number;
-    align: Placement;
-    alignStrategy: Strategy;
-    keepOpenSelect: boolean;
     mode: AutocompleteMode;
+    $popup: Popup;
     $menu: Menu;
     inputSlotElements: HTMLElement[];
     itemSlotElements: HTMLElement[];
     private get $input();
     render(): import("lit-html").TemplateResult<1>;
     /**
-     * Example content:
-     *
-     * ```html
-     * <your-menu
-     *   part="menu"
-     *   id="menu"
-     *   type="listbox"
-     *   data-tabindex="-1"
-     *   ?quick="${this.quick}"
-     *   .offset=${this.offset}
-     *   .align=${this.align}
-     *   .alignStrategy=${this.alignStrategy}
-     *   ?keep-open-select=${this.keepOpenSelect}
-     *   no-focus-control
-     *   ?open=${this.open}
-     *   @open="${() => (this.open = true)}"
-     *   @close="${() => (this.open = false)}"
-     *   @select=${this.handleMenuSelect}
-     * >
-     *   <slot @slotchange=${this.handleItemsSlotChange}></slot>
-     * </your-menu>
-     * ```
+     * Check example content from the m3 implementation
      */
     renderMenu(): import("lit-html").TemplateResult<1>;
+    constructor();
     private handleInputSlotChange;
-    protected handleItemsSlotChange(): void;
+    protected handleItemsSlotChange(): Promise<void>;
     private handleInput;
     private applyInlineAutoComplete;
     private filterOptions;
     private handleInputKeydown;
-    protected handleMenuSelect(event: MenuSelectEvent): void;
+    protected handleMenuAction(event: MenuActionEvent): void;
     protected updated(changed: PropertyValues): void;
 }
 export {};

package/src/base/autocomplete.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { LitElement, html, isServer } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { ensureReady } from '../core/ensure-ready.js';
 import { InternalsAttached } from './mixins/internals-attached.js';
@@ -7,20 +7,8 @@ import { FocusDelegated } from './mixins/focus-delegated.js';
 const Base = FocusDelegated(InternalsAttached(LitElement));
 /**
  * TODO: Check if manually dispatching input/change events on input is necessary
- * TODO: handle slotchange
  */
 export class Autocomplete extends Base {
-    constructor() {
-        super(...arguments);
-        this.open = false;
-        // Passed to menu
-        this.quick = false;
-        this.offset = 0;
-        this.align = 'bottom-start';
-        this.alignStrategy = 'absolute';
-        this.keepOpenSelect = false;
-        this.mode = 'none';
-    }
     get $input() {
         return this.inputSlotElements[0];
     }
@@ -28,32 +16,35 @@ export class Autocomplete extends Base {
         return html `<slot name="input" @slotchange="${this.handleInputSlotChange}"></slot>${this.renderMenu()}`;
     }
     /**
-     * Example content:
-     *
-     * ```html
-     * <your-menu
-     *   part="menu"
-     *   id="menu"
-     *   type="listbox"
-     *   data-tabindex="-1"
-     *   ?quick="${this.quick}"
-     *   .offset=${this.offset}
-     *   .align=${this.align}
-     *   .alignStrategy=${this.alignStrategy}
-     *   ?keep-open-select=${this.keepOpenSelect}
-     *   no-focus-control
-     *   ?open=${this.open}
-     *   @open="${() => (this.open = true)}"
-     *   @close="${() => (this.open = false)}"
-     *   @select=${this.handleMenuSelect}
-     * >
-     *   <slot @slotchange=${this.handleItemsSlotChange}></slot>
-     * </your-menu>
-     * ```
+     * Check example content from the m3 implementation
      */
     renderMenu() {
         return html ``;
     }
+    constructor() {
+        super();
+        this.open = false;
+        this.mode = 'none';
+        if (!isServer) {
+            this.addEventListener('focusout', this.#handleFocusOut.bind(this));
+        }
+    }
+    #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();
+        });
+    }
     // TODO: handle multiple calls on this function, currently double-call
     //       disallowed
     async handleInputSlotChange() {
@@ -61,16 +52,15 @@ export class Autocomplete extends Base {
         const input = this.$input;
         const $realInput = input.$inputOrTextarea;
         $realInput.role = 'combobox';
-        $realInput.ariaExpanded = String(this.open);
         $realInput.ariaHasPopup = 'listbox';
         $realInput.ariaAutoComplete = this.mode;
         $realInput.ariaControlsElements = [this.$menu];
         input.addEventListener('input', this.handleInput.bind(this));
         input.addEventListener('keydown', this.handleInputKeydown.bind(this));
-        input.addEventListener('click', () => (this.open = !this.open));
-        this.$menu.attach($realInput);
+        this.$popup.$ariaControl = $realInput;
+        this.$popup.attach(input);
     }
-    handleItemsSlotChange() {
+    async handleItemsSlotChange() {
         // Initial filter based on current input value (if any)
         this.filterOptions(this.$input?.value || '');
     }
@@ -113,15 +103,17 @@ export class Autocomplete extends Base {
         if (this.$input?.disabled)
             return;
         if (['Enter', 'Escape', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
-            const eventClone = new KeyboardEvent(event.type, event);
-            eventClone.preventDefault = () => event.preventDefault();
-            eventClone.stopPropagation = () => event.stopPropagation();
-            this.$menu.$menu.dispatchEvent(eventClone);
-            if (event.key === 'Enter' && !this.keepOpenSelect)
-                this.open = false;
+            if (!this.open && ['ArrowUp', 'ArrowDown'].includes(event.key)) {
+                event.preventDefault();
+                this.open = true;
+                return;
+            }
+            if (this.open) {
+                this.$menu.handleKeyDown(event);
+            }
         }
     }
-    handleMenuSelect(event) {
+    handleMenuAction(event) {
         const selectedItem = event.detail.item;
         const newValue = selectedItem.getAttribute('value') ||
             selectedItem.textContent?.trim() ||
@@ -129,9 +121,6 @@ export class Autocomplete extends Base {
         if (this.$input) {
             this.$input.value = newValue;
         }
-        if (!this.keepOpenSelect) {
-            this.open = false;
-        }
     }
     updated(changed) {
         if (changed.has('open') && this.$input) {
@@ -145,26 +134,14 @@ export class Autocomplete extends Base {
 __decorate([
     property({ type: Boolean })
 ], Autocomplete.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean })
-], Autocomplete.prototype, "quick", void 0);
-__decorate([
-    property({ type: Number })
-], Autocomplete.prototype, "offset", void 0);
-__decorate([
-    property({ reflect: true })
-], Autocomplete.prototype, "align", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'align-strategy' })
-], Autocomplete.prototype, "alignStrategy", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'keep-open-select' })
-], Autocomplete.prototype, "keepOpenSelect", void 0);
 __decorate([
     property()
 ], Autocomplete.prototype, "mode", void 0);
 __decorate([
-    query('[part="menu"]')
+    query('[part=popup]')
+], Autocomplete.prototype, "$popup", void 0);
+__decorate([
+    query('[part=menu]')
 ], Autocomplete.prototype, "$menu", void 0);
 __decorate([
     queryAssignedElements({ slot: 'input', flatten: true })

package/src/base/button.d.ts

@@ -7,7 +7,6 @@ export declare class Button extends Base {
     static styles: any[];
     constructor();
     connectedCallback(): void;
-    disconnectedCallback(): void;
     updated(changed: Map<string, any>): void;
     [updateInternals](): void;
     _handleClick(e: Event): void;

package/src/base/button.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { LitElement } from 'lit';
+import { isServer, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { InternalsAttached, internals, updateInternals, } from './mixins/internals-attached.js';
 import { FormAssociated } from './mixins/form-associated.js';
@@ -23,7 +23,7 @@ export class Button extends Base {
             // TODO: supporting `Enter` also requires listening on `focusout`
         };
         this.#handleKeyUp = (e) => {
-            if (e.key === ' ') {
+            if (e.key === ' ' && this[internals].states.has('active')) {
                 this[internals].states.delete('active');
                 e.preventDefault();
                 e.stopPropagation();
@@ -37,20 +37,16 @@ export class Button extends Base {
         // Double `requestAnimationFrame` is necessary since the callback inside is
         // called before the nth frame is printed.
         this.setAttribute('notransition', '');
+        if (!isServer) {
+            this.addEventListener('keydown', this.#handleKeyDown);
+            this.addEventListener('keyup', this.#handleKeyUp);
+            this.addEventListener('click', this._handleClick.bind(this));
+        }
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('keydown', this.#handleKeyDown);
-        this.addEventListener('keyup', this.#handleKeyUp);
-        this.addEventListener('click', this._handleClick.bind(this));
         requestAnimationFrame(() => requestAnimationFrame(() => this.removeAttribute('notransition')));
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('keydown', this.#handleKeyDown);
-        this.removeEventListener('keyup', this.#handleKeyUp);
-        this.removeEventListener('click', this._handleClick.bind(this));
-    }
     updated(changed) {
         if (changed.has('disabled'))
             this[updateInternals]();

package/src/base/checkbox.d.ts

@@ -7,8 +7,6 @@ export declare class Checkbox extends Base {
     required: boolean;
     static styles: any[];
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     protected updated(changed: Map<string, any>): void;
     protected updateState(): void;
     protected toggleChecked(): void;

package/src/base/checkbox.js

@@ -1,5 +1,5 @@
 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, } from './mixins/internals-attached.js';
@@ -39,18 +39,11 @@ export class Checkbox extends Base {
         this.checked = this.hasAttribute('checked');
         this.indeterminate = this.hasAttribute('indeterminate');
         this.updateState();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this.#handleClick);
-        this.addEventListener('keydown', this.#handleKeyDown);
-        this.addEventListener('keyup', this.#handleKeyUp);
-    }
-    disconnectedCallback() {
-        this.removeEventListener('click', this.#handleClick);
-        this.removeEventListener('keydown', this.#handleKeyDown);
-        this.removeEventListener('keyup', this.#handleKeyUp);
-        super.disconnectedCallback();
+        if (!isServer) {
+            this.addEventListener('click', this.#handleClick);
+            this.addEventListener('keydown', this.#handleKeyDown);
+            this.addEventListener('keyup', this.#handleKeyUp);
+        }
     }
     updated(changed) {
         if (changed.has('checked') ||

package/src/base/controllers/list-controller.d.ts

@@ -34,4 +34,5 @@ export declare class ListController<Item extends ListItem> implements ReactiveCo
     focusPreviousItem(): void;
     handleSlotChange(): void;
 }
+export declare function filterOptions(options: string[], filter: string, exclude?: string[]): string[];
 export declare function getIndexByLetter(options: string[], filter: string, startIndex?: number): number;

package/src/base/controllers/list-controller.js

@@ -1,4 +1,3 @@
-import { filterOptions } from '../menu.js';
 export class ListController {
     constructor(host, config) {
         this._focusedItem = null;
@@ -99,6 +98,12 @@ export class ListController {
         this._focusedItem = index >= 0 ? items[index] : null;
     }
 }
+export function filterOptions(options = [], filter, exclude = []) {
+    return options.filter((option) => {
+        const matches = option.toLowerCase().indexOf(filter.toLowerCase()) === 0;
+        return matches && exclude.indexOf(option) < 0;
+    });
+}
 export function getIndexByLetter(options, filter, startIndex = 0) {
     const orderedOptions = [
         ...options.slice(startIndex),

package/src/base/dialog.d.ts

@@ -15,6 +15,6 @@ import { LitElement } from 'lit';
 export declare class Dialog extends LitElement {
     $dialog: HTMLDialogElement;
     _handleCancel: (e: Event) => void;
-    show(): void;
-    close(): void;
+    show(): Promise<void>;
+    close(): Promise<void>;
 }

package/src/base/dialog.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { query } from 'lit/decorators.js';
+import { getFirstTabbable } from '../core/focus.js';
 /**
  * @csspart dialog
  *
@@ -22,10 +23,18 @@ export class Dialog extends LitElement {
             this.close();
         };
     }
-    show() {
+    async show() {
         this.$dialog.showModal();
+        const autoFocus = this.querySelector('[autofocus]');
+        if (autoFocus) {
+            autoFocus.focus();
+        }
+        else {
+            const firstTabbable = getFirstTabbable(this);
+            firstTabbable?.focus();
+        }
     }
-    close() {
+    async close() {
         this.$dialog.close();
     }
 }

package/src/base/list-item.d.ts

@@ -7,7 +7,7 @@ export declare class ListItem extends ListItem_base {
     selected: boolean;
     focused: boolean;
     get displayText(): string;
-    connectedCallback(): void;
+    constructor();
     protected updated(changed: Map<string, any>): void;
     focus(): void;
     blur(): void;

package/src/base/list-item.js

@@ -1,29 +1,28 @@
 import { __decorate } from "tslib";
-import { LitElement } from 'lit';
+import { isServer, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { genUniqueId } from '../core/unique-id.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
 import { FormAssociated } from './mixins/form-associated.js';
 import { hiddenStyles } from './hidden-styles.css.js';
 export class ListItem extends FormAssociated(InternalsAttached(LitElement)) {
-    constructor() {
-        super(...arguments);
-        this._role = 'option';
-        this.selected = false;
-        this.focused = false;
-    }
     static { this.styles = [hiddenStyles]; }
     get displayText() {
         return this.innerText.trim();
     }
-    connectedCallback() {
-        super.connectedCallback();
+    // Accessibility tools, particularly Narrator, only fires `click` event on
+    // elements that have listeners for them.
+    #handleDummy() { }
+    constructor() {
+        super();
+        this._role = 'option';
+        this.selected = false;
+        this.focused = false;
         this.setAttribute('seele-base', 'option');
         this[internals].role = this._role;
         this.setAttribute('tabindex', '-1');
         this.#updateInternals();
-        if (!this.id)
-            this.id = genUniqueId('item');
+        if (!isServer)
+            this.addEventListener('click', this.#handleDummy);
     }
     updated(changed) {
         super.updated(changed);

package/src/base/list.d.ts

@@ -1,54 +1,37 @@
+/**
+ * TODO: currently list and menu has too much in common, should be split into
+ *       menu, listbox and a LinearFocusController for tabs/toolbars
+ */
 import { LitElement } from 'lit';
 import type { ListItem } from './list-item.js';
-declare const Base: Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
-interface ListSelectDetail {
+export interface ListboxSelectDetail {
     item: ListItem;
     index: number;
 }
-export type ListSelectEvent = CustomEvent<ListSelectDetail>;
-interface ItemFocusDetail {
+export type ListboxSelectEvent = CustomEvent<ListboxSelectDetail>;
+export interface ItemFocusDetail {
     item: ListItem;
+    index: number;
 }
 export type ListItemFocusEvent = CustomEvent<ItemFocusDetail>;
+declare const List_base: Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 /**
  * @csspart items
- *
- * @fires {Event} open - Fires when the menu is opened.
- * @fires {Event} close - Fires when the menu is closed.
- * @fires {ListSelectEvent} select - Fires when an item is selected.
+ * @fires {ListboxSelectEvent} select - Fires when an item is selected.
  * @fires {ListItemFocusEvent} item-focus - Fires when an item is focused
  */
-export declare class List extends Base {
+export declare class List extends List_base {
     #private;
-    readonly _scrollPadding: number;
     noFocusControl: boolean;
-    slotItems: Array<ListItem | HTMLElement>;
+    slotItems: Array<ListItem>;
     get $items(): ListItem[];
-    render(): import("lit-html").TemplateResult<1>;
-    renderItemSlot(): import("lit-html").TemplateResult<1>;
-    private readonly listController;
-    constructor();
-    protected updated(changed: Map<string, any>): void;
     get currentIndex(): number;
     focusFirstItem(): void;
     focusLastItem(): void;
     focusItem(item: ListItem): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private readonly listController;
+    constructor();
+    handleKeyDown(event: KeyboardEvent): void;
 }
-export declare const MenuActions: {
-    Close: number;
-    CloseSelect: number;
-    First: number;
-    Last: number;
-    Next: number;
-    Open: number;
-    PageDown: number;
-    PageUp: number;
-    Previous: number;
-    Select: number;
-    Type: number;
-};
-export declare function filterOptions(options: string[], filter: string, exclude?: string[]): string[];
-export declare function getActionFromKey(event: KeyboardEvent): number;
-export declare function getUpdatedIndex(currentIndex: number, maxIndex: number, action: number): number;
-export declare function scrollItemIntoView(list: HTMLElement, item: HTMLElement, paddingY?: number): void;
 export {};