@vollowx/seele 0.13.5 → 0.13.7

package/src/base/menu.js

@@ -1,4 +1,4 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { setFocusVisible } from '../core/focus-visible.js';
@@ -16,15 +16,75 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
  * @fires {Event} close - Fires when the menu is closed.
  * @fires {MenuSelectEvent} select - Fires when an item is selected.
  * @fires {MenuItemFocusEvent} item-focus - Fires when an item is focused
- */ export class Menu extends Base {
+ *
+ * TODO: handle slotchange
+ */
+export class Menu extends Base {
+    constructor() {
+        super(...arguments);
+        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.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: {
+                placement: () => this.align,
+                strategy: () => this.alignStrategy,
+                offset: () => this.offset,
+                windowPadding: () => 16,
+            },
+            durations: {
+                open: () => (this.quick ? 0 : this._durations.show),
+                close: () => (this.quick ? 0 : this._durations.hide),
+            },
+            onClickAway: () => {
+                if (!this.keepOpenClickAway)
+                    this.open = false;
+            },
+        });
+        this.listController = new ListController(this, {
+            isItem: (item) => item.getAttribute('seele-base') === 'option' &&
+                !item.hasAttribute('disabled') &&
+                !item.hidden,
+            getPossibleItems: () => this.slotItems,
+            blurItem: (item) => {
+                item.focused = false;
+            },
+            focusItem: (item) => {
+                item.focused = true;
+                if (!this.noFocusControl) {
+                    this.$menu.ariaActiveDescendantElement = item;
+                }
+                scrollItemIntoView(this.$menu, item, this._scrollPadding);
+                this.dispatchEvent(new CustomEvent('item-focus', {
+                    detail: { item: item },
+                    bubbles: true,
+                    composed: true,
+                }));
+            },
+            wrapNavigation: () => false,
+        });
+    }
     get $items() {
         return this.listController.items || [];
     }
     render() {
-        return html`<div part="menu" role="${this.type}" tabindex="${this.tabIndex}" @keydown="${this.#handleKeyDown.bind(this)}" @focusout="${this.#handleFocusOut.bind(this)}">${this.renderItemSlot()}</div>`;
+        return html `<div part="menu" role="${this.type}" tabindex="${this.tabIndex}" @keydown="${this.#handleKeyDown.bind(this)}" @focusout="${this.#handleFocusOut.bind(this)}">${this.renderItemSlot()}</div>`;
     }
     renderItemSlot() {
-        return html`<slot part="items"></slot>`;
+        return html `<slot part="items"></slot>`;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -33,8 +93,8 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
             // TODO: Handle $control change
             this.$control.addEventListener('focusout', this.#handleFocusOut.bind(this));
         }
-        this.updateComplete.then(()=>{
-            this.$items.forEach((item)=>{
+        this.updateComplete.then(() => {
+            this.$items.forEach((item) => {
                 item.addEventListener('mouseover', this.#handleItemMouseOver.bind(this));
                 item.addEventListener('click', this.#handleItemClick.bind(this));
             });
@@ -49,35 +109,31 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
     updated(changed) {
         if (changed.has('open')) {
             if (this.open) {
-                this.dispatchEvent(new Event('open', {
-                    bubbles: true,
-                    composed: true
-                }));
+                this.dispatchEvent(new Event('open', { bubbles: true, composed: true }));
                 this.$lastFocused = document.activeElement;
                 if (this.$control) {
                     this.$control.ariaExpanded = 'true';
                 }
-                this.popoverController.animateOpen().then(()=>{
+                this.popoverController.animateOpen().then(() => {
                     if (!this.noFocusControl) {
                         this.$menu.focus();
                         this.listController.focusFirstItem();
                     }
                 });
-            } else {
+            }
+            else {
                 if (!this.noFocusControl) {
                     this.$menu.ariaActiveDescendantElement = null;
                 }
-                this.dispatchEvent(new Event('close', {
-                    bubbles: true,
-                    composed: true
-                }));
+                this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));
                 this.listController.clearSearch();
                 if (this.$control) {
                     this.$control.ariaExpanded = 'false';
                 }
-                this.popoverController.animateClose().then(()=>{
+                this.popoverController.animateClose().then(() => {
                     if (this.$lastFocused) {
-                        if (!this.noFocusControl) this.$lastFocused.focus();
+                        if (!this.noFocusControl)
+                            this.$lastFocused.focus();
                         this.$lastFocused = null;
                     }
                 });
@@ -85,12 +141,13 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
         }
     }
     #handleKeyDown(event) {
-        if (event.defaultPrevented) return;
+        if (event.defaultPrevented)
+            return;
         const action = getActionFromKey(event, this.open);
         const items = this.$items;
         const currentIndex = this.listController.currentIndex;
         const maxIndex = items.length - 1;
-        switch(action){
+        switch (action) {
             case MenuActions.Last:
             case MenuActions.First:
                 this.open = true;
@@ -110,12 +167,13 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
                     this.dispatchEvent(new CustomEvent('select', {
                         detail: {
                             item: items[currentIndex],
-                            index: currentIndex
+                            index: currentIndex,
                         },
                         bubbles: true,
-                        composed: true
+                        composed: true,
                     }));
-                    if (this.keepOpenSelect) return;
+                    if (this.keepOpenSelect)
+                        return;
                     this.open = false;
                 }
                 return;
@@ -134,9 +192,12 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
         }
     }
     #handleFocusOut(event) {
-        if (this.keepOpenBlur) return;
+        if (this.keepOpenBlur)
+            return;
         const newFocus = event.relatedTarget;
-        const isInside = this.contains(newFocus) || this.shadowRoot?.contains(newFocus) || this.$control?.contains(newFocus);
+        const isInside = this.contains(newFocus) ||
+            this.shadowRoot?.contains(newFocus) ||
+            this.$control?.contains(newFocus);
         if (!isInside) {
             this.open = false;
         }
@@ -153,12 +214,13 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
         this.dispatchEvent(new CustomEvent('select', {
             detail: {
                 item: clickedItem,
-                index: index
+                index: index,
             },
             bubbles: true,
-            composed: true
+            composed: true,
         }));
-        if (!this.keepOpenSelect) this.open = false;
+        if (!this.keepOpenSelect)
+            this.open = false;
     }
     get currentIndex() {
         return this.listController?.currentIndex;
@@ -178,118 +240,45 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
     close() {
         this.open = false;
     }
-    constructor(...args){
-        super(...args), 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.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: {
-                placement: ()=>this.align,
-                strategy: ()=>this.alignStrategy,
-                offset: ()=>this.offset,
-                windowPadding: ()=>16
-            },
-            durations: {
-                open: ()=>this.quick ? 0 : this._durations.show,
-                close: ()=>this.quick ? 0 : this._durations.hide
-            },
-            onClickAway: ()=>{
-                if (!this.keepOpenClickAway) this.open = false;
-            }
-        }), this.listController = new ListController(this, {
-            isItem: (item)=>item.getAttribute('seele-base') === 'option' && !item.hasAttribute('disabled') && !item.hidden,
-            getPossibleItems: ()=>this.slotItems,
-            blurItem: (item)=>{
-                item.focused = false;
-            },
-            focusItem: (item)=>{
-                item.focused = true;
-                if (!this.noFocusControl) {
-                    this.$menu.ariaActiveDescendantElement = item;
-                }
-                scrollItemIntoView(this.$menu, item, this._scrollPadding);
-                this.dispatchEvent(new CustomEvent('item-focus', {
-                    detail: {
-                        item: item
-                    },
-                    bubbles: true,
-                    composed: true
-                }));
-            },
-            wrapNavigation: ()=>false
-        });
-    }
 }
-_ts_decorate([
+__decorate([
     property()
 ], Menu.prototype, "type", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], Menu.prototype, "open", void 0);
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Menu.prototype, "quick", void 0);
-_ts_decorate([
-    property({
-        type: Number
-    })
+__decorate([
+    property({ type: Number })
 ], Menu.prototype, "offset", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], Menu.prototype, "align", void 0);
-_ts_decorate([
-    property({
-        type: String,
-        reflect: true,
-        attribute: 'align-strategy'
-    })
+__decorate([
+    property({ type: String, reflect: true, attribute: 'align-strategy' })
 ], Menu.prototype, "alignStrategy", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        attribute: 'keep-open-blur'
-    })
+__decorate([
+    property({ type: Boolean, attribute: 'keep-open-blur' })
 ], Menu.prototype, "keepOpenBlur", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        attribute: 'keep-open-select'
-    })
+__decorate([
+    property({ type: Boolean, attribute: 'keep-open-select' })
 ], Menu.prototype, "keepOpenSelect", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        attribute: 'keep-open-click-away'
-    })
+__decorate([
+    property({ type: Boolean, attribute: 'keep-open-click-away' })
 ], Menu.prototype, "keepOpenClickAway", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        attribute: 'no-focus-control'
-    })
+__decorate([
+    property({ type: Boolean, attribute: 'no-focus-control' })
 ], Menu.prototype, "noFocusControl", void 0);
-_ts_decorate([
-    property({
-        type: Number,
-        attribute: 'data-tabindex'
-    })
+__decorate([
+    property({ type: Number, attribute: 'data-tabindex' })
 ], Menu.prototype, "tabIndex", void 0);
-_ts_decorate([
+__decorate([
     query('[part="menu"]')
 ], Menu.prototype, "$menu", void 0);
-_ts_decorate([
-    queryAssignedElements({
-        flatten: true
-    })
+__decorate([
+    queryAssignedElements({ flatten: true })
 ], Menu.prototype, "slotItems", void 0);
 // Reference: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
 export const MenuActions = {
@@ -303,22 +292,17 @@ export const MenuActions = {
     PageUp: 7,
     Previous: 8,
     Select: 9,
-    Type: 10
+    Type: 10,
 };
 export function filterOptions(options = [], filter, exclude = []) {
-    return options.filter((option)=>{
+    return options.filter((option) => {
         const matches = option.toLowerCase().indexOf(filter.toLowerCase()) === 0;
         return matches && exclude.indexOf(option) < 0;
     });
 }
 export function getActionFromKey(event, menuOpen) {
     const { key, altKey, ctrlKey, metaKey } = event;
-    const openKeys = [
-        'ArrowDown',
-        'ArrowUp',
-        'Enter',
-        ' '
-    ];
+    const openKeys = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
     if (!menuOpen && openKeys.includes(key)) {
         return MenuActions.Open;
     }
@@ -328,23 +312,31 @@ export function getActionFromKey(event, menuOpen) {
     if (key === 'End') {
         return MenuActions.Last;
     }
-    if (key === 'Backspace' || key === 'Clear' || key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey) {
+    if (key === 'Backspace' ||
+        key === 'Clear' ||
+        (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)) {
         return MenuActions.Type;
     }
     if (menuOpen) {
         if (key === 'ArrowUp' && altKey) {
             return MenuActions.CloseSelect;
-        } else if (key === 'ArrowDown' && !altKey) {
+        }
+        else if (key === 'ArrowDown' && !altKey) {
             return MenuActions.Next;
-        } else if (key === 'ArrowUp') {
+        }
+        else if (key === 'ArrowUp') {
             return MenuActions.Previous;
-        } else if (key === 'PageUp') {
+        }
+        else if (key === 'PageUp') {
             return MenuActions.PageUp;
-        } else if (key === 'PageDown') {
+        }
+        else if (key === 'PageDown') {
             return MenuActions.PageDown;
-        } else if (key === 'Escape') {
+        }
+        else if (key === 'Escape') {
             return MenuActions.Close;
-        } else if (key === 'Enter' || key === ' ') {
+        }
+        else if (key === 'Enter' || key === ' ') {
             return MenuActions.CloseSelect;
         }
     }
@@ -352,7 +344,7 @@ export function getActionFromKey(event, menuOpen) {
 }
 export function getUpdatedIndex(currentIndex, maxIndex, action) {
     const pageSize = 10;
-    switch(action){
+    switch (action) {
         case MenuActions.First:
             return 0;
         case MenuActions.Last:
@@ -370,13 +362,15 @@ export function getUpdatedIndex(currentIndex, maxIndex, action) {
     }
 }
 export function scrollItemIntoView(menu, item, paddingY = 0) {
-    if (!menu) return;
+    if (!menu)
+        return;
     // Basic scroll into view logic
     const menuRect = menu.getBoundingClientRect();
     const itemRect = item.getBoundingClientRect();
     if (itemRect.bottom + paddingY > menuRect.bottom) {
         menu.scrollTop += itemRect.bottom - menuRect.bottom + paddingY;
-    } else if (itemRect.top - paddingY < menuRect.top) {
+    }
+    else if (itemRect.top - paddingY < menuRect.top) {
         menu.scrollTop -= menuRect.top - itemRect.top + paddingY;
     }
 }

package/src/base/mixins/attachable.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+export declare class AttachableInterface {
+    $control: HTMLElement;
+    htmlFor: string | null;
+    attach(control: HTMLElement, force?: boolean): void;
+    detach(): void;
+    handleControlChange(prev: HTMLElement | null, next: HTMLElement | null): void;
+}
+export declare const Attachable: <T extends Constructor<LitElement>>(superClass: T) => Constructor<AttachableInterface> & T;

package/src/base/mixins/attachable.js

@@ -1,7 +1,11 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { property } from 'lit/decorators.js';
-export const Attachable = (superClass)=>{
+export const Attachable = (superClass) => {
     class AttachableElement extends superClass {
+        constructor() {
+            super(...arguments);
+            this.currentControl = null;
+        }
         connectedCallback() {
             super.connectedCallback();
             this.setCurrentControl(this.$control);
@@ -11,21 +15,25 @@ export const Attachable = (superClass)=>{
             super.disconnectedCallback();
         }
         /**
-     * If has `for` attribute, use it to find the control element.
-     * Otherwise, use the parent element as the control.
-     */ get $control() {
+         * If has `for` attribute, use it to find the control element.
+         * Otherwise, use the parent element as the control.
+         */
+        get $control() {
             if (this.hasAttribute('for')) {
                 if (!this.htmlFor || !this.isConnected) {
                     return null;
                 }
                 return this.getRootNode().querySelector(`#${this.htmlFor}`);
             }
-            return this.currentControl || this.parentNode instanceof ShadowRoot ? this.parentNode.host : this.parentElement;
+            return this.currentControl || this.parentNode instanceof ShadowRoot
+                ? this.parentNode.host
+                : this.parentElement;
         }
         set $control(control) {
             if (control) {
                 this.attach(control);
-            } else {
+            }
+            else {
                 this.detach();
             }
         }
@@ -38,7 +46,8 @@ export const Attachable = (superClass)=>{
             }
         }
         setCurrentControl(control, force = false) {
-            if (control === this.currentControl && !force) return;
+            if (control === this.currentControl && !force)
+                return;
             this.handleControlChange(this.currentControl, control);
             this.currentControl = control;
         }
@@ -51,17 +60,12 @@ export const Attachable = (superClass)=>{
             this.setAttribute('for', '');
         }
         /**
-     * Handles the first attaching and actual control element changing
-     */ handleControlChange(prev = null, next = null) {}
-        constructor(...args){
-            super(...args), this.currentControl = null;
-        }
+         * Handles the first attaching and actual control element changing
+         */
+        handleControlChange(prev = null, next = null) { }
     }
-    _ts_decorate([
-        property({
-            attribute: 'for',
-            type: String
-        })
+    __decorate([
+        property({ attribute: 'for', type: String })
     ], AttachableElement.prototype, "htmlFor", void 0);
     return AttachableElement;
 };

package/src/base/mixins/focus-delegated.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from 'lit';
+import { InternalsAttachedInterface } from './internals-attached.js';
+export declare class FocusDelegatedInterface {
+}
+export declare const FocusDelegated: <T extends Constructor<LitElement & InternalsAttachedInterface>>(superClass: T) => Constructor<FocusDelegatedInterface> & T;

package/src/base/mixins/focus-delegated.js

@@ -1,14 +1,12 @@
 import { LitElement } from 'lit';
 import { internals } from './internals-attached.js';
-export const FocusDelegated = (superClass)=>{
+export const FocusDelegated = (superClass) => {
     class FocusDelegatedElement extends superClass {
-        static{
-            this.shadowRootOptions = {
-                ...LitElement.shadowRootOptions,
-                delegatesFocus: true
-            };
-        }
-        constructor(...args){
+        static { this.shadowRootOptions = {
+            ...LitElement.shadowRootOptions,
+            delegatesFocus: true,
+        }; }
+        constructor(...args) {
             super();
             this[internals].role = 'presentation';
         }

package/src/base/mixins/form-associated.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import { InternalsAttachedInterface } from './internals-attached.js';
+export declare class FormAssociatedInterface {
+    form: HTMLFormElement | null;
+    labels: NodeList;
+    name: string | null;
+    disabled: boolean;
+    validity: ValidityState;
+    validationMessage: string;
+    willValidate: boolean;
+    formDisabledCallback(disabled: boolean): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+}
+export declare const FormAssociated: <T extends Constructor<LitElement & InternalsAttachedInterface>>(superClass: T) => Constructor<FormAssociatedInterface> & T;

package/src/base/mixins/form-associated.js

@@ -1,11 +1,9 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { property } from 'lit/decorators.js';
 import { internals } from './internals-attached.js';
-export const FormAssociated = (superClass)=>{
+export const FormAssociated = (superClass) => {
     class FormAssociatedElement extends superClass {
-        static{
-            this.formAssociated = true;
-        }
+        static { this.formAssociated = true; }
         get form() {
             return this[internals].form;
         }
@@ -25,16 +23,16 @@ export const FormAssociated = (superClass)=>{
         set name(name) {
             // Note: setting name to null or empty does not remove the attribute.
             this.setAttribute('name', name);
-        // We don't need to call `requestUpdate()` since it's called synchronously
-        // in `attributeChangedCallback()`.
+            // We don't need to call `requestUpdate()` since it's called synchronously
+            // in `attributeChangedCallback()`.
         }
         get disabled() {
             return this.hasAttribute('disabled');
         }
         set disabled(disabled) {
             this.toggleAttribute('disabled', disabled);
-        // We don't need to call `requestUpdate()` since it's called synchronously
-        // in `attributeChangedCallback()`.
+            // We don't need to call `requestUpdate()` since it's called synchronously
+            // in `attributeChangedCallback()`.
         }
         attributeChangedCallback(name, old, value) {
             if (name === 'disabled') {
@@ -61,16 +59,11 @@ export const FormAssociated = (superClass)=>{
             return this[internals].reportValidity();
         }
     }
-    _ts_decorate([
-        property({
-            noAccessor: true
-        })
+    __decorate([
+        property({ noAccessor: true })
     ], FormAssociatedElement.prototype, "name", null);
-    _ts_decorate([
-        property({
-            type: Boolean,
-            noAccessor: true
-        })
+    __decorate([
+        property({ type: Boolean, noAccessor: true })
     ], FormAssociatedElement.prototype, "disabled", null);
     return FormAssociatedElement;
 };

package/src/base/mixins/internals-attached.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+export declare const internals: unique symbol;
+export declare class InternalsAttachedInterface {
+    [internals]: ElementInternals;
+}
+export declare const InternalsAttached: <T extends Constructor<LitElement>>(superClass: T) => Constructor<InternalsAttachedInterface> & T;

package/src/base/mixins/internals-attached.js

@@ -1,6 +1,6 @@
 export const internals = Symbol('internals');
 const privateInternals = Symbol('privateInternals');
-export const InternalsAttached = (superClass)=>{
+export const InternalsAttached = (superClass) => {
     class InternalsAttachedElement extends superClass {
         get [internals]() {
             if (!this[privateInternals]) {

package/src/base/option.d.ts

@@ -0,0 +1,9 @@
+import { ListItem } from './list-item.js';
+export declare class OptionInterface {
+    value: string;
+}
+export declare const OptionMixin: <T extends Constructor<ListItem>>(superClass: T) => Constructor<OptionInterface> & T;
+declare const Option_base: Constructor<OptionInterface> & typeof ListItem;
+export declare class Option extends Option_base {
+}
+export {};