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

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

@@ -1,9 +1,10 @@
 // noinspection DuplicatedCode
 
-import type { StoryObj }             from '@storybook/web-components';
+import type { StoryObj }                        from '@storybook/web-components';
 import {expect, getByTestId, within, userEvent} from '@storybook/test';
 
 import '../custom-element/custom-element.js';
+import {OverrideInPayload, StyleDoesNotLeak, StyleIn2Instances} from './css.test.stories';
 
 type TProps = { title: string; body:string};
 
@@ -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>
@@ -130,3 +131,14 @@ export const InstanceAttributes:Story  =
     },
 };
 
+
+
+const TestStories = { AttributeDefaults, AttributesRuntimeChange, InstanceAttributes };
+
+/* istanbul ignore else -- @preserve */
+if( 'test' === import.meta.env.MODE )
+{
+    const {playStories} = await  import('./renderPlay');
+    const {describe} = await import('vitest')
+    describe('slots', () => playStories( TestStories, meta ) );
+}

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

@@ -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,14 @@ export const OverrideInPayload: Story =
         expect( color('#dce32 u')        ).to    .equal(color('i'));
     },
 };
+
+
+const TestStories = { StyleDoesNotLeak, StyleIn2Instances, OverrideInPayload };
+
+/* istanbul ignore else -- @preserve */
+if( 'test' === import.meta.env.MODE )
+{
+    const {playStories} = await  import('./renderPlay');
+    const {describe} = await import('vitest')
+    describe('slots', () => playStories( TestStories, meta ) );
+}

package/src/stories/{dom-merge.stories.ts → dom-merge.test.stories.ts}

@@ -1,9 +1,16 @@
 // noinspection DuplicatedCode
 
-import type { StoryObj }             from '@storybook/web-components';
+import type { StoryObj }                        from '@storybook/web-components';
 import {expect, getByTestId, within, userEvent} from '@storybook/test';
 
 import '../custom-element/custom-element.js';
+import {
+    ByIdWithinXsltFile, EmbeddingInAnotherFile,
+    ExternalHtmlFile, ExternalHtmlFileInline, ExternalSvg, ExternalXsltFile, HtmlWithinHtmlFile, MathMLWithinHtmlFile,
+    MissingIdWithinXsltFile,
+    NoTag,
+    SvgWithinHtmlFile, TemplateInPage
+} from './external-template.test.stories';
 
 type TProps = { title: string; body:string};
 
@@ -55,7 +62,6 @@ export const CharsCountInTextarea:Story  =
         await userEvent.keyboard(titleText);
         expect(textarea.value).toEqual(titleText);
         expect(textarea.value.length).toEqual(titleText.length);
-        debugger;
         canvas.getByTestId('refocus-id').focus();
         await sleep(10);
         expect(canvas.getByTestId('counter-id').textContent).toEqual(''+titleText?.length,'counter of symbols');
@@ -80,7 +86,7 @@ export const WordCountOnType:Story  =
                         <code data-testid="words-id"
                             >{
                                 string-length(normalize-space(//slice/txt)) -
-                                string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1 
+                                string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1
                             }</code>
                         <!-- The expression first normalizes the string by removing leading and trailing whitespace and
                             collapsing internal whitespace into a single space. It then subtracts the length of the string
@@ -111,3 +117,13 @@ export const WordCountOnType:Story  =
         expect(canvas.getByTestId('words-id').textContent.trim()).toEqual('6', 'counter of words in render');
     },
 };
+
+const TestStories = { CharsCountInTextarea, WordCountOnType };
+
+/* istanbul ignore else -- @preserve */
+if( 'test' === import.meta.env.MODE )
+{
+    const {playStories} = await  import('./renderPlay');
+    const {describe} = await import('vitest')
+    describe('slots', () => playStories( TestStories, meta ) );
+}

package/src/stories/{external-template.stories.ts → external-template.test.stories.ts}

@@ -4,6 +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';
 
 type TProps = { title: string; body:string};
 
@@ -32,10 +33,10 @@ export const TemplateInPage:Story  =
     <template id="template1">
     <slot>Hello</slot> World!
     </template>
-    
+
     <custom-element tag="dce-internal" src="#template1"></custom-element>
     <!-- no need for loading fallback as the template exists -->
-    
+
     <dce-internal data-testid="slot-override">👋</dce-internal>
     <dce-internal  data-testid="slot-default"></dce-internal>
 `}
@@ -194,7 +195,6 @@ export const MathMLWithinHtmlFile:Story  =
         const canvas = within(canvasElement);
         await canvas.findByText(MathMLWithinHtmlFile.args!.title as string);
         const ml = await canvas.findByTestId('ml-test');
-        debugger;
         expect(ml.firstElementChild.localName).toEqual('mrow');
     },
 };
@@ -243,3 +243,13 @@ export const EmbeddingInAnotherFile:Story  =
         expect(canvas.getByTestId('wave').innerHTML).toEqual('🖖');
     },
 };
+
+const TestStories = { TemplateInPage, NoTag, ExternalSvg, ExternalXsltFile, ExternalHtmlFile, ExternalHtmlFileInline, HtmlWithinHtmlFile, SvgWithinHtmlFile, MathMLWithinHtmlFile, ByIdWithinXsltFile, MissingIdWithinXsltFile, EmbeddingInAnotherFile };
+
+/* istanbul ignore else -- @preserve */
+if( 'test' === import.meta.env.MODE )
+{
+    const {playStories} = await  import('./renderPlay');
+    const {describe} = await import('vitest')
+    describe('slots', () => playStories( TestStories, meta ) );
+}

package/src/stories/form.test.stories.ts

@@ -0,0 +1,191 @@
+// noinspection DuplicatedCode
+
+import type { StoryObj }                        from '@storybook/web-components';
+import {expect, within, userEvent} from '@storybook/test';
+
+import '../custom-element/custom-element.js';
+
+type TProps = { title: string; body:string};
+
+type Story = StoryObj<TProps>;
+
+function render(args: TProps)
+{
+    const {title,  body} = args;
+    return `
+        <fieldset>
+            <legend>${ title }</legend>
+            ${ body }
+        </fieldset>
+  `;
+}
+const meta =
+{   title:      'form'
+,   render
+};
+
+export default meta;
+
+export const SystemMessage:Story =
+{   args : {title: 'custom-validity boolean', body:`
+    <p>type and then clear test in input should lead to system validation message shown next to input field.
+        Something like <q>Please fill out this field</q>.</p>
+    <custom-element>
+        <template>
+            <form>
+                <label> Email
+                    <input slice="username" slice-event="input" placeholder="non-empty" required data-testid="input-1">
+                </label>
+                <if test="//username/@validation-message">
+                    <var data-testid="validation-msg">{//username/@validation-message}</var>
+                </if>
+                <button>Next</button>
+            </form>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const titleText = SystemMessage.args!.title as string;
+        const canvas = within(canvasElement);
+
+        await expect( canvas.queryByTestId('validation-msg')).toBeNull();
+        const input = await canvas.findByTestId('input-1');
+        input.focus();
+        await userEvent.keyboard('abc');
+
+        await userEvent.clear(input);
+        await expect( canvas.queryByTestId('validation-msg')).toBeInTheDocument();
+    },
+};
+
+export const FormData:Story =
+{   args : {title: 'form-data populated', body:`
+    <p>type and then clear test in input should lead to system validation message shown next to input field.
+        Something like <q>Please fill out this field</q>.</p>
+    <custom-element>
+        <template>
+            <form slice="signin-form" >
+                <input name="f1" placeholder="non-empty" required data-testid="input-1"/>
+                <input name="f2" placeholder="non-empty" required data-testid="input-2"/>
+                <input name="f3" placeholder="non-empty" required data-testid="input-3"/>
+
+                <button data-testid="next-button">Next</button><br/>
+                f1: <code data-testid="c1">{ /datadom/slice/signin-form/form-data/f1 }</code><br/>
+                f2: <code data-testid="c2">{                          //form-data/f2 }</code><br/>
+                f3: <code data-testid="c3">{/datadom/slice/signin-form/form-data/f3}</code><br/>
+            </form>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await userEvent.type(canvas.getByTestId('input-1'), 'ABC');
+        await userEvent.click(canvas.getByRole('button'));
+        await expect( await canvas.findByText('ABC')).toBeInTheDocument();
+        await userEvent.type(canvas.getByTestId('input-2'), 'DCE');
+        await userEvent.click(canvas.getByRole('button'));
+        await expect( await canvas.findByText('DCE')).toBeInTheDocument();
+        await userEvent.type(canvas.getByTestId('input-3'), 'XYZ');
+        canvas.getByTestId('input-1').focus();
+        await expect( await canvas.findByText('XYZ')).toBeInTheDocument();
+    },
+};
+export const SetValidityMessage:Story =
+{   args : {title: 'setCustomValidity', body:`
+    <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity">setCustomValidity()</a>
+        invoked by <code>custom-validity</code> attribute. Type in the input fiels to observe the chars count in
+        text, click "next" and observe same message in dropdown.
+    </p>
+    <custom-element>
+        <template>
+            <form>
+                <input slice="s1" slice-event="input keyup" placeholder="type to see the custom error"
+                    custom-validity=" concat( 'char count ', string-length(//s1) ) "
+                    data-testid="input-1"/><br/>
+                s1: <code data-testid="c1">{ //s1 }</code><br/>
+                @validation-message: <var data-testid="validation-msg">{//s1/@validation-message}</var>
+                <button>next</button>
+            </form>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await userEvent.type(canvas.getByTestId('input-1'), 'ABC');
+        await expect( canvas.getByText('ABC')).toBeInTheDocument();
+        await expect( canvas.getByText('char count 3')).toBeInTheDocument();
+    },
+};
+
+export const FormCustomValidityBoolean:Story =
+{   args : {title: 'form custom-validity, boolean', body:`
+    <p> Form is valid only when input text length longer of 3 characters. </p>
+    <custom-element>
+        <template>
+            <form slice="form-1" custom-validity=" string-length(//form-1//f1) &gt; 3 "
+                data-testid="form-1"
+                >
+                <input name="f1" data-testid="input-1"/><br/>
+
+                <input type="hidden" name="id" value="form--form-custom-validity-boolean"/>
+                <input type="hidden" name="viewMode" value="story"/>
+                //form-1//f1: <code data-testid="c1">{ //form-1//f1 }</code><br/>
+                <button>next</button>
+            </form>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await userEvent.type(canvas.getByTestId('input-1'), 'AB');
+        await userEvent.click(canvas.getByRole('button'));
+
+        await expect( canvas.getByText('AB')).toBeInTheDocument(); // i.e. not reloaded by form submit
+    },
+};
+export const FormCustomValidityString:Story =
+{   args : {title: 'form custom-validity, string', body:`
+    <p> Form is valid only when input text is longer of 3 characters, @validation-message propagated in form slot </p>
+    <custom-element>
+        <template>
+            <form slice="form-1"
+                custom-validity=" string-length(//form-1//f1) &gt; 3 ?? concat('should be more than 3 characters, now is ',string-length(//form-1//f1) ) "
+                data-testid="form-1"
+                >
+                <input name="f1" data-testid="input-1"/><br/>
+
+                <input type="hidden" name="id" value="form--form-custom-validity-string"/>
+                <input type="hidden" name="viewMode" value="story"/>
+                //form-1//f1: <code data-testid="c1">{ //form-1//f1 }</code><br/>
+                //form-1/@validation-message: <code data-testid="c1">{ //@validation-message }</code><br/>
+                <button>next</button>
+            </form>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await userEvent.type(canvas.getByTestId('input-1'), 'AB');
+        await userEvent.click(canvas.getByRole('button'));
+
+        await expect( canvas.getByText('AB')).toBeInTheDocument(); // i.e. not reloaded by form submit
+        await expect( canvas.getByText('should be more than 3 characters, now is 2')).toBeInTheDocument();
+    },
+};
+// custom validity rules on form : boolean and string values
+
+
+const TestStories = { SystemMessage, FormData, SetValidityMessage, FormCustomValidityBoolean, FormCustomValidityString};
+
+/* istanbul ignore else -- @preserve */
+if( 'test' === import.meta.env.MODE )
+{
+    const {playStories} = await  import('./renderPlay');
+    const {describe} = await import('vitest')
+    describe('slots', () => playStories( TestStories, meta ) );
+}

package/src/stories/http-request.stories.ts

@@ -28,12 +28,12 @@ function Template({title, slice, url}: TProps)
         slice="${slice}"
         ></http-request>
     <input placeholder="URL for fetch" slice="url" value="{ //url ?? '${ url }' }"/>
-    <button>set</button>   
-    <button slice="url" slice-value="''" slice-event="click">set blank</button>   
-    <button slice="url" slice-value="'/reflect'" slice-event="click">/reflect</button>   
-    <button slice="url" slice-value="'/pokemon'"         slice-event="click">/pokemon</button>   
-    <button slice="url" slice-value="'/pokemon?limit=6'" slice-event="click">/pokemon?limit=6</button>   
-    <button slice="url" slice-value="'/pokemon?limit=3'" slice-event="click">/pokemon?limit=3</button>   
+    <button>set</button>
+    <button slice="url" slice-value="''" slice-event="click">set blank</button>
+    <button slice="url" slice-value="'/reflect'" slice-event="click">/reflect</button>
+    <button slice="url" slice-value="'/pokemon'"         slice-event="click">/pokemon</button>
+    <button slice="url" slice-value="'/pokemon?limit=6'" slice-event="click">/pokemon?limit=6</button>
+    <button slice="url" slice-value="'/pokemon?limit=3'" slice-event="click">/pokemon?limit=3</button>
 
     <p>Pokemon Count: {count(/datadom/slice/${slice}//results)}</p>
     <if test="count(/datadom/slice/${slice}//results) &lt; 0">

package/src/stories/http-request.test.ts

@@ -12,15 +12,6 @@ import {handlers}   from '../mocks/handlers.ts';
 export const worker = setupWorker(...handlers);
 await worker.start();
 
-
-// worker.start({serviceWorker: { url: '/public/mockServiceWorker.js' } });
-// worker.use(...handlers);
-
-// beforeAll( () => {worker.start()});//{ onUnhandledRequest: 'error' }));
-//
-// afterAll(() => worker.stop());
-
-
 const {renderPlay} = meta;
 describe('http-request', () => {
     for (let story of Object.values(Stories) as StoryObj[] )

package/src/stories/{local-storage.stories.ts → local-storage.test.stories.ts}

@@ -27,13 +27,13 @@ function render(args: TProps)
 
             <custom-element>
 <template><!-- wrapping into template to prevent images loading within DCE declaration -->
-    <local-storage 
-        key="${ key }" 
-        slice="${ slice }" 
-        ${ live  ? `live="${live    }"`:''} 
-        ${ value ? `value="${value  }"`:''} 
+    <local-storage
+        key="${ key }"
+        slice="${ slice }"
+        ${ live  ? `live="${live    }"`:''}
+        ${ value ? `value="${value  }"`:''}
         ></local-storage>
-    
+
     <br/>
     <var>${key}</var>:<code data-testid="slice-value">{ //slice/${slice} }</code>
     <br/>
@@ -53,12 +53,12 @@ export default meta;
 export const Demo:Story  =
 {   args : {title: 'live value', live:'live', body:`
     <input placeholder="value for localStorage" id="textinput"
-        slice="${defs.slice}" 
+        slice="${defs.slice}"
         value="{ //${defs.slice} ?? '${ defs.value }' }"/>
     <button onclick="localStorage.setItem('${defs.key}',textinput.value  )">set</button>
     <button onclick="localStorage.setItem('${defs.key}','text value'  )">text value</button>
-    <button onclick="localStorage.setItem('${defs.key}','another text')">another text</button>   
-    <button onclick="localStorage.removeItem('${defs.key}'            )">set blank</button>   
+    <button onclick="localStorage.setItem('${defs.key}','another text')">another text</button>
+    <button onclick="localStorage.removeItem('${defs.key}'            )">set blank</button>
 `}
 ,   play: async ({canvasElement}) =>
     {
@@ -94,8 +94,8 @@ export const Demo:Story  =
 export const AlwaysOverride:Story  =
 {   args : {title: 'AlwaysOverride', live:'', value:'ABC', body:`
     buttons are changing the localStorage value, but without 'live' attribute slice ^^ from <i>local-storage</i> is not updated<br/>
-    <button onclick="localStorage.setItem('${defs.key}','text value'  )">text value</button>  
-    <button onclick="localStorage.removeItem('${defs.key}'            )">set blank</button>   
+    <button onclick="localStorage.setItem('${defs.key}','text value'  )">text value</button>
+    <button onclick="localStorage.removeItem('${defs.key}'            )">set blank</button>
     `}
 ,   play: async ({canvasElement}) =>
     {
@@ -168,7 +168,7 @@ export const FromStorageWithDefault:Story  =
 
 export const TypeAttribute:Story  =
 {   args : {title: 'local-storage type attribute variations', body:`
-    
+
                 <local-storage key="textKey" slice="text-key" type="text" live="live"></local-storage>
                 <local-storage key="dateKey" slice="date-key" type="date" live="live"></local-storage>
                 <local-storage key="timeKey" slice="time-key" type="time" live="live"></local-storage>
@@ -218,6 +218,8 @@ export const TypeAttribute:Story  =
     `}
 ,   play: async ({canvasElement}) =>
     {
+        window['JsonSample'] = {a:1,b:'B'};
+
         const canvas = within(canvasElement);
         await canvas.findByText(TypeAttribute.args!.title as string);
         const byText = txt => canvas.getByText(txt)
@@ -386,3 +388,13 @@ export const TypeAttribute:Story  =
         expectVal('json-key'       ,'\na : 1b : B'      );
     },
 };
+
+const TestStories = { Demo, AlwaysOverride, FromStorageWithDefault, TypeAttribute };
+
+/* istanbul ignore else -- @preserve */
+if( 'test' === import.meta.env.MODE )
+{   localStorage.clear();
+    const {playStories} = await  import('./renderPlay');
+    const {describe} = await import('vitest')
+    describe('slots', () => playStories( TestStories, meta ) );
+}

package/src/stories/{location-element.stories.ts → location-element.test.stories.ts}

@@ -1,10 +1,11 @@
 // noinspection DuplicatedCode
 
-import type { StoryObj }             from '@storybook/web-components';
-import {expect, getByTestId, within} from '@storybook/test';
+import type { StoryObj }                            from '@storybook/web-components';
+import {expect, getByTestId, within}                from '@storybook/test';
 
 import '../custom-element/custom-element.js';
 import '../custom-element/location-element.js';
+import {RealtimeEventInSlice, SliceInitChangeEvent} from './slice-events.test.stories';
 
 type TProps = { title: string; slice: string; href: string; live:string; body:string};
 const defs: TProps =
@@ -26,13 +27,13 @@ function render(args: TProps)
 
             <custom-element>
 <template><!-- wrapping into template to prevent images loading within DCE declaration -->
-    <location-element 
-        slice="${ slice }" 
-        ${ href   ? `href="${ href }"`:''} 
+    <location-element
+        slice="${ slice }"
+        ${ href   ? `href="${ href }"`:''}
         live="${ live }"
         ></location-element>
-    
-    
+
+
     ${ body }
     <xhtml:table>
         <xhtml:tbody>
@@ -40,12 +41,12 @@ function render(args: TProps)
                 <xhtml:th><h3> URL properties </h3></xhtml:th>
                 <xhtml:td>{count(//value/@*)}</xhtml:td>
             </xhtml:tr>
-            <apply-templates mode="attrs" select="//value/@*"></apply-templates>
+            <apply-templates mode="attrs" select="//${ slice }/value/@*"></apply-templates>
         </xhtml:tbody>
     </xhtml:table>
     <xhtml:table>
             <h3> URL parameters </h3>
-            <apply-templates mode="attrs" select="//params/*/*"></apply-templates>
+            <apply-templates mode="attrs" select="//${ slice }/value/params/*/*"></apply-templates>
     </xhtml:table>
     <xsl:template mode="attrs" match="*|@*">
         <xhtml:tr>
@@ -131,3 +132,14 @@ export const SrcAttribute:Story  =
 
     },
 };
+
+
+const TestStories = { Demo, SrcAttribute };
+
+/* istanbul ignore else -- @preserve */
+if( 'test' === import.meta.env.MODE )
+{
+    const {playStories} = await  import('./renderPlay');
+    const {describe} = await import('vitest')
+    describe('slots', () => playStories( TestStories, meta ) );
+}

package/src/stories/renderPlay.ts

@@ -17,6 +17,5 @@ export async function renderPlay<TProps>(story: StoryObj, meta:{render: (args: T
 export function playStories<TProps>( Stories: any, meta:{ render: (args: TProps)=>string } )
 {
     for ( let story of Object.values(Stories) as StoryObj[] )
-        if( story.play )
-            it( story.args!.title, async () => renderPlay(story, meta) );
+        it( story.args!.title, async () => renderPlay(story, meta) );
 }