@epa-wg/custom-element-dist 0.0.27 → 0.0.28

package/storybook-static/demo/s.xslt

@@ -1,56 +1,39 @@
-<?xml version='1.0' encoding='UTF-8'?>
-<xsl:stylesheet version="1.0"
-	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-	xmlns:xhtml="http://www.w3.org/1999/xhtml"
-                >
-    <xsl:output method="xml"/>
+<?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"><xsl:param name="direction"><xsl:choose>
+            <xsl:when test="//direction"><xsl:value-of select="//direction"/></xsl:when>
+            <xsl:otherwise><xsl:value-of select="'row'"/></xsl:otherwise>
+        </xsl:choose></xsl:param><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><xsl:attribute name="direction"><xsl:choose>
+            <xsl:when test="//direction"><xsl:value-of select="//direction"/></xsl:when>
+            <xsl:otherwise><xsl:value-of select="'row'"/></xsl:otherwise>
+        </xsl:choose></xsl:attribute><xsl:call-template name="slot">
+            <xsl:with-param name="slotname" select="''"/>
+            <xsl:with-param name="defaultvalue"/>
+        </xsl:call-template></dce-root></xsl:template>
     <xsl:template match="/">
-        <dce-root >
-            <xsl:apply-templates select="*"/>
-        </dce-root>
-    </xsl:template>
-    <xsl:template match="*[name()='template']">
-        <xsl:apply-templates mode="sanitize" select="*|text()"/>
-    </xsl:template>
-    <xsl:template match="*">
-        <xsl:apply-templates mode="sanitize" select="*|text()"/>
-    </xsl:template>
-    <xsl:template match="*[name()='svg']|*[name()='math']">
-        <xsl:apply-templates mode="sanitize" select="."/>
-    </xsl:template>
-    <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]">
-        <xsl:copy>
-            <xsl:apply-templates mode="sanitize" select="@*"/>
-            <xsl:value-of select="text()"></xsl:value-of>
-        </xsl:copy>
-    </xsl:template>
-    <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]">
-        <xsl:element name="{local-name()}">
-            <xsl:apply-templates mode="sanitize" select="@*"/>
-            <xsl:value-of select="text()"></xsl:value-of>
-        </xsl:element>
-    </xsl:template>
-    <xsl:template mode="sanitize" match="*|@*">
-        <xsl:copy>
-            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
-        </xsl:copy>
-    </xsl:template>
-    <xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
-    <xsl:template mode="sanitize" match="text()">
-        <dce-text>
-            <xsl:copy/>
-        </dce-text>
-    </xsl:template>
-    <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']">
-        <dce-text>
-            <xsl:copy>
-                <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
-            </xsl:copy>
-        </dce-text>
-    </xsl:template>
-    <xsl:template mode="sanitize" match="xhtml:*">
-        <xsl:element name="{local-name()}">
-            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
-        </xsl:element>
-    </xsl:template>
+        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
+    </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:when>
+            <xsl:otherwise>
+                <xsl:copy-of 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/storybook-static/demo/s1.xslt

@@ -1,60 +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>
+<?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/storybook-static/demo/ss.html

@@ -1,57 +1,24 @@
-<dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1"><http-request xmlns="" url="/reflect" slice="page" data-dce-id="2"></http-request><p xmlns="" data-dce-id="3">Pokemon Count: 6</p>
-<ul xmlns="" data-dce-id="6">
-<var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">request</dce-text></var><div data-dce-id="9">
-<var data-dce-id="10">@url</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-url" data-dce-id="12">/reflect</code>
-</div>
-<div data-dce-id="9-1">
-<var data-dce-id="10">@data-dce-id</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-data-dce-id" data-dce-id="12">2</code>
-</div>
-</ul>
-<ul xmlns="" data-dce-id="6-1">
-<var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">response</dce-text></var><div data-dce-id="9">
-<var data-dce-id="10">@ok</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-ok" data-dce-id="12">true</code>
-</div>
-<div data-dce-id="9-1">
-<var data-dce-id="10">@status</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-status" data-dce-id="12">200</code>
-</div>
-<div data-dce-id="9-2">
-<var data-dce-id="10">@statusText</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-statusText" data-dce-id="12">OK</code>
-</div>
-<div data-dce-id="9-3">
-<var data-dce-id="10">@type</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-type" data-dce-id="12">basic</code>
-</div>
-<div data-dce-id="9-4">
-<var data-dce-id="10">@url</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-url" data-dce-id="12">http://localhost:5173/reflect</code>
-</div>
-<div data-dce-id="9-5">
-<var data-dce-id="10">@redirected</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-redirected" data-dce-id="12">false</code>
-</div>
-</ul><button xmlns="" data-dce-id="5">bulbasaur</button><button xmlns="" data-dce-id="5-1">ivysaur</button><button xmlns="" data-dce-id="5-2">venusaur</button><button xmlns="" data-dce-id="5-3">charmander</button><button xmlns="" data-dce-id="5-4">charmeleon</button><button xmlns="" data-dce-id="5-5">charizard</button>
-<ul xmlns="" data-dce-id="6-2">
-<var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">data</dce-text></var><div data-dce-id="9">
-<var data-dce-id="10">@count</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-count" data-dce-id="12">1279</code>
-</div>
-<div data-dce-id="9-1">
-<var data-dce-id="10">@next</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-next" data-dce-id="12">https://pokeapi.co/api/v2/pokemon?offset=6&amp;limit=6</code>
-</div>
-</ul></dce-root>
+<?xml version="1.0" encoding="UTF-8"?>
+<dce-root data-dce-id="1" label="Number" name="" placeholder="Enter the numeric value" type="text" value=""
+          xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
+          xmlns:xhtml="http://www.w3.org/1999/xhtml"><pre data-dce-id="2" xmlns="">                //focused
+                //suggest
+                //selected
+                $selected-value </pre>
+    <label data-dce-id="3">
+        <dce-text data-dce-id="4">Number</dce-text>
+        <input data-dce-id="5" name="" placeholder="Enter the numeric value" type="text" value="">
+        <slice data-dce-id="6" name="focused" slice-event="focus" slice-value="1"/>
+        <slice data-dce-id="7" name="selected" slice-event="input"/>
+        </input></label>
+    <fieldset data-dce-id="8" form="cem-autocomplete-form" xmlns=""><label data-dce-id="9" value="one"><input
+            data-dce-id="10" name="cem-autocomplete" slice="suggest" slice-event="input" type="radio" value="one"/>
+        <dce-text data-dce-id="11">One</dce-text>
+    </label><label data-dce-id="9" value="two"><input data-dce-id="10" name="cem-autocomplete" slice="suggest" slice-event="input"
+                                                      type="radio" value="two"/>
+        <dce-text data-dce-id="11">Two</dce-text>
+    </label><label data-dce-id="9" value="three"><input data-dce-id="10" name="cem-autocomplete" slice="suggest"
+                                                        slice-event="input" type="radio" value="three"/>
+        <dce-text data-dce-id="11">Three</dce-text>
+    </label></fieldset>
+</dce-root>

package/storybook-static/demo/z.html

@@ -1,33 +1,33 @@
-<!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>DOM merge - Declarative Custom Element implementation demo</title>
-    <link rel="icon" href="./wc-square.svg"/>
-    <script type="importmap">
-        {
-          "imports": {
-            "@epa-wg/custom-element/": "../",
-            "@epa-wg/custom-element-dist/": "../"
-          }
-        }
-    </script>
-    <script type="module" src="../http-request.js"></script>
-    <script type="module" src="../location-element.js"></script>
-    <script type="module" src="../custom-element.js"></script>
-    <style>
-        @import "./demo.css";
-        dt{ font-weight: bold}
-        dd{ padding: 0;}
-        h1,h3{ margin: 0;}
-        nav{ gap:0; }
-    </style>
-</head>
-<body>
-
-  <custom-element src="./html-template.html#dwc-logo">
-            <template><i>loading SVG from templates file ...</i></template>
-        </custom-element>
-
-</body>
-</html>
+<!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>DOM merge - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/custom-element/": "../",
+            "@epa-wg/custom-element-dist/": "../"
+          }
+        }
+    </script>
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+        dt{ font-weight: bold}
+        dd{ padding: 0;}
+        h1,h3{ margin: 0;}
+        nav{ gap:0; }
+    </style>
+</head>
+<body>
+
+  <custom-element src="./html-template.html#dwc-logo">
+            <template><i>loading SVG from templates file ...</i></template>
+        </custom-element>
+
+</body>
+</html>

package/storybook-static/demo/z.xml

@@ -1,60 +1,60 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<dce-root data-dce-id="1" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml">
-    <location-element slice="window-url" data-dce-id="2"/>
-    <table data-dce-id="3">
-        <tr data-dce-id="4">
-            <th data-dce-id="5">
-                <u data-dce-id="6">URL properties</u>
-            </th>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">href</th>
-            <td data-dce-id="9">http://localhost:63342/custom-element/demo/a.html?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">origin</th>
-            <td data-dce-id="9">http://localhost:63342</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">protocol</th>
-            <td data-dce-id="9">http:</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">host</th>
-            <td data-dce-id="9">localhost:63342</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">hostname</th>
-            <td data-dce-id="9">localhost</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">port</th>
-            <td data-dce-id="9">63342</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">pathname</th>
-            <td data-dce-id="9">/custom-element/demo/a.html</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">search</th>
-            <td data-dce-id="9">?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">hash</th>
-            <td data-dce-id="9"/>
-        </tr>
-        <tr data-dce-id="10">
-            <th data-dce-id="11">
-                <u data-dce-id="12">URL parameters</u>
-            </th>
-        </tr>
-        <tr data-dce-id="13">
-            <th data-dce-id="14">_ijt</th>
-            <td data-dce-id="15">qca6trk5kne6eo4s4tomq4egmm</td>
-        </tr>
-        <tr data-dce-id="13">
-            <th data-dce-id="14">_ij_reload</th>
-            <td data-dce-id="15">RELOAD_ON_SAVE</td>
-        </tr>
-    </table>
+<?xml version="1.0" encoding="UTF-8"?>
+<dce-root data-dce-id="1" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+    <location-element slice="window-url" data-dce-id="2"/>
+    <table data-dce-id="3">
+        <tr data-dce-id="4">
+            <th data-dce-id="5">
+                <u data-dce-id="6">URL properties</u>
+            </th>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">href</th>
+            <td data-dce-id="9">http://localhost:63342/custom-element/demo/a.html?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">origin</th>
+            <td data-dce-id="9">http://localhost:63342</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">protocol</th>
+            <td data-dce-id="9">http:</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">host</th>
+            <td data-dce-id="9">localhost:63342</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">hostname</th>
+            <td data-dce-id="9">localhost</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">port</th>
+            <td data-dce-id="9">63342</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">pathname</th>
+            <td data-dce-id="9">/custom-element/demo/a.html</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">search</th>
+            <td data-dce-id="9">?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">hash</th>
+            <td data-dce-id="9"/>
+        </tr>
+        <tr data-dce-id="10">
+            <th data-dce-id="11">
+                <u data-dce-id="12">URL parameters</u>
+            </th>
+        </tr>
+        <tr data-dce-id="13">
+            <th data-dce-id="14">_ijt</th>
+            <td data-dce-id="15">qca6trk5kne6eo4s4tomq4egmm</td>
+        </tr>
+        <tr data-dce-id="13">
+            <th data-dce-id="14">_ij_reload</th>
+            <td data-dce-id="15">RELOAD_ON_SAVE</td>
+        </tr>
+    </table>
 </dce-root>

package/storybook-static/demo/z1.html

@@ -1,34 +1,34 @@
-<!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>DOM merge - Declarative Custom Element implementation demo</title>
-    <link rel="icon" href="./wc-square.svg"/>
-    <script type="importmap">
-        {
-          "imports": {
-            "@epa-wg/custom-element/": "../",
-            "@epa-wg/custom-element-dist/": "../"
-          }
-        }
-    </script>
-    <script type="module" src="../http-request.js"></script>
-    <script type="module" src="../location-element.js"></script>
-    <script type="module" src="../custom-element.js"></script>
-    <style>
-        @import "./demo.css";
-        dt{ font-weight: bold}
-        dd{ padding: 0;}
-        h1,h3{ margin: 0;}
-        nav{ gap:0; }
-    </style>
-</head>
-<body>
-<button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.27/storybook-static/index.html`">set in page URL</button>
-
-<custom-element src="@epa-wg/custom-element-dist/demo/npm-versions.html#npm-version"
-                package-name="@epa-wg/custom-element-dist"
-                ></custom-element>
-
-</body>
-</html>
+<!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>DOM merge - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/custom-element/": "../",
+            "@epa-wg/custom-element-dist/": "../"
+          }
+        }
+    </script>
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+        dt{ font-weight: bold}
+        dd{ padding: 0;}
+        h1,h3{ margin: 0;}
+        nav{ gap:0; }
+    </style>
+</head>
+<body>
+<button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.27/storybook-static/index.html`">set in page URL</button>
+
+<custom-element src="@epa-wg/custom-element-dist/demo/npm-versions.html#npm-version"
+                package-name="@epa-wg/custom-element-dist"
+                ></custom-element>
+
+</body>
+</html>

package/storybook-static/iframe.html

@@ -517,7 +517,7 @@
     }
 }
 </script>
-    <script type="module" crossorigin src="./assets/iframe-Dfrt81rk.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-Ddc_axoC.js"></script>
   </head>
 
   <body>

package/storybook-static/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
 
-    <title>storybook - Storybook</title>
+    <title>@storybook/core - Storybook</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 
     
@@ -64,9 +64,7 @@
     
     <link href="./sb-addons/essentials-outline-8/manager-bundle.js" rel="modulepreload" />
     
-    <link href="./sb-addons/chromatic-com-storybook-9/manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/interactions-10/manager-bundle.js" rel="modulepreload" />
+    <link href="./sb-addons/interactions-9/manager-bundle.js" rel="modulepreload" />
        
 
     <style>
@@ -166,9 +164,7 @@
       
         import './sb-addons/essentials-outline-8/manager-bundle.js';
       
-        import './sb-addons/chromatic-com-storybook-9/manager-bundle.js';
-      
-        import './sb-addons/interactions-10/manager-bundle.js';
+        import './sb-addons/interactions-9/manager-bundle.js';
       
       
       import './sb-manager/runtime.js';

package/storybook-static/project.json

@@ -1 +1 @@
-{"generatedAt":1726065879378,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"testPackages":{"@vitest/browser":"2.0.5","@vitest/coverage-istanbul":"2.0.5","msw":"2.4.5","msw-storybook-addon":"2.0.3","playwright":"1.47.0","vitest":"2.0.5","webdriverio":"9.0.9"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","storybookVersion":"8.2.9","storybookVersionSpecifier":"8.2.9","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"8.2.9"},"@storybook/test":{"version":"8.2.9"},"@storybook/test-runner":{"version":"0.19.1"},"@storybook/web-components":{"version":"8.2.9"},"@storybook/web-components-vite":{"version":"8.2.9"},"msw-storybook-addon":{"version":"2.0.3"},"storybook":{"version":"8.2.9"}},"addons":{"@storybook/addon-links":{"version":"8.2.9"},"@storybook/addon-essentials":{"version":"8.2.9"},"@chromatic-com/storybook":{"version":"2.0.0"},"@storybook/addon-interactions":{"version":"8.2.9"},"@storybook/addon-mdx-gfm":{"version":"8.2.9"}}}
+{"generatedAt":1730950063668,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"testPackages":{"@vitest/browser":"2.0.5","@vitest/coverage-istanbul":"2.0.5","msw":"2.4.5","msw-storybook-addon":"2.0.3","playwright":"1.47.0","vitest":"2.0.5","webdriverio":"9.0.9"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":2,"storybookVersion":"8.3.3","storybookVersionSpecifier":"8.3.3","language":"typescript","storybookPackages":{"@chromatic-com/storybook":{"version":"2.0.2"},"@storybook/addon-mdx-gfm":{"version":"8.3.3"},"@storybook/blocks":{"version":"8.3.3"},"@storybook/test":{"version":"8.3.3"},"@storybook/test-runner":{"version":"0.19.1"},"@storybook/web-components":{"version":"8.3.3"},"@storybook/web-components-vite":{"version":"8.3.3"},"msw-storybook-addon":{"version":"2.0.3"},"storybook":{"version":"8.3.3"}},"addons":{"@storybook/addon-links":{"version":"8.3.3"},"@storybook/addon-essentials":{"version":"8.3.3"},"@storybook/addon-interactions":{"version":"8.3.3"}}}