@epa-wg/custom-element-dist 0.0.33 → 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.33"
+        "latest": "0.0.34"
     },
     "versions": {
         "0.0.1": {

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/xslt-conditionals.test.stories.ts

@@ -0,0 +1,492 @@
+// noinspection DuplicatedCode
+
+import type { StoryObj } from '@storybook/web-components';
+import { expect, userEvent, within } from '@storybook/test';
+
+import '../custom-element/custom-element.js';
+
+type TProps = { title: string; tag: string; template: string; payload: string };
+
+type Story = StoryObj<TProps>;
+
+function sleep(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); }
+
+function render(args: TProps) {
+    const { title, tag, template, payload } = args;
+    return `
+        <fieldset>
+            <legend>${title}</legend>
+            <custom-element tag="${tag}" hidden>
+                <template>
+                    ${template}
+                </template>
+            </custom-element>
+            ${payload}
+        </fieldset>
+    `;
+}
+
+const meta = {
+    title: 'xslt-conditionals',
+    render
+};
+
+export default meta;
+
+export const IfTrue: Story = {
+    args: {
+        title: 'xsl:if - condition is true',
+        tag: 'if-true-test',
+        template: `
+            <attribute name="show-message"></attribute>
+            <if test="//@show-message">
+                <span data-testid="result">Message is visible</span>
+            </if>
+        `,
+        payload: `<if-true-test show-message="yes"></if-true-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Message is visible');
+    }
+};
+
+export const IfFalse: Story = {
+    args: {
+        title: 'xsl:if - condition is false',
+        tag: 'if-false-test',
+        template: `
+            <attribute name="show-message"></attribute>
+            <if test="//@show-message = 'yes'">
+                <span data-testid="hidden-result">Should not appear</span>
+            </if>
+            <span data-testid="fallback">Fallback content</span>
+        `,
+        payload: `<if-false-test show-message="no"></if-false-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const fallback = await canvas.findByTestId('fallback');
+        expect(fallback).toBeInTheDocument();
+        expect(canvasElement.querySelector('[data-testid="hidden-result"]')).toBeNull();
+    }
+};
+
+export const IfNotExists: Story = {
+    args: {
+        title: 'xsl:if - attribute not exists',
+        tag: 'if-not-exists-test',
+        template: `
+            <attribute name="optional"></attribute>
+            <if test="not(//attributes/@optional)">
+                <span data-testid="result">No attribute provided</span>
+            </if>
+            <if test="//attributes/@optional">
+                <span data-testid="has-attr">Attribute exists</span>
+            </if>
+        `,
+        payload: `<if-not-exists-test></if-not-exists-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('No attribute provided');
+        expect(canvasElement.querySelector('[data-testid="has-attr"]')).toBeNull();
+    }
+};
+
+export const ChooseWhenOtherwise: Story = {
+    args: {
+        title: 'xsl:choose/when/otherwise - basic switch',
+        tag: 'choose-basic-test',
+        template: `
+            <attribute name="status"></attribute>
+            <choose>
+                <when test="//attributes/@status = 'success'">
+                    <span data-testid="result" class="success">Operation succeeded</span>
+                </when>
+                <when test="//attributes/@status = 'error'">
+                    <span data-testid="result" class="error">Operation failed</span>
+                </when>
+                <otherwise>
+                    <span data-testid="result" class="unknown">Unknown status</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<choose-basic-test status="success"></choose-basic-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Operation succeeded');
+        expect(result).toHaveClass('success');
+    }
+};
+
+export const ChooseSecondWhen: Story = {
+    args: {
+        title: 'xsl:choose - second when branch',
+        tag: 'choose-second-test',
+        template: `
+            <attribute name="status"></attribute>
+            <choose>
+                <when test="//attributes/@status = 'success'">
+                    <span data-testid="result" class="success">Operation succeeded</span>
+                </when>
+                <when test="//attributes/@status = 'error'">
+                    <span data-testid="result" class="error">Operation failed</span>
+                </when>
+                <otherwise>
+                    <span data-testid="result" class="unknown">Unknown status</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<choose-second-test status="error"></choose-second-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Operation failed');
+        expect(result).toHaveClass('error');
+    }
+};
+
+export const ChooseOtherwise: Story = {
+    args: {
+        title: 'xsl:choose - otherwise fallback',
+        tag: 'choose-otherwise-test',
+        template: `
+            <attribute name="status"></attribute>
+            <choose>
+                <when test="//attributes/@status = 'success'">
+                    <span data-testid="result" class="success">Operation succeeded</span>
+                </when>
+                <when test="//attributes/@status = 'error'">
+                    <span data-testid="result" class="error">Operation failed</span>
+                </when>
+                <otherwise>
+                    <span data-testid="result" class="unknown">Unknown status</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<choose-otherwise-test status="pending"></choose-otherwise-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Unknown status');
+        expect(result).toHaveClass('unknown');
+    }
+};
+
+export const ChooseNoAttribute: Story = {
+    args: {
+        title: 'xsl:choose - no attribute provided',
+        tag: 'choose-no-attr-test',
+        template: `
+            <attribute name="level"></attribute>
+            <choose>
+                <when test="//attributes/@level = 'high'">
+                    <span data-testid="result">High priority</span>
+                </when>
+                <when test="//attributes/@level = 'low'">
+                    <span data-testid="result">Low priority</span>
+                </when>
+                <otherwise>
+                    <span data-testid="result">Default priority</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<choose-no-attr-test></choose-no-attr-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Default priority');
+    }
+};
+
+export const NestedConditions: Story = {
+    args: {
+        title: 'Nested conditionals',
+        tag: 'nested-cond-test',
+        template: `
+            <attribute name="type"></attribute>
+            <attribute name="active"></attribute>
+            <choose>
+                <when test="//attributes/@type = 'user'">
+                    <if test="//attributes/@active = 'true'">
+                        <span data-testid="result">Active user</span>
+                    </if>
+                    <if test="//attributes/@active != 'true'">
+                        <span data-testid="result">Inactive user</span>
+                    </if>
+                </when>
+                <otherwise>
+                    <span data-testid="result">Not a user</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<nested-cond-test type="user" active="true"></nested-cond-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Active user');
+    }
+};
+
+export const NestedConditionsInactive: Story = {
+    args: {
+        title: 'Nested conditionals - inactive user',
+        tag: 'nested-cond-inactive-test',
+        template: `
+            <attribute name="type"></attribute>
+            <attribute name="active"></attribute>
+            <choose>
+                <when test="//attributes/@type = 'user'">
+                    <if test="//attributes/@active = 'true'">
+                        <span data-testid="result">Active user</span>
+                    </if>
+                    <if test="//attributes/@active != 'true'">
+                        <span data-testid="result">Inactive user</span>
+                    </if>
+                </when>
+                <otherwise>
+                    <span data-testid="result">Not a user</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<nested-cond-inactive-test type="user" active="false"></nested-cond-inactive-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Inactive user');
+    }
+};
+
+export const NumericComparison: Story = {
+    args: {
+        title: 'Numeric comparison in conditions',
+        tag: 'numeric-cond-test',
+        template: `
+            <attribute name="count"></attribute>
+            <choose>
+                <when test="//attributes/@count > 10">
+                    <span data-testid="result">Many items</span>
+                </when>
+                <when test="//attributes/@count > 0">
+                    <span data-testid="result">Some items</span>
+                </when>
+                <otherwise>
+                    <span data-testid="result">No items</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<numeric-cond-test count="15"></numeric-cond-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Many items');
+    }
+};
+
+export const NumericComparisonLow: Story = {
+    args: {
+        title: 'Numeric comparison - low value',
+        tag: 'numeric-cond-low-test',
+        template: `
+            <attribute name="count"></attribute>
+            <choose>
+                <when test="//attributes/@count > 10">
+                    <span data-testid="result">Many items</span>
+                </when>
+                <when test="//attributes/@count > 0">
+                    <span data-testid="result">Some items</span>
+                </when>
+                <otherwise>
+                    <span data-testid="result">No items</span>
+                </otherwise>
+            </choose>
+        `,
+        payload: `<numeric-cond-low-test count="5"></numeric-cond-low-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Some items');
+    }
+};
+
+export const BooleanAndCondition: Story = {
+    args: {
+        title: 'Boolean AND condition',
+        tag: 'and-cond-test',
+        template: `
+            <attribute name="logged-in"></attribute>
+            <attribute name="admin"></attribute>
+            <if test="//attributes/@logged-in = 'true' and //attributes/@admin = 'true'">
+                <span data-testid="result">Admin panel access granted</span>
+            </if>
+            <if test="not(//attributes/@logged-in = 'true' and //attributes/@admin = 'true')">
+                <span data-testid="result">Access denied</span>
+            </if>
+        `,
+        payload: `<and-cond-test logged-in="true" admin="true"></and-cond-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Admin panel access granted');
+    }
+};
+
+export const BooleanOrCondition: Story = {
+    args: {
+        title: 'Boolean OR condition',
+        tag: 'or-cond-test',
+        template: `
+            <attribute name="role"></attribute>
+            <if test="//attributes/@role = 'admin' or //attributes/@role = 'moderator'">
+                <span data-testid="result">Elevated privileges</span>
+            </if>
+            <if test="not(//attributes/@role = 'admin' or //attributes/@role = 'moderator')">
+                <span data-testid="result">Standard user</span>
+            </if>
+        `,
+        payload: `<or-cond-test role="moderator"></or-cond-test>`
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+        const result = await canvas.findByTestId('result');
+        expect(result).toBeInTheDocument();
+        expect(result).toHaveTextContent('Elevated privileges');
+    }
+};
+
+export const MultipleInstances: Story = {
+    args: {
+        title: 'Multiple instances with different conditions',
+        tag: 'multi-instance-test',
+        template: `
+            <attribute name="data-testid"></attribute>
+            <attribute name="variant"></attribute>
+            <choose>
+                <when test="//attributes/@variant = 'primary'">
+                    <button data-testid="{$data-testid}-primary" class="primary">Primary Button</button>
+                </when>
+                <when test="//attributes/@variant = 'secondary'">
+                    <button data-testid="{$data-testid}-secondary" class="secondary">Secondary Button</button>
+                </when>
+                <otherwise>
+                    <button data-testid="{$data-testid}-otherwise" class="default">Default Button</button>
+                </otherwise>
+            </choose>
+        `,
+        payload: `
+            <multi-instance-test data-testid="btn1" variant="primary"></multi-instance-test>
+            <multi-instance-test data-testid="btn2" variant="secondary"></multi-instance-test>
+            <multi-instance-test data-testid="btn3" variant="unknown"></multi-instance-test>
+        `
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await sleep(50);
+
+        const btn1 = await canvas.findByTestId('btn1-primary');
+        expect(btn1).toHaveTextContent('Primary Button');
+        expect(btn1).toHaveClass('primary');
+
+        const btn2 = await canvas.findByTestId('btn2-secondary');
+        expect(btn2).toHaveTextContent('Secondary Button');
+        expect(btn2).toHaveClass('secondary');
+
+        const btn3 = await canvas.findByTestId('btn3-otherwise');
+        expect(btn3).toHaveTextContent('Default Button');
+        expect(btn3).toHaveClass('default');
+    }
+};
+
+
+export const MultipleIfOrderingIssue: Story = {
+    args: {
+        title: 'KNOWN ISSUE: Multiple IF blocks - out of order',
+        tag: 'multi-if-order-issue',
+        template: `
+            <div data-testid="whole-text">
+                <label><input type="checkbox" data-testid="toggle-a" slice="show-a" value="AA"  /> A</label>
+               
+                <hr/>
+                ▶
+                <if test="//show-a = 'AA'">
+                    !A
+                </if>            
+                ◀
+            </div>
+            <if test="//show-a = 'AA'">
+                <div data-testid="t-1">T1</div>
+            </if>            
+        `,
+        payload: `
+            <multi-if-order-issue></multi-if-order-issue>
+        `
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        // Initially ▶\s+◀ should be visible, !A should not
+        const container = await canvas.findByTestId('whole-text');
+        expect(container.textContent).to.toMatch(/▶\s+◀/);
+
+        // check A - show !A
+        const toggleA = await canvas.findByTestId('toggle-a');
+        debugger;
+        await userEvent.click(toggleA);
+
+        expect( await await canvas.findByTestId('t-1')).toBeInTheDocument();
+        // !A is rendered
+        expect(container.textContent).to.toMatch(/\!A/);
+        // !A afer ▶
+        expect(container.textContent).to.toMatch(/▶\s+\!A/);
+        // !A before ◀
+        expect(container.textContent).to.toMatch(/\!A\s+◀/);
+    }
+};
+
+//#region unit tests
+/* istanbul ignore else -- @preserve */
+if ('test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest')) {
+    const mod = await import('./xslt-conditionals.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook');
+    const { describe } = await import('vitest');
+    describe(meta.title, () => testStoryBook(mod, meta));
+}
+//#endregion