@vollowx/seele 0.13.5 → 0.13.6

package/src/base/tabs.js

@@ -1,83 +1,37 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { internals } from './mixins/internals-attached.js';
 /**
  * @fires {CustomEvent} tab-select
- */ export class Tabs extends LitElement {
-    get $tabs() {
-        return this.$slotItems.filter((item)=>item[internals].role === 'tab');
-    }
-    get $parent() {
-        return this.parentNode instanceof ShadowRoot ? this.parentNode.host : this.parentElement;
-    }
-    render() {
-        return html`<div part="tablist" role="tablist"><slot @slotchange="${this.#handleSlotChange}"></slot></div>`;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('keydown', this.#handleKeyDown.bind(this));
-        this.addEventListener('click', this.#handleClick.bind(this));
-    }
-    updated(changed) {
-        if (changed.has('selected') && this.selected) {
-            const targetTab = this.$tabs.find((t)=>t.value === this.selected);
-            if (targetTab && !targetTab.selected) {
-                this.selectTab(targetTab);
-            }
-        }
-    }
-    #handleSlotChange;
-    #handleKeyDown;
-    #handleClick;
-    focusTab(tab) {
-        this.$tabs.forEach((t)=>{
-            t.blur();
-            t.tabIndex = -1;
-        });
-        tab.tabIndex = 0;
-        tab.focus();
-    }
-    selectTab(selectedTab) {
-        this.selected = selectedTab.value;
-        const parent = this.$parent;
-        const panels = Array.from(parent.querySelectorAll('[seele-base="tabpanel"]'));
-        this.$tabs.forEach((tab)=>{
-            tab.selected = tab === selectedTab;
-            tab.tabIndex = tab === selectedTab ? 0 : -1;
-        });
-        panels.forEach((panel)=>{
-            if (panel.value && selectedTab.value) {
-                panel.hidden = panel.value !== selectedTab.value;
-            }
-        });
-        this.dispatchEvent(new CustomEvent('tab-select', {
-            detail: {
-                tab: selectedTab,
-                value: this.selected
-            },
-            bubbles: true,
-            composed: true
-        }));
-    }
-    constructor(...args){
-        super(...args), this._role = 'tablist', this.switch = 'manual', this.selected = '', this.#handleSlotChange = (_)=>{
+ */
+export class Tabs extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._role = 'tablist';
+        this.switch = 'manual';
+        this.selected = '';
+        this.#handleSlotChange = (_) => {
             const parent = this.$parent;
-            this.$tabs.forEach((tab)=>{
+            this.$tabs.forEach((tab) => {
                 const panel = parent.querySelector(`[seele-base="tab"][value="${tab.value}"]`);
-                if (!panel) console.error('[seele] cannot find a matching panel for tab ', tab);
+                if (!panel)
+                    console.error('[seele] cannot find a matching panel for tab ', tab);
                 // TODO: ariaLabelledByElements
                 tab.setAttribute('aria-controls', panel.id);
                 panel.setAttribute('aria-labelledby', tab.id);
             });
-        }, this.#handleKeyDown = (event)=>{
+        };
+        this.#handleKeyDown = (event) => {
             const tabs = this.$tabs;
-            if (!tabs.length) return;
-            const activeElement = this.getRootNode().activeElement;
-            const currentIndex = tabs.findIndex((t)=>t === activeElement || t.focused);
+            if (!tabs.length)
+                return;
+            const activeElement = this.getRootNode()
+                .activeElement;
+            const currentIndex = tabs.findIndex((t) => t === activeElement || t.focused);
             let nextIndex = currentIndex !== -1 ? currentIndex : 0;
             let handled = false;
-            switch(event.key){
+            switch (event.key) {
                 case 'ArrowLeft':
                     nextIndex = currentIndex <= 0 ? tabs.length - 1 : currentIndex - 1;
                     handled = true;
@@ -107,10 +61,12 @@ import { internals } from './mixins/internals-attached.js';
                 event.stopPropagation();
                 if (event.key !== 'Enter' && event.key !== ' ') {
                     this.focusTab(tabs[nextIndex]);
-                    if (this.switch === 'auto') this.selectTab(tabs[nextIndex]);
+                    if (this.switch === 'auto')
+                        this.selectTab(tabs[nextIndex]);
                 }
             }
-        }, this.#handleClick = (event)=>{
+        };
+        this.#handleClick = (event) => {
             const target = event.target;
             const tab = target.closest('md-tab');
             if (tab && this.$tabs.includes(tab)) {
@@ -119,20 +75,67 @@ import { internals } from './mixins/internals-attached.js';
             }
         };
     }
+    get $tabs() {
+        return this.$slotItems.filter((item) => item[internals].role === 'tab');
+    }
+    get $parent() {
+        return this.parentNode instanceof ShadowRoot
+            ? this.parentNode.host
+            : this.parentElement;
+    }
+    render() {
+        return html `<div part="tablist" role="tablist"><slot @slotchange="${this.#handleSlotChange}"></slot></div>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this.#handleKeyDown.bind(this));
+        this.addEventListener('click', this.#handleClick.bind(this));
+    }
+    updated(changed) {
+        if (changed.has('selected') && this.selected) {
+            const targetTab = this.$tabs.find((t) => t.value === this.selected);
+            if (targetTab && !targetTab.selected) {
+                this.selectTab(targetTab);
+            }
+        }
+    }
+    #handleSlotChange;
+    #handleKeyDown;
+    #handleClick;
+    focusTab(tab) {
+        this.$tabs.forEach((t) => {
+            t.blur();
+            t.tabIndex = -1;
+        });
+        tab.tabIndex = 0;
+        tab.focus();
+    }
+    selectTab(selectedTab) {
+        this.selected = selectedTab.value;
+        const parent = this.$parent;
+        const panels = Array.from(parent.querySelectorAll('[seele-base="tabpanel"]'));
+        this.$tabs.forEach((tab) => {
+            tab.selected = tab === selectedTab;
+            tab.tabIndex = tab === selectedTab ? 0 : -1;
+        });
+        panels.forEach((panel) => {
+            if (panel.value && selectedTab.value) {
+                panel.hidden = panel.value !== selectedTab.value;
+            }
+        });
+        this.dispatchEvent(new CustomEvent('tab-select', {
+            detail: { tab: selectedTab, value: this.selected },
+            bubbles: true,
+            composed: true,
+        }));
+    }
 }
-_ts_decorate([
-    property({
-        type: String
-    })
+__decorate([
+    property({ type: String })
 ], Tabs.prototype, "switch", void 0);
-_ts_decorate([
-    property({
-        type: String,
-        reflect: true
-    })
+__decorate([
+    property({ type: String, reflect: true })
 ], Tabs.prototype, "selected", void 0);
-_ts_decorate([
-    queryAssignedElements({
-        flatten: true
-    })
+__decorate([
+    queryAssignedElements({ flatten: true })
 ], Tabs.prototype, "$slotItems", void 0);

package/src/base/toggle-button.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+declare const Base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+export declare class ToggleButton extends Base {
+    #private;
+    static styles: any[];
+    checked: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, any>): void;
+    protected _updateInternals(): void;
+    /**
+     * --> Drag-and-drop to the other side
+     *
+     * `checked` is supposed to be changed once
+     *
+     * 1. `pointerdown`: _ignoreClick = false
+     * 2. `pointermove`: _ignoreClick = true
+     * 3. `pointerup`: `checked` changed
+     * 4. `click`: ignored, _ignoreClick = false
+     *
+     * --> Drag-and-drop to the other side, then click
+     *
+     * `checked` is supposed to be changed twice
+     *
+     * 1. `pointerdown`: _ignoreClick = false
+     * 2. `pointermove`: _ignoreClick = true
+     * 3. `pointerup`: `checked` changed(1)
+     * 4. `click`: ignored, _ignoreClick = false
+     * 5. `click`: `checked` changed(2)
+     *
+     * --> Drag-and-drop to the other side, then click the label
+     *
+     * `checked` is supposed to be changed twice
+     *
+     * 1. `pointerdown`: _ignoreClick = false
+     * 2. `pointermove`: _ignoreClick = true
+     * 3. `pointerup`: `checked` changed(1)
+     * 4. `click` on label: _ignoreClick = false
+     * 5. `click` on switch: `checked` changed(2)
+     */
+    protected _ignoreClick: boolean;
+    protected toggleChecked(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string, _reason: string): void;
+}
+export {};

package/src/base/toggle-button.js

@@ -1,4 +1,4 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
@@ -6,48 +6,49 @@ import { FormAssociated } from './mixins/form-associated.js';
 import { hiddenStyles } from './hidden-styles.css.js';
 const PROPERTY_FROM_ARIA_PRESSED = {
     true: 'checked',
-    false: 'unchecked'
+    false: 'unchecked',
 };
 const Base = FormAssociated(InternalsAttached(LitElement));
 export class ToggleButton extends Base {
-    static{
-        this.styles = [
-            hiddenStyles
-        ];
-    }
-    constructor(){
-        super(), this.checked = false, /**
-   * --> Drag-and-drop to the other side
-   *
-   * `checked` is supposed to be changed once
-   *
-   * 1. `pointerdown`: _ignoreClick = false
-   * 2. `pointermove`: _ignoreClick = true
-   * 3. `pointerup`: `checked` changed
-   * 4. `click`: ignored, _ignoreClick = false
-   *
-   * --> Drag-and-drop to the other side, then click
-   *
-   * `checked` is supposed to be changed twice
-   *
-   * 1. `pointerdown`: _ignoreClick = false
-   * 2. `pointermove`: _ignoreClick = true
-   * 3. `pointerup`: `checked` changed(1)
-   * 4. `click`: ignored, _ignoreClick = false
-   * 5. `click`: `checked` changed(2)
-   *
-   * --> Drag-and-drop to the other side, then click the label
-   *
-   * `checked` is supposed to be changed twice
-   *
-   * 1. `pointerdown`: _ignoreClick = false
-   * 2. `pointermove`: _ignoreClick = true
-   * 3. `pointerup`: `checked` changed(1)
-   * 4. `click` on label: _ignoreClick = false
-   * 5. `click` on switch: `checked` changed(2)
-   */ this._ignoreClick = false, this.#handleLabelClick = ()=>{
+    static { this.styles = [hiddenStyles]; }
+    constructor() {
+        super();
+        this.checked = false;
+        /**
+         * --> Drag-and-drop to the other side
+         *
+         * `checked` is supposed to be changed once
+         *
+         * 1. `pointerdown`: _ignoreClick = false
+         * 2. `pointermove`: _ignoreClick = true
+         * 3. `pointerup`: `checked` changed
+         * 4. `click`: ignored, _ignoreClick = false
+         *
+         * --> Drag-and-drop to the other side, then click
+         *
+         * `checked` is supposed to be changed twice
+         *
+         * 1. `pointerdown`: _ignoreClick = false
+         * 2. `pointermove`: _ignoreClick = true
+         * 3. `pointerup`: `checked` changed(1)
+         * 4. `click`: ignored, _ignoreClick = false
+         * 5. `click`: `checked` changed(2)
+         *
+         * --> Drag-and-drop to the other side, then click the label
+         *
+         * `checked` is supposed to be changed twice
+         *
+         * 1. `pointerdown`: _ignoreClick = false
+         * 2. `pointermove`: _ignoreClick = true
+         * 3. `pointerup`: `checked` changed(1)
+         * 4. `click` on label: _ignoreClick = false
+         * 5. `click` on switch: `checked` changed(2)
+         */
+        this._ignoreClick = false;
+        this.#handleLabelClick = () => {
             this._ignoreClick = false;
-        }, this.#handleClick = (e)=>{
+        };
+        this.#handleClick = (e) => {
             e.stopPropagation();
             e.preventDefault();
             if (this._ignoreClick) {
@@ -55,12 +56,16 @@ export class ToggleButton extends Base {
                 return;
             }
             this.toggleChecked();
-        }, this.#handleKeyDown = (e)=>{
-            if (e.key !== ' ' && e.key !== 'Enter') return;
+        };
+        this.#handleKeyDown = (e) => {
+            if (e.key !== ' ' && e.key !== 'Enter')
+                return;
             e.preventDefault();
             e.stopPropagation();
-            if (e.key === 'Enter') this.toggleChecked();
-        }, this.#handleKeyUp = (e)=>{
+            if (e.key === 'Enter')
+                this.toggleChecked();
+        };
+        this.#handleKeyUp = (e) => {
             if (e.key === ' ') {
                 e.preventDefault();
                 e.stopPropagation();
@@ -77,16 +82,16 @@ export class ToggleButton extends Base {
         this.addEventListener('click', this.#handleClick);
         this.addEventListener('keydown', this.#handleKeyDown);
         this.addEventListener('keyup', this.#handleKeyUp);
-        this.labels.forEach((label)=>{
+        this.labels.forEach((label) => {
             label.addEventListener('click', this.#handleLabelClick);
         });
-        requestAnimationFrame(()=>requestAnimationFrame(()=>this.removeAttribute('notransition')));
+        requestAnimationFrame(() => requestAnimationFrame(() => this.removeAttribute('notransition')));
     }
     disconnectedCallback() {
         this.removeEventListener('click', this.#handleClick);
         this.removeEventListener('keydown', this.#handleKeyDown);
         this.removeEventListener('keyup', this.#handleKeyUp);
-        this.labels.forEach((label)=>{
+        this.labels.forEach((label) => {
             label.removeEventListener('click', this.#handleLabelClick);
         });
         super.disconnectedCallback();
@@ -110,12 +115,13 @@ export class ToggleButton extends Base {
     #handleKeyDown;
     #handleKeyUp;
     toggleChecked() {
-        if (this.disabled) return;
+        if (this.disabled)
+            return;
         this.checked = !this.checked;
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
             composed: true,
-            detail: this.checked
+            detail: this.checked,
         }));
     }
     formResetCallback() {
@@ -125,8 +131,6 @@ export class ToggleButton extends Base {
         this.checked = state === 'on';
     }
 }
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], ToggleButton.prototype, "checked", void 0);

package/src/base/tooltip.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+declare const Base: Constructor<import("./mixins/attachable.js").AttachableInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+/**
+ * TODO: Check if $control controls a menu/popover and keep hidden when it is open.
+ */
+export declare class Tooltip extends Base {
+    #private;
+    readonly _delays: {
+        mouse: {
+            show: number;
+            hide: number;
+        };
+        focus: {
+            show: number;
+            hide: number;
+        };
+        touch: {
+            show: number;
+            hide: number;
+        };
+        recentlyShowed: number;
+    };
+    readonly _durations: {
+        show: number;
+        hide: number;
+    };
+    align: import('@floating-ui/dom').Placement;
+    offset: number;
+    forceInvisible: boolean;
+    $slot: HTMLSlotElement;
+    render(): import("lit-html").TemplateResult<1>;
+    private readonly popoverController;
+    constructor();
+    handleControlChange(prev?: HTMLElement | null, next?: HTMLElement | null): void;
+    set visible(value: boolean);
+}
+export {};

package/src/base/tooltip.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 } from 'lit/decorators.js';
 import { focusVisible } from '../core/focus-visible.js';
@@ -9,66 +9,76 @@ let lastHidingTime = 0;
 const Base = Attachable(InternalsAttached(LitElement));
 /**
  * TODO: Check if $control controls a menu/popover and keep hidden when it is open.
- */ export class Tooltip extends Base {
+ */
+export class Tooltip extends Base {
     render() {
-        return html`<slot @slotchange="${this.#handleSlotChange}"></slot>`;
+        return html `<slot @slotchange="${this.#handleSlotChange}"></slot>`;
     }
     // Different from those in the popoverController, these timers are used to
     // manage the delay before showing/hiding the tooltip.
     #openTimer;
     #closeTimer;
-    constructor(){
-        super(), this._delays = {
-            mouse: {
-                show: 500,
-                hide: 0
-            },
-            focus: {
-                show: 100,
-                hide: 0
-            },
-            touch: {
-                show: 700,
-                hide: 1500
-            },
-            recentlyShowed: 800
-        }, this._durations = {
-            show: 100,
-            hide: 100
-        }, this.align = 'top', this.offset = 4, this.forceInvisible = false, this.#openTimer = null, this.#closeTimer = null, this.popoverController = new PopoverController(this, {
-            popover: ()=>this,
-            trigger: ()=>this.$control,
+    constructor() {
+        super();
+        this._delays = {
+            mouse: { show: 500, hide: 0 },
+            focus: { show: 100, hide: 0 },
+            touch: { show: 700, hide: 1500 },
+            recentlyShowed: 800,
+        };
+        this._durations = { show: 100, hide: 100 };
+        this.align = 'top';
+        this.offset = 4;
+        this.forceInvisible = false;
+        // Different from those in the popoverController, these timers are used to
+        // manage the delay before showing/hiding the tooltip.
+        this.#openTimer = null;
+        this.#closeTimer = null;
+        this.popoverController = new PopoverController(this, {
+            popover: () => this,
+            trigger: () => this.$control,
             positioning: {
-                placement: ()=>this.align,
-                strategy: ()=>'absolute',
-                offset: ()=>this.offset,
-                windowPadding: ()=>16
+                placement: () => this.align,
+                strategy: () => 'absolute',
+                offset: () => this.offset,
+                windowPadding: () => 16,
             },
             durations: {
-                open: ()=>this._durations.show,
-                close: ()=>this._durations.hide
+                open: () => this._durations.show,
+                close: () => this._durations.hide,
             },
-            onClickAway: ()=>{
+            onClickAway: () => {
                 this.visible = false;
-            }
-        }), this.#handleSlotChange = ()=>{
-            if (!this.visible) this.$control.setAttribute('aria-label', this.textContent ?? '');
-        }, this.#handleFocusIn = ()=>{
-            if (!focusVisible) return;
+            },
+        });
+        this.#handleSlotChange = () => {
+            if (!this.visible)
+                this.$control.setAttribute('aria-label', this.textContent ?? '');
+        };
+        this.#handleFocusIn = () => {
+            if (!focusVisible)
+                return;
             this.#show(this._delays.focus.show);
-        }, this.#handleFocusOut = ()=>{
+        };
+        this.#handleFocusOut = () => {
             this.#hide(this._delays.focus.hide);
-        }, this.#handlePointerEnter = (e)=>{
+        };
+        this.#handlePointerEnter = (e) => {
             const evt = e;
-            if (evt.pointerType === 'touch') return;
+            if (evt.pointerType === 'touch')
+                return;
             this.#show(this._delays.mouse.show);
-        }, this.#handlePointerLeave = (e)=>{
+        };
+        this.#handlePointerLeave = (e) => {
             const evt = e;
-            if (evt.pointerType === 'touch') return;
+            if (evt.pointerType === 'touch')
+                return;
             this.#hide(this._delays.mouse.hide);
-        }, this.#handleTouchStart = ()=>{
+        };
+        this.#handleTouchStart = () => {
             this.#show(this._delays.touch.show);
-        }, this.#handleTouchEnd = ()=>{
+        };
+        this.#handleTouchEnd = () => {
             this.#hide(this._delays.touch.hide);
         };
         this[internals].role = 'tooltip';
@@ -80,19 +90,22 @@ const Base = Attachable(InternalsAttached(LitElement));
             pointerenter: this.#handlePointerEnter,
             pointerleave: this.#handlePointerLeave,
             touchstart: this.#handleTouchStart,
-            touchend: this.#handleTouchEnd
+            touchend: this.#handleTouchEnd,
         };
-        Object.keys(eventHandlers).forEach((key)=>{
+        Object.keys(eventHandlers).forEach((key) => {
             prev?.removeEventListener(key, eventHandlers[key]);
             next?.addEventListener(key, eventHandlers[key]);
         });
-        if (prev) prev.removeAttribute('aria-label');
-        if (next) next.setAttribute('aria-label', this.textContent ?? '');
+        if (prev)
+            prev.removeAttribute('aria-label');
+        if (next)
+            next.setAttribute('aria-label', this.textContent ?? '');
     }
     set visible(value) {
         if (value) {
             this.popoverController.animateOpen();
-        } else {
+        }
+        else {
             this.popoverController.animateClose();
         }
     }
@@ -105,7 +118,7 @@ const Base = Attachable(InternalsAttached(LitElement));
     #handleTouchEnd;
     #show(delay) {
         clearTimeout(this.#closeTimer);
-        this.#openTimer = setTimeout(()=>{
+        this.#openTimer = setTimeout(() => {
             this.visible = true;
         }, Math.max(Date.now() - lastHidingTime < this._delays.recentlyShowed ? 0 : delay));
     }
@@ -114,28 +127,20 @@ const Base = Attachable(InternalsAttached(LitElement));
             lastHidingTime = Date.now();
         }
         clearTimeout(this.#openTimer);
-        this.#closeTimer = setTimeout(()=>{
+        this.#closeTimer = setTimeout(() => {
             this.visible = false;
         }, delay);
     }
 }
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], Tooltip.prototype, "align", void 0);
-_ts_decorate([
-    property({
-        type: Number,
-        reflect: true
-    })
+__decorate([
+    property({ type: Number, reflect: true })
 ], Tooltip.prototype, "offset", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], Tooltip.prototype, "forceInvisible", void 0);
-_ts_decorate([
+__decorate([
     query('slot')
 ], Tooltip.prototype, "$slot", void 0);

package/src/core/decorators.d.ts

@@ -0,0 +1,2 @@
+declare const wrappedCustomElement: (tagName: string, allowSSR?: boolean) => import("lit/decorators.js").CustomElementDecorator;
+export { wrappedCustomElement as customElement };

package/src/core/decorators.js

@@ -1,10 +1,11 @@
 import { isServer } from 'lit';
 import { customElement } from 'lit/decorators.js';
-const wrappedCustomElement = (tagName, allowSSR = true)=>{
+const wrappedCustomElement = (tagName, allowSSR = true) => {
     if (isServer && !allowSSR) {
         console.log(`[seele] <${tagName}> will not be rendered server-side`);
-        return (cls)=>cls;
-    } else {
+        return (cls) => cls;
+    }
+    else {
         return customElement(tagName);
     }
 };

package/src/core/focus-visible.d.ts

@@ -0,0 +1,2 @@
+export declare let focusVisible: boolean;
+export declare function setFocusVisible(value: boolean): void;