@vollowx/seele 0.13.4 → 0.13.6

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

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

@@ -1,22 +1,18 @@
-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 { outlinedFieldStyles } from './outlined-field-styles.css.js';
-export class M3OutlinedField extends M3Field {
-    static{
-        this.styles = [
-            ...super.styles,
-            outlinedFieldStyles
-        ];
-    }
+let M3OutlinedField = class M3OutlinedField extends M3Field {
+    static { this.styles = [...super.styles, outlinedFieldStyles]; }
     renderContainerContent() {
-        return html`${this.renderOutline()} ${this.renderStart()}<div class="middle"><div class="input-wrapper"><slot></slot></div></div>${this.renderEnd()}`;
+        return html `${this.renderOutline()} ${this.renderStart()}<div class="middle"><div class="input-wrapper"><slot></slot></div></div>${this.renderEnd()}`;
     }
     renderOutline() {
-        return html`<div class="outline"><div class="outline-start"></div><div class="outline-notch"><span class="label">${this.label}</span></div><div class="outline-end"></div></div>`;
+        return html `<div class="outline"><div class="outline-start"></div><div class="outline-notch"><span class="label">${this.label}</span></div><div class="outline-end"></div></div>`;
     }
-}
-M3OutlinedField = _ts_decorate([
+};
+M3OutlinedField = __decorate([
     customElement('md-outlined-field')
 ], M3OutlinedField);
+export { M3OutlinedField };

package/src/m3/focus-ring/focus-ring.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+declare const M3FocusRing_base: Constructor<import("../../base/mixins/attachable.js").AttachableInterface> & Constructor<import("../../base/mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+/**
+ * @tag md-focus-ring
+ *
+ * @cssprop --md-focus-ring-active-width
+ * @cssprop --md-focus-ring-color
+ * @cssprop --md-focus-ring-duration
+ * @cssprop --md-focus-ring-inward-offset
+ * @cssprop --md-focus-ring-outward-offset
+ * @cssprop --md-focus-ring-shape
+ * @cssprop --md-focus-ring-shape-end-end
+ * @cssprop --md-focus-ring-shape-end-start
+ * @cssprop --md-focus-ring-shape-start-end
+ * @cssprop --md-focus-ring-shape-start-start
+ * @cssprop --md-focus-ring-width
+ */
+export declare class M3FocusRing extends M3FocusRing_base {
+    #private;
+    inward: boolean;
+    static styles: any[];
+    constructor();
+    visualFocus(): void;
+    visualBlur(): void;
+    handleControlChange(prev?: HTMLElement | null, next?: HTMLElement | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-focus-ring': M3FocusRing;
+    }
+}
+export {};

package/src/m3/focus-ring/focus-ring.js

@@ -1,24 +1,41 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { customElement } from '../../core/decorators.js';
 import { focusVisible } from '../../core/focus-visible.js';
 import { Attachable } from '../../base/mixins/attachable.js';
-import { InternalsAttached, internals } from '../../base/mixins/internals-attached.js';
+import { InternalsAttached, internals, } from '../../base/mixins/internals-attached.js';
 import { focusRingStyles } from './focus-ring-styles.css.js';
-export class M3FocusRing extends Attachable(InternalsAttached(LitElement)) {
-    static{
-        this.styles = [
-            focusRingStyles
-        ];
-    }
-    constructor(){
-        super(), this.inward = false, this.#handleFocusIn = ()=>{
-            if (focusVisible) this[internals].states.add('visible');
-            else this[internals].states.delete('visible');
-        }, this.#handleFocusOut = ()=>{
+/**
+ * @tag md-focus-ring
+ *
+ * @cssprop --md-focus-ring-active-width
+ * @cssprop --md-focus-ring-color
+ * @cssprop --md-focus-ring-duration
+ * @cssprop --md-focus-ring-inward-offset
+ * @cssprop --md-focus-ring-outward-offset
+ * @cssprop --md-focus-ring-shape
+ * @cssprop --md-focus-ring-shape-end-end
+ * @cssprop --md-focus-ring-shape-end-start
+ * @cssprop --md-focus-ring-shape-start-end
+ * @cssprop --md-focus-ring-shape-start-start
+ * @cssprop --md-focus-ring-width
+ */
+let M3FocusRing = class M3FocusRing extends Attachable(InternalsAttached(LitElement)) {
+    static { this.styles = [focusRingStyles]; }
+    constructor() {
+        super();
+        this.inward = false;
+        this.#handleFocusIn = () => {
+            if (focusVisible)
+                this[internals].states.add('visible');
+            else
+                this[internals].states.delete('visible');
+        };
+        this.#handleFocusOut = () => {
             this[internals].states.delete('visible');
-        }, this.#handlePointerDown = ()=>{
+        };
+        this.#handlePointerDown = () => {
             this[internals].states.delete('visible');
         };
         this[internals].ariaHidden = 'true';
@@ -36,20 +53,18 @@ export class M3FocusRing extends Attachable(InternalsAttached(LitElement)) {
         const eventHandlers = {
             focusin: this.#handleFocusIn,
             focusout: this.#handleFocusOut,
-            pointerdown: this.#handlePointerDown
+            pointerdown: this.#handlePointerDown,
         };
-        Object.keys(eventHandlers).forEach((eventName)=>{
+        Object.keys(eventHandlers).forEach((eventName) => {
             prev?.removeEventListener(eventName, eventHandlers[eventName]);
             next?.addEventListener(eventName, eventHandlers[eventName]);
         });
     }
-}
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3FocusRing.prototype, "inward", void 0);
-M3FocusRing = _ts_decorate([
+M3FocusRing = __decorate([
     customElement('md-focus-ring', false)
 ], M3FocusRing);
+export { M3FocusRing };

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

@@ -0,0 +1,31 @@
+import { Item } from '../../base/item.js';
+/**
+ * @tag md-item
+ *
+ * @csspart container
+ * @csspart start
+ * @csspart text
+ * @csspart overline
+ * @csspart headline
+ * @csspart supporting-text
+ * @csspart trailing-supporting-text
+ * @csspart end
+ *
+ * @slot container - container element
+ * @slot start - start content
+ * @slot overline - overline text
+ * @slot headline - headline text
+ * @slot supporting-text - supporting text
+ * @slot trailing-supporting-text - trailing supporting text
+ * @slot end - end content
+ */
+export declare class M3Item extends Item {
+    multiline: boolean;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-item': M3Item;
+    }
+}

package/src/m3/item/item.js

@@ -1,27 +1,42 @@
-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 { Item } from '../../base/item.js';
 import { itemStyles } from './item-styles.css.js';
-export class M3Item extends Item {
-    static{
-        this.styles = [
-            itemStyles
-        ];
+/**
+ * @tag md-item
+ *
+ * @csspart container
+ * @csspart start
+ * @csspart text
+ * @csspart overline
+ * @csspart headline
+ * @csspart supporting-text
+ * @csspart trailing-supporting-text
+ * @csspart end
+ *
+ * @slot container - container element
+ * @slot start - start content
+ * @slot overline - overline text
+ * @slot headline - headline text
+ * @slot supporting-text - supporting text
+ * @slot trailing-supporting-text - trailing supporting text
+ * @slot end - end content
+ */
+let M3Item = class M3Item extends Item {
+    constructor() {
+        super(...arguments);
+        this.multiline = false;
     }
+    static { this.styles = [itemStyles]; }
     render() {
-        return html`<slot name="container"></slot><slot name="start"></slot><div class="text"><slot name="overline"></slot><slot class="default-slot"></slot><slot name="headline"></slot><slot name="supporting-text"></slot></div><slot name="trailing-supporting-text"></slot><slot name="end"></slot>`;
+        return html `<slot name="container"></slot><slot name="start"></slot><div class="text"><slot name="overline"></slot><slot class="default-slot"></slot><slot name="headline"></slot><slot name="supporting-text"></slot></div><slot name="trailing-supporting-text"></slot><slot name="end"></slot>`;
     }
-    constructor(...args){
-        super(...args), this.multiline = false;
-    }
-}
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3Item.prototype, "multiline", void 0);
-M3Item = _ts_decorate([
+M3Item = __decorate([
     customElement('md-item')
 ], M3Item);
+export { M3Item };

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

@@ -0,0 +1,22 @@
+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';
+/**
+ * @tag md-list-item
+ *
+ * @slot - contents in md-item
+ */
+export declare class M3ListItem extends ListItem {
+    ripple: M3Ripple;
+    focusRing: M3FocusRing;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+    protected updated(changed: Map<string, any>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-list-item': M3ListItem;
+    }
+}

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

@@ -1,22 +1,22 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { ListItem } from '../../base/list-item.js';
 import '../item/item.js';
 import { listItemStyles } from './list-item-styles.css.js';
-export class M3ListItem extends ListItem {
-    static{
-        this.styles = [
-            ...super.styles,
-            listItemStyles
-        ];
-    }
+/**
+ * @tag md-list-item
+ *
+ * @slot - contents in md-item
+ */
+let M3ListItem = class M3ListItem extends ListItem {
+    static { this.styles = [...super.styles, listItemStyles]; }
     render() {
-        return html`<md-item><div slot="container"><md-focus-ring inward></md-focus-ring><md-ripple></md-ripple></div><slot slot="start" name="start"></slot><slot slot="overline" name="overline"></slot><slot></slot><slot slot="headline" name="headline"></slot><slot slot="supporting-text" name="supporting-text"></slot><slot slot="trailing-supporting-text" name="trailing-supporting-text"></slot><slot slot="end" name="end"></slot></md-item>`;
+        return html `<md-item><div slot="container"><md-focus-ring inward></md-focus-ring><md-ripple></md-ripple></div><slot slot="start" name="start"></slot><slot slot="overline" name="overline"></slot><slot></slot><slot slot="headline" name="headline"></slot><slot slot="supporting-text" name="supporting-text"></slot><slot slot="trailing-supporting-text" name="trailing-supporting-text"></slot><slot slot="end" name="end"></slot></md-item>`;
     }
-    constructor(){
+    constructor() {
         super();
-        this.updateComplete.then(()=>{
+        this.updateComplete.then(() => {
             this.ripple.$control = this;
             this.focusRing.$control = this;
         });
@@ -26,18 +26,20 @@ export class M3ListItem extends ListItem {
         if (changed.has('focused')) {
             if (this.focused) {
                 this.focusRing.visualFocus();
-            } else {
+            }
+            else {
                 this.focusRing.visualBlur();
             }
         }
     }
-}
-_ts_decorate([
+};
+__decorate([
     query('md-ripple')
 ], M3ListItem.prototype, "ripple", void 0);
-_ts_decorate([
+__decorate([
     query('md-focus-ring')
 ], M3ListItem.prototype, "focusRing", void 0);
-M3ListItem = _ts_decorate([
+M3ListItem = __decorate([
     customElement('md-list-item')
 ], M3ListItem);
+export { M3ListItem };

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

@@ -0,0 +1,15 @@
+import { List } from '../../base/list.js';
+/**
+ * @tag md-list
+ *
+ * TODO: Use listController
+ */
+export declare class M3List extends List {
+    color: 'standard' | 'segmented';
+    static styles: any[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-list': M3List;
+    }
+}