@vollowx/seele 0.13.4 → 0.13.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.13.4",
+  "version": "0.13.6",
   "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",
@@ -8,11 +8,18 @@
   "main": "./src/all.js",
   "module": "./src/all.js",
   "exports": {
-    ".": "./src/all.js",
-    "./*.js": "./src/*.js"
+    ".": {
+      "types": "./src/all.d.ts",
+      "default": "./src/all.js"
+    },
+    "./*.js": {
+      "types": "./src/*.d.ts",
+      "default": "./src/*.js"
+    }
   },
   "files": [
     "src/**/*.js",
+    "src/**/*.d.ts",
     "src/m3/system/*.css",
     "custom-elements.json",
     "LICENSE",
@@ -32,31 +39,32 @@
     "url": "https://github.com/vollowx/seele.git"
   },
   "scripts": {
-    "dev": "wds",
-    "dev:styles": "bun scripts/build-styles.ts --watch",
-    "build": "bun run build:styles && bun run build:compile",
-    "build:compile": "bun scripts/build.ts",
-    "build:styles": "bun scripts/build-styles.ts --minify",
+    "note": "echo 'tsc must be called after build:css since it completes missing *-styles.css.js'",
+
+    "dev": "web-dev-server",
+    "dev:css": "bun scripts/convert-css.ts --watch",
+    "build": "bun run build:css && tsc && bun scripts/minify-html-literals.ts",
+    "build:css": "bun scripts/convert-css.ts --minify",
     "clean": "./scripts/clean.sh",
     "prepublishOnly": "bun clean && bun run build",
     "format": "prettier . --check",
     "format:write": "prettier . --check --write",
-    "cem": "cem analyze --litelement --globs './src/m3/**/*.ts' --exclude './src/**/*.css.ts'"
+    "cem": "cem analyze --litelement --globs './src/m3/**/*.ts'"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@swc/core": "^1.15.46",
-    "@types/bun": "^1.3.14",
+    "@types/node": "^26.1.2",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-esbuild": "^1.0.5",
     "chokidar": "^5.0.0",
     "lightningcss": "^1.33.0",
     "minify-html-literals": "^1.3.5",
-    "prettier": "^3.9.6"
+    "prettier": "^3.9.6",
+    "typescript": "^7.0.2"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@swc/helpers": "^0.5.23",
-    "lit": "^3.3.3"
+    "lit": "^3.3.3",
+    "tslib": "^2.8.1"
   }
 }

package/src/all.d.ts

@@ -0,0 +1,34 @@
+import './m3/autocomplete/autocomplete.js';
+import './m3/badge/badge.js';
+import './m3/button/common-button.js';
+import './m3/button/common-button-toggle.js';
+import './m3/button/icon-button.js';
+import './m3/button/icon-button-toggle.js';
+import './m3/button-group/standard-button-group.js';
+import './m3/button-group/connected-button-group.js';
+import './m3/checkbox/checkbox.js';
+import './m3/dialog/dialog.js';
+import './m3/divider/divider.js';
+import './m3/fab/fab.js';
+import './m3/focus-ring/focus-ring.js';
+import './m3/item/item.js';
+import './m3/list/list.js';
+import './m3/list/list-item.js';
+import './m3/loading-indicator/loading-indicator.js';
+import './m3/menu/menu.js';
+import './m3/menu/menu-item.js';
+import './m3/radio/radio.js';
+import './m3/ripple/ripple.js';
+import './m3/select/filled-select.js';
+import './m3/select/outlined-select.js';
+import './m3/select/option.js';
+import './m3/slider/slider.js';
+import './m3/switch/switch.js';
+import './m3/tab/tabs.js';
+import './m3/tab/tab.js';
+import './m3/tab/tab-panel.js';
+import './m3/text-field/filled-text-field.js';
+import './m3/text-field/outlined-text-field.js';
+import './m3/toolbar/toolbar.js';
+import './m3/tooltip/tooltip.js';
+import './win98/button/button.js';

package/src/all.js

@@ -17,6 +17,7 @@ import './m3/list/list-item.js';
 import './m3/loading-indicator/loading-indicator.js';
 import './m3/menu/menu.js';
 import './m3/menu/menu-item.js';
+import './m3/radio/radio.js';
 import './m3/ripple/ripple.js';
 import './m3/select/filled-select.js';
 import './m3/select/outlined-select.js';

package/src/base/autocomplete.d.ts

@@ -0,0 +1,56 @@
+import { LitElement, PropertyValues } from 'lit';
+import type { Placement, Strategy } from '@floating-ui/dom';
+import type { Menu, MenuSelectEvent } from './menu.js';
+declare const Base: Constructor<import("./mixins/focus-delegated.js").FocusDelegatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+type AutocompleteMode = 'none' | 'list' | 'both';
+/**
+ * TODO: Check if manually dispatching input/change events on input is necessary
+ */
+export declare class Autocomplete extends Base {
+    open: boolean;
+    quick: boolean;
+    offset: number;
+    align: Placement;
+    alignStrategy: Strategy;
+    keepOpenSelect: boolean;
+    mode: AutocompleteMode;
+    $menu: Menu;
+    inputSlotElements: HTMLElement[];
+    itemSlotElements: HTMLElement[];
+    private get $input();
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Example content:
+     *
+     * ```html
+     * <your-menu
+     *   part="menu"
+     *   id="menu"
+     *   type="listbox"
+     *   data-tabindex="-1"
+     *   ?quick="${this.quick}"
+     *   .offset=${this.offset}
+     *   .align=${this.align}
+     *   .alignStrategy=${this.alignStrategy}
+     *   ?keep-open-select=${this.keepOpenSelect}
+     *   no-focus-control
+     *   ?open=${this.open}
+     *   @open="${() => (this.open = true)}"
+     *   @close="${() => (this.open = false)}"
+     *   @select=${this.handleMenuSelect}
+     * >
+     *   <slot @slotchange=${this.handleItemsSlotChange}></slot>
+     * </your-menu>
+     * ```
+     */
+    renderMenu(): import("lit-html").TemplateResult<1>;
+    private handleInputSlotChange;
+    protected handleItemsSlotChange(): void;
+    private handleInput;
+    private applyInlineAutoComplete;
+    private filterOptions;
+    private handleInputKeydown;
+    protected handleMenuSelect(event: MenuSelectEvent): void;
+    protected updated(changed: PropertyValues): void;
+}
+export {};

package/src/base/autocomplete.js

@@ -1,4 +1,4 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { InternalsAttached } from './mixins/internals-attached.js';
@@ -6,54 +6,66 @@ import { FocusDelegated } from './mixins/focus-delegated.js';
 const Base = FocusDelegated(InternalsAttached(LitElement));
 /**
  * TODO: Check if manually dispatching input/change events on input is necessary
- */ export class Autocomplete extends Base {
+ */
+export class Autocomplete extends Base {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        // Passed to menu
+        this.quick = false;
+        this.offset = 0;
+        this.align = 'bottom-start';
+        this.alignStrategy = 'absolute';
+        this.keepOpenSelect = false;
+        this.mode = 'none';
+    }
     get $input() {
         return this.inputSlotElements[0];
     }
     render() {
-        return html`<slot name="input" @slotchange="${this.handleInputSlotChange}"></slot>${this.renderMenu()}`;
+        return html `<slot name="input" @slotchange="${this.handleInputSlotChange}"></slot>${this.renderMenu()}`;
     }
     /**
-   * Example content:
-   *
-   * ```html
-   * <your-menu
-   *   part="menu"
-   *   id="menu"
-   *   type="listbox"
-   *   data-tabindex="-1"
-   *   ?quick="${this.quick}"
-   *   .offset=${this.offset}
-   *   .align=${this.align}
-   *   .alignStrategy=${this.alignStrategy}
-   *   ?keep-open-select=${this.keepOpenSelect}
-   *   no-focus-control
-   *   ?open=${this.open}
-   *   @open="${() => (this.open = true)}"
-   *   @close="${() => (this.open = false)}"
-   *   @select=${this.handleMenuSelect}
-   * >
-   *   <slot @slotchange=${this.handleItemsSlotChange}></slot>
-   * </your-menu>
-   * ```
-   */ renderMenu() {
-        return html``;
+     * Example content:
+     *
+     * ```html
+     * <your-menu
+     *   part="menu"
+     *   id="menu"
+     *   type="listbox"
+     *   data-tabindex="-1"
+     *   ?quick="${this.quick}"
+     *   .offset=${this.offset}
+     *   .align=${this.align}
+     *   .alignStrategy=${this.alignStrategy}
+     *   ?keep-open-select=${this.keepOpenSelect}
+     *   no-focus-control
+     *   ?open=${this.open}
+     *   @open="${() => (this.open = true)}"
+     *   @close="${() => (this.open = false)}"
+     *   @select=${this.handleMenuSelect}
+     * >
+     *   <slot @slotchange=${this.handleItemsSlotChange}></slot>
+     * </your-menu>
+     * ```
+     */
+    renderMenu() {
+        return html ``;
     }
     handleInputSlotChange() {
         const input = this.$input;
-        if (!input) return;
+        if (!input)
+            return;
         const $realInput = this.$input.$inputOrTextarea;
         if ($realInput) {
             $realInput.role = 'combobox';
             $realInput.ariaExpanded = String(this.open);
             $realInput.ariaHasPopup = 'listbox';
             $realInput.ariaAutoComplete = this.mode;
-            $realInput.ariaControlsElements = [
-                this.$menu
-            ];
+            $realInput.ariaControlsElements = [this.$menu];
             input.addEventListener('input', this.handleInput.bind(this));
             input.addEventListener('keydown', this.handleInputKeydown.bind(this));
-            input.addEventListener('click', ()=>this.open = !this.open);
+            input.addEventListener('click', () => (this.open = !this.open));
             this.$menu.attach($realInput);
         }
     }
@@ -82,10 +94,11 @@ const Base = FocusDelegated(InternalsAttached(LitElement));
         }
     }
     filterOptions(searchTerm) {
-        if (this.mode === 'none') return null;
+        if (this.mode === 'none')
+            return null;
         const normalizedSearch = searchTerm.toLowerCase();
         let firstMatch = null;
-        this.itemSlotElements.forEach((item)=>{
+        this.itemSlotElements.forEach((item) => {
             const text = (item.textContent || '').toLowerCase().trim();
             const isMatch = text.startsWith(normalizedSearch);
             item.hidden = !isMatch;
@@ -96,26 +109,32 @@ const Base = FocusDelegated(InternalsAttached(LitElement));
         return firstMatch;
     }
     handleInputKeydown(event) {
-        if (this.$input?.disabled) return;
-        if ([
-            'Enter',
-            'Escape',
-            'ArrowUp',
-            'ArrowDown'
-        ].includes(event.key)) {
+        if (this.$input?.disabled)
+            return;
+        if (['Enter', 'Escape', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
             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);
-            if (event.key === 'Enter' && !this.keepOpenSelect) this.open = false;
+            if (event.key === 'Enter' && !this.keepOpenSelect)
+                this.open = false;
         }
     }
     handleMenuSelect(event) {
+        // FIXME: pressing <Enter> in a 'both' mode autocomplete triggers this
+        //        function, which overrides the current value in the text field
+        //        since the selected value in the menu is not the same as the
+        //        one in autocomplete
+        //
+        // if (this.mode === 'list') {
         const selectedItem = event.detail.item;
-        const newValue = selectedItem.getAttribute('value') || selectedItem.textContent?.trim() || '';
+        const newValue = selectedItem.getAttribute('value') ||
+            selectedItem.textContent?.trim() ||
+            '';
         if (this.$input) {
             this.$input.value = newValue;
         }
+        // }
         if (!this.keepOpenSelect) {
             this.open = false;
         }
@@ -128,58 +147,34 @@ const Base = FocusDelegated(InternalsAttached(LitElement));
             }
         }
     }
-    constructor(...args){
-        super(...args), this.open = false, // Passed to menu
-        this.quick = false, this.offset = 0, this.align = 'bottom-start', this.alignStrategy = 'absolute', this.keepOpenSelect = false, this.mode = 'none';
-    }
 }
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Autocomplete.prototype, "open", void 0);
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Autocomplete.prototype, "quick", void 0);
-_ts_decorate([
-    property({
-        type: Number
-    })
+__decorate([
+    property({ type: Number })
 ], Autocomplete.prototype, "offset", void 0);
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], Autocomplete.prototype, "align", void 0);
-_ts_decorate([
-    property({
-        type: String,
-        reflect: true,
-        attribute: 'align-strategy'
-    })
+__decorate([
+    property({ type: String, reflect: true, attribute: 'align-strategy' })
 ], Autocomplete.prototype, "alignStrategy", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        attribute: 'keep-open-select'
-    })
+__decorate([
+    property({ type: Boolean, attribute: 'keep-open-select' })
 ], Autocomplete.prototype, "keepOpenSelect", void 0);
-_ts_decorate([
+__decorate([
     property()
 ], Autocomplete.prototype, "mode", void 0);
-_ts_decorate([
+__decorate([
     query('[part="menu"]')
 ], Autocomplete.prototype, "$menu", void 0);
-_ts_decorate([
-    queryAssignedElements({
-        slot: 'input',
-        flatten: true
-    })
+__decorate([
+    queryAssignedElements({ slot: 'input', flatten: true })
 ], Autocomplete.prototype, "inputSlotElements", void 0);
-_ts_decorate([
-    queryAssignedElements({
-        flatten: true
-    })
+__decorate([
+    queryAssignedElements({ flatten: true })
 ], Autocomplete.prototype, "itemSlotElements", void 0);

package/src/base/button.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+declare const Base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+export declare class Button extends Base {
+    #private;
+    type: 'button' | 'submit' | 'reset';
+    static styles: any[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, any>): void;
+    protected updateState(): void;
+}
+export {};

package/src/base/button.js

@@ -1,4 +1,4 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
@@ -6,38 +6,43 @@ import { FormAssociated } from './mixins/form-associated.js';
 import { hiddenStyles } from './hidden-styles.css.js';
 const Base = FormAssociated(InternalsAttached(LitElement));
 export class Button extends Base {
-    static{
-        this.styles = [
-            hiddenStyles
-        ];
-    }
-    constructor(){
-        super(), this.type = 'button', this.#handleKeyDown = (e)=>{
-            if (e.key !== ' ' && e.key !== 'Enter') return;
+    static { this.styles = [hiddenStyles]; }
+    constructor() {
+        super();
+        this.type = 'button';
+        this.#handleKeyDown = (e) => {
+            if (e.key !== ' ' && e.key !== 'Enter')
+                return;
             e.preventDefault();
             e.stopPropagation();
-            if (e.key === 'Enter') this.click();
-        }, this.#handleKeyUp = (e)=>{
+            if (e.key === 'Enter')
+                this.click();
+        };
+        this.#handleKeyUp = (e) => {
             if (e.key === ' ') {
                 e.preventDefault();
                 e.stopPropagation();
                 this.click();
             }
-        }, this.#handleClick = ()=>{
-            if (this.type !== 'button') this[internals].form?.[this.type]();
+        };
+        this.#handleClick = () => {
+            if (this.type !== 'button')
+                this[internals].form?.[this.type]();
         };
         this[internals].role = 'button';
         this.updateState();
+        // This is set to prevent a first-paint-time transition for styles like
+        // `border-radius` on `:host`. Also in `ToggleButton`.
+        // Double `requestAnimationFrame` is necessary since the callback inside is
+        // called before the nth frame is printed.
+        this.setAttribute('notransition', '');
     }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('keydown', this.#handleKeyDown);
         this.addEventListener('keyup', this.#handleKeyUp);
         this.addEventListener('click', this.#handleClick);
-        // This is set to prevent a first-paint-time transition for styles like
-        // `border-radius` on `:host`. Also in `ToggleButton`.
-        this.setAttribute('notransition', '');
-        requestAnimationFrame(()=>this.removeAttribute('notransition'));
+        requestAnimationFrame(() => requestAnimationFrame(() => this.removeAttribute('notransition')));
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -46,7 +51,8 @@ export class Button extends Base {
         this.removeEventListener('click', this.#handleClick);
     }
     updated(changed) {
-        if (changed.has('disabled')) this.updateState();
+        if (changed.has('disabled'))
+            this.updateState();
     }
     updateState() {
         this.tabIndex = this.disabled ? -1 : 0;
@@ -56,8 +62,6 @@ export class Button extends Base {
     #handleKeyUp;
     #handleClick;
 }
-_ts_decorate([
-    property({
-        reflect: true
-    })
+__decorate([
+    property({ reflect: true })
 ], Button.prototype, "type", void 0);

package/src/base/checkbox.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+declare const Base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+export declare class Checkbox extends Base {
+    #private;
+    checked: boolean;
+    indeterminate: boolean;
+    required: boolean;
+    static styles: any[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, any>): void;
+    protected updateState(): void;
+    protected toggleChecked(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string, _reason: string): void;
+}
+export {};

package/src/base/checkbox.js

@@ -1,4 +1,4 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { FormAssociated } from './mixins/form-associated.js';
@@ -7,26 +7,28 @@ import { hiddenStyles } from './hidden-styles.css.js';
 const PROPERTY_FROM_ARIA_CHECKED = {
     true: 'checked',
     false: 'unchecked',
-    mixed: 'indeterminate'
+    mixed: 'indeterminate',
 };
 const Base = FormAssociated(InternalsAttached(LitElement));
 export class Checkbox extends Base {
-    static{
-        this.styles = [
-            hiddenStyles
-        ];
-    }
-    constructor(){
-        super(), this.checked = false, this.indeterminate = false, this.required = false, this.#handleClick = (e)=>{
+    static { this.styles = [hiddenStyles]; }
+    constructor() {
+        super();
+        this.checked = false;
+        this.indeterminate = false;
+        this.required = false;
+        this.#handleClick = (e) => {
             e.stopPropagation();
             e.preventDefault();
             this.toggleChecked();
-        }, this.#handleKeyDown = (e)=>{
+        };
+        this.#handleKeyDown = (e) => {
             if (e.key === ' ') {
                 e.preventDefault();
                 e.stopPropagation();
             }
-        }, this.#handleKeyUp = (e)=>{
+        };
+        this.#handleKeyUp = (e) => {
             if (e.key === ' ') {
                 e.preventDefault();
                 e.stopPropagation();
@@ -51,20 +53,29 @@ export class Checkbox extends Base {
         super.disconnectedCallback();
     }
     updated(changed) {
-        if (changed.has('checked') || changed.has('disabled') || changed.has('indeterminate') || changed.has('required')) {
+        if (changed.has('checked') ||
+            changed.has('disabled') ||
+            changed.has('indeterminate') ||
+            changed.has('required')) {
             this.updateState();
         }
     }
     updateState() {
-        const prevAriaChecked = this[internals].ariaChecked;
+        const prevAriaChecked = this[internals]
+            .ariaChecked;
         this[internals].states.delete('was-unchecked');
         this[internals].states.delete('was-checked');
         this[internals].states.delete('was-indeterminate');
         if (prevAriaChecked && PROPERTY_FROM_ARIA_CHECKED[prevAriaChecked]) {
             this[internals].states.add(`was-${PROPERTY_FROM_ARIA_CHECKED[prevAriaChecked]}`);
         }
-        this[internals].ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';
-        const currentAriaChecked = this[internals].ariaChecked;
+        this[internals].ariaChecked = this.indeterminate
+            ? 'mixed'
+            : this.checked
+                ? 'true'
+                : 'false';
+        const currentAriaChecked = this[internals]
+            .ariaChecked;
         this[internals].states.delete('unchecked');
         this[internals].states.delete('checked');
         this[internals].states.delete('indeterminate');
@@ -73,11 +84,11 @@ export class Checkbox extends Base {
         this[internals].ariaDisabled = String(this.disabled);
         this[internals].setFormValue(this.checked ? 'on' : null);
         if (this.required && !this.checked) {
-            this[internals].setValidity({
-                valueMissing: true
-            }, // TODO: I18n
+            this[internals].setValidity({ valueMissing: true }, 
+            // TODO: I18n
             'Please check this box if you want to proceed.');
-        } else {
+        }
+        else {
             this[internals].setValidity({});
         }
     }
@@ -85,13 +96,14 @@ export class Checkbox extends Base {
     #handleKeyDown;
     #handleKeyUp;
     toggleChecked() {
-        if (this.disabled) return;
+        if (this.disabled)
+            return;
         this.checked = !this.checked;
         this.indeterminate = false;
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
             composed: true,
-            detail: this.checked
+            detail: this.checked,
         }));
     }
     formResetCallback() {
@@ -101,19 +113,12 @@ export class Checkbox extends Base {
         this.checked = state === 'on';
     }
 }
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Checkbox.prototype, "checked", void 0);
-_ts_decorate([
-    property({
-        type: Boolean
-    })
+__decorate([
+    property({ type: Boolean })
 ], Checkbox.prototype, "indeterminate", void 0);
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], Checkbox.prototype, "required", void 0);