@lynx-js/web-elements 0.12.10 → 0.12.12

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @lynx-js/web-elements
 
+## 0.12.12
+
+### Patch Changes
+
+- Updated dependency `markdown-it` to `^15.0.2`. ([#3943](https://github.com/lynx-family/lynx-stack/pull/3943))
+
+## 0.12.11
+
+### Patch Changes
+
+- Defer `x-image` and `inline-image` load events received while detached until the host connects to the document, preserving the image dimensions at load time. ([#3906](https://github.com/lynx-family/lynx-stack/pull/3906))
+
+- Apply inline image layout styles to `x-svg` inside text and custom truncation content. ([#3899](https://github.com/lynx-family/lynx-stack/pull/3899))
+
 ## 0.12.10
 
 ### Patch Changes

package/dist/element-reactive/registerAttributeHandler.d.ts

@@ -5,8 +5,8 @@
 */
 export type AttributeChangeHandler = (newValue: string | null, oldValue: string | null, attributeName: string) => void;
 /**
- * @param attributeName
- * @param noDomMeasure  If there are any measurement operation, the handler will be invoked after connected
+ * @param key - The attribute name
+ * @param args - `[noDomMeasure]`: if there are any measurement operation, the handler will be invoked after connected
  * @returns
  */
 export declare const registerAttributeHandler: (key: string, args_0: boolean) => <T>(this: T, target: AttributeChangeHandler | undefined, context: ClassMemberDecoratorContext | ClassFieldDecoratorContext<T>) => any;

package/dist/element-reactive/registerAttributeHandler.js

@@ -1,7 +1,7 @@
 import { generateRegister } from './generateRegister.js';
 /**
- * @param attributeName
- * @param noDomMeasure  If there are any measurement operation, the handler will be invoked after connected
+ * @param key - The attribute name
+ * @param args - `[noDomMeasure]`: if there are any measurement operation, the handler will be invoked after connected
  * @returns
  */
 export const registerAttributeHandler = generateRegister('attributeChangedHandler', (handler, [noDomMeasure]) => ({

package/dist/element-reactive/registerEventStatusChangedHandler.d.ts

@@ -5,7 +5,7 @@
 */
 export type EventStatusChangeHandler = (enable: boolean, eventName: string) => void;
 /**
- * @param eventName
+ * @param key - The event name
  * @returns
  */
 export declare const registerEventEnableStatusChangeHandler: (key: string) => <T>(this: T, target: EventStatusChangeHandler | undefined, context: ClassMemberDecoratorContext | ClassFieldDecoratorContext<T>) => any;

package/dist/element-reactive/registerEventStatusChangedHandler.js

@@ -1,6 +1,6 @@
 import { generateRegister } from './generateRegister.js';
 /**
- * @param eventName
+ * @param key - The event name
  * @returns
  */
 export const registerEventEnableStatusChangeHandler = generateRegister('eventStatusChangedHandler', (handler) => handler);

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

@@ -13,12 +13,13 @@
  * - `scroll-orientation`: 'vertical' | 'horizontal' | 'both'.
  * - `scroll-y`: 'true' | 'false' to enable vertical scrolling.
  * - `scroll-x`: 'true' | 'false' to enable horizontal scrolling.
- * - `enable-scroll`: 'true' | 'false', creates a scrolling container.
+ * - `enable-scroll`: Set to 'false' to disable user scrolling (enabled by default).
  *
  * Events:
  * - `scrolltoupper`: Reached top threshold.
  * - `scrolltolower`: Reached bottom threshold.
- * - `scroll`: Fired on scroll. Detail: `{ scrollTop, scrollLeft, scrollHeight, scrollWidth, deltaX, deltaY }`.
+ * - `scroll` (mapped to `lynxscroll`): Fired on scroll. Detail: `{ scrollTop, scrollLeft, scrollHeight, scrollWidth, isDragging, deltaX, deltaY }`.
+ * - `scrollend` (mapped to `lynxscrollend`): Fired when scrolling ends. Same detail as `scroll`.
  *
  * CSS:
  * - Forces `display: flex` and linear layout behavior.

package/dist/elements/ScrollView/index.js

@@ -16,12 +16,13 @@
  * - `scroll-orientation`: 'vertical' | 'horizontal' | 'both'.
  * - `scroll-y`: 'true' | 'false' to enable vertical scrolling.
  * - `scroll-x`: 'true' | 'false' to enable horizontal scrolling.
- * - `enable-scroll`: 'true' | 'false', creates a scrolling container.
+ * - `enable-scroll`: Set to 'false' to disable user scrolling (enabled by default).
  *
  * Events:
  * - `scrolltoupper`: Reached top threshold.
  * - `scrolltolower`: Reached bottom threshold.
- * - `scroll`: Fired on scroll. Detail: `{ scrollTop, scrollLeft, scrollHeight, scrollWidth, deltaX, deltaY }`.
+ * - `scroll` (mapped to `lynxscroll`): Fired on scroll. Detail: `{ scrollTop, scrollLeft, scrollHeight, scrollWidth, isDragging, deltaX, deltaY }`.
+ * - `scrollend` (mapped to `lynxscrollend`): Fired when scrolling ends. Same detail as `scroll`.
  *
  * CSS:
  * - Forces `display: flex` and linear layout behavior.

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

@@ -4,5 +4,6 @@ export declare class ImageEvents implements InstanceType<AttributeReactiveClass<
     static observedAttributes: never[];
     _enableLoadEvent(status: boolean): void;
     _enableErrorEvent(status: boolean): void;
+    connectedCallback(): void;
     constructor(dom: HTMLElement);
 }

package/dist/elements/XImage/ImageEvents.js

@@ -22,6 +22,7 @@ let ImageEvents = (() => {
         }
         static observedAttributes = [];
         #dom = __runInitializers(this, _instanceExtraInitializers);
+        #pendingLoadEvents = [];
         #getImg = genDomGetter(() => this.#dom.shadowRoot, '#img');
         _enableLoadEvent(status) {
             if (status) {
@@ -31,6 +32,7 @@ let ImageEvents = (() => {
             }
             else {
                 this.#getImg().removeEventListener('load', this.#teleportLoadEvent);
+                this.#pendingLoadEvents = [];
             }
         }
         _enableErrorEvent(status) {
@@ -44,14 +46,26 @@ let ImageEvents = (() => {
             }
         }
         #teleportLoadEvent = () => {
-            this.#dom.dispatchEvent(new CustomEvent('load', {
+            const event = new CustomEvent('load', {
                 ...commonComponentEventSetting,
                 detail: {
                     width: this.#getImg().naturalWidth,
                     height: this.#getImg().naturalHeight,
                 },
-            }));
+            });
+            if (this.#dom.isConnected) {
+                this.#dom.dispatchEvent(event);
+            }
+            else {
+                // Preserve the dimensions at load time until the host joins the document.
+                this.#pendingLoadEvents.push(event);
+            }
         };
+        connectedCallback() {
+            while (this.#dom.isConnected && this.#pendingLoadEvents.length) {
+                this.#dom.dispatchEvent(this.#pendingLoadEvents.shift());
+            }
+        }
         #teleportErrorEvent = () => {
             this.#dom.dispatchEvent(new CustomEvent('error', {
                 ...commonComponentEventSetting,

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

@@ -20,8 +20,8 @@
  *
  * Events:
  * - `input` (mapped to `lynxinput`): Fired on input.
- * - `focus`: Fired on focus.
- * - `blur`: Fired on blur.
+ * - `focus` (mapped to `lynxfocus`): Fired on focus.
+ * - `blur` (mapped to `lynxblur`): Fired on blur.
  * - `confirm` (submit): Fired on enter key.
  *
  * Methods:

package/dist/elements/XInput/index.js

@@ -23,8 +23,8 @@
  *
  * Events:
  * - `input` (mapped to `lynxinput`): Fired on input.
- * - `focus`: Fired on focus.
- * - `blur`: Fired on blur.
+ * - `focus` (mapped to `lynxfocus`): Fired on focus.
+ * - `blur` (mapped to `lynxblur`): Fired on blur.
  * - `confirm` (submit): Fired on enter key.
  *
  * Methods:

package/dist/elements/XList/XList.d.ts

@@ -27,8 +27,7 @@ export declare class XList extends HTMLElement {
          */
         rate: `${number}px` | `${number}rpx` | `${number}ppx` | number;
         /**
-         * @description start/pause autoScroll
-         * @defaultValue true
+         * @description true to start, false to stop.
          */
         start: boolean;
         /**

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

@@ -16,8 +16,8 @@ export { ListItem } from './ListItem.js';
  * Events:
  * - `scrolltoupper`: Reached top threshold.
  * - `scrolltolower`: Reached bottom threshold.
- * - `scroll`: Fired on scroll.
- * - `scrollend`: Fired when scrolling stops.
+ * - `scroll` (mapped to `lynxscroll`): Fired on scroll.
+ * - `scrollend` (mapped to `lynxscrollend`): Fired when scrolling stops.
  * - `snap`: Fired on scroll snap.
  *
  * Methods:
@@ -26,7 +26,7 @@ export { ListItem } from './ListItem.js';
  *
  * CSS:
  * - `list-type="flow"` uses `display: grid`.
- * - `list-type="waterfall"` uses `display: flex` (column) / `display: row` with absolute positioning for items.
+ * - `list-type="waterfall"` uses `display: flex` (`flex-direction: column`, or `row` when horizontal) with absolute positioning for items.
  * - `sticky` items use `position: sticky`.
  */
 export { XList } from './XList.js';

package/dist/elements/XList/index.js

@@ -19,8 +19,8 @@ export { ListItem } from './ListItem.js';
  * Events:
  * - `scrolltoupper`: Reached top threshold.
  * - `scrolltolower`: Reached bottom threshold.
- * - `scroll`: Fired on scroll.
- * - `scrollend`: Fired when scrolling stops.
+ * - `scroll` (mapped to `lynxscroll`): Fired on scroll.
+ * - `scrollend` (mapped to `lynxscrollend`): Fired when scrolling stops.
  * - `snap`: Fired on scroll snap.
  *
  * Methods:
@@ -29,7 +29,7 @@ export { ListItem } from './ListItem.js';
  *
  * CSS:
  * - `list-type="flow"` uses `display: grid`.
- * - `list-type="waterfall"` uses `display: flex` (column) / `display: row` with absolute positioning for items.
+ * - `list-type="waterfall"` uses `display: flex` (`flex-direction: column`, or `row` when horizontal) with absolute positioning for items.
  * - `sticky` items use `position: sticky`.
  */
 export { XList } from './XList.js';

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

@@ -2,6 +2,9 @@
  * @module elements/XMarkdown
  *
  * `x-markdown` renders markdown content with minimal styling.
- * It supports the `content` and `markdown-style` attributes.
+ * Key attributes: `content`, `markdown-style`, `content-id`, `text-selection`,
+ * `text-maxline`, `content-range`, `markdown-effect`, and the typewriter
+ * controls `animation-type`, `animation-velocity`, `animation-paused`,
+ * `initial-animation-step` and `content-complete`.
  */
 export { XMarkdown } from './XMarkdown.js';

package/dist/elements/XMarkdown/index.js

@@ -5,7 +5,10 @@
  * @module elements/XMarkdown
  *
  * `x-markdown` renders markdown content with minimal styling.
- * It supports the `content` and `markdown-style` attributes.
+ * Key attributes: `content`, `markdown-style`, `content-id`, `text-selection`,
+ * `text-maxline`, `content-range`, `markdown-effect`, and the typewriter
+ * controls `animation-type`, `animation-velocity`, `animation-paused`,
+ * `initial-animation-step` and `content-complete`.
  */
 export { XMarkdown } from './XMarkdown.js';
 //# sourceMappingURL=index.js.map

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

@@ -5,13 +5,12 @@ export { SwiperItem } from './SwiperItem.js';
  * `x-swiper` provides a swipeable container for items.
  *
  * Attributes:
- * - `mode`: 'normal' | 'carousel' | 'flat-coverflow'.
+ * - `mode`: 'normal' | 'carousel' | 'coverflow' | 'flat-coverflow'.
  * - `vertical`: 'true' | 'false', vertical scrolling.
  * - `circular`: 'true' | 'false', circular scrolling.
  * - `current`: Current index.
  * - `autoplay`: 'true' | 'false'.
  * - `interval`: Autoplay interval in ms (default 5000).
- * - `duration`: Animation duration.
  * - `smooth-scroll`: 'true' | 'false'.
  * - `indicator-dots`: 'true' | 'false', show indicator dots.
  * - `indicator-color`: Color of inactive indicator dots.

package/dist/elements/XSwiper/index.js

@@ -8,13 +8,12 @@ export { SwiperItem } from './SwiperItem.js';
  * `x-swiper` provides a swipeable container for items.
  *
  * Attributes:
- * - `mode`: 'normal' | 'carousel' | 'flat-coverflow'.
+ * - `mode`: 'normal' | 'carousel' | 'coverflow' | 'flat-coverflow'.
  * - `vertical`: 'true' | 'false', vertical scrolling.
  * - `circular`: 'true' | 'false', circular scrolling.
  * - `current`: Current index.
  * - `autoplay`: 'true' | 'false'.
  * - `interval`: Autoplay interval in ms (default 5000).
- * - `duration`: Animation duration.
  * - `smooth-scroll`: 'true' | 'false'.
  * - `indicator-dots`: 'true' | 'false', show indicator dots.
  * - `indicator-color`: Color of inactive indicator dots.

package/dist/elements/XText/InlineImage.js

@@ -6,6 +6,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 */
 import { Component, genDomGetter, registerAttributeHandler, } from '../../element-reactive/index.js';
 import { templateInlineImage } from '../htmlTemplates.js';
+import { ImageEvents } from '../XImage/ImageEvents.js';
 let InlineImageAttributes = (() => {
     let _instanceExtraInitializers = [];
     let __handleSrc_decorators;
@@ -35,7 +36,7 @@ export { InlineImageAttributes };
  * @deprecated you can use `x-image` instead in `x-text`.
  */
 let InlineImage = (() => {
-    let _classDecorators = [Component('inline-image', [InlineImageAttributes], templateInlineImage({}))];
+    let _classDecorators = [Component('inline-image', [InlineImageAttributes, ImageEvents], templateInlineImage({}))];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

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

@@ -8,7 +8,6 @@
  * - `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.
@@ -19,11 +18,10 @@
  * - `placeholder-font-family`: Font family of the placeholder.
  *
  * Events:
- * - `input`: Fired on input.
- * - `focus`: Fired on focus.
- * - `blur`: Fired on blur.
+ * - `input` (mapped to `lynxinput`): Fired on input.
+ * - `focus` (mapped to `lynxfocus`): Fired on focus.
+ * - `blur` (mapped to `lynxblur`): Fired on blur.
  * - `confirm`: Fired on confirm/enter.
- * - `linechange`: Fired when line count changes.
  *
  * Methods:
  * - `addText({ text })`: Inserts text.

package/dist/elements/XTextarea/index.js

@@ -11,7 +11,6 @@
  * - `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.
@@ -22,11 +21,10 @@
  * - `placeholder-font-family`: Font family of the placeholder.
  *
  * Events:
- * - `input`: Fired on input.
- * - `focus`: Fired on focus.
- * - `blur`: Fired on blur.
+ * - `input` (mapped to `lynxinput`): Fired on input.
+ * - `focus` (mapped to `lynxfocus`): Fired on focus.
+ * - `blur` (mapped to `lynxblur`): Fired on blur.
  * - `confirm`: Fired on confirm/enter.
- * - `linechange`: Fired when line count changes.
  *
  * Methods:
  * - `addText({ text })`: Inserts text.

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

@@ -4,13 +4,14 @@
  * `x-viewpager-ng` provides a page container that allows sliding between pages.
  *
  * Attributes:
- * - `select-index`: Index of the currently selected page.
+ * - `select-index`: Page shown on connect; later changes are ignored, use `selectTab()`.
  * - `initial-select-index`: Initial selected index.
  * - `allow-horizontal-gesture`: 'true' | 'false'.
  * - `enable-scroll`: 'true' | 'false'.
  *
  * Events:
  * - `change`: Fired when the selected page changes. Detail: `{ index, isDragged }`.
+ * - `willchange`: Fired on touch end with the page the view will settle on. Detail: `{ index }`.
  * - `offsetchange`: Fired when scroll offset changes. Detail: `{ offset }`.
  *
  * Methods:

package/dist/elements/XViewpagerNg/index.js

@@ -7,13 +7,14 @@
  * `x-viewpager-ng` provides a page container that allows sliding between pages.
  *
  * Attributes:
- * - `select-index`: Index of the currently selected page.
+ * - `select-index`: Page shown on connect; later changes are ignored, use `selectTab()`.
  * - `initial-select-index`: Initial selected index.
  * - `allow-horizontal-gesture`: 'true' | 'false'.
  * - `enable-scroll`: 'true' | 'false'.
  *
  * Events:
  * - `change`: Fired when the selected page changes. Detail: `{ index, isDragged }`.
+ * - `willchange`: Fired on touch end with the page the view will settle on. Detail: `{ index }`.
  * - `offsetchange`: Fired when scroll offset changes. Detail: `{ offset }`.
  *
  * Methods:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.12.10",
+  "version": "0.12.12",
   "private": false,
   "repository": {
     "type": "git",
@@ -140,17 +140,17 @@
   ],
   "dependencies": {
     "dompurify": "^3.4.13",
-    "markdown-it": "^15.0.1"
+    "markdown-it": "^15.0.2"
   },
   "devDependencies": {
+    "@lynx-js/playwright-fixtures": "0.0.0",
     "@playwright/test": "^1.61.1",
-    "@rsbuild/core": "2.2.3",
-    "@rsbuild/plugin-source-build": "1.0.6",
+    "@rsbuild/core": "2.2.9",
+    "@rsbuild/plugin-source-build": "1.0.7",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^24.13.3",
     "nyc": "^18.0.0",
-    "tslib": "^2.8.1",
-    "@lynx-js/playwright-fixtures": "0.0.0"
+    "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "tslib": "^2.5.0"

package/src/elements/XText/x-text.css

@@ -68,16 +68,22 @@ inline-truncation > lynx-wrapper > x-text {
 
 x-text > inline-image,
 x-text > x-image,
+x-text > x-svg,
 inline-truncation > inline-image,
 inline-truncation > x-image,
+inline-truncation > x-svg,
 inline-text > inline-image,
 inline-text > x-image,
+inline-text > x-svg,
 x-text > lynx-wrapper > inline-image,
 x-text > lynx-wrapper > x-image,
+x-text > lynx-wrapper > x-svg,
 inline-truncation > lynx-wrapper > inline-image,
 inline-truncation > lynx-wrapper > x-image,
+inline-truncation > lynx-wrapper > x-svg,
 inline-text > lynx-wrapper > inline-image,
-inline-text > lynx-wrapper > x-image {
+inline-text > lynx-wrapper > x-image,
+inline-text > lynx-wrapper > x-svg {
   display: contents !important;
 }
 
@@ -118,9 +124,13 @@ inline-image::part(img) {
 }
 
 x-text > x-image::part(img),
+x-text > x-svg::part(img),
 x-text > lynx-wrapper > x-image::part(img),
+x-text > lynx-wrapper > x-svg::part(img),
 inline-truncation > x-image::part(img),
-inline-truncation > lynx-wrapper > x-image::part(img) {
+inline-truncation > x-svg::part(img),
+inline-truncation > lynx-wrapper > x-image::part(img),
+inline-truncation > lynx-wrapper > x-svg::part(img) {
   display: inline-block;
   height: inherit !important;
   width: inherit !important;
@@ -159,11 +169,13 @@ x-text[text-selection] > inline-text,
 x-text[text-selection] > x-text,
 x-text[text-selection] > inline-image,
 x-text[text-selection] > x-image,
+x-text[text-selection] > x-svg,
 x-text[text-selection] > inline-truncation,
 x-text[text-selection] > lynx-wrapper > inline-text,
 x-text[text-selection] > lynx-wrapper > x-text,
 x-text[text-selection] > lynx-wrapper > inline-image,
 x-text[text-selection] > lynx-wrapper > x-image,
+x-text[text-selection] > lynx-wrapper > x-svg,
 x-text[text-selection] > lynx-wrapper > inline-truncation {
   -webkit-user-select: auto;
   user-select: auto;