@vaadin/vaadin-item - npm Package Compare versions

Comparing version 22.0.0-alpha4 to 22.0.0-alpha5

package.json

 {
   "name": "@vaadin/vaadin-item",
-  "version": "22.0.0-alpha4",
+  "version": "22.0.0-alpha5",
   "description": "vaadin-item",
@@ -29,6 +29,6 @@ "main": "vaadin-item.js",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha4"
+    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha5",
+    "@vaadin/vaadin-material-styles": "^22.0.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha5"
   },
@@ -43,3 +43,3 @@ "devDependencies": {
   },
-  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
+  "gitHead": "012f658db6f81375be8889f63ee15e3f660fe9ec"
 }

theme/lumo/vaadin-item-styles.js

@@ -8,65 +8,65 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
-registerStyles(
-  'vaadin-item',
-  css`
-    :host {
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-      font-family: var(--lumo-font-family);
-      font-size: var(--lumo-font-size-m);
-      line-height: var(--lumo-line-height-xs);
-      padding: 0.5em 1em;
-      min-height: var(--lumo-size-m);
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-tap-highlight-color: transparent;
-    }
+const item = css`
+  :host {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-xs);
+    padding: 0.5em 1em;
+    min-height: var(--lumo-size-m);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+  }
 
-    /* Checkmark */
-    :host([tabindex])::before {
-      display: var(--_lumo-item-selected-icon-display, none);
-      content: var(--lumo-icons-checkmark);
-      font-family: lumo-icons;
-      font-size: var(--lumo-icon-size-m);
-      line-height: 1;
-      font-weight: normal;
-      width: 1em;
-      height: 1em;
-      margin: calc((1 - var(--lumo-line-height-xs)) * var(--lumo-font-size-m) / 2) 0;
-      color: var(--lumo-primary-text-color);
-      flex: none;
-      opacity: 0;
-      transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), opacity 0.1s;
-    }
+  /* Checkmark */
+  :host([tabindex])::before {
+    display: var(--_lumo-item-selected-icon-display, none);
+    content: var(--lumo-icons-checkmark);
+    font-family: lumo-icons;
+    font-size: var(--lumo-icon-size-m);
+    line-height: 1;
+    font-weight: normal;
+    width: 1em;
+    height: 1em;
+    margin: calc((1 - var(--lumo-line-height-xs)) * var(--lumo-font-size-m) / 2) 0;
+    color: var(--lumo-primary-text-color);
+    flex: none;
+    opacity: 0;
+    transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), opacity 0.1s;
+  }
 
-    :host([selected])::before {
-      opacity: 1;
-    }
+  :host([selected])::before {
+    opacity: 1;
+  }
 
-    :host([active]:not([selected]))::before {
-      transform: scale(0.8);
-      opacity: 0;
-      transition-duration: 0s;
-    }
+  :host([active]:not([selected]))::before {
+    transform: scale(0.8);
+    opacity: 0;
+    transition-duration: 0s;
+  }
 
-    [part='content'] {
-      flex: auto;
-    }
+  [part='content'] {
+    flex: auto;
+  }
 
-    /* Disabled */
-    :host([disabled]) {
-      color: var(--lumo-disabled-text-color);
-      cursor: default;
-      pointer-events: none;
-    }
+  /* Disabled */
+  :host([disabled]) {
+    color: var(--lumo-disabled-text-color);
+    cursor: default;
+    pointer-events: none;
+  }
 
-    /* Slotted icons */
-    :host ::slotted(vaadin-icon),
-    :host ::slotted(iron-icon) {
-      width: var(--lumo-icon-size-m);
-      height: var(--lumo-icon-size-m);
-    }
-  `,
-  { moduleId: 'lumo-item' }
-);
+  /* Slotted icons */
+  :host ::slotted(vaadin-icon),
+  :host ::slotted(iron-icon) {
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
+`;
+
+registerStyles('vaadin-item', item, { moduleId: 'lumo-item' });
+
+export { item };

theme/material/vaadin-item-styles.js

@@ -6,54 +6,54 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
-registerStyles(
-  'vaadin-item',
-  css`
-    :host {
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-      overflow: hidden;
-      font-family: var(--material-font-family);
-      font-size: var(--material-body-font-size);
-      line-height: 24px;
-      padding: 4px 0;
-    }
+const item = css`
+  :host {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    overflow: hidden;
+    font-family: var(--material-font-family);
+    font-size: var(--material-body-font-size);
+    line-height: 24px;
+    padding: 4px 0;
+  }
 
-    /* It's the list-box's responsibility to add the focus style */
-    :host([focused]) {
-      outline: none;
-    }
+  /* It's the list-box's responsibility to add the focus style */
+  :host([focused]) {
+    outline: none;
+  }
 
-    /* Checkmark */
-    :host::before {
-      display: var(--_material-item-selected-icon-display, none);
-      content: '';
-      font-family: material-icons;
-      font-size: 24px;
-      line-height: 1;
-      font-weight: 400;
-      width: 24px;
-      text-align: center;
-      margin-right: 10px;
-      color: var(--material-secondary-text-color);
-      flex: none;
-    }
+  /* Checkmark */
+  :host::before {
+    display: var(--_material-item-selected-icon-display, none);
+    content: '';
+    font-family: material-icons;
+    font-size: 24px;
+    line-height: 1;
+    font-weight: 400;
+    width: 24px;
+    text-align: center;
+    margin-right: 10px;
+    color: var(--material-secondary-text-color);
+    flex: none;
+  }
 
-    :host([selected])::before {
-      content: var(--material-icons-check);
-    }
+  :host([selected])::before {
+    content: var(--material-icons-check);
+  }
 
-    /* Disabled */
-    :host([disabled]) {
-      color: var(--material-disabled-text-color);
-      cursor: default;
-      pointer-events: none;
-    }
+  /* Disabled */
+  :host([disabled]) {
+    color: var(--material-disabled-text-color);
+    cursor: default;
+    pointer-events: none;
+  }
 
-    /* RTL specific styles */
-    :host([dir='rtl'])::before {
-      margin-right: 0;
-      margin-left: 10px;
-    }
-  `,
-  { moduleId: 'material-item' }
-);
+  /* RTL specific styles */
+  :host([dir='rtl'])::before {
+    margin-right: 0;
+    margin-left: 10px;
+  }
+`;
+
+registerStyles('vaadin-item', item, { moduleId: 'material-item' });
+
+export { item };

No alert changes

Worsened metrics

Total package byte prevSize

26865

decreased by-0.49%

Lines of code

433

decreased by-0.92%

Dependency changes

• Updated@vaadin/vaadin-element-mixin@^22.0.0-alpha5

• Updated@vaadin/vaadin-lumo-styles@^22.0.0-alpha5

• Updated@vaadin/vaadin-material-styles@^22.0.0-alpha5

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