@vaadin/item 25.0.0-alpha1 → 25.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/item",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -21,8 +21,8 @@
   "type": "module",
   "files": [
     "src",
-    "!src/*-base-styles.d.ts",
-    "!src/*-base-styles.js",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -37,21 +37,21 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha1",
-    "@vaadin/component-base": "25.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
+    "@vaadin/a11y-base": "25.0.0-alpha10",
+    "@vaadin/component-base": "25.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha1",
-    "@vaadin/test-runner-commands": "25.0.0-alpha1",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha10",
+    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
+  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
 }

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

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/style-props.js';
+import { css } from 'lit';
+
+export const itemStyles = css`
+  :host {
+    align-items: center;
+    border-radius: var(--vaadin-item-border-radius, var(--vaadin-radius-m));
+    box-sizing: border-box;
+    cursor: var(--vaadin-clickable-cursor);
+    display: flex;
+    gap: var(--vaadin-item-gap, 0 var(--vaadin-gap-container-inline));
+    height: var(--vaadin-item-height, auto);
+    padding: var(--vaadin-item-padding, var(--vaadin-padding-container));
+  }
+
+  :host([focused]) {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: calc(var(--vaadin-focus-ring-width) / -1);
+  }
+
+  :host([disabled]) {
+    cursor: var(--vaadin-disabled-cursor);
+    opacity: 0.5;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='checkmark'] {
+    color: var(--vaadin-item-checkmark-color, inherit);
+    display: var(--vaadin-item-checkmark-display, none);
+    visibility: hidden;
+  }
+
+  [part='checkmark']::before {
+    content: '';
+    display: block;
+    background: currentColor;
+    height: var(--vaadin-icon-size, 1lh);
+    mask-image: var(--_vaadin-icon-checkmark);
+    width: var(--vaadin-icon-size, 1lh);
+  }
+
+  :host([selected]) [part='checkmark'] {
+    visibility: visible;
+  }
+
+  [part='content'] {
+    flex: 1;
+  }
+`;

package/src/vaadin-item.d.ts

@@ -10,10 +10,8 @@ import { ItemMixin } from './vaadin-item-mixin.js';
 /**
  * `<vaadin-item>` is a Web Component providing layout for items in tabs and menus.
  *
- * ```
- *   <vaadin-item>
- *     Item content
- *   </vaadin-item>
+ * ```html
+ * <vaadin-item>Item content</vaadin-item>
  * ```
  *
  * ### Selectable

package/src/vaadin-item.js

@@ -7,17 +7,16 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { itemStyles } from './vaadin-item-core-styles.js';
+import { itemStyles } from './styles/vaadin-item-core-styles.js';
 import { ItemMixin } from './vaadin-item-mixin.js';
 
 /**
  * `<vaadin-item>` is a Web Component providing layout for items in tabs and menus.
  *
- * ```
- *   <vaadin-item>
- *     Item content
- *   </vaadin-item>
+ * ```html
+ * <vaadin-item>Item content</vaadin-item>
  * ```
  *
  * ### Selectable
@@ -55,7 +54,7 @@ import { ItemMixin } from './vaadin-item-mixin.js';
  * @mixes ThemableMixin
  * @mixes DirMixin
  */
-class Item extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+class Item extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-item';
   }

package/theme/lumo/vaadin-item-styles.d.ts

@@ -2,6 +2,7 @@ import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 declare const item: import("lit").CSSResult;
 export { item };

package/theme/lumo/vaadin-item-styles.js

@@ -2,6 +2,7 @@ import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/item",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-item",
-          "description": "`<vaadin-item>` is a Web Component providing layout for items in tabs and menus.\n\n```\n  <vaadin-item>\n    Item content\n  </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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "disabled",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/item",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-item",
-          "description": "`<vaadin-item>` is a Web Component providing layout for items in tabs and menus.\n\n```\n  <vaadin-item>\n    Item content\n  </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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {

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

@@ -1,59 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/component-base/src/style-props.js';
-import { css } from 'lit';
-
-export const itemStyles = css`
-  @layer base {
-    :host {
-      align-items: center;
-      border-radius: var(--vaadin-item-border-radius, var(--_vaadin-radius-m));
-      box-sizing: border-box;
-      cursor: var(--vaadin-clickable-cursor);
-      display: flex;
-      gap: var(--vaadin-item-gap, 0 var(--_vaadin-gap-container-inline));
-      height: var(--vaadin-item-height, auto);
-      padding: var(--vaadin-item-padding, var(--_vaadin-padding-container));
-    }
-
-    :host([focused]) {
-      outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
-      outline-offset: calc(var(--vaadin-focus-ring-width) / -1);
-    }
-
-    :host([disabled]) {
-      cursor: var(--vaadin-disabled-cursor);
-      opacity: 0.5;
-    }
-
-    :host([hidden]) {
-      display: none !important;
-    }
-
-    [part='checkmark'] {
-      color: var(--vaadin-item-checkmark-color, inherit);
-      display: var(--vaadin-item-checkmark-display, none);
-      visibility: hidden;
-    }
-
-    [part='checkmark']::before {
-      content: '';
-      display: block;
-      background: currentColor;
-      height: var(--vaadin-icon-size, 1lh);
-      mask-image: var(--_vaadin-icon-checkmark);
-      width: var(--vaadin-icon-size, 1lh);
-    }
-
-    :host([selected]) [part='checkmark'] {
-      visibility: visible;
-    }
-
-    [part='content'] {
-      flex: 1;
-    }
-  }
-`;