npm - @epa-wg/custom-element-dist - Versions diffs - 0.0.21 → 0.0.23 - Mend

@epa-wg/custom-element-dist 0.0.21 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (174) hide show

package/src/custom-element/demo/form.html ADDED Viewed

@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>Forms - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="module" src="../local-storage.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+        label {
+            display: flex;
+        }
+        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
+            flex-direction: column;
+        }
+        nav {
+            max-width: 32em;
+        }
+    </style>
+    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
+         todo: apply setCustomValidity( warningStr )
+    -->
+</head>
+<body>
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+    <p> <b>formData</b><br/>
+        The values of named form fields are populated into the <b>slice</b> as <b>form-data</b> on <var>change</var>
+        or <var>submit</var> event. The field values can be used in form validation via <var>custom-validity</var>
+        attribute
+        and in condition to enabling the form parts
+        <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">formData MDN</a>
+    </p>
+    <details>
+        <summary>slice to form-data mapping</summary>
+        <html-demo-element>
+            <template>
+                <datadom hidden>
+                    <slice>
+                        <signin-form>
+                            <form-data>
+                                <username>QWE</username>
+                                <password>ASD</password>
+                            </form-data>
+                        </signin-form>
+                    </slice>
+                </datadom>
+            </template>
+        </html-demo-element>
+    </details>
+    <p> <b> custom-validity attribute </b><br/>
+        applied on the form itself or on the form field.<br/>
+        The value is an XPath over DCE <var>datadom</var>. When evaluated as <u>boolean</u>, it would enable(true) or
+        disable(false)
+        the form submission, acting as form validation mechanism.<br>
+        Alternatively, the value can be evaluated as a <u>string</u> which would be treated as an error and can be used
+        as
+        validation error message set as <var>@validation-message</var> attribute on the form slice.
+        Look for <var>email-form/@validation-message</var> example on the page.<br/>
+    </p>
+    <p> When <var>custom-validity</var> attribute is set on the field, its XPath evaluated value is propagated to
+        <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage">
+            validationMessage property</a>. Which would be shown via browser system popup as the field validation error.
+    </p>
+    <p> <var>@validation-message</var> is set either by <var>custom-validity</var> attribute or by browser as system message.
+        By default, it is shown as popup on the field validation. But also is available for template as a string via
+        form field attribute. Like in <var>email-form/@validation-message</var>.
+    </p>
+    <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form Validation MDN</a>
+</nav>
+<html-demo-element legend="1. Simple validation"
+                   description="custom-validity boolean value prevents submission, username length switches Next to 'Sign In' button  ">
+    <ol>
+        <li> Click Next, observe the warning</li>
+        <li> Fill input with 10+ characters</li>
+        <li> Click Next, the password and "Sign In" button should appear</li>
+    </ol>
+    <template>
+        <custom-element>
+            <template>
+                <form slice="signin-form"
+                      custom-validity="
+                            string-length(/datadom/slice/signin-form/form-data/username) &gt; 10
+                            and string-length(//form-data/password) &gt; 3 "
+                >
+                    <label> Email
+                        <input name="username" autocomplete="username" placeholder="Email, phone, or username"
+                               required="">
+                    </label>
+                    <variable name="showpassword" select="string-length(//form-data/username) &gt; 10 "></variable>
+                    <if test="not($showpassword)">
+                        <button slice="confirm" slice-event="click" slice-value="'password'">Next</button>
+                    </if>
+                    <if test="$showpassword">
+                        <label>Enter password: <input name="password" type="password" required> </label>
+                        <button>Sign In</button>
+                    </if>
+                    username {//username}
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="2. Form life cycle demo"
+                   description="form-data in the form slice is the source of truth">
+    <template>
+        <custom-element>
+            <template>
+                <form slice="signin-form"
+                      custom-validity="
+                            string-length(/datadom/slice/signin-form/form-data/username) &gt; 9
+                            and (   ( //confirm-by = 'sms' )
+                                    or ( //confirm-by = 'email' )
+                                    or ( //confirm-by = 'password' and string-length(//form-data/password) &gt; 3 )
+                                )
+                        "
+                >
+                    <!-- form validity should be based on form-data -->
+                    <variable name="warn">
+                        <if test="string-length(//username-slice) &lt; 9 ">
+                            Should be 10 or more symbols. &nbsp;
+                            <!-- updated by slice on input event -->
+                        </if>
+                        <if test="//form-data/confirm-by = 'sms'">
+                            Message and Data Rates may apply.
+                            <!-- updated by form change by radio select -->
+                        </if>
+                    </variable>
+                    <label> Enter your email, phone, or user name
+                        <input name="username" autocomplete="username"
+                               placeholder="Email, phone, or username"
+                               custom-validity="( string-length(//username-slice) &gt; 9 ) ?? 'should be 10+ symbols'"
+                               slice-event="input"
+                               slice="username-slice"
+                               required
+                        />
+                    </label>
+                    <var> {$warn} </var>
+                    <fieldset>
+                        <legend>Confirm by</legend>
+                        <label><input type="radio" name="confirm-by" value="email"/> email </label>
+                        <label><input type="radio" name="confirm-by" value="sms"/> text to phone </label>
+                        <label><input type="radio" name="confirm-by" value="password"/> password </label>
+                        <if test="/datadom/slice/signin-form/form-data/confirm-by = 'password'">
+                            <label>Enter password: <input type="password" NAME="password"
+                                                          custom-validity="( string-length(//form-data/password) &gt; 3 ) ?? 'password is too short'"
+                            /></label>
+                        </if>
+                        <if test="not(//confirm-by)">
+                            Please select the auth method
+                        </if>
+                    </fieldset>
+                    <section>
+                        <button>Sign In</button>
+                    </section>
+                </form>
+                //username-slice {//username-slice}<br/>
+                //username {//username}<br/>
+                //confirm-by {//confirm-by}<br/>
+                //password {//password}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="3. read system validity message"
+                   description="validationMessage propagated into slice as 'validation-message' attribute ">
+    <ol>
+        <li> type in input field</li>
+        <li> delete input field content</li>
+        <li> observe the warning in string bellow input</li>
+        <li> Click Next observe the system warning in dropdown and in string bellow input</li>
+    </ol>
+    <template>
+        <custom-element>
+            <template>
+                <form slice="email-form">
+                    <label> Email
+                        <input slice="username" slice-event="input" placeholder="non-empty" required>
+                    </label>
+                    <if test="//username/@validation-message">
+                        <var>{//username/@validation-message}</var>
+                    </if>
+                    <button>Next</button>
+                    <p>{//email-form/@validation-message}</p>
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="4. form validity message"
+                   description="@validation-message propagated into form slice and  ">
+    <ol>
+        <li> type up to 3 chars in input field</li>
+        <li> observe the slice value change</li>
+        <li> click next</li>
+        <li> observe the warning bellow the button</li>
+    </ol>
+    <template>
+        <custom-element>
+            <template>
+                <form slice="email-form"
+                      custom-validity=" string-length(//slice/username) &gt; 3 ??
+                        concat('should be more than 3 characters, now is ',string-length(//slice/username) ) "
+                >
+                    <label> Email
+                        <input name="email" slice="username" slice-event="input" placeholder="non-empty" required/>
+                    </label>
+                    <if test="//username/@validation-message">
+                        <var>{//username/@validation-message}</var>
+                    </if>
+                    <button>Next</button>
+                    <p>//email-form/@validation-message: {//email-form/@validation-message} </p>
+                    <p>//slice/username: {//slice/username} </p>
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+</body>
+</html>

package/src/custom-element/demo/s.xml CHANGED Viewed

@@ -1,14 +1,11 @@
-<div xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><!-- wrapping into template to prevent images loading within DCE declaration -->
-    <local-storage key="undefined" slice="s" }=""></local-storage>
-    <input placeholder="value for localStorage" slice="s" value="{ //s ?? 'undefined' }" />
-    <button>set</button>
-    <button slice="sv" slice-value="''" slice-event="click">set blank</button>
-    <button slice="sv" slice-value="'/reflect'" slice-event="click">/reflect</button>
-    <button slice="sv" slice-value="'/pokemon?limit=6'" slice-event="click">/pokemon?limit=6</button>
-    <button slice="sv" slice-value="'/pokemon?limit=3'" slice-event="click">/pokemon?limit=3</button>
-    <br />
-    <var>undefined</var>:<code>{ //slice/s }</code>
-    <br />
-    undefined
-</div>
+<?xml version="1.0" encoding="UTF-8"?>
+<datadom>
+    <slice>
+        <signin-form>
+            <form-data>
+                <username>QWE</username>
+                <password>ASD</password>
+            </form-data>
+        </signin-form>
+    </slice>
+</datadom>

package/src/custom-element/demo/s.xslt CHANGED Viewed

@@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
                 xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
                 exclude-result-prefixes="exsl">
@@ -14,56 +15,39 @@
     </xsl:template>
     <xsl:template mode="payload" match="attributes">
         <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
-            <http-request xmlns="" url="{concat(//s , '') }" slice="s" data-dce-id="2"/>
-            <p xmlns="" data-dce-id="3">Pokemon Count:
-                <xsl:value-of select="count(/datadom/slice/s//results)"/>
-            </p>
-            <xsl:if xmlns:xsl="http://www.w3.org/1999/XSL/Transform" test="count(/datadom/slice/s//results) &lt; 0">
-                <h3 xmlns="" data-dce-id="4">loading...</h3>
-            </xsl:if>
-            <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="/datadom/slice/s//results">
-                <xsl:variable name="pokeid"
-                              select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"/>
-                <button xmlns="" data-dce-id="5">
-                    <xsl:value-of select="@name">
-                    </xsl:value-of>
-                </button>
-            </xsl:for-each>
-            <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="//slice/s/value/*">
-                <ul xmlns="" data-dce-id="6">
-                    <var data-testid="request-section" data-dce-id="7">
-                        <dce-text data-dce-id="8">
-                            <xsl:value-of select="name(.)"/>
-                        </dce-text>
-                    </var>
-                    <xsl:for-each select="@*">
-                        <div data-dce-id="9">
-                            <var data-dce-id="10">@<xsl:value-of select="local-name(.)"/>
-                            </var>
-                            <dce-text data-dce-id="11">
-                                =
-                            </dce-text>
-                            <code data-testid="attr-{local-name(.)}" data-dce-id="12">
-                                <xsl:value-of select="."/>
-                            </code>
-                        </div>
-                    </xsl:for-each>
-                </ul>
-            </xsl:for-each>
+            <u xmlns="" data-dce-id="2">
+                <dce-text data-dce-id="3">
+                    <xsl:call-template name="slot">
+                        <xsl:with-param name="slotname" select="''"/>
+                        <xsl:with-param name="defaultvalue">
+                            <dce-text xmlns="" data-dce-id="4">is green</dce-text>
+                        </xsl:with-param>
+                    </xsl:call-template>
+                </dce-text>
+            </u>
         </dce-root>
     </xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
+    <xsl:template match="@*|node()" mode="copy-html">
+      <xsl:copy><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:copy>
+    </xsl:template>
+    <xsl:template match="node()[starts-with(name(),'xhtml:')]" mode="copy-html">
+      <xsl:element name="{local-name()}"><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:element>
+    </xsl:template>
     <xsl:template name="slot">
         <xsl:param name="slotname"/>
         <xsl:param name="defaultvalue"/>
         <xsl:choose>
             <xsl:when test="//payload/*[@slot=$slotname]">
-                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+                <xsl:apply-templates mode="copy-html" select="//payload/*[@slot=$slotname]"/>
             </xsl:when>
             <xsl:otherwise>
-                <xsl:copy-of select="$defaultvalue"/>
+                <xsl:apply-templates mode="copy-html" select="$defaultvalue"/>
             </xsl:otherwise>
         </xsl:choose>
     </xsl:template>

package/src/custom-element/demo/s1.xslt ADDED Viewed

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
+                exclude-result-prefixes="exsl">
+    <xsl:template match="ignore">
+        <xsl:choose>
+            <xsl:when test="//attr">
+                <xsl:value-of select="//attr"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:value-of select="def"/>
+            </xsl:otherwise>
+        </xsl:choose>
+        <xsl:value-of select="."/>
+    </xsl:template>
+    <xsl:template mode="payload" match="attributes">
+        <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
+            <u xmlns="" data-dce-id="2">
+                <dce-text data-dce-id="3">
+                    <xsl:call-template name="slot">
+                        <xsl:with-param name="slotname" select="''"/>
+                        <xsl:with-param name="defaultvalue">
+                            <dce-text xmlns="" data-dce-id="4">is green</dce-text>
+                        </xsl:with-param>
+                    </xsl:call-template>
+                </dce-text>
+            </u>
+        </dce-root>
+    </xsl:template>
+    <xsl:template match="/">
+        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
+    </xsl:template>
+    <xsl:template match="@*|node()" mode="copy-html">
+      <xsl:copy><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:copy>
+    </xsl:template>
+    <xsl:template match="node()[starts-with(name(),'xhtml:')]" mode="copy-html">
+      <xsl:element name="{local-name()}"><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:element>
+    </xsl:template>
+    <xsl:template name="slot">
+        <xsl:param name="slotname"/>
+        <xsl:param name="defaultvalue"/>
+        <xsl:choose>
+            <xsl:when test="//payload/*[@slot=$slotname]">
+                <xsl:apply-templates mode="copy-html" select="//payload/*[@slot=$slotname]"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:apply-templates mode="copy-html" select="$defaultvalue"/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
+    <xsl:variable name="js-injected-body">
+        <xsl:call-template name="slot">
+            <xsl:with-param name="slotname" select="''"/>
+            <xsl:with-param name="defaultvalue"/>
+        </xsl:call-template>
+    </xsl:variable>
+</xsl:stylesheet>

package/src/custom-element/ide/customData-dce.json CHANGED Viewed

@@ -27,6 +27,19 @@
         }
       ]
     },
+    {
+      "name": "custom-validity",
+      "description": {
+        "kind": "markdown",
+        "value": "XPath expression to return either boolean or error string to be shown by browser native UI on form validation event. Unless value is true, prevents the form submission."
+      },
+      "references": [
+        {
+          "name": "Demo",
+          "url": "https://unpkg.com/@epa-wg/custom-element/demo/form.html"
+        }
+      ]
+    },
     {
       "name": "slice-value",
       "description": {
@@ -109,4 +122,4 @@
       ]
     }
   ]
-}
+}

package/src/custom-element/ide/web-types-dce.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/web-types",
   "name": "@epa-wg/custom-element",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -17,6 +17,11 @@
           "description": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event",
           "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
         },
+        {
+          "name": "custom-validity",
+          "description": "XPath expression to return either boolean or error string to be shown by browser native UI on form validation event. Unless value is true, prevents the form submission.",
+          "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/form.html"
+        },
         {
           "name": "slice-value",
           "description": "XPath expression to populate into the slice",

package/src/custom-element/ide/web-types-xsl.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.21",
+    "version": "0.0.23",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/src/custom-element/index.html CHANGED Viewed

@@ -35,6 +35,7 @@
         <a href="./demo/scoped-css.html"        >scoped CSS         </a> |
         <a href="./demo/parameters.html"        >attributes         </a> |
         <a href="./demo/data-slices.html"       >data slices/events </a> |
+        <a href="./demo/form.html"              >Form validation    </a> |
         <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a>
     </section>
 </nav>

package/src/custom-element.test.ts CHANGED Viewed

@@ -1,10 +1,26 @@
-import { expect, test } from 'vitest'
-import { deepEqual}     from './custom-element/custom-element.js'
+import {expect, test}                  from 'vitest'
+import {deepEqual, xml2dom, xmlString, obj2node } from './custom-element/custom-element.js'
-test('deepEqual', () => {
-  expect(deepEqual(1, 1) ).toBe(true);
-  expect(deepEqual({}, null) ).toBe(false);
-  expect(deepEqual({a:1},{a:1,b:2}) ).toBe(false);
-  expect(deepEqual({a:1},{a:2}) ).toBe(false);
-  expect(deepEqual({a:1},{a:1}) ).toBe(true);
+test('deepEqual', () =>
+{
+    expect(deepEqual(1, 1)).toBe(true);
+    expect(deepEqual({}, null)).toBe(false);
+    expect(deepEqual({a: 1}, {a: 1, b: 2})).toBe(false);
+    expect(deepEqual({a: 1}, {a: 2})).toBe(false);
+    expect(deepEqual({a: 1}, {a: 1})).toBe(true);
+})
+test('xml2dom', () =>
+{
+    const dom = xml2dom('<a/>');
+    expect(dom.documentElement.localName).to.equal('a');
+    expect(dom.documentElement.childNodes.length).to.equal(0);
+    const xStr = xmlString(dom);
+    expect(xStr).to.include('<a');
+})
+test('obj2node', () =>
+{
+    expect(obj2node(()=>{}      , 'f',document).outerHTML).to.equal('<f></f>'       );
+    expect(obj2node(9           , 'a',document).outerHTML).to.equal('<a>9</a>'      );
+    expect(obj2node('abc'       , 's',document).outerHTML).to.equal('<s>abc</s>'    );
+    expect(obj2node({a:1,b:{c:'abc'}}       , 's',document).outerHTML).to.equal('<s a="1"><b c="abc"></b></s>');
 })

package/src/stories/{attributes.stories.ts → attributes.test.stories.ts} RENAMED Viewed

@@ -1,13 +1,14 @@
 // noinspection DuplicatedCode
-import type { StoryObj }             from '@storybook/web-components';
-import {expect, getByTestId, within, userEvent} from '@storybook/test';
+import type { StoryObj }                        from '@storybook/web-components';
+import {expect, within} from '@storybook/test';
 import '../custom-element/custom-element.js';
 type TProps = { title: string; body:string};
 type Story = StoryObj<TProps>;
 function sleep(ms: number) {    return new Promise((resolve) => setTimeout(resolve, ms)); }
 function render(args: TProps)
@@ -36,8 +37,8 @@ export const AttributeDefaults:Story  =
             <attribute name="p1">default_P1                </attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
             <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
-            p1: <code data-testid="p1">{$p1}</code> <br/>
-            p2: <code data-testid="p2">{$p2}</code> <br/>
+            p1: <code data-testid="p1">{$p1}</code> <br/>
+            p2: <code data-testid="p2">{$p2}</code> <br/>
             p3: <code data-testid="p3">{$p3}</code>
         </template>
     </custom-element>
@@ -64,8 +65,8 @@ export const AttributesRuntimeChange:Story  =
             <attribute name="p1">default_P1                </attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
             <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
-            p1: <code data-testid="p1">{$p1}</code> <br/>
-            p2: <code data-testid="p2">{$p2}</code> <br/>
+            p1: <code data-testid="p1">{$p1}</code> <br/>
+            p2: <code data-testid="p2">{$p2}</code> <br/>
             p3: <code data-testid="p3">{$p3}</code>
         </template>
     </custom-element>
@@ -110,8 +111,8 @@ export const InstanceAttributes:Story  =
             <attribute name="p1">default_P1                </attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
             <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
-            p1: <code data-testid="p1">{$p1}</code> <br/>
-            p2: <code data-testid="p2">{$p2}</code> <br/>
+            p1: <code data-testid="p1">{$p1}</code> <br/>
+            p2: <code data-testid="p2">{$p2}</code> <br/>
             p3: <code data-testid="p3">{$p3}</code>
         </template>
     </custom-element>
@@ -122,7 +123,7 @@ export const InstanceAttributes:Story  =
         const titleText = AttributeDefaults.args!.title as string;
         const canvas = within(canvasElement)
         , code = async (id) => (await canvas.findByTestId(id)).textContent.trim();
+debugger;
         await sleep(20)
         expect( await code('p1') ).toEqual('123' );
         expect( await code('p2') ).toEqual('always_p2'  );
@@ -130,3 +131,12 @@ export const InstanceAttributes:Story  =
     },
 };
+/* istanbul ignore else -- @preserve */
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
+{
+    const mod = await import('./attributes.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
+}

package/src/stories/{css.stories.ts → css.test.stories.ts} RENAMED Viewed

@@ -1,7 +1,8 @@
-import type {StoryObj} from "@storybook/web-components";
-import {within, expect} from "@storybook/test";
+import type {StoryObj}                         from "@storybook/web-components";
+import {within, expect}                        from "@storybook/test";
 import '../custom-element/custom-element.js';
+import {CharsCountInTextarea, WordCountOnType} from './dom-merge.test.stories';
 type CssProps = { title: string; tag: string; style: string; slot: string; payload: string };
 const defs = {title: '', tag: '', style: '', slot: '', payload: ''};
@@ -47,6 +48,12 @@ export const StyleDoesNotLeak: Story =
         const color = st.getPropertyValue('color');
         // @ts-ignore
         expect(color).to.equal('rgb(0, 128, 0)')
+        await expect( el.closest('custom-element')).toBeInTheDocument();
+        const dce = el.closest('custom-element');
+        await expect( dce.xsltString).toContain('<xsl:stylesheet');
+        await expect( dce.dce.localName).toEqual('custom-element');
+        await expect( dce.dce.xsltString).toEqual(dce.xsltString);
+        await expect( dce.dce.xslt.documentElement.tagName ).toEqual('xsl:stylesheet');
     },
 };
@@ -80,13 +87,15 @@ export const OverrideInPayload: Story =
     ,   style:  `color:green`
     ,    slot:  'is green'
     ,     tag:  'dce-3'
-    , payload:  `  <u>should be</u> ${RED}:<dce-3 id="dce32">
-                        <template>
-                            <style> color:red; </style>
-                            <u>red</u>
-                        </template>
-                    </dce-3> <br/>
-                     should be ${GREEN}: <dce-3 id="dce31">green</dce-3>   `
+    , payload:  `<u>should be</u> ${RED}:
+                <dce-3 id="dce32">
+                    <template>
+                        <style> color:red; </style>
+                        <u>red</u>
+                    </template>
+                </dce-3> <br/>
+                should be ${GREEN}:
+                <dce-3 id="dce31">green</dce-3>   `
     }
 ,   play: async ({canvasElement}) =>
     {
@@ -102,3 +111,13 @@ export const OverrideInPayload: Story =
         expect( color('#dce32 u')        ).to    .equal(color('i'));
     },
 };
+/* istanbul ignore else -- @preserve */
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
+{
+    const mod = await import('./css.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
+}