kemet-ui 0.2.0 → 1.0.0

package/dist/styles/scss/core/base.scss

@@ -0,0 +1,38 @@
+@use './config' as *;
+
+:root {
+  --kemet-border-radius: 6px;
+
+  --kemet-color-white: #fff;
+  --kemet-color-white-rich: #{map-get($colors, 'white-rich')};
+  --kemet-color-gray1: #{map-get($colors, 'gray1')};
+  --kemet-color-gray2: #{map-get($colors, 'gray2')};
+  --kemet-color-gray3: #{map-get($colors, 'gray3')};
+  --kemet-color-gray4: #{map-get($colors, 'gray4')};
+  --kemet-color-gray5: #{map-get($colors, 'gray5')};
+  --kemet-color-gray6: #{map-get($colors, 'gray6')};
+  --kemet-color-gray7: #{map-get($colors, 'gray7')};
+  --kemet-color-gray8: #{map-get($colors, 'gray8')};
+  --kemet-color-gray9: #{map-get($colors, 'gray9')};
+  --kemet-color-gray10: #{map-get($colors, 'gray10')};
+  --kemet-color-black: #000;
+
+  --kemet-color-primary: #{map-get($colors, 'primary')};
+  --kemet-color-link: #{map-get($colors, 'link')};
+
+  --kemet-color-error: #{map-get($colors, 'error')};
+  --kemet-color-success: #{map-get($colors, 'success')};
+  --kemet-color-neutral: #{map-get($colors, 'neutral')};
+  --kemet-color-warning: #{map-get($colors, 'warning')};
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+a {
+  color: var(--kemet-color-link);
+  text-decoration: none;
+}

package/dist/styles/scss/core/layout.scss

@@ -6,7 +6,7 @@
   display: block;
   box-sizing: border-box;
   word-wrap: break-word;
-  text-align: left;
+  // text-align: left;
 }
 
 // row layout
@@ -14,7 +14,6 @@
 
 [kemet-layout='flexrow'] {
   display: flex;
-  padding: 0;
 }
 
 [kemet-layout='flexrow'] > * {
@@ -101,7 +100,6 @@
 [kemet-layout='flexgrid'] {
   display: flex;
   flex-wrap: wrap;
-  padding: 0;
 }
 
 [kemet-layout='flexgrid'] > * {
@@ -117,7 +115,6 @@
 [kemet-layout='flexcolumn'] {
   display: flex;
   flex-direction: column;
-  min-height: 100%;
 }
 
 [kemet-layout='flexcolumn'] > * {
@@ -126,7 +123,7 @@
   flex-direction: column;
 }
 
-[kemet-layout='flexcolumn'] > [fit-content] {
+[kemet-layout='flexcolumn'] > [kemet-fit-content] {
   flex: 0 0 auto;
 }
 
@@ -166,3 +163,7 @@
 [kemet-layout='flexlist'] > * {
   flex: 0 0 auto;
 }
+
+[kemet-layout='flexlist'][kemet-gutters] > * {
+  padding: unset;
+}

package/dist/styles/scss/kemet.components.scss

@@ -1,7 +1,5 @@
 @use 'components/accordion';
 @use 'components/carousel';
 @use 'components/drawer';
-@use 'components/flipcard';
 @use 'components/modal';
 @use 'components/scrollsnap';
-@use 'components/tabs';

package/dist/styles/scss/kemet.core.scss

@@ -1,4 +1,3 @@
-// @use "core/config";
-// @use "core/helpers";
+@use 'core/base';
 @use 'core/attributes';
 @use 'core/layout';

package/package.json

@@ -1,30 +1,32 @@
 {
   "name": "kemet-ui",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "A flexible and designless blueprint system for UIs.",
   "main": "index.js",
   "watch": {
-    "build": "src/**/*.*"
+    "build": "src/**/*.*",
+    "analyze": "src/components/**/*.js"
   },
   "scripts": {
-    "deploy": "build-storybook && node deploy.js",
-    "start": "web-dev-server",
-    "test": "web-test-runner --coverage",
-    "test:watch": "web-test-runner --watch",
-    "watch": "npm-watch",
+    "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",
-    "js:build": "rollup -c config/rollup.js",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
-    "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
+    "deploy": "build-storybook && node deploy.js",
     "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
-    "lint:stylelint": "npx stylelint 'src/styles/**/*.scss'",
     "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"
+    "prepublish": "rimraf dist && npm run build",
+    "js:build": "rollup -c config/rollup.js",
+    "start": "web-dev-server",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "build-storybook",
+    "test": "web-test-runner --coverage",
+    "test:watch": "web-test-runner --watch",
+    "watch": "npm-watch"
   },
-  "author": "Hasani Rogers <hasani.rogers@gmail.com>",
+  "author": "Hasani Rogers <dev@hasanirogers.me>",
   "license": "MIT",
   "keywords": [
     "web components",
@@ -52,7 +54,8 @@
       "import/no-extraneous-dependencies": "off"
     },
     "ignorePatterns": [
-      "dist/**/*.js"
+      "dist/**/*.js",
+      "src/utilities/controllers/**/*.js"
     ]
   },
   "browserslist": [
@@ -61,26 +64,30 @@
     "iOS >= 8"
   ],
   "dependencies": {
-    "lit": "^2.0.0-rc.2",
+    "lit": "^2.2.3",
+    "lit-html": "^2.0.2",
     "ts-dedent": "^2.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/preset-react": "^7.14.5",
-    "@open-wc/eslint-config": "^4.3.0",
+    "@custom-elements-manifest/analyzer": "^0.5.7",
+    "@open-wc/eslint-config": "^7.0.0",
     "@open-wc/testing": "^2.5.33",
     "@rollup/plugin-multi-entry": "^4.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@storybook/addon-a11y": "^6.2.9",
-    "@storybook/addon-actions": "^6.3.6",
-    "@storybook/addon-essentials": "^6.3.6",
-    "@storybook/addon-links": "^6.3.6",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/theming": "^6.2.9",
-    "@storybook/web-components": "^6.3.6",
+    "@storybook/addon-a11y": "^6.5.6",
+    "@storybook/addon-actions": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/addon-links": "^6.5.6",
+    "@storybook/addons": "^6.5.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/theming": "^6.5.6",
+    "@storybook/web-components": "^6.5.6",
     "@web/dev-server": "^0.1.17",
     "@web/test-runner": "^0.13.4",
     "babel-loader": "^8.2.2",
+    "css-loader": "5.2.6",
     "dotenv": "^10.0.0",
     "husky": "^6.0.0",
     "npm-watch": "^0.9.0",
@@ -91,7 +98,9 @@
     "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.32.13",
+    "sass-loader": "10.1.1",
     "ssh2-sftp-client": "^6.0.1",
+    "style-loader": "2.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-sass-guidelines": "^8.0.0",
     "stylelint-config-standard": "^22.0.0"
@@ -104,36 +113,5 @@
     "url": "https://github.com/hasanirogers/kemet-ui/issues"
   },
   "homepage": "http://kemet.dev",
-  "components": [
-    "src/components/kemet-accordion/kemet-accordion.js",
-    "src/components/kemet-carousel/kemet-carousel.js",
-    "src/components/kemet-carousel/kemet-carousel-link.js",
-    "src/components/kemet-carousel/kemet-carousel-next.js",
-    "src/components/kemet-carousel/kemet-carousel-prev.js",
-    "src/components/kemet-carousel/kemet-carousel-slide.js",
-    "src/components/kemet-carousel/kemet-carousel.js",
-    "src/components/kemet-draggable/kemet-draggable.js",
-    "src/components/kemet-drawer/kemet-drawer.js",
-    "src/components/kemet-flipcard/kemet-flipcard.js",
-    "src/components/kemet-flipcard/kemet-flipcard-trigger.js",
-    "src/components/kemet-icon/kemet-icon.js",
-    "src/components/kemet-carousel/kemet-carousel.js",
-    "src/components/kemet-modal/kemet-modal.js",
-    "src/components/kemet-modal/kemet-modal-close.js",
-    "src/components/kemet-carousel/kemet-carousel.js",
-    "src/components/kemet-popover/kemet-popover.js",
-    "src/components/kemet-popover/kemet-popover-close.js",
-    "src/components/kemet-ratio/kemet-ratio.js",
-    "src/components/kemet-rotator/kemet-rotator.js",
-    "src/components/kemet-scroll-link/kemet-scroll-link.js",
-    "src/components/kemet-scroll-nav/kemet-scroll-nav.js",
-    "src/components/kemet-scroll-snap/kemet-scroll-snap.js",
-    "src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js",
-    "src/components/kemet-scroll-snap/kemet-scroll-snap-slide.js",
-    "src/components/kemet-svgs/kemet-svgs.js",
-    "src/components/kemet-svgs/kemet-svg.js",
-    "src/components/kemet-tabs/kemet-tabs.js",
-    "src/components/kemet-tabs/kemet-tab-panel.js",
-    "src/components/kemet-tabs/kemet-tab.js"
-  ]
+  "customElements": "custom-elements.json"
 }

package/dist/components/kemet-carousel-link.js

@@ -1,54 +0,0 @@
-import { html, css, LitElement } from 'lit';
-
-export class KemetCarouselLink extends LitElement {
-  static get properties() {
-    return {
-      slide: {
-        type: Number,
-        reflect: true,
-      },
-      selected: {
-        type: Boolean,
-        reflect: true,
-      },
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
-    };
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host(:not([selected])) {
-          cursor: pointer;
-        }
-
-        :host([disabled]) {
-          cursor: not-allowed;
-        }
-      `,
-    ];
-  }
-
-  render() {
-    return html`
-      <span tabindex="0" @keyup=${() => this.changed()} @click=${() => this.changed()}>
-        <slot></slot>
-      </span>
-    `;
-  }
-
-  changed() {
-    if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-link', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
-    }
-  }
-}
-
-window.customElements.define('kemet-carousel-link', KemetCarouselLink);

package/dist/components/kemet-carousel-next.js

@@ -1,46 +0,0 @@
-import { html, css, LitElement } from 'lit';
-
-export class KemetCarouselNext extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          cursor: pointer;
-        }
-
-        :host([disabled]) {
-          cursor: not-allowed;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
-    };
-  }
-
-  render() {
-    return html`
-      <span tabindex="0" @keyup=${() => this.next()} @click=${() => this.next()}>
-        <slot></slot>
-      </span>
-    `;
-  }
-
-  next() {
-    if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-next', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
-    }
-  }
-}
-
-window.customElements.define('kemet-carousel-next', KemetCarouselNext);

package/dist/components/kemet-carousel-prev.js

@@ -1,46 +0,0 @@
-import { html, css, LitElement } from 'lit';
-
-export class KemetCarouselPrev extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          cursor: pointer;
-        }
-
-        :host([disabled]) {
-          cursor: not-allowed;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
-    };
-  }
-
-  render() {
-    return html`
-      <span tabindex="0" @keyup=${() => this.prev()} @click=${() => this.prev()}>
-        <slot></slot>
-      </span>
-    `;
-  }
-
-  prev() {
-    if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-prev', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
-    }
-  }
-}
-
-window.customElements.define('kemet-carousel-prev', KemetCarouselPrev);

package/dist/components/kemet-carousel-slide.js

@@ -1,83 +0,0 @@
-import { html, css, LitElement } from 'lit';
-
-export class KemetCarouselSlide extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host,
-        :host *,
-        :host *::before,
-        *::after {
-          box-sizing: border-box;
-        }
-
-        :host {
-          position: absolute;
-          contain: content;
-          box-sizing: border-box;
-          display: block;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          transition: transform ease var(--kemet-carousel-slide-speed, 0.3s), opacity ease var(--kemet-carousel-slide-fade-speed, 1s);
-        }
-
-        :host([aria-hidden="false"]) {
-          z-index: 1;
-          transform: translate(0, 0);
-        }
-
-        /* horizontal */
-        :host([aria-hidden="true"][transition="horizontal"]) {
-          transform: translate(100%, 0);
-        }
-
-        /* vertical */
-        :host([aria-hidden="true"][transition="vertical"]) {
-          transform: translate(0, -100%);
-        }
-
-        /* fade */
-        :host([transition="fade"]) {
-          opacity: 0;
-        }
-
-        :host([aria-hidden="false"][transition="fade"]) {
-          opacity: 1;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      seen: {
-        type: Boolean,
-      },
-      transition: {
-        type: String,
-        reflect: true,
-      },
-      'aria-hidden': {
-        type: String,
-        reflect: true,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this.seen = false;
-    this.transition = 'horizontal';
-    this['aria-hidden'] = 'true';
-  }
-
-  render() {
-    return html`
-      <slot></slot>
-    `;
-  }
-}
-
-window.customElements.define('kemet-carousel-slide', KemetCarouselSlide);