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

package/dist/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/dist/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/dist/demo/z.html

@@ -1,62 +1,33 @@
-<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">
-    <location-element xmlns="" slice="window-url" live="" data-dce-id="2"></location-element>
-    <table xmlns="" data-dce-id="3">
-        <tbody data-dce-id="0-1">
-        <tr data-dce-id="4">
-            <th data-dce-id="5"><h3 data-dce-id="6"> URL properties </h3></th>
-            <td data-dce-id="7">9</td>
-        </tr>
-        <tr data-dce-id="10">
-            <th data-dce-id="11">href</th>
-            <td data-dce-id="12">http://localhost:63342/custom-element/demo/a.html?_ijt=dmv0p4go000q47lg48i5im92f7&amp;_ij_reload=RELOAD_ON_SAVE</td>
-        </tr>
-        <tr data-dce-id="10-1">
-            <th data-dce-id="11">origin</th>
-            <td data-dce-id="12">http://localhost:63342</td>
-        </tr>
-        <tr data-dce-id="10-2">
-            <th data-dce-id="11">protocol</th>
-            <td data-dce-id="12">http:</td>
-        </tr>
-        <tr data-dce-id="10-3">
-            <th data-dce-id="11">host</th>
-            <td data-dce-id="12">localhost:63342</td>
-        </tr>
-        <tr data-dce-id="10-4">
-            <th data-dce-id="11">hostname</th>
-            <td data-dce-id="12">localhost</td>
-        </tr>
-        <tr data-dce-id="10-5">
-            <th data-dce-id="11">port</th>
-            <td data-dce-id="12">63342</td>
-        </tr>
-        <tr data-dce-id="10-6">
-            <th data-dce-id="11">pathname</th>
-            <td data-dce-id="12">/custom-element/demo/a.html</td>
-        </tr>
-        <tr data-dce-id="10-7">
-            <th data-dce-id="11">search</th>
-            <td data-dce-id="12">?_ijt=dmv0p4go000q47lg48i5im92f7&amp;_ij_reload=RELOAD_ON_SAVE</td>
-        </tr>
-        <tr data-dce-id="10-8">
-            <th data-dce-id="11">hash</th>
-            <td data-dce-id="12"></td>
-        </tr>
-        </tbody>
-    </table>
-    <h3 data-dce-id="9"> URL parameters </h3>
-    <table xmlns="" data-dce-id="8">
-
-        <tbody data-dce-id="0-1">
-        <tr data-dce-id="10">
-            <th data-dce-id="11">_ijt</th>
-            <td data-dce-id="12">dmv0p4go000q47lg48i5im92f7</td>
-        </tr>
-        <tr data-dce-id="10-1">
-            <th data-dce-id="11">_ij_reload</th>
-            <td data-dce-id="12">RELOAD_ON_SAVE</td>
-        </tr>
-        </tbody>
-    </table>
-</dce-root>
+<!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/dist/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/dist/demo/z1.html

@@ -0,0 +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>

package/dist/local-storage-78EivJ_B.cjs

@@ -0,0 +1 @@
+"use strict";const c=(t,e)=>{if(t==="text")return e;if(t==="json")try{return JSON.parse(e)}catch{return null}const a=document.createElement("input");return a.setAttribute("type",t),t==="number"?(a.value=e,a.valueAsNumber):t==="date"?e?(a.valueAsDate=new Date(e),a.value):null:(a.value=e,a.value)};let o,i,s;function r(t,e){o.call(localStorage,t,e),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:t,value:e}}))}function u(t){i.call(localStorage,t),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:t}}))}function g(){s.call(localStorage),window.dispatchEvent(new CustomEvent("local-storage",{detail:{}}))}function m(){o||(o=localStorage.setItem,localStorage.setItem=r,i=localStorage.removeItem,localStorage.removeItem=u,s=localStorage.clear,localStorage.clear=g)}m();function d(t,e){r(t,e)}class S extends HTMLElement{static observedAttributes=["value","slice","key","type","live"];#e;get value(){return this.#e===null?void 0:this.#e}set value(e){return this.#e=e}async connectedCallback(){const e=l=>this.getAttribute(l),a=()=>{this.#e=c(e("type"),localStorage.getItem(e("key"))),this.dispatchEvent(new Event("change"))};if(this.#e=c(e("type"),localStorage.getItem(e("key"))),this.hasAttribute("value")?d(e("key"),this.#e=e("value")):a(),this.hasAttribute("live")){const l=n=>(n.detail.key===e("key")||!n.detail.key)&&a();window.addEventListener("local-storage",l),m(),this._destroy=()=>window.removeEventListener("local-storage",l)}}disconnectedCallback(){this._destroy?.()}}window.customElements.define("local-storage",S);exports.LocalStorageElement=S;exports.localStorageSetItem=d;exports.localStorage_clear=g;exports.localStorage_removeItem=u;exports.localStorage_setItem=r;

package/dist/local-storage-DzmNKzgN.js

@@ -0,0 +1,66 @@
+const n = (t, e) => {
+  if (t === "text")
+    return e;
+  if (t === "json")
+    try {
+      return JSON.parse(e);
+    } catch {
+      return null;
+    }
+  const a = document.createElement("input");
+  return a.setAttribute("type", t), t === "number" ? (a.value = e, a.valueAsNumber) : t === "date" ? e ? (a.valueAsDate = new Date(e), a.value) : null : (a.value = e, a.value);
+};
+let o, s, i;
+function c(t, e) {
+  o.call(localStorage, t, e), window.dispatchEvent(new CustomEvent("local-storage", { detail: { key: t, value: e } }));
+}
+function g(t) {
+  s.call(localStorage, t), window.dispatchEvent(new CustomEvent("local-storage", { detail: { key: t } }));
+}
+function d() {
+  i.call(localStorage), window.dispatchEvent(new CustomEvent("local-storage", { detail: {} }));
+}
+function u() {
+  o || (o = localStorage.setItem, localStorage.setItem = c, s = localStorage.removeItem, localStorage.removeItem = g, i = localStorage.clear, localStorage.clear = d);
+}
+u();
+function m(t, e) {
+  c(t, e);
+}
+class v extends HTMLElement {
+  static observedAttributes = [
+    "value",
+    "slice",
+    "key",
+    "type",
+    "live"
+    // monitors localStorage change
+  ];
+  #e;
+  get value() {
+    return this.#e === null ? void 0 : this.#e;
+  }
+  set value(e) {
+    return this.#e = e;
+  }
+  async connectedCallback() {
+    const e = (l) => this.getAttribute(l), a = () => {
+      this.#e = n(e("type"), localStorage.getItem(e("key"))), this.dispatchEvent(new Event("change"));
+    };
+    if (this.#e = n(e("type"), localStorage.getItem(e("key"))), this.hasAttribute("value") ? m(e("key"), this.#e = e("value")) : a(), this.hasAttribute("live")) {
+      const l = (r) => (r.detail.key === e("key") || !r.detail.key) && a();
+      window.addEventListener("local-storage", l), u(), this._destroy = () => window.removeEventListener("local-storage", l);
+    }
+  }
+  disconnectedCallback() {
+    this._destroy?.();
+  }
+}
+window.customElements.define("local-storage", v);
+export {
+  v as L,
+  g as a,
+  d as b,
+  m as c,
+  c as l
+};

package/dist/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.5'
+const PACKAGE_VERSION = '2.4.5'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epa-wg/custom-element-dist",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,37 +11,39 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "node bin/vitest/vitest-browser-importmaps.mjs && vitest --coverage.enabled --coverage.all --no-file-parallelism --watch=false",
+    "test:ff": "yarn test --browser.name=firefox",
     "test:watch": "vitest --inspect-brk --no-file-parallelism --browser.headless=false --test-timeout=0",
     "test:storybook": "test-storybook",
     "sb": "yarn storybook",
-    "t": "node ./node_modules/vitest/vitest.mjs --no-file-parallelism --watch --browser.headless=false src/stories/module-url.test.stories.ts"
+    "t": "node ./node_modules/vitest/vitest.mjs --no-file-parallelism --watch --browser.headless=false src/stories/module-url.test.stories.ts",
+    "tf": "node ./node_modules/vitest/vitest.mjs --no-file-parallelism --browser.name=firefox --watch --browser.headless=false  src/stories/module-url.test.stories.ts"
   },
   "dependencies": {
-    "@epa-wg/custom-element": "0.0.26"
+    "@epa-wg/custom-element": "0.0.28"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.7.0",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-mdx-gfm": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/test": "^8.2.9",
-    "@storybook/test-runner": "^0.19.1",
-    "@storybook/web-components": "^8.2.9",
-    "@storybook/web-components-vite": "^8.2.9",
-    "@vitest/browser": "^2.0.5",
-    "@vitest/coverage-istanbul": "^2.0.5",
-    "coverage-svg": "^0.0.3",
-    "lit": "^3.2.0",
-    "msw": "^2.3.5",
-    "msw-storybook-addon": "^2.0.3",
-    "playwright": "^1.46.1",
-    "storybook": "^8.2.9",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.2",
-    "vitest": "^2.0.5",
-    "webdriverio": "^9.0.7"
+    "@chromatic-com/storybook": "2.0.2",
+    "@storybook/addon-essentials": "8.3.3",
+    "@storybook/addon-interactions": "8.3.3",
+    "@storybook/addon-links": "8.3.3",
+    "@storybook/addon-mdx-gfm": "8.3.3",
+    "@storybook/blocks": "8.3.3",
+    "@storybook/test": "8.3.3",
+    "@storybook/test-runner": "0.19.1",
+    "@storybook/web-components": "8.3.3",
+    "@storybook/web-components-vite": "8.3.3",
+    "@vitest/browser": "2.0.5",
+    "@vitest/coverage-istanbul": "2.0.5",
+    "coverage-svg": "0.0.3",
+    "lit": "3.2.0",
+    "msw": "2.4.5",
+    "msw-storybook-addon": "2.0.3",
+    "playwright": "1.47.0",
+    "storybook": "8.3.3",
+    "typescript": "5.6.2",
+    "vite": "5.4.8",
+    "vitest": "2.0.5",
+    "webdriverio": "9.0.9"
   },
   "msw": {
     "workerDirectory": [