@vollowx/seele 0.11.2 → 0.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.11.2",
+  "version": "0.12.2",
   "description": "Standard Extensible Elements. A web components library that can be styled and extended freely, pre-providing components in Material Design 3.",
   "author": "vollowx",
   "license": "Apache-2.0",
@@ -49,20 +49,20 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@swc/core": "^1.15.11",
-    "@types/bun": "^1.3.8",
+    "@swc/core": "^1.15.18",
+    "@types/bun": "^1.3.11",
     "@web/dev-server": "^0.4.6",
-    "@web/dev-server-esbuild": "^1.0.4",
+    "@web/dev-server-esbuild": "^1.0.5",
     "chokidar": "^5.0.0",
-    "lightningcss": "^1.31.1",
-    "postcss": "^8.5.6",
+    "lightningcss": "^1.32.0",
+    "postcss": "^8.5.8",
     "postcss-cli": "^11.0.1",
     "postcss-sorting": "^9.1.0",
     "prettier": "^3.8.1"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.5",
-    "@swc/helpers": "^0.5.18",
+    "@floating-ui/dom": "^1.7.6",
+    "@swc/helpers": "^0.5.19",
     "lit": "^3.3.2"
   }
 }

package/src/all.js

@@ -1,3 +1,4 @@
+export { M3Autocomplete } from './m3/autocomplete/autocomplete.js';
 export { M3Button } from './m3/button/common-button.js';
 export { M3ButtonToggle } from './m3/button/common-button-toggle.js';
 export { M3IconButton } from './m3/button/icon-button.js';

package/src/base/autocomplete.js

@@ -0,0 +1,188 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { LitElement, html } from 'lit';
+import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { InternalsAttached } from './mixins/internals-attached.js';
+import { FocusDelegated } from './mixins/focus-delegated.js';
+const Base = FocusDelegated(InternalsAttached(LitElement));
+/**
+ * TODO: Check if manually dispatching input/change events on input is necessary
+ */ export class Autocomplete extends Base {
+    get $input() {
+        return this.inputSlotElements[0];
+    }
+    render() {
+        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>
+   * ```
+   */ renderMenu() {
+        return html``;
+    }
+    handleInputSlotChange() {
+        const input = this.$input;
+        if (!input) return;
+        const $realInput = this.$input.$inputOrTextarea;
+        if ($realInput) {
+            $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);
+        }
+    }
+    handleItemsSlotChange() {
+        // Initial filter based on current input value (if any)
+        this.filterOptions(this.$input?.value || '');
+    }
+    handleInput(event) {
+        const inputEl = this.$input.$inputOrTextarea;
+        const currentValue = inputEl.value;
+        this.open = true;
+        // Filter items based on current value
+        const firstMatch = this.filterOptions(currentValue);
+        // Inline completion logic (mode = both)
+        if (this.mode === 'both' && event.inputType !== 'deleteContentBackward') {
+            if (firstMatch && currentValue.length > 0) {
+                this.applyInlineAutoComplete(inputEl, firstMatch, currentValue);
+            }
+        }
+    }
+    applyInlineAutoComplete(inputEl, item, typedValue) {
+        const suggestion = item.textContent?.trim() || '';
+        if (suggestion.toLowerCase().startsWith(typedValue.toLowerCase())) {
+            inputEl.value = suggestion;
+            inputEl.setSelectionRange(typedValue.length, suggestion.length);
+        }
+    }
+    filterOptions(searchTerm) {
+        if (this.mode === 'none') return null;
+        const normalizedSearch = searchTerm.toLowerCase();
+        let firstMatch = null;
+        this.itemSlotElements.forEach((item)=>{
+            const text = (item.textContent || '').toLowerCase().trim();
+            const isMatch = text.startsWith(normalizedSearch);
+            item.hidden = !isMatch;
+            if (isMatch && !firstMatch) {
+                firstMatch = item;
+            }
+        });
+        return firstMatch;
+    }
+    handleInputKeydown(event) {
+        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;
+        }
+    }
+    handleMenuSelect(event) {
+        const selectedItem = event.detail.item;
+        const newValue = selectedItem.getAttribute('value') || selectedItem.textContent?.trim() || '';
+        if (this.$input) {
+            this.$input.value = newValue;
+        }
+        if (!this.keepOpenSelect) {
+            this.open = false;
+        }
+    }
+    updated(changed) {
+        if (changed.has('open') && this.$input) {
+            const $input = this.$input.$inputOrTextarea;
+            if ($input) {
+                $input.ariaExpanded = String(this.open);
+            }
+        }
+    }
+    constructor(...args){
+        super(...args), 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';
+    }
+}
+_ts_decorate([
+    property({
+        type: Boolean
+    })
+], Autocomplete.prototype, "open", void 0);
+_ts_decorate([
+    property({
+        type: Boolean
+    })
+], Autocomplete.prototype, "quick", void 0);
+_ts_decorate([
+    property({
+        type: Number
+    })
+], Autocomplete.prototype, "offset", void 0);
+_ts_decorate([
+    property({
+        reflect: true
+    })
+], Autocomplete.prototype, "align", void 0);
+_ts_decorate([
+    property({
+        type: String,
+        reflect: true,
+        attribute: 'align-strategy'
+    })
+], Autocomplete.prototype, "alignStrategy", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        attribute: 'keep-open-select'
+    })
+], Autocomplete.prototype, "keepOpenSelect", void 0);
+_ts_decorate([
+    property()
+], Autocomplete.prototype, "mode", void 0);
+_ts_decorate([
+    query('[part="menu"]')
+], Autocomplete.prototype, "$menu", void 0);
+_ts_decorate([
+    queryAssignedElements({
+        slot: 'input',
+        flatten: true
+    })
+], Autocomplete.prototype, "inputSlotElements", void 0);
+_ts_decorate([
+    queryAssignedElements({
+        flatten: true
+    })
+], Autocomplete.prototype, "itemSlotElements", void 0);

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

@@ -1,7 +1,7 @@
-import { getIndexByLetter } from '../menu.js';
+import { filterOptions } from '../menu.js';
 export class ListController {
     constructor(host, config){
-        this._focusedIndex = -1;
+        this._focusedItem = null;
         this.searchString = '';
         this.searchTimeout = null;
         const { isItem, getPossibleItems, blurItem, focusItem, wrapNavigation } = config;
@@ -18,8 +18,8 @@ export class ListController {
         return this.getPossibleItems().filter(this.isItem);
     }
     get currentIndex() {
-        const items = this.getPossibleItems().filter(this.isItem);
-        return items.findIndex((item)=>item.focused) ?? -1;
+        if (!this._focusedItem) return -1;
+        return this.items.indexOf(this._focusedItem);
     }
     handleType(char) {
         const searchString = this.getSearchString(char);
@@ -53,13 +53,13 @@ export class ListController {
         }
     }
     _focusItem(item) {
-        if (this._focusedIndex !== -1) this._blurItem(this.items[this._focusedIndex]);
+        if (this._focusedItem !== null) this._blurItem(this._focusedItem);
         this.focusItem(item);
-        this._focusedIndex = this.items.indexOf(item);
+        this._focusedItem = item;
     }
     _blurItem(item) {
         this.blurItem(item);
-        this._focusedIndex = -1;
+        this._focusedItem = null;
     }
     focusFirstItem() {
         this._focusItem(this.items[0]);
@@ -68,24 +68,44 @@ export class ListController {
         this._focusItem(this.items[this.items.length - 1]);
     }
     focusNextItem() {
-        const count = this.items.length;
+        const items = this.items;
+        const count = items.length;
         if (count === 0) return;
-        let nextIndex = this._focusedIndex + 1;
+        let nextIndex = this.currentIndex + 1;
         if (nextIndex >= count) {
-            nextIndex = this.wrapNavigation() ? count - 1 : 0;
+            nextIndex = this.wrapNavigation() ? 0 : count - 1;
         }
-        this._focusItem(this.items[nextIndex]);
+        this._focusItem(items[nextIndex]);
     }
     focusPreviousItem() {
-        const count = this.items.length;
+        const items = this.items;
+        const count = items.length;
         if (count === 0) return;
-        let prevIndex = this._focusedIndex - 1;
+        let prevIndex = this.currentIndex - 1;
         if (prevIndex < 0) {
-            prevIndex = this.wrapNavigation() ? 0 : count - 1;
+            prevIndex = this.wrapNavigation() ? count - 1 : 0;
         }
-        this._focusItem(this.items[prevIndex]);
+        this._focusItem(items[prevIndex]);
     }
     handleSlotChange() {
-        this._focusedIndex = this.currentIndex;
+        const items = this.items;
+        const index = this.currentIndex;
+        this._focusedItem = index >= 0 ? items[index] : null;
+    }
+}
+export function getIndexByLetter(options, filter, startIndex = 0) {
+    const orderedOptions = [
+        ...options.slice(startIndex),
+        ...options.slice(0, startIndex)
+    ];
+    const firstMatch = filterOptions(orderedOptions, filter)[0];
+    const allSameLetter = (array)=>array.every((letter)=>letter === array[0]);
+    if (firstMatch) {
+        return options.indexOf(firstMatch);
+    } else if (allSameLetter(filter.split(''))) {
+        const matches = filterOptions(orderedOptions, filter[0]);
+        return options.indexOf(matches[0]);
+    } else {
+        return -1;
     }
 }

package/src/base/input.js

@@ -89,22 +89,22 @@ export class Input extends Base {
         this.dispatchEvent(newEvent);
     }
     syncValidity() {
-        if (!this.inputOrTextarea) return;
-        this[internals].setValidity(this.inputOrTextarea.validity, this.inputOrTextarea.validationMessage, this.inputOrTextarea);
+        if (!this.$inputOrTextarea) return;
+        this[internals].setValidity(this.$inputOrTextarea.validity, this.$inputOrTextarea.validationMessage, this.$inputOrTextarea);
     }
     select() {
-        this.inputOrTextarea?.select();
+        this.$inputOrTextarea?.select();
     }
     stepUp(n) {
-        this.inputOrTextarea?.stepUp(n);
+        this.$inputOrTextarea?.stepUp(n);
         this.handleInput({
-            target: this.inputOrTextarea
+            target: this.$inputOrTextarea
         });
     }
     stepDown(n) {
-        this.inputOrTextarea?.stepDown(n);
+        this.$inputOrTextarea?.stepDown(n);
         this.handleInput({
-            target: this.inputOrTextarea
+            target: this.$inputOrTextarea
         });
     }
     formResetCallback() {
@@ -189,4 +189,4 @@ _ts_decorate([
 ], Input.prototype, "focused", void 0);
 _ts_decorate([
     query('[part~=input]')
-], Input.prototype, "inputOrTextarea", void 0);
+], Input.prototype, "$inputOrTextarea", void 0);

package/src/base/list.js

@@ -0,0 +1,245 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { LitElement, html } from 'lit';
+import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { setFocusVisible } from '../core/focus-visible.js';
+import { InternalsAttached } from './mixins/internals-attached.js';
+import { FocusDelegated } from './mixins/focus-delegated.js';
+import { ListController } from './controllers/list-controller.js';
+const Base = FocusDelegated(InternalsAttached(LitElement));
+/**
+ * @csspart list
+ * @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 {ListItemFocusEvent} item-focus - Fires when an item is focused
+ */ export class List extends Base {
+    get $items() {
+        return this.listController.items || [];
+    }
+    render() {
+        return html`<div
+      part="list"
+      role="listbox"
+      tabindex="0"
+      @keydown=${this.#handleKeyDown}
+      @focusin=${this.#handleFocusIn}
+      @focusout=${this.#handleFocusOut}
+      @pointerdown=${this.#handlePointerDown}
+      @click=${this.#handleClick}
+      @mouseover=${this.#handleMouseOver}
+    >
+      ${this.renderItemSlot()}
+    </div>`;
+    }
+    renderItemSlot() {
+        return html`<slot part="items"></slot>`;
+    }
+    updated(changed) {
+    // TODO: Find somewhere to put this
+    // this.listController.clearSearch();
+    }
+    #handleKeyDown(event) {
+        if (event.defaultPrevented) return;
+        const action = getActionFromKey(event);
+        const items = this.$items;
+        const currentIndex = this.listController.currentIndex;
+        const maxIndex = items.length - 1;
+        switch(action){
+            case MenuActions.Last:
+            case MenuActions.First:
+            case MenuActions.Next:
+            case MenuActions.Previous:
+            case MenuActions.PageUp:
+            case MenuActions.PageDown:
+                event.preventDefault();
+                const nextIndex = getUpdatedIndex(currentIndex, maxIndex, action);
+                this.listController._focusItem(items[nextIndex]);
+                return;
+            case MenuActions.CloseSelect:
+                event.preventDefault();
+                if (currentIndex >= 0) {
+                    items[currentIndex].focused = false;
+                    this.dispatchEvent(new CustomEvent('select', {
+                        detail: {
+                            item: items[currentIndex],
+                            index: currentIndex
+                        },
+                        bubbles: true,
+                        composed: true
+                    }));
+                }
+                return;
+            case MenuActions.Type:
+                this.listController.handleType(event.key);
+                return;
+        }
+    }
+    #handleFocusIn() {
+        if (this.currentIndex == -1) this.listController.focusFirstItem();
+        else this.$items[this.currentIndex].focused = true;
+    }
+    #handleFocusOut() {
+        this.$items[this.currentIndex].focused = false;
+    }
+    #handleMouseOver(event) {
+        setFocusVisible(false);
+        const item = event.target.closest(this._possibleItemTags.join(','));
+        if (item && this.listController.items.includes(item)) {
+            this.listController._focusItem(item);
+        }
+    }
+    #handlePointerDown(event) {
+        event.preventDefault(); // This makes sure that the container is focused
+        this.$list.focus();
+        const item = this.#getEventItem(event);
+        if (!item || !this.listController.items.includes(item)) return;
+        this.listController._focusItem(item);
+    }
+    #handleClick(event) {
+        this.$list.focus();
+        const item = this.#getEventItem(event);
+        if (!item || !this.listController.items.includes(item)) return;
+        this.dispatchEvent(new CustomEvent('select', {
+            detail: {
+                item: item,
+                index: this.listController.items.indexOf(item)
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    #getEventItem(event) {
+        const selector = this._possibleItemTags.join(',');
+        return event.target.closest(selector);
+    }
+    get currentIndex() {
+        return this.listController?.currentIndex;
+    }
+    focusFirstItem() {
+        this.listController.focusFirstItem();
+    }
+    focusLastItem() {
+        this.listController.focusLastItem();
+    }
+    focusItem(item) {
+        this.listController._focusItem(item);
+    }
+    constructor(...args){
+        super(...args), this._possibleItemTags = [], this._scrollPadding = 0, this.noFocusControl = false, this.listController = new ListController(this, {
+            isItem: (item)=>this._possibleItemTags.includes(item.tagName.toLowerCase()) && !item.hasAttribute('disabled') && !item.hidden,
+            getPossibleItems: ()=>this.slotItems,
+            blurItem: (item)=>{
+                item.focused = false;
+            },
+            focusItem: (item)=>{
+                item.focused = true;
+                if (!this.noFocusControl) {
+                    this.$list.ariaActiveDescendantElement = item;
+                }
+                scrollItemIntoView(this.$list, item, this._scrollPadding);
+                this.dispatchEvent(new CustomEvent('item-focus', {
+                    detail: {
+                        item: item
+                    },
+                    bubbles: true,
+                    composed: true
+                }));
+            },
+            wrapNavigation: ()=>false
+        });
+    }
+}
+_ts_decorate([
+    property({
+        type: Boolean,
+        attribute: 'no-focus-control'
+    })
+], List.prototype, "noFocusControl", void 0);
+_ts_decorate([
+    query('[part="list"]')
+], List.prototype, "$list", void 0);
+_ts_decorate([
+    queryAssignedElements({
+        flatten: true
+    })
+], List.prototype, "slotItems", void 0);
+// Reference: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+export const MenuActions = {
+    Close: 0,
+    CloseSelect: 1,
+    First: 2,
+    Last: 3,
+    Next: 4,
+    Open: 5,
+    PageDown: 6,
+    PageUp: 7,
+    Previous: 8,
+    Select: 9,
+    Type: 10
+};
+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 getActionFromKey(event) {
+    const { key, altKey, ctrlKey, metaKey } = event;
+    if (key === 'Home') {
+        return MenuActions.First;
+    }
+    if (key === 'End') {
+        return MenuActions.Last;
+    }
+    if (key === 'Backspace' || key === 'Clear' || key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey) {
+        return MenuActions.Type;
+    }
+    if (key === 'ArrowUp' && altKey) {
+        return MenuActions.CloseSelect;
+    } else if (key === 'ArrowDown' && !altKey) {
+        return MenuActions.Next;
+    } else if (key === 'ArrowUp') {
+        return MenuActions.Previous;
+    } else if (key === 'PageUp') {
+        return MenuActions.PageUp;
+    } else if (key === 'PageDown') {
+        return MenuActions.PageDown;
+    } else if (key === 'Escape') {
+        return MenuActions.Close;
+    } else if (key === 'Enter' || key === ' ') {
+        return MenuActions.CloseSelect;
+    }
+    return undefined;
+}
+export function getUpdatedIndex(currentIndex, maxIndex, action) {
+    const pageSize = 10;
+    switch(action){
+        case MenuActions.First:
+            return 0;
+        case MenuActions.Last:
+            return maxIndex;
+        case MenuActions.Previous:
+            return Math.max(0, currentIndex - 1);
+        case MenuActions.Next:
+            return Math.min(maxIndex, currentIndex + 1);
+        case MenuActions.PageUp:
+            return Math.max(0, currentIndex - pageSize);
+        case MenuActions.PageDown:
+            return Math.min(maxIndex, currentIndex + pageSize);
+        default:
+            return currentIndex;
+    }
+}
+export function scrollItemIntoView(list, item, paddingY = 0) {
+    if (!list) return;
+    // Basic scroll into view logic
+    const menuRect = list.getBoundingClientRect();
+    const itemRect = item.getBoundingClientRect();
+    if (itemRect.bottom + paddingY > menuRect.bottom) {
+        list.scrollTop += itemRect.bottom - menuRect.bottom + paddingY;
+    } else if (itemRect.top - paddingY < menuRect.top) {
+        list.scrollTop -= menuRect.top - itemRect.top + paddingY;
+    }
+}