@vollowx/seele 0.8.4 → 0.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "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",
@@ -18,6 +18,7 @@
     "LICENSE",
     "README.md"
   ],
+  "customElements": "custom-elements.json",
   "keywords": [
     "web-components",
     "material-design",
@@ -25,6 +26,7 @@
     "lit",
     "ui-components"
   ],
+  "homepage": "https://docs.seele.v9.nz",
   "repository": {
     "type": "git",
     "url": "https://github.com/vollowx/seele.git"

package/src/base/menu.js

@@ -3,7 +3,7 @@ import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { setFocusVisible } from '../core/focus-visible.js';
 import { Attachable } from './mixins/attachable.js';
-import { internals, InternalsAttached } from './mixins/internals-attached.js';
+import { InternalsAttached } from './mixins/internals-attached.js';
 import { PopoverController } from './controllers/popover-controller.js';
 import { ListController } from './controllers/list-controller.js';
 import { MenuActions, getActionFromKey, getUpdatedIndex, scrollItemIntoView, } from './menu-utils.js';
@@ -13,10 +13,12 @@ const Base = InternalsAttached(Attachable(LitElement));
  * @csspart items
  *
  * @fires {Event} select - Fired when a menu item has been selected.
+ * @fires {Event} open - Fired when the menu is opened.
+ * @fires {Event} close - Fired when the menu is closed.
  */
 export class Menu extends Base {
     constructor() {
-        super();
+        super(...arguments);
         this._possibleItemTags = [];
         this._durations = { show: 0, hide: 0 };
         this._scrollPadding = 0;
@@ -57,32 +59,35 @@ export class Menu extends Base {
             },
             focusItem: (item) => {
                 item.focused = true;
-                // this[internals].ariaActiveDescendantElement = item;
-                // Somehow setting ariaActiveDescendantElement doesn't actually update it
-                this.setAttribute('aria-activedescendant', item.id);
+                this.$menu.setAttribute('aria-activedescendant', item.id);
                 scrollItemIntoView(this.$menu, item, this._scrollPadding);
             },
             wrapNavigation: () => false,
         });
-        this[internals].role = 'menu';
-        this.tabIndex = -1;
     }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
     render() {
-        return html `<div part="menu">${this.renderItemSlot()}</div>`;
+        return html `<div
+      part="menu"
+      role="menu"
+      tabindex="0"
+      @keydown=${this.#handleKeyDown.bind(this)}
+      @focusout=${this.#handleFocusOut.bind(this)}
+    >
+      ${this.renderItemSlot()}
+    </div>`;
     }
     renderItemSlot() {
         return html `<slot part="items"></slot>`;
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('keydown', this.#handleKeyDown.bind(this));
-        this.addEventListener('focusout', this.#handleFocusOut.bind(this));
         if (this.$control) {
+            // TODO: Manage $control ARIA attributes
             // TODO: Handle $control change
-            this.$control.ariaHasPopup = 'true';
-            this.$control.ariaExpanded = 'false';
-            this.$control.ariaControlsElements = [this];
-            this[internals].ariaLabelledByElements = [this.$control];
             this.$control.addEventListener('focusout', this.#handleFocusOut.bind(this));
         }
         this.listController.items.forEach((item) => {
@@ -92,8 +97,6 @@ export class Menu extends Base {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.removeEventListener('keydown', this.#handleKeyDown.bind(this));
-        this.removeEventListener('focusout', this.#handleFocusOut.bind(this));
         if (this.$control) {
             this.$control.removeEventListener('focusout', this.#handleFocusOut.bind(this));
         }
@@ -101,16 +104,18 @@ export class Menu extends Base {
     updated(changed) {
         if (changed.has('open')) {
             if (this.open) {
+                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.focus();
+                    this.$menu.focus();
                     this.listController.focusFirstItem();
                 });
             }
             else {
+                this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));
                 this.listController.clearSearch();
                 if (this.$control) {
                     this.$control.ariaExpanded = 'false';

package/src/base/select.js

@@ -1,11 +1,13 @@
+var _a;
 import { __decorate } from "tslib";
 import { LitElement, isServer, html } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+import { property, query } 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';
 import { ListController } from './controllers/list-controller.js';
 import { MenuActions, getActionFromKey, getUpdatedIndex, scrollItemIntoView, } from './menu-utils.js';
+const VALUE = Symbol('value');
 const Base = FormAssociated(InternalsAttached(LitElement));
 /**
  * @csspart field
@@ -23,15 +25,22 @@ export class Select extends Base {
         this._possibleItemTags = [];
         this._durations = { show: 0, hide: 0 };
         this._scrollPadding = 0;
-        this.value = '';
-        this.displayValue = '';
-        this.placeholder = '';
-        this.open = false;
-        this.required = false;
         this.quick = false;
+        this.required = false;
+        this.error = false;
         this.align = 'bottom-start';
         this.alignStrategy = 'absolute';
         this.offset = 0;
+        /**
+         * Text to display in the field. Only set for SSR.
+         */
+        this.displayText = '';
+        this[_a] = '';
+        this.open = false;
+        this.lastUserSetValue = null;
+        this.lastUserSetSelectedIndex = null;
+        this.lastSelectedOption = null;
+        this.lastSelectedOptionRecords = [];
         this.popoverController = new PopoverController(this, {
             popover: () => this.$menu,
             trigger: () => this.$field,
@@ -66,6 +75,102 @@ export class Select extends Base {
             },
             wrapNavigation: () => false,
         });
+        this.#dispatchChangeEvent = () => {
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+        };
+        this.#handleOptionClick = (event) => {
+            const target = event.target;
+            const item = target.closest(this._possibleItemTags.join(','));
+            if (item && this.listController.items.includes(item)) {
+                if (this.selectItem(item)) {
+                    this.#dispatchChangeEvent();
+                }
+                this.open = false;
+            }
+        };
+        this.#handleFocusOut = (event) => {
+            const relatedTarget = event.relatedTarget;
+            if (!this.contains(relatedTarget) && !this.$menu.contains(relatedTarget)) {
+                this.open = false;
+            }
+        };
+    }
+    static { _a = VALUE; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    get value() {
+        return this[VALUE];
+    }
+    set value(value) {
+        if (isServer)
+            return;
+        this.lastUserSetValue = value;
+        this.select(value);
+    }
+    get options() {
+        return this.listController.items;
+    }
+    get selectedIndex() {
+        const selectedOptions = this.getSelectedOptions() ?? [];
+        if (selectedOptions.length > 0) {
+            return selectedOptions[0][1];
+        }
+        return -1;
+    }
+    set selectedIndex(index) {
+        this.lastUserSetSelectedIndex = index;
+        this.selectIndex(index);
+    }
+    get selectedOptions() {
+        return (this.getSelectedOptions() ?? []).map(([option]) => option);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('focusout', this.#handleFocusOut);
+        this.addEventListener('click', this.#handleOptionClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('focusout', this.#handleFocusOut);
+        this.removeEventListener('click', this.#handleOptionClick);
+    }
+    async firstUpdated(changed) {
+        // 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();
+            });
+        }
+        super.firstUpdated(changed);
+    }
+    update(changed) {
+        if (!this.hasUpdated) {
+            this.initUserSelection();
+        }
+        super.update(changed);
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('open')) {
+            if (this.open) {
+                this.popoverController.animateOpen();
+                this.#focusSelectedItemOrFirst();
+            }
+            else {
+                this.popoverController.animateClose();
+                this.listController.clearSearch();
+            }
+        }
     }
     render() {
         return html `${this.renderField()} ${this.renderMenu()}`;
@@ -96,50 +201,7 @@ export class Select extends Base {
     `;
     }
     renderFieldContent() {
-        return html `<span part="value"
-      >${this.displayValue || this.placeholder}</span
-    >`;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (isServer)
-            return;
-        this.addEventListener('click', this.#handleOptionClick);
-        this.addEventListener('focusout', this.#handleFocusOut);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('click', this.#handleOptionClick);
-        this.removeEventListener('focusout', this.#handleFocusOut);
-    }
-    updated(changed) {
-        super.updated(changed);
-        if (changed.has('value')) {
-            this.#updateDisplayValue();
-            this.#updateSelection();
-        }
-        if (changed.has('open')) {
-            if (this.open) {
-                this.popoverController.animateOpen();
-                // Focus current item when opening
-                const index = this.listController.items.findIndex((item) => (item.value || item.innerText) === this.value);
-                if (index >= 0) {
-                    this.listController._focusItem(this.listController.items[index]);
-                }
-                else {
-                    this.listController.focusFirstItem();
-                }
-            }
-            else {
-                this.popoverController.animateClose();
-                this.listController.clearSearch();
-            }
-        }
-    }
-    toggle() {
-        if (this.disabled)
-            return;
-        this.open = !this.open;
+        return html `<span part="value">${this.displayText || html `&nbsp;`}</span>`;
     }
     handleFieldKeydown(event) {
         if (this.disabled)
@@ -159,11 +221,13 @@ export class Select extends Base {
             case MenuActions.PageDown:
                 event.preventDefault();
                 const nextIndex = getUpdatedIndex(currentIndex, maxIndex, action);
-                this.#onOptionChange(nextIndex);
+                this.listController._focusItem(items[nextIndex]);
                 return;
             case MenuActions.CloseSelect:
                 event.preventDefault();
-                this.#selectOption(currentIndex);
+                if (this.selectItem(items[currentIndex])) {
+                    this.#dispatchChangeEvent();
+                }
             // intentional fallthrough
             case MenuActions.Close:
                 event.preventDefault();
@@ -179,99 +243,115 @@ export class Select extends Base {
                 return;
         }
     }
-    #onOptionChange(index) {
-        const items = this.listController.items;
-        if (index >= 0 && index < items.length) {
-            this.listController._focusItem(items[index]);
-        }
-    }
-    #selectOption(index) {
-        const items = this.listController.items;
-        if (index >= 0 && index < items.length) {
-            const item = items[index];
-            const newValue = item.value || item.innerText;
-            if (this.value !== newValue) {
-                this.value = newValue;
-                // According to https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event#event_type
-                // the change and input events are just Event and should not include detail.
-                this.dispatchEvent(new Event('input', { bubbles: true }));
-                this.dispatchEvent(new Event('change', { bubbles: true }));
+    selectItem(item) {
+        const selectedOptions = this.getSelectedOptions() ?? [];
+        selectedOptions.forEach(([option]) => {
+            if (item !== option) {
+                option.selected = false;
             }
-            this.open = false;
-        }
+        });
+        item.selected = true;
+        return this.updateValueAndDisplayText();
     }
-    #handleOptionClick(event) {
-        const target = event.target;
-        const item = target.closest(this._possibleItemTags.join(','));
-        if (item && this.listController.items.includes(item)) {
-            const index = this.listController.items.indexOf(item);
-            this.#selectOption(index);
+    initUserSelection() {
+        if (this.lastUserSetValue && !this.lastSelectedOptionRecords.length) {
+            this.select(this.lastUserSetValue);
         }
-    }
-    #handleFocusOut(event) {
-        const relatedTarget = event.relatedTarget;
-        if (!this.contains(relatedTarget) && !this.$menu.contains(relatedTarget)) {
-            this.open = false;
+        else if (this.lastUserSetSelectedIndex !== null &&
+            !this.lastSelectedOptionRecords.length) {
+            this.selectIndex(this.lastUserSetSelectedIndex);
+        }
+        else {
+            this.updateValueAndDisplayText();
         }
     }
-    #updateDisplayValue() {
-        if (isServer)
-            return;
-        // We need to wait for items to be available.
-        // Using a microtask or just checking if items exist.
-        // Since this is called in updated(), items might be available if children are slotted.
-        const items = this.listController.items;
-        const selectedItem = items.find((item) => (item.value || item.innerText) === this.value);
-        if (selectedItem) {
-            this.displayValue = selectedItem.innerText;
+    updateValueAndDisplayText() {
+        const selectedOptions = this.getSelectedOptions() ?? [];
+        let changed = false;
+        if (selectedOptions.length) {
+            const [firstSelectedOption] = selectedOptions[0];
+            changed = this.lastSelectedOption !== firstSelectedOption;
+            this.lastSelectedOption = firstSelectedOption;
+            this[VALUE] = firstSelectedOption.value;
+            this.displayText = firstSelectedOption.innerText;
         }
-        else if (!this.value) {
-            this.displayValue = '';
+        else {
+            changed = this.lastSelectedOption !== null;
+            this.lastSelectedOption = null;
+            this[VALUE] = '';
+            this.displayText = '';
         }
+        return changed;
     }
-    // TODO: Store previously selected item to avoid looping through all items
-    #updateSelection() {
+    getSelectedOptions() {
         const items = this.listController.items;
-        items.forEach((item) => {
-            const itemValue = item.value || item.innerText;
-            item.selected = itemValue === this.value;
+        const records = [];
+        items.forEach((item, index) => {
+            if (item.selected) {
+                records.push([item, index]);
+            }
         });
+        this.lastSelectedOptionRecords = records;
+        return records.length ? records : null;
+    }
+    #dispatchChangeEvent;
+    #handleOptionClick;
+    #handleFocusOut;
+    #focusSelectedItemOrFirst() {
+        const selectedOptions = this.getSelectedOptions();
+        if (selectedOptions && selectedOptions.length > 0) {
+            const [item] = selectedOptions[0];
+            this.listController._focusItem(item);
+        }
+        else {
+            this.listController.focusFirstItem();
+        }
     }
-    // TODO: Handle multiple selected items
     handleSlotChange() {
-        const items = this.listController.items;
-        if (!this.value && items.length > 0) {
-            const selectedItem = items.find((item) => item.hasAttribute('selected'));
-            if (selectedItem) {
-                this.value = selectedItem.value || selectedItem.innerText;
-            }
-            else {
-                const firstItem = items[0];
-                this.value = firstItem.value || firstItem.innerText;
-            }
+        // When slots change, check for initially selected items if value is not set
+        if (!this.value) {
+            this.updateValueAndDisplayText();
+        }
+    }
+    formResetCallback() {
+        this.reset();
+    }
+    formStateRestoreCallback(state) {
+        this.value = state;
+    }
+    select(value) {
+        const item = this.options.find((option) => option.value === value);
+        if (item) {
+            this.selectItem(item);
         }
-        this.#updateDisplayValue();
-        this.#updateSelection();
+    }
+    selectIndex(index) {
+        const item = this.options[index];
+        if (item) {
+            this.selectItem(item);
+        }
+    }
+    reset() {
+        for (const option of this.options) {
+            option.selected = option.hasAttribute('selected');
+        }
+        this.updateValueAndDisplayText();
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
     }
 }
 __decorate([
-    property({ reflect: true })
-], Select.prototype, "value", void 0);
-__decorate([
-    state()
-], Select.prototype, "displayValue", void 0);
-__decorate([
-    property({ type: String })
-], Select.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Select.prototype, "open", void 0);
+    property({ type: Boolean })
+], Select.prototype, "quick", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Select.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Select.prototype, "quick", void 0);
+], Select.prototype, "error", void 0);
 __decorate([
     property({ reflect: true })
 ], Select.prototype, "align", void 0);
@@ -281,6 +361,18 @@ __decorate([
 __decorate([
     property({ type: Number, reflect: true })
 ], Select.prototype, "offset", void 0);
+__decorate([
+    property({ attribute: 'display-text' })
+], Select.prototype, "displayText", void 0);
+__decorate([
+    property()
+], Select.prototype, "value", null);
+__decorate([
+    property({ type: Number, attribute: 'selected-index' })
+], Select.prototype, "selectedIndex", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Select.prototype, "open", void 0);
 __decorate([
     query('[part="field"]')
 ], Select.prototype, "$field", void 0);

package/src/base/tooltip.js

@@ -7,6 +7,9 @@ import { InternalsAttached, internals } from './mixins/internals-attached.js';
 import { PopoverController } from './controllers/popover-controller.js';
 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 {
     // Different from those in the popoverController, these timers are used to
     // manage the delay before showing/hiding the tooltip.
@@ -23,6 +26,7 @@ export class Tooltip extends Base {
         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;
@@ -134,6 +138,9 @@ __decorate([
 __decorate([
     property({ type: Number, reflect: true })
 ], Tooltip.prototype, "offset", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Tooltip.prototype, "forceInvisible", void 0);
 __decorate([
     query('slot')
 ], Tooltip.prototype, "$slot", void 0);

package/src/m3/item-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const itemStyles = css `:host{border-radius:inherit;box-sizing:border-box;font:var(--md-sys-typography-body-large);text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex:1;align-items:center;gap:16px;min-height:48px;padding:12px;display:flex;position:relative;overflow:hidden}:host([multiline]){min-height:72px}[name=container]{border-radius:inherit}[name=container]::slotted(*){position:absolute;inset:0}.default-slot{display:inline}.default-slot,.text ::slotted(*){text-overflow:ellipsis;overflow:hidden}.text{flex-direction:column;flex:1;display:flex;overflow:hidden}`;
+export const itemStyles = css `:host{border-radius:inherit;box-sizing:border-box;font:var(--md-sys-typography-body-large);text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex:1;align-items:center;gap:16px;min-height:48px;padding:12px;display:flex;position:relative}:host([multiline]){min-height:72px}[name=container]{border-radius:inherit}[name=container]::slotted(*){position:absolute;inset:0}.default-slot{display:inline}.default-slot,.text ::slotted(*){text-overflow:ellipsis;overflow:hidden}.text{flex-direction:column;flex:1;display:flex;overflow:hidden}`;

package/src/m3/menu-part-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const menuPartStyles = css `[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:inherit;max-width:inherit;min-width:inherit;opacity:0;-webkit-user-select:none;user-select:none;z-index:1000;border-radius:16px;padding:4px;inset:auto;overflow-y:auto;transform:scaleY(.4)}:host(:state(closed)) [part=menu]{display:none}:host(:state(opening)) [part=menu]{opacity:1;transition:opacity 67ms,transform var(--md-sys-motion-exp-effects-slow-duration)var(--md-sys-motion-exp-effects-slow);display:block;transform:scaleY(1)}:host(:state(opened)) [part=menu]{opacity:1;display:block;transform:scaleY(1)}:host(:state(closing)) [part=menu]{opacity:0;transition:opacity var(--md-sys-motion-exp-effects-default-duration),transform var(--md-sys-motion-exp-effects-default-duration)var(--md-sys-motion-exp-effects-default);transform:scaleY(.4)}[part=items]{opacity:0;flex-direction:column;gap:2px;display:flex}:host(:state(opening)) [part=items]{opacity:1;transition:opacity 67ms linear 67ms}:host(:state(opened)) [part=items]{opacity:1}:host(:state(closing)) [part=items]{opacity:0;transition:opacity 67ms}`;
+export const menuPartStyles = css `[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:inherit;max-width:inherit;min-width:inherit;opacity:0;-webkit-user-select:none;user-select:none;z-index:1000;border-radius:16px;outline:0;padding:4px;inset:auto;overflow-y:auto;transform:scaleY(.4)}:host(:state(closed)) [part=menu]{display:none}:host(:state(opening)) [part=menu]{opacity:1;transition:opacity 67ms,transform var(--md-sys-motion-exp-effects-slow-duration)var(--md-sys-motion-exp-effects-slow);display:block;transform:scaleY(1)}:host(:state(opened)) [part=menu]{opacity:1;display:block;transform:scaleY(1)}:host(:state(closing)) [part=menu]{opacity:0;transition:opacity var(--md-sys-motion-exp-effects-default-duration),transform var(--md-sys-motion-exp-effects-default-duration)var(--md-sys-motion-exp-effects-default);transform:scaleY(.4)}[part=items]{opacity:0;flex-direction:column;gap:2px;display:flex}:host(:state(opening)) [part=items]{opacity:1;transition:opacity 67ms linear 67ms}:host(:state(opened)) [part=items]{opacity:1}:host(:state(closing)) [part=items]{opacity:0;transition:opacity 67ms}`;

package/src/m3/menu-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const menuStyles = css `:host{outline:0;min-width:112px;display:contents}:host([alignstrategy=fixed]){position:fixed}`;
+export const menuStyles = css `:host{min-width:112px;display:contents}:host([alignstrategy=fixed]){position:fixed}`;

package/src/m3/select/select.js

@@ -13,7 +13,6 @@ export class M3Select extends Select {
         this._scrollPadding = 4;
         this.label = '';
         this.supportingText = '';
-        this.error = false;
         this.fieldFocused = false;
     }
 }
@@ -23,9 +22,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], M3Select.prototype, "supportingText", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], M3Select.prototype, "error", void 0);
 __decorate([
     state()
 ], M3Select.prototype, "fieldFocused", void 0);

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tooltipStyles = css `:host{background-color:var(--md-sys-color-inverse-surface);box-sizing:border-box;color:#0000;font:var(--md-sys-typography-body-small);max-width:var(--_max-width,300px);opacity:0;pointer-events:none;z-index:9999;border-radius:4px;align-items:center;width:max-content;min-height:24px;padding:4px 8px;display:flex;position:absolute;top:0;left:0;transform:scaleY(.4)}:host(:state(closed)){display:none}:host(:state(opening)){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transition:color linear 67ms 67ms,opacity var(--md-sys-motion-exp-effects-fast-duration)var(--md-sys-motion-exp-effects-fast),transform var(--md-sys-motion-exp-effects-fast-duration)var(--md-sys-motion-exp-effects-fast);transform:scaleY(1)}:host(:state(opened)){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transform:scaleY(1)}:host(:state(closing)){color:#0000;opacity:0;transition:color linear 67ms,opacity var(--md-sys-motion-exp-effects-fast-duration)var(--md-sys-motion-exp-effects-fast),transform var(--md-sys-motion-exp-effects-fast-duration)var(--md-sys-motion-exp-effects-fast);transform:scaleY(.4)}`;
+export const tooltipStyles = css `:host{background-color:var(--md-sys-color-inverse-surface);box-sizing:border-box;color:#0000;font:var(--md-sys-typography-body-small);max-width:var(--_max-width,300px);opacity:0;pointer-events:none;z-index:800;border-radius:4px;align-items:center;width:max-content;min-height:24px;padding:4px 8px;display:flex;position:absolute;top:0;left:0;transform:scaleY(.4)}:host(:state(closed)){display:none}:host(:state(opening):not([forceinvisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transition:color linear 67ms 67ms,opacity var(--md-sys-motion-exp-effects-fast-duration)var(--md-sys-motion-exp-effects-fast),transform var(--md-sys-motion-exp-effects-fast-duration)var(--md-sys-motion-exp-effects-fast);transform:scaleY(1)}:host(:state(opened):not([forceinvisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transform:scaleY(1)}:host(:state(closing):not([forceinvisible])){color:#0000;opacity:0;transition:color linear 67ms,opacity var(--md-sys-motion-exp-effects-fast-duration)var(--md-sys-motion-exp-effects-fast),transform var(--md-sys-motion-exp-effects-fast-duration)var(--md-sys-motion-exp-effects-fast);transform:scaleY(.4)}`;