@vollowx/seele 0.13.4 → 0.13.6

package/src/base/radio.d.ts

@@ -0,0 +1,13 @@
+import { LitElement, PropertyValues } from 'lit';
+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;
+    value: string;
+    checked: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    formResetCallback(): void;
+}
+export {};

package/src/base/radio.js

@@ -0,0 +1,169 @@
+var _a;
+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';
+export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
+    // Static hidden registry: Scope (Form or RootNode) -> Name -> Set<Radio>
+    static #registry = new Map();
+    #currentScope;
+    #currentName;
+    constructor() {
+        super();
+        this.#currentScope = null;
+        this.#currentName = '';
+        this.checked = false;
+        this[internals].role = 'radio';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.#registerToGroup();
+        this.#updateAriaState();
+        this.addEventListener('click', this.#handleClick);
+        this.addEventListener('keydown', this.#handleKeyDown);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.#handleClick);
+        this.removeEventListener('keydown', this.#handleKeyDown);
+        this.#unregisterFromGroup();
+        super.disconnectedCallback();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('name')) {
+            this.#unregisterFromGroup();
+            this.#registerToGroup();
+        }
+        if (changedProperties.has('checked')) {
+            if (this.checked) {
+                this.#uncheckSiblings();
+            }
+            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();
+    }
+    #handleClick() {
+        if (this.disabled || this.checked)
+            return;
+        this.checked = true;
+        this.focus();
+    }
+    #handleKeyDown(event) {
+        if (this.disabled)
+            return;
+        switch (event.key) {
+            case ' ':
+                event.preventDefault();
+                if (!this.checked)
+                    this.checked = true;
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                event.preventDefault();
+                this.#navigateGroup(1);
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.#navigateGroup(-1);
+                break;
+        }
+    }
+    #getScope() {
+        return this.form ?? this.getRootNode();
+    }
+    #registerToGroup() {
+        if (!this.name)
+            return;
+        const scope = this.#getScope();
+        this.#currentScope = scope;
+        this.#currentName = this.name;
+        let scopeMap = _a.#registry.get(scope);
+        if (!scopeMap) {
+            scopeMap = new Map();
+            _a.#registry.set(scope, scopeMap);
+        }
+        let group = scopeMap.get(this.name);
+        if (!group) {
+            group = new Set();
+            scopeMap.set(this.name, group);
+        }
+        group.add(this);
+        this.#updateGroupTabIndices(group);
+    }
+    #unregisterFromGroup() {
+        if (!this.#currentScope || !this.#currentName)
+            return;
+        const scopeMap = _a.#registry.get(this.#currentScope);
+        if (scopeMap) {
+            const group = scopeMap.get(this.#currentName);
+            if (group) {
+                group.delete(this);
+                if (group.size === 0) {
+                    scopeMap.delete(this.#currentName);
+                }
+                else {
+                    this.#updateGroupTabIndices(group);
+                }
+            }
+            if (scopeMap.size === 0)
+                _a.#registry.delete(this.#currentScope);
+        }
+        this.#currentScope = null;
+        this.#currentName = '';
+    }
+    #getGroupRadios() {
+        if (!this.name)
+            return [this];
+        const scope = this.#getScope();
+        const group = _a.#registry.get(scope)?.get(this.name);
+        return group ? Array.from(group) : [this];
+    }
+    #uncheckSiblings() {
+        const radios = this.#getGroupRadios();
+        for (const radio of radios)
+            if (radio !== this && radio.checked)
+                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);
+        let enabledFound = false;
+        for (const radio of radios) {
+            const active = !radio.disabled && (hasChecked ? radio.checked : !enabledFound);
+            if (active)
+                enabledFound = true;
+            radio.tabIndex = active ? 0 : -1;
+        }
+    }
+    #navigateGroup(direction) {
+        const radios = this.#getGroupRadios().filter((r) => !r.disabled);
+        if (radios.length <= 1)
+            return;
+        const currentIndex = radios.indexOf(this);
+        const nextIndex = (currentIndex + direction + radios.length) % radios.length;
+        const targetRadio = radios[nextIndex];
+        targetRadio.checked = true;
+        targetRadio.focus();
+    }
+    #updateAriaState() {
+        this[internals].ariaChecked = String(this.checked);
+        this[internals].ariaDisabled = String(this.disabled);
+    }
+    formResetCallback() {
+        this.checked = this.hasAttribute('checked');
+    }
+}
+_a = Radio;
+__decorate([
+    property({ type: String })
+], Radio.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Radio.prototype, "checked", void 0);

package/src/base/select.d.ts

@@ -0,0 +1,116 @@
+import { LitElement, PropertyValues } from 'lit';
+import type { Placement, Strategy } from '@floating-ui/dom';
+import type { Field } from './field.js';
+import type { Menu, MenuItemFocusEvent, MenuSelectEvent } from './menu.js';
+import type { Option } from './option.js';
+declare const VALUE: unique symbol;
+declare const Base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/focus-delegated.js").FocusDelegatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+/**
+ * @csspart field
+ * @csspart menu
+ * @csspart items
+ *
+ * @fires {Event} change - Fires when the value is changed.
+ * @fires {Event} input - Fires when the value is changed.
+ *
+ * TODO: Render multiple values
+ * FIXME: `aria-expanded` set twice by both Lit and Menu
+ */
+export declare class Select extends Base {
+    #private;
+    required: boolean;
+    error: boolean;
+    quick: boolean;
+    offset: number;
+    align: Placement;
+    alignStrategy: Strategy;
+    open: boolean;
+    /**
+     * Text to display in the field. Only set for SSR.
+     */
+    displayText: string;
+    get value(): string;
+    set value(value: string);
+    [VALUE]: string;
+    get $options(): Option[];
+    get selectedIndex(): number;
+    set selectedIndex(index: number);
+    get selectedOptions(): Option[];
+    $field: Field;
+    $menu: Menu;
+    private lastUserSetValue;
+    private lastUserSetSelectedIndex;
+    private lastSelectedOption;
+    private lastSelectedOptionRecords;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Example content:
+     *
+     * ```html
+     * <your-field
+     *   id="field"
+     *   part="field"
+     *   @click=${this.toggle}
+     *   @keydown=${this.handleFieldKeydown}
+     *   tabindex=${this.disabled ? '-1' : '0'}
+     *   role="combobox"
+     *   aria-haspopup="listbox"
+     *   aria-expanded=${this.open}
+     *   aria-controls="menu"
+     *   aria-disabled=${this.disabled}
+     *   aria-required=${this.required}
+     * >
+     *   ${this.renderFieldContent()}
+     * </your-field>
+     * ```
+     */
+    protected renderField(): import("lit-html").TemplateResult<1>;
+    /**
+     * Example content:
+     *
+     * ```html
+     * <your-menu
+     *   id="menu"
+     *   for="field"
+     *   type="listbox"
+     *   data-tabindex="-1"
+     *   ?quick="${this.quick}"
+     *   offset="${this.offset}"
+     *   align="${this.align}"
+     *   align-strategy="${this.alignStrategy}"
+     *   keep-open-blur
+     *   no-focus-control
+     *   ?open="${this.open}"
+     *   @item-focus="${this.handleMenuItemFocus}"
+     *   @select="${this.handleMenuSelect}"
+     * >
+     *   <slot part="items" @slotchange=${this.handleSlotChange}></slot>
+     * </your-menu>
+     * ```
+     */
+    protected renderMenu(): import("lit-html").TemplateResult<1>;
+    protected renderFieldContent(): import("lit-html").TemplateResult<1>;
+    constructor();
+    protected firstUpdated(changed: PropertyValues<Select>): Promise<void>;
+    protected update(changed: PropertyValues<Select>): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * TODO: Handle clear action
+     */
+    protected _handleFieldKeydown(event: KeyboardEvent): void;
+    protected _handleMenuSelect(event: MenuSelectEvent): void;
+    protected _handleMenuItemFocus(event: MenuItemFocusEvent): void;
+    protected _handleFocusOut(event: FocusEvent): void;
+    protected _handleSlotChange(): void;
+    private selectItem;
+    private initUserSelection;
+    private updateValueAndDisplayText;
+    private getSelectedOptions;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    select(value: string): void;
+    selectIndex(index: number): void;
+    reset(): void;
+    toggle(): void;
+}
+export {};

package/src/base/select.js

@@ -1,4 +1,5 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+var _a;
+import { __decorate } from "tslib";
 import { LitElement, isServer, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { InternalsAttached } from './mixins/internals-attached.js';
@@ -16,12 +17,15 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
  *
  * TODO: Render multiple values
  * FIXME: `aria-expanded` set twice by both Lit and Menu
- */ export class Select extends Base {
+ */
+export class Select extends Base {
+    static { _a = VALUE; }
     get value() {
         return this[VALUE];
     }
     set value(value) {
-        if (isServer) return;
+        if (isServer)
+            return;
         this.lastUserSetValue = value;
         this.select(value);
     }
@@ -40,76 +44,88 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
         this.selectIndex(index);
     }
     get selectedOptions() {
-        return (this.getSelectedOptions() ?? []).map(([option])=>option);
+        return (this.getSelectedOptions() ?? []).map(([option]) => option);
     }
     render() {
-        return html`${this.renderField()}${this.renderMenu()}`;
+        return html `${this.renderField()}${this.renderMenu()}`;
     }
     /**
-   * Example content:
-   *
-   * ```html
-   * <your-field
-   *   id="field"
-   *   part="field"
-   *   @click=${this.toggle}
-   *   @keydown=${this.handleFieldKeydown}
-   *   tabindex=${this.disabled ? '-1' : '0'}
-   *   role="combobox"
-   *   aria-haspopup="listbox"
-   *   aria-expanded=${this.open}
-   *   aria-controls="menu"
-   *   aria-disabled=${this.disabled}
-   *   aria-required=${this.required}
-   * >
-   *   ${this.renderFieldContent()}
-   * </your-field>
-   * ```
-   */ renderField() {
-        return html``;
+     * Example content:
+     *
+     * ```html
+     * <your-field
+     *   id="field"
+     *   part="field"
+     *   @click=${this.toggle}
+     *   @keydown=${this.handleFieldKeydown}
+     *   tabindex=${this.disabled ? '-1' : '0'}
+     *   role="combobox"
+     *   aria-haspopup="listbox"
+     *   aria-expanded=${this.open}
+     *   aria-controls="menu"
+     *   aria-disabled=${this.disabled}
+     *   aria-required=${this.required}
+     * >
+     *   ${this.renderFieldContent()}
+     * </your-field>
+     * ```
+     */
+    renderField() {
+        return html ``;
     }
     /**
-   * Example content:
-   *
-   * ```html
-   * <your-menu
-   *   id="menu"
-   *   for="field"
-   *   type="listbox"
-   *   data-tabindex="-1"
-   *   ?quick="${this.quick}"
-   *   offset="${this.offset}"
-   *   align="${this.align}"
-   *   align-strategy="${this.alignStrategy}"
-   *   keep-open-blur
-   *   no-focus-control
-   *   ?open="${this.open}"
-   *   @item-focus="${this.handleMenuItemFocus}"
-   *   @select="${this.handleMenuSelect}"
-   * >
-   *   <slot part="items" @slotchange=${this.handleSlotChange}></slot>
-   * </your-menu>
-   * ```
-   */ renderMenu() {
-        return html``;
+     * Example content:
+     *
+     * ```html
+     * <your-menu
+     *   id="menu"
+     *   for="field"
+     *   type="listbox"
+     *   data-tabindex="-1"
+     *   ?quick="${this.quick}"
+     *   offset="${this.offset}"
+     *   align="${this.align}"
+     *   align-strategy="${this.alignStrategy}"
+     *   keep-open-blur
+     *   no-focus-control
+     *   ?open="${this.open}"
+     *   @item-focus="${this.handleMenuItemFocus}"
+     *   @select="${this.handleMenuSelect}"
+     * >
+     *   <slot part="items" @slotchange=${this.handleSlotChange}></slot>
+     * </your-menu>
+     * ```
+     */
+    renderMenu() {
+        return html ``;
     }
     renderFieldContent() {
-        return html`<span part="value">${this.displayText || html` `}</span>`;
+        return html `<span part="value">${this.displayText || html ` `}</span>`;
     }
-    constructor(){
-        super(), // Form-related
-        this.required = false, // Passed to field
-        this.error = false, // Passed to menu
-        this.quick = false, this.offset = 0, this.align = 'bottom-start', this.alignStrategy = 'absolute', this.open = false, /**
-   * Text to display in the field. Only set for SSR.
-   */ this.displayText = '', this[VALUE] = '', this.lastUserSetValue = null, this.lastUserSetSelectedIndex = null, this.lastSelectedOption = null, this.lastSelectedOptionRecords = [], this.#dispatchChangeEvent = ()=>{
-            this.dispatchEvent(new Event('input', {
-                bubbles: true,
-                composed: true
-            }));
-            this.dispatchEvent(new Event('change', {
-                bubbles: true
-            }));
+    constructor() {
+        super();
+        // Form-related
+        this.required = false;
+        // Passed to field
+        this.error = false;
+        // Passed to menu
+        this.quick = false;
+        this.offset = 0;
+        this.align = 'bottom-start';
+        this.alignStrategy = 'absolute';
+        this.open = false;
+        /**
+         * Text to display in the field. Only set for SSR.
+         */
+        this.displayText = '';
+        this[_a] = '';
+        this.lastUserSetValue = null;
+        this.lastUserSetSelectedIndex = null;
+        this.lastSelectedOption = null;
+        this.lastSelectedOptionRecords = [];
+        this.#dispatchChangeEvent = () => {
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            this.dispatchEvent(new Event('change', { bubbles: true }));
         };
         if (!isServer) {
             this.addEventListener('focusout', this._handleFocusOut);
@@ -122,8 +138,10 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
         }
         // Case for when the DOM is streaming, there are no children, and a child
         // has [selected] set on it, we need to wait for DOM to render something.
-        if (!this.lastSelectedOptionRecords.length && !isServer && !this.$options.length) {
-            setTimeout(()=>{
+        if (!this.lastSelectedOptionRecords.length &&
+            !isServer &&
+            !this.$options.length) {
+            setTimeout(() => {
                 this.updateValueAndDisplayText();
             }, 0);
         }
@@ -140,18 +158,21 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
         if (changed.has('open')) {
             if (this.open) {
                 this.#focusSelectedItemOrFirst();
-            } else {
+            }
+            else {
                 this.$field.setAttribute('aria-activedescendant', '');
             }
         }
     }
     /**
-   * TODO: Handle clear action
-   */ _handleFieldKeydown(event) {
-        if (this.disabled) return;
+     * TODO: Handle clear action
+     */
+    _handleFieldKeydown(event) {
+        if (this.disabled)
+            return;
         const eventClone = new KeyboardEvent(event.type, event);
-        eventClone.preventDefault = ()=>event.preventDefault();
-        eventClone.stopPropagation = ()=>event.stopPropagation();
+        eventClone.preventDefault = () => event.preventDefault();
+        eventClone.stopPropagation = () => event.stopPropagation();
         this.$menu.$menu.dispatchEvent(eventClone);
     }
     _handleMenuSelect(event) {
@@ -177,7 +198,7 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
     }
     selectItem(item) {
         const selectedOptions = this.getSelectedOptions() ?? [];
-        selectedOptions.forEach(([option])=>{
+        selectedOptions.forEach(([option]) => {
             if (item !== option) {
                 option.selected = false;
             }
@@ -188,9 +209,12 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
     initUserSelection() {
         if (this.lastUserSetValue && !this.lastSelectedOptionRecords.length) {
             this.select(this.lastUserSetValue);
-        } else if (this.lastUserSetSelectedIndex !== null && !this.lastSelectedOptionRecords.length) {
+        }
+        else if (this.lastUserSetSelectedIndex !== null &&
+            !this.lastSelectedOptionRecords.length) {
             this.selectIndex(this.lastUserSetSelectedIndex);
-        } else {
+        }
+        else {
             this.updateValueAndDisplayText();
         }
     }
@@ -203,7 +227,8 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
             this.lastSelectedOption = firstSelectedOption;
             this[VALUE] = firstSelectedOption.value;
             this.displayText = firstSelectedOption.displayText;
-        } else {
+        }
+        else {
             changed = this.lastSelectedOption !== null;
             this.lastSelectedOption = null;
             this[VALUE] = '';
@@ -218,12 +243,9 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
     getSelectedOptions() {
         const items = this.$options;
         const records = [];
-        items.forEach((item, index)=>{
+        items.forEach((item, index) => {
             if (item.selected) {
-                records.push([
-                    item,
-                    index
-                ]);
+                records.push([item, index]);
             }
         });
         this.lastSelectedOptionRecords = records;
@@ -235,7 +257,8 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
         if (selectedOptions && selectedOptions.length > 0) {
             const [item] = selectedOptions[0];
             this.$menu.focusItem(item);
-        } else {
+        }
+        else {
             this.$menu.focusFirstItem();
         }
     }
@@ -246,7 +269,7 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
         this.value = state;
     }
     select(value) {
-        const item = this.$options.find((option)=>option.value === value);
+        const item = this.$options.find((option) => option.value === value);
         if (item) {
             this.selectItem(item);
         }
@@ -258,71 +281,50 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
         }
     }
     reset() {
-        for (const option of this.$options){
+        for (const option of this.$options) {
             option.selected = option.hasAttribute('selected');
         }
         this.updateValueAndDisplayText();
     }
     toggle() {
-        if (this.disabled) return;
+        if (this.disabled)
+            return;
         this.open = !this.open;
     }
 }
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], Select.prototype, "required", void 0);
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Select.prototype, "error", void 0);
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Select.prototype, "quick", void 0);
-_ts_decorate([
-    property({
-        type: Number
-    })
+__decorate([
+    property({ type: Number })
 ], Select.prototype, "offset", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], Select.prototype, "align", void 0);
-_ts_decorate([
-    property({
-        type: String,
-        reflect: true,
-        attribute: 'align-strategy'
-    })
+__decorate([
+    property({ type: String, reflect: true, attribute: 'align-strategy' })
 ], Select.prototype, "alignStrategy", void 0);
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Select.prototype, "open", void 0);
-_ts_decorate([
-    property({
-        attribute: 'display-text'
-    })
+__decorate([
+    property({ attribute: 'display-text' })
 ], Select.prototype, "displayText", void 0);
-_ts_decorate([
+__decorate([
     property()
 ], Select.prototype, "value", null);
-_ts_decorate([
-    property({
-        type: Number,
-        attribute: 'selected-index'
-    })
+__decorate([
+    property({ type: Number, attribute: 'selected-index' })
 ], Select.prototype, "selectedIndex", null);
-_ts_decorate([
+__decorate([
     query('[part="field"]')
 ], Select.prototype, "$field", void 0);
-_ts_decorate([
+__decorate([
     query('[part="menu"]')
 ], Select.prototype, "$menu", void 0);