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

Comparing version 21.0.0-beta1 to 22.0.0-alpha1

package.json

 {
   "name": "@vaadin/vaadin-material-styles",
-  "version": "21.0.0-beta1",
+  "version": "22.0.0-alpha1",
   "description": "Vaadin Material is a complete theme for Vaadin components, inspired by Google’s Material Design guidelines.",
@@ -34,3 +34,3 @@ "main": "all-imports.js",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-themable-mixin": "21.0.0-beta1"
+    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha1"
   },
@@ -47,3 +47,3 @@ "devDependencies": {
   },
-  "gitHead": "7d08834d03228105c2ea72213a385ddf35125f79"
+  "gitHead": "c9694d6549bff1f7fffb9ece26178e57fc228a51"
 }

typography.d.ts

@@ -5,2 +5,4 @@ import { CSSResult } from 'lit';
 
+export const inputs: CSSResult;
+
 export const typography: CSSResult;

typography.js

@@ -31,6 +31,2 @@ /**
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
-
 const typography = css`
@@ -119,6 +115,34 @@ body {
 `;
+
 registerStyles('', typography, { moduleId: 'material-typography' });
 
-export { font, 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>`;
+document.head.appendChild($tpl.content);
+
+export { font, inputs, typography };
+
 /* Import Roboto from Google Fonts */
@@ -125,0 +149,0 @@ if (!window.polymerSkipLoadingFontRoboto) {

version.js

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

No alert changes

Improved metrics

Total package byte prevSize

41059

increased by1.91%

Lines of code

689

increased by3.14%

Dependency changes

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

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

• - Removed@vaadin/vaadin-themable-mixin@21.0.0-beta1(transitive)

• Updated@vaadin/vaadin-themable-mixin@^22.0.0-alpha1