@vollowx/seele 0.12.0 → 0.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.12.0",
+  "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/base/autocomplete.js

@@ -25,9 +25,11 @@ const Base = FocusDelegated(InternalsAttached(LitElement));
    *   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)}"
@@ -108,7 +110,7 @@ const Base = FocusDelegated(InternalsAttached(LitElement));
             eventClone.preventDefault = ()=>event.preventDefault();
             eventClone.stopPropagation = ()=>event.stopPropagation();
             this.$menu.$menu.dispatchEvent(eventClone);
-            if (event.key === 'Enter') this.open = false;
+            if (event.key === 'Enter' && !this.keepOpenSelect) this.open = false;
         }
     }
     handleMenuSelect(event) {
@@ -117,7 +119,9 @@ const Base = FocusDelegated(InternalsAttached(LitElement));
         if (this.$input) {
             this.$input.value = newValue;
         }
-        this.open = false;
+        if (!this.keepOpenSelect) {
+            this.open = false;
+        }
     }
     updated(changed) {
         if (changed.has('open') && this.$input) {
@@ -128,7 +132,8 @@ const Base = FocusDelegated(InternalsAttached(LitElement));
         }
     }
     constructor(...args){
-        super(...args), this.open = false, this.offset = 0, this.align = 'bottom-start', this.alignStrategy = 'absolute', this.mode = 'none';
+        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([
@@ -136,6 +141,11 @@ _ts_decorate([
         type: Boolean
     })
 ], Autocomplete.prototype, "open", void 0);
+_ts_decorate([
+    property({
+        type: Boolean
+    })
+], Autocomplete.prototype, "quick", void 0);
 _ts_decorate([
     property({
         type: Number
@@ -153,6 +163,12 @@ _ts_decorate([
         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);

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;
+    }
+}

package/src/base/menu.js

@@ -123,7 +123,7 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
                         bubbles: true,
                         composed: true
                     }));
-                    if (this.keepOpenClickItem) return;
+                    if (this.keepOpenSelect) return;
                     this.open = false;
                 }
                 return;
@@ -166,7 +166,7 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
             bubbles: true,
             composed: true
         }));
-        if (!this.keepOpenClickItem) this.open = false;
+        if (!this.keepOpenSelect) this.open = false;
     }
     get currentIndex() {
         return this.listController?.currentIndex;
@@ -190,7 +190,7 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
         super(...args), this._possibleItemTags = [], this._durations = {
             show: 0,
             hide: 0
-        }, this._scrollPadding = 0, this.type = 'menu', this.open = false, this.quick = false, this.offset = 0, this.align = 'bottom-start', this.alignStrategy = 'absolute', this.keepOpenBlur = false, this.keepOpenClickItem = false, this.keepOpenClickAway = false, this.noFocusControl = false, this.tabIndex = 0, this.$lastFocused = null, this.popoverController = new PopoverController(this, {
+        }, this._scrollPadding = 0, this.type = 'menu', this.open = false, this.quick = false, this.offset = 0, this.align = 'bottom-start', this.alignStrategy = 'absolute', this.keepOpenBlur = false, this.keepOpenSelect = false, this.keepOpenClickAway = false, this.noFocusControl = false, this.tabIndex = 0, this.$lastFocused = null, this.popoverController = new PopoverController(this, {
             popover: ()=>this.$menu,
             trigger: ()=>this.$control,
             positioning: {
@@ -271,9 +271,9 @@ _ts_decorate([
 _ts_decorate([
     property({
         type: Boolean,
-        attribute: 'keep-open-click-item'
+        attribute: 'keep-open-select'
     })
-], Menu.prototype, "keepOpenClickItem", void 0);
+], Menu.prototype, "keepOpenSelect", void 0);
 _ts_decorate([
     property({
         type: Boolean,

package/src/m3/autocomplete/autocomplete.js

@@ -16,9 +16,11 @@ export class M3Autocomplete extends Autocomplete {
         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}"

package/src/m3/focus-ring/focus-ring-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const focusRingStyles = css`:host{animation-delay:0s, calc(var(--md-focus-ring-duration,.6s) * .25);animation-duration:calc(var(--md-focus-ring-duration,.6s) * .25), calc(var(--md-focus-ring-duration,.6s) * .75);animation-timing-function:var(--md-sys-motion-exp-spatial-slow);box-sizing:border-box;color:var(--md-focus-ring-color,var(--md-sys-color-secondary));pointer-events:none;display:none;position:absolute}:host(:state(visible)){display:flex}:host(:not([inward])){inset:calc(-1 * var(--md-focus-ring-outward-offset,2px));outline:var(--md-focus-ring-width,3px) solid currentColor;border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));animation-name:outward-grow,outward-shrink}:host([inward]){border:var(--md-focus-ring-width,3px) solid currentColor;inset:var(--md-focus-ring-inward-offset,0px);border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));animation-name:inward-grow,inward-shrink}@keyframes outward-grow{0%{outline-width:0}to{outline-width:var(--md-focus-ring-active-width,8px)}}@keyframes outward-shrink{0%{outline-width:var(--md-focus-ring-active-width,8px)}}@keyframes inward-grow{0%{border-width:0}to{border-width:var(--md-focus-ring-active-width,8px)}}@keyframes inward-shrink{0%{border-width:var(--md-focus-ring-active-width,8px)}}@media (prefers-reduced-motion){:host{animation:none}}`;
+export const focusRingStyles = css`:host{animation-delay:0s, calc(var(--md-focus-ring-duration,.6s) * .25);animation-duration:calc(var(--md-focus-ring-duration,.6s) * .25), calc(var(--md-focus-ring-duration,.6s) * .75);box-sizing:border-box;color:var(--md-focus-ring-color,var(--md-sys-color-secondary));pointer-events:none;animation-timing-function:cubic-bezier(.2,0,0,1),cubic-bezier(.2,0,0,1);display:none;position:absolute}:host(:state(visible)){display:flex}:host(:not([inward])){box-shadow:0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:calc(-1 * var(--md-focus-ring-outward-offset,2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));animation-name:outward-grow,outward-shrink}:host([inward]){box-shadow:inset 0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:var(--md-focus-ring-inward-offset,0px);border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));animation-name:inward-grow,inward-shrink}@keyframes outward-grow{0%{box-shadow:0 0}to{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes outward-shrink{0%{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-grow{0%{box-shadow:inset 0 0}to{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-shrink{0%{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@media (prefers-reduced-motion){:host{animation:none}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const listStyles = css`:host{box-sizing:border-box;flex-direction:column;display:flex}`;
+export const listStyles = css`:host{min-width:112px;display:contents}[part=list]{box-sizing:border-box;height:inherit;max-height:inherit;max-width:inherit;min-width:inherit;-webkit-user-select:none;user-select:none;width:inherit;outline:0;flex-direction:column;gap:2px;padding:4px;display:flex;position:absolute;inset:auto;overflow-y:auto}`;

package/src/m3/list/list.js

@@ -1,13 +1,22 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
-import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { List } from '../../base/list.js';
 import { listStyles } from './list-styles.css.js';
-export class M3List extends LitElement {
+export class M3List extends List {
     static{
+        // FIXME: Might cause a long list to scroll more than expected
+        // override readonly _scrollPadding = 4;
         this.styles = [
             listStyles
         ];
     }
+    constructor(...args){
+        super(...args), this._possibleItemTags = [
+            'md-list-item',
+            'md-list-item-checkbox',
+            'md-list-item-radio'
+        ];
+    }
 }
 M3List = _ts_decorate([
     customElement('md-list')