@vollowx/seele 0.13.7 → 0.13.9

package/src/base/tabs.js

@@ -1,133 +1,138 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { LitElement, html, isServer } from 'lit';
+import { property } from 'lit/decorators.js';
 import { internals } from './mixins/internals-attached.js';
 /**
- * @fires {CustomEvent} tab-select
+ * @fires {CustomEvent} select
  */
 export class Tabs extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._role = 'tablist';
-        this.switch = 'manual';
-        this.selected = '';
-        this.#handleSlotChange = (_) => {
-            const parent = this.$parent;
-            this.$tabs.forEach((tab) => {
-                const panel = parent.querySelector(`[seele-base="tab"][value="${tab.value}"]`);
-                if (!panel)
-                    console.error('[seele] cannot find a matching panel for tab ', tab);
-                // TODO: ariaLabelledByElements
-                tab.setAttribute('aria-controls', panel.id);
-                panel.setAttribute('aria-labelledby', tab.id);
-            });
-        };
-        this.#handleKeyDown = (event) => {
-            const tabs = this.$tabs;
-            if (!tabs.length)
-                return;
-            const activeElement = this.getRootNode()
-                .activeElement;
-            const currentIndex = tabs.findIndex((t) => t === activeElement || t.focused);
-            let nextIndex = currentIndex !== -1 ? currentIndex : 0;
-            let handled = false;
-            switch (event.key) {
-                case 'ArrowLeft':
-                    nextIndex = currentIndex <= 0 ? tabs.length - 1 : currentIndex - 1;
-                    handled = true;
-                    break;
-                case 'ArrowRight':
-                    nextIndex = currentIndex >= tabs.length - 1 ? 0 : currentIndex + 1;
-                    handled = true;
-                    break;
-                case 'Home':
-                    nextIndex = 0;
-                    handled = true;
-                    break;
-                case 'End':
-                    nextIndex = tabs.length - 1;
-                    handled = true;
-                    break;
-                case 'Enter':
-                case ' ':
-                    if (currentIndex !== -1) {
-                        this.selectTab(tabs[currentIndex]);
-                    }
-                    handled = true;
-                    break;
-            }
-            if (handled) {
-                event.preventDefault();
-                event.stopPropagation();
-                if (event.key !== 'Enter' && event.key !== ' ') {
-                    this.focusTab(tabs[nextIndex]);
-                    if (this.switch === 'auto')
-                        this.selectTab(tabs[nextIndex]);
-                }
-            }
-        };
-        this.#handleClick = (event) => {
-            const target = event.target;
-            const tab = target.closest('md-tab');
-            if (tab && this.$tabs.includes(tab)) {
-                this.focusTab(tab);
-                this.selectTab(tab);
-            }
-        };
-    }
     get $tabs() {
-        return this.$slotItems.filter((item) => item[internals].role === 'tab');
+        return [...this.querySelectorAll('[seele-base=tab]')];
     }
-    get $parent() {
-        return this.parentNode instanceof ShadowRoot
-            ? this.parentNode.host
-            : this.parentElement;
+    get $panels() {
+        return [
+            ...this.querySelectorAll('[seele-base=tabpanel]'),
+        ];
     }
     render() {
-        return html `<div part="tablist" role="tablist"><slot @slotchange="${this.#handleSlotChange}"></slot></div>`;
+        return html `<div part="tablist" role="tablist"><slot @slotchange="${this.#handleSlotChange}"></slot></div><slot name="panels"></slot>`;
+    }
+    constructor() {
+        super();
+        this.switch = 'manual';
+        this.selected = '';
+        if (!isServer) {
+            this.addEventListener('keydown', this.#handleKeyDown.bind(this));
+            this.addEventListener('click', this.#handleClick.bind(this));
+        }
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('keydown', this.#handleKeyDown.bind(this));
-        this.addEventListener('click', this.#handleClick.bind(this));
+        queueMicrotask(this.#handleSlotChange.bind(this));
     }
     updated(changed) {
         if (changed.has('selected') && this.selected) {
             const targetTab = this.$tabs.find((t) => t.value === this.selected);
-            if (targetTab && !targetTab.selected) {
-                this.selectTab(targetTab);
+            if (targetTab)
+                this._selectTab(targetTab);
+        }
+    }
+    #handleSlotChange() {
+        this.$tabs.forEach((tab) => {
+            const panel = this.$panels.find((panel) => panel.value === tab.value);
+            if (!panel) {
+                console.error('[seele] Cannot find a matching panel for tab ', tab);
+            }
+            else {
+                tab[internals].ariaControlsElements = [panel];
+                panel[internals].ariaLabelledByElements = [tab];
             }
+        });
+    }
+    #handleKeyDown(event) {
+        const tabs = this.$tabs.filter((t) => !t.disabled);
+        if (!tabs.length)
+            return;
+        const activeElement = this.getRootNode()
+            .activeElement;
+        const currentIndex = tabs.findIndex((t) => t === activeElement);
+        let nextIndex = currentIndex !== -1 ? currentIndex : 0;
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowLeft':
+                nextIndex = currentIndex <= 0 ? tabs.length - 1 : currentIndex - 1;
+                handled = true;
+                break;
+            case 'ArrowRight':
+                nextIndex = currentIndex >= tabs.length - 1 ? 0 : currentIndex + 1;
+                handled = true;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                handled = true;
+                break;
+            case 'End':
+                nextIndex = tabs.length - 1;
+                handled = true;
+                break;
+            case 'Enter':
+            case ' ':
+                if (currentIndex !== -1) {
+                    this._selectTab(tabs[currentIndex]);
+                }
+                handled = true;
+                break;
+        }
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                this.focusTab(tabs[nextIndex]);
+                if (this.switch === 'auto')
+                    this._selectTab(tabs[nextIndex], true);
+            }
+        }
+    }
+    #handleClick(event) {
+        const target = event.target;
+        const tab = target.closest('[seele-base=tab]');
+        if (tab && !tab.disabled && this.$tabs.includes(tab)) {
+            this.focusTab(tab);
+            this._selectTab(tab, true);
         }
     }
-    #handleSlotChange;
-    #handleKeyDown;
-    #handleClick;
     focusTab(tab) {
         this.$tabs.forEach((t) => {
             t.blur();
             t.tabIndex = -1;
         });
         tab.tabIndex = 0;
-        tab.focus();
+        // TODO: prevent scrolling in other containers
+        tab.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
+            behavior: 'smooth',
+        });
+        tab.focus({ preventScroll: true });
     }
-    selectTab(selectedTab) {
+    _selectTab(selectedTab, dispatchEvent = false) {
         this.selected = selectedTab.value;
-        const parent = this.$parent;
-        const panels = Array.from(parent.querySelectorAll('[seele-base="tabpanel"]'));
+        const panels = this.$panels;
         this.$tabs.forEach((tab) => {
             tab.selected = tab === selectedTab;
-            tab.tabIndex = tab === selectedTab ? 0 : -1;
+            tab.tabIndex = tab === selectedTab && !tab.disabled ? 0 : -1;
         });
         panels.forEach((panel) => {
             if (panel.value && selectedTab.value) {
-                panel.hidden = panel.value !== selectedTab.value;
+                panel.selected = panel.value === selectedTab.value;
             }
         });
-        this.dispatchEvent(new CustomEvent('tab-select', {
-            detail: { tab: selectedTab, value: this.selected },
-            bubbles: true,
-            composed: true,
-        }));
+        if (dispatchEvent)
+            this.dispatchEvent(new CustomEvent('select', {
+                detail: { tab: selectedTab, value: this.selected },
+                bubbles: true,
+                composed: true,
+            }));
     }
 }
 __decorate([
@@ -136,6 +141,3 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], Tabs.prototype, "selected", void 0);
-__decorate([
-    queryAssignedElements({ flatten: true })
-], Tabs.prototype, "$slotItems", void 0);

package/src/base/toggle-button.d.ts

@@ -1,47 +1,8 @@
-import { LitElement } from 'lit';
-declare const Base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
-export declare class ToggleButton extends Base {
-    #private;
-    static styles: any[];
-    checked: boolean;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changed: Map<string, any>): void;
-    protected _updateInternals(): void;
-    /**
-     * --> Drag-and-drop to the other side
-     *
-     * `checked` is supposed to be changed once
-     *
-     * 1. `pointerdown`: _ignoreClick = false
-     * 2. `pointermove`: _ignoreClick = true
-     * 3. `pointerup`: `checked` changed
-     * 4. `click`: ignored, _ignoreClick = false
-     *
-     * --> Drag-and-drop to the other side, then click
-     *
-     * `checked` is supposed to be changed twice
-     *
-     * 1. `pointerdown`: _ignoreClick = false
-     * 2. `pointermove`: _ignoreClick = true
-     * 3. `pointerup`: `checked` changed(1)
-     * 4. `click`: ignored, _ignoreClick = false
-     * 5. `click`: `checked` changed(2)
-     *
-     * --> Drag-and-drop to the other side, then click the label
-     *
-     * `checked` is supposed to be changed twice
-     *
-     * 1. `pointerdown`: _ignoreClick = false
-     * 2. `pointermove`: _ignoreClick = true
-     * 3. `pointerup`: `checked` changed(1)
-     * 4. `click` on label: _ignoreClick = false
-     * 5. `click` on switch: `checked` changed(2)
-     */
-    protected _ignoreClick: boolean;
-    protected toggleChecked(): void;
-    formResetCallback(): void;
-    formStateRestoreCallback(state: string, _reason: string): void;
+import { Button } from './button.js';
+declare const ToggleButton_base: Constructor<import("./mixins/button-toggle-mixin.js").ToggleableInterface> & typeof Button;
+/**
+ * @deprecated compose the mixins yourself instead
+ */
+export declare class ToggleButton extends ToggleButton_base {
 }
 export {};

package/src/base/toggle-button.js

@@ -1,136 +1,7 @@
-import { __decorate } from "tslib";
-import { LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import { InternalsAttached, internals } from './mixins/internals-attached.js';
-import { FormAssociated } from './mixins/form-associated.js';
-import { hiddenStyles } from './hidden-styles.css.js';
-const PROPERTY_FROM_ARIA_PRESSED = {
-    true: 'checked',
-    false: 'unchecked',
-};
-const Base = FormAssociated(InternalsAttached(LitElement));
-export class ToggleButton extends Base {
-    static { this.styles = [hiddenStyles]; }
-    constructor() {
-        super();
-        this.checked = false;
-        /**
-         * --> Drag-and-drop to the other side
-         *
-         * `checked` is supposed to be changed once
-         *
-         * 1. `pointerdown`: _ignoreClick = false
-         * 2. `pointermove`: _ignoreClick = true
-         * 3. `pointerup`: `checked` changed
-         * 4. `click`: ignored, _ignoreClick = false
-         *
-         * --> Drag-and-drop to the other side, then click
-         *
-         * `checked` is supposed to be changed twice
-         *
-         * 1. `pointerdown`: _ignoreClick = false
-         * 2. `pointermove`: _ignoreClick = true
-         * 3. `pointerup`: `checked` changed(1)
-         * 4. `click`: ignored, _ignoreClick = false
-         * 5. `click`: `checked` changed(2)
-         *
-         * --> Drag-and-drop to the other side, then click the label
-         *
-         * `checked` is supposed to be changed twice
-         *
-         * 1. `pointerdown`: _ignoreClick = false
-         * 2. `pointermove`: _ignoreClick = true
-         * 3. `pointerup`: `checked` changed(1)
-         * 4. `click` on label: _ignoreClick = false
-         * 5. `click` on switch: `checked` changed(2)
-         */
-        this._ignoreClick = false;
-        this.#handleLabelClick = () => {
-            this._ignoreClick = false;
-        };
-        this.#handleClick = (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            if (this._ignoreClick) {
-                this._ignoreClick = false;
-                return;
-            }
-            this.toggleChecked();
-        };
-        this.#handleKeyDown = (e) => {
-            if (e.key !== ' ' && e.key !== 'Enter')
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            if (e.key === 'Enter')
-                this.toggleChecked();
-        };
-        this.#handleKeyUp = (e) => {
-            if (e.key === ' ') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.toggleChecked();
-            }
-        };
-        this[internals].role = 'button';
-        this.checked = this.hasAttribute('checked');
-        this._updateInternals();
-        this.setAttribute('notransition', '');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this.#handleClick);
-        this.addEventListener('keydown', this.#handleKeyDown);
-        this.addEventListener('keyup', this.#handleKeyUp);
-        this.labels.forEach((label) => {
-            label.addEventListener('click', this.#handleLabelClick);
-        });
-        requestAnimationFrame(() => requestAnimationFrame(() => this.removeAttribute('notransition')));
-    }
-    disconnectedCallback() {
-        this.removeEventListener('click', this.#handleClick);
-        this.removeEventListener('keydown', this.#handleKeyDown);
-        this.removeEventListener('keyup', this.#handleKeyUp);
-        this.labels.forEach((label) => {
-            label.removeEventListener('click', this.#handleLabelClick);
-        });
-        super.disconnectedCallback();
-    }
-    updated(changed) {
-        if (changed.has('checked') || changed.has('disabled')) {
-            this._updateInternals();
-        }
-    }
-    _updateInternals() {
-        this[internals].states.delete('unchecked');
-        this[internals].states.delete('checked');
-        this[internals].ariaPressed = this.checked ? 'true' : 'false';
-        this[internals].states.add(`${PROPERTY_FROM_ARIA_PRESSED[this[internals].ariaPressed]}`);
-        this.setAttribute('tabindex', this.disabled ? '-1' : '0');
-        this[internals].ariaDisabled = this.disabled ? 'true' : 'false';
-        this[internals].setFormValue(this.checked ? 'on' : null);
-    }
-    #handleLabelClick;
-    #handleClick;
-    #handleKeyDown;
-    #handleKeyUp;
-    toggleChecked() {
-        if (this.disabled)
-            return;
-        this.checked = !this.checked;
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true,
-            detail: this.checked,
-        }));
-    }
-    formResetCallback() {
-        this.checked = this.hasAttribute('checked');
-    }
-    formStateRestoreCallback(state, _reason) {
-        this.checked = state === 'on';
-    }
+import { Button } from './button.js';
+import { ButtonToggleMixin } from './mixins/button-toggle-mixin.js';
+/**
+ * @deprecated compose the mixins yourself instead
+ */
+export class ToggleButton extends ButtonToggleMixin(Button) {
 }
-__decorate([
-    property({ type: Boolean })
-], ToggleButton.prototype, "checked", void 0);

package/src/base/tooltip.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { handleControlChange } from './mixins/attachable.js';
 declare const Base: Constructor<import("./mixins/attachable.js").AttachableInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 /**
  * TODO: Check if $control controls a menu/popover and keep hidden when it is open.
@@ -31,7 +32,7 @@ export declare class Tooltip extends Base {
     render(): import("lit-html").TemplateResult<1>;
     private readonly popoverController;
     constructor();
-    handleControlChange(prev?: HTMLElement | null, next?: HTMLElement | null): void;
+    [handleControlChange](prev?: HTMLElement | null, next?: HTMLElement | null): void;
     set visible(value: boolean);
 }
 export {};

package/src/base/tooltip.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { focusVisible } from '../core/focus-visible.js';
-import { Attachable } from './mixins/attachable.js';
+import { Attachable, handleControlChange } from './mixins/attachable.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
 import { PopoverController } from './controllers/popover-controller.js';
 let lastHidingTime = 0;
@@ -83,7 +83,7 @@ export class Tooltip extends Base {
         };
         this[internals].role = 'tooltip';
     }
-    handleControlChange(prev = null, next = null) {
+    [handleControlChange](prev = null, next = null) {
         const eventHandlers = {
             focusin: this.#handleFocusIn,
             focusout: this.#handleFocusOut,

package/src/core/ensure-ready.d.ts

@@ -1 +1,2 @@
-export declare function ensureReady(element: HTMLElement): Promise<HTMLElement>;
+export declare function ensureReady(element: HTMLElement | null, useAnimationFrame?: boolean): Promise<void>;
+export declare function ensureSlottedReady(host: HTMLElement, getSlotted?: () => (HTMLElement | null)[], useAnimationFrame?: boolean): Promise<void>;

package/src/core/ensure-ready.js

@@ -1,15 +1,20 @@
-export async function ensureReady(element) {
+export async function ensureReady(element, useAnimationFrame = false) {
     if (!element)
         return null;
     if (element.matches(':not(:defined)'))
         await customElements.whenDefined(element.tagName.toLowerCase());
-    // Handles Lit update
-    if ('updateComplete' in element) {
+    if ('updateComplete' in element)
         await element.updateComplete;
-    }
-    else {
-        // Yield to the next frame to allow initial render to finish
+    if (useAnimationFrame)
         await new Promise((resolve) => requestAnimationFrame(resolve));
+}
+export async function ensureSlottedReady(host, getSlotted, useAnimationFrame = false) {
+    await ensureReady(host);
+    if (getSlotted) {
+        const elements = getSlotted();
+        await Promise.all(elements.map((el) => ensureReady(el, false)));
     }
-    return element;
+    // Might be useful when you need to use sth like `getBoundingClientRect()`
+    if (useAnimationFrame)
+        await new Promise((resolve) => requestAnimationFrame(resolve));
 }

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

@@ -1,6 +1,7 @@
-import { ToggleButton } from '../../base/toggle-button.js';
 import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
+import { M3Button } from './common-button.js';
+declare const M3ButtonToggle_base: Constructor<import("../../base/mixins/button-toggle-mixin.js").ToggleableInterface> & typeof M3Button;
 /**
  * @tag md-button-toggle
  *
@@ -12,15 +13,7 @@ import '../ripple/ripple.js';
  * @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;
+export declare class M3ButtonToggle extends M3ButtonToggle_base {
     static styles: any[];
     render(): import("lit-html").TemplateResult<1>;
 }
@@ -29,3 +22,4 @@ declare global {
         'md-button-toggle': M3ButtonToggle;
     }
 }
+export {};

package/src/m3/button/common-button-toggle.js

@@ -1,13 +1,11 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { ToggleButton } from '../../base/toggle-button.js';
 import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
-import { targetStyles } from '../target-styles.css.js';
-import { sharedButtonStyles } from './shared-button-styles.css.js';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { M3Button } from './common-button.js';
+import { ButtonToggleMixin } from '../../base/mixins/button-toggle-mixin.js';
 import { sharedButtonToggleStyles } from './shared-button-toggle-styles.css.js';
-import { commonButtonStyles } from './common-button-styles.css.js';
 /**
  * @tag md-button-toggle
  *
@@ -19,44 +17,12 @@ import { commonButtonStyles } from './common-button-styles.css.js';
  * @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,
-    ]; }
+let M3ButtonToggle = class M3ButtonToggle extends ButtonToggleMixin(M3Button) {
+    static { this.styles = [...super.styles, sharedButtonToggleStyles]; }
     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>`;
     }
 };
-__decorate([
-    property({ reflect: true })
-], M3ButtonToggle.prototype, "size", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], M3ButtonToggle.prototype, "square", void 0);
-__decorate([
-    property({ reflect: true })
-], M3ButtonToggle.prototype, "color", void 0);
-__decorate([
-    property({ reflect: true })
-], M3ButtonToggle.prototype, "variant", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })
-], M3ButtonToggle.prototype, "trailingIcon", void 0);
 M3ButtonToggle = __decorate([
     customElement('md-button-toggle')
 ], M3ButtonToggle);

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

@@ -1,6 +1,7 @@
-import { ToggleButton } from '../../base/toggle-button.js';
 import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
+import { M3IconButton } from './icon-button.js';
+declare const M3IconButtonToggle_base: Constructor<import("../../base/mixins/button-toggle-mixin.js").ToggleableInterface> & typeof M3IconButton;
 /**
  * @tag md-icon-button-toggle
  *
@@ -9,16 +10,13 @@ import '../ripple/ripple.js';
  * @slot - icon
  * @slot checked - icon when checked
  */
-export declare class M3IconButtonToggle extends ToggleButton {
+export declare class M3IconButtonToggle extends M3IconButtonToggle_base {
     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;
     }
 }
+export {};