@muonic/muon 0.0.2-experimental-124-cb13fb2.0 → 0.0.2-experimental-127-d2b1c67.0

package/components/card/story.js

@@ -1,15 +1,23 @@
 import { Card } from '@muonic/muon/components/card';
 import setup from '@muonic/muon/storybook/stories';
 import { StandardLink as CTALink } from '../cta/story';
+import { staticHTML, unsafeStatic } from '@muonic/muon';
 
 const details = setup('card', Card);
 
-export default details.defaultValues;
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate']
+    }
+  }
+};
 
-const innerDetail = (args) => `
-  <h2 slot="header">${args.header}</h2>
-  ${args.content}
-  <div slot="footer">${args.footer}</div>
+const innerDetail = (args) => staticHTML`
+  <h2 slot="header">${unsafeStatic(args.header)}</h2>
+  ${unsafeStatic(args.content)}
+  <div slot="footer">${unsafeStatic(args.footer)}</div>
 `;
 
 const StandardTemplate = (args) => details.template(args, innerDetail);
@@ -31,14 +39,14 @@ StandardWithImage.args = {
   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>
+const innerDetailWithCTA = (args) => staticHTML`
+  <h2 slot="header">${unsafeStatic(args.header)}</h2>
+  ${unsafeStatic(args.content)}
+  <div slot="footer">${CTALink(args.cta)}</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: '#!' }
+  cta: { ...CTALink.args, text: 'Click Here', href: '#!' }
 };

package/components/cta/story.js

@@ -1,20 +1,28 @@
 import { Cta } from '@muonic/muon/components/cta';
 import setup from '@muonic/muon/storybook/stories';
+import { staticHTML } from '@muonic/muon';
 
 const details = setup('cta', Cta);
 const tag = details.getTagEl();
 
-export default details.defaultValues;
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate', 'submitTemplate', 'resetTemplate', 'loading-message']
+    }
+  }
+};
 
-const StandardTemplate = (args) => details.template(args, (args) => args.text);
+const StandardTemplate = (args) => staticHTML`${details.template(args, (args) => args.text)}`;
 const ButtonTemplate = (args) => {
   const dArgs = details.dynamicArgs(args);
 
-  return `<${tag} ${dArgs} ._isButton=${true}>${args.text}</${tag}>`;
+  return staticHTML`<${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>`;
+const FormTemplate = (args) => staticHTML`<form>${StandardTemplate(args)}</form>`;
+const WithinLinkTemplate = (args) => staticHTML`<a href="${args.link}">${StandardTemplate(args)}</a>`;
+const WithinButtonTemplate = (args) => staticHTML`<button>${StandardTemplate(args)}</button>`;
 
 export const Standard = StandardTemplate.bind({});
 Standard.args = { text: 'Highpoint' };

package/components/detail/story.js

@@ -1,13 +1,21 @@
 import { Detail } from '@muonic/muon/components/detail';
 import setup from '@muonic/muon/storybook/stories';
+import { staticHTML, unsafeStatic } from '@muonic/muon';
 
 const details = setup('detail', Detail);
 
-export default details.defaultValues;
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate']
+    }
+  }
+};
 
-const innerDetail = (args) => `
-  <div slot="heading">${args.heading}</div>
-  ${args.content}
+const innerDetail = (args) => staticHTML`
+  <div slot="heading">${unsafeStatic(args.heading)}</div>
+  ${unsafeStatic(args.content)}
 `;
 
 const StandardTemplate = (args) => details.template(args, innerDetail);

package/components/form/src/config-tokens.json

@@ -0,0 +1,11 @@
+{
+  "form": {
+    "config": {
+      "type": {
+        "description": "Default value for `type` property which renders the template.",
+        "value": "standard",
+        "type": "string"
+      }
+    }
+  }
+}

package/components/form/src/design-tokens.json

@@ -0,0 +1,9 @@
+{
+  "form": {
+    "row": {
+      "gap": {
+        "value": "{ theme.spacer.lg.value }"
+      }
+    }
+  }
+}

package/components/form/src/form-component.js

@@ -1,5 +1,6 @@
-import { html, MuonElement } from '@muonic/muon';
+import { html, MuonElement, css, unsafeCSS } from '@muonic/muon';
 import scrollTo from '@muon/utils/scroll';
+import styles from './form-styles.css';
 
 /**
  * A form.
@@ -15,6 +16,10 @@ export class Form extends MuonElement {
     this._reset = this._reset.bind(this);
   }
 
+  static get styles() {
+    return css`${unsafeCSS(styles)}`;
+  }
+
   connectedCallback() {
     super.connectedCallback();
 
@@ -178,9 +183,7 @@ export class Form extends MuonElement {
 
   get standardTemplate() {
     return html`
-      <div class="form">
-          <slot></slot>
-      </div>
+      <slot></slot>
     `;
   }
 }

package/components/form/src/form-styles.css

@@ -0,0 +1,10 @@
+@import "@muonic/muon/css/default.css";
+
+:host {
+  display: block;
+
+  & ::slotted(.layout-row) {
+    display: grid;
+    row-gap: $FORM_ROW_GAP;
+  }
+}

package/components/form/story.js

@@ -1,38 +1,56 @@
 import { Form } from '@muonic/muon/components/form';
 import setup from '@muonic/muon/storybook/stories';
-import { Text, Email, Checkbox } from '../inputter/story';
+import * as InputterStories from '../inputter/story';
 import { Standard as SubmitCTA } from '../cta/story';
+import { staticHTML } from '@muonic/muon';
 
 const details = setup('form', Form);
 
-export default details.defaultValues;
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate', 'submit']
+    }
+  }
+};
 
-const innerDetail = () => `
-<form>
-${Text({ ...Text.args,
+const innerDetail = (args) => staticHTML`
+  <form>
+    ${InputterStories.Text(args.Text)}
+    ${InputterStories.Email(args.Email)}
+
+    <label for="user-id">User ID<label>
+    <input type="text" id="user-id" name="user-id" required/>
+
+    ${InputterStories.Checkbox(args.Checkbox)}
+
+    <input type="reset" />
+    ${SubmitCTA(args.Submit)}
+  <form>`;
+
+export const Standard = (args) => details.template(args, innerDetail);
+Standard.args = {
+  Text: {
+    ...InputterStories.Text.args,
     name: 'username',
     label: 'Name'
-  })}
-${Email({ ...Email.args,
+  },
+  Email: {
+    ...InputterStories.Email.args,
     name: 'useremail'
-  })}
-  
-  <label for="user-id">User ID<label>
-  <input type="text" id="user-id" name="user-id" required/>
-
-${Checkbox({ ...Checkbox.args,
+  },
+  Checkbox: {
+    ...InputterStories.Checkbox.args,
     value: 'b',
     options: [
       { label: 'Option A', value: 'a' },
       { label: 'Option B', value: 'b' }
     ]
-  })}
-
-  <input type="reset" />
-  ${SubmitCTA({ ...SubmitCTA.args,
+  },
+  Submit: {
+    ...SubmitCTA.args,
     type: 'submit',
     text: 'Submit'
-  })}
-<form>`;
-
-export const Standard = (args) => details.template(args, innerDetail);
+  }
+};

package/components/icon/story.js

@@ -6,22 +6,21 @@ import {
 
 const details = setup('icon', Icon);
 
-details.defaultValues.argTypes = {
-  ...details.defaultValues.argTypes,
-  iconSize: {
-    table: {
-      disable: true
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate', 'sizes', 'iconSize', 'allSizes']
     }
   },
-  size: {
-    control: {
-      type: 'select',
-      options: [...ICON_CONFIG_SIZES]
+  argTypes: {
+    ...details.defaultValues.argTypes,
+    size: {
+      control:
+      { type: 'range', min: 1, max: ICON_CONFIG_SIZES.length, step: 1 }
     }
   }
 };
 
-export default details.defaultValues;
-
 export const Standard = (args) => details.template(args);
 Standard.args = { name: 'arrow-right' };

package/components/image/story.js

@@ -1,9 +1,26 @@
 import { Image } from '@muonic/muon/components/image';
 import setup from '@muonic/muon/storybook/stories';
+import { IMAGE_CONFIG_RATIOS } from '@muonic/muon/build/tokens/es6/muon-tokens.mjs';
 
 const details = setup('image', Image);
 
-export default details.defaultValues;
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate', 'placeholderImage']
+    }
+  },
+  argTypes: {
+    ...details.defaultValues.argTypes,
+    ratio: {
+      options: IMAGE_CONFIG_RATIOS,
+      control: {
+        type: 'inline-radio'
+      }
+    }
+  }
+};
 
 const StandardTemplate = (args) => details.template(args, (args) => args.text);
 

package/components/inputter/story.js

@@ -1,53 +1,56 @@
 import { Inputter } from '@muonic/muon/components/inputter';
 import setup from '@muonic/muon/storybook/stories';
 import customValidation from '@muon/utils/validation/index.js';
+import { staticHTML, unsafeStatic } from '@muonic/muon';
+
 const details = setup('inputter', Inputter);
 
-details.defaultValues.argTypes = {
-  ...details.defaultValues.argTypes,
-  validation: {
-    control: {
-      type: 'multi-select',
-      options: [...Object.keys(customValidation)]
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate']
+    }
+  },
+  argTypes: {
+    ...details.defaultValues.argTypes,
+    validation: {
+      control: {
+        type: 'multi-select',
+        options: [...Object.keys(customValidation)]
+      }
     }
   }
 };
 
-export default details.defaultValues;
+const autoCompleteTemplate = (args) => args.autocomplete ? unsafeStatic(`autocomplete="${args.autocomplete}"`) : '';
 
-const labelTemplate = (args) => `
-  <label slot="label">${args.label}</label>
-`;
+const placeHolderTemplate = (args) => args.placeholder ? unsafeStatic(`placeholder="${args.placeholder}"`) : '';
 
-const tipDetailsTemplate = (args) => `
-  <div slot="tip-details">${args.tip}</div>
-`;
+const disabledTemplate = (args) => args.disabled ? unsafeStatic(`disabled`) : '';
 
-const autoCompleteTemplate = (args) => `
-  ${args.autocomplete ? `autocomplete="${args.autocomplete}"` : ''}
-`;
+const labelTemplate = (args) => staticHTML`
+  <label slot="label">${args.label}</label>`;
 
-const placeHolderTemplate = (args) => `
-  ${args.placeholder ? `placeholder="${args.placeholder}"` : ''}
-`;
+const tipDetailsTemplate = (args) => staticHTML`
+  <div slot="tip-details">${args.tip}</div>`;
 
-const disabledTemplate = (args) => `
-  ${args.disabled ? `disabled` : ''}
-`;
+const inputTemplate = (args) => staticHTML`
+<input type="${args.inputtype}" ${placeHolderTemplate(args)} ${autoCompleteTemplate(args)} ${disabledTemplate(args)}>`;
 
-const slottedContent = (args) => `
+const singleTemplate = (args) => staticHTML`
   ${args.label ? labelTemplate(args) : ''}
-  <input type="${args.inputtype}" ${placeHolderTemplate(args)} ${autoCompleteTemplate(args)} ${disabledTemplate(args)}>
-  ${args.tip ? tipDetailsTemplate(args) : ''}
-`;
+  ${args.inputtype ? inputTemplate(args) : ''}
+  ${args.tip ? tipDetailsTemplate(args) : ''}`;
 
-const InputterStandardTemplate = (args) => details.template(args, slottedContent);
+const InputterStandardTemplate = (args) => details.template(args, singleTemplate);
 export const Text = InputterStandardTemplate.bind({});
 Text.args = {
   inputtype: 'text',
   label: 'Text',
   value: '',
   helper: 'Useful information to help populate this field.',
+  tip: '',
   validation: ['isRequired'],
   placeholder: 'e.g. Placeholder'
 };
@@ -138,7 +141,7 @@ Separator.args = {
   separator: '-'
 };
 
-const innerNumber = (args) => `
+const innerNumber = (args) => staticHTML`
   ${args.label ? labelTemplate(args) : ''}
   <input type="${args.inputtype}"  min="${args.min}" max="${args.max}">
   ${args.tip ? tipDetailsTemplate(args) : ''}
@@ -153,7 +156,7 @@ Number.args = {
   max: 10
 };
 
-const innerTextarea = (args) => `
+const innerTextarea = (args) => staticHTML`
   <label slot="label">${args.label}</label>
   <textarea placeholder="${args.placeholder}"></textarea>
 `;
@@ -166,19 +169,25 @@ Textarea.args = {
   placeholder: 'e.g. Provide information'
 };
 
-const innerMultiple = (args) => `
+const innerMultiple = (args) => staticHTML`
+  <input type="${args.inputtype}" name="${args.name}" value="${args.value}" ${unsafeStatic(args.states?.join(' ') ?? '')} id="${args.id}">
+  <label for="${args.id}">${unsafeStatic(args.label)}</label>
+`;
+const multiTemplate = (args) => staticHTML`
   ${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(' ')}
+    return staticHTML`${innerMultiple({
+      ...args,
+      value: option.value,
+      label: option.label,
+      id,
+      states: option.states
+    })}`;
+  })}
   ${args.tip ? tipDetailsTemplate(args) : ''}
 `;
 
-const InputterMultipleTemplate = (args) => details.template(args, innerMultiple);
+const InputterMultipleTemplate = (args) => details.template(args, multiTemplate);
 export const Checkbox = InputterMultipleTemplate.bind({});
 Checkbox.args = {
   inputtype: 'checkbox',
@@ -211,14 +220,14 @@ Radio.args = {
   ]
 };
 
-const innerSelect = (args) => `
+const selectTemplate = (args) => staticHTML`
   <label slot="label">${args.label}</label>
   <select name="${args.name}">
-  ${args.options?.map((option) => `<option value="${option.value}">${option.label}</option>`).join(' ')}
+  ${args.options?.map((option) => staticHTML`<option value="${option.value}">${option.label}</option>`)}
   </select>
 `;
 
-export const Select = (args) => details.template(args, innerSelect);
+export const Select = (args) => details.template(args, selectTemplate);
 Select.args = {
   label: 'Select',
   value: '',

package/index.js

@@ -18,7 +18,7 @@ import { cache } from 'lit/directives/cache.js';
 import { AsyncDirective } from 'lit/async-directive.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { literal, html as staticHTML } from 'lit/static-html.js';
+import { literal, html as staticHTML, unsafeStatic } from 'lit/static-html.js';
 import { until } from 'lit/directives/until.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { MuonElement } from '@muonic/muon/muon-element';
@@ -43,6 +43,7 @@ export {
   dedupeMixin,
   literal,
   staticHTML,
+  unsafeStatic,
   until,
   noChange,
   repeat,

package/muon-element/index.js

@@ -1,7 +1,7 @@
 import { html, LitElement, adoptStyles, supportsAdoptingStyleSheets } from '@muonic/muon';
-// eslint-disable-next-line jsdoc/valid-types
+
 /**
- * @typedef {import('@lit/reactive-element').CSSResultOrNative} CSSResultOrNative
+ * @typedef {module:lit.CSSResultOrNative} CSSResultOrNative - define css type
  */
 
 export const MuonElementMixin = (superClass) => class extends superClass {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-124-cb13fb2.0",
+  "version": "0.0.2-experimental-127-d2b1c67.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/storybook/stories.js

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

package/tests/components/form/__snapshots__/form.test.snap.js

@@ -2,58 +2,44 @@
 export const snapshots = {};
 
 snapshots["form implements standard self [with form]"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form implements standard self [with form] */
 
 snapshots["form form with submit button"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form with submit button */
 
 snapshots["form form with submit input"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form with submit input */
 
 snapshots["form form with reset button"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form with reset button */
 
 snapshots["form form with reset input"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form with reset input */
 
 snapshots["form form submitting"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form submitting */
 
 snapshots["form form button disabled submitting"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form button disabled submitting */
 
@@ -66,42 +52,32 @@ snapshots["form form submitting validation"] =
 /* end snapshot form form submitting validation */
 
 snapshots["form form submitting with input"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form submitting with input */
 
 snapshots["form form submitting with inputter"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form submitting with inputter */
 
 snapshots["form form submitting with inputter parent"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form submitting with inputter parent */
 
 snapshots["form form with reset cta"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form with reset cta */
 
 snapshots["form form with submit cta"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form with submit cta */
 
@@ -114,26 +90,20 @@ snapshots["form form button loading submitting"] =
 /* end snapshot form form button loading submitting */
 
 snapshots["form form cta loading submitting"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form cta loading submitting */
 
 snapshots["form form cta loading reset"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form cta loading reset */
 
 snapshots["form form submitting with inputter [validate]"] = 
-`<div class="form">
-  <slot>
-  </slot>
-</div>
+`<slot>
+</slot>
 `;
 /* end snapshot form form submitting with inputter [validate] */
 

package/tests/components/form/form.test.js

@@ -32,14 +32,12 @@ describe('form', () => {
     await defaultChecks(el);
 
     const shadowRoot = el.shadowRoot;
-    const form = shadowRoot.querySelector('.form');
-    const slot = form.querySelector('slot');
+    const slot = shadowRoot.querySelector('slot');
     const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
 
     expect(el.type).to.equal('standard', '`type` property has default value `standard`');
     expect(el._submitButton).to.equal(null, 'no `submit` button added');
     expect(el._resetButton).to.equal(null, 'no `reset` button added');
-    expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(el._nativeForm).to.not.be.null; // eslint-disable-line no-unused-expressions
@@ -50,15 +48,13 @@ describe('form', () => {
     await defaultChecks(el);
 
     const shadowRoot = el.shadowRoot;
-    const form = shadowRoot.querySelector('.form');
-    const slot = form.querySelector('slot');
+    const slot = shadowRoot.querySelector('slot');
     const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
 
     expect(el.type).to.equal('standard', '`type` property has default value `standard`');
     expect(el._submitButton.nodeName).to.equal('BUTTON', 'has submit button');
     expect(el._submitButton.type).to.equal('submit', 'has submit type button');
     expect(el._resetButton).to.equal(null, 'no `reset` button added');
-    expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
   });
@@ -68,15 +64,13 @@ describe('form', () => {
     await defaultChecks(el);
 
     const shadowRoot = el.shadowRoot;
-    const form = shadowRoot.querySelector('.form');
-    const slot = form.querySelector('slot');
+    const slot = shadowRoot.querySelector('slot');
     const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
 
     expect(el.type).to.equal('standard', '`type` property has default value `standard`');
     expect(el._submitButton.nodeName.toLowerCase()).to.equal(ctaTagName, 'has submit cta');
     expect(el._submitButton.type).to.equal('submit', 'has submit type button');
     expect(el._resetButton).to.equal(null, 'no `reset` cta added');
-    expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
   });
@@ -86,15 +80,13 @@ describe('form', () => {
     await defaultChecks(el);
 
     const shadowRoot = el.shadowRoot;
-    const form = shadowRoot.querySelector('.form');
-    const slot = form.querySelector('slot');
+    const slot = shadowRoot.querySelector('slot');
     const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
 
     expect(el.type).to.equal('standard', '`type` property has default value `standard`');
     expect(el._submitButton.nodeName).to.equal('INPUT', 'has submit input');
     expect(el._submitButton.type).to.equal('submit', 'has submit type input');
     expect(el._resetButton).to.equal(null, 'no `reset` button added');
-    expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
   });
@@ -104,15 +96,13 @@ describe('form', () => {
     await defaultChecks(el);
 
     const shadowRoot = el.shadowRoot;
-    const form = shadowRoot.querySelector('.form');
-    const slot = form.querySelector('slot');
+    const slot = shadowRoot.querySelector('slot');
     const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
 
     expect(el.type).to.equal('standard', '`type` property has default value `standard`');
     expect(el._resetButton.nodeName).to.equal('BUTTON', 'has reset button');
     expect(el._resetButton.type).to.equal('reset', 'has reset type button');
     expect(el._submitButton).to.equal(null, 'no `submit` button added');
-    expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
   });
@@ -122,15 +112,13 @@ describe('form', () => {
     await defaultChecks(el);
 
     const shadowRoot = el.shadowRoot;
-    const form = shadowRoot.querySelector('.form');
-    const slot = form.querySelector('slot');
+    const slot = shadowRoot.querySelector('slot');
     const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
 
     expect(el.type).to.equal('standard', '`type` property has default value `standard`');
     expect(el._resetButton.nodeName.toLowerCase()).to.equal(ctaTagName, 'has reset cta');
     expect(el._resetButton.type).to.equal('reset', 'has reset type button');
     expect(el._submitButton).to.equal(null, 'no `submit` cta added');
-    expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
   });
@@ -140,15 +128,13 @@ describe('form', () => {
     await defaultChecks(el);
 
     const shadowRoot = el.shadowRoot;
-    const form = shadowRoot.querySelector('.form');
-    const slot = form.querySelector('slot');
+    const slot = shadowRoot.querySelector('slot');
     const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
 
     expect(el.type).to.equal('standard', '`type` property has default value `standard`');
     expect(el._resetButton.nodeName).to.equal('INPUT', 'has reset input');
     expect(el._resetButton.type).to.equal('reset', 'has reset type input');
     expect(el._submitButton).to.equal(null, 'no `submit` button added');
-    expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
   });