@muonic/muon 0.0.2-experimental-121-c4f70c3.0 → 0.0.2-experimental-124-cb13fb2.0

package/components/card/story.js

@@ -1,5 +1,6 @@
 import { Card } from '@muonic/muon/components/card';
 import setup from '@muonic/muon/storybook/stories';
+import { StandardLink as CTALink } from '../cta/story';
 
 const details = setup('card', Card);
 
@@ -11,14 +12,15 @@ const innerDetail = (args) => `
   <div slot="footer">${args.footer}</div>
 `;
 
-export const Standard = (args) => details.template(args, innerDetail);
+const StandardTemplate = (args) => details.template(args, innerDetail);
+export const Standard = StandardTemplate.bind({});
 Standard.args = {
   header: 'Where can I buy an ice cream?',
   content: `<p>We have the most wonderful shop just in town, that sells a whole variety of different ice creams. Just pop on in and we can get you sorted with your favourite flavour!</p>`,
-  footer: ` We've even got a free <a href='#!'>smartphone app</a>.`
+  footer: `We've even got a free <a href='#!'>smartphone app</a>.`
 };
 
-export const StandardWithImage = (args) => details.template(args, innerDetail);
+export const StandardWithImage = StandardTemplate.bind({});
 StandardWithImage.args = {
   image: 'https://blog.nucleus.design/vanilla-first/vanilla-ice-cream-cone.jpg',
   alt: '',
@@ -26,5 +28,17 @@ StandardWithImage.args = {
   header: 'Where can I buy an ice cream?',
   content: `<p>We have the most wonderful shop just in town, that sells a whole variety of different ice creams. Just pop on in and we can get you sorted with your favourite flavour!</p>
             <p>We have the most wonderful shop just in town, that sells a whole variety of different ice creams. Just pop on in and we can get you sorted with your favourite flavour!</p>`,
-  footer: ` We've even got a free <a href='#!'>smartphone app</a>.`
+  footer: `We've even got a free <a href='#!'>smartphone app</a>.`
+};
+
+const innerDetailWithCTA = (args) => `
+  <h2 slot="header">${args.header}</h2>
+  ${args.content}
+  <div slot="footer">${CTALink(args.footer)}</div>
+`;
+export const StandardWithCTA = (args) => details.template(args, innerDetailWithCTA);
+StandardWithCTA.args = {
+  header: 'Where can I buy an ice cream?',
+  content: `<p>We have the most wonderful shop just in town, that sells a whole variety of different ice creams. Just pop on in and we can get you sorted with your favourite flavour!</p>`,
+  footer: { text: 'Click Here', href: '#!' }
 };

package/components/cta/story.js

@@ -1,4 +1,3 @@
-import { staticHTML } from '@muonic/muon';
 import { Cta } from '@muonic/muon/components/cta';
 import setup from '@muonic/muon/storybook/stories';
 
@@ -7,86 +6,84 @@ const tag = details.getTagEl();
 
 export default details.defaultValues;
 
-export const Standard = (args) => details.template(args, (args) => args.text);
+const StandardTemplate = (args) => details.template(args, (args) => args.text);
+const ButtonTemplate = (args) => {
+  const dArgs = details.dynamicArgs(args);
+
+  return `<${tag} ${dArgs} ._isButton=${true}>${args.text}</${tag}>`;
+};
+const FormTemplate = (args) => `<form>${details.template(args, (args) => args.text)}</form>`;
+const WithinLinkTemplate = (args) => `<a href="${args.link}">${details.template(args, (args) => args.text)}</a>`;
+const WithinButtonTemplate = (args) => `<button>${details.template(args, (args) => args.text)}</button>`;
+
+export const Standard = StandardTemplate.bind({});
 Standard.args = { text: 'Highpoint' };
 
-export const Disabled = (args) => details.template(args, (args) => args.text);
+export const Disabled = StandardTemplate.bind({});
 Disabled.args = { text: 'Highpoint', disabled: true };
 
-export const Hidden = (args) => details.template(args, (args) => args.text);
+export const Hidden = StandardTemplate.bind({});
 Hidden.args = { text: 'Highpoint', hidden: true };
 
-export const Loading = (args) => details.template(args, (args) => args.text);
+export const Loading = StandardTemplate.bind({});
 Loading.args = { text: 'Highpoint', loading: true };
 
-export const StandardLink = (args) => details.template(args, (args) => args.text);
+export const StandardLink = StandardTemplate.bind({});
 StandardLink.storyName = 'Standard [link]';
 StandardLink.args = { text: 'Highpoint', href: '#!' };
 
-export const DisabledLink = (args) => details.template(args, (args) => args.text);
+export const DisabledLink = StandardTemplate.bind({});
 DisabledLink.storyName = 'Disabled [link]';
 DisabledLink.args = { text: 'Highpoint', disabled: true, href: '#!' };
 
-export const LoadingLink = (args) => details.template(args, (args) => args.text);
+export const LoadingLink = StandardTemplate.bind({});
 LoadingLink.storyName = 'Loading [link]';
 LoadingLink.args = { text: 'Highpoint', loading: true, href: '#!' };
 
-export const StandardButton = (args) => {
-  const dArgs = details.dynamicArgs(args);
-
-  return staticHTML`<${tag} ${dArgs} ._isButton=${true}>${args.text}</${tag}>`;
-};
+export const StandardButton = ButtonTemplate.bind({});
 StandardButton.storyName = 'Standard [button]';
 StandardButton.args = { text: 'Highpoint' };
 
-export const DisabledButton = (args) => {
-  const dArgs = details.dynamicArgs(args);
-
-  return staticHTML`<${tag} ${dArgs} ._isButton=${true}>${args.text}</${tag}>`;
-};
+export const DisabledButton = ButtonTemplate.bind({});
 DisabledButton.storyName = 'Disabled [button]';
 DisabledButton.args = { text: 'Highpoint', disabled: true };
 
-export const LoadingButton = (args) => {
-  const dArgs = details.dynamicArgs(args);
-
-  return staticHTML`<${tag} ${dArgs} ._isButton=${true}>${args.text}</${tag}>`;
-};
+export const LoadingButton = ButtonTemplate.bind({});
 LoadingButton.storyName = 'Loading [button]';
 LoadingButton.args = { text: 'Highpoint', loading: true };
 
-export const StandardForm = (args) => staticHTML`<form>${details.template(args, (args) => args.text)}</form>`;
+export const StandardForm = FormTemplate.bind({});
 StandardForm.storyName = 'Standard [within form]';
 StandardForm.args = { text: 'Highpoint' };
 
-export const DisabledForm = (args) => staticHTML`<form>${details.template(args, (args) => args.text)}</form>`;
+export const DisabledForm = FormTemplate.bind({});
 DisabledForm.storyName = 'Disabled [within form]';
 DisabledForm.args = { text: 'Highpoint', disabled: true };
 
-export const LoadingForm = (args) => staticHTML`<a href="${args.link}">${details.template(args, (args) => args.text)}</a>`;
-LoadingForm.storyName = 'Loading [within link]';
+export const LoadingForm = FormTemplate.bind({});
+LoadingForm.storyName = 'Loading [within form]';
 LoadingForm.args = { text: 'Highpoint', loading: true };
 
-export const StandardWithinLink = (args) => staticHTML`<a href="${args.link}">${details.template(args, (args) => args.text)}</a>`;
+export const StandardWithinLink = WithinLinkTemplate.bind({});
 StandardWithinLink.storyName = 'Standard [within link]';
 StandardWithinLink.args = { text: 'Highpoint', link: '#!' };
 
-export const DisabledWithinLink = (args) => staticHTML`<a href="${args.link}">${details.template(args, (args) => args.text)}</a>`;
+export const DisabledWithinLink = WithinLinkTemplate.bind({});
 DisabledWithinLink.storyName = 'Disabled [within link]';
 DisabledWithinLink.args = { text: 'Highpoint', disabled: true, link: '#!' };
 
-export const LoadingWithinLink = (args) => staticHTML`<a href="${args.link}">${details.template(args, (args) => args.text)}</a>`;
+export const LoadingWithinLink = WithinLinkTemplate.bind({});
 LoadingWithinLink.storyName = 'Loading [within link]';
 LoadingWithinLink.args = { text: 'Highpoint', loading: true, link: '#!' };
 
-export const StandardWithinButton = (args) => staticHTML`<button>${details.template(args, (args) => args.text)}</button>`;
+export const StandardWithinButton = WithinButtonTemplate.bind({});
 StandardWithinButton.storyName = 'Standard [within button]';
 StandardWithinButton.args = { text: 'Highpoint', link: '#!' };
 
-export const DisabledWithinButton = (args) => staticHTML`<button disabled>${details.template(args, (args) => args.text)}</button>`;
+export const DisabledWithinButton = WithinButtonTemplate.bind({});
 DisabledWithinButton.storyName = 'Disabled [within button]';
 DisabledWithinButton.args = { text: 'Highpoint', disabled: true, link: '#!' };
 
-export const LoadingWithinButton = (args) => staticHTML`<button>${details.template(args, (args) => args.text)}</button>`;
+export const LoadingWithinButton = WithinButtonTemplate.bind({});
 LoadingWithinButton.storyName = 'Loading [within button]';
 LoadingWithinButton.args = { text: 'Highpoint', loading: true, link: '#!' };

package/components/detail/story.js

@@ -10,13 +10,14 @@ const innerDetail = (args) => `
   ${args.content}
 `;
 
-export const Standard = (args) => details.template(args, innerDetail);
+const StandardTemplate = (args) => details.template(args, innerDetail);
+export const Standard = StandardTemplate.bind({});
 Standard.args = {
   heading: 'Where can I buy an ice cream?',
   content: 'We have the most wonderful shop just in town, that sells a whole variety of different ice creams. Just pop on in and we can get you sorted with your favourite flavour!'
 };
 
-export const WithIcon = (args) => details.template(args, innerDetail);
+export const WithIcon = StandardTemplate.bind({});
 WithIcon.args = {
   icon: 'dot-circle',
   heading: 'Where can I buy an ice cream?',

package/components/form/story.js

@@ -1,5 +1,7 @@
 import { Form } from '@muonic/muon/components/form';
 import setup from '@muonic/muon/storybook/stories';
+import { Text, Email, Checkbox } from '../inputter/story';
+import { Standard as SubmitCTA } from '../cta/story';
 
 const details = setup('form', Form);
 
@@ -7,29 +9,30 @@ export default details.defaultValues;
 
 const innerDetail = () => `
 <form>
-  <muon-inputter helper="Useful information to help populate this field." validation='["isRequired"]' name="username">
-    <label slot="label">Name</label>
-    <input type="text" placeholder="e.g. Placeholder" name="username"/>
-  </muon-inputter>
-
-  <muon-inputter value="" helper="How can we help you?" validation="[&quot;isRequired&quot;,&quot;isEmail&quot;]" autocomplete="email">
-      <label slot="label">Email</label>
-      <input type="email" placeholder="e.g. my@email.com" autocomplete="email" name="useremail">
-    <div slot="tip-details">By providing clarification on why this information is necessary.</div>
-  </muon-inputter>
+${Text({ ...Text.args,
+    name: 'username',
+    label: 'Name'
+  })}
+${Email({ ...Email.args,
+    name: 'useremail'
+  })}
   
   <label for="user-id">User ID<label>
   <input type="text" id="user-id" name="user-id" required/>
 
-  <muon-inputter heading="What options do you like?" helper="How can we help you?" validation='["isRequired"]' value="b">
-    <input type="checkbox" name="checkboxes" value="a" id="check-01">
-    <label for="check-01">Option A</label>
-    <input type="checkbox" name="checkboxes" value="b" id="check-02">
-    <label for="check-02">Option B</label>
-    <div slot="tip-details">By providing clarification on why this information is necessary.</div>
-  </muon-inputter>
+${Checkbox({ ...Checkbox.args,
+    value: 'b',
+    options: [
+      { label: 'Option A', value: 'a' },
+      { label: 'Option B', value: 'b' }
+    ]
+  })}
+
   <input type="reset" />
-  <muon-cta type="submit">Submit</muon-cta>
+  ${SubmitCTA({ ...SubmitCTA.args,
+    type: 'submit',
+    text: 'Submit'
+  })}
 <form>`;
 
 export const Standard = (args) => details.template(args, innerDetail);

package/components/icon/story.js

@@ -1,8 +1,26 @@
 import { Icon } from '@muonic/muon/components/icon';
 import setup from '@muonic/muon/storybook/stories';
+import {
+  ICON_CONFIG_SIZES
+} from '@muonic/muon/build/tokens/es6/muon-tokens.mjs';
 
 const details = setup('icon', Icon);
 
+details.defaultValues.argTypes = {
+  ...details.defaultValues.argTypes,
+  iconSize: {
+    table: {
+      disable: true
+    }
+  },
+  size: {
+    control: {
+      type: 'select',
+      options: [...ICON_CONFIG_SIZES]
+    }
+  }
+};
+
 export default details.defaultValues;
 
 export const Standard = (args) => details.template(args);

package/components/image/story.js

@@ -5,8 +5,10 @@ const details = setup('image', Image);
 
 export default details.defaultValues;
 
-export const Standard = (args) => details.template(args, (args) => args.text);
+const StandardTemplate = (args) => details.template(args, (args) => args.text);
+
+export const Standard = StandardTemplate.bind({});
 Standard.args = { src: 'https://blog.nucleus.design/vanilla-first/vanilla-ice-cream-cone.jpg', placeholder: '(src).thumb.48.48.png' };
 
-export const Background = (args) => details.template(args, (args) => args.text);
+export const Background = StandardTemplate.bind({});
 Background.args = { src: 'https://blog.nucleus.design/multi-branding/Multibrand.jpg', placeholder: '(src).thumb.48.48.png', background: true };

package/components/inputter/story.js

@@ -1,8 +1,18 @@
 import { Inputter } from '@muonic/muon/components/inputter';
 import setup from '@muonic/muon/storybook/stories';
-
+import customValidation from '@muon/utils/validation/index.js';
 const details = setup('inputter', Inputter);
 
+details.defaultValues.argTypes = {
+  ...details.defaultValues.argTypes,
+  validation: {
+    control: {
+      type: 'multi-select',
+      options: [...Object.keys(customValidation)]
+    }
+  }
+};
+
 export default details.defaultValues;
 
 const labelTemplate = (args) => `
@@ -13,13 +23,26 @@ const tipDetailsTemplate = (args) => `
   <div slot="tip-details">${args.tip}</div>
 `;
 
-const innerText = (args) => `
+const autoCompleteTemplate = (args) => `
+  ${args.autocomplete ? `autocomplete="${args.autocomplete}"` : ''}
+`;
+
+const placeHolderTemplate = (args) => `
+  ${args.placeholder ? `placeholder="${args.placeholder}"` : ''}
+`;
+
+const disabledTemplate = (args) => `
+  ${args.disabled ? `disabled` : ''}
+`;
+
+const slottedContent = (args) => `
   ${args.label ? labelTemplate(args) : ''}
-  <input type="${args.inputtype}" placeholder="${args.placeholder}">
+  <input type="${args.inputtype}" ${placeHolderTemplate(args)} ${autoCompleteTemplate(args)} ${disabledTemplate(args)}>
   ${args.tip ? tipDetailsTemplate(args) : ''}
 `;
 
-export const Text = (args) => details.template(args, innerText);
+const InputterStandardTemplate = (args) => details.template(args, slottedContent);
+export const Text = InputterStandardTemplate.bind({});
 Text.args = {
   inputtype: 'text',
   label: 'Text',
@@ -29,13 +52,7 @@ Text.args = {
   placeholder: 'e.g. Placeholder'
 };
 
-const innerEmail = (args) => `
-  ${args.label ? labelTemplate(args) : ''}
-  <input type="${args.inputtype}" placeholder="${args.placeholder}" autocomplete="${args.autocomplete}">
-  ${args.tip ? tipDetailsTemplate(args) : ''}
-`;
-
-export const Email = (args) => details.template(args, innerEmail);
+export const Email = InputterStandardTemplate.bind({});
 Email.args = {
   inputtype: 'email',
   label: 'Email',
@@ -47,13 +64,7 @@ Email.args = {
   autocomplete: 'email'
 };
 
-const innerTel = (args) => `
-  ${args.label ? labelTemplate(args) : ''}
-  <input type="${args.inputtype}" placeholder="${args.placeholder}" autocomplete="${args.autocomplete}">
-  ${args.tip ? tipDetailsTemplate(args) : ''}
-`;
-
-export const Tel = (args) => details.template(args, innerTel);
+export const Tel = InputterStandardTemplate.bind({});
 Tel.args = {
   inputtype: 'tel',
   label: 'Tel',
@@ -65,52 +76,29 @@ Tel.args = {
   autocomplete: 'tel'
 };
 
-const innerSearch = (args) => `
-  ${args.label ? labelTemplate(args) : ''}
-  <input type="${args.inputtype}">
-  ${args.tip ? tipDetailsTemplate(args) : ''}
-`;
-
-export const Search = (args) => details.template(args, innerSearch);
+export const Search = InputterStandardTemplate.bind({});
 Search.args = {
   inputtype: 'search',
   label: 'Search'
 };
 
-const innerPassword = (args) => `
-  ${args.label ? labelTemplate(args) : ''}
-  <input type="${args.inputtype}">
-  ${args.tip ? tipDetailsTemplate(args) : ''}
-`;
-
-export const Password = (args) => details.template(args, innerPassword);
+export const Password = InputterStandardTemplate.bind({});
 Password.args = {
   inputtype: 'password',
   label: 'Password'
 };
 
-const innerDisabled = (args) => `
-  ${args.label ? labelTemplate(args) : ''}
-  <input type="${args.inputtype}" placeholder="${args.placeholder}" disabled>
-  ${args.tip ? tipDetailsTemplate(args) : ''}
-`;
-
-export const Disabled = (args) => details.template(args, innerDisabled);
+export const Disabled = InputterStandardTemplate.bind({});
 Disabled.args = {
   inputtype: 'text',
   label: 'Disabled',
   value: '',
   validation: ['isRequired'],
-  placeholder: 'e.g. Placeholder'
+  placeholder: 'e.g. Placeholder',
+  disabled: true
 };
 
-const innerDate = (args) => `
-  ${args.label ? labelTemplate(args) : ''}
-  <input type="${args.inputtype}">
-  ${args.tip ? tipDetailsTemplate(args) : ''}
-`;
-
-export const Date = (args) => details.template(args, innerDate);
+export const Date = InputterStandardTemplate.bind({});
 Date.args = {
   inputtype: 'date',
   label: 'Date',
@@ -119,7 +107,7 @@ Date.args = {
   validation: ['isRequired', 'minDate(\'01/01/2022\')']
 };
 
-export const DateMask = (args) => details.template(args, innerText);
+export const DateMask = InputterStandardTemplate.bind({});
 DateMask.args = {
   inputtype: 'text',
   label: 'Date Mask',
@@ -130,7 +118,7 @@ DateMask.args = {
   validation: ['isRequired', 'minDate(\'01/01/2022\')']
 };
 
-export const Mask = (args) => details.template(args, innerText);
+export const Mask = InputterStandardTemplate.bind({});
 Mask.args = {
   inputtype: 'text',
   label: 'Mask',
@@ -140,7 +128,7 @@ Mask.args = {
   validation: ['isRequired']
 };
 
-export const Separator = (args) => details.template(args, innerText);
+export const Separator = InputterStandardTemplate.bind({});
 Separator.args = {
   inputtype: 'text',
   label: 'Separator',
@@ -178,54 +166,55 @@ Textarea.args = {
   placeholder: 'e.g. Provide information'
 };
 
-const innerCheckbox = (args) => `
-  <input type="checkbox" name="checkboxes" value="a" checked id="check-01">
-  <label for="check-01">Option A</label>
-  <input type="checkbox" name="checkboxes" value="b" id="check-02">
-  <label for="check-02">Option B</label>
-  <input type="checkbox" name="checkboxes" value="c" id="check-03">
-  <label for="check-03">Option C</label>
-  <input type="checkbox" name="checkboxes" value="d" disabled id="check-04">
-  <label for="check-04">Option D</label>
+const innerMultiple = (args) => `
+  ${args.options?.map((option, i) => {
+    const states = option.states?.join(' ') ?? '';
+    const id = `${args.inputtype}-${i + 1}`;
+    return `
+    <input type="${args.inputtype}" name="${args.name}" value="${option.value}" ${states} id="${id}">
+    <label for="${id}">${option.label}</label>
+    `;
+  }).join(' ')}
   ${args.tip ? tipDetailsTemplate(args) : ''}
 `;
 
-export const Checkbox = (args) => details.template(args, innerCheckbox);
+const InputterMultipleTemplate = (args) => details.template(args, innerMultiple);
+export const Checkbox = InputterMultipleTemplate.bind({});
 Checkbox.args = {
+  inputtype: 'checkbox',
   heading: 'What options do you like?',
   helper: 'How can we help you?',
   tip: 'By providing clarification on why this information is necessary.',
-  validation: ['isRequired']
+  validation: ['isRequired'],
+  name: 'checkboxes',
+  options: [
+    { label: 'Option A', value: 'a', states: ['checked'] },
+    { label: 'Option B', value: 'b' },
+    { label: 'Option C', value: 'c' },
+    { label: 'Option D', value: 'd', states: ['disabled'] }
+  ]
 };
 
-const innerRadio = (args) => `
-  <input type="radio" name="radiobuttons" value="a" checked id="radio-01">
-  <label for="radio-01">Choice A</label>
-  <input type="radio" name="radiobuttons" value="b" id="radio-02">
-  <label for="radio-02">Choice B</label>
-  <input type="radio" name="radiobuttons" value="c" id="radio-03">
-  <label for="radio-03">Option C</label>
-  <input type="radio" name="radiobuttons" value="d" disabled id="radio-04">
-  <label for="radio-04">Choice D</label>
-  ${args.tip ? tipDetailsTemplate(args) : ''}
-`;
-
-export const Radio = (args) => details.template(args, innerRadio);
+export const Radio = InputterMultipleTemplate.bind({});
 Radio.args = {
+  inputtype: 'radio',
   heading: 'Which choice would you prefer?',
   helper: 'How can we help you?',
   tip: 'By providing clarification on why this information is necessary.',
-  validation: ['isRequired']
+  validation: ['isRequired'],
+  name: 'radiobuttons',
+  options: [
+    { label: 'Choice A', value: 'a', states: ['checked'] },
+    { label: 'Choice B', value: 'b' },
+    { label: 'Choice C', value: 'c' },
+    { label: 'Choice D', value: 'd', states: ['disabled'] }
+  ]
 };
 
 const innerSelect = (args) => `
   <label slot="label">${args.label}</label>
-  <select name="select">
-    <option value="">Please select</option>
-    <option value="value-01">Value one</option>
-    <option value="value-02">Value two</option>
-    <option value="value-03">Value three</option>
-    <option value="value-04">Value four</option>
+  <select name="${args.name}">
+  ${args.options?.map((option) => `<option value="${option.value}">${option.label}</option>`).join(' ')}
   </select>
 `;
 
@@ -233,5 +222,13 @@ export const Select = (args) => details.template(args, innerSelect);
 Select.args = {
   label: 'Select',
   value: '',
-  validation: ['isRequired']
+  validation: ['isRequired'],
+  name: 'select',
+  options: [
+    { label: 'Please select', value: '' },
+    { label: 'Value one', value: 'value-01' },
+    { label: 'Value two', value: 'value-02' },
+    { label: 'Value three', value: 'value-03' },
+    { label: 'Value four', value: 'value-04' }
+  ]
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-121-c4f70c3.0",
+  "version": "0.0.2-experimental-124-cb13fb2.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@open-wc/testing": "3.1.6",
-    "@web/dev-server-esbuild": "0.3.0",
+    "@web/dev-server-esbuild": "0.3.1",
     "@web/test-runner": "0.13.31",
     "@web/test-runner-browserstack": "0.5.0",
     "@web/test-runner-playwright": "0.8.9",

package/storybook/stories.js

@@ -1,4 +1,3 @@
-import { html, unsafeStatic } from 'lit/static-html.js';
 export default (name, el) => {
   const prefix = process.env.MUON_PREFIX;
   const element = `${prefix}-${name}`;
@@ -41,7 +40,7 @@ export default (name, el) => {
   };
 
   const getTagEl = () => {
-    return unsafeStatic(element);
+    return element;
   };
 
   const dynamicArgs = (args) => {
@@ -64,14 +63,14 @@ export default (name, el) => {
       }
     }).filter((arg) => arg).join(' ');
 
-    return unsafeStatic(dArgs);
+    return dArgs;
   };
 
   const template = (args, inner) => {
     const tag = getTagEl();
     const dArgs = dynamicArgs(args);
 
-    return html`<${tag} ${dArgs}>${inner ? unsafeStatic(inner(args)) : ''}</${tag}>`;
+    return `<${tag} ${dArgs}>${inner ? inner(args) : ''}</${tag}>`;
   };
 
   return {