@lynx-js/web-elements 0.11.3 → 0.12.1

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

@@ -0,0 +1,2 @@
+export declare const MarkdownIt: any;
+export declare const createDOMPurify: any;

package/dist/elements/XMarkdown/XMarkdownDeps.js

@@ -0,0 +1,11 @@
+/*
+// 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.
+*/
+// Keep runtime interop consistent with dynamic import usage in XMarkdownAttributes.
+import * as mdModule from 'markdown-it';
+import * as dpModule from 'dompurify';
+export const MarkdownIt = (mdModule.default ?? mdModule);
+export const createDOMPurify = (dpModule.default ?? dpModule);
+//# sourceMappingURL=XMarkdownDeps.js.map

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

@@ -0,0 +1,7 @@
+/**
+ * @module elements/XMarkdown
+ *
+ * `x-markdown` renders markdown content with minimal styling.
+ * It supports the `content` and `markdown-style` attributes.
+ */
+export { XMarkdown } from './XMarkdown.js';

package/dist/elements/XMarkdown/index.js

@@ -0,0 +1,11 @@
+// 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/XMarkdown
+ *
+ * `x-markdown` renders markdown content with minimal styling.
+ * It supports the `content` and `markdown-style` attributes.
+ */
+export { XMarkdown } from './XMarkdown.js';
+//# sourceMappingURL=index.js.map

package/dist/elements/XText/InlineTruncation.js

@@ -21,7 +21,7 @@ let InlineTruncation = (() => {
         }
         static XEnableCustomTruncation = 'x-text-custom-overflow';
         connectedCallback() {
-            if (!CSS.supports('selector(:has(inline-truncation))')) {
+            if (!CSS.supports('selector(:has(>inline-truncation))')) {
                 if (this.parentElement?.tagName === 'X-TEXT'
                     && !this.matches('inline-truncation ~ inline-truncation')) {
                     this.parentElement.setAttribute(InlineTruncation.XEnableCustomTruncation, '');

package/dist/elements/XText/XTextTruncation.js

@@ -45,16 +45,10 @@ let XTextTruncation = (() => {
             return !this.#hasInlineTruncation && !this.#tailColorConvert;
         }
         get #hasInlineTruncation() {
-            if (CSS.supports('selector(:has(inline-truncation))')) {
-                return this.#dom.matches(':has(inline-truncation)');
-            }
-            else {
-                const candidateElement = this.#dom.querySelector('inline-truncation');
-                if (candidateElement?.parentElement === this.#dom) {
-                    return true;
-                }
-            }
-            return false;
+            return !!this.#findValidInlineTruncation();
+        }
+        #findValidInlineTruncation() {
+            return this.#dom.querySelector(':scope > inline-truncation');
         }
         get #doExpensiveLineLayoutCalculation() {
             return (!isNaN(this.#maxLine)
@@ -139,7 +133,7 @@ let XTextTruncation = (() => {
                 const currentLineText = end - start;
                 if (this.#hasInlineTruncation) {
                     this.#dom.setAttribute(XTextTruncation.showInlineTruncation, '');
-                    const inlineTruncation = this.#dom.querySelector('inline-truncation');
+                    const inlineTruncation = this.#findValidInlineTruncation();
                     const inlineTruncationBoundingRect = inlineTruncation
                         .getBoundingClientRect();
                     const parentWidth = parentBondingRect.width;

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

@@ -5,6 +5,7 @@ export declare class XViewpagerNgEvents implements InstanceType<AttributeReactiv
     static observedAttributes: never[];
     constructor(dom: XViewpagerNg);
     _enableChangeEvent(status: boolean): void;
+    _enableWillChangeEvent(status: boolean): void;
     _enableOffsetChangeEvent(status: boolean): void;
     connectedCallback(): void;
     dispose(): void;

package/dist/elements/XViewpagerNg/XViewpagerNgEvents.js

@@ -11,13 +11,16 @@ import { registerEventEnableStatusChangeHandler } from '../../element-reactive/i
 let XViewpagerNgEvents = (() => {
     let _instanceExtraInitializers = [];
     let __enableChangeEvent_decorators;
+    let __enableWillChangeEvent_decorators;
     let __enableOffsetChangeEvent_decorators;
     return class XViewpagerNgEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
             __enableChangeEvent_decorators = [registerEventEnableStatusChangeHandler('change')];
+            __enableWillChangeEvent_decorators = [registerEventEnableStatusChangeHandler('willchange')];
             __enableOffsetChangeEvent_decorators = [registerEventEnableStatusChangeHandler('offsetchange')];
             __esDecorate(this, null, __enableChangeEvent_decorators, { kind: "method", name: "_enableChangeEvent", static: false, private: false, access: { has: obj => "_enableChangeEvent" in obj, get: obj => obj._enableChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __enableWillChangeEvent_decorators, { kind: "method", name: "_enableWillChangeEvent", static: false, private: false, access: { has: obj => "_enableWillChangeEvent" in obj, get: obj => obj._enableWillChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, __enableOffsetChangeEvent_decorators, { kind: "method", name: "_enableOffsetChangeEvent", static: false, private: false, access: { has: obj => "_enableOffsetChangeEvent" in obj, get: obj => obj._enableOffsetChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -70,12 +73,29 @@ let XViewpagerNgEvents = (() => {
         };
         #touchEndHandler = () => {
             this.#isDragging = false;
+            if (this.#enableWillChange) {
+                const scrollContainer = this.#getScrollContainer();
+                const oneItemWidth = this.#dom.clientWidth;
+                if (oneItemWidth > 0) {
+                    const scrollLeft = scrollContainer.scrollLeft;
+                    let targetIndex = Math.round(scrollLeft / oneItemWidth);
+                    targetIndex = Math.max(0, Math.min(targetIndex, this.#dom.children.length - 1));
+                    this.#dom.dispatchEvent(new CustomEvent('willchange', {
+                        ...commonComponentEventSetting,
+                        detail: { index: targetIndex },
+                    }));
+                }
+            }
         };
         #enableChange = false;
         _enableChangeEvent(status) {
             this.#enableChange = status;
             this.#enableScrollEventListener();
         }
+        #enableWillChange = false;
+        _enableWillChangeEvent(status) {
+            this.#enableWillChange = status;
+        }
         #enableOffsetChange = false;
         _enableOffsetChangeEvent(status) {
             this.#enableOffsetChange = status;

package/dist/elements/all.d.ts

@@ -16,3 +16,4 @@ import './XViewpagerNg/index.js';
 import './XList/index.js';
 import './XList/ListItem.js';
 import './XWebView/index.js';
+import './XMarkdown/index.js';

package/dist/elements/all.js

@@ -16,4 +16,5 @@ import './XViewpagerNg/index.js';
 import './XList/index.js';
 import './XList/ListItem.js';
 import './XWebView/index.js';
+import './XMarkdown/index.js';
 //# sourceMappingURL=all.js.map

package/dist/elements/htmlTemplates.d.ts

@@ -7,11 +7,12 @@ export declare const templateFilterImage: (attributes: {
     src?: string;
 }) => string;
 export declare const templateXInput = "<style>\n  #input:focus {\n    outline: none;\n  }\n  #form {\n    display: none;\n  }\n</style>\n<form id=\"form\" part=\"form\" method=\"dialog\">\n  <input\n    id=\"input\"\n    part=\"input\"\n    step=\"any\"\n    type=\"text\"\n    inputmode=\"text\"\n    spell-check=\"true\"\n  />\n</form>";
-export declare const templateXList = "<style>\n  .placeholder-dom {\n    display: none;\n    flex: 0 0 0;\n    align-self: stretch;\n    min-height: 0;\n    min-width: 0;\n  }\n  .observer-container {\n    flex-direction: inherit;\n    overflow: visible;\n  }\n  .observer {\n    display: flex;\n  }\n</style>\n<div id=\"content\" part=\"content\">\n  <div\n    class=\"observer-container placeholder-dom\"\n    part=\"upper-threshold-observer\"\n  >\n    <div\n      class=\"observer placeholder-dom\"\n      id=\"upper-threshold-observer\"\n    ></div>\n  </div>\n  <slot part=\"slot\"></slot>\n  <div\n    class=\"observer-container placeholder-dom\"\n    part=\"lower-threshold-observer\"\n  >\n    <div\n      class=\"observer placeholder-dom\"\n      id=\"lower-threshold-observer\"\n    ></div>\n  </div>\n</div>";
+export declare const templateXList = "<style>\n  .placeholder-dom {\n    display: none;\n    flex: 0 0 0;\n    align-self: stretch;\n    min-height: 0;\n    min-width: 0;\n  }\n  .observer-container {\n    flex-direction: inherit;\n    overflow: visible;\n  }\n  .observer {\n    display: flex;\n  }\n</style>\n<div id=\"content\" part=\"content\">\n  <div\n    class=\"observer-container placeholder-dom\"\n    part=\"upper-threshold-observer\"\n  >\n    <div\n      class=\"observer placeholder-dom\"\n      id=\"upper-threshold-observer\"\n      part=\"upper-threshold-sentinel\"\n    ></div>\n  </div>\n  <slot part=\"slot\"></slot>\n  <div\n    class=\"observer-container placeholder-dom\"\n    part=\"lower-threshold-observer\"\n  >\n    <div\n      class=\"observer placeholder-dom\"\n      id=\"lower-threshold-observer\"\n      part=\"lower-threshold-sentinel\"\n    ></div>\n  </div>\n</div>";
 export declare const templateXOverlayNg = "<style>\n  #dialog[open] {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: fixed;\n    overscroll-behavior: contain;\n    scrollbar-width: none;\n  }\n  #dialog[open]::-webkit-scrollbar {\n    display: none;\n  }\n  #dialog::backdrop {\n    background-color: transparent;\n  }\n  .overlay-inner {\n    position: sticky;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n  }\n  .overlay-inner > * {\n    pointer-events: auto;\n  }\n  .overlay-placeholder {\n    width: 100%;\n    height: 1px;\n  }\n</style>\n<dialog id=\"dialog\" part=\"dialog\">\n  <div class=\"overlay-inner\">\n    <slot></slot>\n  </div>\n  <div class=\"overlay-placeholder\"></div>\n</dialog>";
 export declare const templateXRefreshView = "<style>\n  .bounce-container {\n    overflow: scroll;\n    overscroll-behavior: contain;\n    scroll-snap-type: y mandatory;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n  }\n  .overflow-placeholder {\n    min-height: 30%;\n    min-width: 100%;\n    flex-shrink: 0;\n    scroll-snap-align: none;\n  }\n  .not-shrink {\n    height: 100%;\n    width: 100%;\n    min-height: 100%;\n    min-width: 100%;\n    flex-shrink: 0;\n  }\n  .vertical {\n    display: flex;\n    flex-direction: column;\n  }\n  #content {\n    scroll-snap-align: center;\n  }\n</style>\n<div id=\"container\" part=\"container\" class=\"bounce-container not-shrink vertical\">\n  <div\n    id=\"placeholder-top\"\n    class=\"overflow-placeholder bounce-item\"\n    part=\"placeholder-top\"\n  ></div>\n  <slot name=\"header\"></slot>\n  <div id=\"content\" part=\"content\" class=\"not-shrink vertical\">\n    <slot part=\"slot\"></slot>\n  </div>\n  <slot name=\"footer\"></slot>\n  <div\n    id=\"placeholder-bot\"\n    class=\"overflow-placeholder bounce-item\"\n    part=\"placeholder-bot\"\n  ></div>\n</div>";
 export declare const templateXSwiper = "<style>\n  #bounce-padding {\n    display: none;\n    flex: 0 0 0;\n    align-self: stretch;\n    scroll-snap-align: none;\n    flex-basis: 100%;\n  }\n  #content {\n    position: relative;\n    display: flex;\n    flex: 0 0 100%;\n    flex-direction: inherit;\n    flex-wrap: inherit;\n    align-self: stretch;\n    justify-content: inherit;\n    align-items: inherit;\n    overflow: inherit;\n    scrollbar-width: none;\n    scroll-snap-align: start;\n    scroll-snap-type: inherit;\n  }\n  div::-webkit-scrollbar {\n    display: none;\n  }\n  #indicator-container {\n    display: none;\n  }\n  #indicator-container > div {\n    animation-name: indicator-dot;\n    animation-duration: 100ms;\n  }\n  @keyframes indicator-dot {\n    30%,\n    70% {\n      background-color: var(--indicator-color);\n    }\n    31%,\n    69% {\n      background-color: var(--indicator-active-color);\n    }\n  }\n</style>\n<style id=\"indicator-style\"></style>\n<div id=\"bounce-padding\" part=\"bounce-padding\"></div>\n<div id=\"indicator-container\" part=\"indicator-container\"></div>\n<div id=\"content\" part=\"content\">\n  <slot part=\"slot-start\" name=\"circular-start\" id=\"circular-start\"></slot>\n  <slot part=\"slot\"></slot>\n  <slot part=\"slot-end\" name=\"circular-end\" id=\"circular-end\"></slot>\n</div>";
 export declare const templateXText = "<div id=\"inner-box\" part=\"inner-box\"><slot part=\"slot\"></slot><slot name=\"inline-truncation\"></slot></div>";
+export declare const templateXMarkdown = "<style>\n  :host {\n    display: block;\n  }\n  .markdown-body {\n    display: block;\n    line-height: 1.4;\n    color: inherit;\n    word-break: break-word;\n    position: relative;\n  }\n  .markdown-body p {\n    margin: 0 0 0.75em 0;\n  }\n  .markdown-body h1,\n  .markdown-body h2,\n  .markdown-body h3,\n  .markdown-body h4,\n  .markdown-body h5,\n  .markdown-body h6 {\n    margin: 0.8em 0 0.4em 0;\n  }\n  .markdown-body ul,\n  .markdown-body ol {\n    margin: 0 0 0.75em 1.5em;\n  }\n  .markdown-body pre {\n    margin: 0 0 0.75em 0;\n    padding: 8px 12px;\n    border-radius: 6px;\n    background: #f6f8fa;\n    overflow: auto;\n  }\n  .markdown-body code {\n    font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Consolas,\n      \"Liberation Mono\", monospace;\n  }\n  .markdown-body pre code {\n    display: block;\n    padding: 0;\n  }\n  .markdown-body img {\n    max-width: 100%;\n    height: auto;\n    display: block;\n  }\n  .markdown-body .md-inline-view {\n    display: inline-block;\n    vertical-align: baseline;\n  }\n  .markdown-body .md-truncation {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    background-color: inherit;\n  }\n  .markdown-body .md-image-figure {\n    margin: 0 0 0.75em 0;\n  }\n  .markdown-body .md-image-caption {\n    margin-top: 4px;\n    color: #666;\n    font-size: 0.875em;\n  }\n  .markdown-body .md-text-mask-effect {\n    position: relative;\n    display: inline-block;\n  }\n  .markdown-body .md-text-mask-effect-overlay {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    user-select: none;\n    white-space: pre;\n    color: transparent;\n    -webkit-background-clip: text;\n    background-clip: text;\n  }\n  .markdown-body a {\n    color: #0366d6;\n    text-decoration: underline;\n  }\n</style>\n<style id=\"markdown-style\"></style>\n<div id=\"markdown-root\" part=\"root\" class=\"markdown-body\"></div>";
 export declare const templateInlineImage: (attributes: {
     src?: string;
 }) => string;

package/dist/elements/htmlTemplates.js

@@ -142,6 +142,7 @@ export const templateXList = `<style>
     <div
       class="observer placeholder-dom"
       id="upper-threshold-observer"
+      part="upper-threshold-sentinel"
     ></div>
   </div>
   <slot part="slot"></slot>
@@ -152,6 +153,7 @@ export const templateXList = `<style>
     <div
       class="observer placeholder-dom"
       id="lower-threshold-observer"
+      part="lower-threshold-sentinel"
     ></div>
   </div>
 </div>`;
@@ -294,6 +296,91 @@ export const templateXSwiper = `<style>
   <slot part="slot-end" name="circular-end" id="circular-end"></slot>
 </div>`;
 export const templateXText = `<div id="inner-box" part="inner-box"><slot part="slot"></slot><slot name="inline-truncation"></slot></div>`;
+export const templateXMarkdown = `<style>
+  :host {
+    display: block;
+  }
+  .markdown-body {
+    display: block;
+    line-height: 1.4;
+    color: inherit;
+    word-break: break-word;
+    position: relative;
+  }
+  .markdown-body p {
+    margin: 0 0 0.75em 0;
+  }
+  .markdown-body h1,
+  .markdown-body h2,
+  .markdown-body h3,
+  .markdown-body h4,
+  .markdown-body h5,
+  .markdown-body h6 {
+    margin: 0.8em 0 0.4em 0;
+  }
+  .markdown-body ul,
+  .markdown-body ol {
+    margin: 0 0 0.75em 1.5em;
+  }
+  .markdown-body pre {
+    margin: 0 0 0.75em 0;
+    padding: 8px 12px;
+    border-radius: 6px;
+    background: #f6f8fa;
+    overflow: auto;
+  }
+  .markdown-body code {
+    font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Consolas,
+      "Liberation Mono", monospace;
+  }
+  .markdown-body pre code {
+    display: block;
+    padding: 0;
+  }
+  .markdown-body img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+  .markdown-body .md-inline-view {
+    display: inline-block;
+    vertical-align: baseline;
+  }
+  .markdown-body .md-truncation {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background-color: inherit;
+  }
+  .markdown-body .md-image-figure {
+    margin: 0 0 0.75em 0;
+  }
+  .markdown-body .md-image-caption {
+    margin-top: 4px;
+    color: #666;
+    font-size: 0.875em;
+  }
+  .markdown-body .md-text-mask-effect {
+    position: relative;
+    display: inline-block;
+  }
+  .markdown-body .md-text-mask-effect-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    user-select: none;
+    white-space: pre;
+    color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+  .markdown-body a {
+    color: #0366d6;
+    text-decoration: underline;
+  }
+</style>
+<style id="markdown-style"></style>
+<div id="markdown-root" part="root" class="markdown-body"></div>`;
 export const templateInlineImage = templateXImage;
 export const templateXTextarea = `<style>
   #textarea:focus,

package/index.css

@@ -13,6 +13,7 @@
 @import url("./src/elements/XSvg/x-svg.css");
 @import url("./src/elements/XImage/x-image.css");
 @import url("./src/elements/XInput/x-input.css");
+@import url("./src/elements/XMarkdown/x-markdown.css");
 @import url("./src/elements/XOverlayNg/x-overlay-ng.css");
 @import url("./src/elements/XRefreshView/x-refresh-view.css");
 @import url("./src/elements/XSwiper/x-swiper.css");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.11.3",
+  "version": "0.12.1",
   "private": false,
   "repository": {
     "type": "git",
@@ -12,6 +12,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "@lynx-js/source-field": "./src/elements/index.ts",
       "types": "./dist/elements/index.d.ts",
       "default": "./dist/elements/index.js"
     },
@@ -58,6 +59,11 @@
       "types": "./dist/elements/XInput/index.d.ts",
       "default": "./dist/elements/XInput/index.js"
     },
+    "./XMarkdown": {
+      "@lynx-js/source-field": "./src/elements/XMarkdown/index.ts",
+      "types": "./dist/elements/XMarkdown/index.d.ts",
+      "default": "./dist/elements/XMarkdown/index.js"
+    },
     "./XOverlayNg": {
       "@lynx-js/source-field": "./src/elements/XOverlayNg/index.ts",
       "types": "./dist/elements/XOverlayNg/index.d.ts",
@@ -112,7 +118,8 @@
       "@lynx-js/source-field": "./src/elements/htmlTemplates.ts",
       "types": "./dist/elements/htmlTemplates.d.ts",
       "default": "./dist/elements/htmlTemplates.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -126,10 +133,15 @@
     "index.css",
     "**/*.css"
   ],
+  "dependencies": {
+    "dompurify": "^3.3.1",
+    "markdown-it": "^14.1.0"
+  },
   "devDependencies": {
     "@playwright/test": "^1.58.2",
-    "@rsbuild/core": "1.7.3",
+    "@rsbuild/core": "1.7.5",
     "@rsbuild/plugin-source-build": "1.0.4",
+    "@types/markdown-it": "^14.1.1",
     "nyc": "^17.1.0",
     "tslib": "^2.8.1",
     "@lynx-js/playwright-fixtures": "0.0.0"

package/src/compat/LinearContainer/linear-compat.css

@@ -26,7 +26,7 @@
   */
 @supports not
   ((content-visibility: auto) and (transition-behavior: allow-discrete) and
-    (width: 1rex)) {
+    (-webkit-box-reflect: above)) {
   * {
     --lynx-display: linear;
     --lynx-linear-weight-sum: 1;
@@ -47,6 +47,7 @@
     --flex-wrap: nowrap;
     --align-self: auto;
   }
+
   [lynx-computed-display="linear"] {
     flex-wrap: nowrap !important;
     flex-direction: column;
@@ -61,11 +62,9 @@
 
   [lynx-computed-display="flex"] > *,
   [lynx-computed-display="flex"] > lynx-wrapper > * {
-    flex: var(
-      --flex,
-      var(--flex-grow) var(--flex-shrink) var(--flex-basis)
-    );
+    flex: var(--flex, var(--flex-grow) var(--flex-shrink) var(--flex-basis));
   }
+
   [lynx-computed-display="linear"] > *,
   [lynx-computed-display="linear"] > lynx-wrapper > * {
     flex-shrink: 0 !important;
@@ -111,6 +110,7 @@
     > * {
     align-self: var(--align-self-column);
   }
+
   [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] > *,
   [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"],
   [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"]

package/src/elements/XList/x-list.css

@@ -157,6 +157,37 @@ x-list[x-enable-scrolltoloweredge-event]::part(lower-threshold-observer) {
   display: flex;
 }
 
+x-list[x-enable-scrolltoupper-event]::part(upper-threshold-sentinel),
+x-list[x-enable-scrolltoupperedge-event]::part(upper-threshold-sentinel),
+x-list[x-enable-scrolltolower-event]::part(lower-threshold-sentinel),
+x-list[x-enable-scrolltoloweredge-event]::part(lower-threshold-sentinel) {
+  flex: 0 0 1px;
+}
+
+x-list[x-enable-scrolltoupper-event]::part(upper-threshold-sentinel),
+x-list[x-enable-scrolltoupperedge-event]::part(upper-threshold-sentinel) {
+  margin-bottom: -1px;
+}
+
+x-list[x-enable-scrolltolower-event]::part(lower-threshold-sentinel),
+x-list[x-enable-scrolltoloweredge-event]::part(lower-threshold-sentinel) {
+  margin-top: -1px;
+  transform: translateY(1px);
+}
+
+x-list[scroll-orientation="horizontal"][x-enable-scrolltoupper-event]::part(upper-threshold-sentinel),
+x-list[scroll-orientation="horizontal"][x-enable-scrolltoupperedge-event]::part(upper-threshold-sentinel) {
+  margin-bottom: 0;
+  margin-right: -1px;
+}
+
+x-list[scroll-orientation="horizontal"][x-enable-scrolltolower-event]::part(lower-threshold-sentinel),
+x-list[scroll-orientation="horizontal"][x-enable-scrolltoloweredge-event]::part(lower-threshold-sentinel) {
+  margin-top: 0;
+  margin-left: -1px;
+  transform: translateX(1px);
+}
+
 x-list::part(lower-threshold-observer) {
   flex-direction: column-reverse;
 }

package/src/elements/XMarkdown/x-markdown.css

@@ -0,0 +1,15 @@
+/*
+// 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.
+*/
+x-markdown {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  color: inherit;
+}
+
+x-markdown::part(root) {
+  width: 100%;
+}

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

@@ -12,7 +12,8 @@ x-text {
   color: initial;
 }
 
-x-text > x-text, x-text > lynx-wrapper > x-text {
+x-text > x-text,
+x-text > lynx-wrapper > x-text {
   color: inherit;
 }
 
@@ -33,11 +34,17 @@ x-text > x-text::part(inner-box),
 x-text > lynx-wrapper > x-text::part(inner-box) {
   display: contents !important;
 }
-x-text::part(inner-box), inline-text, x-text::part(slot) {
+
+x-text::part(inner-box),
+inline-text,
+x-text::part(slot) {
   background-clip: inherit;
   -webkit-background-clip: inherit;
 }
-inline-text, inline-image, inline-truncation {
+
+inline-text,
+inline-image,
+inline-truncation {
   display: none;
 }
 
@@ -73,15 +80,19 @@ inline-text > lynx-wrapper > inline-image,
 inline-text > lynx-wrapper > x-image {
   display: contents !important;
 }
-x-text > x-view, x-text > lynx-wrapper > x-view {
+
+x-text > x-view,
+x-text > lynx-wrapper > x-view {
   display: inline-flex !important;
 }
+
 x-text > x-view,
 x-text[x-show-inline-truncation] > inline-truncation,
 x-text > lynx-wrapper > x-view,
 x-text[x-show-inline-truncation] > lynx-wrapper > inline-truncation {
   display: inline-flex;
 }
+
 x-text > inline-truncation:first-child,
 x-text > lynx-wrapper > inline-truncation:first-child {
   max-width: 100%;
@@ -125,7 +136,10 @@ inline-truncation > lynx-wrapper > x-image::part(img) {
 
 /* attribute text-selection */
 
-x-text, inline-text, inline-image, inline-truncation {
+x-text,
+inline-text,
+inline-image,
+inline-truncation {
   -webkit-user-select: none;
   user-select: none;
 }
@@ -154,6 +168,7 @@ x-text[text-selection] > lynx-wrapper > inline-truncation {
   -webkit-user-select: auto;
   user-select: auto;
 }
+
 x-text[x-text-clipped] > [x-text-clipped]:not(inline-truncation),
 x-text[x-text-clipped]
   > lynx-wrapper
@@ -166,9 +181,9 @@ x-text[x-text-clipped]:not([tail-color-convert="false"])::part(inner-box)::after
   content: "...";
 }
 
-x-text[x-text-clipped]:has(inline-truncation)::part(inner-box):after,
+x-text[x-text-clipped]:has(> inline-truncation)::part(inner-box):after,
 x-text[x-text-clipped][x-text-custom-overflow]::part(inner-box):after,
-x-text[x-text-clipped]:has(inline-truncation)::part(inner-box)::after,
+x-text[x-text-clipped]:has(> inline-truncation)::part(inner-box)::after,
 x-text[x-text-clipped][x-text-custom-overflow]::part(inner-box)::after {
   content: "" !important;
 }
@@ -198,41 +213,45 @@ x-text[text-maxline="0"] {
   display: none;
 }
 
-@supports not selector(:has(inline-truncation)) {
+@supports not selector(:has(> inline-truncation)) {
   x-text[text-maxline="1"]:not([tail-color-convert="false"]):not([x-text-custom-overflow])::part(inner-box) {
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 }
 
-@supports selector(:has(inline-truncation)) {
+@supports selector(:has(> inline-truncation)) {
   /* text-wrap  chrome 114, firefox 121, safari 17.4*/
-  x-text[text-maxline="1"]:not([tail-color-convert="false"], :has(inline-truncation))::part(inner-box) {
+  x-text[text-maxline="1"]:not([tail-color-convert="false"], :has(> inline-truncation))::part(inner-box) {
     text-wrap: nowrap;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 }
+
 x-text[text-maxline="1"] {
   /* This is the stretch size */
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/max-width */
   max-width: -moz-available;
   max-width: -webkit-fill-available;
 }
+
 x-text[text-maxline="1"]:not([tail-color-convert="false"])::part(inner-box) {
   display: block;
 }
 
 x-text[text-maxline][x-text-custom-overflow]::part(inner-box),
-x-text[text-maxline]:has(inline-truncation)::part(inner-box),
+x-text[text-maxline]:has(> inline-truncation)::part(inner-box),
 x-text[text-maxline][tail-color-convert="false"]::part(inner-box) {
   display: block !important;
 }
 
 raw-text {
-  display: none; /* raw-text only works in x-text */
+  display: none;
+  /* raw-text only works in x-text */
   white-space-collapse: preserve-breaks;
 }
+
 x-text > raw-text,
 inline-text > raw-text,
 x-text > lynx-wrapper > raw-text,