@lynx-js/web-elements 0.12.10 → 0.12.11

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lynx-js/web-elements
 
+## 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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.12.10",
+  "version": "0.12.11",
   "private": false,
   "repository": {
     "type": "git",
@@ -143,14 +143,14 @@
     "markdown-it": "^15.0.1"
   },
   "devDependencies": {
+    "@lynx-js/playwright-fixtures": "0.0.0",
     "@playwright/test": "^1.61.1",
-    "@rsbuild/core": "2.2.3",
+    "@rsbuild/core": "2.2.4",
     "@rsbuild/plugin-source-build": "1.0.6",
     "@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;