@vollowx/seele 0.14.0 → 0.14.2

package/README.md

@@ -56,7 +56,9 @@ seele relies on the following modern web standards:
 | [`:dir()`][:dir]                                       | 2023     | 120      | -       | -      |
 | [Constructable Stylesheets][constructable-stylesheets] | 2024     | -        | 126     | -      |
 | [`:state()`][:state]                                   | 2024     | 125      | 126     | -      |
+| [`@starting-style`][starting-style]                    | 2024     | -        | -       | 17.5   |
 | [`aria*Element`][aria-active] and similar              | 2025     | 135      | 136     | 16.4   |
+| [Popover API][popover-api]                             | 2025     | -        | -       | 17     |
 | [`CSSNumericValue`][css-numeric-value]                 | not yet  | -        | Nightly | -      |
 
 _* `CSSNumericValue` is worked around currently so it does not raise the minimum
@@ -66,14 +68,12 @@ All of the above result in the following minimum requirements:
 
 - Chromium: >= 135
 - Firefox: >= 136
-- Safari: >= 16.4
+- Safari: >= 17.5
 
 It is 2026 now, so you don't really need to worry about this. However, in the
 future, the following web features might be used and require higher browser
 versions:
 
-- [Popover API][popover-api] — Baseline 2025, Safari 17, _will improve menu, popup, and combobox_
-- [`@starting-style`][starting-style] — Baseline 2025, Safari 17.5
 - [`anchor()`][anchor] — Baseline 2026, Firefox 147, Safari 26, _will remove the dependency `floating-dom`_
 
 _* omitting a specific browser version means using that standard does not raise

package/custom-elements.json

@@ -1436,42 +1436,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/m3/experimental/popup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "M3Popup",
-          "members": [],
-          "superclass": {
-            "name": "Popup",
-            "module": "/src/base/experimental/popup.js"
-          },
-          "tagName": "md-popup",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "M3Popup",
-          "declaration": {
-            "name": "M3Popup",
-            "module": "src/m3/experimental/popup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "md-popup",
-          "declaration": {
-            "name": "M3Popup",
-            "module": "src/m3/experimental/popup.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/m3/fab/fab.ts",
@@ -2834,12 +2798,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/m3/loading-indicator/loading-indicator.ts",
+      "path": "src/m3/loading/loading.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "M3LoadingIndicator",
+          "name": "M3Loading",
           "members": [
             {
               "kind": "field",
@@ -2992,18 +2956,75 @@
       "exports": [
         {
           "kind": "js",
-          "name": "M3LoadingIndicator",
+          "name": "M3Loading",
           "declaration": {
-            "name": "M3LoadingIndicator",
-            "module": "src/m3/loading-indicator/loading-indicator.ts"
+            "name": "M3Loading",
+            "module": "src/m3/loading/loading.ts"
           }
         },
         {
           "kind": "custom-element-definition",
           "name": "md-loading",
           "declaration": {
-            "name": "M3LoadingIndicator",
-            "module": "src/m3/loading-indicator/loading-indicator.ts"
+            "name": "M3Loading",
+            "module": "src/m3/loading/loading.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/m3/menu/composed-menu.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "M3ComposedMenu",
+          "members": [
+            {
+              "kind": "field",
+              "name": "vibrant",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "vibrant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "vibrant",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "vibrant"
+            }
+          ],
+          "superclass": {
+            "name": "ComposedMenu",
+            "module": "/src/base/composed-menu.js"
+          },
+          "tagName": "md-composed-menu",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3ComposedMenu",
+          "declaration": {
+            "name": "M3ComposedMenu",
+            "module": "src/m3/menu/composed-menu.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "md-composed-menu",
+          "declaration": {
+            "name": "M3ComposedMenu",
+            "module": "src/m3/menu/composed-menu.ts"
           }
         }
       ]
@@ -3093,10 +3114,7 @@
           "name": "M3Menu",
           "cssParts": [
             {
-              "name": "menu-surface"
-            },
-            {
-              "name": "list"
+              "name": "items"
             }
           ],
           "slots": [
@@ -3105,37 +3123,7 @@
               "name": ""
             }
           ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "_durations",
-              "type": {
-                "text": "object"
-              },
-              "readonly": true,
-              "default": "{ show: 300, hide: 150 }"
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "'standard' | 'vibrant'"
-              },
-              "default": "'standard'",
-              "attribute": "color",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "'standard' | 'vibrant'"
-              },
-              "default": "'standard'",
-              "fieldName": "color"
-            }
-          ],
+          "members": [],
           "superclass": {
             "name": "Menu",
             "module": "/src/base/menu.js"
@@ -3295,6 +3283,134 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/m3/popup/popup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "M3Popup",
+          "members": [
+            {
+              "kind": "field",
+              "name": "quick",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "quick",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "vibrant",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "vibrant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "quick",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "quick"
+            },
+            {
+              "name": "vibrant",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "vibrant"
+            }
+          ],
+          "superclass": {
+            "name": "Popup",
+            "module": "/src/base/popup.js"
+          },
+          "tagName": "md-popup",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3Popup",
+          "declaration": {
+            "name": "M3Popup",
+            "module": "src/m3/popup/popup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "md-popup",
+          "declaration": {
+            "name": "M3Popup",
+            "module": "src/m3/popup/popup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/m3/progress/linear-progress.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "TODO: wavy?\nNOTE: buffering progress indicator is no longer documented in MD3",
+          "name": "M3LinearProgress",
+          "cssParts": [
+            {
+              "name": "track"
+            },
+            {
+              "name": "gap"
+            },
+            {
+              "name": "active"
+            },
+            {
+              "name": "before"
+            },
+            {
+              "name": "after"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "ProgressBar",
+            "module": "/src/base/progressbar.js"
+          },
+          "tagName": "md-linear-progress",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3LinearProgress",
+          "declaration": {
+            "name": "M3LinearProgress",
+            "module": "src/m3/progress/linear-progress.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "md-linear-progress",
+          "declaration": {
+            "name": "M3LinearProgress",
+            "module": "src/m3/progress/linear-progress.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/m3/radio/radio.ts",
@@ -3686,30 +3802,6 @@
                 "module": "src/m3/select/select.ts"
               }
             }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "Event"
-              },
-              "description": "Fired when the selected value has changed.",
-              "name": "change",
-              "inheritedFrom": {
-                "name": "M3Select",
-                "module": "src/m3/select/select.ts"
-              }
-            },
-            {
-              "type": {
-                "text": "Event"
-              },
-              "description": "Fired when the selected value has changed.",
-              "name": "input",
-              "inheritedFrom": {
-                "name": "M3Select",
-                "module": "src/m3/select/select.ts"
-              }
-            }
           ]
         }
       ],
@@ -3919,30 +4011,6 @@
                 "module": "src/m3/select/select.ts"
               }
             }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "Event"
-              },
-              "description": "Fired when the selected value has changed.",
-              "name": "change",
-              "inheritedFrom": {
-                "name": "M3Select",
-                "module": "src/m3/select/select.ts"
-              }
-            },
-            {
-              "type": {
-                "text": "Event"
-              },
-              "description": "Fired when the selected value has changed.",
-              "name": "input",
-              "inheritedFrom": {
-                "name": "M3Select",
-                "module": "src/m3/select/select.ts"
-              }
-            }
           ]
         }
       ],
@@ -4015,22 +4083,6 @@
               "privacy": "protected"
             }
           ],
-          "events": [
-            {
-              "type": {
-                "text": "Event"
-              },
-              "description": "Fired when the selected value has changed.",
-              "name": "change"
-            },
-            {
-              "type": {
-                "text": "Event"
-              },
-              "description": "Fired when the selected value has changed.",
-              "name": "input"
-            }
-          ],
           "attributes": [
             {
               "name": "label",
@@ -4911,17 +4963,7 @@
           "kind": "class",
           "description": "",
           "name": "M3Tooltip",
-          "members": [
-            {
-              "kind": "field",
-              "name": "_durations",
-              "type": {
-                "text": "object"
-              },
-              "readonly": true,
-              "default": "{ show: 150, hide: 150 }"
-            }
-          ],
+          "members": [],
           "superclass": {
             "name": "Tooltip",
             "module": "/src/base/tooltip.js"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.14.0",
-  "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
+  "version": "0.14.2",
+  "description": "An extensible Web Components library, with Material 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",
   "type": "module",
@@ -53,13 +53,13 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@types/node": "^26.1.2",
+    "@types/node": "^26.6.2",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-esbuild": "^1.0.5",
     "chokidar": "^5.0.0",
     "lightningcss": "^1.33.0",
     "minify-html-literals": "^1.3.5",
-    "prettier": "^3.9.6",
+    "prettier": "^3.9.8",
     "typescript": "^7.0.2"
   },
   "dependencies": {

package/src/all.d.ts

@@ -14,13 +14,14 @@ import './m3/focus-ring/focus-ring.js';
 import './m3/item/item.js';
 import './m3/list/list.js';
 import './m3/list/list-item.js';
-import './m3/loading-indicator/loading-indicator.js';
+import './m3/loading/loading.js';
 import './m3/menu/menu.js';
 import './m3/menu/menu-item.js';
 import './m3/menu/composed-menu.js';
 import './m3/navigation/navigation-rail.js';
 import './m3/navigation/navigation-rail-item.js';
 import './m3/popup/popup.js';
+import './m3/progress/linear-progress.js';
 import './m3/radio/radio.js';
 import './m3/ripple/ripple.js';
 import './m3/select/filled-select.js';

package/src/all.js

@@ -14,13 +14,14 @@ import './m3/focus-ring/focus-ring.js';
 import './m3/item/item.js';
 import './m3/list/list.js';
 import './m3/list/list-item.js';
-import './m3/loading-indicator/loading-indicator.js';
+import './m3/loading/loading.js';
 import './m3/menu/menu.js';
 import './m3/menu/menu-item.js';
 import './m3/menu/composed-menu.js';
 import './m3/navigation/navigation-rail.js';
 import './m3/navigation/navigation-rail-item.js';
 import './m3/popup/popup.js';
+import './m3/progress/linear-progress.js';
 import './m3/radio/radio.js';
 import './m3/ripple/ripple.js';
 import './m3/select/filled-select.js';

package/src/base/autocomplete.d.ts

@@ -21,6 +21,7 @@ export declare class Autocomplete extends Base {
      */
     renderMenu(): import("lit-html").TemplateResult<1>;
     constructor();
+    firstUpdated(): Promise<void>;
     private handleInputSlotChange;
     protected handleItemsSlotChange(): Promise<void>;
     private handleInput;

package/src/base/autocomplete.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { LitElement, html, isServer } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
-import { ensureReady } from '../core/ensure-ready.js';
+import { ensureSlottedReady } from '../core/ensure-ready.js';
 import { InternalsAttached } from './mixins/internals-attached.js';
 import { FocusDelegated } from './mixins/focus-delegated.js';
 const Base = FocusDelegated(InternalsAttached(LitElement));
@@ -25,6 +25,10 @@ export class Autocomplete extends Base {
         super();
         this.open = false;
         this.mode = 'none';
+        /**
+         * To prevent multiple calls.
+         */
+        this.#inputBound = false;
         if (!isServer) {
             this.addEventListener('focusout', this.#handleFocusOut.bind(this));
         }
@@ -45,12 +49,19 @@ export class Autocomplete extends Base {
                 this.$popup.hide();
         });
     }
-    // TODO: handle multiple calls on this function, currently double-call
-    //       disallowed
+    async firstUpdated() {
+        await this.handleInputSlotChange();
+    }
+    /**
+     * To prevent multiple calls.
+     */
+    #inputBound;
     async handleInputSlotChange() {
-        await ensureReady(this.$input);
+        if (this.#inputBound)
+            return;
+        await ensureSlottedReady(this, () => this.inputSlotElements);
         const input = this.$input;
-        const $realInput = input.$inputOrTextarea;
+        const $realInput = input?.$inputOrTextarea;
         $realInput.role = 'combobox';
         $realInput.ariaHasPopup = 'listbox';
         $realInput.ariaAutoComplete = this.mode;
@@ -59,6 +70,7 @@ export class Autocomplete extends Base {
         input.addEventListener('keydown', this.handleInputKeydown.bind(this));
         this.$popup.$ariaControl = $realInput;
         this.$popup.attach(input);
+        this.#inputBound = true;
     }
     async handleItemsSlotChange() {
         // Initial filter based on current input value (if any)

package/src/base/composed-menu.d.ts

@@ -0,0 +1,16 @@
+import { handleControlChange } from './mixins/attachable.js';
+import { Popup } from './popup.js';
+import type { Menu } from './menu.js';
+/**
+ * A popup that wraps a `Menu`. Use this for standalone menus anchored to a
+ * button or other control.
+ *
+ * @slot - menu items
+ * @csspart menu - the internal menu part
+ */
+export declare class ComposedMenu extends Popup {
+    $menu: Menu;
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+    [handleControlChange](prev: HTMLElement | null, next: HTMLElement | null): void;
+}

package/src/base/composed-menu.js

@@ -0,0 +1,36 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { query } from 'lit/decorators.js';
+import { ensureReady } from '../core/ensure-ready.js';
+import { internals } from './mixins/internals-attached.js';
+import { handleControlChange } from './mixins/attachable.js';
+import { Popup } from './popup.js';
+/**
+ * A popup that wraps a `Menu`. Use this for standalone menus anchored to a
+ * button or other control.
+ *
+ * @slot - menu items
+ * @csspart menu - the internal menu part
+ */
+export class ComposedMenu extends Popup {
+    render() {
+        return html `<md-menu part="menu"><slot></slot></md-menu>`;
+    }
+    constructor() {
+        super();
+        this[internals].role = 'application';
+    }
+    [handleControlChange](prev, next) {
+        if (next) {
+            next.ariaHasPopup = 'menu';
+            ensureReady(this.$menu).then(() => {
+                next.ariaControlsElements = [this.$menu];
+                this.$menu[internals].ariaLabelledByElements = [next];
+            });
+        }
+        super[handleControlChange](prev, next);
+    }
+}
+__decorate([
+    query('md-menu')
+], ComposedMenu.prototype, "$menu", void 0);

package/src/base/menu.js

@@ -63,6 +63,7 @@ export class Menu extends InternalsAttached(LitElement) {
             },
             wrapNavigation: () => false,
         });
+        this.#suppressClick = false;
         this[internals].role = 'menu';
         if (!this.hasAttribute('tabindex')) {
             this.setAttribute('tabindex', '0');
@@ -73,6 +74,8 @@ export class Menu extends InternalsAttached(LitElement) {
             this.addEventListener('focusout', this.#handleFocusOut.bind(this));
             this.addEventListener('mouseover', this.#handleMouseOver.bind(this));
             this.addEventListener('click', this.#handleClick.bind(this));
+            this.addEventListener('pointerdown', this.#handlePointerDown.bind(this));
+            this.addEventListener('pointerup', this.#handlePointerUp.bind(this));
         }
     }
     #handleFocusIn() {
@@ -147,9 +150,32 @@ export class Menu extends InternalsAttached(LitElement) {
             this.listController._focusItem(item.item);
     }
     #handleClick(event) {
+        if (this.#suppressClick) {
+            this.#suppressClick = false;
+            return;
+        }
+        const item = this.#getItemFromEvent(event);
+        if (!item)
+            return;
+        item.item.focused = false;
+        this.#dispatchAction({ ...item });
+        if (!this.keepOpenAction)
+            this.#dispatchHide();
+    }
+    #suppressClick;
+    #handlePointerDown(_event) {
+        this.#suppressClick = false;
+    }
+    #handlePointerUp(event) {
+        if (event.pointerType === 'touch')
+            return;
+        if (event.button !== 0)
+            return;
         const item = this.#getItemFromEvent(event);
         if (!item)
             return;
+        // Ignore the `click` that follows a mouse release on an item.
+        this.#suppressClick = true;
         item.item.focused = false;
         this.#dispatchAction({ ...item });
         if (!this.keepOpenAction)

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const popupStyles = css`:host([notransition]){transition:none!important}:host{box-sizing:border-box;border:none;margin:0;padding:0;position:absolute;inset:auto;overflow:auto}`;
+export const popupStyles = css`:host([notransition]){transition:none!important}:host{box-sizing:border-box;border:none;margin:0;padding:0;position:absolute;inset:auto}:host([strategy=fixed]){position:fixed}`;