@lynx-js/web-elements 0.9.0 → 0.10.0

package/dist/elements/XImage/ImageSrc.js

@@ -0,0 +1,78 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { bindToAttribute, bindToStyle, genDomGetter, registerAttributeHandler, } from '../../element-reactive/index.js';
+let ImageSrc = (() => {
+    let _instanceExtraInitializers = [];
+    let __handleSrc_decorators;
+    let __handleSrc_initializers = [];
+    let __handleSrc_extraInitializers = [];
+    let __preloadPlaceholder_decorators;
+    let __handleBlurRadius_decorators;
+    let __handleBlurRadius_initializers = [];
+    let __handleBlurRadius_extraInitializers = [];
+    let __handleCrossorigin_decorators;
+    let __handleCrossorigin_initializers = [];
+    let __handleCrossorigin_extraInitializers = [];
+    let __handleReferrerpolicy_decorators;
+    let __handleReferrerpolicy_initializers = [];
+    let __handleReferrerpolicy_extraInitializers = [];
+    return class ImageSrc {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handleSrc_decorators = [registerAttributeHandler('src', true)];
+            __preloadPlaceholder_decorators = [registerAttributeHandler('placeholder', true)];
+            __handleBlurRadius_decorators = [registerAttributeHandler('blur-radius', true)];
+            __handleCrossorigin_decorators = [registerAttributeHandler('crossorigin', true)];
+            __handleReferrerpolicy_decorators = [registerAttributeHandler('referrerpolicy', true)];
+            __esDecorate(this, null, __preloadPlaceholder_decorators, { kind: "method", name: "_preloadPlaceholder", static: false, private: false, access: { has: obj => "_preloadPlaceholder" in obj, get: obj => obj._preloadPlaceholder }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, __handleSrc_decorators, { kind: "field", name: "_handleSrc", static: false, private: false, access: { has: obj => "_handleSrc" in obj, get: obj => obj._handleSrc, set: (obj, value) => { obj._handleSrc = value; } }, metadata: _metadata }, __handleSrc_initializers, __handleSrc_extraInitializers);
+            __esDecorate(null, null, __handleBlurRadius_decorators, { kind: "field", name: "_handleBlurRadius", static: false, private: false, access: { has: obj => "_handleBlurRadius" in obj, get: obj => obj._handleBlurRadius, set: (obj, value) => { obj._handleBlurRadius = value; } }, metadata: _metadata }, __handleBlurRadius_initializers, __handleBlurRadius_extraInitializers);
+            __esDecorate(null, null, __handleCrossorigin_decorators, { kind: "field", name: "_handleCrossorigin", static: false, private: false, access: { has: obj => "_handleCrossorigin" in obj, get: obj => obj._handleCrossorigin, set: (obj, value) => { obj._handleCrossorigin = value; } }, metadata: _metadata }, __handleCrossorigin_initializers, __handleCrossorigin_extraInitializers);
+            __esDecorate(null, null, __handleReferrerpolicy_decorators, { kind: "field", name: "_handleReferrerpolicy", static: false, private: false, access: { has: obj => "_handleReferrerpolicy" in obj, get: obj => obj._handleReferrerpolicy, set: (obj, value) => { obj._handleReferrerpolicy = value; } }, metadata: _metadata }, __handleReferrerpolicy_initializers, __handleReferrerpolicy_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [
+            'src',
+            'placeholder',
+            'blur-radius',
+            'crossorigin',
+            'referrerpolicy',
+        ];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #getImg = genDomGetter(() => this.#dom.shadowRoot, '#img');
+        _handleSrc = __runInitializers(this, __handleSrc_initializers, bindToAttribute(this.#getImg, 'src', (newval) => {
+            return newval || this.#dom.getAttribute('placeholder');
+        }));
+        _preloadPlaceholder(newVal) {
+            if (newVal) {
+                new Image().src = newVal;
+            }
+        }
+        _handleBlurRadius = (__runInitializers(this, __handleSrc_extraInitializers), __runInitializers(this, __handleBlurRadius_initializers, bindToStyle(this.#getImg, '--blur-radius', undefined, true)));
+        _handleCrossorigin = (__runInitializers(this, __handleBlurRadius_extraInitializers), __runInitializers(this, __handleCrossorigin_initializers, bindToAttribute(this.#getImg, 'crossorigin')));
+        _handleReferrerpolicy = (__runInitializers(this, __handleCrossorigin_extraInitializers), __runInitializers(this, __handleReferrerpolicy_initializers, bindToAttribute(this.#getImg, 'referrerpolicy')));
+        #onImageError = (__runInitializers(this, __handleReferrerpolicy_extraInitializers), () => {
+            const currentSrc = this.#getImg().src;
+            const placeholder = this.#dom.getAttribute('placeholder');
+            if (placeholder && currentSrc !== placeholder) {
+                this.#getImg().src = placeholder;
+            }
+        });
+        constructor(dom) {
+            this.#dom = dom;
+            this.#getImg().addEventListener('error', this.#onImageError);
+        }
+        connectedCallback() {
+            if (this.#dom.getAttribute('src') === null
+                || this.#dom.getAttribute('src') === '') {
+                this._handleSrc(null);
+            }
+        }
+    };
+})();
+export { ImageSrc };
+//# sourceMappingURL=ImageSrc.js.map

package/dist/{XImage → elements/XImage}/XImage.js

@@ -4,11 +4,11 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component } from '@lynx-js/web-elements-reactive';
+import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { ImageSrc } from './ImageSrc.js';
 import { ImageEvents } from './ImageEvents.js';
-import { templateXImage } from '@lynx-js/web-elements-template';
+import { templateXImage } from '../htmlTemplates.js';
 let XImage = (() => {
     let _classDecorators = [Component('x-image', [CommonEventsAndMethods, ImageSrc, ImageEvents], templateXImage({}))];
     let _classDescriptor;

package/dist/elements/XImage/index.d.ts

@@ -0,0 +1,18 @@
+export { FilterImage } from './FilterImage.js';
+/**
+ * @module elements/XImage
+ *
+ * `x-image` displays an image.
+ *
+ * Attributes:
+ * - `src`: Image source URL.
+ * - `placeholder`: Placeholder image URL.
+ * - `blur-radius`: Blur radius in px.
+ * - `crossorigin`: Cross-origin settings.
+ * - `referrerpolicy`: Referrer policy.
+ *
+ * Events:
+ * - `load`: Fired when image loads successfully. Detail: `{ width, height }`.
+ * - `error`: Fired when image fails to load.
+ */
+export { XImage } from './XImage.js';

package/dist/elements/XImage/index.js

@@ -0,0 +1,22 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+export { FilterImage } from './FilterImage.js';
+/**
+ * @module elements/XImage
+ *
+ * `x-image` displays an image.
+ *
+ * Attributes:
+ * - `src`: Image source URL.
+ * - `placeholder`: Placeholder image URL.
+ * - `blur-radius`: Blur radius in px.
+ * - `crossorigin`: Cross-origin settings.
+ * - `referrerpolicy`: Referrer policy.
+ *
+ * Events:
+ * - `load`: Fired when image loads successfully. Detail: `{ width, height }`.
+ * - `error`: Fired when image fails to load.
+ */
+export { XImage } from './XImage.js';
+//# sourceMappingURL=index.js.map

package/dist/elements/XInput/InputBaseAttributes.d.ts

@@ -0,0 +1,14 @@
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
+/**
+ * shared by x-input and x-input-ng
+ */
+export declare class InputBaseAttributes implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    _handlerConfirmType: (this: void, newVal: string | null) => void;
+    _handlerMaxlength: (this: void, newVal: string | null) => void;
+    _handleReadonly: (this: void, newVal: string | null) => void;
+    _handleType(value: string | null): void;
+    _handleSpellCheck: (this: void, newVal: string | null) => void;
+    constructor(dom: HTMLElement);
+}

package/dist/elements/XInput/InputBaseAttributes.js

@@ -0,0 +1,98 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { bindToAttribute, genDomGetter, registerAttributeHandler, } from '../../element-reactive/index.js';
+/**
+ * shared by x-input and x-input-ng
+ */
+let InputBaseAttributes = (() => {
+    let _instanceExtraInitializers = [];
+    let __handlerConfirmType_decorators;
+    let __handlerConfirmType_initializers = [];
+    let __handlerConfirmType_extraInitializers = [];
+    let __handlerMaxlength_decorators;
+    let __handlerMaxlength_initializers = [];
+    let __handlerMaxlength_extraInitializers = [];
+    let __handleReadonly_decorators;
+    let __handleReadonly_initializers = [];
+    let __handleReadonly_extraInitializers = [];
+    let __handleType_decorators;
+    let __handleSpellCheck_decorators;
+    let __handleSpellCheck_initializers = [];
+    let __handleSpellCheck_extraInitializers = [];
+    return class InputBaseAttributes {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handlerConfirmType_decorators = [registerAttributeHandler('confirm-type', true)];
+            __handlerMaxlength_decorators = [registerAttributeHandler('maxlength', true)];
+            __handleReadonly_decorators = [registerAttributeHandler('readonly', true)];
+            __handleType_decorators = [registerAttributeHandler('type', true)];
+            __handleSpellCheck_decorators = [registerAttributeHandler('ios-spell-check', true), registerAttributeHandler('spell-check', true)];
+            __esDecorate(this, null, __handleType_decorators, { kind: "method", name: "_handleType", static: false, private: false, access: { has: obj => "_handleType" in obj, get: obj => obj._handleType }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, __handlerConfirmType_decorators, { kind: "field", name: "_handlerConfirmType", static: false, private: false, access: { has: obj => "_handlerConfirmType" in obj, get: obj => obj._handlerConfirmType, set: (obj, value) => { obj._handlerConfirmType = value; } }, metadata: _metadata }, __handlerConfirmType_initializers, __handlerConfirmType_extraInitializers);
+            __esDecorate(null, null, __handlerMaxlength_decorators, { kind: "field", name: "_handlerMaxlength", static: false, private: false, access: { has: obj => "_handlerMaxlength" in obj, get: obj => obj._handlerMaxlength, set: (obj, value) => { obj._handlerMaxlength = value; } }, metadata: _metadata }, __handlerMaxlength_initializers, __handlerMaxlength_extraInitializers);
+            __esDecorate(null, null, __handleReadonly_decorators, { kind: "field", name: "_handleReadonly", static: false, private: false, access: { has: obj => "_handleReadonly" in obj, get: obj => obj._handleReadonly, set: (obj, value) => { obj._handleReadonly = value; } }, metadata: _metadata }, __handleReadonly_initializers, __handleReadonly_extraInitializers);
+            __esDecorate(null, null, __handleSpellCheck_decorators, { kind: "field", name: "_handleSpellCheck", static: false, private: false, access: { has: obj => "_handleSpellCheck" in obj, get: obj => obj._handleSpellCheck, set: (obj, value) => { obj._handleSpellCheck = value; } }, metadata: _metadata }, __handleSpellCheck_initializers, __handleSpellCheck_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [
+            'confirm-type',
+            'maxlength',
+            'readonly',
+            'type',
+            'ios-spell-check',
+            'spell-check',
+        ];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');
+        _handlerConfirmType = __runInitializers(this, __handlerConfirmType_initializers, bindToAttribute(this.#getInputElement, 'enterkeyhint', (val) => {
+            if (val === null)
+                return 'send';
+            return val;
+        }));
+        _handlerMaxlength = (__runInitializers(this, __handlerConfirmType_extraInitializers), __runInitializers(this, __handlerMaxlength_initializers, bindToAttribute(this.#getInputElement, 'maxlength', (val) => {
+            if (val === null)
+                return '140';
+            return val;
+        })));
+        _handleReadonly = (__runInitializers(this, __handlerMaxlength_extraInitializers), __runInitializers(this, __handleReadonly_initializers, bindToAttribute(this.#getInputElement, 'readonly', (value) => (value !== null ? '' : null))));
+        #setType = (__runInitializers(this, __handleReadonly_extraInitializers), bindToAttribute(this.#getInputElement, 'type'));
+        #setInputmode = bindToAttribute(this.#getInputElement, 'inputmode');
+        _handleType(value) {
+            const attributeValue = value;
+            // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+            let inputMode = 'text';
+            let inputType = 'text';
+            /**
+             * For number / digit type, if the user is typing "2.", the raw value is expected to remain "2." rather than being altered.
+             */
+            if (attributeValue === 'digit') {
+                inputMode = 'numeric';
+            }
+            else if (attributeValue === 'number') {
+                inputMode = 'decimal';
+            }
+            else if (attributeValue === 'email') {
+                inputMode = 'email';
+            }
+            else if (attributeValue === 'tel') {
+                inputMode = 'tel';
+            }
+            else {
+                inputType = attributeValue;
+            }
+            this.#setInputmode(inputMode);
+            this.#setType(inputType);
+        }
+        _handleSpellCheck = __runInitializers(this, __handleSpellCheck_initializers, bindToAttribute(this.#getInputElement, 'spellcheck', (value) => (value === null ? 'false' : 'true')));
+        constructor(dom) {
+            __runInitializers(this, __handleSpellCheck_extraInitializers);
+            this.#dom = dom;
+        }
+    };
+})();
+export { InputBaseAttributes };
+//# sourceMappingURL=InputBaseAttributes.js.map

package/dist/elements/XInput/Placeholder.d.ts

@@ -0,0 +1,11 @@
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
+export declare class Placeholder implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    _handlerPlaceholder: (this: void, newVal: string | null) => void;
+    _handlerPlaceholderColor: (this: void, newVal: string | null) => void;
+    _handlerPlaceholderFontFamily: (this: void, newVal: string | null) => void;
+    _handlerPlaceholderFontSize: (this: void, newVal: string | null) => void;
+    _handlerPlaceholderFontWeight: (this: void, newVal: string | null) => void;
+    constructor(dom: HTMLElement);
+}

package/dist/elements/XInput/Placeholder.js

@@ -0,0 +1,60 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { bindToAttribute, bindToStyle, genDomGetter, registerAttributeHandler, } from '../../element-reactive/index.js';
+let Placeholder = (() => {
+    let __handlerPlaceholder_decorators;
+    let __handlerPlaceholder_initializers = [];
+    let __handlerPlaceholder_extraInitializers = [];
+    let __handlerPlaceholderColor_decorators;
+    let __handlerPlaceholderColor_initializers = [];
+    let __handlerPlaceholderColor_extraInitializers = [];
+    let __handlerPlaceholderFontFamily_decorators;
+    let __handlerPlaceholderFontFamily_initializers = [];
+    let __handlerPlaceholderFontFamily_extraInitializers = [];
+    let __handlerPlaceholderFontSize_decorators;
+    let __handlerPlaceholderFontSize_initializers = [];
+    let __handlerPlaceholderFontSize_extraInitializers = [];
+    let __handlerPlaceholderFontWeight_decorators;
+    let __handlerPlaceholderFontWeight_initializers = [];
+    let __handlerPlaceholderFontWeight_extraInitializers = [];
+    return class Placeholder {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handlerPlaceholder_decorators = [registerAttributeHandler('placeholder', true)];
+            __handlerPlaceholderColor_decorators = [registerAttributeHandler('placeholder-color', true)];
+            __handlerPlaceholderFontFamily_decorators = [registerAttributeHandler('placeholder-font-family', true)];
+            __handlerPlaceholderFontSize_decorators = [registerAttributeHandler('placeholder-font-size', true)];
+            __handlerPlaceholderFontWeight_decorators = [registerAttributeHandler('placeholder-font-weight', true)];
+            __esDecorate(null, null, __handlerPlaceholder_decorators, { kind: "field", name: "_handlerPlaceholder", static: false, private: false, access: { has: obj => "_handlerPlaceholder" in obj, get: obj => obj._handlerPlaceholder, set: (obj, value) => { obj._handlerPlaceholder = value; } }, metadata: _metadata }, __handlerPlaceholder_initializers, __handlerPlaceholder_extraInitializers);
+            __esDecorate(null, null, __handlerPlaceholderColor_decorators, { kind: "field", name: "_handlerPlaceholderColor", static: false, private: false, access: { has: obj => "_handlerPlaceholderColor" in obj, get: obj => obj._handlerPlaceholderColor, set: (obj, value) => { obj._handlerPlaceholderColor = value; } }, metadata: _metadata }, __handlerPlaceholderColor_initializers, __handlerPlaceholderColor_extraInitializers);
+            __esDecorate(null, null, __handlerPlaceholderFontFamily_decorators, { kind: "field", name: "_handlerPlaceholderFontFamily", static: false, private: false, access: { has: obj => "_handlerPlaceholderFontFamily" in obj, get: obj => obj._handlerPlaceholderFontFamily, set: (obj, value) => { obj._handlerPlaceholderFontFamily = value; } }, metadata: _metadata }, __handlerPlaceholderFontFamily_initializers, __handlerPlaceholderFontFamily_extraInitializers);
+            __esDecorate(null, null, __handlerPlaceholderFontSize_decorators, { kind: "field", name: "_handlerPlaceholderFontSize", static: false, private: false, access: { has: obj => "_handlerPlaceholderFontSize" in obj, get: obj => obj._handlerPlaceholderFontSize, set: (obj, value) => { obj._handlerPlaceholderFontSize = value; } }, metadata: _metadata }, __handlerPlaceholderFontSize_initializers, __handlerPlaceholderFontSize_extraInitializers);
+            __esDecorate(null, null, __handlerPlaceholderFontWeight_decorators, { kind: "field", name: "_handlerPlaceholderFontWeight", static: false, private: false, access: { has: obj => "_handlerPlaceholderFontWeight" in obj, get: obj => obj._handlerPlaceholderFontWeight, set: (obj, value) => { obj._handlerPlaceholderFontWeight = value; } }, metadata: _metadata }, __handlerPlaceholderFontWeight_initializers, __handlerPlaceholderFontWeight_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [
+            'placeholder',
+            'placeholder-color',
+            'placeholder-font-family',
+            'placeholder-font-size',
+            'placeholder-font-weight',
+        ];
+        #dom;
+        #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');
+        _handlerPlaceholder = __runInitializers(this, __handlerPlaceholder_initializers, bindToAttribute(this.#getInputElement, 'placeholder'));
+        _handlerPlaceholderColor = (__runInitializers(this, __handlerPlaceholder_extraInitializers), __runInitializers(this, __handlerPlaceholderColor_initializers, bindToStyle(this.#getInputElement, '--placeholder-color', undefined, true)));
+        _handlerPlaceholderFontFamily = (__runInitializers(this, __handlerPlaceholderColor_extraInitializers), __runInitializers(this, __handlerPlaceholderFontFamily_initializers, bindToStyle(this.#getInputElement, '--placeholder-font-family', undefined, true)));
+        _handlerPlaceholderFontSize = (__runInitializers(this, __handlerPlaceholderFontFamily_extraInitializers), __runInitializers(this, __handlerPlaceholderFontSize_initializers, bindToStyle(this.#getInputElement, '--placeholder-font-size', undefined, true)));
+        _handlerPlaceholderFontWeight = (__runInitializers(this, __handlerPlaceholderFontSize_extraInitializers), __runInitializers(this, __handlerPlaceholderFontWeight_initializers, bindToStyle(this.#getInputElement, '--placeholder-font-weight', undefined, true)));
+        constructor(dom) {
+            __runInitializers(this, __handlerPlaceholderFontWeight_extraInitializers);
+            this.#dom = dom;
+        }
+    };
+})();
+export { Placeholder };
+//# sourceMappingURL=Placeholder.js.map

package/dist/{XInput → elements/XInput}/XInput.js

@@ -4,13 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '../../element-reactive/index.js';
 import { InputBaseAttributes } from './InputBaseAttributes.js';
 import { Placeholder } from './Placeholder.js';
 import { XInputAttribute } from './XInputAttribute.js';
 import { XInputEvents } from './XInputEvents.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
-import { templateXInput } from '@lynx-js/web-elements-template';
+import { templateXInput } from '../htmlTemplates.js';
 let XInput = (() => {
     let _classDecorators = [Component('x-input', [
             CommonEventsAndMethods,

package/dist/elements/XInput/XInputAttribute.d.ts

@@ -0,0 +1,12 @@
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
+/**
+ * shared by x-input and x-input-ng
+ */
+export declare class XInputAttribute implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    _handleValue(newValue: string | null): void;
+    _handleDisabled: (this: void, newVal: string | null) => void;
+    _handleAutocomplete: (this: void, newVal: string | null) => void;
+    constructor(dom: HTMLElement);
+}

package/dist/elements/XInput/XInputAttribute.js

@@ -0,0 +1,57 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { bindToAttribute, genDomGetter, registerAttributeHandler, } from '../../element-reactive/index.js';
+/**
+ * shared by x-input and x-input-ng
+ */
+let XInputAttribute = (() => {
+    let _instanceExtraInitializers = [];
+    let __handleValue_decorators;
+    let __handleDisabled_decorators;
+    let __handleDisabled_initializers = [];
+    let __handleDisabled_extraInitializers = [];
+    let __handleAutocomplete_decorators;
+    let __handleAutocomplete_initializers = [];
+    let __handleAutocomplete_extraInitializers = [];
+    return class XInputAttribute {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handleValue_decorators = [registerAttributeHandler('value', false)];
+            __handleDisabled_decorators = [registerAttributeHandler('disabled', true)];
+            __handleAutocomplete_decorators = [registerAttributeHandler('autocomplete', true)];
+            __esDecorate(this, null, __handleValue_decorators, { kind: "method", name: "_handleValue", static: false, private: false, access: { has: obj => "_handleValue" in obj, get: obj => obj._handleValue }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, __handleDisabled_decorators, { kind: "field", name: "_handleDisabled", static: false, private: false, access: { has: obj => "_handleDisabled" in obj, get: obj => obj._handleDisabled, set: (obj, value) => { obj._handleDisabled = value; } }, metadata: _metadata }, __handleDisabled_initializers, __handleDisabled_extraInitializers);
+            __esDecorate(null, null, __handleAutocomplete_decorators, { kind: "field", name: "_handleAutocomplete", static: false, private: false, access: { has: obj => "_handleAutocomplete" in obj, get: obj => obj._handleAutocomplete, set: (obj, value) => { obj._handleAutocomplete = value; } }, metadata: _metadata }, __handleAutocomplete_initializers, __handleAutocomplete_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['value', 'disabled', 'autocomplete'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');
+        _handleValue(newValue) {
+            if (newValue) {
+                const maxlength = parseFloat(this.#dom.getAttribute('maxlength') ?? '');
+                if (!isNaN(maxlength))
+                    newValue = newValue.substring(0, maxlength);
+            }
+            else {
+                newValue = '';
+            }
+            const input = this.#getInputElement();
+            if (input.value !== newValue) {
+                input.value = newValue;
+            }
+        }
+        _handleDisabled = __runInitializers(this, __handleDisabled_initializers, bindToAttribute(this.#getInputElement, 'disabled', (value) => (value !== null ? '' : null)));
+        _handleAutocomplete = (__runInitializers(this, __handleDisabled_extraInitializers), __runInitializers(this, __handleAutocomplete_initializers, bindToAttribute(this.#getInputElement, 'autocomplete')));
+        constructor(dom) {
+            __runInitializers(this, __handleAutocomplete_extraInitializers);
+            this.#dom = dom;
+        }
+    };
+})();
+export { XInputAttribute };
+//# sourceMappingURL=XInputAttribute.js.map

package/dist/elements/XInput/XInputEvents.d.ts

@@ -0,0 +1,9 @@
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
+export declare class XInputEvents implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    _handleEnableInputEvent(status: boolean | string | null): void;
+    _handleSendComposingInput(newVal: string | null): void;
+    _handleEnableSelectionEvent(status: boolean): void;
+    constructor(dom: HTMLElement);
+}

package/dist/{XInput → elements/XInput}/XInputEvents.js

@@ -1,51 +1,27 @@
-import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { __esDecorate, __runInitializers } from "tslib";
 /*
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { genDomGetter, registerAttributeHandler, } from '../../element-reactive/index.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import { renameEvent } from '../common/renameEvent.js';
-import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
+import { registerEventEnableStatusChangeHandler } from '../../element-reactive/index.js';
 let XInputEvents = (() => {
     let _instanceExtraInitializers = [];
-    let _private_handleEnableInputEvent_decorators;
-    let _private_handleEnableInputEvent_descriptor;
-    let _private_handleSendComposingInput_decorators;
-    let _private_handleSendComposingInput_descriptor;
-    let _private_handleEnableSelectionEvent_decorators;
-    let _private_handleEnableSelectionEvent_descriptor;
+    let __handleEnableInputEvent_decorators;
+    let __handleSendComposingInput_decorators;
+    let __handleEnableSelectionEvent_decorators;
     return class XInputEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleEnableInputEvent_decorators = [registerAttributeHandler('input-filter', true), registerEventEnableStatusChangeHandler('lynxinput')];
-            _private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
-            _private_handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
-            __esDecorate(this, _private_handleEnableInputEvent_descriptor = { value: __setFunctionName(function (status) {
-                    const input = this.#getInputElement();
-                    if (status) {
-                        input.addEventListener('input', this.#teleportInput, { passive: true });
-                        input.addEventListener('compositionend', this.#teleportCompositionendInput, { passive: true });
-                    }
-                    else {
-                        input.removeEventListener('input', this.#teleportInput);
-                        input.removeEventListener('compositionend', this.#teleportCompositionendInput);
-                    }
-                }, "#handleEnableInputEvent") }, _private_handleEnableInputEvent_decorators, { kind: "method", name: "#handleEnableInputEvent", static: false, private: true, access: { has: obj => #handleEnableInputEvent in obj, get: obj => obj.#handleEnableInputEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handleSendComposingInput_descriptor = { value: __setFunctionName(function (newVal) {
-                    this.#sendComposingInput = newVal !== null;
-                }, "#handleSendComposingInput") }, _private_handleSendComposingInput_decorators, { kind: "method", name: "#handleSendComposingInput", static: false, private: true, access: { has: obj => #handleSendComposingInput in obj, get: obj => obj.#handleSendComposingInput }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handleEnableSelectionEvent_descriptor = { value: __setFunctionName(function (status) {
-                    if (status) {
-                        this.#getInputElement().addEventListener('select', this.#selectEvent, {
-                            passive: true,
-                        });
-                    }
-                    else {
-                        this.#getInputElement().removeEventListener('select', this.#selectEvent);
-                    }
-                }, "#handleEnableSelectionEvent") }, _private_handleEnableSelectionEvent_decorators, { kind: "method", name: "#handleEnableSelectionEvent", static: false, private: true, access: { has: obj => #handleEnableSelectionEvent in obj, get: obj => obj.#handleEnableSelectionEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __handleEnableInputEvent_decorators = [registerAttributeHandler('input-filter', true), registerEventEnableStatusChangeHandler('lynxinput')];
+            __handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
+            __handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
+            __esDecorate(this, null, __handleEnableInputEvent_decorators, { kind: "method", name: "_handleEnableInputEvent", static: false, private: false, access: { has: obj => "_handleEnableInputEvent" in obj, get: obj => obj._handleEnableInputEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __handleSendComposingInput_decorators, { kind: "method", name: "_handleSendComposingInput", static: false, private: false, access: { has: obj => "_handleSendComposingInput" in obj, get: obj => obj._handleSendComposingInput }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __handleEnableSelectionEvent_decorators, { kind: "method", name: "_handleEnableSelectionEvent", static: false, private: false, access: { has: obj => "_handleEnableSelectionEvent" in obj, get: obj => obj._handleEnableSelectionEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static observedAttributes = ['send-composing-input', 'input-filter'];
@@ -53,8 +29,20 @@ let XInputEvents = (() => {
         #sendComposingInput = false;
         #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');
         #getFormElement = genDomGetter(() => this.#dom.shadowRoot, '#form');
-        get #handleEnableInputEvent() { return _private_handleEnableInputEvent_descriptor.value; }
-        get #handleSendComposingInput() { return _private_handleSendComposingInput_descriptor.value; }
+        _handleEnableInputEvent(status) {
+            const input = this.#getInputElement();
+            if (status) {
+                input.addEventListener('input', this.#teleportInput, { passive: true });
+                input.addEventListener('compositionend', this.#teleportCompositionendInput, { passive: true });
+            }
+            else {
+                input.removeEventListener('input', this.#teleportInput);
+                input.removeEventListener('compositionend', this.#teleportCompositionendInput);
+            }
+        }
+        _handleSendComposingInput(newVal) {
+            this.#sendComposingInput = newVal !== null;
+        }
         #teleportEvent = (event) => {
             const eventType = renameEvent[event.type] ?? event.type;
             this.#dom.dispatchEvent(new CustomEvent(eventType, {
@@ -112,7 +100,16 @@ let XInputEvents = (() => {
                 }));
             }
         };
-        get #handleEnableSelectionEvent() { return _private_handleEnableSelectionEvent_descriptor.value; }
+        _handleEnableSelectionEvent(status) {
+            if (status) {
+                this.#getInputElement().addEventListener('select', this.#selectEvent, {
+                    passive: true,
+                });
+            }
+            else {
+                this.#getInputElement().removeEventListener('select', this.#selectEvent);
+            }
+        }
         #selectEvent = () => {
             const input = this.#getInputElement();
             this.#dom.dispatchEvent(new CustomEvent('selection', {

package/dist/elements/XInput/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @module elements/XInput
+ *
+ * `x-input` provides a single-line input field.
+ *
+ * Attributes:
+ * - `value`: Input value.
+ * - `disabled`: 'true' | 'false'.
+ * - `readonly`: 'true' | 'false'.
+ * - `placeholder`: Placeholder text.
+ * - `maxlength`: Max character length (default 140).
+ * - `type`: 'text' | 'number' | 'digit' | 'password' | 'tel' | 'email'.
+ * - `confirm-type`: 'send' | 'search' | 'next' | 'go' | 'done'.
+ * - `input-filter`: Regex pattern to filter input.
+ * - `send-composing-input`: 'true' | 'false', send input event during composition.
+ * - `placeholder-color`: Color of the placeholder text.
+ * - `placeholder-font-weight`: Font weight of the placeholder.
+ * - `placeholder-font-size`: Font size of the placeholder.
+ * - `placeholder-font-family`: Font family of the placeholder.
+ *
+ * Events:
+ * - `input` (mapped to `lynxinput`): Fired on input.
+ * - `focus`: Fired on focus.
+ * - `blur`: Fired on blur.
+ * - `confirm` (submit): Fired on enter key.
+ *
+ * Methods:
+ * - `setValue({ value, index })`: Sets value and cursor.
+ * - `getValue()`: Returns value and selection.
+ * - `blur()`: Removes focus.
+ * - `focus()`: Sets focus.
+ * - `setSelectionRange({ selectionStart, selectionEnd })`: Sets selection.
+ */
+export { XInput } from './XInput.js';

package/dist/elements/XInput/index.js

@@ -0,0 +1,38 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+/**
+ * @module elements/XInput
+ *
+ * `x-input` provides a single-line input field.
+ *
+ * Attributes:
+ * - `value`: Input value.
+ * - `disabled`: 'true' | 'false'.
+ * - `readonly`: 'true' | 'false'.
+ * - `placeholder`: Placeholder text.
+ * - `maxlength`: Max character length (default 140).
+ * - `type`: 'text' | 'number' | 'digit' | 'password' | 'tel' | 'email'.
+ * - `confirm-type`: 'send' | 'search' | 'next' | 'go' | 'done'.
+ * - `input-filter`: Regex pattern to filter input.
+ * - `send-composing-input`: 'true' | 'false', send input event during composition.
+ * - `placeholder-color`: Color of the placeholder text.
+ * - `placeholder-font-weight`: Font weight of the placeholder.
+ * - `placeholder-font-size`: Font size of the placeholder.
+ * - `placeholder-font-family`: Font family of the placeholder.
+ *
+ * Events:
+ * - `input` (mapped to `lynxinput`): Fired on input.
+ * - `focus`: Fired on focus.
+ * - `blur`: Fired on blur.
+ * - `confirm` (submit): Fired on enter key.
+ *
+ * Methods:
+ * - `setValue({ value, index })`: Sets value and cursor.
+ * - `getValue()`: Returns value and selection.
+ * - `blur()`: Removes focus.
+ * - `focus()`: Sets focus.
+ * - `setSelectionRange({ selectionStart, selectionEnd })`: Sets selection.
+ */
+export { XInput } from './XInput.js';
+//# sourceMappingURL=index.js.map

package/dist/{XList → elements/XList}/ListItem.js

@@ -4,7 +4,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component } from '@lynx-js/web-elements-reactive';
+import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { ListItemAttributes } from './ListItemAttributes.js';
 let ListItem = (() => {

package/dist/{XList → elements/XList}/ListItemAttributes.d.ts

@@ -1,7 +1,8 @@
-import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 import type { ListItem } from './ListItem.js';
 export declare class ListItemAttributes implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
     static observedAttributes: string[];
+    _handlerEstimatedMainAxisSizePx: (this: void, newVal: string | null) => void;
     constructor(dom: ListItem);
 }