@vollowx/seele 0.13.4 → 0.13.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.13.4",
+  "version": "0.13.5",
   "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",

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.js

@@ -111,11 +111,18 @@ const Base = FocusDelegated(InternalsAttached(LitElement));
         }
     }
     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() || '';
         if (this.$input) {
             this.$input.value = newValue;
         }
+        // }
         if (!this.keepOpenSelect) {
             this.open = false;
         }

package/src/base/button.js

@@ -28,16 +28,18 @@ export class Button extends Base {
         };
         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();

package/src/base/radio.js

@@ -0,0 +1,162 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+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 = Radio.#registry.get(scope);
+        if (!scopeMap) {
+            scopeMap = new Map();
+            Radio.#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 = Radio.#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) Radio.#registry.delete(this.#currentScope);
+        }
+        this.#currentScope = null;
+        this.#currentName = '';
+    }
+    #getGroupRadios() {
+        if (!this.name) return [
+            this
+        ];
+        const scope = this.#getScope();
+        const group = Radio.#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');
+    }
+}
+_ts_decorate([
+    property({
+        type: String
+    })
+], Radio.prototype, "value", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true
+    })
+], Radio.prototype, "checked", void 0);

package/src/base/toggle-button.js

@@ -70,6 +70,7 @@ export class ToggleButton extends Base {
         this[internals].role = 'button';
         this.checked = this.hasAttribute('checked');
         this._updateInternals();
+        this.setAttribute('notransition', '');
     }
     connectedCallback() {
         super.connectedCallback();
@@ -79,8 +80,7 @@ export class ToggleButton extends Base {
         this.labels.forEach((label)=>{
             label.addEventListener('click', this.#handleLabelClick);
         });
-        this.setAttribute('notransition', '');
-        requestAnimationFrame(()=>this.removeAttribute('notransition'));
+        requestAnimationFrame(()=>requestAnimationFrame(()=>this.removeAttribute('notransition')));
     }
     disconnectedCallback() {
         this.removeEventListener('click', this.#handleClick);

package/src/core/decorators.js

@@ -2,7 +2,7 @@ import { isServer } from 'lit';
 import { customElement } from 'lit/decorators.js';
 const wrappedCustomElement = (tagName, allowSSR = true)=>{
     if (isServer && !allowSSR) {
-        console.log(`[seele]: <${tagName}> will not be rendered server-side.`);
+        console.log(`[seele] <${tagName}> will not be rendered server-side`);
         return (cls)=>cls;
     } else {
         return customElement(tagName);

package/src/m3/button-group/connected-button-group.js

@@ -3,7 +3,7 @@ import { LitElement, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { customElement } from '../../core/decorators.js';
 import { connectedButtonGroupStyles } from './connected-button-group-styles.css.js';
-export class M3StandardButtonGroup extends LitElement {
+export class M3ConnectedButtonGroup extends LitElement {
     static{
         this.styles = [
             connectedButtonGroupStyles
@@ -28,10 +28,10 @@ _ts_decorate([
     property({
         type: Boolean
     })
-], M3StandardButtonGroup.prototype, "multiple", void 0);
+], M3ConnectedButtonGroup.prototype, "multiple", void 0);
 _ts_decorate([
     queryAssignedElements()
-], M3StandardButtonGroup.prototype, "$buttons", void 0);
-M3StandardButtonGroup = _ts_decorate([
-    customElement('md-connected-button-group', false)
-], M3StandardButtonGroup);
+], M3ConnectedButtonGroup.prototype, "$buttons", void 0);
+M3ConnectedButtonGroup = _ts_decorate([
+    customElement('md-connected-button-group')
+], M3ConnectedButtonGroup);

package/src/m3/button-group/standard-button-group.js

@@ -127,5 +127,5 @@ _ts_decorate([
     queryAssignedElements()
 ], M3StandardButtonGroup.prototype, "$buttons", void 0);
 M3StandardButtonGroup = _ts_decorate([
-    customElement('md-button-group', false)
+    customElement('md-button-group')
 ], M3StandardButtonGroup);

package/src/m3/checkbox/checkbox.js

@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { Checkbox } from '../../base/checkbox.js';
 import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
 import { checkboxStyles } from './checkbox-styles.css.js';
 import { targetStyles } from '../target-styles.css.js';
 export class M3Checkbox extends Checkbox {

package/src/m3/radio/radio-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const radioStyles = css`:host{--_default:var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);--_slow:var(--md-sys-motion-effects-slow-duration) var(--md-sys-motion-effects-slow);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:20px;outline:0;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex;position:relative}:host:before,:host:after{content:"";box-sizing:border-box;border-radius:9999px;position:absolute}:host:before{z-index:1;background-color:var(--md-sys-color-on-surface-variant);width:20px;height:20px;transition:background var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast)}.middle{background-color:var(--md-sys-color-surface);z-index:2;width:16px;height:16px;animation:uncheck-middle-2 var(--_slow) var(--md-sys-motion-effects-default-duration);border-radius:9999px}:host:after{z-index:3;background-color:var(--md-sys-color-primary);width:10px;height:10px;animation:uncheck-inner-1 var(--_default), uncheck-inner-2 var(--_slow) var(--md-sys-motion-effects-default-duration);transform:scale(0)}@keyframes uncheck-middle-2{0%{z-index:4;transform:scale(0)}to{z-index:4;transform:scale(1)}}@keyframes uncheck-inner-1{0%{background-color:var(--md-sys-color-primary);transform:scale(1)}to{background-color:var(--md-sys-color-on-surface-variant);transform:scale(1.6)}}@keyframes uncheck-inner-2{0%{background-color:var(--md-sys-color-on-surface-variant);transform:scale(1.6)}to{background-color:var(--md-sys-color-on-surface-variant);transform:scale(1.6)}}:host([checked]):before{background-color:var(--md-sys-color-primary)}:host([checked]) .middle{animation:check-middle-1 var(--_default), check-middle-2 var(--_slow) var(--md-sys-motion-effects-default-duration);animation-fill-mode:forwards}:host([checked]):after{animation:check-inner-2 var(--_slow) var(--md-sys-motion-effects-default-duration);animation-fill-mode:forwards}@keyframes check-middle-1{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes check-middle-2{0%{transform:scale(.625)}to{transform:scale(1)}}@keyframes check-inner-2{0%,to{transform:scale(1)}}:host([disabled]){pointer-events:none}:host([disabled]):before,:host([disabled]):after{background:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}`;

package/src/m3/radio/radio.js

@@ -0,0 +1,22 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { html } from 'lit';
+import { Radio } from '../../base/radio.js';
+import { customElement } from '../../core/decorators.js';
+import { radioStyles } from './radio-styles.css.js';
+import { targetStyles } from '../target-styles.css.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+export class M3Radio extends Radio {
+    static{
+        this.styles = [
+            targetStyles,
+            radioStyles
+        ];
+    }
+    render() {
+        return html`<md-focus-ring></md-focus-ring><md-ripple></md-ripple><span part="target"></span> <span class="middle"></span>`;
+    }
+}
+M3Radio = _ts_decorate([
+    customElement('md-radio')
+], M3Radio);

package/src/win98/button/radio.js

@@ -0,0 +1,8 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { Radio } from '../../base/radio.js';
+import { customElement } from '../../core/decorators.js';
+export class Win98Radio extends Radio {
+}
+Win98Radio = _ts_decorate([
+    customElement('win98-radio')
+], Win98Radio);

package/src/win98/radio/radio.js

@@ -0,0 +1,8 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { Radio } from '../../base/radio.js';
+import { customElement } from '../../core/decorators.js';
+export class Win98Radio extends Radio {
+}
+Win98Radio = _ts_decorate([
+    customElement('win98-radio')
+], Win98Radio);