@vollowx/seele 0.13.5 → 0.13.6

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

@@ -1,21 +1,64 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+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';
-export class M3Dialog extends Dialog {
-    static{
-        this.styles = [
-            dialogStyles
-        ];
+/**
+ * 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>`;
+        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.forEach((anim) => anim.cancel());
         this.#activeAnimations = [];
         this.#opening = this.#closing = false;
     }
@@ -26,12 +69,13 @@ export class M3Dialog extends Dialog {
             spatialDefault: getSpring(this, 'spatial', 'default'),
             spatialFast: getSpring(this, 'spatial', 'fast'),
             effectsDefault: getSpring(this, 'effects', 'default'),
-            effectsFast: getSpring(this, 'effects', 'fast')
+            effectsFast: getSpring(this, 'effects', 'fast'),
         };
     }
     #opening;
     show() {
-        if (this.#opening) return;
+        if (this.#opening)
+            return;
         this.#clearAnimations();
         this.#opening = true;
         // Reset margins to allow browser centering
@@ -51,129 +95,82 @@ export class M3Dialog extends Dialog {
         const container = this.$container.animate([
             {
                 height: `${startHeight}px`,
-                transform: `translateY(-40px)`
+                transform: `translateY(-40px)`,
             },
             {
                 height: `${endHeight}px`,
-                transform: 'translateY(0px)'
-            }
-        ], this.#springs.spatialDefault);
-        const scrim = this.$scrim.animate([
-            {
-                opacity: 0
+                transform: 'translateY(0px)',
             },
-            {
-                opacity: 0.32
-            }
-        ], {
+        ], this.#springs.spatialDefault);
+        const scrim = this.$scrim.animate([{ opacity: 0 }, { opacity: 0.32 }], {
             ...this.#springs.effectsDefault,
-            fill: 'forwards'
+            fill: 'forwards',
         });
-        const body = this.$body.animate([
-            {
-                opacity: 0.2
-            },
-            {
-                opacity: 1
-            }
-        ], {
+        const body = this.$body.animate([{ opacity: 0.2 }, { opacity: 1 }], {
             ...this.#springs.effectsDefault,
-            fill: 'forwards'
+            fill: 'forwards',
         });
-        const actions = this.$actions.animate([
-            {
-                opacity: 0.5
-            },
-            {
-                opacity: 1
-            }
-        ], {
+        const actions = this.$actions.animate([{ opacity: 0.5 }, { opacity: 1 }], {
             ...this.#springs.effectsDefault,
-            fill: 'forwards'
+            fill: 'forwards',
         });
         this.#activeAnimations.push(container, scrim, body, actions);
-        container.onfinish = ()=>{
+        container.onfinish = () => {
             this.$container.style.minHeight = '';
             this.#clearAnimations();
         };
     }
     #closing;
     close() {
-        if (this.#closing) return;
+        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: `${startHeight}px`, transform: 'translateY(0px)' },
             {
                 height: `${endHeight}px`,
-                transform: `translateY(-40px)`
-            }
-        ], this.#springs.spatialFast);
-        const containerEffects = this.$container.animate([
-            {
-                opacity: 1
+                transform: `translateY(-40px)`,
             },
-            {
-                opacity: 0
-            }
-        ], {
+        ], this.#springs.spatialFast);
+        const containerEffects = this.$container.animate([{ opacity: 1 }, { opacity: 0 }], {
             ...this.#springs.effectsFast,
-            fill: 'forwards'
+            fill: 'forwards',
         });
-        const scrim = this.$scrim.animate([
-            {
-                opacity: 0.32
-            },
-            {
-                opacity: 0
-            }
-        ], {
+        const scrim = this.$scrim.animate([{ opacity: 0.32 }, { opacity: 0 }], {
             ...this.#springs.effectsFast,
-            fill: 'forwards'
+            fill: 'forwards',
         });
         this.#activeAnimations.push(containerSpatial, containerEffects, scrim);
-        containerEffects.onfinish = ()=>{
+        containerEffects.onfinish = () => {
             this.$container.style.minHeight = '';
             super.close();
             this.#clearAnimations();
         };
     }
-    constructor(...args){
-        super(...args), 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;
-    }
-}
-_ts_decorate([
+};
+__decorate([
     state()
 ], M3Dialog.prototype, "hasIcon", void 0);
-_ts_decorate([
+__decorate([
     query('[part=container]')
 ], M3Dialog.prototype, "$container", void 0);
-_ts_decorate([
+__decorate([
     query('[part=body]')
 ], M3Dialog.prototype, "$body", void 0);
-_ts_decorate([
+__decorate([
     query('[part=actions]')
 ], M3Dialog.prototype, "$actions", void 0);
-_ts_decorate([
+__decorate([
     query('.actions-placeholder')
 ], M3Dialog.prototype, "$actionsPlaceholder", void 0);
-_ts_decorate([
+__decorate([
     query('[part=scrim]')
 ], M3Dialog.prototype, "$scrim", void 0);
-M3Dialog = _ts_decorate([
+M3Dialog = __decorate([
     customElement('md-dialog')
 ], M3Dialog);
+export { M3Dialog };

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

@@ -0,0 +1,46 @@
+import { Dialog } from '../../base/dialog.js';
+/**
+ * TODO: test if form actions `cancel` and other things related work - no,
+ *       event listener needed
+ *
+ * @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;
+    _config: {
+        openEase: string;
+        closeEase: string;
+        vertSlide: number;
+        openDur: number;
+        closeDur: number;
+        bodyFadeInDur: number;
+        bodyFadeOutDur: number;
+    };
+    private hasIcon;
+    $container: HTMLDivElement;
+    $body: HTMLDivElement;
+    $icon: HTMLSlotElement;
+    $actions: HTMLDivElement;
+    $actionsPlaceholder: HTMLDivElement;
+    $scrim: HTMLDivElement;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    show(): void;
+    close(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-dialog': M3Dialog;
+    }
+}

package/src/m3/dialog/dialog.js

@@ -1,20 +1,63 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { html } from 'lit';
 import { query, state, customElement } from 'lit/decorators.js';
 import { Dialog } from '../../base/dialog.js';
 import { dialogStyles } from './dialog-styles.css.js';
-export class M3Dialog extends Dialog {
-    static{
-        this.styles = [
-            dialogStyles
-        ];
+/**
+ * TODO: test if form actions `cancel` and other things related work - no,
+ *       event listener needed
+ *
+ * @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);
+        // Was based on https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration#e5b958f0-435d-4e84-aed4-8d1ea395fa5c
+        // TODO: use curves and durations from motion physics
+        this._config = {
+            openEase: 'cubic-bezier(0, 0, 0, 1)',
+            closeEase: 'cubic-bezier(0.3, 0, 1, 1)',
+            vertSlide: 40,
+            openDur: 500,
+            closeDur: 200,
+            bodyFadeInDur: 200,
+            bodyFadeOutDur: 100,
+        };
+        this.hasIcon = false;
+        this.#activeAnimations = [];
+        this.#handleClick = (e) => {
+            const target = e.target;
+            if (!this.$container.contains(target) && !this.contains(target))
+                this.close();
+        };
+        this.#handleIconSlotChange = () => {
+            this.hasIcon = this.$icon.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>`;
+        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>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        queueMicrotask(this.#handleIconSlotChange);
+        // Which is not called on a SSR'd element
     }
     #activeAnimations;
     #clearAnimations() {
-        this.#activeAnimations.forEach((anim)=>anim.cancel());
+        this.#activeAnimations.forEach((anim) => anim.cancel());
         this.#activeAnimations = [];
         this.#opening = this.#closing = false;
     }
@@ -22,7 +65,8 @@ export class M3Dialog extends Dialog {
     #handleIconSlotChange;
     #opening;
     show() {
-        if (this.#opening) return;
+        if (this.#opening)
+            return;
         this.#clearAnimations();
         this.#opening = true;
         // Reset margins to allow browser centering
@@ -42,175 +86,104 @@ export class M3Dialog extends Dialog {
         const container = this.$container.animate([
             {
                 height: `${startHeight}px`,
-                transform: `translateY(-${this._config.vertSlide}px)`
+                transform: `translateY(-${this._config.vertSlide}px)`,
             },
             {
                 height: `${endHeight}px`,
-                transform: 'translateY(0px)'
-            }
-        ], {
-            duration: this._config.openDur,
-            easing: this._config.openEase
-        });
-        const scrim = this.$scrim.animate([
-            {
-                opacity: 0
+                transform: 'translateY(0px)',
             },
-            {
-                opacity: 0.32
-            }
-        ], {
+        ], { duration: this._config.openDur, easing: this._config.openEase });
+        const scrim = this.$scrim.animate([{ opacity: 0 }, { opacity: 0.32 }], {
             duration: this._config.openDur,
             easing: this._config.openEase,
-            fill: 'forwards'
+            fill: 'forwards',
         });
-        const body = this.$body.animate([
-            {
-                opacity: 0.2
-            },
-            {
-                opacity: 1
-            }
-        ], {
+        const body = this.$body.animate([{ opacity: 0.2 }, { opacity: 1 }], {
             duration: this._config.bodyFadeInDur,
             easing: 'linear',
-            fill: 'forwards'
+            fill: 'forwards',
         });
-        const actions = this.$actions.animate([
-            {
-                opacity: 0.5
-            },
-            {
-                opacity: 1
-            }
-        ], {
+        const actions = this.$actions.animate([{ opacity: 0.5 }, { opacity: 1 }], {
             duration: this._config.bodyFadeInDur,
             easing: 'linear',
-            fill: 'forwards'
+            fill: 'forwards',
         });
         this.#activeAnimations.push(container, scrim, body, actions);
-        container.onfinish = ()=>{
+        container.onfinish = () => {
             this.$container.style.minHeight = '';
             this.#clearAnimations();
         };
     }
     #closing;
     close() {
-        if (this.#closing) return;
+        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: `${startHeight}px`, transform: 'translateY(0px)' },
             {
                 height: `${endHeight}px`,
-                transform: `translateY(-${this._config.vertSlide}px)`
-            }
+                transform: `translateY(-${this._config.vertSlide}px)`,
+            },
         ], {
             duration: this._config.closeDur,
-            easing: this._config.closeEase
+            easing: this._config.closeEase,
         });
-        const containerEffects = this.$container.animate([
-            {
-                opacity: 1
-            },
-            {
-                opacity: 0
-            }
-        ], {
+        const containerEffects = this.$container.animate([{ opacity: 1 }, { opacity: 0 }], {
             duration: this._config.closeDur - this._config.bodyFadeOutDur,
             delay: this._config.bodyFadeOutDur,
             easing: 'linear',
-            fill: 'forwards'
+            fill: 'forwards',
         });
-        const scrim = this.$scrim.animate([
-            {
-                opacity: 0.32
-            },
-            {
-                opacity: 0
-            }
-        ], {
+        const scrim = this.$scrim.animate([{ opacity: 0.32 }, { opacity: 0 }], {
             duration: this._config.closeDur,
             easing: this._config.closeEase,
-            fill: 'forwards'
+            fill: 'forwards',
         });
-        const body = this.$body.animate([
-            {
-                opacity: 1
-            },
-            {
-                opacity: 0
-            }
-        ], {
+        const body = this.$body.animate([{ opacity: 1 }, { opacity: 0 }], {
             duration: this._config.bodyFadeOutDur,
             easing: 'linear',
-            fill: 'forwards'
+            fill: 'forwards',
         });
-        const actions = this.$actions.animate([
-            {
-                opacity: 1
-            },
-            {
-                opacity: 0
-            }
-        ], {
+        const actions = this.$actions.animate([{ opacity: 1 }, { opacity: 0 }], {
             duration: this._config.bodyFadeOutDur,
             easing: 'linear',
-            fill: 'forwards'
+            fill: 'forwards',
         });
         this.#activeAnimations.push(containerSpatial, containerEffects, scrim, body, actions);
-        containerSpatial.onfinish = ()=>{
+        containerSpatial.onfinish = () => {
             this.$container.style.minHeight = '';
             super.close();
             this.#clearAnimations();
         };
     }
-    constructor(...args){
-        super(...args), // Was based on https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration#e5b958f0-435d-4e84-aed4-8d1ea395fa5c
-        // TODO: use curves and durations from motion physics
-        this._config = {
-            openEase: 'cubic-bezier(0, 0, 0, 1)',
-            closeEase: 'cubic-bezier(0.3, 0, 1, 1)',
-            vertSlide: 40,
-            openDur: 500,
-            closeDur: 200,
-            bodyFadeInDur: 200,
-            bodyFadeOutDur: 100
-        }, 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;
-    }
-}
-_ts_decorate([
+};
+__decorate([
     state()
 ], M3Dialog.prototype, "hasIcon", void 0);
-_ts_decorate([
+__decorate([
     query('[part=container]')
 ], M3Dialog.prototype, "$container", void 0);
-_ts_decorate([
+__decorate([
     query('[part=body]')
 ], M3Dialog.prototype, "$body", void 0);
-_ts_decorate([
+__decorate([
+    query('[name=icon]')
+], M3Dialog.prototype, "$icon", void 0);
+__decorate([
     query('[part=actions]')
 ], M3Dialog.prototype, "$actions", void 0);
-_ts_decorate([
+__decorate([
     query('.actions-placeholder')
 ], M3Dialog.prototype, "$actionsPlaceholder", void 0);
-_ts_decorate([
+__decorate([
     query('[part=scrim]')
 ], M3Dialog.prototype, "$scrim", void 0);
-M3Dialog = _ts_decorate([
+M3Dialog = __decorate([
     customElement('md-dialog')
 ], M3Dialog);
+export { M3Dialog };

package/src/m3/divider/divider.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class M3Divider extends LitElement {
+    vertical: boolean;
+    inset: boolean;
+    insetStart: boolean;
+    insetEnd: boolean;
+    static styles: any[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-divider': M3Divider;
+    }
+}

package/src/m3/divider/divider.js

@@ -1,43 +1,30 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { dividerStyles } from './divider-styles.css.js';
-export class M3Divider extends LitElement {
-    static{
-        this.styles = [
-            dividerStyles
-        ];
+let M3Divider = class M3Divider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.vertical = false;
+        this.inset = false;
+        this.insetStart = false;
+        this.insetEnd = false;
     }
-    constructor(...args){
-        super(...args), this.vertical = false, this.inset = false, this.insetStart = false, this.insetEnd = false;
-    }
-}
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: false
-    })
+    static { this.styles = [dividerStyles]; }
+};
+__decorate([
+    property({ type: Boolean, reflect: false })
 ], M3Divider.prototype, "vertical", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: false
-    })
+__decorate([
+    property({ type: Boolean, reflect: false })
 ], M3Divider.prototype, "inset", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: false,
-        attribute: 'inset-start'
-    })
+__decorate([
+    property({ type: Boolean, reflect: false, attribute: 'inset-start' })
 ], M3Divider.prototype, "insetStart", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: false,
-        attribute: 'inset-end'
-    })
+__decorate([
+    property({ type: Boolean, reflect: false, attribute: 'inset-end' })
 ], M3Divider.prototype, "insetEnd", void 0);
-M3Divider = _ts_decorate([
+M3Divider = __decorate([
     customElement('md-divider')
 ], M3Divider);
+export { M3Divider };