@vollowx/seele 0.13.5 → 0.13.7

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 };

package/src/m3/fab/fab.d.ts

@@ -0,0 +1,23 @@
+import { Button } from '../../base/button.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+/**
+ * @tag md-fab
+ *
+ * @csspart icon
+ * @csspart label
+ *
+ * @slot - icon
+ * @slot label - label
+ */
+export declare class M3Fab extends Button {
+    size: 's' | 'm' | 'l';
+    color: 'surface' | 'primary-container' | 'secondary-container' | 'tertiary-container' | 'primary' | 'secondary' | 'tertiary';
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-fab': M3Fab;
+    }
+}

package/src/m3/fab/fab.js

@@ -1,4 +1,4 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { Button } from '../../base/button.js';
@@ -6,32 +6,33 @@ import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
 import { fabStyles } from './fab-styles.css.js';
 import { targetStyles } from '../target-styles.css.js';
-export class M3Fab extends Button {
-    static{
-        this.styles = [
-            ...super.styles,
-            targetStyles,
-            fabStyles
-        ];
+/**
+ * @tag md-fab
+ *
+ * @csspart icon
+ * @csspart label
+ *
+ * @slot - icon
+ * @slot label - label
+ */
+let M3Fab = class M3Fab extends Button {
+    constructor() {
+        super(...arguments);
+        this.size = 's'; // s for default
+        this.color = 'primary';
     }
+    static { this.styles = [...super.styles, targetStyles, fabStyles]; }
     render() {
-        return html`<md-focus-ring></md-focus-ring><md-ripple></md-ripple><span part="target"></span><slot part="icon" aria-hidden="true"></slot><slot part="label" name="label"></slot>`;
+        return html `<md-focus-ring></md-focus-ring><md-ripple></md-ripple><span part="target"></span><slot part="icon" aria-hidden="true"></slot><slot part="label" name="label"></slot>`;
     }
-    constructor(...args){
-        super(...args), this.size = 's' // s for default
-        , this.color = 'primary';
-    }
-}
-_ts_decorate([
-    property({
-        reflect: true
-    })
+};
+__decorate([
+    property({ reflect: true })
 ], M3Fab.prototype, "size", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], M3Fab.prototype, "color", void 0);
-M3Fab = _ts_decorate([
+M3Fab = __decorate([
     customElement('md-fab')
 ], M3Fab);
+export { M3Fab };

package/src/m3/field/field.d.ts

@@ -0,0 +1,28 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import { Field } from '../../base/field.js';
+/**
+ * @fires {Event} change - Fired when the selected value has changed.
+ * @fires {Event} input - Fired when the selected value has changed.
+ */
+export declare abstract class M3Field extends Field {
+    label: string;
+    supportingText: string;
+    disabled: boolean;
+    error: boolean;
+    focused: boolean;
+    populated: boolean;
+    hasLabel: boolean;
+    hasStart: boolean;
+    hasEnd: boolean;
+    static styles: any[];
+    render(): TemplateResult<1>;
+    /**
+     * Should be implemented by subclasses.
+     */
+    protected abstract renderContainerContent(): TemplateResult;
+    protected renderSupportingText(): "" | TemplateResult<1>;
+    protected renderStart(): TemplateResult<1>;
+    protected renderEnd(): TemplateResult<1>;
+    update(changedProperties: PropertyValues): void;
+    protected handleSlotChange(e: Event): void;
+}

package/src/m3/field/field.js

@@ -1,4 +1,4 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { Field } from '../../base/field.js';
@@ -6,26 +6,35 @@ import { fieldStyles } from './field-styles.css.js';
 /**
  * @fires {Event} change - Fired when the selected value has changed.
  * @fires {Event} input - Fired when the selected value has changed.
- */ export class M3Field extends Field {
-    static{
-        this.styles = [
-            fieldStyles
-        ];
+ */
+export class M3Field extends Field {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.supportingText = '';
+        this.disabled = false;
+        this.error = false;
+        this.focused = false;
+        this.populated = false;
+        this.hasLabel = false;
+        this.hasStart = false;
+        this.hasEnd = false;
     }
+    static { this.styles = [fieldStyles]; }
     render() {
-        return html`<div class="container">${this.renderContainerContent()}</div>${this.renderSupportingText()}`;
+        return html `<div class="container">${this.renderContainerContent()}</div>${this.renderSupportingText()}`;
     }
     renderSupportingText() {
         if (!this.supportingText) {
             return '';
         }
-        return html`<div class="supporting-text">${this.supportingText}</div>`;
+        return html `<div class="supporting-text">${this.supportingText}</div>`;
     }
     renderStart() {
-        return html`<slot name="start" class="start" ?hidden="${!this.hasStart}" @slotchange="${this.handleSlotChange}"></slot>`;
+        return html `<slot name="start" class="start" ?hidden="${!this.hasStart}" @slotchange="${this.handleSlotChange}"></slot>`;
     }
     renderEnd() {
-        return html`<slot name="end" class="end" ?hidden="${!this.hasEnd}" @slotchange="${this.handleSlotChange}"></slot>`;
+        return html `<slot name="end" class="end" ?hidden="${!this.hasEnd}" @slotchange="${this.handleSlotChange}"></slot>`;
     }
     update(changedProperties) {
         if (changedProperties.has('label')) {
@@ -35,61 +44,37 @@ import { fieldStyles } from './field-styles.css.js';
     }
     handleSlotChange(e) {
         const slot = e.target;
-        const hasContent = slot.assignedNodes({
-            flatten: true
-        }).length > 0;
-        if (slot.name === 'start') this.hasStart = hasContent;
-        if (slot.name === 'end') this.hasEnd = hasContent;
-    }
-    constructor(...args){
-        super(...args), this.label = '', this.supportingText = '', this.disabled = false, this.error = false, this.focused = false, this.populated = false, this.hasLabel = false, this.hasStart = false, this.hasEnd = false;
+        const hasContent = slot.assignedNodes({ flatten: true }).length > 0;
+        if (slot.name === 'start')
+            this.hasStart = hasContent;
+        if (slot.name === 'end')
+            this.hasEnd = hasContent;
     }
 }
-_ts_decorate([
-    property({
-        type: String,
-        reflect: true
-    })
+__decorate([
+    property({ type: String, reflect: true })
 ], M3Field.prototype, "label", void 0);
-_ts_decorate([
-    property({
-        type: String,
-        reflect: true
-    })
+__decorate([
+    property({ type: String, reflect: true })
 ], M3Field.prototype, "supportingText", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3Field.prototype, "disabled", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3Field.prototype, "error", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3Field.prototype, "focused", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3Field.prototype, "populated", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3Field.prototype, "hasLabel", void 0);
-_ts_decorate([
+__decorate([
     state()
 ], M3Field.prototype, "hasStart", void 0);
-_ts_decorate([
+__decorate([
     state()
 ], M3Field.prototype, "hasEnd", void 0);

package/src/m3/field/filled-field.d.ts

@@ -0,0 +1,11 @@
+import { M3Field } from './field.js';
+import '../ripple/ripple.js';
+export declare class M3FilledField extends M3Field {
+    static styles: any[];
+    protected renderContainerContent(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-field': M3FilledField;
+    }
+}

package/src/m3/field/filled-field.js

@@ -1,20 +1,16 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { M3Field } from './field.js';
 import '../ripple/ripple.js';
 import { filledFieldStyles } from './filled-field-styles.css.js';
-export class M3FilledField extends M3Field {
-    static{
-        this.styles = [
-            ...super.styles,
-            filledFieldStyles
-        ];
-    }
+let M3FilledField = class M3FilledField extends M3Field {
+    static { this.styles = [...super.styles, filledFieldStyles]; }
     renderContainerContent() {
-        return html`<md-ripple clickbehavior="none" enterbehavior="none" spacebehavior="none"></md-ripple>${this.renderStart()}<div class="middle"><span class="label">${this.label}</span><div class="input-wrapper"><slot></slot></div></div>${this.renderEnd()}`;
+        return html `<md-ripple clickbehavior="none" enterbehavior="none" spacebehavior="none"></md-ripple>${this.renderStart()}<div class="middle"><span class="label">${this.label}</span><div class="input-wrapper"><slot></slot></div></div>${this.renderEnd()}`;
     }
-}
-M3FilledField = _ts_decorate([
+};
+M3FilledField = __decorate([
     customElement('md-filled-field')
 ], M3FilledField);
+export { M3FilledField };

package/src/m3/field/outlined-field.d.ts

@@ -0,0 +1,11 @@
+import { M3Field } from './field.js';
+export declare class M3OutlinedField extends M3Field {
+    static styles: any[];
+    protected renderContainerContent(): import("lit-html").TemplateResult<1>;
+    protected renderOutline(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-outlined-field': M3OutlinedField;
+    }
+}