@vaadin/item - npm Package Compare versions

Comparing version 22.0.0-alpha9 to 22.0.0-beta1

package.json

 {
   "name": "@vaadin/item",
-  "version": "22.0.0-alpha9",
+  "version": "22.0.0-beta1",
   "publishConfig": {
@@ -36,6 +36,6 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha9"
+    "@vaadin/component-base": "22.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "22.0.0-beta1",
+    "@vaadin/vaadin-material-styles": "22.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-beta1"
   },
@@ -47,3 +47,3 @@ "devDependencies": {
   },
-  "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
+  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
 }

src/vaadin-item.d.ts

@@ -31,15 +31,18 @@ /**
  *
- * Part name | Description
- * ---|---
- * `content` | The element that wraps the slot
+ * Part name    | Description
+ * -------------|----------------
+ * `checkmark`  | The graphical checkmark shown for a selected item
+ * `content`    | The element that wraps the slot
  *
  * The following state attributes are available for styling:
  *
- * Attribute  | Description | Part name
- * -----------|-------------|------------
- * `disabled` | Set to a disabled item | :host
- * `focused` | Set when the element is focused | :host
- * `focus-ring` | Set when the element is keyboard focused | :host
- * `selected` | Set when the item is selected | :host
- * `active` | Set when mousedown or enter/spacebar pressed | :host
+ * Attribute    | Description
+ * -------------|-------------
+ * `active`     | Set when the item is pressed down, either with mouse, touch or the keyboard.
+ * `disabled`   | Set when the item is disabled.
+ * `focus-ring` | Set when the item is focused using the keyboard.
+ * `focused`    | Set when the item is focused.
+ * `selected`   | Set when the item is selected
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  */
@@ -46,0 +49,0 @@ declare class Item extends ItemMixin(ThemableMixin(DirMixin(HTMLElement))) {

src/vaadin-item.js

@@ -32,16 +32,19 @@ /**
  *
- * Part name | Description
- * ---|---
- * `content` | The element that wraps the slot
+ * Part name    | Description
+ * -------------|----------------
+ * `checkmark`  | The graphical checkmark shown for a selected item
+ * `content`    | The element that wraps the slot
  *
  * The following state attributes are available for styling:
  *
- * Attribute  | Description | Part name
- * -----------|-------------|------------
- * `disabled` | Set to a disabled item | :host
- * `focused` | Set when the element is focused | :host
- * `focus-ring` | Set when the element is keyboard focused | :host
- * `selected` | Set when the item is selected | :host
- * `active` | Set when mousedown or enter/spacebar pressed | :host
+ * Attribute    | Description
+ * -------------|-------------
+ * `active`     | Set when the item is pressed down, either with mouse, touch or the keyboard.
+ * `disabled`   | Set when the item is disabled.
+ * `focus-ring` | Set when the item is focused using the keyboard.
+ * `focused`    | Set when the item is focused.
+ * `selected`   | Set when the item is selected
  *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ *
  * @extends HTMLElement
@@ -64,2 +67,3 @@ * @mixes ItemMixin
       </style>
+      <span part="checkmark" aria-hidden="true"></span>
       <div part="content">
@@ -66,0 +70,0 @@ <slot></slot>

theme/lumo/vaadin-item-styles.js

@@ -16,11 +16,15 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
     line-height: var(--lumo-line-height-xs);
-    padding: 0.5em 1em;
+    padding: 0.5em calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4) 0.5em
+      var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
     min-height: var(--lumo-size-m);
+    outline: none;
+    border-radius: var(--lumo-border-radius-m);
+    cursor: var(--lumo-clickable-cursor);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
   }
 
   /* Checkmark */
-  :host([tabindex])::before {
+  [part='checkmark']::before {
     display: var(--_lumo-item-selected-icon-display, none);
@@ -41,7 +45,7 @@ content: var(--lumo-icons-checkmark);
 
-  :host([selected])::before {
+  :host([selected]) [part='checkmark']::before {
     opacity: 1;
   }
 
-  :host([active]:not([selected]))::before {
+  :host([active]:not([selected])) [part='checkmark']::before {
     transform: scale(0.8);
@@ -63,2 +67,19 @@ opacity: 0;
 
+  /* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
+  @media (any-hover: hover) {
+    :host(:hover:not([disabled])) {
+      background-color: var(--lumo-primary-color-10pct);
+    }
+
+    :host([focus-ring]:not([disabled])) {
+      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+    }
+  }
+
+  /* RTL specific styles */
+  :host([dir='rtl']) {
+    padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
+    padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
+  }
+
   /* Slotted icons */
@@ -65,0 +86,0 @@ :host ::slotted(vaadin-icon),

theme/material/vaadin-item-styles.js

@@ -11,7 +11,8 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
     box-sizing: border-box;
+    min-height: 36px;
+    padding: 8px 32px 8px 10px;
     overflow: hidden;
     font-family: var(--material-font-family);
-    font-size: var(--material-body-font-size);
+    font-size: var(--material-small-font-size);
     line-height: 24px;
-    padding: 4px 0;
   }
@@ -25,3 +26,3 @@
   /* Checkmark */
-  :host::before {
+  [part='checkmark']::before {
     display: var(--_material-item-selected-icon-display, none);
@@ -40,6 +41,16 @@ content: '';
 
-  :host([selected])::before {
+  :host([selected]) [part='checkmark']::before {
     content: var(--material-icons-check);
   }
 
+  @media (any-hover: hover) {
+    :host(:hover:not([disabled])) {
+      background-color: var(--material-secondary-background-color);
+    }
+
+    :host([focused]:not([disabled])) {
+      background-color: var(--material-divider-color);
+    }
+  }
+
   /* Disabled */
@@ -53,3 +64,7 @@ :host([disabled]) {
   /* RTL specific styles */
-  :host([dir='rtl'])::before {
+  :host([dir='rtl']) {
+    padding: 8px 10px 8px 32px;
+  }
+
+  :host([dir='rtl']) [part='checkmark']::before {
     margin-right: 0;
@@ -56,0 +71,0 @@ margin-left: 10px;

No alert changes

Improved metrics

Total package byte prevSize

28941

increased by6.53%

Lines of code

480

increased by8.35%

Dependency changes

• + Added@vaadin/component-base@22.0.0-beta1(transitive)

• + Added@vaadin/icon@22.0.0-beta1(transitive)

• + Added@vaadin/vaadin-lumo-styles@22.0.0-beta1(transitive)

• + Added@vaadin/vaadin-material-styles@22.0.0-beta1(transitive)

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

• - Removed@vaadin/component-base@22.0.0-alpha9(transitive)

• - Removed@vaadin/icon@22.0.0-alpha9(transitive)

• - Removed@vaadin/vaadin-lumo-styles@22.0.0-alpha9(transitive)

• - Removed@vaadin/vaadin-material-styles@22.0.0-alpha9(transitive)

• - Removed@vaadin/vaadin-themable-mixin@22.0.0-alpha9(transitive)

• Updated@vaadin/component-base@22.0.0-beta1

• Updated@vaadin/vaadin-lumo-styles@22.0.0-beta1

• Updated@vaadin/vaadin-material-styles@22.0.0-beta1

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