kemet-ui 3.0.0 → 3.1.0

package/dist/utilities/controllers/forms.js

@@ -2,11 +2,10 @@ export class FormSubmitController {
     constructor(host, options = undefined) {
         (this.host = host).addController(this);
         this.options = {
-            form: (input) => input.closest('form'),
-            name: (input) => input.name,
-            value: (input) => input.value,
-            disabled: (input) => input.disabled,
-            checkValidity: (input) => (typeof input.checkValidity === 'function' ? input.checkValidity() : true),
+            form: input => input.closest('form'),
+            name: input => input.name,
+            value: input => input.value,
+            disabled: input => input.disabled,
             ...options,
         };
         this.handleFormData = this.handleFormData.bind(this);
@@ -32,24 +31,23 @@ export class FormSubmitController {
         const name = this.options.name(this.host);
         const value = this.options.value(this.host);
         if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {
-            if (Array.isArray(value)) {
-                value.forEach((val) => {
-                    var _a;
-                    (_a = event.formData) === null || _a === void 0 ? void 0 : _a.append(name, val.toString());
-                });
-            }
-            else {
-                (_a = event.formData) === null || _a === void 0 ? void 0 : _a.append(name, value.toString());
-            }
+            // TODO recreate a scenario where value will be an array
+            // if (Array.isArray(value)) {
+            //   value.forEach((val) => {
+            //     event.formData?.append(name, val.toString());
+            //   });
+            // } else {
+            //   event.formData?.append(name, value.toString());
+            // }
+            (_a = event.formData) === null || _a === void 0 ? void 0 : _a.append(name, value.toString());
         }
     }
     handleFormSubmit(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
         const disabled = this.options.disabled(this.host);
-        const checkValidity = this.options.checkValidity;
         this.form = this.options.form(this.host);
-        if (this.form && !this.form.noValidate && !disabled && !checkValidity(this.host)) {
-            event.preventDefault();
-            event.stopImmediatePropagation();
+        if (this.form && !this.form.noValidate && !disabled) {
             const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');
             components.forEach((component) => {
                 component.checkValidity();

package/dist/utilities/controllers/forms.js.map

@@ -1 +1 @@
-{"version":3,"file":"forms.js","sourceRoot":"","sources":["../../../src/utilities/controllers/forms.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,oBAAoB;IAK/B,YAAY,IAAI,EAAE,OAAO,GAAG,SAAS;QACnC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,GAAG;YACb,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;YACtC,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;YAC3B,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK;YAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ;YACnC,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,KAAK,CAAC,aAAa,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YACpG,GAAG,OAAO;SACX,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,aAAa;QACX,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEzC,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YAC5D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAC7D;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YAC/D,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAC/D,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;SACvB;IACH,CAAC;IAED,cAAc,CAAC,KAAK;;QAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClD,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5C,IAAI,CAAC,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,WAAW,EAAE;YACzE,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACxB,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;;oBACpB,MAAA,KAAK,CAAC,QAAQ,0CAAE,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;gBAC/C,CAAC,CAAC,CAAC;aACJ;iBAAM;gBACL,MAAA,KAAK,CAAC,QAAQ,0CAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;aAChD;SACF;IACH,CAAC;IAED,gBAAgB,CAAC,KAAK;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClD,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;QAEjD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEzC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YAChF,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,yEAAyE,CAAC,CAAC;YAEzH,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;gBAC/B,SAAS,CAAC,aAAa,EAAE,CAAC;gBAE1B,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,EAAE;oBAC9B,SAAS,CAAC,MAAM,GAAG,OAAO,CAAC;oBAC3B,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;oBAEzB,SAAS,CAAC,aAAa,CACrB,IAAI,WAAW,CAAC,oBAAoB,EAAE;wBACpC,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE;4BACN,MAAM,EAAE,OAAO;4BACf,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;4BACtD,OAAO,EAAE,SAAS;yBACnB;qBACF,CAAC,CACH,CAAC;iBACH;gBAED,IAAI,SAAS,CAAC,kBAAkB,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE,EAAE;oBACnE,SAAS,CAAC,MAAM,GAAG,OAAO,CAAC;oBAC3B,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;oBAEzB,SAAS,CAAC,aAAa,CACrB,IAAI,WAAW,CAAC,oBAAoB,EAAE;wBACpC,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE;4BACN,MAAM,EAAE,OAAO;4BACf,QAAQ,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;4BAC/B,OAAO,EAAE,SAAS;yBACnB;qBACF,CAAC,CACH,CAAC;iBACH;YACH,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAEhD,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;YACvB,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YACnC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC;YACzB,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;YAC1B,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,eAAe,CAAC;YACpC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,YAAY,CAAC;YACrC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACjC,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;YACnC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACzB,MAAM,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,CAAC,MAAM,EAAE,CAAC;SACjB;IACH,CAAC;CACF","sourcesContent":["export class FormSubmitController {\n  host;\n  form;\n  options;\n\n  constructor(host, options = undefined) {\n    (this.host = host).addController(this);\n    this.options = {\n      form: (input) => input.closest('form'),\n      name: (input) => input.name,\n      value: (input) => input.value,\n      disabled: (input) => input.disabled,\n      checkValidity: (input) => (typeof input.checkValidity === 'function' ? input.checkValidity() : true),\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      if (Array.isArray(value)) {\n        value.forEach((val) => {\n          event.formData?.append(name, val.toString());\n        });\n      } else {\n        event.formData?.append(name, value.toString());\n      }\n    }\n  }\n\n  handleFormSubmit(event) {\n    const disabled = this.options.disabled(this.host);\n    const checkValidity = this.options.checkValidity;\n\n    this.form = this.options.form(this.host);\n\n    if (this.form && !this.form.noValidate && !disabled && !checkValidity(this.host)) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n      components.forEach((component) => {\n        component.checkValidity();\n\n        if (!component.checkValidity()) {\n          component.status = 'error';\n          component.invalid = true;\n\n          component.dispatchEvent(\n            new CustomEvent('kemet-input-status', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                status: 'error',\n                validity: component.validity ? component.validity : {},\n                element: component,\n              },\n            })\n          );\n        }\n\n        if (component.checkLimitValidity && !component.checkLimitValidity()) {\n          component.status = 'error';\n          component.invalid = true;\n\n          component.dispatchEvent(\n            new CustomEvent('kemet-input-status', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                status: 'error',\n                validity: { passedLimit: true },\n                element: component,\n              },\n            })\n          );\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n"]}
+{"version":3,"file":"forms.js","sourceRoot":"","sources":["../../../src/utilities/controllers/forms.ts"],"names":[],"mappings":"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","sourcesContent":["export class FormSubmitController {\n  host;\n\n  form;\n\n  options;\n\n  constructor(host, options = undefined) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: input => input.closest('form'),\n      name: input => input.name,\n      value: input => input.value,\n      disabled: input => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !this.form.noValidate && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n      components.forEach((component) => {\n        component.checkValidity();\n\n        if (!component.checkValidity()) {\n          component.status = 'error';\n          component.invalid = true;\n\n          component.dispatchEvent(\n            new CustomEvent('kemet-input-status', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                status: 'error',\n                validity: component.validity ? component.validity : {},\n                element: component,\n              },\n            }),\n          );\n        }\n\n        if (component.checkLimitValidity && !component.checkLimitValidity()) {\n          component.status = 'error';\n          component.invalid = true;\n\n          component.dispatchEvent(\n            new CustomEvent('kemet-input-status', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                status: 'error',\n                validity: { passedLimit: true },\n                element: component,\n              },\n            }),\n          );\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n"]}

package/dist/utilities/controllers/forms.spec.d.ts

@@ -0,0 +1,2 @@
+import '../../components/kemet-button/kemet-button';
+import '../../components/kemet-input/kemet-input';

package/dist/utilities/controllers/forms.spec.js

@@ -0,0 +1,36 @@
+/* eslint-disable import/no-duplicates */
+import { html, render } from 'lit';
+import { expect } from '@wdio/globals';
+import { userEvent } from '@testing-library/user-event';
+import { fireEvent, waitFor } from '@testing-library/dom';
+import '../../components/kemet-button/kemet-button';
+import '../../components/kemet-input/kemet-input';
+const templates = {
+    default: html `
+    <form>
+      <kemet-input name="input" value="input"></kemet-input>
+      <kemet-input name="no-special-characters" required pattern="^[a-zA-Z0-9]*$"></kemet-input>
+      <kemet-button>Submit</kemet-button>
+    </form>
+  `,
+};
+describe('Forms', () => {
+    it('simulate submitting a form with errors', async () => {
+        render(templates.default, document.body);
+        const form = document.querySelector('form');
+        const kemetButton = document.querySelector('kemet-button');
+        const noSpecialCharactersKemetInput = document.querySelector('[required]');
+        await waitFor(async () => {
+            var _a;
+            const noSpecialCharactersInput = (_a = noSpecialCharactersKemetInput === null || noSpecialCharactersKemetInput === void 0 ? void 0 : noSpecialCharactersKemetInput.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+            await userEvent.type(noSpecialCharactersInput, 'te$t');
+            await userEvent.click(kemetButton);
+            // TODO figure out why the click doesn't implicitly cover these events
+            fireEvent(form, new Event('formdata'));
+            fireEvent.submit(form);
+            expect(noSpecialCharactersKemetInput.status).toBe('error');
+            form.remove();
+        });
+    });
+});
+//# sourceMappingURL=forms.spec.js.map

package/dist/utilities/controllers/forms.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms.spec.js","sourceRoot":"","sources":["../../../src/utilities/controllers/forms.spec.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAI1D,OAAO,4CAA4C,CAAC;AACpD,OAAO,0CAA0C,CAAC;AAElD,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE,IAAI,CAAA;;;;;;GAMZ;CACF,CAAC;AAEF,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IACrB,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEzC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAC;QAC/D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAgB,CAAC;QAC1E,MAAM,6BAA6B,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAe,CAAC;QAEzF,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;;YACvB,MAAM,wBAAwB,GAAG,MAAA,6BAA6B,aAA7B,6BAA6B,uBAA7B,6BAA6B,CAAE,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,CAAC;YACnG,MAAM,SAAS,CAAC,IAAI,CAAC,wBAAyB,EAAE,MAAM,CAAC,CAAC;YACxD,MAAM,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YAEnC,sEAAsE;YACtE,SAAS,CAAC,IAAI,EAAE,IAAI,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;YACvC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YACvB,MAAM,CAAC,6BAA6B,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC3D,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport { userEvent } from '@testing-library/user-event';\nimport { fireEvent, waitFor } from '@testing-library/dom';\n\nimport KemetButton from '../../components/kemet-button/kemet-button';\nimport KemetInput from '../../components/kemet-input/kemet-input';\nimport '../../components/kemet-button/kemet-button';\nimport '../../components/kemet-input/kemet-input';\n\nconst templates = {\n  default: html`\n    <form>\n      <kemet-input name=\"input\" value=\"input\"></kemet-input>\n      <kemet-input name=\"no-special-characters\" required pattern=\"^[a-zA-Z0-9]*$\"></kemet-input>\n      <kemet-button>Submit</kemet-button>\n    </form>\n  `,\n};\n\ndescribe('Forms', () => {\n  it('simulate submitting a form with errors', async () => {\n    render(templates.default, document.body);\n\n    const form = document.querySelector('form') as HTMLFormElement;\n    const kemetButton = document.querySelector('kemet-button') as KemetButton;\n    const noSpecialCharactersKemetInput = document.querySelector('[required]') as KemetInput;\n\n    await waitFor(async () => {\n      const noSpecialCharactersInput = noSpecialCharactersKemetInput?.shadowRoot?.querySelector('input');\n      await userEvent.type(noSpecialCharactersInput!, 'te$t');\n      await userEvent.click(kemetButton);\n\n      // TODO figure out why the click doesn't implicitly cover these events\n      fireEvent(form, new Event('formdata'));\n      fireEvent.submit(form);\n      expect(noSpecialCharactersKemetInput.status).toBe('error');\n      form.remove();\n    });\n  });\n});\n"]}

package/dist/utilities/misc/drag.d.ts

@@ -0,0 +1,6 @@
+export default function drag(element: any, { to: inTo, delta, steps, duration, }: {
+    to: any;
+    delta: any;
+    steps?: number;
+    duration?: number;
+}): Promise<void>;

package/dist/utilities/misc/drag.js

@@ -0,0 +1,63 @@
+/* eslint-disable no-await-in-loop */
+/* eslint-disable no-plusplus */
+import { fireEvent } from '@testing-library/dom';
+function isElement(obj) {
+    if (typeof obj !== 'object') {
+        return false;
+    }
+    let prototypeStr;
+    let prototype;
+    do {
+        prototype = Object.getPrototypeOf(obj);
+        // to work in iframe
+        prototypeStr = Object.prototype.toString.call(prototype);
+        // '[object Document]' is used to detect document
+        if (prototypeStr === '[object Element]'
+            || prototypeStr === '[object Document]') {
+            return true;
+        }
+        obj = prototype;
+        // null is the terminal of object
+    } while (prototype !== null);
+    return false;
+}
+function getElementClientCenter(element) {
+    const { left, top, width, height, } = element.getBoundingClientRect();
+    return {
+        x: left + width / 2,
+        y: top + height / 2,
+    };
+}
+const getCoords = charlie => (isElement(charlie) ? getElementClientCenter(charlie) : charlie);
+const sleep = ms => new Promise((resolve) => {
+    setTimeout(resolve, ms);
+});
+export default async function drag(element, { to: inTo, delta, steps = 20, duration = 500, }) {
+    const from = getElementClientCenter(element);
+    const to = delta
+        ? {
+            x: from.x + delta.x,
+            y: from.y + delta.y,
+        }
+        : getCoords(inTo);
+    const step = {
+        x: (to.x - from.x) / steps,
+        y: (to.y - from.y) / steps,
+    };
+    const current = {
+        clientX: from.x,
+        clientY: from.y,
+    };
+    fireEvent.mouseEnter(element, current);
+    fireEvent.mouseOver(element, current);
+    fireEvent.mouseMove(element, current);
+    fireEvent.mouseDown(element, current);
+    for (let i = 0; i < steps; i++) {
+        current.clientX += step.x;
+        current.clientY += step.y;
+        await sleep(duration / steps);
+        fireEvent.mouseMove(element, current);
+    }
+    fireEvent.mouseUp(element, current);
+}
+//# sourceMappingURL=drag.js.map

package/dist/utilities/misc/drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag.js","sourceRoot":"","sources":["../../../src/utilities/misc/drag.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,gCAAgC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,SAAS,SAAS,CAAC,GAAG;IACpB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,YAAY,CAAC;IAAC,IAClB,SAAS,CAAC;IAEV,GAAG,CAAC;QACF,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QACvC,oBAAoB;QACpB,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACzD,iDAAiD;QACjD,IACE,YAAY,KAAK,kBAAkB;eAChC,YAAY,KAAK,mBAAmB,EACvC,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QACD,GAAG,GAAG,SAAS,CAAC;QAChB,iCAAiC;IACnC,CAAC,QAAQ,SAAS,KAAK,IAAI,EAAE;IAC7B,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,sBAAsB,CAAC,OAAO;IACrC,MAAM,EACP,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GACxB,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAClC,OAAO;QACL,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,CAAC;QACnB,CAAC,EAAE,GAAG,GAAG,MAAM,GAAG,CAAC;KACpB,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;AAE9F,MAAM,KAAK,GAAG,EAAE,CAAC,EAAE,CAAC,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1C,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAC1B,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,CAAC,KAAK,UAAU,IAAI,CAChC,OAAO,EACP,EACA,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,GAAG,GAAG,GAC5C;IAEC,MAAM,IAAI,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,KAAK;QACd,CAAC,CAAC;YACE,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;YACnB,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;SACpB;QACH,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAEpB,MAAM,IAAI,GAAG;QACX,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK;QAC1B,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK;KAC3B,CAAC;IAEF,MAAM,OAAO,GAAG;QACd,OAAO,EAAE,IAAI,CAAC,CAAC;QACf,OAAO,EAAE,IAAI,CAAC,CAAC;KAChB,CAAC;IAEF,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACvC,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACtC,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACtC,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QAC/B,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC;QAC1B,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC;QAC1B,MAAM,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;QAC9B,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACxC,CAAC;IACD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AACtC,CAAC","sourcesContent":["/* eslint-disable no-await-in-loop */\n/* eslint-disable no-plusplus */\nimport { fireEvent } from '@testing-library/dom';\n\nfunction isElement(obj) {\n  if (typeof obj !== 'object') {\n    return false;\n  }\n\n  let prototypeStr; let\n  prototype;\n\n  do {\n    prototype = Object.getPrototypeOf(obj);\n    // to work in iframe\n    prototypeStr = Object.prototype.toString.call(prototype);\n    // '[object Document]' is used to detect document\n    if (\n      prototypeStr === '[object Element]'\n      || prototypeStr === '[object Document]'\n    ) {\n      return true;\n    }\n    obj = prototype;\n    // null is the terminal of object\n  } while (prototype !== null);\n  return false;\n}\n\nfunction getElementClientCenter(element) {\n  const {\n left, top, width, height,\n} = element.getBoundingClientRect();\n  return {\n    x: left + width / 2,\n    y: top + height / 2,\n  };\n}\n\nconst getCoords = charlie => (isElement(charlie) ? getElementClientCenter(charlie) : charlie);\n\nconst sleep = ms => new Promise((resolve) => {\n  setTimeout(resolve, ms);\n});\n\nexport default async function drag(\n  element,\n  {\n  to: inTo, delta, steps = 20, duration = 500,\n},\n) {\n  const from = getElementClientCenter(element);\n  const to = delta\n    ? {\n        x: from.x + delta.x,\n        y: from.y + delta.y,\n      }\n    : getCoords(inTo);\n\n  const step = {\n    x: (to.x - from.x) / steps,\n    y: (to.y - from.y) / steps,\n  };\n\n  const current = {\n    clientX: from.x,\n    clientY: from.y,\n  };\n\n  fireEvent.mouseEnter(element, current);\n  fireEvent.mouseOver(element, current);\n  fireEvent.mouseMove(element, current);\n  fireEvent.mouseDown(element, current);\n  for (let i = 0; i < steps; i++) {\n    current.clientX += step.x;\n    current.clientY += step.y;\n    await sleep(duration / steps);\n    fireEvent.mouseMove(element, current);\n  }\n  fireEvent.mouseUp(element, current);\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kemet-ui",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "A flexible blueprint system for UIs.",
   "main": "index.js",
   "watch": {
@@ -23,11 +23,15 @@
     "start": "concurrently npm:storybook npm:watch",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
-    "test": "web-test-runner --coverage --config=config/web-test-runner.mjs",
-    "test:watch": "web-test-runner --config=config/web-test-runner.mjs --watch",
-    "watch": "npm-watch"
+    "test": "wdio run wdio.conf.js",
+    "test:watch": "wdio run wdio.conf.js --watch",
+    "watch": "npm-watch",
+    "chromatic": "npx chromatic --project-token=chpt_6729a2f8709640a --build-script-name=storybook:build"
+  },
+  "author": {
+    "name": "Hasani Rogers",
+    "email": "dev@hasanirogers.me"
   },
-  "author": "Hasani Rogers <dev@hasanirogers.me>",
   "license": "MIT",
   "keywords": [
     "web components",
@@ -45,66 +49,77 @@
   "dependencies": {
     "@popperjs/core": "^2.11.7",
     "autoprefixer": "^10.4.14",
-    "lit": "^2.6.1",
-    "lit-html": "^2.6.1",
+    "lit": "^3.1.2",
     "mobile-drag-drop": "2.2.0",
-    "ts-dedent": "^2.2.0"
+    "ts-dedent": "^2.2.0",
+    "tslib": "^2.7.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.21.0",
-    "@babel/plugin-transform-typescript": "^7.21.0",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@custom-elements-manifest/analyzer": "^0.8.0",
-    "@open-wc/eslint-config": "^9.2.2",
-    "@open-wc/testing": "^3.1.7",
+    "@chromatic-com/storybook": "^1.9.0",
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@open-wc/eslint-config": "^12.0.3",
     "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-multi-entry": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.0",
-    "@storybook/addon-a11y": "^7.4.0",
-    "@storybook/addon-actions": "^7.4.0",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/addon-mdx-gfm": "^7.4.0",
-    "@storybook/addons": "^7.4.0",
+    "@storybook/addon-a11y": "^8.3.1",
+    "@storybook/addon-docs": "^8.3.1",
+    "@storybook/addon-essentials": "^8.3.1",
+    "@storybook/addon-interactions": "^8.3.1",
+    "@storybook/addon-links": "^8.3.1",
+    "@storybook/addon-mdx-gfm": "^8.3.1",
+    "@storybook/blocks": "^8.3.1",
+    "@storybook/manager-api": "^8.3.1",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/theming": "^7.4.0",
-    "@storybook/web-components": "^7.4.0",
-    "@storybook/web-components-vite": "^7.4.0",
+    "@storybook/test": "^8.3.1",
+    "@storybook/theming": "^8.3.1",
+    "@storybook/web-components": "^8.3.1",
+    "@storybook/web-components-vite": "^8.3.1",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/user-event": "^14.5.2",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@wdio/browser-runner": "^8.32.3",
+    "@wdio/cli": "^8.32.3",
+    "@wdio/mocha-framework": "^8.31.1",
+    "@wdio/spec-reporter": "^8.31.1",
     "@web/dev-server-esbuild": "^0.3.3",
     "@web/test-runner": "^0.15.1",
-    "@whitespace/storybook-addon-html": "^5.1.4",
+    "@whitespace/storybook-addon-html": "^6.1.1",
     "ajv": "^8.12.0",
-    "babel-loader": "^9.1.2",
+    "chromatic": "^11.5.4",
     "concurrently": "^7.6.0",
-    "css-loader": "^6.7.3",
     "dotenv": "^16.0.3",
+    "electron": "^28.2.2",
     "eslint": "^8.35.0",
+    "expect": "^29.7.0",
     "husky": "^8.0.3",
+    "jest": "^29.7.0",
     "npm-watch": "^0.11.0",
     "postcss": "^8.4.21",
     "postcss-cli": "^10.1.0",
-    "prettier": "^2.8.4",
+    "prettier": "^3.3.3",
+    "puppeteer": "^22.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "rimraf": "^4.3.0",
     "rollup": "^3.20.2",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-minify-template-literals": "^1.0.3",
     "sass": "^1.58.3",
-    "sass-loader": "^13.2.0",
     "ssh2-sftp-client": "^8.1.0",
-    "storybook": "^7.4.0",
-    "style-loader": "^3.3.1",
+    "storybook": "^8.3.1",
     "stylelint": "^15.4.0",
     "stylelint-config-sass-guidelines": "^9.0.1",
     "stylelint-config-standard": "^30.0.1",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3",
     "vite": "^4.4.9"
   },
   "repository": {
@@ -114,6 +129,6 @@
   "bugs": {
     "url": "https://github.com/hasanirogers/kemet-ui/issues"
   },
-  "homepage": "http://kemet.dev",
+  "homepage": "https://kemet.dev",
   "customElements": "custom-elements.json"
 }

package/dist/components/kemet-accordion/stories.d.ts

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import './kemet-accordion';
-import './kemet-accordion-panel';
-import '../kemet-tabs/kemet-tabs';
-import '../kemet-tabs/kemet-tab';
-import '../kemet-tabs/kemet-tab-panel';
-import '../kemet-icon/kemet-icon';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;
-export declare const TogglePanels: Story;

package/dist/components/kemet-accordion/stories.js

@@ -1,47 +0,0 @@
-import { html } from 'lit';
-import './kemet-accordion';
-import './kemet-accordion-panel';
-import '../kemet-tabs/kemet-tabs';
-import '../kemet-tabs/kemet-tab';
-import '../kemet-tabs/kemet-tab-panel';
-import '../kemet-icon/kemet-icon';
-const meta = {
-    title: 'Components / Accordion',
-    component: 'kemet-accordion',
-};
-export default meta;
-const Template = (args) => html `
-  <kemet-accordion ?toggle-panels=${args.togglePanels} kemet-elevation="layer-4">
-    <kemet-accordion-panel>
-      <h3 slot="trigger">Trigger 1</h3>
-      <kemet-icon slot="icon" icon="chevron-down" size="18"></kemet-icon>
-      <div slot="body">
-        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
-      </div>
-    </kemet-accordion-panel>
-    <kemet-accordion-panel>
-      <h3 slot="trigger">Trigger 2</h3>
-      <kemet-icon slot="icon" icon="chevron-down" size="18"></kemet-icon>
-      <div slot="body">
-        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
-      </div>
-    </kemet-accordion-panel>
-    <kemet-accordion-panel>
-      <h3 slot="trigger">Trigger 3</h3>
-      <kemet-icon slot="icon" icon="chevron-down" size="18"></kemet-icon>
-      <div slot="body">
-        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
-      </div>
-    </kemet-accordion-panel>
-  </kemet-accordion>
-`;
-export const Standard = {
-    render: args => Template(args),
-};
-export const TogglePanels = {
-    render: args => Template(args),
-    args: {
-        togglePanels: true,
-    },
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-accordion/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,yBAAyB,CAAC;AAEjC,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AAEvC,OAAO,0BAA0B,CAAC;AAElC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,iBAAiB;CAC7B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;oCACK,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAuBpD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,IAAI;KACnB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport './kemet-accordion';\nimport './kemet-accordion-panel';\n\nimport '../kemet-tabs/kemet-tabs';\nimport '../kemet-tabs/kemet-tab';\nimport '../kemet-tabs/kemet-tab-panel';\n\nimport '../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Accordion',\n  component: 'kemet-accordion',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-accordion ?toggle-panels=${args.togglePanels} kemet-elevation=\"layer-4\">\n    <kemet-accordion-panel>\n      <h3 slot=\"trigger\">Trigger 1</h3>\n      <kemet-icon slot=\"icon\" icon=\"chevron-down\" size=\"18\"></kemet-icon>\n      <div slot=\"body\">\n        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n      </div>\n    </kemet-accordion-panel>\n    <kemet-accordion-panel>\n      <h3 slot=\"trigger\">Trigger 2</h3>\n      <kemet-icon slot=\"icon\" icon=\"chevron-down\" size=\"18\"></kemet-icon>\n      <div slot=\"body\">\n        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n      </div>\n    </kemet-accordion-panel>\n    <kemet-accordion-panel>\n      <h3 slot=\"trigger\">Trigger 3</h3>\n      <kemet-icon slot=\"icon\" icon=\"chevron-down\" size=\"18\"></kemet-icon>\n      <div slot=\"body\">\n        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n      </div>\n    </kemet-accordion-panel>\n  </kemet-accordion>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const TogglePanels: Story = {\n  render: args => Template(args),\n  args: {\n    togglePanels: true,\n  },\n};\n"]}