@vollowx/seele 0.13.5 → 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

@@ -1,4 +1,5 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+var _a;
+import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { FormAssociated } from './mixins/form-associated.js';
@@ -8,8 +9,11 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
     static #registry = new Map();
     #currentScope;
     #currentName;
-    constructor(){
-        super(), this.#currentScope = null, this.#currentName = '', this.checked = false;
+    constructor() {
+        super();
+        this.#currentScope = null;
+        this.#currentName = '';
+        this.checked = false;
         this[internals].role = 'radio';
     }
     connectedCallback() {
@@ -37,24 +41,25 @@ 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
-            }));
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
         }
-        if (changedProperties.has('disabled') || changedProperties.has('checked')) this.#updateAriaState();
+        if (changedProperties.has('disabled') || changedProperties.has('checked'))
+            this.#updateAriaState();
     }
     #handleClick() {
-        if (this.disabled || this.checked) return;
+        if (this.disabled || this.checked)
+            return;
         this.checked = true;
         this.focus();
     }
     #handleKeyDown(event) {
-        if (this.disabled) return;
-        switch(event.key){
+        if (this.disabled)
+            return;
+        switch (event.key) {
             case ' ':
                 event.preventDefault();
-                if (!this.checked) this.checked = true;
+                if (!this.checked)
+                    this.checked = true;
                 break;
             case 'ArrowDown':
             case 'ArrowRight':
@@ -72,14 +77,15 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
         return this.form ?? this.getRootNode();
     }
     #registerToGroup() {
-        if (!this.name) return;
+        if (!this.name)
+            return;
         const scope = this.#getScope();
         this.#currentScope = scope;
         this.#currentName = this.name;
-        let scopeMap = Radio.#registry.get(scope);
+        let scopeMap = _a.#registry.get(scope);
         if (!scopeMap) {
             scopeMap = new Map();
-            Radio.#registry.set(scope, scopeMap);
+            _a.#registry.set(scope, scopeMap);
         }
         let group = scopeMap.get(this.name);
         if (!group) {
@@ -90,51 +96,56 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
         this.#updateGroupTabIndices(group);
     }
     #unregisterFromGroup() {
-        if (!this.#currentScope || !this.#currentName) return;
-        const scopeMap = Radio.#registry.get(this.#currentScope);
+        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 {
+                }
+                else {
                     this.#updateGroupTabIndices(group);
                 }
             }
-            if (scopeMap.size === 0) Radio.#registry.delete(this.#currentScope);
+            if (scopeMap.size === 0)
+                _a.#registry.delete(this.#currentScope);
         }
         this.#currentScope = null;
         this.#currentName = '';
     }
     #getGroupRadios() {
-        if (!this.name) return [
-            this
-        ];
+        if (!this.name)
+            return [this];
         const scope = this.#getScope();
-        const group = Radio.#registry.get(scope)?.get(this.name);
-        return group ? Array.from(group) : [
-            this
-        ];
+        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;
+        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);
+        if (radios.length === 0)
+            return;
+        const hasChecked = radios.some((r) => r.checked && !r.disabled);
         let enabledFound = false;
-        for (const radio of radios){
+        for (const radio of radios) {
             const active = !radio.disabled && (hasChecked ? radio.checked : !enabledFound);
-            if (active) enabledFound = true;
+            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 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];
@@ -149,14 +160,10 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
         this.checked = this.hasAttribute('checked');
     }
 }
-_ts_decorate([
-    property({
-        type: String
-    })
+_a = Radio;
+__decorate([
+    property({ type: String })
 ], Radio.prototype, "value", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__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);