@lynx-js/web-elements-canary 0.9.1-canary-20251226-7903c9e4 → 0.10.0-canary-20251226-ccbf3de1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements-canary",
-  "version": "0.9.1-canary-20251226-7903c9e4",
+  "version": "0.10.0-canary-20251226-ccbf3de1",
   "private": false,
   "repository": {
     "type": "git",
@@ -12,8 +12,8 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/elements/index.d.ts",
+      "default": "./dist/elements/index.js"
     },
     "./index.css": {
       "default": "./index.css"
@@ -22,88 +22,102 @@
       "default": "./elements.css"
     },
     "./all": {
-      "types": "./dist/all.d.ts",
-      "default": "./dist/all.js"
+      "source": "./src/elements/all.ts",
+      "types": "./dist/elements/all.d.ts",
+      "default": "./dist/elements/all.js"
     },
     "./LynxWrapper": {
-      "source": "./src/LynxWrapper/index.ts",
-      "types": "./dist/LynxWrapper/index.d.ts",
-      "default": "./dist/LynxWrapper/index.js"
+      "source": "./src/elements/LynxWrapper/index.ts",
+      "types": "./dist/elements/LynxWrapper/index.d.ts",
+      "default": "./dist/elements/LynxWrapper/index.js"
     },
     "./ScrollView": {
-      "source": "./src/ScrollView/index.ts",
-      "types": "./dist/ScrollView/index.d.ts",
-      "default": "./dist/ScrollView/index.js"
+      "source": "./src/elements/ScrollView/index.ts",
+      "types": "./dist/elements/ScrollView/index.d.ts",
+      "default": "./dist/elements/ScrollView/index.js"
     },
     "./XAudioTT": {
-      "source": "./src/XAudioTT/index.ts",
-      "types": "./dist/XAudioTT/index.d.ts",
-      "default": "./dist/XAudioTT/index.js"
+      "source": "./src/elements/XAudioTT/index.ts",
+      "types": "./dist/elements/XAudioTT/index.d.ts",
+      "default": "./dist/elements/XAudioTT/index.js"
     },
     "./XCanvas": {
-      "source": "./src/XCanvas/index.ts",
-      "types": "./dist/XCanvas/index.d.ts",
-      "default": "./dist/XCanvas/index.js"
+      "source": "./src/elements/XCanvas/index.ts",
+      "types": "./dist/elements/XCanvas/index.d.ts",
+      "default": "./dist/elements/XCanvas/index.js"
     },
     "./XFoldViewNg": {
-      "source": "./src/XFoldViewNg/index.ts",
-      "types": "./dist/XFoldViewNg/index.d.ts",
-      "default": "./dist/XFoldViewNg/index.js"
+      "source": "./src/elements/XFoldViewNg/index.ts",
+      "types": "./dist/elements/XFoldViewNg/index.d.ts",
+      "default": "./dist/elements/XFoldViewNg/index.js"
     },
     "./XImage": {
-      "source": "./src/XImage/index.ts",
-      "types": "./dist/XImage/index.d.ts",
-      "default": "./dist/XImage/index.js"
+      "source": "./src/elements/XImage/index.ts",
+      "types": "./dist/elements/XImage/index.d.ts",
+      "default": "./dist/elements/XImage/index.js"
     },
     "./XInput": {
-      "source": "./src/XInput/index.ts",
-      "types": "./dist/XInput/index.d.ts",
-      "default": "./dist/XInput/index.js"
+      "source": "./src/elements/XInput/index.ts",
+      "types": "./dist/elements/XInput/index.d.ts",
+      "default": "./dist/elements/XInput/index.js"
     },
     "./XOverlayNg": {
-      "source": "./src/XOverlayNg/index.ts",
-      "types": "./dist/XOverlayNg/index.d.ts",
-      "default": "./dist/XOverlayNg/index.js"
+      "source": "./src/elements/XOverlayNg/index.ts",
+      "types": "./dist/elements/XOverlayNg/index.d.ts",
+      "default": "./dist/elements/XOverlayNg/index.js"
     },
     "./XRefreshView": {
-      "source": "./src/XRefreshView/index.ts",
-      "types": "./dist/XRefreshView/index.d.ts",
-      "default": "./dist/XRefreshView/index.js"
+      "source": "./src/elements/XRefreshView/index.ts",
+      "types": "./dist/elements/XRefreshView/index.d.ts",
+      "default": "./dist/elements/XRefreshView/index.js"
     },
     "./XSvg": {
-      "source": "./src/XSvg/index.ts",
-      "types": "./dist/XSvg/index.d.ts",
-      "default": "./dist/XSvg/index.js"
+      "source": "./src/elements/XSvg/index.ts",
+      "types": "./dist/elements/XSvg/index.d.ts",
+      "default": "./dist/elements/XSvg/index.js"
     },
     "./XSwiper": {
-      "source": "./src/XSwiper/index.ts",
-      "types": "./dist/XSwiper/index.d.ts",
-      "default": "./dist/XSwiper/index.js"
+      "source": "./src/elements/XSwiper/index.ts",
+      "types": "./dist/elements/XSwiper/index.d.ts",
+      "default": "./dist/elements/XSwiper/index.js"
     },
     "./XText": {
-      "source": "./src/XText/index.ts",
-      "types": "./dist/XText/index.d.ts",
-      "default": "./dist/XText/index.js"
+      "source": "./src/elements/XText/index.ts",
+      "types": "./dist/elements/XText/index.d.ts",
+      "default": "./dist/elements/XText/index.js"
     },
     "./XTextarea": {
-      "source": "./src/XTextarea/index.ts",
-      "types": "./dist/XTextarea/index.d.ts",
-      "default": "./dist/XTextarea/index.js"
+      "source": "./src/elements/XTextarea/index.ts",
+      "types": "./dist/elements/XTextarea/index.d.ts",
+      "default": "./dist/elements/XTextarea/index.js"
     },
     "./XView": {
-      "source": "./src/XView/index.ts",
-      "types": "./dist/XView/index.d.ts",
-      "default": "./dist/XView/index.js"
+      "source": "./src/elements/XView/index.ts",
+      "types": "./dist/elements/XView/index.d.ts",
+      "default": "./dist/elements/XView/index.js"
     },
     "./XViewpagerNg": {
-      "source": "./src/XViewpagerNg/index.ts",
-      "types": "./dist/XViewpagerNg/index.d.ts",
-      "default": "./dist/XViewpagerNg/index.js"
+      "source": "./src/elements/XViewpagerNg/index.ts",
+      "types": "./dist/elements/XViewpagerNg/index.d.ts",
+      "default": "./dist/elements/XViewpagerNg/index.js"
     },
     "./XList": {
-      "source": "./src/XList/index.ts",
-      "types": "./dist/XList/index.d.ts",
-      "default": "./dist/XList/index.js"
+      "source": "./src/elements/XList/index.ts",
+      "types": "./dist/elements/XList/index.d.ts",
+      "default": "./dist/elements/XList/index.js"
+    },
+    "./html-templates": {
+      "source": "./src/elements/htmlTemplates.ts",
+      "types": "./dist/elements/htmlTemplates.d.ts",
+      "default": "./dist/elements/htmlTemplates.js"
+    },
+    "./compat/LinearContainer": {
+      "source": "./src/compat/LinearContainer/LinearContainer.ts",
+      "types": "./dist/compat/LinearContainer/LinearContainer.d.ts",
+      "default": "./dist/compat/LinearContainer/LinearContainer.js"
+    },
+    "./compat/LinearContainer/linear-compat.css": {
+      "default": "./src/compat/LinearContainer/linear-compat.css"
     }
   },
   "main": "dist/index.js",
@@ -118,14 +132,23 @@
     "index.css",
     "**/*.css"
   ],
-  "dependencies": {
-    "@lynx-js/web-elements-reactive": "npm:@lynx-js/web-elements-reactive-canary@0.2.2",
-    "@lynx-js/web-elements-template": "npm:@lynx-js/web-elements-template-canary@0.9.1-canary-20251226-7903c9e4"
-  },
   "devDependencies": {
-    "tslib": "^2.8.1"
+    "@playwright/test": "^1.57.0",
+    "@rsbuild/core": "1.6.13",
+    "@rsbuild/plugin-source-build": "^1.0.3",
+    "nyc": "^17.1.0",
+    "tslib": "^2.8.1",
+    "@lynx-js/playwright-fixtures": "0.0.0"
   },
   "peerDependencies": {
     "tslib": "^2.5.0"
+  },
+  "scripts": {
+    "coverage:ci": "nyc report --cwd=$(realpath ../) --reporter=lcov",
+    "serve": "pnpm rsbuild dev",
+    "test": "playwright test",
+    "test:debug": "playwright test --ui",
+    "test:install": "playwright install --with-deps chromium firefox webkit",
+    "test:update": "playwright test --ui --update-snapshots"
   }
 }

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

@@ -0,0 +1,124 @@
+/** For @property
+  chrome 85, edge 85, firefox 128, safari 16.4
+  https://developer.chrome.com/blog/new-in-chrome-85
+
+  * content-visibility:auto 
+    chrome 85, firefox 125, safari 18
+    (https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility)
+  
+  * contain-intrinsic-size:auto 
+    chrome 83, firefox 107, safari 17
+    (https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size)
+
+  * relative-color and  display:ruby-base
+    display: ruby-base firefox-only
+    background-color: rgb(from red 200 g b) firefox 127
+    https://caniuse.com/?search=relative%20color#google_vignette
+    https://developer.mozilla.org/en-US/docs/Web/CSS/display#browser_compatibility
+  
+    rules for: chrome 85, firefox 127, safari 18
+ 
+  References:
+  https://chromestatus.com/features#milestone%3D85
+  https://www.mozilla.org/en-US/firefox/128.0/releasenotes/
+  https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes
+  https://caniuse.com/?search=relative%20colors
+  */
+@supports not
+  ((content-visibility: auto) and (transition-behavior: allow-discrete) and
+    (width: 1rex)) {
+  * {
+    --lynx-display: linear;
+    --lynx-linear-weight-sum: 1;
+    --lynx-linear-weight: 0;
+    --justify-content-column: flex-start;
+    --justify-content-column-reverse: flex-start;
+    --justify-content-row: flex-start;
+    --justify-content-row-reverse: flex-start;
+    --align-self-row: auto;
+    --align-self-column: auto;
+    --lynx-linear-weight-basis: auto;
+    --lynx-linear-orientation: vertical;
+    --flex-direction: row;
+    --flex-grow: 0;
+    --flex-shrink: 1;
+    --flex-basis: auto;
+    --justify-content: flex-start;
+    --flex-wrap: nowrap;
+    --align-self: auto;
+  }
+}
+[lynx-computed-display="linear"] {
+  flex-wrap: nowrap !important;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+[lynx-computed-display="flex"] {
+  flex-direction: var(--flex-direction);
+  justify-content: var(--justify-content);
+  flex-wrap: var(--flex-wrap);
+}
+
+[lynx-computed-display="flex"] > *,
+[lynx-computed-display="flex"] > lynx-wrapper > * {
+  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;
+  flex-grow: calc(
+    var(--lynx-linear-weight) /
+      calc(
+      var(--lynx-linear-weight-sum) +
+        (
+        1 - clamp(0, var(--lynx-linear-weight-sum) * 999999, 1)
+      )
+    )
+  ) !important;
+  flex-basis: var(--lynx-linear-weight-basis) !important;
+}
+
+[lynx-computed-display="linear"][lynx-linear-orientation="vertical"] {
+  flex-direction: column !important;
+  justify-content: var(--justify-content-column);
+}
+
+[lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] {
+  flex-direction: row !important;
+  justify-content: var(--justify-content-row);
+}
+
+[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] {
+  flex-direction: column-reverse !important;
+  justify-content: var(--justify-content-column-reverse);
+}
+
+[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"] {
+  flex-direction: row-reverse !important;
+  justify-content: var(--justify-content-row-reverse);
+}
+
+[lynx-computed-display="linear"][lynx-linear-orientation="vertical"] > *,
+[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"],
+[lynx-computed-display="linear"][lynx-linear-orientation="vertical"]
+  > lynx-wrapper
+  > *,
+[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"]
+  > lynx-wrapper
+  > * {
+  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"]
+  > lynx-wrapper
+  > *,
+[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"]
+  > lynx-wrapper
+  > * {
+  align-self: var(--align-self-row);
+}

package/src/{common-css → elements/common-css}/linear.css

@@ -258,7 +258,7 @@ list-item {
  *
  * update this once firefox supports this.
  * 
- * If you want to be fully compatible with chrome below 117, you need to use a plugin @lynx-js/web-elements-compat.
+ * If you want to be fully compatible with chrome below 117, you need to use @lynx-js/web-elements/compat/LinearContainer.
  */
 @supports (content-visibility: auto) and
   (transition-behavior: allow-discrete) and (width: 1rex) {

package/dist/LynxWrapper/index.d.ts

@@ -1 +0,0 @@
-export { LynxWrapper } from './LynxWrapper.js';

package/dist/LynxWrapper/index.js

@@ -1,2 +0,0 @@
-export { LynxWrapper } from './LynxWrapper.js';
-//# sourceMappingURL=index.js.map

package/dist/ScrollView/index.d.ts

@@ -1 +0,0 @@
-export { ScrollView } from './ScrollView.js';

package/dist/ScrollView/index.js

@@ -1,2 +0,0 @@
-export { ScrollView } from './ScrollView.js';
-//# sourceMappingURL=index.js.map

package/dist/XAudioTT/index.d.ts

@@ -1 +0,0 @@
-export { XAudioTT } from './XAudioTT.js';

package/dist/XAudioTT/index.js

@@ -1,2 +0,0 @@
-export { XAudioTT } from './XAudioTT.js';
-//# sourceMappingURL=index.js.map

package/dist/XCanvas/index.d.ts

@@ -1 +0,0 @@
-export { XCanvas } from './XCanvas.js';

package/dist/XCanvas/index.js

@@ -1,2 +0,0 @@
-export { XCanvas } from './XCanvas.js';
-//# sourceMappingURL=index.js.map

package/dist/XFoldViewNg/index.d.ts

@@ -1,5 +0,0 @@
-export { XFoldviewHeaderNg } from './XFoldviewHeaderNg.js';
-export { XFoldviewNg } from './XFoldviewNg.js';
-export { XFoldviewSlotDragNg } from './XFoldviewSlotDragNg.js';
-export { XFoldviewSlotNg } from './XFoldviewSlotNg.js';
-export { XFoldviewToolbarNg } from './XFoldviewToolbarNg.js';

package/dist/XFoldViewNg/index.js

@@ -1,6 +0,0 @@
-export { XFoldviewHeaderNg } from './XFoldviewHeaderNg.js';
-export { XFoldviewNg } from './XFoldviewNg.js';
-export { XFoldviewSlotDragNg } from './XFoldviewSlotDragNg.js';
-export { XFoldviewSlotNg } from './XFoldviewSlotNg.js';
-export { XFoldviewToolbarNg } from './XFoldviewToolbarNg.js';
-//# sourceMappingURL=index.js.map

package/dist/XImage/index.d.ts

@@ -1,2 +0,0 @@
-export { FilterImage } from './FilterImage.js';
-export { XImage } from './XImage.js';

package/dist/XImage/index.js

@@ -1,3 +0,0 @@
-export { FilterImage } from './FilterImage.js';
-export { XImage } from './XImage.js';
-//# sourceMappingURL=index.js.map

package/dist/XInput/index.d.ts

@@ -1 +0,0 @@
-export { XInput } from './XInput.js';

package/dist/XInput/index.js

@@ -1,2 +0,0 @@
-export { XInput } from './XInput.js';
-//# sourceMappingURL=index.js.map

package/dist/XList/index.d.ts

@@ -1,2 +0,0 @@
-export { ListItem } from './ListItem.js';
-export { XList } from './XList.js';

package/dist/XList/index.js

@@ -1,3 +0,0 @@
-export { ListItem } from './ListItem.js';
-export { XList } from './XList.js';
-//# sourceMappingURL=index.js.map

package/dist/XOverlayNg/index.d.ts

@@ -1 +0,0 @@
-export { XOverlayNg } from './XOverlayNg.js';

package/dist/XOverlayNg/index.js

@@ -1,2 +0,0 @@
-export { XOverlayNg } from './XOverlayNg.js';
-//# sourceMappingURL=index.js.map

package/dist/XRefreshView/index.d.ts

@@ -1,3 +0,0 @@
-export { XRefreshFooter } from './XRefreshFooter.js';
-export { XRefreshHeader } from './XRefreshHeader.js';
-export { XRefreshView } from './XRefreshView.js';

package/dist/XRefreshView/index.js

@@ -1,4 +0,0 @@
-export { XRefreshFooter } from './XRefreshFooter.js';
-export { XRefreshHeader } from './XRefreshHeader.js';
-export { XRefreshView } from './XRefreshView.js';
-//# sourceMappingURL=index.js.map

package/dist/XSvg/index.d.ts

@@ -1 +0,0 @@
-export { XSvg } from './XSvg.js';

package/dist/XSvg/index.js

@@ -1,2 +0,0 @@
-export { XSvg } from './XSvg.js';
-//# sourceMappingURL=index.js.map

package/dist/XSwiper/index.d.ts

@@ -1,2 +0,0 @@
-export { SwiperItem } from './SwiperItem.js';
-export { XSwiper } from './XSwiper.js';

package/dist/XSwiper/index.js

@@ -1,3 +0,0 @@
-export { SwiperItem } from './SwiperItem.js';
-export { XSwiper } from './XSwiper.js';
-//# sourceMappingURL=index.js.map

package/dist/XText/index.d.ts

@@ -1,5 +0,0 @@
-export { InlineImage } from './InlineImage.js';
-export { InlineText } from './InlineText.js';
-export { InlineTruncation } from './InlineTruncation.js';
-export { RawText } from './RawText.js';
-export { XText } from './XText.js';

package/dist/XText/index.js

@@ -1,6 +0,0 @@
-export { InlineImage } from './InlineImage.js';
-export { InlineText } from './InlineText.js';
-export { InlineTruncation } from './InlineTruncation.js';
-export { RawText } from './RawText.js';
-export { XText } from './XText.js';
-//# sourceMappingURL=index.js.map

package/dist/XTextarea/index.d.ts

@@ -1 +0,0 @@
-export { XTextarea } from './XTextarea.js';

package/dist/XTextarea/index.js

@@ -1,2 +0,0 @@
-export { XTextarea } from './XTextarea.js';
-//# sourceMappingURL=index.js.map

package/dist/XView/index.d.ts

@@ -1,2 +0,0 @@
-export { XView } from './XView.js';
-export { XBlurView } from './XBlurView.js';

package/dist/XView/index.js

@@ -1,3 +0,0 @@
-export { XView } from './XView.js';
-export { XBlurView } from './XBlurView.js';
-//# sourceMappingURL=index.js.map

package/dist/XViewpagerNg/index.d.ts

@@ -1,2 +0,0 @@
-export { XViewpagerNg } from './XViewpagerNg.js';
-export { XViewpagerItemNg } from './XViewpagerItemNg.js';

package/dist/XViewpagerNg/index.js

@@ -1,3 +0,0 @@
-export { XViewpagerNg } from './XViewpagerNg.js';
-export { XViewpagerItemNg } from './XViewpagerItemNg.js';
-//# sourceMappingURL=index.js.map

package/dist/index.d.ts

@@ -1,4 +0,0 @@
-export * from '@lynx-js/web-elements-reactive';
-export * from './common/CommonEventsAndMethods.js';
-export * from './common/commonEventInitConfiguration.js';
-export * from './common/constants.js';

package/dist/index.js

@@ -1,8 +0,0 @@
-// 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 * from '@lynx-js/web-elements-reactive';
-export * from './common/CommonEventsAndMethods.js';
-export * from './common/commonEventInitConfiguration.js';
-export * from './common/constants.js';
-//# sourceMappingURL=index.js.map