@vaadin/vaadin-material-styles - npm Package Compare versions

Comparing version 22.0.0-alpha1 to 22.0.0-alpha10

mixins/menu-overlay.js

@@ -6,10 +6,11 @@ /**
  */
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
 import '../color.js';
 import './overlay.js';
 
-const menuOverlay = css``;
+const menuOverlay = overlay;
 
-registerStyles('', menuOverlay, { moduleId: 'material-menu-overlay', include: ['material-overlay'] });
+registerStyles('', menuOverlay, { moduleId: 'material-menu-overlay' });
 
 export { menuOverlay };

mixins/required-field.js

@@ -26,3 +26,3 @@ /**
 
-  :host([required]) [part='label']::after {
+  :host([required]) [part='required-indicator']::after {
     content: ' *';
@@ -42,4 +42,3 @@ color: inherit;
 
-  /* Margin that doesn’t reserve space when there’s no error message */
-  [part='error-message']:not(:empty)::before {
+  :host([has-error-message]) [part='error-message']::before {
     content: '';
@@ -46,0 +45,0 @@ display: block;

package.json

 {
   "name": "@vaadin/vaadin-material-styles",
-  "version": "22.0.0-alpha1",
+  "version": "22.0.0-alpha10",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "Vaadin Material is a complete theme for Vaadin components, inspired by Google’s Material Design guidelines.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-material-styles"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/themes",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-material-styles/issues"
+  },
   "main": "all-imports.js",
   "module": "all-imports.js",
-  "repository": "vaadin/vaadin-material-styles",
+  "scripts": {
+    "icons": "gulp icons"
+  },
+  "files": [
+    "*.d.ts",
+    "*.js",
+    "mixins/*.d.ts",
+    "mixins/*.js"
+  ],
   "keywords": [
@@ -17,20 +39,5 @@ "vaadin",
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-material-styles/issues"
-  },
-  "homepage": "https://vaadin.com/themes",
-  "files": [
-    "*.js",
-    "*.d.ts",
-    "mixins/*.js",
-    "mixins/*.d.ts"
-  ],
-  "scripts": {
-    "icons": "gulp icons"
-  },
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha1"
+    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha10"
   },
@@ -44,6 +51,3 @@ "devDependencies": {
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "c9694d6549bff1f7fffb9ece26178e57fc228a51"
+  "gitHead": "6d3055383b9c3c8306ea34c6f2e2087e63c49348"
 }

README.md

@@ -0,46 +1,12 @@
+# Material Theme for Vaadin components
+
 [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-material-styles)](https://www.npmjs.com/package/@vaadin/vaadin-material-styles)
-[![Bower version](https://badgen.net/github/release/vaadin/vaadin-material-styles)](https://github.com/vaadin/vaadin-material-styles/releases)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
-# Material Theme for Vaadin components
-
 `vaadin-material-styles` is customizable theme for the [Vaadin components](https://vaadin.com/components).
 
+[Documentation ↗](https://cdn.vaadin.com/vaadin-material-styles/1.3.2/demo/)
 
-## Running demos and tests in browser
-
-1. Fork the `vaadin-material-styles` repository and clone it locally.
-
-1. Make sure you have [npm](https://www.npmjs.com/) installed.
-
-1. When in the `vaadin-material-styles` directory, run `npm install` and then `bower install` to install dependencies.
-
-1. Run `polymer serve --open`, browser will automatically open the component API documentation.
-
-1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
-
-  - http://127.0.0.1:8080/components/vaadin-material-styles/demo
-  - http://127.0.0.1:8080/components/vaadin-material-styles/test
-
-
-## Running tests from the command line
-
-1. When in the `vaadin-material-styles` directory, run `polymer test`
-
-
-## Following the coding style
-
-We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `gulp lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
-
-
-## Creating a pull request
-
-  - Make sure your code is compliant with our code linters: `gulp lint`
-  - Check that tests are passing: `polymer test`
-  - [Submit a pull request](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) with detailed title and description
-  - Wait for response from one of Vaadin components team members
-
-
 ## License
 
 Apache License 2.0

typography.js

@@ -32,12 +32,3 @@ /**
 const typography = css`
-  body {
-    font-family: var(--material-font-family);
-    font-size: var(--material-body-font-size);
-    line-height: 1.4;
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  /* Can’t combine with the above selector because that doesn’t work in browsers without native shadow dom */
+  body,
   :host {
@@ -118,30 +109,7 @@ font-family: var(--material-font-family);
 
-const inputs = css`
-  /* Slotted input styles */
-  input[slot='input']::placeholder,
-  textarea[slot='textarea']::placeholder {
-    color: var(--material-disabled-text-color);
-    transition: opacity 0.175s 0.1s;
-    opacity: 1;
-  }
-
-  [has-label]:not([focused]):not([invalid]):not([theme~='always-float-label']) > input[slot='input']::placeholder,
-  [has-label]:not([focused]):not([invalid]):not([theme~='always-float-label']) > input[slot='textarea']::placeholder {
-    opacity: 0;
-    transition-delay: 0;
-  }
-
-  /* Hide the native arrow icons */
-  input[slot='input']::-webkit-outer-spin-button,
-  input[slot='input']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-`;
-
 const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}${inputs.toString()}</style>`;
+$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
 document.head.appendChild($tpl.content);
 
-export { font, inputs, typography };
+export { font, typography };
 
@@ -148,0 +116,0 @@ /* Import Roboto from Google Fonts */

version.js

@@ -8,3 +8,3 @@ /**
   static get version() {
-    return '22.0.0-alpha1';
+    return '22.0.0-alpha10';
   }
@@ -11,0 +11,0 @@ }

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45167

increased by10.01%

Number of package files

26

increased by18.18%

Lines of code

861

increased by24.96%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Number of lines in readme file

13

decreased by-72.34%

Dependency changes

• + Added@vaadin/vaadin-themable-mixin@22.0.0-alpha10(transitive)

• - Removed@open-wc/dedupe-mixin@1.4.0(transitive)

• - Removed@vaadin/vaadin-themable-mixin@22.1.0(transitive)

• Updated@vaadin/vaadin-themable-mixin@22.0.0-alpha10