experiment: add Lit based version of vaadin-item

packages/item/package.json

@@ -21,6 +21,8 @@
  "type": "module",
  "files": [
  "src",
+ "!src/vaadin-lit-item.d.ts",
+ "!src/vaadin-lit-item.js",
  "theme",
  "vaadin-*.d.ts",
  "vaadin-*.js",

packages/item/src/vaadin-lit-item.d.ts

@@ -0,0 +1 @@
+export * from './vaadin-item.js';

packages/item/src/vaadin-lit-item.js

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ItemMixin } from './vaadin-item-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-integer-field>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class Item extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+ static get is() {
+ return 'vaadin-item';
+ }
+
+ static get styles() {
+ return css`
+ :host {
+ display: inline-block;
+ }
+
+ :host([hidden]) {
+ display: none !important;
+ }
+ `;
+ }
+
+ /** @protected */
+ render() {
+ return html`
+ <span part="checkmark" aria-hidden="true"></span>
+ <div part="content">
+ <slot></slot>
+ </div>
+ `;
+ }
+
+ /** @protected */
+ ready() {
+ super.ready();
+
+ this.setAttribute('role', 'option');
+ }
+}
+
+defineCustomElement(Item);
+
+export { Item };

packages/item/test/item-lit.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-item.js';
+import './item.common.js';

packages/item/test/item-polymer.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-item.js';
+import './item.common.js';

packages/item/test/item.test.js → packages/item/test/item.common.js

@@ -1,12 +1,12 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync } from '@vaadin/testing-helpers';
-import '../vaadin-item.js';
+import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
 
 describe('vaadin-item', () => {
  let item, tagName;
 
- beforeEach(() => {
+ beforeEach(async () => {
  item = fixtureSync('<vaadin-item>label</vaadin-item>');
+ await nextRender();
  tagName = item.tagName.toLowerCase();
  });