@vaadin/item 25.2.0-alpha8 → 25.2.0-beta1

package/custom-elements.json

@@ -41,6 +41,20 @@
           "description": "A mixin providing `focused`, `focus-ring`, `active`, `disabled` and `selected`.\n\n`focused`, `active` and `focus-ring` are set as only as attributes.",
           "name": "ItemMixin",
           "members": [
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "attribute": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "selected",
@@ -61,6 +75,18 @@
             }
           ],
           "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
+            },
             {
               "name": "selected",
               "type": {
@@ -107,6 +133,20 @@
           "description": "`<vaadin-item>` is a Web Component providing layout for items in tabs and menus.\n\n```html\n<vaadin-item>Item content</vaadin-item>\n```\n\n### Selectable\n\n`<vaadin-item>` has the `selected` property and the corresponding state attribute.\nCurrently, the component sets the `selected` to false, when `disabled` property is set to true.\nBut other than that, the `<vaadin-item>` does not switch selection by itself.\nIn general, it is the wrapper component, like `<vaadin-list-box>`, which should update\nthe `selected` property on the items, e. g. on mousedown or when Enter / Spacebar is pressed.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name    | Description\n-------------|----------------\n`checkmark`  | The graphical checkmark shown for a selected item\n`content`    | The element that wraps the slot\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|-------------\n`active`     | Set when the item is pressed down, either with mouse, touch or the keyboard.\n`disabled`   | Set when the item is disabled.\n`focus-ring` | Set when the item is focused using the keyboard.\n`focused`    | Set when the item is focused.\n`selected`   | Set when the item is selected\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                  |\n:------------------------------------|\n| `--vaadin-item-border-radius`      |\n| `--vaadin-item-checkmark-color`    |\n| `--vaadin-item-checkmark-display`  |\n| `--vaadin-item-gap`                |\n| `--vaadin-item-height`             |\n| `--vaadin-item-padding`            |\n| `--vaadin-item-text-align`         |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "Item",
           "members": [
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "attribute": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
+            },
             {
               "type": {
                 "text": "string"
@@ -171,6 +211,18 @@
           "tagName": "vaadin-item",
           "customElement": true,
           "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
+            },
             {
               "name": "selected",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/item",
-  "version": "25.2.0-alpha8",
+  "version": "25.2.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,17 +35,17 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-alpha8",
-    "@vaadin/component-base": "25.2.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha8",
+    "@vaadin/a11y-base": "25.2.0-beta1",
+    "@vaadin/component-base": "25.2.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha8",
-    "@vaadin/chai-plugins": "25.2.0-alpha8",
-    "@vaadin/test-runner-commands": "25.2.0-alpha8",
+    "@vaadin/aura": "25.2.0-beta1",
+    "@vaadin/chai-plugins": "25.2.0-beta1",
+    "@vaadin/test-runner-commands": "25.2.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-beta1",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "2b82e20cdfc605b1187e9a24ae42869e1500ab68"
+  "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
 }

package/src/styles/vaadin-item-base-styles.js

@@ -27,7 +27,7 @@ export const itemStyles = css`
   :host([disabled]) {
     cursor: var(--vaadin-disabled-cursor);
     opacity: 0.5;
-    pointer-events: none;
+    pointer-events: var(--_vaadin-item-disabled-pointer-events, none);
   }
 
   :host([hidden]) {

package/src/vaadin-item-mixin.js

@@ -10,10 +10,6 @@ import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
  * A mixin providing `focused`, `focus-ring`, `active`, `disabled` and `selected`.
  *
  * `focused`, `active` and `focus-ring` are set as only as attributes.
- *
- * @polymerMixin
- * @mixes ActiveMixin
- * @mixes FocusMixin
  */
 export const ItemMixin = (superClass) =>
   class VaadinItemMixin extends ActiveMixin(FocusMixin(superClass)) {
@@ -61,7 +57,7 @@ export const ItemMixin = (superClass) =>
      * @type {string}
      */
     get value() {
-      return this._value !== undefined ? this._value : this.textContent.trim();
+      return this._value ?? this.textContent.trim();
     }
 
     set value(value) {
@@ -76,6 +72,10 @@ export const ItemMixin = (superClass) =>
       if (attrValue !== null) {
         this.value = attrValue;
       }
+
+      if (this.__shouldAllowFocusWhenDisabled()) {
+        this.style.setProperty('--_vaadin-item-disabled-pointer-events', 'auto');
+      }
     }
 
     /**
@@ -84,7 +84,7 @@ export const ItemMixin = (superClass) =>
      * @override
      */
     focus(options) {
-      if (this.disabled) {
+      if (this.disabled && !this.__shouldAllowFocusWhenDisabled()) {
         return;
       }
 
@@ -115,7 +115,9 @@ export const ItemMixin = (superClass) =>
 
       if (disabled) {
         this.selected = false;
-        this.blur();
+        if (!this.__shouldAllowFocusWhenDisabled()) {
+          this.blur();
+        }
       }
     }
 
@@ -142,4 +144,15 @@ export const ItemMixin = (superClass) =>
         this.click();
       }
     }
+
+    /**
+     * Returns whether the component should be focusable when disabled.
+     * Returns false by default.
+     *
+     * @private
+     * @return {boolean}
+     */
+    __shouldAllowFocusWhenDisabled() {
+      return false;
+    }
   };

package/src/vaadin-item.js

@@ -63,9 +63,6 @@ import { ItemMixin } from './vaadin-item-mixin.js';
  * @prop {string} label - String that can be set to visually represent the selected item in `vaadin-select`.
  * @customElement vaadin-item
  * @extends HTMLElement
- * @mixes ItemMixin
- * @mixes ThemableMixin
- * @mixes DirMixin
  */
 class Item extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/item",
-  "version": "25.2.0-alpha8",
+  "version": "25.2.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,9 +15,7 @@
               "description": "If true, the user cannot interact with this element.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -26,9 +24,7 @@
               "description": "If true, the item is in selected state.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -51,9 +47,7 @@
                 "description": "If true, the user cannot interact with this element.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -71,9 +65,7 @@
                 "description": "If true, the item is in selected state.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/item",
-  "version": "25.2.0-alpha8",
+  "version": "25.2.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -27,15 +27,15 @@
               }
             },
             {
-              "name": "?selected",
-              "description": "If true, the item is in selected state.",
+              "name": ".label",
+              "description": "String that can be set to visually represent the selected item in `vaadin-select`.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".label",
-              "description": "String that can be set to visually represent the selected item in `vaadin-select`.",
+              "name": "?selected",
+              "description": "If true, the item is in selected state.",
               "value": {
                 "kind": "expression"
               }