@vollowx/seele 0.14.0 → 0.14.2

package/src/base/popup.d.ts

@@ -1,11 +1,26 @@
-/**
- * NOTE: demos at dev/pending.html
- * TODO: hijack all `hidePopover()`s to allow more complex JS animations
- */
 import { LitElement, PropertyValues } from 'lit';
 import { Placement, Strategy } from '@floating-ui/dom';
 import { autoAttachToParent, handleControlChange } from './mixins/attachable.js';
 declare const Popup_base: Constructor<import("./mixins/attachable.js").AttachableInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+/**
+ * TODO: use [popover=auto]
+ *
+ * Light dismiss closes a popup for a click outside, and normally ignores the
+ * trigger, yet non-button triggers are not recognized.
+ * That makes clicking the trigger do
+ * 1. light dismiss
+ * 2. .toggle()
+ * when the popup is open on mobile devices (tested on Safari mobile 26).
+ *
+ * I chose to use manual popovers, which effectively makes most of the benefits
+ * of the use of Popover API lost. The workarounds should be removed after
+ * custom elements can get button behavior natively.
+ *
+ * Ref:
+ * - https://github.com/openui/open-ui/issues/1088
+ * - https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PlatformProvidedBehaviors/explainer.md
+ * - https://github.com/whatwg/html/issues/12150
+ */
 /**
  * When using popup with menu, you need to manually bind them using `aria-controls`
  */
@@ -26,11 +41,9 @@ export declare class Popup extends Popup_base {
     protected updated(changedProperties: PropertyValues<this>): void;
     [autoAttachToParent]: boolean;
     [handleControlChange](prev: HTMLElement | null, next: HTMLElement | null): void;
-    toggle(): Promise<void>;
-    show(): Promise<void>;
-    hide(): Promise<void>;
-    _show(): Promise<void>;
-    _hide(): Promise<void>;
+    toggle(): void;
+    show(): void;
+    hide(): void;
     _cleanup(): void;
 }
 export {};

package/src/base/popup.js

@@ -1,21 +1,36 @@
-/**
- * NOTE: demos at dev/pending.html
- * TODO: hijack all `hidePopover()`s to allow more complex JS animations
- */
 var _a;
 import { __decorate } from "tslib";
 import { LitElement, html, isServer } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { autoUpdate, computePosition, arrow, flip, offset, shift, } from '@floating-ui/dom';
 import { getFirstTabbable } from '../core/focus.js';
 import { InternalsAttached } from './mixins/internals-attached.js';
 import { Attachable, autoAttachToParent, handleControlChange, } from './mixins/attachable.js';
-import { transformOriginFromArrow } from './controllers/popover-controller.js';
+import { transformOriginFromArrow } from './positioning.js';
 import { popupStyles } from './popup-styles.css.js';
+/**
+ * TODO: use [popover=auto]
+ *
+ * Light dismiss closes a popup for a click outside, and normally ignores the
+ * trigger, yet non-button triggers are not recognized.
+ * That makes clicking the trigger do
+ * 1. light dismiss
+ * 2. .toggle()
+ * when the popup is open on mobile devices (tested on Safari mobile 26).
+ *
+ * I chose to use manual popovers, which effectively makes most of the benefits
+ * of the use of Popover API lost. The workarounds should be removed after
+ * custom elements can get button behavior natively.
+ *
+ * Ref:
+ * - https://github.com/openui/open-ui/issues/1088
+ * - https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PlatformProvidedBehaviors/explainer.md
+ * - https://github.com/whatwg/html/issues/12150
+ */
 /**
  * When using popup with menu, you need to manually bind them using `aria-controls`
  */
-let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
+export class Popup extends Attachable(InternalsAttached(LitElement)) {
     static { this.styles = [popupStyles]; }
     render() {
         return html `<slot></slot>`;
@@ -29,33 +44,24 @@ let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
         this.offset = 0;
         this.windowPadding = 8;
         this[_a] = false;
+        this.#$lastFocused = null;
+        this.#pointerType = null;
+        this.#pointerPath = [];
         this.#handleRequestHide = () => {
-            this.hide();
-        };
-        // #allowHidePopover = false;
-        // #handleBeforeToggle = (e: ToggleEvent) => {
-        //   // Intercept browser light-dismiss (ESC, click outside) or external hidePopover() calls
-        //   if (e.newState === 'closed' && !this.#allowHidePopover) {
-        //     e.preventDefault();
-        //     if (this.open) {
-        //       this.hide();
-        //     }
-        //   }
-        // };
-        this.#handleToggle = (e) => {
-            e.preventDefault();
-            if (e.newState === 'closed' && this.open)
+            if (this.open) {
                 this.hide();
+            }
         };
         this.#handleFocusOut = (e) => {
-            // for `this` and `this.$control`
-            if (this.noFocusControl || !this.open)
+            if (this.noFocusControl ||
+                !this.open ||
+                this.#pointerPath.includes(this.$control))
                 return;
             const target = e.relatedTarget;
-            if (target && (this.contains(target) || this.$control?.contains(target))) {
+            if (this.contains(target))
                 return;
-            }
             if (target) {
+                this.#$lastFocused = null;
                 this.hide();
                 return;
             }
@@ -64,66 +70,112 @@ let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
                     this.hide();
             });
         };
-        this.#handleTriggerClick = (e) => {
+        this.#handleKeyDown = (e) => {
+            this.#pointerPath = [];
+            if (e.key !== 'Escape' || !this.open)
+                return;
+            const active = document.activeElement;
+            if (!this.contains(active) && !this.noFocusControl)
+                return;
             e.preventDefault();
+            this.hide();
+        };
+        this.#handleTriggerClick = () => {
+            // Ignore it if the popup is already opened by a mouse or pen.
+            if (this.#pointerType && this.#pointerType !== 'touch') {
+                this.#pointerType = null;
+                return;
+            }
+            this.#pointerType = null;
+            this.toggle();
+        };
+        this.#handleTriggerPointerDown = (e) => {
+            if (e.pointerType === 'touch') {
+                this.#pointerType = null;
+                return;
+            }
+            if (e.button !== 0)
+                return;
+            this.#pointerType = e.pointerType;
             this.toggle();
         };
+        this.#handleGlobalClick = (e) => {
+            if (!this.open)
+                return;
+            const path = e.composedPath();
+            if (path.includes(this) || path.includes(this.$control))
+                return;
+            // 1. When a press started inside the popup is released outside of it
+            // 2. When a press started on the trigger is released inside the popup
+            if (this.#pointerPath.includes(this) ||
+                this.#pointerPath.includes(this.$control))
+                return;
+            this.hide();
+        };
+        this.#handleGlobalPointerDown = (event) => {
+            this.#pointerPath = event.composedPath();
+            if (!this.open || event.pointerType === 'touch')
+                return;
+            if (this.#pointerPath.includes(this) ||
+                this.#pointerPath.includes(this.$control))
+                return;
+            this.hide();
+        };
         this.#dummyArrow = isServer ? null : document.createElement('div');
         this.setAttribute('notransition', '');
         if (!this.hasAttribute('popover'))
-            this.setAttribute('popover', 'auto');
+            this.setAttribute('popover', 'manual');
         if (!isServer) {
             this.addEventListener('request-popup-hide', this.#handleRequestHide);
-            // this.addEventListener('beforetoggle', this.#handleBeforeToggle);
-            this.addEventListener('toggle', this.#handleToggle);
             this.addEventListener('focusout', this.#handleFocusOut);
+            this.addEventListener('keydown', this.#handleKeyDown);
         }
     }
     connectedCallback() {
         super.connectedCallback();
+        document.addEventListener('click', this.#handleGlobalClick, true);
+        window.addEventListener('pointerdown', this.#handleGlobalPointerDown);
         requestAnimationFrame(() => requestAnimationFrame(() => this.removeAttribute('notransition')));
     }
     disconnectedCallback() {
         this._cleanup();
+        document.removeEventListener('click', this.#handleGlobalClick, true);
+        window.removeEventListener('pointerdown', this.#handleGlobalPointerDown);
         super.disconnectedCallback();
     }
     updated(changedProperties) {
-        if (changedProperties.has('open')) {
-            this.#syncTriggerAria();
-            if (this.open)
-                this._show();
-            else
-                this._hide();
-        }
+        if (!changedProperties.has('open'))
+            return;
+        this.#syncTriggerAria();
+        if (this.open)
+            this.#show();
+        else
+            this.#hide();
     }
     [(_a = autoAttachToParent, handleControlChange)](prev, next) {
         if (prev) {
             prev.removeEventListener('click', this.#handleTriggerClick);
-            prev.removeEventListener('focusout', this.#handleFocusOut);
+            prev.removeEventListener('pointerdown', this.#handleTriggerPointerDown);
         }
         if (next) {
             next.addEventListener('click', this.#handleTriggerClick);
-            next.addEventListener('focusout', this.#handleFocusOut);
+            next.addEventListener('pointerdown', this.#handleTriggerPointerDown);
             const ariaNext = this.$ariaControl ? this.$ariaControl : next;
             if (!next.ariaHasPopup)
                 ariaNext.ariaHasPopup = 'true';
             ariaNext.ariaExpanded = String(this.open);
         }
     }
+    #$lastFocused;
+    #pointerType;
+    #pointerPath;
     #handleRequestHide;
-    // #allowHidePopover = false;
-    // #handleBeforeToggle = (e: ToggleEvent) => {
-    //   // Intercept browser light-dismiss (ESC, click outside) or external hidePopover() calls
-    //   if (e.newState === 'closed' && !this.#allowHidePopover) {
-    //     e.preventDefault();
-    //     if (this.open) {
-    //       this.hide();
-    //     }
-    //   }
-    // };
-    #handleToggle;
     #handleFocusOut;
+    #handleKeyDown;
     #handleTriggerClick;
+    #handleTriggerPointerDown;
+    #handleGlobalClick;
+    #handleGlobalPointerDown;
     #syncTriggerAria() {
         if (this.$ariaControl)
             this.$ariaControl.ariaExpanded = String(this.open);
@@ -142,53 +194,52 @@ let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
             firstTabbable?.focus();
         }
     }
-    async toggle() {
+    toggle() {
         this.open = !this.open;
     }
-    async show() {
-        this.open = true;
+    show() {
+        if (!this.open)
+            this.open = true;
     }
-    async hide() {
-        this.open = false;
+    hide() {
+        if (this.open)
+            this.open = false;
     }
-    async _show() {
-        if (this.isConnected && !this.matches(':popover-open'))
-            this.showPopover();
+    async #show() {
+        this.#$lastFocused = this.$control
+            ? this.$control
+            : document.activeElement instanceof HTMLElement
+                ? document.activeElement
+                : null;
         const trigger = this.$control;
+        if (this.isConnected && !this.matches(':popover-open'))
+            this.showPopover({ source: trigger ?? undefined });
         if (trigger) {
             this._cleanup();
             this.#cleanupAutoUpdate = autoUpdate(trigger, this, () => this.#reposition());
             await this.#reposition();
         }
-        // await this._showing();
         requestAnimationFrame(() => {
             if (this.open)
                 this.#focusFirstInteractiveElement();
         });
     }
-    async _hide() {
-        // await this._hiding();
+    #hide() {
         this._cleanup();
         if (this.matches(':popover-open'))
             this.hidePopover();
-        // if (this.matches(':popover-open')) {
-        //   this.#allowHidePopover = true;
-        //   try {
-        //     this.hidePopover();
-        //   } finally {
-        //     this.#allowHidePopover = false;
-        //   }
-        // }
+        const lastFocused = this.#$lastFocused;
+        this.#$lastFocused = null;
+        if (!this.noFocusControl)
+            lastFocused?.focus?.();
     }
-    // async _showing(): Promise<void> {}
-    // async _hiding(): Promise<void> {}
     #cleanupAutoUpdate;
     #dummyArrow;
     async #reposition() {
         const trigger = this.$control;
         if (!trigger)
-            return;
-        const { x, y, placement, middlewareData } = await computePosition(trigger, this, {
+            return Promise.resolve();
+        return computePosition(trigger, this, {
             placement: this.align,
             strategy: this.strategy,
             middleware: [
@@ -197,18 +248,19 @@ let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
                 shift({ padding: this.windowPadding, crossAxis: true }),
                 arrow({ element: this.#dummyArrow }),
             ],
-        });
-        Object.assign(this.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-            transformOrigin: transformOriginFromArrow(placement, middlewareData.arrow),
+        }).then(({ x, y, placement, middlewareData }) => {
+            Object.assign(this.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+                transformOrigin: transformOriginFromArrow(placement, middlewareData.arrow),
+            });
         });
     }
     _cleanup() {
         this.#cleanupAutoUpdate?.();
         this.#cleanupAutoUpdate = undefined;
     }
-};
+}
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Popup.prototype, "open", void 0);
@@ -227,7 +279,3 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: 'window-padding' })
 ], Popup.prototype, "windowPadding", void 0);
-Popup = __decorate([
-    customElement('complementary-popup')
-], Popup);
-export { Popup };

package/src/base/positioning.d.ts

@@ -0,0 +1,2 @@
+import { MiddlewareData, Placement } from '@floating-ui/dom';
+export declare function transformOriginFromArrow(placement: Placement, arrowData?: MiddlewareData['arrow']): string;

package/src/base/positioning.js

@@ -0,0 +1,23 @@
+export function transformOriginFromArrow(placement, arrowData) {
+    const { x: arrowX, y: arrowY } = arrowData || {};
+    const [side] = placement.split('-');
+    let originX = '';
+    let originY = '';
+    if (side === 'top') {
+        originX = arrowX != null ? `${arrowX}px` : 'center';
+        originY = 'bottom';
+    }
+    else if (side === 'bottom') {
+        originX = arrowX != null ? `${arrowX}px` : 'center';
+        originY = 'top';
+    }
+    else if (side === 'left') {
+        originX = 'right';
+        originY = arrowY != null ? `${arrowY}px` : 'center';
+    }
+    else if (side === 'right') {
+        originX = 'left';
+        originY = arrowY != null ? `${arrowY}px` : 'center';
+    }
+    return `${originX} ${originY}`;
+}

package/src/base/progressbar.d.ts

@@ -0,0 +1,13 @@
+import { LitElement, PropertyValues } from 'lit';
+declare const ProgressBar_base: Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+/**
+ * Not suitable for purely indeterminate progress component. For example,
+ * loading indicator in Material Design 3 should not extend this.
+ */
+export declare class ProgressBar extends ProgressBar_base {
+    value: number;
+    indeterminate: boolean;
+    constructor();
+    updated(changedProperties: PropertyValues): void;
+}
+export {};

package/src/base/progressbar.js

@@ -0,0 +1,32 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { InternalsAttached, internals } from './mixins/internals-attached.js';
+/**
+ * Not suitable for purely indeterminate progress component. For example,
+ * loading indicator in Material Design 3 should not extend this.
+ */
+export class ProgressBar extends InternalsAttached(LitElement) {
+    constructor() {
+        super();
+        this.value = 0;
+        this.indeterminate = false;
+        this[internals].role = 'progressbar';
+        this[internals].ariaValueMin = '0';
+        this[internals].ariaValueMax = '100';
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('value')) {
+            if (this.indeterminate)
+                this[internals].ariaValueNow = null;
+            else
+                this[internals].ariaValueNow = String(this.value);
+        }
+    }
+}
+__decorate([
+    property({ type: Number })
+], ProgressBar.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ProgressBar.prototype, "indeterminate", void 0);

package/src/base/slider.d.ts

@@ -1,6 +1,7 @@
 /**
  * @license
  * Copyright 2018-2023 Google, Inc.
+ * Modifications Copyright 2026 Lucas X. Zhao
  * SPDX-License-Identifier: Apache-2.0
  */
 import { LitElement, PropertyValues } from 'lit';

package/src/base/slider.js

@@ -1,6 +1,7 @@
 /**
  * @license
  * Copyright 2018-2023 Google, Inc.
+ * Modifications Copyright 2026 Lucas X. Zhao
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";

package/src/base/tooltip-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const tooltipStyles = css`:host{box-sizing:border-box;border:none;margin:0;padding:0;position:absolute;inset:auto}:host([force-invisible]){display:none!important}`;

package/src/base/tooltip.d.ts

@@ -1,8 +1,9 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 import { handleControlChange } from './mixins/attachable.js';
 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.
+ * TODO: Allow adding a real arrow
  */
 export declare class Tooltip extends Base {
     #private;
@@ -21,18 +22,18 @@ export declare class Tooltip extends Base {
         };
         recentlyShowed: number;
     };
-    readonly _durations: {
-        show: number;
-        hide: number;
-    };
     align: import('@floating-ui/dom').Placement;
     offset: number;
+    windowPadding: number;
     forceInvisible: boolean;
-    $slot: HTMLSlotElement;
+    open: boolean;
+    static styles: any[];
     render(): import("lit-html").TemplateResult<1>;
-    private readonly popoverController;
     constructor();
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
     [handleControlChange](prev?: HTMLElement | null, next?: HTMLElement | null): void;
-    set visible(value: boolean);
+    reposition(): Promise<void>;
+    _cleanup(): void;
 }
 export {};