@lynx-js/web-elements 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @lynx-js/web-elements
 
+## 0.5.0
+
+### Minor Changes
+
+- feat: 1. list adds support for the `sticky` attribute. Now sticky-offset, sticky-top, and sticky-bottom will only take effect when `sticky` is `true`. ([#257](https://github.com/lynx-family/lynx-stack/pull/257))
+
+  2. Added support for `list-main-axis-gap`, `list-cross-axis-gap`.
+
+- feat(web): The list element supports list-type with **flow**. ([#240](https://github.com/lynx-family/lynx-stack/pull/240))
+
+  It supports all attributes and events under single, and also provides `full-span`.
+
+  For detailed usage, please refer to the official website.
+
+## 0.4.0
+
+### Minor Changes
+
+- refactor: remove web-elements/lazy and loadNewTag ([#123](https://github.com/lynx-family/lynx-stack/pull/123))
+
+  - remove @lynx-js/web-elements/lazy
+  - remove loadElement
+  - remove loadNewTag callback
+
+  **This is a breaking change**
+
+  Now we removed the default lazy loading preinstalled in web-core
+
+  Please add the following statement in your web project
+
+  ```
+  import "@lynx-js/web-elements/all";
+  ```
+
+### Patch Changes
+
+- feat: never require the x-enable-xx-event attributes ([#157](https://github.com/lynx-family/lynx-stack/pull/157))
+
+  After this commit, we do not need user to add `x-enable-xx-event` to enable corresponding events
+
+- feat: add support for `<lynx-view/>` with shadowroot ([#198](https://github.com/lynx-family/lynx-stack/pull/198))
+
+  add a minor logic in `<x-overlay-ng>` to be compatiable with the <lynx-view> with a shadowroot
+
+- Updated dependencies [[`4c2ee65`](https://github.com/lynx-family/lynx-stack/commit/4c2ee65368eb4b39722ed36305101fe89a782b1a)]:
+  - @lynx-js/web-elements-reactive@0.2.0
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/ScrollView/ScrollViewEvents.js

@@ -1,4 +1,4 @@
-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
@@ -8,59 +8,49 @@ import { bindToStyle, genDomGetter, registerAttributeHandler, } from '@lynx-js/w
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import { bindToIntersectionObserver } from '../common/bindToIntersectionObserver.js';
 import { useScrollEnd } from '../common/constants.js';
+import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 let ScrollViewEvents = (() => {
-    let _instanceExtraInitializers = [];
-    let _private_updateUpperIntersectionObserver_decorators;
-    let _private_updateUpperIntersectionObserver_initializers = [];
-    let _private_updateUpperIntersectionObserver_extraInitializers = [];
-    let _private_updateLowerIntersectionObserver_decorators;
-    let _private_updateLowerIntersectionObserver_initializers = [];
-    let _private_updateLowerIntersectionObserver_extraInitializers = [];
+    let _private_handleScrollUpperThresholdEventEnabled_decorators;
+    let _private_handleScrollUpperThresholdEventEnabled_initializers = [];
+    let _private_handleScrollUpperThresholdEventEnabled_extraInitializers = [];
+    let _private_handleScrollLowerThresholdEventEnabled_decorators;
+    let _private_handleScrollLowerThresholdEventEnabled_initializers = [];
+    let _private_handleScrollLowerThresholdEventEnabled_extraInitializers = [];
     let _private_updateUpperThreshold_decorators;
     let _private_updateUpperThreshold_initializers = [];
     let _private_updateUpperThreshold_extraInitializers = [];
     let _private_updateLowerThreshold_decorators;
     let _private_updateLowerThreshold_initializers = [];
     let _private_updateLowerThreshold_extraInitializers = [];
-    let _private_handleScrollEventsSwitches_decorators;
-    let _private_handleScrollEventsSwitches_descriptor;
+    let _private_handleScrollEventEnabled_decorators;
+    let _private_handleScrollEventEnabled_initializers = [];
+    let _private_handleScrollEventEnabled_extraInitializers = [];
+    let _private_handleScrollEndEventEnabled_decorators;
+    let _private_handleScrollEndEventEnabled_initializers = [];
+    let _private_handleScrollEndEventEnabled_extraInitializers = [];
     return class ScrollViewEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_updateUpperIntersectionObserver_decorators = [registerAttributeHandler('x-enable-scrolltoupper-event', true)];
-            _private_updateLowerIntersectionObserver_decorators = [registerAttributeHandler('x-enable-scrolltolower-event', true)];
+            _private_handleScrollUpperThresholdEventEnabled_decorators = [registerEventEnableStatusChangeHandler('scrolltoupper')];
+            _private_handleScrollLowerThresholdEventEnabled_decorators = [registerEventEnableStatusChangeHandler('scrolltolower')];
             _private_updateUpperThreshold_decorators = [registerAttributeHandler('upper-threshold', true)];
             _private_updateLowerThreshold_decorators = [registerAttributeHandler('lower-threshold', true)];
-            _private_handleScrollEventsSwitches_decorators = [registerAttributeHandler('x-enable-scroll-event', true), registerAttributeHandler('x-enable-scrollend-event', true)];
-            __esDecorate(this, _private_handleScrollEventsSwitches_descriptor = { value: __setFunctionName(function () {
-                    const scroll = this.#dom.getAttribute('x-enable-scroll-event');
-                    this.#enableScrollEnd =
-                        this.#dom.getAttribute('x-enable-scrollend-event') !== null;
-                    if (scroll !== null || this.#enableScrollEnd) {
-                        this.#getScrollContainer().addEventListener('scroll', this.#handleScroll);
-                        this.#getScrollContainer().addEventListener('scrollend', this.#handleScrollEnd);
-                        this.#dom.addEventListener('scroll', this.#handleScroll);
-                        this.#dom.addEventListener('scrollend', this.#handleScrollEnd);
-                        this.#prevX = 0;
-                        this.#prevY = 0;
-                    }
-                    else {
-                        this.#dom.removeEventListener('scroll', this.#handleScroll);
-                        this.#dom.removeEventListener('scrollend', this.#handleScrollEnd);
-                    }
-                }, "#handleScrollEventsSwitches") }, _private_handleScrollEventsSwitches_decorators, { kind: "method", name: "#handleScrollEventsSwitches", static: false, private: true, access: { has: obj => #handleScrollEventsSwitches in obj, get: obj => obj.#handleScrollEventsSwitches }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(null, null, _private_updateUpperIntersectionObserver_decorators, { kind: "field", name: "#updateUpperIntersectionObserver", static: false, private: true, access: { has: obj => #updateUpperIntersectionObserver in obj, get: obj => obj.#updateUpperIntersectionObserver, set: (obj, value) => { obj.#updateUpperIntersectionObserver = value; } }, metadata: _metadata }, _private_updateUpperIntersectionObserver_initializers, _private_updateUpperIntersectionObserver_extraInitializers);
-            __esDecorate(null, null, _private_updateLowerIntersectionObserver_decorators, { kind: "field", name: "#updateLowerIntersectionObserver", static: false, private: true, access: { has: obj => #updateLowerIntersectionObserver in obj, get: obj => obj.#updateLowerIntersectionObserver, set: (obj, value) => { obj.#updateLowerIntersectionObserver = value; } }, metadata: _metadata }, _private_updateLowerIntersectionObserver_initializers, _private_updateLowerIntersectionObserver_extraInitializers);
+            _private_handleScrollEventEnabled_decorators = [registerEventEnableStatusChangeHandler('lynxscroll')];
+            _private_handleScrollEndEventEnabled_decorators = [registerEventEnableStatusChangeHandler('lynxscrollend')];
+            __esDecorate(null, null, _private_handleScrollUpperThresholdEventEnabled_decorators, { kind: "field", name: "#handleScrollUpperThresholdEventEnabled", static: false, private: true, access: { has: obj => #handleScrollUpperThresholdEventEnabled in obj, get: obj => obj.#handleScrollUpperThresholdEventEnabled, set: (obj, value) => { obj.#handleScrollUpperThresholdEventEnabled = value; } }, metadata: _metadata }, _private_handleScrollUpperThresholdEventEnabled_initializers, _private_handleScrollUpperThresholdEventEnabled_extraInitializers);
+            __esDecorate(null, null, _private_handleScrollLowerThresholdEventEnabled_decorators, { kind: "field", name: "#handleScrollLowerThresholdEventEnabled", static: false, private: true, access: { has: obj => #handleScrollLowerThresholdEventEnabled in obj, get: obj => obj.#handleScrollLowerThresholdEventEnabled, set: (obj, value) => { obj.#handleScrollLowerThresholdEventEnabled = value; } }, metadata: _metadata }, _private_handleScrollLowerThresholdEventEnabled_initializers, _private_handleScrollLowerThresholdEventEnabled_extraInitializers);
             __esDecorate(null, null, _private_updateUpperThreshold_decorators, { kind: "field", name: "#updateUpperThreshold", static: false, private: true, access: { has: obj => #updateUpperThreshold in obj, get: obj => obj.#updateUpperThreshold, set: (obj, value) => { obj.#updateUpperThreshold = value; } }, metadata: _metadata }, _private_updateUpperThreshold_initializers, _private_updateUpperThreshold_extraInitializers);
             __esDecorate(null, null, _private_updateLowerThreshold_decorators, { kind: "field", name: "#updateLowerThreshold", static: false, private: true, access: { has: obj => #updateLowerThreshold in obj, get: obj => obj.#updateLowerThreshold, set: (obj, value) => { obj.#updateLowerThreshold = value; } }, metadata: _metadata }, _private_updateLowerThreshold_initializers, _private_updateLowerThreshold_extraInitializers);
+            __esDecorate(null, null, _private_handleScrollEventEnabled_decorators, { kind: "field", name: "#handleScrollEventEnabled", static: false, private: true, access: { has: obj => #handleScrollEventEnabled in obj, get: obj => obj.#handleScrollEventEnabled, set: (obj, value) => { obj.#handleScrollEventEnabled = value; } }, metadata: _metadata }, _private_handleScrollEventEnabled_initializers, _private_handleScrollEventEnabled_extraInitializers);
+            __esDecorate(null, null, _private_handleScrollEndEventEnabled_decorators, { kind: "field", name: "#handleScrollEndEventEnabled", static: false, private: true, access: { has: obj => #handleScrollEndEventEnabled in obj, get: obj => obj.#handleScrollEndEventEnabled, set: (obj, value) => { obj.#handleScrollEndEventEnabled = value; } }, metadata: _metadata }, _private_handleScrollEndEventEnabled_initializers, _private_handleScrollEndEventEnabled_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        #dom = __runInitializers(this, _instanceExtraInitializers);
-        #enableScrollEnd = false;
+        #dom;
         #debounceScrollForMockingScrollEnd;
         #prevX = 0;
         #prevY = 0;
         constructor(dom) {
+            __runInitializers(this, _private_handleScrollEndEventEnabled_extraInitializers);
             this.#dom = dom;
         }
         #getScrollContainer = () => this.#dom;
@@ -85,16 +75,24 @@ let ScrollViewEvents = (() => {
             }
         };
         static observedAttributes = [
-            'x-enable-scrolltoupper-event',
-            'x-enable-scrolltolower-event',
-            'x-enable-scroll-event',
-            'x-enable-scrollend-event',
             'upper-threshold',
             'lower-threshold',
         ];
-        #updateUpperIntersectionObserver = __runInitializers(this, _private_updateUpperIntersectionObserver_initializers, bindToIntersectionObserver(this.#getScrollContainer, this.#getUpperThresholdObserverDom, this.#handleObserver));
-        #updateLowerIntersectionObserver = (__runInitializers(this, _private_updateUpperIntersectionObserver_extraInitializers), __runInitializers(this, _private_updateLowerIntersectionObserver_initializers, bindToIntersectionObserver(this.#getScrollContainer, this.#getLowerThresholdObserverDom, this.#handleObserver)));
-        #updateUpperThreshold = (__runInitializers(this, _private_updateLowerIntersectionObserver_extraInitializers), __runInitializers(this, _private_updateUpperThreshold_initializers, bindToStyle(this.#getUpperThresholdObserverDom, 'flex-basis', (v) => `${parseInt(v)}px`)));
+        #handleScrollUpperThresholdEventEnabled = __runInitializers(this, _private_handleScrollUpperThresholdEventEnabled_initializers, (enabled) => {
+            enabled
+                ? this.#dom.setAttribute('x-enable-scrolltoupper-event', '')
+                : this.#dom.removeAttribute('x-enable-scrolltoupper-event'); // css needs this;
+            this.#updateUpperIntersectionObserver(enabled);
+        });
+        #updateUpperIntersectionObserver = (__runInitializers(this, _private_handleScrollUpperThresholdEventEnabled_extraInitializers), bindToIntersectionObserver(this.#getScrollContainer, this.#getUpperThresholdObserverDom, this.#handleObserver));
+        #handleScrollLowerThresholdEventEnabled = __runInitializers(this, _private_handleScrollLowerThresholdEventEnabled_initializers, (enabled) => {
+            enabled
+                ? this.#dom.setAttribute('x-enable-scrolltolower-event', '')
+                : this.#dom.removeAttribute('x-enable-scrolltolower-event'); // css needs this;
+            this.#updateLowerIntersectionObserver(enabled);
+        });
+        #updateLowerIntersectionObserver = (__runInitializers(this, _private_handleScrollLowerThresholdEventEnabled_extraInitializers), bindToIntersectionObserver(this.#getScrollContainer, this.#getLowerThresholdObserverDom, this.#handleObserver));
+        #updateUpperThreshold = __runInitializers(this, _private_updateUpperThreshold_initializers, bindToStyle(this.#getUpperThresholdObserverDom, 'flex-basis', (v) => `${parseInt(v)}px`));
         #updateLowerThreshold = (__runInitializers(this, _private_updateUpperThreshold_extraInitializers), __runInitializers(this, _private_updateLowerThreshold_initializers, bindToStyle(this.#getLowerThresholdObserverDom, 'flex-basis', (v) => `${parseInt(v)}px`)));
         #getScrollDetail() {
             let { scrollTop, scrollLeft, scrollHeight, scrollWidth } = this
@@ -119,7 +117,7 @@ let ScrollViewEvents = (() => {
             return detail;
         }
         #handleScroll = (__runInitializers(this, _private_updateLowerThreshold_extraInitializers), () => {
-            if (this.#enableScrollEnd && !useScrollEnd) {
+            if (this.#scrollEndEventEnabled && !useScrollEnd) {
                 // debounce
                 clearTimeout(this.#debounceScrollForMockingScrollEnd);
                 this.#debounceScrollForMockingScrollEnd = setTimeout(() => {
@@ -137,7 +135,30 @@ let ScrollViewEvents = (() => {
                 detail: this.#getScrollDetail(),
             }));
         };
-        get #handleScrollEventsSwitches() { return _private_handleScrollEventsSwitches_descriptor.value; }
+        #scrollEventEnabled = false;
+        #handleScrollEventEnabled = __runInitializers(this, _private_handleScrollEventEnabled_initializers, (enabled) => {
+            this.#scrollEventEnabled = enabled;
+            this.#handleScrollEventsSwitches();
+        });
+        #scrollEndEventEnabled = (__runInitializers(this, _private_handleScrollEventEnabled_extraInitializers), false);
+        #handleScrollEndEventEnabled = __runInitializers(this, _private_handleScrollEndEventEnabled_initializers, (enabled) => {
+            this.#scrollEndEventEnabled = enabled;
+            this.#handleScrollEventsSwitches();
+        });
+        #handleScrollEventsSwitches() {
+            if (this.#scrollEventEnabled || this.#scrollEndEventEnabled) {
+                this.#getScrollContainer().addEventListener('scroll', this.#handleScroll);
+                this.#getScrollContainer().addEventListener('scrollend', this.#handleScrollEnd);
+                this.#dom.addEventListener('scroll', this.#handleScroll);
+                this.#dom.addEventListener('scrollend', this.#handleScrollEnd);
+                this.#prevX = 0;
+                this.#prevY = 0;
+            }
+            else {
+                this.#dom.removeEventListener('scroll', this.#handleScroll);
+                this.#dom.removeEventListener('scrollend', this.#handleScrollEnd);
+            }
+        }
         connectedCallback() { }
         dispose() { }
     };

package/dist/XImage/ImageEvents.d.ts

@@ -1,6 +1,6 @@
 import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
 export declare class ImageEvents implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
-    static observedAttributes: string[];
+    static observedAttributes: never[];
     constructor(dom: HTMLElement);
 }

package/dist/XImage/ImageEvents.js

@@ -4,8 +4,9 @@ import { __esDecorate, __runInitializers, __setFunctionName } 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 { genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { genDomGetter, } from '@lynx-js/web-elements-reactive';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 let ImageEvents = (() => {
     let _instanceExtraInitializers = [];
     let _private_enableLoadEvent_decorators;
@@ -15,31 +16,31 @@ let ImageEvents = (() => {
     return class ImageEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_enableLoadEvent_decorators = [registerAttributeHandler('x-enable-load-event', true)];
-            _private_enableErrorEvent_decorators = [registerAttributeHandler('x-enable-error-event', true)];
-            __esDecorate(this, _private_enableLoadEvent_descriptor = { value: __setFunctionName(function (value) {
-                    if (value === null) {
-                        this.#getImg().removeEventListener('load', this.#teleportLoadEvent);
-                    }
-                    else {
+            _private_enableLoadEvent_decorators = [registerEventEnableStatusChangeHandler('load')];
+            _private_enableErrorEvent_decorators = [registerEventEnableStatusChangeHandler('error')];
+            __esDecorate(this, _private_enableLoadEvent_descriptor = { value: __setFunctionName(function (status) {
+                    if (status) {
                         this.#getImg().addEventListener('load', this.#teleportLoadEvent, {
                             passive: true,
                         });
                     }
-                }, "#enableLoadEvent") }, _private_enableLoadEvent_decorators, { kind: "method", name: "#enableLoadEvent", static: false, private: true, access: { has: obj => #enableLoadEvent in obj, get: obj => obj.#enableLoadEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_enableErrorEvent_descriptor = { value: __setFunctionName(function (value) {
-                    if (value === null) {
-                        this.#getImg().removeEventListener('error', this.#teleportErrorEvent);
-                    }
                     else {
+                        this.#getImg().removeEventListener('load', this.#teleportLoadEvent);
+                    }
+                }, "#enableLoadEvent") }, _private_enableLoadEvent_decorators, { kind: "method", name: "#enableLoadEvent", static: false, private: true, access: { has: obj => #enableLoadEvent in obj, get: obj => obj.#enableLoadEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_enableErrorEvent_descriptor = { value: __setFunctionName(function (status) {
+                    if (status) {
                         this.#getImg().addEventListener('error', this.#teleportErrorEvent, {
                             passive: true,
                         });
                     }
+                    else {
+                        this.#getImg().removeEventListener('error', this.#teleportErrorEvent);
+                    }
                 }, "#enableErrorEvent") }, _private_enableErrorEvent_decorators, { kind: "method", name: "#enableErrorEvent", static: false, private: true, access: { has: obj => #enableErrorEvent in obj, get: obj => obj.#enableErrorEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static observedAttributes = ['x-enable-load-event', 'x-enable-error-event'];
+        static observedAttributes = [];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #getImg = genDomGetter(() => this.#dom.shadowRoot, '#img');
         get #enableLoadEvent() { return _private_enableLoadEvent_descriptor.value; }

package/dist/XInput/XInputEvents.js

@@ -7,6 +7,7 @@ import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
 import { genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import { renameEvent } from '../common/renameEvent.js';
+import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 let XInputEvents = (() => {
     let _instanceExtraInitializers = [];
     let _private_handleEnableConfirmEvent_decorators;
@@ -16,11 +17,11 @@ let XInputEvents = (() => {
     return class XInputEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleEnableConfirmEvent_decorators = [registerAttributeHandler('x-enable-input-event', true)];
+            _private_handleEnableConfirmEvent_decorators = [registerEventEnableStatusChangeHandler('input')];
             _private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
-            __esDecorate(this, _private_handleEnableConfirmEvent_descriptor = { value: __setFunctionName(function (newValue) {
+            __esDecorate(this, _private_handleEnableConfirmEvent_descriptor = { value: __setFunctionName(function (status) {
                     const input = this.#getInputElement();
-                    if (newValue !== null) {
+                    if (status) {
                         input.addEventListener('input', this.#teleportInput, { passive: true });
                         input.addEventListener('compositionend', this.#teleportCompositionendInput, { passive: true });
                     }
@@ -34,7 +35,7 @@ let XInputEvents = (() => {
                 }, "#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);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static observedAttributes = ['x-enable-input-event', 'send-composing-input'];
+        static observedAttributes = ['send-composing-input'];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #sendComposingInput = false;
         #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');

package/dist/XList/XListAttributes.js

@@ -9,21 +9,29 @@ let XListAttributes = (() => {
     let _private_handlerStickyOffset_decorators;
     let _private_handlerStickyOffset_initializers = [];
     let _private_handlerStickyOffset_extraInitializers = [];
+    let _private_handlerCount_decorators;
+    let _private_handlerCount_initializers = [];
+    let _private_handlerCount_extraInitializers = [];
     return class XListAttributes {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
             _private_handlerStickyOffset_decorators = [registerAttributeHandler('sticky-offset', true)];
+            _private_handlerCount_decorators = [registerAttributeHandler('span-count', true), registerAttributeHandler('column-count', true)];
             __esDecorate(null, null, _private_handlerStickyOffset_decorators, { kind: "field", name: "#handlerStickyOffset", static: false, private: true, access: { has: obj => #handlerStickyOffset in obj, get: obj => obj.#handlerStickyOffset, set: (obj, value) => { obj.#handlerStickyOffset = value; } }, metadata: _metadata }, _private_handlerStickyOffset_initializers, _private_handlerStickyOffset_extraInitializers);
+            __esDecorate(null, null, _private_handlerCount_decorators, { kind: "field", name: "#handlerCount", static: false, private: true, access: { has: obj => #handlerCount in obj, get: obj => obj.#handlerCount, set: (obj, value) => { obj.#handlerCount = value; } }, metadata: _metadata }, _private_handlerCount_initializers, _private_handlerCount_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static observedAttributes = [
             'sticky-offset',
             'initial-scroll-index',
+            'span-count',
+            'column-count',
         ];
         #dom;
         #handlerStickyOffset = __runInitializers(this, _private_handlerStickyOffset_initializers, bindToStyle(() => this.#dom, '--list-item-sticky-offset', (v) => `${parseFloat(v)}px`));
+        #handlerCount = (__runInitializers(this, _private_handlerStickyOffset_extraInitializers), __runInitializers(this, _private_handlerCount_initializers, bindToStyle(() => this.#dom, '--list-item-span-count', (v) => `${parseFloat(v)}`)));
         constructor(dom) {
-            __runInitializers(this, _private_handlerStickyOffset_extraInitializers);
+            __runInitializers(this, _private_handlerCount_extraInitializers);
             this.#dom = dom;
         }
         connectedCallback() {