@vaadin/select - npm Package Compare versions

Comparing version 22.0.0-alpha4 to 22.0.0-alpha5

package.json

 {
   "name": "@vaadin/select",
-  "version": "22.0.0-alpha4",
+  "version": "22.0.0-alpha5",
   "description": "vaadin-select",
@@ -31,14 +31,14 @@ "main": "vaadin-select.js",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "^22.0.0-alpha4",
-    "@vaadin/field-base": "^22.0.0-alpha4",
-    "@vaadin/input-container": "^22.0.0-alpha4",
-    "@vaadin/text-field": "^22.0.0-alpha4",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha4",
-    "@vaadin/vaadin-item": "^22.0.0-alpha4",
-    "@vaadin/vaadin-list-box": "^22.0.0-alpha4",
-    "@vaadin/vaadin-list-mixin": "^22.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-overlay": "^22.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha4"
+    "@vaadin/button": "^22.0.0-alpha5",
+    "@vaadin/field-base": "^22.0.0-alpha5",
+    "@vaadin/input-container": "^22.0.0-alpha5",
+    "@vaadin/text-field": "^22.0.0-alpha5",
+    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha5",
+    "@vaadin/vaadin-item": "^22.0.0-alpha5",
+    "@vaadin/vaadin-list-box": "^22.0.0-alpha5",
+    "@vaadin/vaadin-list-mixin": "^22.0.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha5",
+    "@vaadin/vaadin-material-styles": "^22.0.0-alpha5",
+    "@vaadin/vaadin-overlay": "^22.0.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha5"
   },
@@ -48,3 +48,3 @@ "devDependencies": {
     "@vaadin/testing-helpers": "^0.2.1",
-    "@vaadin/vaadin-template-renderer": "^22.0.0-alpha4",
+    "@vaadin/vaadin-template-renderer": "^22.0.0-alpha5",
     "lit": "^2.0.0-rc.1",
@@ -56,3 +56,3 @@ "sinon": "^9.2.0"
   },
-  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
+  "gitHead": "012f658db6f81375be8889f63ee15e3f660fe9ec"
 }

theme/lumo/vaadin-select-styles.js

@@ -10,39 +10,37 @@ /**
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
-import '@vaadin/text-field/theme/lumo/vaadin-input-field-shared-styles.js';
+import { menuOverlay } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
+import { inputFieldShared } from '@vaadin/text-field/theme/lumo/vaadin-input-field-shared-styles.js';
 
-registerStyles(
-  'vaadin-select',
-  css`
-    :host(:not([theme*='align'])) ::slotted([slot='value']) {
-      text-align: start;
-    }
+const select = css`
+  :host(:not([theme*='align'])) ::slotted([slot='value']) {
+    text-align: start;
+  }
 
-    [part='input-field'] ::slotted([slot='value']) {
-      font-weight: 500;
-    }
+  [part='input-field'] ::slotted([slot='value']) {
+    font-weight: 500;
+  }
 
-    /* placeholder styles */
-    :host(:not([has-value])) [part='input-field'] ::slotted([slot='value']) {
-      color: inherit;
-      transition: opacity 0.175s 0.1s;
-      opacity: 0.5;
-    }
+  /* placeholder styles */
+  :host(:not([has-value])) [part='input-field'] ::slotted([slot='value']) {
+    color: inherit;
+    transition: opacity 0.175s 0.1s;
+    opacity: 0.5;
+  }
 
-    :host([has-value]) [part='input-field'] ::slotted([slot='value']) {
-      color: var(--lumo-body-text-color);
-    }
+  :host([has-value]) [part='input-field'] ::slotted([slot='value']) {
+    color: var(--lumo-body-text-color);
+  }
 
-    [part='toggle-button']::before {
-      content: var(--lumo-icons-dropdown);
-    }
+  [part='toggle-button']::before {
+    content: var(--lumo-icons-dropdown);
+  }
 
-    /* Highlight the toggle button when hovering over the entire component */
-    :host(:hover:not([readonly]):not([disabled])) [part='toggle-button'] {
-      color: var(--lumo-contrast-80pct);
-    }
-  `,
-  { moduleId: 'lumo-select', include: ['lumo-input-field-shared-styles'] }
-);
+  /* Highlight the toggle button when hovering over the entire component */
+  :host(:hover:not([readonly]):not([disabled])) [part='toggle-button'] {
+    color: var(--lumo-contrast-80pct);
+  }
+`;
 
+registerStyles('vaadin-select', [inputFieldShared, select], { moduleId: 'lumo-select' });
+
 registerStyles(
@@ -68,40 +66,38 @@ 'vaadin-select-value-button',
 
-registerStyles(
-  'vaadin-select-overlay',
-  css`
-    :host {
-      --_lumo-item-selected-icon-display: block;
-    }
+const selectOverlay = css`
+  :host {
+    --_lumo-item-selected-icon-display: block;
+  }
 
-    :host([bottom-aligned]) {
-      justify-content: flex-end;
-    }
+  :host([bottom-aligned]) {
+    justify-content: flex-end;
+  }
 
-    [part~='overlay'] {
-      min-width: var(--vaadin-select-text-field-width);
-    }
+  [part~='overlay'] {
+    min-width: var(--vaadin-select-text-field-width);
+  }
 
-    /* Small viewport adjustment */
-    :host([phone]) {
-      top: 0 !important;
-      right: 0 !important;
-      bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
-      left: 0 !important;
-      align-items: stretch;
-      justify-content: flex-end;
-    }
+  /* Small viewport adjustment */
+  :host([phone]) {
+    top: 0 !important;
+    right: 0 !important;
+    bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
+    left: 0 !important;
+    align-items: stretch;
+    justify-content: flex-end;
+  }
 
-    :host([theme~='align-left']) {
-      text-align: left;
-    }
+  :host([theme~='align-left']) {
+    text-align: left;
+  }
 
-    :host([theme~='align-right']) {
-      text-align: right;
-    }
+  :host([theme~='align-right']) {
+    text-align: right;
+  }
 
-    :host([theme~='align-center']) {
-      text-align: center;
-    }
-  `,
-  { include: ['lumo-menu-overlay'], moduleId: 'lumo-select-overlay' }
-);
+  :host([theme~='align-center']) {
+    text-align: center;
+  }
+`;
+
+registerStyles('vaadin-select-overlay', [menuOverlay, selectOverlay], { moduleId: 'lumo-select-overlay' });

theme/material/vaadin-select-styles.js

@@ -8,39 +8,37 @@ /**
 import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
-import '@vaadin/text-field/theme/material/vaadin-input-field-shared-styles.js';
+import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
+import { inputFieldShared } from '@vaadin/text-field/theme/material/vaadin-input-field-shared-styles.js';
 
-registerStyles(
-  'vaadin-select',
-  css`
-    :host {
-      display: inline-flex;
-      -webkit-tap-highlight-color: transparent;
-    }
+const select = css`
+  :host {
+    display: inline-flex;
+    -webkit-tap-highlight-color: transparent;
+  }
 
-    /* placeholder styles */
-    :host(:not([has-value])) [part='input-field'] ::slotted([slot='value']) {
-      color: var(--material-disabled-text-color);
-      transition: opacity 0.175s 0.1s;
-      opacity: 1;
-    }
+  /* placeholder styles */
+  :host(:not([has-value])) [part='input-field'] ::slotted([slot='value']) {
+    color: var(--material-disabled-text-color);
+    transition: opacity 0.175s 0.1s;
+    opacity: 1;
+  }
 
-    :host([has-value]) [part='input-field'] ::slotted([slot='value']) {
-      color: var(--material-body-text-color);
-    }
+  :host([has-value]) [part='input-field'] ::slotted([slot='value']) {
+    color: var(--material-body-text-color);
+  }
 
-    [part='toggle-button']::before {
-      content: var(--material-icons-dropdown);
-    }
+  [part='toggle-button']::before {
+    content: var(--material-icons-dropdown);
+  }
 
-    :host([opened]) [part='toggle-button'] {
-      transform: rotate(180deg);
-    }
+  :host([opened]) [part='toggle-button'] {
+    transform: rotate(180deg);
+  }
 
-    :host([disabled]) {
-      pointer-events: none;
-    }
-  `,
-  { moduleId: 'material-select', include: ['material-input-field-shared-styles'] }
-);
+  :host([disabled]) {
+    pointer-events: none;
+  }
+`;
 
+registerStyles('vaadin-select', [inputFieldShared, select], { moduleId: 'material-select' });
+
 registerStyles(
@@ -63,14 +61,12 @@ 'vaadin-select-value-button',
 
-registerStyles(
-  'vaadin-select-overlay',
-  css`
-    :host([bottom-aligned]) {
-      justify-content: flex-end;
-    }
+const selectOverlay = css`
+  :host([bottom-aligned]) {
+    justify-content: flex-end;
+  }
 
-    [part='overlay'] {
-      min-width: var(--vaadin-select-text-field-width);
-    }
-  `,
-  { include: ['material-menu-overlay'], moduleId: 'material-select-overlay' }
-);
+  [part='overlay'] {
+    min-width: var(--vaadin-select-text-field-width);
+  }
+`;
+
+registerStyles('vaadin-select-overlay', [menuOverlay, selectOverlay], { moduleId: 'material-select-overlay' });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

49524

decreased by-0.14%

Lines of code

1023

decreased by-1.16%

Dependency changes

• Updated@vaadin/button@^22.0.0-alpha5

• Updated@vaadin/field-base@^22.0.0-alpha5

• Updated@vaadin/input-container@^22.0.0-alpha5

• Updated@vaadin/text-field@^22.0.0-alpha5

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

• Updated@vaadin/vaadin-item@^22.0.0-alpha5

• Updated@vaadin/vaadin-list-box@^22.0.0-alpha5

• Updated@vaadin/vaadin-list-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-overlay@^22.0.0-alpha5

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