@vollowx/seele 0.8.7 → 0.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.8.7",
+  "version": "0.8.9",
   "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": "MIT",
@@ -26,7 +26,7 @@
     "lit",
     "ui-components"
   ],
-  "homepage": "https://docs.seele.v9.nz",
+  "homepage": "https://seele.v9.nz",
   "repository": {
     "type": "git",
     "url": "https://github.com/vollowx/seele.git"

package/src/base/menu.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { setFocusVisible } from '../core/focus-visible.js';
 import { Attachable } from './mixins/attachable.js';
 import { InternalsAttached } from './mixins/internals-attached.js';
@@ -52,8 +52,7 @@ export class Menu extends Base {
         this.listController = new ListController(this, {
             isItem: (item) => this._possibleItemTags.includes(item.tagName.toLowerCase()) &&
                 !item.hasAttribute('disabled'),
-            getPossibleItems: () => Array.from(this.children).filter((child) => this._possibleItemTags.includes(child.tagName.toLowerCase()) &&
-                !child.hasAttribute('disabled')),
+            getPossibleItems: () => this.slotItems,
             blurItem: (item) => {
                 item.focused = false;
             },
@@ -90,9 +89,11 @@ export class Menu extends Base {
             // TODO: Handle $control change
             this.$control.addEventListener('focusout', this.#handleFocusOut.bind(this));
         }
-        this.listController.items.forEach((item) => {
-            item.addEventListener('mouseover', this.#handleItemMouseOver.bind(this));
-            item.addEventListener('click', this.#handleItemClick.bind(this));
+        this.updateComplete.then(() => {
+            this.listController.items.forEach((item) => {
+                item.addEventListener('mouseover', this.#handleItemMouseOver.bind(this));
+                item.addEventListener('click', this.#handleItemClick.bind(this));
+            });
         });
     }
     disconnectedCallback() {
@@ -202,7 +203,7 @@ export class Menu extends Base {
         this.listController.items[index].focused = false;
         this.dispatchEvent(new CustomEvent('select', {
             detail: {
-                item: this.listController.items[index],
+                item: clickedItem,
                 index: index,
             },
             bubbles: true,
@@ -247,3 +248,6 @@ __decorate([
 __decorate([
     query('[part="menu"]')
 ], Menu.prototype, "$menu", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], Menu.prototype, "slotItems", void 0);

package/src/base/select.js

@@ -1,7 +1,7 @@
 var _a;
 import { __decorate } from "tslib";
 import { LitElement, isServer, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { FormAssociated } from './mixins/form-associated.js';
 import { InternalsAttached } from './mixins/internals-attached.js';
 import { PopoverController } from './controllers/popover-controller.js';
@@ -61,8 +61,7 @@ export class Select extends Base {
         this.listController = new ListController(this, {
             isItem: (item) => this._possibleItemTags.includes(item.tagName.toLowerCase()) &&
                 !item.hasAttribute('disabled'),
-            getPossibleItems: () => Array.from(this.children).filter((child) => this._possibleItemTags.includes(child.tagName.toLowerCase()) &&
-                !child.hasAttribute('disabled')),
+            getPossibleItems: () => this.slotItems,
             blurItem: (item) => {
                 item.focused = false;
             },
@@ -138,18 +137,19 @@ export class Select extends Base {
         this.removeEventListener('click', this.#handleOptionClick);
     }
     async firstUpdated(changed) {
-        // Wait for slotted children to be ready
-        await this.updateComplete;
-        if (!this.listController.items.length) {
-            setTimeout(() => {
-                if (!this.lastSelectedOptionRecords.length) {
-                    this.updateValueAndDisplayText();
-                }
-            }, 0);
-        }
+        // If this has been handled on update already due to SSR, try again.
         if (!this.lastSelectedOptionRecords.length) {
             this.initUserSelection();
         }
+        // Case for when the DOM is streaming, there are no children, and a child
+        // has [selected] set on it, we need to wait for DOM to render something.
+        if (!this.lastSelectedOptionRecords.length &&
+            !isServer &&
+            !this.options.length) {
+            setTimeout(() => {
+                this.updateValueAndDisplayText();
+            }, 0);
+        }
         super.firstUpdated(changed);
     }
     update(changed) {
@@ -378,3 +378,6 @@ __decorate([
 __decorate([
     query('[part="menu"]')
 ], Select.prototype, "$menu", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], Select.prototype, "slotItems", void 0);