@epa-wg/custom-element-dist 0.0.32 → 0.0.34

package/src/material/theme/tokens/cem-voice-ladder.svg

@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="860" viewBox="0 0 1200 860" role="img" aria-label="Voice ladder: seven levels with ink thickness and speech prosody mappings">
+  <defs>
+    <style>
+      :root {
+        --cem-ink: #111;
+        --cem-surface: #fff;
+        --cem-outline: #c7c7c7;
+        --cem-muted: #666;
+        --cem-accent: #005a9c;
+        --cem-soft: #f6f7f9;
+      }
+      .frame { fill: var(--cem-surface); stroke: var(--cem-outline); stroke-width: 2; rx: 18; }
+      .step  { fill: var(--cem-surface); stroke: var(--cem-outline); stroke-width: 1.8; rx: 18; }
+      .step-accent { fill: var(--cem-surface); stroke: var(--cem-accent); stroke-width: 2.4; rx: 18; }
+      .title { font: 700 32px system-ui, -apple-system, "Segoe UI", Arial, sans-serif; fill: var(--cem-ink); }
+      .muted { font: 400 16px system-ui, -apple-system, "Segoe UI", Arial, sans-serif; fill: var(--cem-muted); }
+      .h     { font: 650 20px system-ui, -apple-system, "Segoe UI", Arial, sans-serif; fill: var(--cem-ink); }
+      .t     { font: 400 16px system-ui, -apple-system, "Segoe UI", Arial, sans-serif; fill: var(--cem-ink); }
+      .mono  { font: 550 15px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; fill: var(--cem-muted); }
+      .pill  { fill: var(--cem-soft); stroke: var(--cem-outline); stroke-width: 1.2; rx: 999; }
+      .pilltext { font: 650 13px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; fill: var(--cem-accent); }
+      .colh { font: 650 16px system-ui, -apple-system, "Segoe UI", Arial, sans-serif; fill: var(--cem-muted); }
+    </style>
+  </defs>
+
+  <rect x="30" y="30" width="1140" height="800" class="frame"/>
+
+  <text x="70" y="92" class="title">Voice ladder (7 levels) with ink and speech projections</text>
+  <text x="70" y="125" class="muted">Use the same voice semantics across modalities. Map voice → ink thickness and voice → read‑aloud prosody.</text>
+
+  <text x="90" y="170" class="colh">Voice level</text>
+  <text x="340" y="170" class="colh">Ink projection</text>
+  <text x="690" y="170" class="colh">Speech projection (TTS)</text>
+
+  <rect x="70" y="195" width="1060" height="78" class="step"/>
+  <text x="90" y="225" class="h">whisper</text>
+  <rect x="90" y="238" width="150" height="24" class="pill"/><text x="102" y="255" class="pilltext">de-emphasize</text>
+  <text x="340" y="225" class="t">ink thickness:</text>
+  <text x="455" y="225" class="mono">var(--cem-thickness-x-light)</text>
+  <text x="690" y="225" class="t">rate / pitch / volume:</text>
+  <text x="865" y="225" class="mono">1.00 / 0.95 / 0.65</text>
+
+  <rect x="70" y="285" width="1060" height="78" class="step"/>
+  <text x="90" y="315" class="h">soft</text>
+  <rect x="90" y="328" width="120" height="24" class="pill"/><text x="102" y="345" class="pilltext">secondary</text>
+  <text x="340" y="315" class="t">ink thickness:</text>
+  <text x="455" y="315" class="mono">var(--cem-thickness-light)</text>
+  <text x="690" y="315" class="t">rate / pitch / volume:</text>
+  <text x="865" y="315" class="mono">1.00 / 0.98 / 0.75</text>
+
+  <rect x="70" y="375" width="1060" height="78" class="step"/>
+  <text x="90" y="405" class="h">gentle</text>
+  <rect x="90" y="418" width="130" height="24" class="pill"/><text x="102" y="435" class="pilltext">navigation</text>
+  <text x="340" y="405" class="t">ink thickness:</text>
+  <text x="455" y="405" class="mono">var(--cem-thickness-normal)</text>
+  <text x="690" y="405" class="t">rate / pitch / volume:</text>
+  <text x="865" y="405" class="mono">1.00 / 1.00 / 0.85</text>
+
+  <rect x="70" y="465" width="1060" height="78" class="step-accent"/>
+  <text x="90" y="495" class="h">regular</text>
+  <rect x="90" y="508" width="140" height="24" class="pill"/><text x="102" y="525" class="pilltext">default</text>
+  <text x="340" y="495" class="t">ink thickness:</text>
+  <text x="455" y="495" class="mono">var(--cem-thickness-normal)</text>
+  <text x="690" y="495" class="t">rate / pitch / volume:</text>
+  <text x="865" y="495" class="mono">1.00 / 1.00 / 1.00</text>
+
+  <rect x="70" y="555" width="1060" height="78" class="step"/>
+  <text x="90" y="585" class="h">firm</text>
+  <rect x="90" y="598" width="140" height="24" class="pill"/><text x="102" y="615" class="pilltext">actions</text>
+  <text x="340" y="585" class="t">ink thickness:</text>
+  <text x="455" y="585" class="mono">var(--cem-thickness-bold)</text>
+  <text x="690" y="585" class="t">rate / pitch / volume:</text>
+  <text x="865" y="585" class="mono">0.98 / 1.03 / 1.00</text>
+
+  <rect x="70" y="645" width="1060" height="78" class="step"/>
+  <text x="90" y="675" class="h">strong</text>
+  <rect x="90" y="688" width="160" height="24" class="pill"/><text x="102" y="705" class="pilltext">section focus</text>
+  <text x="340" y="675" class="t">ink thickness:</text>
+  <text x="455" y="675" class="mono">var(--cem-thickness-x-bold)</text>
+  <text x="690" y="675" class="t">rate / pitch / volume:</text>
+  <text x="865" y="675" class="mono">0.96 / 1.06 / 1.00</text>
+
+  <rect x="70" y="735" width="1060" height="78" class="step"/>
+  <text x="90" y="765" class="h">loud</text>
+  <rect x="90" y="778" width="180" height="24" class="pill"/><text x="102" y="795" class="pilltext">use sparingly</text>
+  <text x="340" y="765" class="t">ink thickness:</text>
+  <text x="455" y="765" class="mono">var(--cem-thickness-xx-bold)</text>
+  <text x="690" y="765" class="t">rate / pitch / volume:</text>
+  <text x="865" y="765" class="mono">0.94 / 1.10 / 1.00</text>
+</svg>

package/src/mocks/versions.mock.ts

@@ -3,7 +3,7 @@ export default {
     "_rev": "5-df363ab4a2b9c478c01e021bde4fbafe",
     "name": "@epa-wg/custom-element-dist",
     "dist-tags": {
-        "latest": "0.0.32"
+        "latest": "0.0.34"
     },
     "versions": {
         "0.0.1": {

package/src/stories/__screenshots__/attributes.test.stories.ts

@@ -0,0 +1 @@
+export default {}

package/src/stories/__screenshots__/external-template.test.stories.ts

@@ -0,0 +1 @@
+export default {}

package/src/stories/__screenshots__/module-url.test.stories.ts

@@ -0,0 +1 @@
+export default {}

package/src/stories/attributes.test.stories.ts

@@ -3,7 +3,7 @@
 import type { StoryObj }                        from '@storybook/web-components';
 import {expect, userEvent, within} from '@storybook/test';
 
-import {cloneAs, mix} from'../custom-element/custom-element.js';
+import {cloneAs, mix, mergeAttr} from'../custom-element/custom-element.js';
 
 type TProps = { title: string; body:string};
 
@@ -29,6 +29,11 @@ const meta =
 
 export default meta;
 
+function html2Element( htmlStr: string)
+{   const n = document.createElement('div');
+    n.innerHTML = htmlStr;
+    return n.firstElementChild as HTMLElement;
+}
 export const CloneAs:Story  =
 {   args : {title: 'cloneAs(el,newTag)', body:`
     <p><code>cloneAs()</code> used for conversion of <code>attribute</code> to <code>xsl:param</code></p>
@@ -62,6 +67,69 @@ export const Mix:Story  =
         await expect( mix({},{a:1,b:'2'})).toEqual({a:1,b:'2'});
     },
 };
+export const MergeAttr:Story  =
+{   args : {title: 'mergeAttr( from, to )', body:`
+    <p><code>mergeAttr( from, to )</code> used for <code>attribute</code> collections</p>
+`}
+,   play: async () =>
+    {
+        const from = html2Element('<br title="a" id="b" readonly />');
+        const to = html2Element('<br removed/>');
+
+        await expect( to).toHaveAttribute('removed');
+
+        mergeAttr(from!,to);
+
+        await expect( to).toHaveAttribute('title','a');
+        await expect( to).toHaveAttribute('id','b');
+        await expect( to).toHaveAttribute('readonly');
+        await expect( to.getAttributeNames().length).toEqual(3);
+        await expect( to).not.toHaveAttribute('removed');
+    },
+};
+export const dceExportedAttributes:Story  =
+{   args : {title: 'mergeAttr( from, to )', body:`
+    <p><code>mergeAttr( from, to )</code> used for <code>attribute</code> collections</p>
+    <p><code>dceExportedAttributes</code> property on target element defines the set of attributes which 
+    would not be removed from target element</p>
+`}
+,   play: async () =>
+    {
+        const from = html2Element('<br id="b" readonly />');
+        const to = html2Element('<br removed/>') as (HTMLElement & {dceExportedAttributes:Set<string>});
+        to.dceExportedAttributes = new Set(['enforced']);
+        to.setAttribute('enforced',"defined by inner component");
+        await expect( to).toHaveAttribute('enforced');
+
+        mergeAttr(from,to);
+
+        await expect( to).toHaveAttribute('id','b');
+        await expect( to).toHaveAttribute('readonly');
+        await expect( to).not.toHaveAttribute('removed');
+        await expect( to).toHaveAttribute('enforced',"defined by inner component");
+    },
+};
+export const dceExportedAttributes_attr:Story  =
+{   args : {title: 'mergeAttr( from, to )', body:`
+    <p><code>mergeAttr( from, to )</code> used for <code>attribute</code> collections</p>
+    <p><code>dce-exported-attributes</code> attribute on target element defines the space separated list of attributes which 
+    would not be removed from target element</p>
+`}
+,   play: async () =>
+    {
+        const from = html2Element('<br id="b" readonly />');
+        const to = html2Element('<br removed dce-exported-attributes="enforced"/>') as (HTMLElement & {dceExportedAttributes:Set<string>});
+        to.setAttribute('enforced',"defined by inner component");
+        await expect( to).toHaveAttribute('enforced');
+
+        mergeAttr(from,to);
+
+        await expect( to).toHaveAttribute('id','b');
+        await expect( to).toHaveAttribute('readonly');
+        await expect( to).not.toHaveAttribute('removed');
+        await expect( to).toHaveAttribute('enforced',"defined by inner component");
+    },
+};
 
 export const AttributeDefaults:Story  =
 {   args : {title: 'Attributes definition', body:`
@@ -70,7 +138,7 @@ export const AttributeDefaults:Story  =
         <template>
             <attribute name="p1">default_P1</attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
-            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            <attribute name="p3" select="//attributes/@p3 ?? 'def_P3' "></attribute>
             p1: <code data-testid="p1">{$p1}</code> <br/>
             p2: <code data-testid="p2">{$p2}</code> <br/>
             p3: <code data-testid="p3">{$p3}</code>
@@ -80,9 +148,7 @@ export const AttributeDefaults:Story  =
 `}
 ,   play: async ({canvasElement}) =>
     {
-        const titleText = AttributeDefaults.args!.title as string;
-        const canvas = within(canvasElement)
-        , code = async (id) => (await canvas.findByTestId(id)).textContent.trim();
+        const canvas = within(canvasElement);
 
         expect( await await canvas.findByTestId('p1') ).toHaveTextContent('default_P1' );
         expect( await await canvas.findByTestId('p2') ).toHaveTextContent('always_p2'  );
@@ -97,14 +163,14 @@ export const AttributesRuntimeChange:Story  =
         <template>
             <attribute name="p1">default_P1                </attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
-            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            <attribute name="p3" select="//attributes/@p3 ?? 'def_P3' "></attribute>
             p1: <code data-testid="t1">{$p1}</code> <br/>
             p2: <code data-testid="t2">{$p2}</code> <br/>
             p3: <code data-testid="t3">{$p3}</code>
         </template>
     </custom-element>
     <section>
-        <dce-link2  id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2> <br>
+        <dce-link2  id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2> <br/>
         <div><input id="i1" value="P1">  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
         <div><input id="i2" value="P2">  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
         <div><input id="i3" value="P3">  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
@@ -143,7 +209,7 @@ export const InstanceAttributes:Story  =
         <template>
             <attribute name="p1">default_P1                </attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
-            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            <attribute name="p3" select="//attributes/p3 ?? 'def_P3' "></attribute>
             p1: <code data-testid="p1">{$p1}</code> <br/>
             p2: <code data-testid="p2">{$p2}</code> <br/>
             p3: <code data-testid="p3">{$p3}</code>
@@ -156,7 +222,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();
-        await sleep(20)
+        await sleep(200)
         expect( await code('p1') ).toEqual('123' );
         expect( await code('p2') ).toEqual('always_p2'  );
         expect( await code('p3') ).toEqual('qwe'     );
@@ -173,11 +239,11 @@ export const AttributesPropagationUp:Story  =
         <attribute name="data-testid"></attribute>
         <attribute name="p1"></attribute>
         <attribute name="p2">DEFAULT VALUE</attribute>
-        <attribute name="p3" select=" //from-input ?? 'abc' "></attribute>
+        <attribute name="p3" select=" //from-input "></attribute>
         <input slice="from-input" slice-event="input"/><br/>
         p1:<code data-testid="{$data-testid}-p1" >{ $p1 }</code><br/>
         p2:<code data-testid="{$data-testid}-p2" >{ $p2 }</code><br/>
-        p2:<code data-testid="{$data-testid}-p3" >{ $p3 }</code><br/>  
+        p3:<code data-testid="{$data-testid}-p3" >{ $p3 }</code><br/>  
         //from-input: {//from-input}      <hr/>
     </template>
 </custom-element>
@@ -195,32 +261,32 @@ export const AttributesPropagationUp:Story  =
         
         await expect( await code('t1-p1') ).toEqual('' );
         await expect( await code('t1-p2') ).toEqual('DEFAULT VALUE' );
-        await expect( await code('t1-p3') ).toEqual('abc' );
+        await expect( await code('t1-p3') ).toEqual('' );
 
         const t1 = await canvas.findByTestId('t1');
         await expect( t1 ).toHaveAttribute('value','123');
         await expect( t1 ).toHaveAttribute('p2','DEFAULT VALUE');
-        await expect( t1 ).toHaveAttribute('p3','abc');
+        await expect( t1 ).toHaveAttribute('p3','');
         await expect( t1 ).not.toHaveAttribute('p1');
 
         await expect( await code('t2-p1') ).toEqual('P1' );
         await expect( await code('t2-p2') ).toEqual('123' );
-        await expect( await code('t2-p3') ).toEqual('abc' );
+        await expect( await code('t2-p3') ).toEqual('' );
         
         const t2 = await canvas.findByTestId('t2');
         await expect( t2 ).toHaveAttribute('p1','P1');
         await expect( t2 ).toHaveAttribute('p2','123');
-        await expect( t2 ).toHaveAttribute('p3','abc');
+        await expect( t2 ).toHaveAttribute('p3','');
 
 
         await expect( await code('t3-p1') ).toEqual('' );
         await expect( await code('t3-p2') ).toEqual('DEFAULT VALUE' );
-        await expect( await code('t3-p3') ).toEqual('abc' );
+        await expect( await code('t3-p3') ).toEqual('' );
         
         const t3 = await canvas.findByTestId('t3');
         await expect( t1 ).not.toHaveAttribute('p1');
         await expect( t3 ).toHaveAttribute('p2','DEFAULT VALUE');
-        await expect( t3 ).toHaveAttribute('p3','abc');
+        await expect( t3 ).toHaveAttribute('p3','');
 
         t3.querySelector('input')?.focus();
         await userEvent.keyboard('DCE');

package/src/stories/dom-merge.test.stories.ts

@@ -154,7 +154,7 @@ export const OrderPreservingOn2ndTransform:Story  =
 
         await fireEvent.click(canvas.getByTestId('cb2'));
         await expect(await canvas.findByText('#2')).toBeInTheDocument();
-        await expect(canvas.getByTestId("beforeC1").nextElementSibling).toEqual(canvas.getByTestId("isC1"))
+        await expect(canvas.getByTestId("beforeC1").nextElementSibling.textContent).toEqual('#1')
     },
 };
 export const ReadSystemValidityMessage:Story  =
@@ -194,6 +194,30 @@ export const ReadSystemValidityMessage:Story  =
     },
 };
 
+export const EmbedDCE:Story  =
+{   args : {title: 'Render inner components', body:`
+    <template id="test-icon">
+        <attribute name="img"></attribute>
+        <i>{img}</i>
+    </template>
+    <template id="test-button">
+        <attribute name="text"></attribute>
+        <button>
+            <slot>{text}</slot>
+        </button>
+    </template>
+    
+    <custom-element src="#test-icon" tag="test-icon"></custom-element>
+    <custom-element src="#test-button" tag="test-button"></custom-element>
+    <test-button>icon:<test-icon img="👍"></test-icon></test-button>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await expect(await canvas.findByText('👍')).toBeInTheDocument();
+    },
+};
+
 //#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&

package/src/stories/external-template.test.stories.ts

@@ -4,7 +4,7 @@ import type { StoryObj }             from '@storybook/web-components';
 import {expect, getByTestId, within} from '@storybook/test';
 
 import '../custom-element/custom-element.js';
-import {Demo, SrcAttribute}          from './location-element.test.stories';
+import {frameCanvas} from "./frame.canvas";
 
 type TProps = { title: string; body:string};
 
@@ -75,7 +75,7 @@ export const ExternalSvg:Story  =
         <template><i>loading from SVG ...</i></template>
     </custom-element>
     <dce-external></dce-external>
-    <custom-element src="confused.svg">
+    <custom-element src="/confused.svg">
         <i>inline DCE loading from SVG ...</i>
     </custom-element>
     <custom-element src="no.svg">
@@ -92,7 +92,7 @@ export const ExternalSvg:Story  =
         // needs separate test
         // await expect( await canvas.findByText('loading from SVG ...')).toBeInTheDocument();
 
-        expect(canvasElement.querySelector('[src="confused.svg"]').innerHTML).to.include('loading from SVG ...');
+        expect(canvasElement.querySelector('[src="/confused.svg"]').innerHTML).to.include('loading from SVG ...');
         await expect(await canvas.findByText('fallback for missing image')).toBeInTheDocument();
         await expect(await canvas.findByTitle('Confused')).toBeInTheDocument();
     },
@@ -188,32 +188,34 @@ export const SvgWithinHtmlFile:Story  =
 };
 
 export const MathMLWithinHtmlFile:Story  =
-{   args : {title: 'external HTML template - MathML by id', body:`
-        <custom-element src="/html-template.html#sophomores-dream">
-            <template><i>loading MathML from HTML file ...</i></template>
-        </custom-element>
+{   args : {title: '6. external HTML template - MathML by id', body:`
+                <iframe src="/demo/external-templates-sb-6.html" data-testid="fr"></iframe>
+
 `}
 ,   play: async ({canvasElement}) =>
     {
         const canvas = within(canvasElement);
         await canvas.findByText(MathMLWithinHtmlFile.args!.title as string);
-        const ml = await canvas.findByTestId('ml-test');
+        const frCanvas = await frameCanvas('fr',canvas);
+
+        const ml = await frCanvas.findByTestId('ml-test');
         expect(ml.firstElementChild.localName).toEqual('mrow');
     },
 };
 
 export const ByIdWithinXsltFile:Story  =
-{   args : {title: 'external XHTML template - xsl by id', body:`
-        <custom-element src="/html-template.xhtml#embedded-xsl">
-            <template>whole XSLT is  embedded into HTML body</template>
-        </custom-element>
+{   args : {title: '7. external XHTML template - xsl by id', body:`
+        <iframe src="/demo/external-templates-sb-7.html" data-testid="fr"></iframe>
+
 `}
 ,   play: async ({canvasElement}) =>
     {
         const canvas = within(canvasElement);
         await canvas.findByText(ByIdWithinXsltFile.args!.title as string);
-        const ml = await canvas.findByTestId('src');
-        expect(ml.textContent).to.include('/html-template.xhtml#embedded-xsl');
+        const frCanvas = await frameCanvas('fr',canvas);
+
+        await expect( await frCanvas.findByText('whole XSLT is embedded into HTML body') ).toBeInTheDocument();
+        await expect( await frCanvas.findByText('./html-template.xhtml#embedded-xsl') ).toBeInTheDocument();
     },
 };
 export const MissingIdWithinXsltFile:Story  =

package/src/stories/frame.canvas.ts

@@ -0,0 +1,31 @@
+import {within} from "@storybook/test";
+/*
+    example of use
+
+import {frameCanvas} from "./frame.canvas";
+
+export const ModuleByName:Story  =
+{   args : {title: '4. module path by symbolic name', body:`
+    <iframe src="../demo/module-url-sb-4.html" name="sb" data-testid="fr"></iframe>
+
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(ModuleByName.args!.title as string);
+        const frCanvas = await frameCanvas('fr',canvas);
+
+        await expect(await frCanvas.findByText('👌 from embed-relative-hash invoking')).toBeInTheDocument();
+    },
+};
+ */
+    export async function
+frameCanvas(frameTestId: string, canvas: ReturnType<typeof within>)
+    : Promise<ReturnType<typeof within>>
+{
+    const frEl: HTMLIFrameElement = await canvas.findByTestId(frameTestId);
+    return new Promise(resolve => frEl.addEventListener('load', () =>
+    {
+        resolve(within(frEl.contentWindow?.document.documentElement!));
+    }));
+}