@vollowx/seele 0.13.7 → 0.13.9

package/src/base/mixins/attachable.js

@@ -1,18 +1,23 @@
 import { __decorate } from "tslib";
 import { property } from 'lit/decorators.js';
+export const autoAttachToParent = Symbol('autoAttachToParent');
+export const handleControlChange = Symbol('handleControlChange');
 export const Attachable = (superClass) => {
+    var _a;
     class AttachableElement extends superClass {
         constructor() {
             super(...arguments);
-            this.currentControl = null;
-        }
-        connectedCallback() {
-            super.connectedCallback();
-            this.setCurrentControl(this.$control);
-        }
-        disconnectedCallback() {
-            this.setCurrentControl(null);
-            super.disconnectedCallback();
+            /**
+             * The control element currently attached to
+             */
+            this.#$control = null;
+            /**
+             * Whether `parentNode` is a candidate of `$control`.
+             *
+             * When false, only `id` is considered without manually setting `$control`
+             * or `attach()`
+             */
+            this[_a] = true;
         }
         /**
          * If has `for` attribute, use it to find the control element.
@@ -23,9 +28,19 @@ export const Attachable = (superClass) => {
                 if (!this.htmlFor || !this.isConnected) {
                     return null;
                 }
-                return this.getRootNode().querySelector(`#${this.htmlFor}`);
+                const root = this.getRootNode();
+                if (!root || !('querySelector' in root)) {
+                    return null;
+                }
+                return root.querySelector(`#${CSS.escape(this.htmlFor)}`);
+            }
+            if (this.#$control) {
+                return this.#$control;
+            }
+            if (!this[autoAttachToParent]) {
+                return null;
             }
-            return this.currentControl || this.parentNode instanceof ShadowRoot
+            return this.parentNode instanceof ShadowRoot
                 ? this.parentNode.host
                 : this.parentElement;
         }
@@ -37,32 +52,57 @@ export const Attachable = (superClass) => {
                 this.detach();
             }
         }
+        connectedCallback() {
+            super.connectedCallback();
+            this.#setControl(this.$control);
+        }
+        disconnectedCallback() {
+            this.#setControl(null);
+            super.disconnectedCallback();
+        }
+        firstUpdated(changed) {
+            super.firstUpdated(changed);
+            // When the control element is placed after `this` and wasn't parsed yet
+            // at `connectedCallback`.
+            if (!this.#$control && this.htmlFor) {
+                this.#setControl(this.$control);
+            }
+        }
         updated(changed) {
             super.updated(changed);
             if (changed.has('htmlFor')) {
                 // Will be triggered when first render using `for` attribute, will be
-                // prevented in setCurrentControl since it's unnecessary.
-                this.setCurrentControl(this.$control);
+                // prevented in #setControl since it's unnecessary.
+                this.#setControl(this.$control);
             }
         }
-        setCurrentControl(control, force = false) {
-            if (control === this.currentControl && !force)
-                return;
-            this.handleControlChange(this.currentControl, control);
-            this.currentControl = control;
-        }
         attach(control, force = false) {
-            this.setCurrentControl(control, force);
+            this.#setControl(control, force);
             this.removeAttribute('for');
         }
         detach() {
-            this.setCurrentControl(null);
-            this.setAttribute('for', '');
+            this.#setControl(null);
+            this.removeAttribute('for');
+            this[autoAttachToParent] = false;
+            // That is to prevent attaching automatically on a `$control` access.
+            // (yet, I don't even know who would call `detach()`) :/
+        }
+        /**
+         * The control element currently attached to
+         */
+        #$control;
+        #setControl(control, force = false) {
+            if (control === this.#$control && !force)
+                return;
+            this[handleControlChange](this.#$control, control);
+            this.#$control = control;
         }
         /**
          * Handles the first attaching and actual control element changing
          */
-        handleControlChange(prev = null, next = null) { }
+        [(_a = autoAttachToParent, handleControlChange)](_prev = null, _next = null) {
+            console.warn('[seele] You should implement [onControlChange] on any class that mixes Attachable');
+        }
     }
     __decorate([
         property({ attribute: 'for', type: String })

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

@@ -0,0 +1,7 @@
+import { Button } from '../button.js';
+export declare class ToggleableInterface {
+    checked: boolean;
+    _ignoreClick: boolean;
+    _toggle(): void;
+}
+export declare const ButtonToggleMixin: <T extends Constructor<Button>>(superClass: T) => Constructor<ToggleableInterface> & T;

package/src/base/mixins/button-toggle-mixin.js

@@ -0,0 +1,101 @@
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+import { internals, updateInternals, replaceStates, } from './internals-attached.js';
+const PROPERTY_FROM_ARIA_PRESSED = {
+    true: 'checked',
+    false: 'unchecked',
+};
+export const ButtonToggleMixin = (superClass) => {
+    class ButtonToggle extends superClass {
+        constructor(...args) {
+            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.checked = this.hasAttribute('checked');
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.labels.forEach((label) => {
+                label.addEventListener('click', this.#handleLabelClick);
+            });
+        }
+        disconnectedCallback() {
+            this.labels.forEach((label) => {
+                label.removeEventListener('click', this.#handleLabelClick);
+            });
+            super.disconnectedCallback();
+        }
+        updated(changed) {
+            if (changed.has('checked'))
+                this[updateInternals]();
+        }
+        [updateInternals]() {
+            super[updateInternals]();
+            this[internals].ariaPressed = this.checked ? 'true' : 'false';
+            this[replaceStates](['unchecked', 'checked'], [PROPERTY_FROM_ARIA_PRESSED[this[internals].ariaPressed]]);
+            this[internals].setFormValue(this.checked ? 'on' : null);
+        }
+        #handleLabelClick() {
+            this._ignoreClick = false;
+        }
+        _handleClick(e) {
+            e.stopPropagation();
+            e.preventDefault();
+            if (this._ignoreClick) {
+                this._ignoreClick = false;
+                return;
+            }
+            this._toggle();
+        }
+        _toggle() {
+            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';
+        }
+    }
+    __decorate([
+        property({ type: Boolean })
+    ], ButtonToggle.prototype, "checked", void 0);
+    return ButtonToggle;
+};

package/src/base/mixins/internals-attached.d.ts

@@ -1,6 +1,10 @@
 import { LitElement } from 'lit';
 export declare const internals: unique symbol;
+export declare const updateInternals: unique symbol;
+export declare const replaceStates: unique symbol;
 export declare class InternalsAttachedInterface {
     [internals]: ElementInternals;
+    [updateInternals]?(): void;
+    [replaceStates](del: Array<string>, add: Array<string>): void;
 }
 export declare const InternalsAttached: <T extends Constructor<LitElement>>(superClass: T) => Constructor<InternalsAttachedInterface> & T;

package/src/base/mixins/internals-attached.js

@@ -1,5 +1,7 @@
 export const internals = Symbol('internals');
 const privateInternals = Symbol('privateInternals');
+export const updateInternals = Symbol('updateInternals');
+export const replaceStates = Symbol('replaceStates');
 export const InternalsAttached = (superClass) => {
     class InternalsAttachedElement extends superClass {
         get [internals]() {
@@ -8,6 +10,10 @@ export const InternalsAttached = (superClass) => {
             }
             return this[privateInternals];
         }
+        [replaceStates](del, add) {
+            del.forEach((state) => this[internals].states.delete(state));
+            add.forEach((state) => this[internals].states.add(state));
+        }
     }
     return InternalsAttachedElement;
 };

package/src/base/radio.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
+import { updateInternals } from './mixins/internals-attached.js';
 declare const Radio_base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 export declare class Radio extends Radio_base {
     #private;
@@ -8,6 +9,8 @@ export declare class Radio extends Radio_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValues<this>): void;
+    [updateInternals](): void;
     formResetCallback(): void;
+    formStateRestoreCallback(state: string | null): void;
 }
 export {};

package/src/base/radio.js

@@ -3,7 +3,7 @@ import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { FormAssociated } from './mixins/form-associated.js';
-import { InternalsAttached, internals } from './mixins/internals-attached.js';
+import { InternalsAttached, internals, replaceStates, updateInternals, } from './mixins/internals-attached.js';
 export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
     // Static hidden registry: Scope (Form or RootNode) -> Name -> Set<Radio>
     static #registry = new Map();
@@ -19,7 +19,7 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
     connectedCallback() {
         super.connectedCallback();
         this.#registerToGroup();
-        this.#updateAriaState();
+        this[updateInternals]();
         this.addEventListener('click', this.#handleClick);
         this.addEventListener('keydown', this.#handleKeyDown);
     }
@@ -41,16 +41,16 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
             }
             this[internals].setFormValue(this.checked ? this.value : null);
             this.#updateGroupTabIndices();
-            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
         }
         if (changedProperties.has('disabled') || changedProperties.has('checked'))
-            this.#updateAriaState();
+            this[updateInternals]();
     }
     #handleClick() {
         if (this.disabled || this.checked)
             return;
         this.checked = true;
         this.focus();
+        this.#dispatchEvents();
     }
     #handleKeyDown(event) {
         if (this.disabled)
@@ -58,8 +58,10 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
         switch (event.key) {
             case ' ':
                 event.preventDefault();
-                if (!this.checked)
+                if (!this.checked) {
                     this.checked = true;
+                    this.#dispatchEvents();
+                }
                 break;
             case 'ArrowDown':
             case 'ArrowRight':
@@ -117,11 +119,9 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
         this.#currentName = '';
     }
     #getGroupRadios() {
-        if (!this.name)
+        if (!this.#currentName || !this.#currentScope)
             return [this];
-        const scope = this.#getScope();
-        const group = _a.#registry.get(scope)?.get(this.name);
-        return group ? Array.from(group) : [this];
+        return (_a.#registry.get(this.#currentScope)?.get(this.#currentName) ?? [this]);
     }
     #uncheckSiblings() {
         const radios = this.#getGroupRadios();
@@ -130,10 +130,14 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
                 radio.checked = false;
     }
     #updateGroupTabIndices(groupSet) {
-        const radios = groupSet ? Array.from(groupSet) : this.#getGroupRadios();
-        if (radios.length === 0)
-            return;
-        const hasChecked = radios.some((r) => r.checked && !r.disabled);
+        const radios = groupSet ?? this.#getGroupRadios();
+        let hasChecked = false;
+        for (const r of radios) {
+            if (r.checked && !r.disabled) {
+                hasChecked = true;
+                break;
+            }
+        }
         let enabledFound = false;
         for (const radio of radios) {
             const active = !radio.disabled && (hasChecked ? radio.checked : !enabledFound);
@@ -143,7 +147,7 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
         }
     }
     #navigateGroup(direction) {
-        const radios = this.#getGroupRadios().filter((r) => !r.disabled);
+        const radios = Array.from(this.#getGroupRadios()).filter((r) => !r.disabled);
         if (radios.length <= 1)
             return;
         const currentIndex = radios.indexOf(this);
@@ -152,18 +156,26 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
         targetRadio.checked = true;
         targetRadio.focus();
     }
-    #updateAriaState() {
+    [updateInternals]() {
         this[internals].ariaChecked = String(this.checked);
         this[internals].ariaDisabled = String(this.disabled);
+        this[replaceStates](['checked'], [this.checked ? 'checked' : null]);
+    }
+    #dispatchEvents() {
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
     formResetCallback() {
         this.checked = this.hasAttribute('checked');
     }
+    formStateRestoreCallback(state) {
+        this.checked = state === this.value;
+    }
 }
 _a = Radio;
 __decorate([
     property({ type: String })
 ], Radio.prototype, "value", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ type: Boolean })
 ], Radio.prototype, "checked", void 0);

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

@@ -1,9 +1,9 @@
 import { LitElement } from 'lit';
 declare const TabPanel_base: Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 export declare class TabPanel extends TabPanel_base {
-    protected _role: string;
-    render(): import("lit-html").TemplateResult<1>;
     value: string;
-    connectedCallback(): void;
+    selected: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
 }
 export {};

package/src/base/tab-panel.js

@@ -2,24 +2,22 @@ import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
-import { genUniqueId } from '../core/unique-id.js';
 export class TabPanel extends InternalsAttached(LitElement) {
-    constructor() {
-        super(...arguments);
-        this._role = 'tabpanel';
-        this.value = '';
-    }
     render() {
         return html `<slot></slot>`;
     }
-    connectedCallback() {
-        super.connectedCallback();
+    constructor() {
+        super();
+        this.value = '';
+        this.selected = false;
+        this[internals].role = 'tabpanel';
         this.setAttribute('seele-base', 'tabpanel');
-        this[internals].role = this._role;
-        if (!this.id)
-            this.id = genUniqueId('tabpanel');
+        this.setAttribute('slot', 'panels');
     }
 }
 __decorate([
     property({ type: String, reflect: true })
 ], TabPanel.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TabPanel.prototype, "selected", void 0);

package/src/base/tab.d.ts

@@ -1,18 +1,12 @@
 import { LitElement } from 'lit';
 declare const Tab_base: Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
-/**
- * TODO: disabled
- */
 export declare class Tab extends Tab_base {
     #private;
-    protected _role: string;
+    disabled: boolean;
     selected: boolean;
-    focused: boolean;
     value: string;
     render(): import("lit-html").TemplateResult<1>;
-    connectedCallback(): void;
+    constructor();
     protected updated(changed: Map<string, any>): void;
-    focus(): void;
-    blur(): void;
 }
 export {};

package/src/base/tab.js

@@ -1,60 +1,41 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { InternalsAttached, internals } from './mixins/internals-attached.js';
-import { genUniqueId } from '../core/unique-id.js';
-/**
- * TODO: disabled
- */
+import { InternalsAttached, internals, replaceStates, } from './mixins/internals-attached.js';
 export class Tab extends InternalsAttached(LitElement) {
-    constructor() {
-        super(...arguments);
-        this._role = 'tab';
-        this.selected = false;
-        this.focused = false;
-        this.value = '';
-    }
     render() {
         return html `<slot></slot>`;
     }
-    connectedCallback() {
-        super.connectedCallback();
+    constructor() {
+        super();
+        this.disabled = false;
+        this.selected = false;
+        this.value = '';
         this.setAttribute('seele-base', 'tab');
-        this[internals].role = this._role;
-        if (!this.id)
-            this.id = genUniqueId('tab');
+        this[internals].role = 'tab';
         this.#updateInternals();
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('selected') || changed.has('focused')) {
+        if (changed.has('selected') ||
+            changed.has('focused') ||
+            changed.has('disabled')) {
             this.#updateInternals();
         }
     }
     #updateInternals() {
-        this[internals].ariaSelected = this.selected ? 'true' : 'false';
-        this.focused
-            ? this[internals].states.add('focused')
-            : this[internals].states.delete('focused');
-        this.selected
-            ? this[internals].states.add('selected')
-            : this[internals].states.delete('selected');
-    }
-    focus() {
-        this.focused = true;
-        super.focus();
-    }
-    blur() {
-        this.focused = false;
-        super.blur();
+        this.tabIndex = this.disabled ? -1 : this.selected ? 0 : -1;
+        this[internals].ariaSelected = String(this.selected);
+        this[internals].ariaDisabled = String(this.disabled);
+        this[replaceStates](['selected', 'disabled'], [this.selected ? 'selected' : null, this.disabled ? 'disabled' : null]);
     }
 }
 __decorate([
     property({ type: Boolean, reflect: true })
-], Tab.prototype, "selected", void 0);
+], Tab.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Tab.prototype, "focused", void 0);
+], Tab.prototype, "selected", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Tab.prototype, "value", void 0);

package/src/base/tabs.d.ts

@@ -1,19 +1,19 @@
 import { LitElement } from 'lit';
 import type { Tab } from './tab.js';
+import type { TabPanel } from './tab-panel.js';
 /**
- * @fires {CustomEvent} tab-select
+ * @fires {CustomEvent} select
  */
 export declare class Tabs extends LitElement {
     #private;
-    protected _role: string;
     switch: 'auto' | 'manual';
     selected: string;
-    $slotItems: Array<HTMLElement>;
-    get $tabs(): Tab[];
-    get $parent(): HTMLElement;
+    get $tabs(): Array<Tab>;
+    get $panels(): Array<TabPanel>;
     render(): import("lit-html").TemplateResult<1>;
+    constructor();
     connectedCallback(): void;
     protected updated(changed: Map<string, any>): void;
     focusTab(tab: Tab): void;
-    selectTab(selectedTab: Tab): void;
+    protected _selectTab(selectedTab: Tab, dispatchEvent?: boolean): void;
 }