@vollowx/seele 0.13.4 → 0.13.6

package/src/m3/button-group/connected-button-group.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import type { ToggleButton } from '../../base/toggle-button.js';
+/**
+ * @tag md-connected-button-group
+ *
+ * @slot - toggle buttons
+ */
+export declare class M3ConnectedButtonGroup extends LitElement {
+    #private;
+    multiple: boolean;
+    $buttons: Array<ToggleButton>;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-connected-button-group': M3ConnectedButtonGroup;
+    }
+}

package/src/m3/button-group/connected-button-group.js

@@ -1,37 +1,39 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { customElement } from '../../core/decorators.js';
 import { connectedButtonGroupStyles } from './connected-button-group-styles.css.js';
-export class M3StandardButtonGroup extends LitElement {
-    static{
-        this.styles = [
-            connectedButtonGroupStyles
-        ];
+/**
+ * @tag md-connected-button-group
+ *
+ * @slot - toggle buttons
+ */
+let M3ConnectedButtonGroup = class M3ConnectedButtonGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.multiple = false;
+        this.#handleChange = (e) => {
+            this.$buttons.forEach((btn, _) => {
+                if (btn !== e.target && !this.multiple)
+                    // NOTE: there will not be an event dispatched and user should listen on
+                    //       the button group directly.
+                    btn.checked = false;
+            });
+        };
     }
+    static { this.styles = [connectedButtonGroupStyles]; }
     render() {
-        return html`<slot @change="${this.#handleChange}"></slot>`;
+        return html `<slot @change="${this.#handleChange}"></slot>`;
     }
     #handleChange;
-    constructor(...args){
-        super(...args), this.multiple = false, this.#handleChange = (e)=>{
-            console.log('Boom!', e);
-            this.$buttons.forEach((btn, _)=>{
-                if (btn !== e.target && !this.multiple) // NOTE: there will not be an event dispatched and user should listen on
-                //       the button group directly.
-                btn.checked = false;
-            });
-        };
-    }
-}
-_ts_decorate([
-    property({
-        type: Boolean
-    })
-], M3StandardButtonGroup.prototype, "multiple", void 0);
-_ts_decorate([
+};
+__decorate([
+    property({ type: Boolean })
+], M3ConnectedButtonGroup.prototype, "multiple", void 0);
+__decorate([
     queryAssignedElements()
-], M3StandardButtonGroup.prototype, "$buttons", void 0);
-M3StandardButtonGroup = _ts_decorate([
-    customElement('md-connected-button-group', false)
-], M3StandardButtonGroup);
+], M3ConnectedButtonGroup.prototype, "$buttons", void 0);
+M3ConnectedButtonGroup = __decorate([
+    customElement('md-connected-button-group')
+], M3ConnectedButtonGroup);
+export { M3ConnectedButtonGroup };

package/src/m3/button-group/standard-button-group.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+/**
+ * @tag md-button-group
+ *
+ * @slot - buttons
+ */
+export declare class M3StandardButtonGroup extends LitElement {
+    #private;
+    size: 'xs' | 's' | '';
+    $buttons: Array<HTMLElement>;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Passing no element resets all shape changes
+     */
+    updateLayout(target?: HTMLElement | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-button-group': M3StandardButtonGroup;
+    }
+}

package/src/m3/button-group/standard-button-group.js

@@ -1,4 +1,4 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { customElement } from '../../core/decorators.js';
@@ -6,46 +6,76 @@ import { getSpring } from '../system/motion.js';
 import { standardButtonGroupStyles } from './standard-button-group-styles.css.js';
 const EXPAND_FACTOR = 1.15;
 const shapeAnimation = Symbol('shapeAnimation');
-export class M3StandardButtonGroup extends LitElement {
-    static{
-        this.styles = [
-            standardButtonGroupStyles
-        ];
+/**
+ * @tag md-button-group
+ *
+ * @slot - buttons
+ */
+let M3StandardButtonGroup = class M3StandardButtonGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = '';
+        this.#activeIndex = -1;
+        this.#baseWidths = [];
+        this.#handleSlotChange = () => {
+            this.#resizeObserver.disconnect();
+            this.$buttons.forEach((btn, i) => {
+                this.#baseWidths[i] = btn.getBoundingClientRect().width;
+                this.#resizeObserver.observe(btn);
+            });
+        };
+        this.#handlePointerDown = (e) => {
+            if (this === e.target)
+                return;
+            this.updateLayout(e.target);
+        };
+        this.#handleKeyDown = (e) => {
+            if (e.key !== ' ' && e.key !== 'Enter')
+                return;
+            this.updateLayout(e.target);
+        };
+        this.#reset = (e) => {
+            if (e && e.type === 'keyup' && e.key !== ' ' && e.key !== 'Enter')
+                return;
+            if (this.#activeIndex !== -1) {
+                this.#activeIndex = -1;
+                this.updateLayout();
+            }
+        };
     }
+    static { this.styles = [standardButtonGroupStyles]; }
     render() {
-        return html`<slot @slotchange="${this.#handleSlotChange}"></slot>`;
+        return html `<slot @slotchange="${this.#handleSlotChange}"></slot>`;
     }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('pointerdown', this.#handlePointerDown);
-        this.addEventListener('keydown', this.#handleKeyDown, {
-            capture: true
-        });
+        this.addEventListener('keydown', this.#handleKeyDown, { capture: true });
         window.addEventListener('pointerup', this.#reset);
         window.addEventListener('pointercancel', this.#reset);
-        window.addEventListener('keyup', this.#reset, {
-            capture: true
-        });
-        this.#resizeObserver = new ResizeObserver((entries)=>{
-            if (this.#activeIndex !== -1) return; // Skip if animating
-            entries.forEach((entry)=>{
+        window.addEventListener('keyup', this.#reset, { capture: true });
+        this.#resizeObserver = new ResizeObserver((entries) => {
+            if (this.#activeIndex !== -1)
+                return; // Skip if animating
+            entries.forEach((entry) => {
                 const target = entry.target;
                 const index = this.$buttons.indexOf(target);
                 if (index !== -1) {
                     const currentWidth = target.style.width;
                     target.style.width = '';
                     this.#baseWidths[index] = entry.target.getBoundingClientRect().width;
-                    if (currentWidth) target.style.width = currentWidth;
+                    if (currentWidth)
+                        target.style.width = currentWidth;
                 }
             });
         });
+        queueMicrotask(this.#handleSlotChange);
+        // Which is not called on a SSR'd element
     }
     disconnectedCallback() {
         window.removeEventListener('pointerup', this.#reset);
         window.removeEventListener('pointercancel', this.#reset);
-        window.removeEventListener('keyup', this.#reset, {
-            capture: true
-        });
+        window.removeEventListener('keyup', this.#reset, { capture: true });
         this.#resizeObserver.disconnect();
         super.disconnectedCallback();
     }
@@ -57,38 +87,36 @@ export class M3StandardButtonGroup extends LitElement {
     #handleKeyDown;
     #reset;
     /**
-   * Passing no element resets all shape changes
-   */ updateLayout(target = null) {
+     * Passing no element resets all shape changes
+     */
+    updateLayout(target = null) {
         const pressedIndex = target ? this.$buttons.indexOf(target) : -1;
         this.#activeIndex = pressedIndex;
         const pressedBaseWidth = pressedIndex !== -1 ? this.#baseWidths[pressedIndex] : 0;
         const expansionDelta = pressedBaseWidth * (EXPAND_FACTOR - 1);
         const isPressedAtEdge = pressedIndex === 0 || pressedIndex === this.$buttons.length - 1;
-        this.$buttons.forEach((btn, i)=>{
+        this.$buttons.forEach((btn, i) => {
             const currentWidth = btn.getBoundingClientRect().width;
             let targetWidth = this.#baseWidths[i];
             if (pressedIndex !== -1) {
                 if (i === pressedIndex) {
                     targetWidth = pressedBaseWidth * EXPAND_FACTOR;
-                } else if (Math.abs(i - pressedIndex) === 1) {
-                    if (isPressedAtEdge) targetWidth = this.#baseWidths[i] - expansionDelta;
-                    else targetWidth = this.#baseWidths[i] - expansionDelta / 2;
+                }
+                else if (Math.abs(i - pressedIndex) === 1) {
+                    if (isPressedAtEdge)
+                        targetWidth = this.#baseWidths[i] - expansionDelta;
+                    else
+                        targetWidth = this.#baseWidths[i] - expansionDelta / 2;
                 }
             }
             const spring = getSpring(this, 'spatial', 'fast');
-            if (btn[shapeAnimation]) btn[shapeAnimation].cancel();
-            btn[shapeAnimation] = btn.animate([
-                {
-                    width: `${currentWidth}px`
-                },
-                {
-                    width: `${targetWidth}px`
-                }
-            ], {
+            if (btn[shapeAnimation])
+                btn[shapeAnimation].cancel();
+            btn[shapeAnimation] = btn.animate([{ width: `${currentWidth}px` }, { width: `${targetWidth}px` }], {
                 ...spring,
-                fill: 'forwards'
+                fill: 'forwards',
             });
-            btn[shapeAnimation].onfinish = ()=>{
+            btn[shapeAnimation].onfinish = () => {
                 if (pressedIndex === -1) {
                     btn.style.width = '';
                     btn[shapeAnimation].cancel();
@@ -96,36 +124,14 @@ export class M3StandardButtonGroup extends LitElement {
             };
         });
     }
-    constructor(...args){
-        super(...args), this.size = '', this.#activeIndex = -1, this.#baseWidths = [], this.#handleSlotChange = ()=>{
-            this.#resizeObserver.disconnect();
-            this.$buttons.forEach((btn, i)=>{
-                this.#baseWidths[i] = btn.getBoundingClientRect().width;
-                this.#resizeObserver.observe(btn);
-            });
-        }, this.#handlePointerDown = (e)=>{
-            if (this === e.target) return;
-            this.updateLayout(e.target);
-        }, this.#handleKeyDown = (e)=>{
-            if (e.key !== ' ' && e.key !== 'Enter') return;
-            this.updateLayout(e.target);
-        }, this.#reset = (e)=>{
-            if (e && e.type === 'keyup' && e.key !== ' ' && e.key !== 'Enter') return;
-            if (this.#activeIndex !== -1) {
-                this.#activeIndex = -1;
-                this.updateLayout();
-            }
-        };
-    }
-}
-_ts_decorate([
-    property({
-        reflect: true
-    })
+};
+__decorate([
+    property({ reflect: true })
 ], M3StandardButtonGroup.prototype, "size", void 0);
-_ts_decorate([
+__decorate([
     queryAssignedElements()
 ], M3StandardButtonGroup.prototype, "$buttons", void 0);
-M3StandardButtonGroup = _ts_decorate([
-    customElement('md-button-group', false)
+M3StandardButtonGroup = __decorate([
+    customElement('md-button-group')
 ], M3StandardButtonGroup);
+export { M3StandardButtonGroup };

package/src/m3/checkbox/checkbox.d.ts

@@ -0,0 +1,25 @@
+import { Checkbox } from '../../base/checkbox.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+import { M3Ripple } from '../ripple/ripple.js';
+/**
+ * @tag md-checkbox
+ *
+ * @csspart icon
+ * @csspart mark
+ * @csspart mark-short
+ * @csspart mark-long
+ */
+export declare class M3Checkbox extends Checkbox {
+    error: boolean;
+    $ripple: M3Ripple;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    renderIcon(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-checkbox': M3Checkbox;
+    }
+}

package/src/m3/checkbox/checkbox.js

@@ -1,44 +1,46 @@
-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 { Checkbox } from '../../base/checkbox.js';
 import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
 import { checkboxStyles } from './checkbox-styles.css.js';
 import { targetStyles } from '../target-styles.css.js';
-export class M3Checkbox extends Checkbox {
-    static{
-        this.styles = [
-            ...super.styles,
-            targetStyles,
-            checkboxStyles
-        ];
+/**
+ * @tag md-checkbox
+ *
+ * @csspart icon
+ * @csspart mark
+ * @csspart mark-short
+ * @csspart mark-long
+ */
+let M3Checkbox = class M3Checkbox extends Checkbox {
+    constructor() {
+        super(...arguments);
+        this.error = false;
     }
+    static { this.styles = [...super.styles, targetStyles, checkboxStyles]; }
     render() {
-        return html`<md-focus-ring></md-focus-ring><md-ripple enterbehavior="none"></md-ripple><span part="target"></span> ${this.renderIcon()}`;
+        return html `<md-focus-ring></md-focus-ring><md-ripple enterbehavior="none"></md-ripple><span part="target"></span> ${this.renderIcon()}`;
     }
     renderIcon() {
-        return html`<svg part="icon" viewBox="0 0 18 18" aria-hidden="true"><rect part="mark mark-short"></rect><rect part="mark mark-long"></rect></svg>`;
+        return html `<svg part="icon" viewBox="0 0 18 18" aria-hidden="true"><rect part="mark mark-short"></rect><rect part="mark mark-long"></rect></svg>`;
     }
     connectedCallback() {
         super.connectedCallback();
         // SSR'd <md-checkbox> components don't have their labels set up on time
-        this.updateComplete.then(()=>{
+        this.updateComplete.then(() => {
             this.$ripple.attach(this, true);
         });
     }
-    constructor(...args){
-        super(...args), this.error = false;
-    }
-}
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3Checkbox.prototype, "error", void 0);
-_ts_decorate([
+__decorate([
     query('md-ripple')
 ], M3Checkbox.prototype, "$ripple", void 0);
-M3Checkbox = _ts_decorate([
+M3Checkbox = __decorate([
     customElement('md-checkbox')
 ], M3Checkbox);
+export { M3Checkbox };

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

@@ -0,0 +1,45 @@
+import { Dialog } from '../../base/dialog.js';
+/**
+ * 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
+ */
+export declare class M3Dialog extends Dialog {
+    #private;
+    private hasIcon;
+    $container: HTMLDivElement;
+    $body: HTMLDivElement;
+    $actions: HTMLDivElement;
+    $actionsPlaceholder: HTMLDivElement;
+    $scrim: HTMLDivElement;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    show(): void;
+    close(): void;
+}