@lynx-js/web-elements 0.9.0 → 0.10.0

package/dist/{XText → elements/XText}/XTextTruncation.js

@@ -1,44 +1,24 @@
-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 { boostedQueueMicrotask, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { boostedQueueMicrotask, genDomGetter, registerAttributeHandler, } from '../../element-reactive/index.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
-import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
+import { registerEventEnableStatusChangeHandler } from '../../element-reactive/index.js';
 let XTextTruncation = (() => {
     var _a;
     let _instanceExtraInitializers = [];
-    let _private_handleAttributeChange_decorators;
-    let _private_handleAttributeChange_descriptor;
-    let _private_handleEnableLayoutEvent_decorators;
-    let _private_handleEnableLayoutEvent_descriptor;
+    let __handleAttributeChange_decorators;
+    let __handleEnableLayoutEvent_decorators;
     return class XTextTruncation {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleAttributeChange_decorators = [registerAttributeHandler('text-maxlength', true), registerAttributeHandler('text-maxline', true), registerAttributeHandler('tail-color-convert', true)];
-            _private_handleEnableLayoutEvent_decorators = [registerEventEnableStatusChangeHandler('layout')];
-            __esDecorate(this, _private_handleAttributeChange_descriptor = { value: __setFunctionName(function () {
-                    this.#maxLength = parseFloat(this.#dom.getAttribute('text-maxlength') ?? '');
-                    this.#maxLine = parseFloat(this.#dom.getAttribute('text-maxline') ?? '');
-                    this.#tailColorConvert =
-                        this.#dom.getAttribute('tail-color-convert') !== 'false';
-                    if (this.#maxLength < 0)
-                        this.#maxLength = NaN;
-                    if (this.#maxLine < 1)
-                        this.#maxLine = NaN;
-                    if (!isNaN(this.#maxLine)) {
-                        this.#getInnerBox().style.webkitLineClamp = this.#maxLine.toString();
-                    }
-                    else {
-                        this.#getInnerBox().style.removeProperty('-webkit-line-clamp');
-                    }
-                    this.#layoutText();
-                }, "#handleAttributeChange") }, _private_handleAttributeChange_decorators, { kind: "method", name: "#handleAttributeChange", static: false, private: true, access: { has: obj => #handleAttributeChange in obj, get: obj => obj.#handleAttributeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handleEnableLayoutEvent_descriptor = { value: __setFunctionName(function (status) {
-                    this.#enableLayoutEvent = status;
-                }, "#handleEnableLayoutEvent") }, _private_handleEnableLayoutEvent_decorators, { kind: "method", name: "#handleEnableLayoutEvent", static: false, private: true, access: { has: obj => #handleEnableLayoutEvent in obj, get: obj => obj.#handleEnableLayoutEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __handleAttributeChange_decorators = [registerAttributeHandler('text-maxlength', true), registerAttributeHandler('text-maxline', true), registerAttributeHandler('tail-color-convert', true)];
+            __handleEnableLayoutEvent_decorators = [registerEventEnableStatusChangeHandler('layout')];
+            __esDecorate(this, null, __handleAttributeChange_decorators, { kind: "method", name: "_handleAttributeChange", static: false, private: false, access: { has: obj => "_handleAttributeChange" in obj, get: obj => obj._handleAttributeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __handleEnableLayoutEvent_decorators, { kind: "method", name: "_handleEnableLayoutEvent", static: false, private: false, access: { has: obj => "_handleEnableLayoutEvent" in obj, get: obj => obj._handleEnableLayoutEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static exceedMathLengthAttribute = 'x-text-clipped';
@@ -280,8 +260,26 @@ let XTextTruncation = (() => {
             this.#resizeObserver?.disconnect();
             this.#resizeObserver = undefined;
         }
-        get #handleAttributeChange() { return _private_handleAttributeChange_descriptor.value; }
-        get #handleEnableLayoutEvent() { return _private_handleEnableLayoutEvent_descriptor.value; }
+        _handleAttributeChange() {
+            this.#maxLength = parseFloat(this.#dom.getAttribute('text-maxlength') ?? '');
+            this.#maxLine = parseFloat(this.#dom.getAttribute('text-maxline') ?? '');
+            this.#tailColorConvert =
+                this.#dom.getAttribute('tail-color-convert') !== 'false';
+            if (this.#maxLength < 0)
+                this.#maxLength = NaN;
+            if (this.#maxLine < 1)
+                this.#maxLine = NaN;
+            if (!isNaN(this.#maxLine)) {
+                this.#getInnerBox().style.webkitLineClamp = this.#maxLine.toString();
+            }
+            else {
+                this.#getInnerBox().style.removeProperty('-webkit-line-clamp');
+            }
+            this.#layoutText();
+        }
+        _handleEnableLayoutEvent(status) {
+            this.#enableLayoutEvent = status;
+        }
         #sendLayoutEvent(truncateAt) {
             if (!this.#enableLayoutEvent)
                 return;
@@ -336,8 +334,8 @@ let XTextTruncation = (() => {
         }
         connectedCallback() {
             this.#componentConnected = true;
-            this.#handleEnableLayoutEvent(this.#enableLayoutEvent);
-            this.#handleAttributeChange();
+            this._handleEnableLayoutEvent(this.#enableLayoutEvent);
+            this._handleAttributeChange();
             boostedQueueMicrotask(() => {
                 this.#sendLayoutEvent();
             });

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

@@ -0,0 +1,21 @@
+export { InlineImage } from './InlineImage.js';
+export { InlineText } from './InlineText.js';
+export { InlineTruncation } from './InlineTruncation.js';
+export { RawText } from './RawText.js';
+/**
+ * @module elements/XText
+ *
+ * `x-text` displays text content, supporting truncation and rich text.
+ *
+ * Attributes:
+ * - `text-maxlength`: Max characters to show.
+ * - `text-maxline`: Max lines to show (ellipsis).
+ * - `tail-color-convert`: 'true' | 'false', whether to apply color to truncation ellipsis.
+ *
+ * Events:
+ * - `layout`: Fired when text layout happens (if enabled). Detail provides line info.
+ *
+ * CSS Variables:
+ * - `--lynx-text-bg-color`: Inherited background color for nested text elements.
+ */
+export { XText } from './XText.js';

package/dist/elements/XText/index.js

@@ -0,0 +1,25 @@
+// 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 { InlineImage } from './InlineImage.js';
+export { InlineText } from './InlineText.js';
+export { InlineTruncation } from './InlineTruncation.js';
+export { RawText } from './RawText.js';
+/**
+ * @module elements/XText
+ *
+ * `x-text` displays text content, supporting truncation and rich text.
+ *
+ * Attributes:
+ * - `text-maxlength`: Max characters to show.
+ * - `text-maxline`: Max lines to show (ellipsis).
+ * - `tail-color-convert`: 'true' | 'false', whether to apply color to truncation ellipsis.
+ *
+ * Events:
+ * - `layout`: Fired when text layout happens (if enabled). Detail provides line info.
+ *
+ * CSS Variables:
+ * - `--lynx-text-bg-color`: Inherited background color for nested text elements.
+ */
+export { XText } from './XText.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,12 @@
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
+import { XTextarea } from './XTextarea.js';
+export declare class Placeholder implements InstanceType<AttributeReactiveClass<typeof XTextarea>> {
+    #private;
+    static observedAttributes: readonly ["placeholder", "placeholder-color", "placeholder-font-size", "placeholder-font-weight", "placeholder-font-family"];
+    _updatePlaceholderColor: (this: void, newVal: string | null) => void;
+    _updatePlaceholderFontSize: (this: void, newVal: string | null) => void;
+    _updatePlaceholderFontWeight: (this: void, newVal: string | null) => void;
+    _updatePlaceholderFontFamily: (this: void, newVal: string | null) => void;
+    _handlePlaceholder: (this: void, newVal: string | null) => void;
+    constructor(dom: HTMLElement);
+}

package/dist/elements/XTextarea/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';
+import { XTextarea } from './XTextarea.js';
+let Placeholder = (() => {
+    let __updatePlaceholderColor_decorators;
+    let __updatePlaceholderColor_initializers = [];
+    let __updatePlaceholderColor_extraInitializers = [];
+    let __updatePlaceholderFontSize_decorators;
+    let __updatePlaceholderFontSize_initializers = [];
+    let __updatePlaceholderFontSize_extraInitializers = [];
+    let __updatePlaceholderFontWeight_decorators;
+    let __updatePlaceholderFontWeight_initializers = [];
+    let __updatePlaceholderFontWeight_extraInitializers = [];
+    let __updatePlaceholderFontFamily_decorators;
+    let __updatePlaceholderFontFamily_initializers = [];
+    let __updatePlaceholderFontFamily_extraInitializers = [];
+    let __handlePlaceholder_decorators;
+    let __handlePlaceholder_initializers = [];
+    let __handlePlaceholder_extraInitializers = [];
+    return class Placeholder {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __updatePlaceholderColor_decorators = [registerAttributeHandler('placeholder-color', true)];
+            __updatePlaceholderFontSize_decorators = [registerAttributeHandler('placeholder-font-size', true)];
+            __updatePlaceholderFontWeight_decorators = [registerAttributeHandler('placeholder-font-weight', true)];
+            __updatePlaceholderFontFamily_decorators = [registerAttributeHandler('placeholder-font-family', true)];
+            __handlePlaceholder_decorators = [registerAttributeHandler('placeholder', true)];
+            __esDecorate(null, null, __updatePlaceholderColor_decorators, { kind: "field", name: "_updatePlaceholderColor", static: false, private: false, access: { has: obj => "_updatePlaceholderColor" in obj, get: obj => obj._updatePlaceholderColor, set: (obj, value) => { obj._updatePlaceholderColor = value; } }, metadata: _metadata }, __updatePlaceholderColor_initializers, __updatePlaceholderColor_extraInitializers);
+            __esDecorate(null, null, __updatePlaceholderFontSize_decorators, { kind: "field", name: "_updatePlaceholderFontSize", static: false, private: false, access: { has: obj => "_updatePlaceholderFontSize" in obj, get: obj => obj._updatePlaceholderFontSize, set: (obj, value) => { obj._updatePlaceholderFontSize = value; } }, metadata: _metadata }, __updatePlaceholderFontSize_initializers, __updatePlaceholderFontSize_extraInitializers);
+            __esDecorate(null, null, __updatePlaceholderFontWeight_decorators, { kind: "field", name: "_updatePlaceholderFontWeight", static: false, private: false, access: { has: obj => "_updatePlaceholderFontWeight" in obj, get: obj => obj._updatePlaceholderFontWeight, set: (obj, value) => { obj._updatePlaceholderFontWeight = value; } }, metadata: _metadata }, __updatePlaceholderFontWeight_initializers, __updatePlaceholderFontWeight_extraInitializers);
+            __esDecorate(null, null, __updatePlaceholderFontFamily_decorators, { kind: "field", name: "_updatePlaceholderFontFamily", static: false, private: false, access: { has: obj => "_updatePlaceholderFontFamily" in obj, get: obj => obj._updatePlaceholderFontFamily, set: (obj, value) => { obj._updatePlaceholderFontFamily = value; } }, metadata: _metadata }, __updatePlaceholderFontFamily_initializers, __updatePlaceholderFontFamily_extraInitializers);
+            __esDecorate(null, null, __handlePlaceholder_decorators, { kind: "field", name: "_handlePlaceholder", static: false, private: false, access: { has: obj => "_handlePlaceholder" in obj, get: obj => obj._handlePlaceholder, set: (obj, value) => { obj._handlePlaceholder = value; } }, metadata: _metadata }, __handlePlaceholder_initializers, __handlePlaceholder_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [
+            'placeholder',
+            'placeholder-color',
+            'placeholder-font-size',
+            'placeholder-font-weight',
+            'placeholder-font-family',
+        ];
+        #getTextarea = genDomGetter(() => this.#dom.shadowRoot, '#textarea');
+        _updatePlaceholderColor = __runInitializers(this, __updatePlaceholderColor_initializers, bindToStyle(this.#getTextarea, '--placeholder-color', undefined, true));
+        _updatePlaceholderFontSize = (__runInitializers(this, __updatePlaceholderColor_extraInitializers), __runInitializers(this, __updatePlaceholderFontSize_initializers, bindToStyle(this.#getTextarea, '--placeholder-font-size', undefined, true)));
+        _updatePlaceholderFontWeight = (__runInitializers(this, __updatePlaceholderFontSize_extraInitializers), __runInitializers(this, __updatePlaceholderFontWeight_initializers, bindToStyle(this.#getTextarea, '--placeholder-font-weight', undefined, true)));
+        _updatePlaceholderFontFamily = (__runInitializers(this, __updatePlaceholderFontWeight_extraInitializers), __runInitializers(this, __updatePlaceholderFontFamily_initializers, bindToStyle(this.#getTextarea, '--placeholder-font-family', undefined, true)));
+        _handlePlaceholder = (__runInitializers(this, __updatePlaceholderFontFamily_extraInitializers), __runInitializers(this, __handlePlaceholder_initializers, bindToAttribute(this.#getTextarea, 'placeholder')));
+        #dom = __runInitializers(this, __handlePlaceholder_extraInitializers);
+        constructor(dom) {
+            this.#dom = dom;
+        }
+    };
+})();
+export { Placeholder };
+//# sourceMappingURL=Placeholder.js.map

package/dist/elements/XTextarea/TextareaBaseAttributes.d.ts

@@ -0,0 +1,11 @@
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
+export declare class TextareaBaseAttributes 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;
+    _handleSpellCheck: (this: void, newVal: string | null) => void;
+    _handleShowSoftInputOnfocus: (this: void, newVal: string | null) => void;
+    constructor(dom: HTMLElement);
+}

package/dist/elements/XTextarea/TextareaBaseAttributes.js

@@ -0,0 +1,70 @@
+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';
+let TextareaBaseAttributes = (() => {
+    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 __handleSpellCheck_decorators;
+    let __handleSpellCheck_initializers = [];
+    let __handleSpellCheck_extraInitializers = [];
+    let __handleShowSoftInputOnfocus_decorators;
+    let __handleShowSoftInputOnfocus_initializers = [];
+    let __handleShowSoftInputOnfocus_extraInitializers = [];
+    return class TextareaBaseAttributes {
+        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)];
+            __handleSpellCheck_decorators = [registerAttributeHandler('ios-spell-check', true)];
+            __handleShowSoftInputOnfocus_decorators = [registerAttributeHandler('show-soft-input-onfocus', true)];
+            __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);
+            __esDecorate(null, null, __handleShowSoftInputOnfocus_decorators, { kind: "field", name: "_handleShowSoftInputOnfocus", static: false, private: false, access: { has: obj => "_handleShowSoftInputOnfocus" in obj, get: obj => obj._handleShowSoftInputOnfocus, set: (obj, value) => { obj._handleShowSoftInputOnfocus = value; } }, metadata: _metadata }, __handleShowSoftInputOnfocus_initializers, __handleShowSoftInputOnfocus_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',
+            'show-soft-input-onfocus',
+        ];
+        #dom;
+        #getTextareaElement = genDomGetter(() => this.#dom.shadowRoot, '#textarea');
+        _handlerConfirmType = __runInitializers(this, __handlerConfirmType_initializers, bindToAttribute(this.#getTextareaElement, 'enterkeyhint', (val) => {
+            if (val === null)
+                return 'send';
+            return val;
+        }));
+        _handlerMaxlength = (__runInitializers(this, __handlerConfirmType_extraInitializers), __runInitializers(this, __handlerMaxlength_initializers, bindToAttribute(this.#getTextareaElement, 'maxlength', (val) => {
+            if (val === null)
+                return '140';
+            return val;
+        })));
+        _handleReadonly = (__runInitializers(this, __handlerMaxlength_extraInitializers), __runInitializers(this, __handleReadonly_initializers, bindToAttribute(this.#getTextareaElement, 'readonly', (value) => (value !== null ? '' : null))));
+        _handleSpellCheck = (__runInitializers(this, __handleReadonly_extraInitializers), __runInitializers(this, __handleSpellCheck_initializers, bindToAttribute(this.#getTextareaElement, 'spellcheck', (value) => (value === null ? 'false' : 'true'))));
+        _handleShowSoftInputOnfocus = (__runInitializers(this, __handleSpellCheck_extraInitializers), __runInitializers(this, __handleShowSoftInputOnfocus_initializers, bindToAttribute(this.#getTextareaElement, 'virtualkeyboardpolicy', (value) => (value === null ? 'manual' : 'auto'))));
+        constructor(dom) {
+            __runInitializers(this, __handleShowSoftInputOnfocus_extraInitializers);
+            this.#dom = dom;
+        }
+    };
+})();
+export { TextareaBaseAttributes };
+//# sourceMappingURL=TextareaBaseAttributes.js.map

package/dist/{XTextarea → elements/XTextarea}/XTextarea.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 { Placeholder } from './Placeholder.js';
 import { TextareaBaseAttributes } from './TextareaBaseAttributes.js';
 import { XTextareaAttributes } from './XTextareaAttributes.js';
 import { XTextareaEvents } from './XTextareaEvents.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
-import { templateXTextarea } from '@lynx-js/web-elements-template';
+import { templateXTextarea } from '../htmlTemplates.js';
 // x-textarea
 let XTextarea = (() => {
     let _classDecorators = [Component('x-textarea', [

package/dist/elements/XTextarea/XTextareaAttributes.d.ts

@@ -0,0 +1,11 @@
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
+export declare class XTextareaAttributes implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    _handleConfirmEnter(newVal: string | null): void;
+    _handleDisabled: (this: void, newVal: string | null) => void;
+    _handleMaxHeight: (this: void, newVal: string | null) => void;
+    _handleMinHeight: (this: void, newVal: string | null) => void;
+    _handleValue(newValue: string | null): void;
+    constructor(dom: HTMLElement);
+}

package/dist/elements/XTextarea/XTextareaAttributes.js

@@ -0,0 +1,79 @@
+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, bindToStyle, } from '../../element-reactive/index.js';
+let XTextareaAttributes = (() => {
+    let _instanceExtraInitializers = [];
+    let __handleConfirmEnter_decorators;
+    let __handleDisabled_decorators;
+    let __handleDisabled_initializers = [];
+    let __handleDisabled_extraInitializers = [];
+    let __handleMaxHeight_decorators;
+    let __handleMaxHeight_initializers = [];
+    let __handleMaxHeight_extraInitializers = [];
+    let __handleMinHeight_decorators;
+    let __handleMinHeight_initializers = [];
+    let __handleMinHeight_extraInitializers = [];
+    let __handleValue_decorators;
+    return class XTextareaAttributes {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handleConfirmEnter_decorators = [registerAttributeHandler('confirm-enter', true)];
+            __handleDisabled_decorators = [registerAttributeHandler('disabled', true)];
+            __handleMaxHeight_decorators = [registerAttributeHandler('max-height', true)];
+            __handleMinHeight_decorators = [registerAttributeHandler('min-height', true)];
+            __handleValue_decorators = [registerAttributeHandler('value', false)];
+            __esDecorate(this, null, __handleConfirmEnter_decorators, { kind: "method", name: "_handleConfirmEnter", static: false, private: false, access: { has: obj => "_handleConfirmEnter" in obj, get: obj => obj._handleConfirmEnter }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __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, __handleMaxHeight_decorators, { kind: "field", name: "_handleMaxHeight", static: false, private: false, access: { has: obj => "_handleMaxHeight" in obj, get: obj => obj._handleMaxHeight, set: (obj, value) => { obj._handleMaxHeight = value; } }, metadata: _metadata }, __handleMaxHeight_initializers, __handleMaxHeight_extraInitializers);
+            __esDecorate(null, null, __handleMinHeight_decorators, { kind: "field", name: "_handleMinHeight", static: false, private: false, access: { has: obj => "_handleMinHeight" in obj, get: obj => obj._handleMinHeight, set: (obj, value) => { obj._handleMinHeight = value; } }, metadata: _metadata }, __handleMinHeight_initializers, __handleMinHeight_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [
+            'confirm-enter',
+            'disabled',
+            'max-height',
+            'min-height',
+            'value',
+        ];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #getTextareaElement = genDomGetter(() => this.#dom.shadowRoot, '#textarea');
+        #getFormElement = genDomGetter(() => this.#dom.shadowRoot, '#form');
+        #confirmEnter = false;
+        _handleConfirmEnter(newVal) {
+            this.#confirmEnter = newVal !== null;
+        }
+        _handleDisabled = __runInitializers(this, __handleDisabled_initializers, bindToAttribute(this.#getTextareaElement, 'disabled', (value) => (value !== null ? '' : null)));
+        _handleMaxHeight = (__runInitializers(this, __handleDisabled_extraInitializers), __runInitializers(this, __handleMaxHeight_initializers, bindToStyle(this.#getTextareaElement, 'max-height')));
+        _handleMinHeight = (__runInitializers(this, __handleMaxHeight_extraInitializers), __runInitializers(this, __handleMinHeight_initializers, bindToStyle(this.#getTextareaElement, 'min-height')));
+        _handleValue(newValue) {
+            if (newValue) {
+                const maxlength = parseFloat(this.#dom.getAttribute('maxlength') ?? '');
+                if (!isNaN(maxlength))
+                    newValue = newValue.substring(0, maxlength);
+            }
+            else {
+                newValue = '';
+            }
+            const textarea = this.#getTextareaElement();
+            if (textarea.value !== newValue) {
+                textarea.value = newValue;
+            }
+        }
+        #handleKeyEvent = (__runInitializers(this, __handleMinHeight_extraInitializers), (event) => {
+            if (this.#confirmEnter && event.key === 'Enter') {
+                this.#getFormElement().dispatchEvent(new SubmitEvent('submit'));
+            }
+        });
+        constructor(dom) {
+            this.#dom = dom;
+            this.#getTextareaElement().addEventListener('keyup', this.#handleKeyEvent);
+        }
+    };
+})();
+export { XTextareaAttributes };
+//# sourceMappingURL=XTextareaAttributes.js.map

package/dist/elements/XTextarea/XTextareaEvents.d.ts

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

package/dist/{XTextarea → elements/XTextarea}/XTextareaEvents.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 XTextareaEvents = (() => {
     let _instanceExtraInitializers = [];
-    let _private_handleEnableConfirmEvent_decorators;
-    let _private_handleEnableConfirmEvent_descriptor;
-    let _private_handleSendComposingInput_decorators;
-    let _private_handleSendComposingInput_descriptor;
-    let _private_handleEnableSelectionEvent_decorators;
-    let _private_handleEnableSelectionEvent_descriptor;
+    let __handleEnableConfirmEvent_decorators;
+    let __handleSendComposingInput_decorators;
+    let __handleEnableSelectionEvent_decorators;
     return class XTextareaEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleEnableConfirmEvent_decorators = [registerAttributeHandler('input-filter', true), registerEventEnableStatusChangeHandler('lynxinput')];
-            _private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
-            _private_handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
-            __esDecorate(this, _private_handleEnableConfirmEvent_descriptor = { value: __setFunctionName(function (status) {
-                    const textareaElement = this.#getTextareaElement();
-                    if (status) {
-                        textareaElement.addEventListener('input', this.#teleportInput, { passive: true });
-                        textareaElement.addEventListener('compositionend', this.#teleportCompositionendInput, { passive: true });
-                    }
-                    else {
-                        textareaElement.removeEventListener('input', this.#teleportInput);
-                        textareaElement.removeEventListener('compositionend', this.#teleportCompositionendInput);
-                    }
-                }, "#handleEnableConfirmEvent") }, _private_handleEnableConfirmEvent_decorators, { kind: "method", name: "#handleEnableConfirmEvent", static: false, private: true, access: { has: obj => #handleEnableConfirmEvent in obj, get: obj => obj.#handleEnableConfirmEvent }, 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.#getTextareaElement().addEventListener('select', this.#selectEvent, {
-                            passive: true,
-                        });
-                    }
-                    else {
-                        this.#getTextareaElement().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);
+            __handleEnableConfirmEvent_decorators = [registerAttributeHandler('input-filter', true), registerEventEnableStatusChangeHandler('lynxinput')];
+            __handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
+            __handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
+            __esDecorate(this, null, __handleEnableConfirmEvent_decorators, { kind: "method", name: "_handleEnableConfirmEvent", static: false, private: false, access: { has: obj => "_handleEnableConfirmEvent" in obj, get: obj => obj._handleEnableConfirmEvent }, 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 XTextareaEvents = (() => {
         #sendComposingInput = false;
         #getTextareaElement = genDomGetter(() => this.#dom.shadowRoot, '#textarea');
         #getFormElement = genDomGetter(() => this.#dom.shadowRoot, '#form');
-        get #handleEnableConfirmEvent() { return _private_handleEnableConfirmEvent_descriptor.value; }
-        get #handleSendComposingInput() { return _private_handleSendComposingInput_descriptor.value; }
+        _handleEnableConfirmEvent(status) {
+            const textareaElement = this.#getTextareaElement();
+            if (status) {
+                textareaElement.addEventListener('input', this.#teleportInput, { passive: true });
+                textareaElement.addEventListener('compositionend', this.#teleportCompositionendInput, { passive: true });
+            }
+            else {
+                textareaElement.removeEventListener('input', this.#teleportInput);
+                textareaElement.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 XTextareaEvents = (() => {
                 }));
             }
         };
-        get #handleEnableSelectionEvent() { return _private_handleEnableSelectionEvent_descriptor.value; }
+        _handleEnableSelectionEvent(status) {
+            if (status) {
+                this.#getTextareaElement().addEventListener('select', this.#selectEvent, {
+                    passive: true,
+                });
+            }
+            else {
+                this.#getTextareaElement().removeEventListener('select', this.#selectEvent);
+            }
+        }
         #selectEvent = () => {
             const input = this.#getTextareaElement();
             this.#dom.dispatchEvent(new CustomEvent('selection', {

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

@@ -0,0 +1,35 @@
+/**
+ * @module elements/XTextarea
+ *
+ * `x-textarea` provides a multi-line input field.
+ *
+ * Attributes:
+ * - `value`: Input value.
+ * - `disabled`: 'true' | 'false'.
+ * - `placeholder`: Placeholder text.
+ * - `maxlength`: Max character length (default 140).
+ * - `auto-height`: 'true' | 'false', auto resize height.
+ * - `confirm-type`: 'send' | 'search' | 'next' | 'go' | 'done'.
+ * - `confirm-enter`: 'true' | 'false', trigger confirm event on enter.
+ * - `max-height`: Max height style.
+ * - `min-height`: Min height style.
+ * - `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`: Fired on input.
+ * - `focus`: Fired on focus.
+ * - `blur`: Fired on blur.
+ * - `confirm`: Fired on confirm/enter.
+ * - `linechange`: Fired when line count changes.
+ *
+ * Methods:
+ * - `addText({ text })`: Inserts text.
+ * - `setValue({ value, index })`: Sets value and cursor.
+ * - `getValue()`: Returns value and selection.
+ * - `select()`: Selects all text.
+ * - `setSelectionRange({ selectionStart, selectionEnd })`: Sets selection.
+ */
+export { XTextarea } from './XTextarea.js';

package/dist/elements/XTextarea/index.js

@@ -0,0 +1,39 @@
+// 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/XTextarea
+ *
+ * `x-textarea` provides a multi-line input field.
+ *
+ * Attributes:
+ * - `value`: Input value.
+ * - `disabled`: 'true' | 'false'.
+ * - `placeholder`: Placeholder text.
+ * - `maxlength`: Max character length (default 140).
+ * - `auto-height`: 'true' | 'false', auto resize height.
+ * - `confirm-type`: 'send' | 'search' | 'next' | 'go' | 'done'.
+ * - `confirm-enter`: 'true' | 'false', trigger confirm event on enter.
+ * - `max-height`: Max height style.
+ * - `min-height`: Min height style.
+ * - `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`: Fired on input.
+ * - `focus`: Fired on focus.
+ * - `blur`: Fired on blur.
+ * - `confirm`: Fired on confirm/enter.
+ * - `linechange`: Fired when line count changes.
+ *
+ * Methods:
+ * - `addText({ text })`: Inserts text.
+ * - `setValue({ value, index })`: Sets value and cursor.
+ * - `getValue()`: Returns value and selection.
+ * - `select()`: Selects all text.
+ * - `setSelectionRange({ selectionStart, selectionEnd })`: Sets selection.
+ */
+export { XTextarea } from './XTextarea.js';
+//# sourceMappingURL=index.js.map

package/dist/{XView → elements/XView}/BlurRadius.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 { XBlurView } from './XBlurView.js';
 export declare class BlurRadius implements InstanceType<AttributeReactiveClass<typeof XBlurView>> {
     #private;
     static observedAttributes: string[];
+    _handleBlurRadius(newVal: string | null): void;
     constructor(dom: HTMLElement);
 }