kemet-ui 1.3.1 → 2.0.0

package/dist/utilities/controllers/forms.js

@@ -1,123 +1,102 @@
 export class FormSubmitController {
-  host;
-  form;
-  options;
-
-  constructor(host, options) {
-    (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),
-      ...options,
-    };
-
-    this.handleFormData = this.handleFormData.bind(this);
-    this.handleFormSubmit = this.handleFormSubmit.bind(this);
-  }
-
-  hostConnected() {
-    this.form = this.options.form(this.host);
-
-    if (this.form) {
-      this.form.addEventListener('formdata', this.handleFormData);
-      this.form.addEventListener('submit', this.handleFormSubmit);
+    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),
+            ...options,
+        };
+        this.handleFormData = this.handleFormData.bind(this);
+        this.handleFormSubmit = this.handleFormSubmit.bind(this);
     }
-  }
-
-  hostDisconnected() {
-    if (this.form) {
-      this.form.removeEventListener('formdata', this.handleFormData);
-      this.form.removeEventListener('submit', this.handleFormSubmit);
-      this.form = undefined;
+    hostConnected() {
+        this.form = this.options.form(this.host);
+        if (this.form) {
+            this.form.addEventListener('formdata', this.handleFormData);
+            this.form.addEventListener('submit', this.handleFormSubmit);
+        }
     }
-  }
-
-  handleFormData(event) {
-    const disabled = this.options.disabled(this.host);
-    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) => {
-          event.formData?.append(name, val.toString());
-        });
-      } else {
-        event.formData?.append(name, value.toString());
-      }
+    hostDisconnected() {
+        if (this.form) {
+            this.form.removeEventListener('formdata', this.handleFormData);
+            this.form.removeEventListener('submit', this.handleFormSubmit);
+            this.form = undefined;
+        }
     }
-  }
-
-  handleFormSubmit(event) {
-    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();
-
-      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');
-
-      components.forEach((component) => {
-        component.checkValidity();
-
-        if (!component.checkValidity()) {
-          component.status = 'error';
-          component.invalid = true;
-
-          component.dispatchEvent(
-            new CustomEvent('kemet-input-status', {
-              bubbles: true,
-              composed: true,
-              detail: {
-                status: 'error',
-                validity: component.validity ? component.validity : {},
-                element: component,
-              },
-            })
-          );
+    handleFormData(event) {
+        var _a;
+        const disabled = this.options.disabled(this.host);
+        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());
+            }
         }
-
-        if (component.checkLimitValidity && !component.checkLimitValidity()) {
-          component.status = 'error';
-          component.invalid = true;
-
-          component.dispatchEvent(
-            new CustomEvent('kemet-input-status', {
-              bubbles: true,
-              composed: true,
-              detail: {
-                status: 'error',
-                validity: { passedLimit: true },
-                element: component,
-              },
-            })
-          );
+    }
+    handleFormSubmit(event) {
+        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();
+            const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');
+            components.forEach((component) => {
+                component.checkValidity();
+                if (!component.checkValidity()) {
+                    component.status = 'error';
+                    component.invalid = true;
+                    component.dispatchEvent(new CustomEvent('kemet-input-status', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            status: 'error',
+                            validity: component.validity ? component.validity : {},
+                            element: component,
+                        },
+                    }));
+                }
+                if (component.checkLimitValidity && !component.checkLimitValidity()) {
+                    component.status = 'error';
+                    component.invalid = true;
+                    component.dispatchEvent(new CustomEvent('kemet-input-status', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            status: 'error',
+                            validity: { passedLimit: true },
+                            element: component,
+                        },
+                    }));
+                }
+            });
         }
-      });
     }
-  }
-
-  submit() {
-    const button = document.createElement('button');
-
-    if (this.form) {
-      button.type = 'submit';
-      button.style.position = 'absolute';
-      button.style.width = '0';
-      button.style.height = '0';
-      button.style.clip = 'rect(0 0 0 0)';
-      button.style.clipPath = 'inset(50%)';
-      button.style.overflow = 'hidden';
-      button.style.whiteSpace = 'nowrap';
-      this.form.append(button);
-      button.click();
-      button.remove();
+    submit() {
+        const button = document.createElement('button');
+        if (this.form) {
+            button.type = 'submit';
+            button.style.position = 'absolute';
+            button.style.width = '0';
+            button.style.height = '0';
+            button.style.clip = 'rect(0 0 0 0)';
+            button.style.clipPath = 'inset(50%)';
+            button.style.overflow = 'hidden';
+            button.style.whiteSpace = 'nowrap';
+            this.form.append(button);
+            button.click();
+            button.remove();
+        }
     }
-  }
 }
+//# sourceMappingURL=forms.js.map

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

@@ -0,0 +1 @@
+{"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  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"]}

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

@@ -0,0 +1,5 @@
+export declare const keyCodes: {
+    ENTER: number;
+    SPACE: number;
+    ESC: number;
+};

package/dist/utilities/misc/constants.js

@@ -0,0 +1,6 @@
+export const keyCodes = {
+    ENTER: 13,
+    SPACE: 32,
+    ESC: 27,
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/utilities/misc/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;IACT,GAAG,EAAE,EAAE;CACR,CAAC","sourcesContent":["export const keyCodes = {\n  ENTER: 13,\n  SPACE: 32,\n  ESC: 27,\n};\n"]}

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

@@ -0,0 +1 @@
+export declare const marginSpacing: (StoryFn: any) => import("lit-html").TemplateResult<1>;

package/dist/utilities/misc/decorators.js

@@ -0,0 +1,5 @@
+import { html } from 'lit';
+export const marginSpacing = (StoryFn) => {
+    return html `<div kemet-margin="tiny:normal">${StoryFn()}</div>`;
+};
+//# sourceMappingURL=decorators.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.js","sourceRoot":"","sources":["../../../src/utilities/misc/decorators.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,EAAE;IACvC,OAAO,IAAI,CAAA,mCAAmC,OAAO,EAAE,QAAQ,CAAC;AAClE,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\n\nexport const marginSpacing = (StoryFn) => {\n  return html`<div kemet-margin=\"tiny:normal\">${StoryFn()}</div>`;\n};\n"]}

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

@@ -0,0 +1 @@
+export declare const emitEvent: (element: any, name: any, detail: any, bubbles?: boolean, composed?: boolean) => void;

package/dist/utilities/misc/events.js

@@ -0,0 +1,4 @@
+export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+    element.dispatchEvent(new CustomEvent(name, { bubbles, composed, detail }));
+};
+//# sourceMappingURL=events.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/utilities/misc/events.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,GAAG,IAAI,EAAE,EAAE;IAClF,OAAO,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CACrD,CAAC;AACJ,CAAC,CAAC","sourcesContent":["export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"]}

package/package.json

@@ -1,30 +1,30 @@
 {
   "name": "kemet-ui",
-  "version": "1.3.1",
-  "description": "A flexible and designless blueprint system for UIs.",
+  "version": "2.0.0",
+  "description": "A flexible blueprint system for UIs.",
   "main": "index.js",
   "watch": {
     "build": "src/**/*.*",
-    "analyze": "src/components/**/*.js"
+    "analyze": "src/components/**/kemet-*.*"
   },
   "scripts": {
-    "analyze": "custom-elements-manifest analyze --litelement --globs \"src/components/kemet-*/kemet-*.js\"",
-    "build": "npm run css:build && npm run js:build",
-    "css:build": "sass src/styles/kemet.components.scss:dist/styles/kemet.components.css src/styles/kemet.core.scss:dist/styles/kemet.core.css && postcss dist/styles/**/*.css -u autoprefixer --dir dist/styles",
-    "deploy": "build-storybook && node deploy.js",
+    "analyze": "custom-elements-manifest analyze --litelement --globs \"src/components/**/kemet-*.*\"",
+    "build": "npm run build:css && npm run build:ts && npm run build:rollup",
+    "build:css": "sass src/styles/kemet.components.scss:dist/styles/kemet.components.css src/styles/kemet.core.scss:dist/styles/kemet.core.css src/styles/kemet.base.scss:dist/styles/kemet.base.css && postcss dist/styles/**/*.css -u autoprefixer --dir dist/styles",
+    "build:rollup": "rollup -c config/rollup.mjs",
+    "build:ts": "tsc",
+    "deploy": "storybook build && node deploy.js",
     "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
     "format:stylelint": "npx stylelint --fix 'src/styles/**/*.scss'",
     "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
     "lint:stylelint": "npx stylelint 'src/styles/**/*.scss'",
     "prepare": "husky install",
     "prepublish": "rimraf dist && npm run build",
-    "js:build": "rollup -c config/rollup.js",
-    "serve": "web-dev-server",
-    "start": "concurrently npm:storybook npm:serve npm:watch",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
-    "test": "web-test-runner --coverage",
-    "test:watch": "web-test-runner --watch",
+    "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"
   },
   "author": "Hasani Rogers <dev@hasanirogers.me>",
@@ -32,84 +32,79 @@
   "keywords": [
     "web components",
     "custom elements",
-    "blueprint system",
-    "designless"
+    "blueprint system"
   ],
   "files": [
     "dist",
     "custom-elements.json"
   ],
-  "babel": {
-    "presets": [
-      "@babel/preset-react"
-    ]
-  },
-  "eslintConfig": {
-    "extends": [
-      "@open-wc/eslint-config"
-    ],
-    "rules": {
-      "no-param-reassign": "off",
-      "no-use-before-define": "off",
-      "no-multi-assign": "off",
-      "import/no-extraneous-dependencies": "off"
-    },
-    "ignorePatterns": [
-      "dist/**/*.js",
-      "src/utilities/controllers/**/*.js"
-    ]
-  },
   "browserslist": [
     "last 2 versions",
-    "IE 11",
     "iOS >= 8"
   ],
   "dependencies": {
-    "lit": "^2.2.3",
-    "lit-html": "^2.0.2",
+    "@popperjs/core": "^2.11.7",
+    "autoprefixer": "^10.4.14",
+    "lit": "^2.6.1",
+    "lit-html": "^2.6.1",
     "mobile-drag-drop": "2.2.0",
-    "ts-dedent": "^2.1.1"
+    "ts-dedent": "^2.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/preset-react": "^7.14.5",
-    "@custom-elements-manifest/analyzer": "^0.6.3",
-    "@open-wc/eslint-config": "^7.0.0",
-    "@open-wc/testing": "^3.1.6",
-    "@rollup/plugin-commonjs": "^22.0.1",
-    "@rollup/plugin-multi-entry": "^4.0.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@storybook/addon-a11y": "^6.5.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/addons": "^6.5.9",
+    "@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",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-multi-entry": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@storybook/addon-a11y": "^7.0.2",
+    "@storybook/addon-actions": "^7.0.2",
+    "@storybook/addon-essentials": "^7.0.2",
+    "@storybook/addon-links": "^7.0.2",
+    "@storybook/addon-mdx-gfm": "^7.0.2",
+    "@storybook/addons": "^7.0.2",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/theming": "^6.5.9",
-    "@storybook/web-components": "^6.5.9",
-    "@web/dev-server": "^0.1.32",
-    "@web/dev-server-rollup": "^0.3.18",
-    "@web/test-runner": "^0.13.31",
-    "babel-loader": "^8.2.2",
-    "concurrently": "^7.2.1",
-    "css-loader": "5.2.6",
-    "dotenv": "^16.0.1",
-    "husky": "^6.0.0",
+    "@storybook/theming": "^7.0.2",
+    "@storybook/web-components": "^7.0.2",
+    "@storybook/web-components-webpack5": "^7.0.2",
+    "@web/dev-server-esbuild": "^0.3.3",
+    "@web/test-runner": "^0.15.1",
+    "@whitespace/storybook-addon-html": "^5.1.4",
+    "ajv": "^8.12.0",
+    "babel-loader": "^9.1.2",
+    "concurrently": "^7.6.0",
+    "css-loader": "^6.7.3",
+    "dotenv": "^16.0.3",
+    "eslint": "^8.35.0",
+    "husky": "^8.0.3",
     "npm-watch": "^0.11.0",
-    "postcss": "^8.3.0",
-    "postcss-cli": "^8.3.1",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.77.1",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^10.1.0",
+    "prettier": "^2.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^3.0.1",
+    "rimraf": "^4.3.0",
+    "rollup": "^3.20.2",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-minify-html-literals": "^1.2.6",
-    "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.32.13",
-    "sass-loader": "10.1.1",
+    "rollup-plugin-minify-template-literals": "^1.0.3",
+    "sass": "^1.58.3",
+    "sass-loader": "^13.2.0",
     "ssh2-sftp-client": "^8.1.0",
-    "style-loader": "2.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-sass-guidelines": "^8.0.0",
-    "stylelint-config-standard": "^22.0.0"
+    "storybook": "^7.0.2",
+    "style-loader": "^3.3.1",
+    "stylelint": "^15.4.0",
+    "stylelint-config-sass-guidelines": "^9.0.1",
+    "stylelint-config-standard": "^30.0.1"
   },
   "repository": {
     "type": "git",

package/dist/components/kemet-popover/kemet-popover-close.js

@@ -1,51 +0,0 @@
-import { html, css, LitElement } from 'lit';
-
-const keyCodes = {
-  ENTER: 13,
-  SPACE: 32,
-  ESC: 27,
-};
-
-export default class KemetPopoverClose extends LitElement {
-  static get styles() {
-    return [
-      css`
-        button {
-          font: inherit;
-          color: inherit;
-          cursor: pointer;
-          border: 0;
-          background: transparent;
-        }
-      `,
-    ];
-  }
-
-  render() {
-    return html`
-      <button @click=${() => this.close()} @keyup=${event => this.handleKeyboard(event)}>
-        <slot></slot>
-      </button>
-    `;
-  }
-
-  close() {
-    this.dispatchEvent(
-      new CustomEvent('kemet-popover-close-btn', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }),
-    );
-  }
-
-  handleKeyboard(event) {
-    event.preventDefault();
-
-    if (event.keyCode === keyCodes.SPACE || event.keyCode === keyCodes.ENTER) {
-      this.close();
-    }
-  }
-}
-
-window.customElements.define('kemet-popover-close', KemetPopoverClose);