@vollowx/seele 0.13.5 → 0.13.7

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/core/focus-visible.d.ts

@@ -0,0 +1,2 @@
+export declare let focusVisible: boolean;
+export declare function setFocusVisible(value: boolean): void;

package/src/core/focus-visible.js

@@ -4,10 +4,10 @@ export function setFocusVisible(value) {
     focusVisible = value;
 }
 if (!isServer) {
-    window.addEventListener('keydown', ()=>focusVisible = true, {
-        capture: true
+    window.addEventListener('keydown', () => (focusVisible = true), {
+        capture: true,
     });
-    window.addEventListener('mousedown', ()=>focusVisible = false, {
-        capture: true
+    window.addEventListener('mousedown', () => (focusVisible = false), {
+        capture: true,
     });
 }

package/src/core/shared.d.ts

@@ -0,0 +1 @@
+type Constructor<T> = new (...args: any[]) => T;

package/src/core/unique-id.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generates a unique ID with an prefix.
+ */
+export declare function genUniqueId(prefix: string): string;

package/src/core/unique-id.js

@@ -1,7 +1,8 @@
 let uniqueIdCounters = {};
 /**
  * Generates a unique ID with an prefix.
- */ export function genUniqueId(prefix) {
+ */
+export function genUniqueId(prefix) {
     if (!(prefix in uniqueIdCounters)) {
         uniqueIdCounters[prefix] = 0;
     }

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

@@ -0,0 +1,9 @@
+import { Autocomplete } from '../../base/autocomplete.js';
+import '../menu/menu.js';
+/**
+ * TODO: Check if manually dispatching input/change events on input is necessary
+ */
+export declare class M3Autocomplete extends Autocomplete {
+    static styles: any[];
+    renderMenu(): import("lit-html").TemplateResult<1>;
+}

package/src/m3/autocomplete/autocomplete.js

@@ -1,18 +1,19 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+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';
-export class M3Autocomplete extends Autocomplete {
-    static{
-        this.styles = [
-            autocompleteStyles
-        ];
-    }
+/**
+ * TODO: Check if manually dispatching input/change events on input is necessary
+ */
+let M3Autocomplete = class M3Autocomplete extends Autocomplete {
+    static { this.styles = [autocompleteStyles]; }
     renderMenu() {
-        return html`<md-menu part="menu" id="menu" type="listbox" data-tabindex="-1" ?quick="${this.quick}" .offset="${this.offset}" .align="${this.align}" .alignStrategy="${this.alignStrategy}" ?keep-open-select="${this.keepOpenSelect}" no-focus-control ?open="${this.open}" @open="${()=>this.open = true}" @close="${()=>this.open = false}" @select="${this.handleMenuSelect}"><slot @slotchange="${this.handleItemsSlotChange}"></slot></md-menu>`;
+        return html `<md-menu part="menu" id="menu" type="listbox" data-tabindex="-1" ?quick="${this.quick}" .offset="${this.offset}" .align="${this.align}" .alignStrategy="${this.alignStrategy}" ?keep-open-select="${this.keepOpenSelect}" no-focus-control ?open="${this.open}" @open="${() => (this.open = true)}" @close="${() => (this.open = false)}" @select="${this.handleMenuSelect}"><slot @slotchange="${this.handleItemsSlotChange}"></slot></md-menu>`;
     }
-}
-M3Autocomplete = _ts_decorate([
+};
+M3Autocomplete = __decorate([
     customElement('md-autocomplete')
 ], M3Autocomplete);
+export { M3Autocomplete };

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

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class M3Badge extends LitElement {
+    #private;
+    value: number;
+    max: number;
+    showZero: boolean;
+    small: boolean;
+    left: boolean;
+    bottom: boolean;
+    $badge: HTMLSpanElement;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/m3/badge/badge.js

@@ -1,15 +1,19 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { badgeStyles } from './badge-styles.css.js';
-export class M3Badge extends LitElement {
-    static{
-        this.styles = [
-            badgeStyles
-        ];
+// TODO: integrate with md-tab
+let M3Badge = class M3Badge extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.showZero = false;
+        this.small = false;
+        this.left = false;
+        this.bottom = false;
     }
+    static { this.styles = [badgeStyles]; }
     render() {
-        return html`<div part="root"><slot></slot><span part="badge">${this.#getDisplayValue()}</span></div>`;
+        return html `<div part="root"><slot></slot><span part="badge">${this.#getDisplayValue()}</span></div>`;
     }
     #getDisplayValue() {
         const value = this.value;
@@ -19,42 +23,29 @@ export class M3Badge extends LitElement {
         }
         return value;
     }
-    constructor(...args){
-        super(...args), this.showZero = false, this.left = false, this.bottom = false;
-    }
-}
-_ts_decorate([
-    property({
-        type: Number
-    })
+};
+__decorate([
+    property({ type: Number })
 ], M3Badge.prototype, "value", void 0);
-_ts_decorate([
-    property({
-        type: Number
-    })
+__decorate([
+    property({ type: Number })
 ], M3Badge.prototype, "max", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        attribute: 'show-zero'
-    })
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-zero' })
 ], M3Badge.prototype, "showZero", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Badge.prototype, "small", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3Badge.prototype, "left", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3Badge.prototype, "bottom", void 0);
-_ts_decorate([
+__decorate([
     query('[part~="badge"]')
 ], M3Badge.prototype, "$badge", void 0);
-M3Badge = _ts_decorate([
+M3Badge = __decorate([
     customElement('md-badge')
 ], M3Badge);
+export { M3Badge };

package/src/m3/button/common-button-toggle.d.ts

@@ -0,0 +1,31 @@
+import { ToggleButton } from '../../base/toggle-button.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+/**
+ * @tag md-button-toggle
+ *
+ * @csspart label
+ * @csspart label checked
+ * @csspart icon
+ * @csspart icon checked
+ *
+ * @slot - label
+ * @slot icon - leading icon
+ */
+export declare class M3ButtonToggle extends ToggleButton {
+    size: 'xs' | 's' | 'm' | 'l' | 'xl';
+    square: boolean;
+    color: 'primary' | 'secondary' | 'tertiary';
+    variant: 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';
+    /**
+     * Whether to show the icon at the end of the button.
+     */
+    trailingIcon: boolean;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-button-toggle': M3ButtonToggle;
+    }
+}

package/src/m3/button/common-button-toggle.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 { ToggleButton } from '../../base/toggle-button.js';
@@ -8,53 +8,56 @@ import { targetStyles } from '../target-styles.css.js';
 import { sharedButtonStyles } from './shared-button-styles.css.js';
 import { sharedButtonToggleStyles } from './shared-button-toggle-styles.css.js';
 import { commonButtonStyles } from './common-button-styles.css.js';
-export class M3ButtonToggle extends ToggleButton {
-    static{
-        this.styles = [
-            ...super.styles,
-            targetStyles,
-            sharedButtonStyles,
-            sharedButtonToggleStyles,
-            commonButtonStyles
-        ];
+/**
+ * @tag md-button-toggle
+ *
+ * @csspart label
+ * @csspart label checked
+ * @csspart icon
+ * @csspart icon checked
+ *
+ * @slot - label
+ * @slot icon - leading icon
+ */
+let M3ButtonToggle = class M3ButtonToggle extends ToggleButton {
+    constructor() {
+        super(...arguments);
+        this.size = 's';
+        this.square = false;
+        this.color = 'primary';
+        this.variant = 'filled';
+        /**
+         * Whether to show the icon at the end of the button.
+         */
+        this.trailingIcon = false;
     }
+    static { this.styles = [
+        ...super.styles,
+        targetStyles,
+        sharedButtonStyles,
+        sharedButtonToggleStyles,
+        commonButtonStyles,
+    ]; }
     render() {
-        return html`<md-focus-ring></md-focus-ring><md-ripple></md-ripple><span part="target"></span><slot part="icon unchecked" name="icon" aria-hidden="true"></slot><slot part="icon checked" name="icon-checked" aria-hidden="true"></slot><slot part="label unchecked"></slot><slot part="label checked" name="checked"></slot>`;
+        return html `<md-focus-ring></md-focus-ring><md-ripple></md-ripple><span part="target"></span><slot part="icon unchecked" name="icon" aria-hidden="true"></slot><slot part="icon checked" name="icon-checked" aria-hidden="true"></slot><slot part="label unchecked"></slot><slot part="label checked" name="checked"></slot>`;
     }
-    constructor(...args){
-        super(...args), this.size = 's', this.square = false, this.color = 'primary', this.variant = 'filled', /**
-   * Whether to show the icon at the end of the button.
-   */ this.trailingIcon = false;
-    }
-}
-_ts_decorate([
-    property({
-        reflect: true
-    })
+};
+__decorate([
+    property({ reflect: true })
 ], M3ButtonToggle.prototype, "size", void 0);
-_ts_decorate([
-    property({
-        reflect: true,
-        type: Boolean
-    })
+__decorate([
+    property({ reflect: true, type: Boolean })
 ], M3ButtonToggle.prototype, "square", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], M3ButtonToggle.prototype, "color", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], M3ButtonToggle.prototype, "variant", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        attribute: 'trailing-icon'
-    })
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })
 ], M3ButtonToggle.prototype, "trailingIcon", void 0);
-M3ButtonToggle = _ts_decorate([
+M3ButtonToggle = __decorate([
     customElement('md-button-toggle')
 ], M3ButtonToggle);
+export { M3ButtonToggle };

package/src/m3/button/common-button.d.ts

@@ -0,0 +1,29 @@
+import { Button } from '../../base/button.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+/**
+ * @tag md-button
+ *
+ * @csspart label
+ * @csspart icon
+ *
+ * @slot - label
+ * @slot icon - leading icon
+ */
+export declare class M3Button extends Button {
+    size: 'xs' | 's' | 'm' | 'l' | 'xl';
+    square: false;
+    color: 'primary' | 'secondary' | 'tertiary';
+    variant: 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';
+    /**
+     * Whether to show the icon at the end of the button.
+     */
+    trailingIcon: boolean;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-button': M3Button;
+    }
+}

package/src/m3/button/common-button.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';
@@ -7,52 +7,52 @@ import '../ripple/ripple.js';
 import { targetStyles } from '../target-styles.css.js';
 import { sharedButtonStyles } from './shared-button-styles.css.js';
 import { commonButtonStyles } from './common-button-styles.css.js';
-export class M3Button extends Button {
-    static{
-        this.styles = [
-            ...super.styles,
-            targetStyles,
-            sharedButtonStyles,
-            commonButtonStyles
-        ];
+/**
+ * @tag md-button
+ *
+ * @csspart label
+ * @csspart icon
+ *
+ * @slot - label
+ * @slot icon - leading icon
+ */
+let M3Button = class M3Button extends Button {
+    constructor() {
+        super(...arguments);
+        this.size = 's';
+        this.color = 'primary';
+        this.variant = 'filled';
+        /**
+         * Whether to show the icon at the end of the button.
+         */
+        this.trailingIcon = false;
     }
+    static { this.styles = [
+        ...super.styles,
+        targetStyles,
+        sharedButtonStyles,
+        commonButtonStyles,
+    ]; }
     render() {
-        return html`<md-focus-ring></md-focus-ring><md-ripple></md-ripple><span part="target"></span><slot part="icon" name="icon" aria-hidden="true"></slot><slot part="label"></slot>`;
+        return html `<md-focus-ring></md-focus-ring><md-ripple></md-ripple><span part="target"></span><slot part="icon" name="icon" aria-hidden="true"></slot><slot part="label"></slot>`;
     }
-    constructor(...args){
-        super(...args), this.size = 's', this.color = 'primary', this.variant = 'filled', /**
-   * Whether to show the icon at the end of the button.
-   */ this.trailingIcon = false;
-    }
-}
-_ts_decorate([
-    property({
-        reflect: true
-    })
+};
+__decorate([
+    property({ reflect: true })
 ], M3Button.prototype, "size", void 0);
-_ts_decorate([
-    property({
-        reflect: true,
-        type: Boolean
-    })
+__decorate([
+    property({ reflect: true, type: Boolean })
 ], M3Button.prototype, "square", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], M3Button.prototype, "color", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], M3Button.prototype, "variant", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        attribute: 'trailing-icon'
-    })
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })
 ], M3Button.prototype, "trailingIcon", void 0);
-M3Button = _ts_decorate([
+M3Button = __decorate([
     customElement('md-button')
 ], M3Button);
+export { M3Button };

package/src/m3/button/icon-button-toggle.d.ts

@@ -0,0 +1,24 @@
+import { ToggleButton } from '../../base/toggle-button.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+/**
+ * @tag md-icon-button-toggle
+ *
+ * @csspart icon
+ *
+ * @slot - icon
+ * @slot checked - icon when checked
+ */
+export declare class M3IconButtonToggle extends ToggleButton {
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    size: 'xs' | 's' | 'm' | 'l' | 'xl';
+    color: 'primary' | 'secondary' | 'tertiary';
+    variant: 'text' | 'filled' | 'tonal' | 'outlined';
+    width: 'standard' | 'narrow' | 'wide';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-icon-button-toggle': M3IconButtonToggle;
+    }
+}

package/src/m3/button/icon-button-toggle.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 { ToggleButton } from '../../base/toggle-button.js';
@@ -8,43 +8,46 @@ import { targetStyles } from '../target-styles.css.js';
 import { sharedButtonStyles } from './shared-button-styles.css.js';
 import { sharedButtonToggleStyles } from './shared-button-toggle-styles.css.js';
 import { iconButtonStyles } from './icon-button-styles.css.js';
-export class M3IconButtonToggle extends ToggleButton {
-    static{
-        this.styles = [
-            ...super.styles,
-            targetStyles,
-            sharedButtonStyles,
-            sharedButtonToggleStyles,
-            iconButtonStyles
-        ];
+/**
+ * @tag md-icon-button-toggle
+ *
+ * @csspart icon
+ *
+ * @slot - icon
+ * @slot checked - icon when checked
+ */
+let M3IconButtonToggle = class M3IconButtonToggle extends ToggleButton {
+    constructor() {
+        super(...arguments);
+        this.size = 's';
+        this.color = 'primary';
+        this.variant = 'text';
+        this.width = 'standard';
     }
+    static { this.styles = [
+        ...super.styles,
+        targetStyles,
+        sharedButtonStyles,
+        sharedButtonToggleStyles,
+        iconButtonStyles,
+    ]; }
     render() {
-        return html`<md-focus-ring></md-focus-ring><md-ripple enterbehavior="always"></md-ripple><span part="target"></span><slot part="icon unchecked"></slot><slot part="icon checked" name="checked"></slot>`;
+        return html `<md-focus-ring></md-focus-ring><md-ripple enterbehavior="always"></md-ripple><span part="target"></span><slot part="icon unchecked"></slot><slot part="icon checked" name="checked"></slot>`;
     }
-    constructor(...args){
-        super(...args), this.size = 's', this.color = 'primary', this.variant = 'text', this.width = 'standard';
-    }
-}
-_ts_decorate([
-    property({
-        reflect: true
-    })
+};
+__decorate([
+    property({ reflect: true })
 ], M3IconButtonToggle.prototype, "size", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], M3IconButtonToggle.prototype, "color", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], M3IconButtonToggle.prototype, "variant", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], M3IconButtonToggle.prototype, "width", void 0);
-M3IconButtonToggle = _ts_decorate([
+M3IconButtonToggle = __decorate([
     customElement('md-icon-button-toggle')
 ], M3IconButtonToggle);
+export { M3IconButtonToggle };

package/src/m3/button/icon-button.d.ts

@@ -0,0 +1,23 @@
+import { Button } from '../../base/button.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+/**
+ * @tag md-icon-button
+ *
+ * @csspart icon
+ *
+ * @slot - icon
+ */
+export declare class M3IconButton extends Button {
+    size: 'xs' | 's' | 'm' | 'l' | 'xl';
+    color: 'primary' | 'secondary' | 'tertiary';
+    variant: 'text' | 'filled' | 'tonal' | 'outlined';
+    width: 'standard' | 'narrow' | 'wide';
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-icon-button': M3IconButton;
+    }
+}