@vollowx/seele 0.13.5 → 0.13.6

package/src/m3/switch/switch.d.ts

@@ -0,0 +1,27 @@
+import { ToggleButton } from '../../base/toggle-button.js';
+import '../focus-ring/focus-ring.js';
+import { M3Ripple } from '../ripple/ripple.js';
+/**
+ * @tag md-switch
+ *
+ * @csspart thumb
+ * @csspart label
+ */
+export declare class M3Switch extends ToggleButton {
+    #private;
+    $ripple: M3Ripple;
+    $thumb: HTMLSpanElement;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    renderOnIcon(): import("lit-html").TemplateResult<1>;
+    renderOffIcon(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    icons: boolean;
+    checkedIconOnly: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-switch': M3Switch;
+    }
+}

package/src/m3/switch/switch.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, query } from 'lit/decorators.js';
 import { ToggleButton } from '../../base/toggle-button.js';
@@ -8,25 +8,67 @@ import { targetStyles } from '../target-styles.css.js';
 function isRTL() {
     return document.documentElement.dir === 'rtl';
 }
-export class M3Switch extends ToggleButton {
-    static{
-        this.styles = [
-            targetStyles,
-            switchStyles
-        ];
+/**
+ * @tag md-switch
+ *
+ * @csspart thumb
+ * @csspart label
+ */
+let M3Switch = class M3Switch extends ToggleButton {
+    constructor() {
+        super(...arguments);
+        this.icons = false;
+        this.checkedIconOnly = false;
+        this.#pointerDownX = 0;
+        this.#handlePointerDown = (e) => {
+            this._ignoreClick = false;
+            if (e.button !== 0)
+                return;
+            this.#pointerDownX = e.clientX;
+            this.setPointerCapture(e.pointerId);
+            this.addEventListener('pointermove', this.#handlePointerMove);
+        };
+        this.#handlePointerMove = (e) => {
+            const diff = (isRTL() ? -1 : 1) * (e.clientX - this.#pointerDownX);
+            this._ignoreClick = true;
+            const limitedDiff = this.checked
+                ? Math.min(0, Math.max(-20, diff))
+                : Math.min(20, Math.max(0, diff));
+            this.$thumb.style.setProperty('--_thumb-diff-pointer', `${2 * limitedDiff}px`);
+            // Thumb loses its `:active` status before pointer up event
+            this.$thumb.style.setProperty('--_thumb-diameter', '28px');
+            this.$thumb.style.transitionDuration = '0s';
+        };
+        this.#handlePointerUp = (e) => {
+            this.removeEventListener('pointermove', this.#handlePointerMove);
+            this.releasePointerCapture(e.pointerId);
+            const trackRect = this.getBoundingClientRect();
+            const thumbRect = this.$thumb.getBoundingClientRect();
+            const diff = thumbRect.left +
+                thumbRect.width / 2 -
+                trackRect.left -
+                trackRect.width / 2;
+            const shouldBeChecked = (diff >= 0 && !isRTL()) || (diff < 0 && isRTL());
+            this.$thumb.style.setProperty('--_thumb-diff-pointer', '');
+            this.$thumb.style.setProperty('--_thumb-diameter', '');
+            this.$thumb.style.transitionDuration = '';
+            if (this.checked != shouldBeChecked)
+                this.toggleChecked();
+        };
     }
+    static { this.styles = [targetStyles, switchStyles]; }
     render() {
-        return html`<md-focus-ring></md-focus-ring><div part="thumb"><md-ripple spacebehavior="always"></md-ripple><span part="target"></span> ${this.renderOffIcon()}${this.renderOnIcon()}</div>`;
+        return html `<md-focus-ring></md-focus-ring><div part="thumb"><md-ripple spacebehavior="always"></md-ripple><span part="target"></span> ${this.renderOffIcon()}${this.renderOnIcon()}</div>`;
     }
     renderOnIcon() {
-        return html`<svg part="icons icon-on" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z"/></svg>`;
+        return html `<svg part="icons icon-on" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z"/></svg>`;
     }
     renderOffIcon() {
-        return html`<svg part="icons icon-off" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z"/></svg>`;
+        return html `<svg part="icons icon-off" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z"/></svg>`;
     }
     connectedCallback() {
         super.connectedCallback();
-        this.updateComplete.then(()=>{
+        this.updateComplete.then(() => {
             this.$ripple.attach(this);
         });
         this.addEventListener('pointerdown', this.#handlePointerDown);
@@ -41,53 +83,20 @@ export class M3Switch extends ToggleButton {
     #handlePointerDown;
     #handlePointerMove;
     #handlePointerUp;
-    constructor(...args){
-        super(...args), this.icons = false, this.checkedIconOnly = false, this.#pointerDownX = 0, this.#handlePointerDown = (e)=>{
-            this._ignoreClick = false;
-            if (e.button !== 0) return;
-            this.#pointerDownX = e.clientX;
-            this.setPointerCapture(e.pointerId);
-            this.addEventListener('pointermove', this.#handlePointerMove);
-        }, this.#handlePointerMove = (e)=>{
-            const diff = (isRTL() ? -1 : 1) * (e.clientX - this.#pointerDownX);
-            this._ignoreClick = true;
-            const limitedDiff = this.checked ? Math.min(0, Math.max(-20, diff)) : Math.min(20, Math.max(0, diff));
-            this.$thumb.style.setProperty('--_thumb-diff-pointer', `${2 * limitedDiff}px`);
-            // Thumb loses its `:active` status before pointer up event
-            this.$thumb.style.setProperty('--_thumb-diameter', '28px');
-            this.$thumb.style.transitionDuration = '0s';
-        }, this.#handlePointerUp = (e)=>{
-            this.removeEventListener('pointermove', this.#handlePointerMove);
-            this.releasePointerCapture(e.pointerId);
-            const trackRect = this.getBoundingClientRect();
-            const thumbRect = this.$thumb.getBoundingClientRect();
-            const diff = thumbRect.left + thumbRect.width / 2 - trackRect.left - trackRect.width / 2;
-            const shouldBeChecked = diff >= 0 && !isRTL() || diff < 0 && isRTL();
-            this.$thumb.style.setProperty('--_thumb-diff-pointer', '');
-            this.$thumb.style.setProperty('--_thumb-diameter', '');
-            this.$thumb.style.transitionDuration = '';
-            if (this.checked != shouldBeChecked) this.toggleChecked();
-        };
-    }
-}
-_ts_decorate([
+};
+__decorate([
     query('md-ripple')
 ], M3Switch.prototype, "$ripple", void 0);
-_ts_decorate([
+__decorate([
     query('[part~="thumb"]')
 ], M3Switch.prototype, "$thumb", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3Switch.prototype, "icons", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3Switch.prototype, "checkedIconOnly", void 0);
-M3Switch = _ts_decorate([
+M3Switch = __decorate([
     customElement('md-switch')
 ], M3Switch);
+export { M3Switch };

package/src/m3/system/motion.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Workaround for `CSSNumericValue.parse()` not being supported by Firefox
+ * https://developer.mozilla.org/en-US/docs/Web/API/CSSNumericValue/parse_static
+ */
+export declare const parseCSSNum: (css: string) => number;
+/**
+ * https://m3.material.io/styles/motion/overview/specs
+ */
+export declare const getSpring: (element: HTMLElement, type: 'spatial' | 'effects', duration: 'fast' | 'default' | 'slow') => {
+    easing: string;
+    duration: number;
+};

package/src/m3/system/motion.js

@@ -1,27 +1,34 @@
 /**
  * Workaround for `CSSNumericValue.parse()` not being supported by Firefox
  * https://developer.mozilla.org/en-US/docs/Web/API/CSSNumericValue/parse_static
- */ export const parseCSSNum = (css)=>{
+ */
+export const parseCSSNum = (css) => {
     if (typeof CSSNumericValue !== 'undefined') {
         try {
             return CSSNumericValue.parse(css).to('ms').value;
-        } catch  {
+        }
+        catch {
             return 0;
         }
-    } else {
+    }
+    else {
         css = css.trim().toLowerCase();
-        if (css.endsWith('ms')) return parseFloat(css.substring(0, css.length - 2)) | 0;
-        else if (css.endsWith('s')) return parseFloat(css.substring(0, css.length - 1)) * 1000 | 0;
-        else return 0;
+        if (css.endsWith('ms'))
+            return parseFloat(css.substring(0, css.length - 2)) | 0;
+        else if (css.endsWith('s'))
+            return (parseFloat(css.substring(0, css.length - 1)) * 1000) | 0;
+        else
+            return 0;
     }
 };
 /**
  * https://m3.material.io/styles/motion/overview/specs
- */ export const getSpring = (element, type, duration)=>{
+ */
+export const getSpring = (element, type, duration) => {
     const styles = getComputedStyle(element);
-    const get = (suffix)=>styles.getPropertyValue(`--md-sys-motion-${type}-${duration}${suffix}`);
+    const get = (suffix) => styles.getPropertyValue(`--md-sys-motion-${type}-${duration}${suffix}`);
     return {
         easing: get('') || 'ease',
-        duration: parseCSSNum(get('-duration'))
+        duration: parseCSSNum(get('-duration')),
     };
 };

package/src/m3/tab/tab-panel.d.ts

@@ -0,0 +1,9 @@
+import { TabPanel } from '../../base/tab-panel.js';
+export declare class M3TabPanel extends TabPanel {
+    static styles: any[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-tab-panel': M3TabPanel;
+    }
+}

package/src/m3/tab/tab-panel.js

@@ -1,14 +1,11 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { TabPanel } from '../../base/tab-panel.js';
 import { tabPanelStyles } from './tab-panel-styles.css.js';
-export class M3TabPanel extends TabPanel {
-    static{
-        this.styles = [
-            tabPanelStyles
-        ];
-    }
-}
-M3TabPanel = _ts_decorate([
+let M3TabPanel = class M3TabPanel extends TabPanel {
+    static { this.styles = [tabPanelStyles]; }
+};
+M3TabPanel = __decorate([
     customElement('md-tab-panel')
 ], M3TabPanel);
+export { M3TabPanel };

package/src/m3/tab/tab.d.ts

@@ -0,0 +1,19 @@
+import { Tab } from '../../base/tab.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+/**
+ * @tag md-tab
+ *
+ * @slot icon - icon
+ * @slot - label
+ */
+export declare class M3Tab extends Tab {
+    $content: HTMLDivElement;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-tab': M3Tab;
+    }
+}

package/src/m3/tab/tab.js

@@ -1,4 +1,4 @@
-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 { Tab } from '../../base/tab.js';
@@ -6,20 +6,22 @@ import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
 import { targetStyles } from '../target-styles.css.js';
 import { tabStyles } from './tab-styles.css.js';
-export class M3Tab extends Tab {
-    static{
-        this.styles = [
-            targetStyles,
-            tabStyles
-        ];
-    }
+/**
+ * @tag md-tab
+ *
+ * @slot icon - icon
+ * @slot - label
+ */
+let M3Tab = class M3Tab extends Tab {
+    static { this.styles = [targetStyles, tabStyles]; }
     render() {
-        return html`<md-focus-ring inward></md-focus-ring><md-ripple inward></md-ripple><span part="target"></span><div part="content"><slot part="icon" name="icon" aria-hidden="true"></slot><slot part="label"></slot></div>`;
+        return html `<md-focus-ring inward></md-focus-ring><md-ripple inward></md-ripple><span part="target"></span><div part="content"><slot part="icon" name="icon" aria-hidden="true"></slot><slot part="label"></slot></div>`;
     }
-}
-_ts_decorate([
+};
+__decorate([
     query('[part="content"]')
 ], M3Tab.prototype, "$content", void 0);
-M3Tab = _ts_decorate([
+M3Tab = __decorate([
     customElement('md-tab')
 ], M3Tab);
+export { M3Tab };

package/src/m3/tab/tabs.d.ts

@@ -0,0 +1,25 @@
+import { Tabs } from '../../base/tabs.js';
+import type { M3Tab } from './tab.js';
+/**
+ * TODO: vertical tabs, tablist placement
+ *
+ * @tag md-tabs
+ *
+ * @csspart indicator
+ *
+ * @slot - tabs
+ */
+export declare class M3Tabs extends Tabs {
+    #private;
+    $indicator: HTMLElement;
+    secondary: boolean;
+    iconsAbove: boolean;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    selectTab(selectedTab: M3Tab): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-tabs': M3Tabs;
+    }
+}

package/src/m3/tab/tabs.js

@@ -1,18 +1,28 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { computePosition, autoUpdate } from '@floating-ui/dom';
 import { Tabs } from '../../base/tabs.js';
 import { tabsStyles } from './tabs-styles.css.js';
-export class M3Tabs extends Tabs {
-    #cleanup;
-    static{
-        this.styles = [
-            tabsStyles
-        ];
+/**
+ * TODO: vertical tabs, tablist placement
+ *
+ * @tag md-tabs
+ *
+ * @csspart indicator
+ *
+ * @slot - tabs
+ */
+let M3Tabs = class M3Tabs extends Tabs {
+    constructor() {
+        super(...arguments);
+        this.secondary = false;
+        this.iconsAbove = false;
     }
+    #cleanup;
+    static { this.styles = [tabsStyles]; }
     render() {
-        return html`${super.render()}<div part="indicator" role="presentation"></div>`;
+        return html `${super.render()}<div part="indicator" role="presentation"></div>`;
     }
     selectTab(selectedTab) {
         super.selectTab(selectedTab);
@@ -21,40 +31,34 @@ export class M3Tabs extends Tabs {
         // Another solution is using CSS anchor, which does not work across Shadow
         // DOM for now.
         this.#cleanup?.();
-        const updatePosition = ()=>{
+        const updatePosition = () => {
             computePosition(selectedTab, this.$indicator, {
                 placement: 'bottom',
-                strategy: 'absolute'
-            }).then(({ x })=>{
-                const left = this.secondary ? x : x + 2;
-                const width = this.secondary ? selectedTab.offsetWidth : selectedTab.$content.offsetWidth - 4;
+                strategy: 'absolute',
+            }).then(({ x }) => {
+                const left = (this.secondary ? x : (x + 2));
+                const width = this.secondary
+                    ? selectedTab.offsetWidth
+                    : (selectedTab.$content.offsetWidth - 4);
                 Object.assign(this.$indicator.style, {
                     left: `${left}px`,
-                    width: `${width}px`
+                    width: `${width}px`,
                 });
             });
         };
         this.#cleanup = autoUpdate(selectedTab, this.$indicator, updatePosition);
     }
-    constructor(...args){
-        super(...args), this.secondary = false, this.iconsAbove = false;
-    }
-}
-_ts_decorate([
+};
+__decorate([
     query('[part="indicator"]')
 ], M3Tabs.prototype, "$indicator", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3Tabs.prototype, "secondary", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3Tabs.prototype, "iconsAbove", void 0);
-M3Tabs = _ts_decorate([
+M3Tabs = __decorate([
     customElement('md-tabs')
 ], M3Tabs);
+export { M3Tabs };

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

@@ -0,0 +1,13 @@
+import { Input } from '../../base/input.js';
+import '../field/filled-field.js';
+export declare class M3FilledTextField extends Input {
+    label: string;
+    supportingText: string;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-text-field': M3FilledTextField;
+    }
+}

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

@@ -1,32 +1,27 @@
-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 { Input } from '../../base/input.js';
 import '../field/filled-field.js';
 import { textFieldStyles } from './text-field-styles.css.js';
-export class M3FilledTextField extends Input {
-    static{
-        this.styles = [
-            textFieldStyles
-        ];
+let M3FilledTextField = class M3FilledTextField extends Input {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.supportingText = '';
     }
+    static { this.styles = [textFieldStyles]; }
     render() {
-        return html`<md-filled-field label="${this.label}" supportingtext="${this.supportingText}" ?populated="${!!this.value}" ?disabled="${this.disabled}" ?focused="${this.focused}" ?error="${this.checkValidity() === false}">${super.render()}</md-filled-field>`;
+        return html `<md-filled-field label="${this.label}" supportingtext="${this.supportingText}" ?populated="${!!this.value}" ?disabled="${this.disabled}" ?focused="${this.focused}" ?error="${this.checkValidity() === false}">${super.render()}</md-filled-field>`;
     }
-    constructor(...args){
-        super(...args), this.label = '', this.supportingText = '';
-    }
-}
-_ts_decorate([
-    property({
-        reflect: true
-    })
+};
+__decorate([
+    property({ reflect: true })
 ], M3FilledTextField.prototype, "label", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], M3FilledTextField.prototype, "supportingText", void 0);
-M3FilledTextField = _ts_decorate([
+M3FilledTextField = __decorate([
     customElement('md-filled-text-field')
 ], M3FilledTextField);
+export { M3FilledTextField };

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

@@ -0,0 +1,13 @@
+import { Input } from '../../base/input.js';
+import '../field/outlined-field.js';
+export declare class M3OutlinedTextField extends Input {
+    label: string;
+    supportingText: string;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-outlined-text-field': M3OutlinedTextField;
+    }
+}

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

@@ -1,32 +1,27 @@
-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 { Input } from '../../base/input.js';
 import '../field/outlined-field.js';
 import { textFieldStyles } from './text-field-styles.css.js';
-export class M3OutlinedTextField extends Input {
-    static{
-        this.styles = [
-            textFieldStyles
-        ];
+let M3OutlinedTextField = class M3OutlinedTextField extends Input {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.supportingText = '';
     }
+    static { this.styles = [textFieldStyles]; }
     render() {
-        return html`<md-outlined-field label="${this.label}" supportingtext="${this.supportingText}" ?populated="${!!this.value}" ?disabled="${this.disabled}" ?focused="${this.focused}" ?error="${this.checkValidity() === false}">${super.render()}<slot slot="start" name="start"></slot><slot slot="end" name="end"></slot></md-outlined-field>`;
+        return html `<md-outlined-field label="${this.label}" supportingtext="${this.supportingText}" ?populated="${!!this.value}" ?disabled="${this.disabled}" ?focused="${this.focused}" ?error="${this.checkValidity() === false}">${super.render()}<slot slot="start" name="start"></slot><slot slot="end" name="end"></slot></md-outlined-field>`;
     }
-    constructor(...args){
-        super(...args), this.label = '', this.supportingText = '';
-    }
-}
-_ts_decorate([
-    property({
-        reflect: true
-    })
+};
+__decorate([
+    property({ reflect: true })
 ], M3OutlinedTextField.prototype, "label", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], M3OutlinedTextField.prototype, "supportingText", void 0);
-M3OutlinedTextField = _ts_decorate([
+M3OutlinedTextField = __decorate([
     customElement('md-outlined-text-field')
 ], M3OutlinedTextField);
+export { M3OutlinedTextField };

package/src/m3/toolbar/toolbar.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+declare const M3Toolbar_base: Constructor<import("../../base/mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+/**
+ * @tag md-toolbar
+ *
+ * @csspart container
+ * @csspart fab-slot
+ *
+ * @slot - toolbar contents
+ * @slot fab - FAB element
+ */
+export declare class M3Toolbar extends M3Toolbar_base {
+    type: 'docked' | 'floating';
+    color: 'standard' | 'vibrant';
+    orientation: 'horizontal' | 'vertical';
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+    protected updated(changed: Map<string, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-toolbar': M3Toolbar;
+    }
+}
+export {};