@vaadin/vaadin-material-styles 22.0.0-alpha1 → 22.0.0-alpha10

package/README.md

@@ -1,45 +1,11 @@
-[![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)
-
 # Material Theme for Vaadin components
 
-`vaadin-material-styles` is customizable theme for the [Vaadin components](https://vaadin.com/components).
-
-
-## 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
+[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-material-styles)](https://www.npmjs.com/package/@vaadin/vaadin-material-styles)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
-  - 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
+`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/)
 
 ## License
 

package/mixins/helper.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { CSSResult } from 'lit';
+
+export const helper: CSSResult;

package/mixins/helper.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '../color.js';
+
+export const helper = css`
+  [part='helper-text'] {
+    font-size: 0.75rem;
+    line-height: 1;
+    color: var(--material-secondary-text-color);
+  }
+
+  :host([has-helper]) [part='helper-text']::before {
+    content: '';
+    display: block;
+    height: 6px;
+  }
+
+  /* According to Material guidelines, helper text should be hidden when error message is set and input is invalid */
+  :host([has-helper][invalid][has-error-message]) [part='helper-text'] {
+    display: none;
+  }
+`;

package/mixins/input-field-shared.d.ts

@@ -0,0 +1,5 @@
+import { CSSResult } from 'lit';
+
+export const inputField: CSSResult;
+
+export const inputFieldShared: CSSResult;

package/mixins/input-field-shared.js

@@ -0,0 +1,195 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '../color.js';
+import '../font-icons.js';
+import '../typography.js';
+import { fieldButton } from './field-button.js';
+import { helper } from './helper.js';
+import { requiredField } from './required-field.js';
+
+const inputField = css`
+  :host {
+    display: inline-flex;
+    position: relative;
+    padding-top: 8px;
+    margin-bottom: 8px;
+    outline: none;
+    color: var(--material-body-text-color);
+    font-size: var(--material-body-font-size);
+    line-height: 24px;
+    font-family: var(--material-font-family);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :host::before {
+    line-height: 32px;
+  }
+
+  /* Strange gymnastics to make fields vertically align nicely in most cases
+     (no label, with label, without prefix, with prefix, etc.) */
+
+  :host([has-label]) {
+    padding-top: 24px;
+  }
+
+  [part='input-field'] {
+    position: relative;
+    top: -0.2px; /* NOTE(platosha): Adjusts for wrong flex baseline in Chrome & Safari */
+    height: 32px;
+    padding-left: 0;
+    padding-right: 0;
+    background-color: transparent;
+    margin: 0;
+  }
+
+  [part='input-field']::before,
+  [part='input-field']::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    transform-origin: 50% 0%;
+    background-color: var(--_material-text-field-input-line-background-color, #000);
+    opacity: var(--_material-text-field-input-line-opacity, 0.42);
+  }
+
+  [part='input-field']::after {
+    background-color: var(--material-primary-color);
+    opacity: 0;
+    height: 2px;
+    bottom: 0;
+    transform: scaleX(0);
+    transition: opacity 0.175s;
+  }
+
+  :host([disabled]) [part='label'],
+  :host([disabled]) [part='input-field'] ::slotted(:is(input, textarea)) {
+    color: var(--material-disabled-text-color);
+    -webkit-text-fill-color: var(--material-disabled-text-color);
+  }
+
+  [part='input-field'] ::slotted(:is(input, textarea)) {
+    outline: none;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    padding: 8px 0;
+    width: 100%;
+    height: 100%;
+    font-family: inherit;
+    font-size: 1em;
+    line-height: inherit;
+    color: inherit;
+    background-color: transparent;
+    /* Disable default invalid style in Firefox */
+    box-shadow: none;
+  }
+
+  /* TODO: the text opacity should be 42%, but the disabled style is 38%.
+  Would need to introduce another property for it if we want to be 100% accurate. */
+  ::slotted(:is(input, textarea):placeholder-shown) {
+    color: var(--material-disabled-text-color);
+    transition: opacity 0.175s 0.1s;
+  }
+
+  /* prettier-ignore */
+  :host([has-label]:not([focused]):not([invalid]):not([theme='always-float-label'])) ::slotted(:is(input, textarea):placeholder-shown) {
+    opacity: 0;
+    transition-delay: 0;
+  }
+
+  [part='label'] {
+    width: 133%;
+    transition: transform 0.175s, color 0.175s, width 0.175s;
+    transition-timing-function: ease, ease, step-end;
+  }
+
+  :host(:hover:not([readonly]):not([invalid])) [part='input-field']::before {
+    opacity: var(--_material-text-field-input-line-hover-opacity, 0.87);
+  }
+
+  :host([focused]:not([invalid])) [part='label'] {
+    color: var(--material-primary-text-color);
+  }
+
+  :host([focused]) [part='input-field']::after,
+  :host([invalid]) [part='input-field']::after {
+    opacity: 1;
+    transform: none;
+    transition: transform 0.175s, opacity 0.175s;
+  }
+
+  :host([invalid]) [part='input-field']::after {
+    background-color: var(--material-error-color);
+  }
+
+  :host([input-prevented]) [part='input-field'] {
+    color: var(--material-error-text-color);
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :host([disabled]) [part='input-field'] {
+    color: var(--material-disabled-text-color);
+  }
+
+  :host([disabled]) [part='input-field']::before {
+    background-color: transparent;
+    background-image: linear-gradient(
+      90deg,
+      var(--_material-text-field-input-line-background-color, #000) 0,
+      var(--_material-text-field-input-line-background-color, #000) 2px,
+      transparent 2px
+    );
+    background-size: 4px 1px;
+    background-repeat: repeat-x;
+  }
+
+  /* Only target the visible floating label */
+  :host([has-label]:not([has-value]):not([focused]):not([invalid]):not([theme~='always-float-label'])) [part='label'] {
+    width: 100%;
+    transform: scale(1) translateY(24px);
+    transition-timing-function: ease, ease, step-start;
+    pointer-events: none;
+    left: auto;
+    right: auto;
+    transition-delay: 0.1s;
+  }
+
+  /* Slotted content */
+  [part='input-field'] ::slotted(*:not([part$='-button']):not(input):not(textarea)) {
+    color: var(--material-secondary-text-color);
+  }
+
+  [part='clear-button']::before {
+    content: var(--material-icons-clear);
+  }
+
+  /* RTL specific styles */
+
+  :host([disabled][dir='rtl']) [part='input-field']::before {
+    background-image: linear-gradient(
+      -90deg,
+      var(--_material-text-field-input-line-background-color, #000) 0,
+      var(--_material-text-field-input-line-background-color, #000) 2px,
+      transparent 2px
+    );
+  }
+`;
+
+const inputFieldShared = [requiredField, fieldButton, helper, inputField];
+
+registerStyles('', inputFieldShared, {
+  moduleId: 'material-input-field-shared-styles'
+});
+
+export { inputField, inputFieldShared };

package/mixins/menu-overlay.js

@@ -3,12 +3,13 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-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 };

package/mixins/required-field.js

@@ -23,7 +23,7 @@ const requiredField = css`
     transform: scale(0.75);
   }
 
-  :host([required]) [part='label']::after {
+  :host([required]) [part='required-indicator']::after {
     content: ' *';
     color: inherit;
   }
@@ -38,8 +38,7 @@ const requiredField = css`
     color: var(--material-error-text-color);
   }
 
-  /* 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: '';
     display: block;
     height: 6px;

package/package.json

@@ -1,10 +1,32 @@
 {
   "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": [
     "vaadin",
     "material",
@@ -14,24 +36,9 @@
     "web-component",
     "polymer"
   ],
-  "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"
   },
   "devDependencies": {
     "gulp": "^4.0.0",
@@ -40,8 +47,5 @@
     "gulp-sort": "^2.0.0",
     "gulp-svgmin": "^3.0.0"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "c9694d6549bff1f7fffb9ece26178e57fc228a51"
+  "gitHead": "6d3055383b9c3c8306ea34c6f2e2087e63c49348"
 }

package/typography.js

@@ -29,16 +29,7 @@ const font = css`
 `;
 
 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 {
     font-family: var(--material-font-family);
     font-size: var(--material-body-font-size);
@@ -114,34 +105,11 @@ const typography = css`
 
 registerStyles('', typography, { moduleId: 'material-typography' });
 
-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 };
 
 /* Import Roboto from Google Fonts */
 if (!window.polymerSkipLoadingFontRoboto) {

package/version.js

@@ -5,7 +5,7 @@
  */
 class Material extends HTMLElement {
   static get version() {
-    return '22.0.0-alpha1';
+    return '22.0.0-alpha10';
   }
 }