@vollowx/seele 0.13.6 → 0.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.13.6",
+  "version": "0.13.7",
   "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",

package/src/base/autocomplete.d.ts

@@ -5,6 +5,7 @@ declare const Base: Constructor<import("./mixins/focus-delegated.js").FocusDeleg
 type AutocompleteMode = 'none' | 'list' | 'both';
 /**
  * TODO: Check if manually dispatching input/change events on input is necessary
+ * TODO: handle slotchange
  */
 export declare class Autocomplete extends Base {
     open: boolean;

package/src/base/autocomplete.js

@@ -1,11 +1,13 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { ensureReady } from '../core/ensure-ready.js';
 import { InternalsAttached } from './mixins/internals-attached.js';
 import { FocusDelegated } from './mixins/focus-delegated.js';
 const Base = FocusDelegated(InternalsAttached(LitElement));
 /**
  * TODO: Check if manually dispatching input/change events on input is necessary
+ * TODO: handle slotchange
  */
 export class Autocomplete extends Base {
     constructor() {
@@ -52,12 +54,11 @@ export class Autocomplete extends Base {
     renderMenu() {
         return html ``;
     }
+    // TODO: handle multiple calls on this function, currently double-call
+    //       disallowed
     handleInputSlotChange() {
-        const input = this.$input;
-        if (!input)
-            return;
-        const $realInput = this.$input.$inputOrTextarea;
-        if ($realInput) {
+        ensureReady(this.$input).then((input) => {
+            const $realInput = input.$inputOrTextarea;
             $realInput.role = 'combobox';
             $realInput.ariaExpanded = String(this.open);
             $realInput.ariaHasPopup = 'listbox';
@@ -67,7 +68,7 @@ export class Autocomplete extends Base {
             input.addEventListener('keydown', this.handleInputKeydown.bind(this));
             input.addEventListener('click', () => (this.open = !this.open));
             this.$menu.attach($realInput);
-        }
+        });
     }
     handleItemsSlotChange() {
         // Initial filter based on current input value (if any)
@@ -121,12 +122,6 @@ export class Autocomplete extends Base {
         }
     }
     handleMenuSelect(event) {
-        // FIXME: pressing <Enter> in a 'both' mode autocomplete triggers this
-        //        function, which overrides the current value in the text field
-        //        since the selected value in the menu is not the same as the
-        //        one in autocomplete
-        //
-        // if (this.mode === 'list') {
         const selectedItem = event.detail.item;
         const newValue = selectedItem.getAttribute('value') ||
             selectedItem.textContent?.trim() ||
@@ -134,7 +129,6 @@ export class Autocomplete extends Base {
         if (this.$input) {
             this.$input.value = newValue;
         }
-        // }
         if (!this.keepOpenSelect) {
             this.open = false;
         }

package/src/base/menu.d.ts

@@ -19,6 +19,8 @@ export type MenuItemFocusEvent = CustomEvent<ItemFocusDetail>;
  * @fires {Event} close - Fires when the menu is closed.
  * @fires {MenuSelectEvent} select - Fires when an item is selected.
  * @fires {MenuItemFocusEvent} item-focus - Fires when an item is focused
+ *
+ * TODO: handle slotchange
  */
 export declare class Menu extends Base {
     #private;

package/src/base/menu.js

@@ -16,6 +16,8 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
  * @fires {Event} close - Fires when the menu is closed.
  * @fires {MenuSelectEvent} select - Fires when an item is selected.
  * @fires {MenuItemFocusEvent} item-focus - Fires when an item is focused
+ *
+ * TODO: handle slotchange
  */
 export class Menu extends Base {
     constructor() {

package/src/core/ensure-ready.d.ts

@@ -0,0 +1 @@
+export declare function ensureReady(element: HTMLElement): Promise<HTMLElement>;

package/src/core/ensure-ready.js

@@ -0,0 +1,15 @@
+export async function ensureReady(element) {
+    if (!element)
+        return null;
+    if (element.matches(':not(:defined)'))
+        await customElements.whenDefined(element.tagName.toLowerCase());
+    // Handles Lit update
+    if ('updateComplete' in element) {
+        await element.updateComplete;
+    }
+    else {
+        // Yield to the next frame to allow initial render to finish
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+    }
+    return element;
+}

package/src/m3/autocomplete/autocomplete.d.ts

@@ -1,4 +1,5 @@
 import { Autocomplete } from '../../base/autocomplete.js';
+import '../menu/menu.js';
 /**
  * TODO: Check if manually dispatching input/change events on input is necessary
  */

package/src/m3/autocomplete/autocomplete.js

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { Autocomplete } from '../../base/autocomplete.js';
+import '../menu/menu.js';
 import { autocompleteStyles } from './autocomplete-styles.css.js';
 /**
  * TODO: Check if manually dispatching input/change events on input is necessary

package/src/m3/badge/badge.d.ts

@@ -4,6 +4,7 @@ export declare class M3Badge extends LitElement {
     value: number;
     max: number;
     showZero: boolean;
+    small: boolean;
     left: boolean;
     bottom: boolean;
     $badge: HTMLSpanElement;

package/src/m3/badge/badge.js

@@ -7,6 +7,7 @@ let M3Badge = class M3Badge extends LitElement {
     constructor() {
         super(...arguments);
         this.showZero = false;
+        this.small = false;
         this.left = false;
         this.bottom = false;
     }
@@ -32,6 +33,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'show-zero' })
 ], M3Badge.prototype, "showZero", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Badge.prototype, "small", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Badge.prototype, "left", void 0);

package/src/m3/checkbox/checkbox.d.ts

@@ -1,7 +1,7 @@
 import { Checkbox } from '../../base/checkbox.js';
 import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
-import { M3Ripple } from '../ripple/ripple.js';
+import type { M3Ripple } from '../ripple/ripple.js';
 /**
  * @tag md-checkbox
  *

package/src/m3/list/list-item.d.ts

@@ -1,7 +1,9 @@
 import { ListItem } from '../../base/list-item.js';
 import '../item/item.js';
-import { M3Ripple } from '../ripple/ripple.js';
-import { M3FocusRing } from '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+import '../focus-ring/focus-ring.js';
+import type { M3Ripple } from '../ripple/ripple.js';
+import type { M3FocusRing } from '../focus-ring/focus-ring.js';
 /**
  * @tag md-list-item
  *

package/src/m3/list/list-item.js

@@ -3,6 +3,8 @@ import { html } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { ListItem } from '../../base/list-item.js';
 import '../item/item.js';
+import '../ripple/ripple.js';
+import '../focus-ring/focus-ring.js';
 import { listItemStyles } from './list-item-styles.css.js';
 /**
  * @tag md-list-item

package/src/m3/select/select.d.ts

@@ -1,3 +1,4 @@
+import '../menu/menu.js';
 import { Select } from '../../base/select.js';
 import { M3Field } from '../field/field.js';
 /**

package/src/m3/select/select.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import '../menu/menu.js';
 import { Select } from '../../base/select.js';
 /**
  * @fires {Event} change - Fired when the selected value has changed.

package/src/m3/dialog/dialog-spring.d.ts

@@ -1,45 +0,0 @@
-import { Dialog } from '../../base/dialog.js';
-/**
- * TODO: test if form actions `cancel` and other things related work - no,
- *       event listener needed
- *
- * To get an approximation of the "not Expressive" version like:
- * https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration#e5b958f0-435d-4e84-aed4-8d1ea395fa5c
- *
- * ```css
- * --md-sys-motion-spatial-default: cubic-bezier(0, 0, 0, 1);
- * --md-sys-motion-spatial-default-duration: 500ms;
- * --md-sys-motion-spatial-fast: cubic-bezier(0.3, 0, 1, 1);
- * --md-sys-motion-spatial-fast-duration: 300ms;
- *
- * --md-sys-motion-effects-fast: linear;
- * --md-sys-motion-effects-fast-duration: 200ms;
- * --md-sys-motion-effects-default: linear;
- * --md-sys-motion-effects-default-duration: 300ms;
- * ```
- *
- * @tag md-dialog
- *
- * @csspart container
- * @csspart headline
- * @csspart content
- * @csspart actions
- *
- * @slot icon
- * @slot headline
- * @slot - content
- * @slot actions
- */
-export declare class M3Dialog extends Dialog {
-    #private;
-    private hasIcon;
-    $container: HTMLDivElement;
-    $body: HTMLDivElement;
-    $actions: HTMLDivElement;
-    $actionsPlaceholder: HTMLDivElement;
-    $scrim: HTMLDivElement;
-    static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
-    show(): void;
-    close(): void;
-}

package/src/m3/dialog/dialog-spring.js

@@ -1,176 +0,0 @@
-import { __decorate } from "tslib";
-import { html } from 'lit';
-import { query, state, customElement } from 'lit/decorators.js';
-import { Dialog } from '../../base/dialog.js';
-import { getSpring } from '../system/motion.js';
-import { dialogStyles } from './dialog-styles.css.js';
-/**
- * TODO: test if form actions `cancel` and other things related work - no,
- *       event listener needed
- *
- * To get an approximation of the "not Expressive" version like:
- * https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration#e5b958f0-435d-4e84-aed4-8d1ea395fa5c
- *
- * ```css
- * --md-sys-motion-spatial-default: cubic-bezier(0, 0, 0, 1);
- * --md-sys-motion-spatial-default-duration: 500ms;
- * --md-sys-motion-spatial-fast: cubic-bezier(0.3, 0, 1, 1);
- * --md-sys-motion-spatial-fast-duration: 300ms;
- *
- * --md-sys-motion-effects-fast: linear;
- * --md-sys-motion-effects-fast-duration: 200ms;
- * --md-sys-motion-effects-default: linear;
- * --md-sys-motion-effects-default-duration: 300ms;
- * ```
- *
- * @tag md-dialog
- *
- * @csspart container
- * @csspart headline
- * @csspart content
- * @csspart actions
- *
- * @slot icon
- * @slot headline
- * @slot - content
- * @slot actions
- */
-let M3Dialog = class M3Dialog extends Dialog {
-    constructor() {
-        super(...arguments);
-        this.hasIcon = false;
-        this.#activeAnimations = [];
-        this.#handleClick = (e) => {
-            const target = e.target;
-            if (!this.$container.contains(target) && !this.contains(target))
-                this.close();
-        };
-        this.#handleIconSlotChange = (e) => {
-            const slot = e.target;
-            this.hasIcon = slot.assignedElements({ flatten: true }).length > 0;
-        };
-        this.#opening = false;
-        this.#closing = false;
-    }
-    static { this.styles = [dialogStyles]; }
-    render() {
-        return html `<dialog part="dialog" @click="${this.#handleClick}" @cancel="${this._handleCancel}"><div part="container"><div part="body"><div part="headline" class="${this.hasIcon ? 'has-icon' : ''}"><slot name="icon" @slotchange="${this.#handleIconSlotChange}"></slot><slot name="headline"></slot></div><div part="content"><slot></slot></div><div class="actions-placeholder"></div></div><div part="actions"><slot name="actions"></slot></div></div></dialog><div part="scrim"></div>`;
-    }
-    #activeAnimations;
-    #clearAnimations() {
-        this.#activeAnimations.forEach((anim) => anim.cancel());
-        this.#activeAnimations = [];
-        this.#opening = this.#closing = false;
-    }
-    #handleClick;
-    #handleIconSlotChange;
-    get #springs() {
-        return {
-            spatialDefault: getSpring(this, 'spatial', 'default'),
-            spatialFast: getSpring(this, 'spatial', 'fast'),
-            effectsDefault: getSpring(this, 'effects', 'default'),
-            effectsFast: getSpring(this, 'effects', 'fast'),
-        };
-    }
-    #opening;
-    show() {
-        if (this.#opening)
-            return;
-        this.#clearAnimations();
-        this.#opening = true;
-        // Reset margins to allow browser centering
-        this.$dialog.style.marginTop = 'auto';
-        this.$dialog.style.marginBottom = 'auto';
-        super.show();
-        const actionsHeight = this.$actions.offsetHeight;
-        this.$actionsPlaceholder.style.height = `${actionsHeight}px`;
-        this.$container.style.height = 'auto';
-        const startHeight = 0;
-        const endHeight = this.$container.offsetHeight;
-        // Lock the position to prevent auto-centering during animation
-        const rect = this.$container.getBoundingClientRect();
-        this.$dialog.style.marginTop = `${rect.top}px`;
-        this.$dialog.style.marginBottom = 'auto';
-        this.$container.style.minHeight = '0px';
-        const container = this.$container.animate([
-            {
-                height: `${startHeight}px`,
-                transform: `translateY(-40px)`,
-            },
-            {
-                height: `${endHeight}px`,
-                transform: 'translateY(0px)',
-            },
-        ], this.#springs.spatialDefault);
-        const scrim = this.$scrim.animate([{ opacity: 0 }, { opacity: 0.32 }], {
-            ...this.#springs.effectsDefault,
-            fill: 'forwards',
-        });
-        const body = this.$body.animate([{ opacity: 0.2 }, { opacity: 1 }], {
-            ...this.#springs.effectsDefault,
-            fill: 'forwards',
-        });
-        const actions = this.$actions.animate([{ opacity: 0.5 }, { opacity: 1 }], {
-            ...this.#springs.effectsDefault,
-            fill: 'forwards',
-        });
-        this.#activeAnimations.push(container, scrim, body, actions);
-        container.onfinish = () => {
-            this.$container.style.minHeight = '';
-            this.#clearAnimations();
-        };
-    }
-    #closing;
-    close() {
-        if (this.#closing)
-            return;
-        this.#clearAnimations();
-        this.#closing = true;
-        const startHeight = this.$container.offsetHeight;
-        const endHeight = startHeight * 0.35;
-        this.$container.style.minHeight = '0px';
-        const containerSpatial = this.$container.animate([
-            { height: `${startHeight}px`, transform: 'translateY(0px)' },
-            {
-                height: `${endHeight}px`,
-                transform: `translateY(-40px)`,
-            },
-        ], this.#springs.spatialFast);
-        const containerEffects = this.$container.animate([{ opacity: 1 }, { opacity: 0 }], {
-            ...this.#springs.effectsFast,
-            fill: 'forwards',
-        });
-        const scrim = this.$scrim.animate([{ opacity: 0.32 }, { opacity: 0 }], {
-            ...this.#springs.effectsFast,
-            fill: 'forwards',
-        });
-        this.#activeAnimations.push(containerSpatial, containerEffects, scrim);
-        containerEffects.onfinish = () => {
-            this.$container.style.minHeight = '';
-            super.close();
-            this.#clearAnimations();
-        };
-    }
-};
-__decorate([
-    state()
-], M3Dialog.prototype, "hasIcon", void 0);
-__decorate([
-    query('[part=container]')
-], M3Dialog.prototype, "$container", void 0);
-__decorate([
-    query('[part=body]')
-], M3Dialog.prototype, "$body", void 0);
-__decorate([
-    query('[part=actions]')
-], M3Dialog.prototype, "$actions", void 0);
-__decorate([
-    query('.actions-placeholder')
-], M3Dialog.prototype, "$actionsPlaceholder", void 0);
-__decorate([
-    query('[part=scrim]')
-], M3Dialog.prototype, "$scrim", void 0);
-M3Dialog = __decorate([
-    customElement('md-dialog')
-], M3Dialog);
-export { M3Dialog };

package/src/win98/button/radio.d.ts

@@ -1,3 +0,0 @@
-import { Radio } from '../../base/radio.js';
-export declare class Win98Radio extends Radio {
-}

package/src/win98/button/radio.js

@@ -1,9 +0,0 @@
-import { __decorate } from "tslib";
-import { Radio } from '../../base/radio.js';
-import { customElement } from '../../core/decorators.js';
-let Win98Radio = class Win98Radio extends Radio {
-};
-Win98Radio = __decorate([
-    customElement('win98-radio')
-], Win98Radio);
-export { Win98Radio };

package/src/win98/radio/radio.d.ts

@@ -1,3 +0,0 @@
-import { Radio } from '../../base/radio.js';
-export declare class Win98Radio extends Radio {
-}

package/src/win98/radio/radio.js

@@ -1,9 +0,0 @@
-import { __decorate } from "tslib";
-import { Radio } from '../../base/radio.js';
-import { customElement } from '../../core/decorators.js';
-let Win98Radio = class Win98Radio extends Radio {
-};
-Win98Radio = __decorate([
-    customElement('win98-radio')
-], Win98Radio);
-export { Win98Radio };