@vollowx/seele 0.7.0

package/src/base/mixins/form-associated.js

@@ -0,0 +1,69 @@
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+import { internals } from './internals-attached.js';
+export const FormAssociated = (superClass) => {
+    class FormAssociatedElement extends superClass {
+        static { this.formAssociated = true; }
+        get form() {
+            return this[internals].form;
+        }
+        get labels() {
+            return this[internals].labels;
+        }
+        // From https://github.com/material-components/material-web/blob/main/labs/behaviors/form-associated.ts
+        // Use @property for the `name` and `disabled` properties to add them to the
+        // `observedAttributes` array and trigger `attributeChangedCallback()`.
+        //
+        // We don't use Lit's default getter/setter (`noAccessor: true`) because
+        // the attributes need to be updated synchronously to work with synchronous
+        // form APIs, and Lit updates attributes async by default.
+        get name() {
+            return this.getAttribute('name') ?? '';
+        }
+        set name(name) {
+            // Note: setting name to null or empty does not remove the attribute.
+            this.setAttribute('name', name);
+            // We don't need to call `requestUpdate()` since it's called synchronously
+            // in `attributeChangedCallback()`.
+        }
+        get disabled() {
+            return this.hasAttribute('disabled');
+        }
+        set disabled(disabled) {
+            this.toggleAttribute('disabled', disabled);
+            // We don't need to call `requestUpdate()` since it's called synchronously
+            // in `attributeChangedCallback()`.
+        }
+        attributeChangedCallback(name, old, value) {
+            if (name === 'disabled') {
+                this.requestUpdate('disabled', old !== null);
+            }
+            super.attributeChangedCallback(name, old, value);
+        }
+        get validity() {
+            return this[internals].validity;
+        }
+        get validationMessage() {
+            return this[internals].validationMessage;
+        }
+        get willValidate() {
+            return this[internals].willValidate;
+        }
+        formDisabledCallback(disabled) {
+            this.disabled = disabled;
+        }
+        checkValidity() {
+            return this[internals].checkValidity();
+        }
+        reportValidity() {
+            return this[internals].reportValidity();
+        }
+    }
+    __decorate([
+        property({ noAccessor: true })
+    ], FormAssociatedElement.prototype, "name", null);
+    __decorate([
+        property({ type: Boolean, noAccessor: true })
+    ], FormAssociatedElement.prototype, "disabled", null);
+    return FormAssociatedElement;
+};

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

@@ -0,0 +1,13 @@
+export const internals = Symbol('internals');
+const privateInternals = Symbol('privateInternals');
+export const InternalsAttached = (superClass) => {
+    class InternalsAttachedElement extends superClass {
+        get [internals]() {
+            if (!this[privateInternals]) {
+                this[privateInternals] = this.attachInternals();
+            }
+            return this[privateInternals];
+        }
+    }
+    return InternalsAttachedElement;
+};

package/src/base/option.js

@@ -0,0 +1,17 @@
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+import { ListItem } from './list-item.js';
+export const OptionMixin = (superClass) => {
+    class OptionElement extends superClass {
+        constructor() {
+            super(...arguments);
+            this.value = '';
+        }
+    }
+    __decorate([
+        property({ reflect: true })
+    ], OptionElement.prototype, "value", void 0);
+    return OptionElement;
+};
+export class Option extends OptionMixin(ListItem) {
+}

package/src/base/select.js

@@ -0,0 +1,285 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { FormAssociated } from './mixins/form-associated.js';
+import { InternalsAttached } from './mixins/internals-attached.js';
+import { PopoverController } from './controllers/popover-controller.js';
+import { ListController } from './controllers/list-controller.js';
+import { MenuActions, getActionFromKey, getUpdatedIndex, scrollItemIntoView, } from './menu-utils.js';
+const Base = FormAssociated(InternalsAttached(LitElement));
+/**
+ * @csspart field
+ * @csspart menu
+ * @csspart items
+ *
+ * @fires {Event} change - Fired when the selected value has changed.
+ * @fires {Event} input - Fired when the selected value has changed.
+ *
+ * TODO: Consider handle mouseover to focus items.
+ */
+export class Select extends Base {
+    constructor() {
+        super(...arguments);
+        this._possibleItemTags = [];
+        this._durations = { show: 0, hide: 0 };
+        this._scrollPadding = 0;
+        this.value = '';
+        this.displayValue = '';
+        this.placeholder = '';
+        this.open = false;
+        this.required = false;
+        this.quick = false;
+        this.align = 'bottom-start';
+        this.alignStrategy = 'absolute';
+        this.offset = 0;
+        this.popoverController = new PopoverController(this, {
+            popover: () => this.$menu,
+            trigger: () => this.$field,
+            positioning: {
+                placement: () => this.align,
+                strategy: () => this.alignStrategy,
+                offset: () => this.offset,
+                windowPadding: () => 16,
+            },
+            durations: {
+                open: () => (this.quick ? 0 : this._durations.show),
+                close: () => (this.quick ? 0 : this._durations.hide),
+            },
+            onClickOutside: () => {
+                this.open = false;
+            },
+        });
+        this.listController = new ListController(this, {
+            isItem: (item) => this._possibleItemTags.includes(item.tagName.toLowerCase()) &&
+                !item.hasAttribute('disabled'),
+            getPossibleItems: () => Array.from(this.children).filter((child) => this._possibleItemTags.includes(child.tagName.toLowerCase()) &&
+                !child.hasAttribute('disabled')),
+            blurItem: (item) => {
+                item.focused = false;
+            },
+            focusItem: (item) => {
+                item.focused = true;
+                if (this.$field && item.id) {
+                    this.$field.setAttribute('aria-activedescendant', item.id);
+                }
+                scrollItemIntoView(this.$menu, item, this._scrollPadding);
+            },
+            wrapNavigation: () => false,
+        });
+    }
+    render() {
+        return html `${this.renderField()} ${this.renderMenu()}`;
+    }
+    renderField() {
+        return html `
+      <div
+        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()}
+      </div>
+    `;
+    }
+    renderMenu() {
+        return html `
+      <div part="menu" id="menu" role="listbox" tabindex="-1">
+        <slot part="items" @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+    renderFieldContent() {
+        return html `<span part="value"
+      >${this.displayValue || this.placeholder}</span
+    >`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.#handleOptionClick);
+        this.addEventListener('focusout', this.#handleFocusOut);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.#handleOptionClick);
+        this.removeEventListener('focusout', this.#handleFocusOut);
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('value')) {
+            this.#updateDisplayValue();
+            this.#updateSelection();
+        }
+        if (changed.has('open')) {
+            if (this.open) {
+                this.popoverController.animateOpen();
+                // Focus current item when opening
+                const index = this.listController.items.findIndex((item) => (item.value || item.innerText) === this.value);
+                if (index >= 0) {
+                    this.listController._focusItem(this.listController.items[index]);
+                }
+                else {
+                    this.listController.focusFirstItem();
+                }
+            }
+            else {
+                this.popoverController.animateClose();
+                this.listController.clearSearch();
+            }
+        }
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+    }
+    handleFieldKeydown(event) {
+        if (this.disabled)
+            return;
+        const action = getActionFromKey(event, this.open);
+        const items = this.listController.items;
+        const currentIndex = this.listController.currentIndex;
+        const maxIndex = items.length - 1;
+        switch (action) {
+            case MenuActions.Last:
+            case MenuActions.First:
+                this.open = true;
+            // intentional fallthrough
+            case MenuActions.Next:
+            case MenuActions.Previous:
+            case MenuActions.PageUp:
+            case MenuActions.PageDown:
+                event.preventDefault();
+                const nextIndex = getUpdatedIndex(currentIndex, maxIndex, action);
+                this.#onOptionChange(nextIndex);
+                return;
+            case MenuActions.CloseSelect:
+                event.preventDefault();
+                this.#selectOption(currentIndex);
+            // intentional fallthrough
+            case MenuActions.Close:
+                event.preventDefault();
+                this.open = false;
+                return;
+            case MenuActions.Type:
+                this.open = true;
+                this.listController.handleType(event.key);
+                return;
+            case MenuActions.Open:
+                event.preventDefault();
+                this.open = true;
+                return;
+        }
+    }
+    #onOptionChange(index) {
+        const items = this.listController.items;
+        if (index >= 0 && index < items.length) {
+            this.listController._focusItem(items[index]);
+        }
+    }
+    #selectOption(index) {
+        const items = this.listController.items;
+        if (index >= 0 && index < items.length) {
+            const item = items[index];
+            const newValue = item.value || item.innerText;
+            if (this.value !== newValue) {
+                this.value = newValue;
+                // According to https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event#event_type
+                // the change and input events are just Event and should not include detail.
+                this.dispatchEvent(new Event('input', { bubbles: true }));
+                this.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+            this.open = false;
+        }
+    }
+    #handleOptionClick(event) {
+        const target = event.target;
+        const item = target.closest(this._possibleItemTags.join(','));
+        if (item && this.listController.items.includes(item)) {
+            const index = this.listController.items.indexOf(item);
+            this.#selectOption(index);
+        }
+    }
+    #handleFocusOut(event) {
+        const relatedTarget = event.relatedTarget;
+        if (!this.contains(relatedTarget) && !this.$menu.contains(relatedTarget)) {
+            this.open = false;
+        }
+    }
+    #updateDisplayValue() {
+        // We need to wait for items to be available.
+        // Using a microtask or just checking if items exist.
+        // Since this is called in updated(), items might be available if children are slotted.
+        const items = this.listController.items;
+        const selectedItem = items.find((item) => (item.value || item.innerText) === this.value);
+        if (selectedItem) {
+            this.displayValue = selectedItem.innerText;
+        }
+        else if (!this.value) {
+            this.displayValue = '';
+        }
+    }
+    // TODO: Store previously selected item to avoid looping through all items
+    #updateSelection() {
+        const items = this.listController.items;
+        items.forEach((item) => {
+            const itemValue = item.value || item.innerText;
+            item.selected = itemValue === this.value;
+        });
+    }
+    // TODO: Handle multiple selected items
+    handleSlotChange() {
+        const items = this.listController.items;
+        if (!this.value && items.length > 0) {
+            const selectedItem = items.find((item) => item.hasAttribute('selected'));
+            if (selectedItem) {
+                this.value = selectedItem.value || selectedItem.innerText;
+            }
+            else {
+                const firstItem = items[0];
+                this.value = firstItem.value || firstItem.innerText;
+            }
+        }
+        this.#updateDisplayValue();
+        this.#updateSelection();
+    }
+}
+__decorate([
+    property({ reflect: true })
+], Select.prototype, "value", void 0);
+__decorate([
+    state()
+], Select.prototype, "displayValue", void 0);
+__decorate([
+    property({ type: String })
+], Select.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Select.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Select.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Select.prototype, "quick", void 0);
+__decorate([
+    property({ reflect: true })
+], Select.prototype, "align", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Select.prototype, "alignStrategy", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], Select.prototype, "offset", void 0);
+__decorate([
+    query('[part="field"]')
+], Select.prototype, "$field", void 0);
+__decorate([
+    query('[part="menu"]')
+], Select.prototype, "$menu", void 0);

package/src/base/switch.js

@@ -0,0 +1,86 @@
+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 Switch extends Base {
+    static { this.styles = [hiddenStyles]; }
+    constructor() {
+        super();
+        this.checked = false;
+        this._ignoreClick = false;
+        this.#handleClick = (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            if (this._ignoreClick)
+                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 = 'switch';
+        this.checked = this.hasAttribute('checked');
+        this.updateInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.#handleClick);
+        this.addEventListener('keydown', this.#handleKeyDown);
+        this.addEventListener('keyup', this.#handleKeyUp);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.#handleClick);
+        this.removeEventListener('keydown', this.#handleKeyDown);
+        this.removeEventListener('keyup', this.#handleKeyUp);
+    }
+    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);
+    }
+    #handleClick;
+    #handleKeyDown;
+    #handleKeyUp;
+    #toggleChecked() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: this.checked,
+        }));
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "checked", void 0);

package/src/base/tooltip.js

@@ -0,0 +1,139 @@
+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 { InternalsAttached, internals } from './mixins/internals-attached.js';
+import { PopoverController } from './controllers/popover-controller.js';
+let lastHidingTime = 0;
+const Base = Attachable(InternalsAttached(LitElement));
+export class Tooltip extends Base {
+    // Different from those in the popoverController, these timers are used to
+    // manage the delay before showing/hiding the tooltip.
+    #openTimer;
+    #closeTimer;
+    constructor() {
+        super();
+        this._delays = {
+            mouse: { show: 500, hide: 0 },
+            focus: { show: 100, hide: 0 },
+            touch: { show: 700, hide: 1500 },
+            recentlyShowed: 800,
+        };
+        this._durations = { show: 100, hide: 100 };
+        this.align = 'top';
+        this.offset = 4;
+        // Different from those in the popoverController, these timers are used to
+        // manage the delay before showing/hiding the tooltip.
+        this.#openTimer = null;
+        this.#closeTimer = null;
+        this.popoverController = new PopoverController(this, {
+            popover: () => this,
+            trigger: () => this.$control,
+            positioning: {
+                placement: () => this.align,
+                strategy: () => 'absolute',
+                offset: () => this.offset,
+                windowPadding: () => 16,
+            },
+            durations: {
+                open: () => this._durations.show,
+                close: () => this._durations.hide,
+            },
+            onClickOutside: () => {
+                this.visible = false;
+            },
+        });
+        this.#handleSlotChange = () => {
+            if (!this.visible)
+                this.$control.setAttribute('aria-label', this.textContent ?? '');
+        };
+        this.#handleFocusIn = () => {
+            if (!focusVisible)
+                return;
+            this.#show(this._delays.focus.show);
+        };
+        this.#handleFocusOut = () => {
+            this.#hide(this._delays.focus.hide);
+        };
+        this.#handlePointerEnter = (e) => {
+            const evt = e;
+            if (evt.pointerType === 'touch')
+                return;
+            this.#show(this._delays.mouse.show);
+        };
+        this.#handlePointerLeave = (e) => {
+            const evt = e;
+            if (evt.pointerType === 'touch')
+                return;
+            this.#hide(this._delays.mouse.hide);
+        };
+        this.#handleTouchStart = () => {
+            this.#show(this._delays.touch.show);
+        };
+        this.#handleTouchEnd = () => {
+            this.#hide(this._delays.touch.hide);
+        };
+        this[internals].role = 'tooltip';
+    }
+    render() {
+        return html `<slot @slotchange="${this.#handleSlotChange}"></slot>`;
+    }
+    handleControlChange(prev = null, next = null) {
+        const eventHandlers = {
+            focusin: this.#handleFocusIn,
+            focusout: this.#handleFocusOut,
+            pointerenter: this.#handlePointerEnter,
+            pointerleave: this.#handlePointerLeave,
+            touchstart: this.#handleTouchStart,
+            touchend: this.#handleTouchEnd,
+        };
+        Object.keys(eventHandlers).forEach((key) => {
+            prev?.removeEventListener(key, eventHandlers[key]);
+            next?.addEventListener(key, eventHandlers[key]);
+        });
+        if (prev)
+            prev.removeAttribute('aria-label');
+        if (next)
+            next.setAttribute('aria-label', this.textContent ?? '');
+    }
+    set visible(value) {
+        if (value) {
+            this.popoverController.animateOpen();
+        }
+        else {
+            this.popoverController.animateClose();
+        }
+    }
+    #handleSlotChange;
+    #handleFocusIn;
+    #handleFocusOut;
+    #handlePointerEnter;
+    #handlePointerLeave;
+    #handleTouchStart;
+    #handleTouchEnd;
+    #show(delay) {
+        clearTimeout(this.#closeTimer);
+        this.#openTimer = setTimeout(() => {
+            this.visible = true;
+        }, Math.max(Date.now() - lastHidingTime < this._delays.recentlyShowed ? 0 : delay));
+    }
+    #hide(delay) {
+        if (this.popoverController.open) {
+            lastHidingTime = Date.now();
+        }
+        clearTimeout(this.#openTimer);
+        this.#closeTimer = setTimeout(() => {
+            this.visible = false;
+        }, delay);
+    }
+}
+__decorate([
+    property({ reflect: true })
+], Tooltip.prototype, "align", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], Tooltip.prototype, "offset", void 0);
+__decorate([
+    query('slot')
+], Tooltip.prototype, "$slot", void 0);

package/src/core/focus-visible.js

@@ -0,0 +1,13 @@
+import { isServer } from 'lit';
+export let focusVisible = false;
+export function setFocusVisible(value) {
+    focusVisible = value;
+}
+if (!isServer) {
+    window.addEventListener('keydown', () => (focusVisible = true), {
+        capture: true,
+    });
+    window.addEventListener('mousedown', () => (focusVisible = false), {
+        capture: true,
+    });
+}

package/src/core/shared.d.ts

@@ -0,0 +1 @@
+type Constructor<T> = new (...args: any[]) => T;

package/src/core/unique-id.js

@@ -0,0 +1,11 @@
+let uniqueIdCounters = {};
+/**
+ * Generates a unique ID with an prefix.
+ */
+export function genUniqueId(prefix) {
+    if (!(prefix in uniqueIdCounters)) {
+        uniqueIdCounters[prefix] = 0;
+    }
+    const id = `${prefix}-${uniqueIdCounters[prefix]++}`;
+    return id;
+}

package/src/m3/button/common-button-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const commonButtonStyles = css `:host{--md-focus-ring-shape:calc(var(--_h)/2);background-color:color-mix(in srgb,var(--_background-color)var(--_background-opacity,100%),transparent);border-radius:calc(var(--_h)/2);color:color-mix(in srgb,var(--_text-color)var(--_text-opacity,100%),transparent);font:var(--md-sys-typography-label-large);gap:var(--_gap);height:var(--_h);min-width:64px;padding-inline:var(--_pad);transition:box-shadow var(--md-sys-motion-std-effects-slow-duration)var(--md-sys-motion-std-effects-slow),border-radius var(--md-sys-motion-std-effects-slow-duration)var(--md-sys-motion-std-effects-slow)}:host([trailingicon]){flex-direction:row-reverse}:host([variant=elevated]){--_background-color:var(--md-sys-color-surface-container-low);--_text-color:var(--_color);box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=outlined]){padding-inline:calc(var(--_pad) - 1px)}:host([variant=text]){padding-inline:12px;--_background-color:transparent!important}@media (hover:hover) and (pointer:fine){:host([variant=filled]:hover:not(:active)),:host([variant=tonal]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=elevated]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-2)}}:host(:disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:10%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;box-shadow:none;cursor:default;pointer-events:none}:host([variant=outlined]:disabled){--_background-color:var(--md-sys-color-outline)!important}[part~=icon]{fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}`;

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const commonButtonToggleStyles = css `:host([variant=filled]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=tonal]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container-highest);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=outlined]:state(checked)){--_background-color:var(--md-sys-color-inverse-surface);--_outline-color:var(--md-sys-color-inverse-surface);--_text-color:var(--md-sys-color-inverse-on-surface)}`;