@vaadin/board 24.6.5 → 24.7.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/board",
-  "version": "24.6.5",
+  "version": "24.7.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -38,13 +38,15 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.6.5",
-    "@vaadin/component-base": "~24.6.5"
+    "@vaadin/a11y-base": "24.7.0-alpha10",
+    "@vaadin/component-base": "24.7.0-alpha10",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.6.5",
-    "@vaadin/test-runner-commands": "~24.6.5",
+    "@vaadin/chai-plugins": "24.7.0-alpha10",
+    "@vaadin/test-runner-commands": "24.7.0-alpha10",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -53,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "fc109a4234a1f60e89717ab1c0dc8fb4451aa418"
+  "gitHead": "c0f8933df2a6a40648d3fb9cfbae6bbf86a8aa90"
 }

package/src/vaadin-board-row-mixin.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
+
+export declare function BoardRowMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<BoardRowMixinClass> & Constructor<ResizeMixinClass> & T;
+
+export declare class BoardRowMixinClass {
+  /**
+   * Redraws the row, if necessary.
+   *
+   * In most cases, a board row will redraw itself if your reconfigure it.
+   * If you dynamically change breakpoints
+   * `--vaadin-board-width-small` or `--vaadin-board-width-medium`,
+   * then you need to call this method.
+   */
+  redraw(): void;
+}

package/src/vaadin-board-row-mixin.js

@@ -0,0 +1,230 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
+
+const CLASSES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+};
+
+/**
+ * @polymerMixin
+ * @mixes ResizeMixin
+ */
+export const BoardRowMixin = (superClass) =>
+  class BoardRowMixinClass extends ResizeMixin(superClass) {
+    constructor() {
+      super();
+      this._oldWidth = 0;
+      this._oldBreakpoints = { smallSize: 600, mediumSize: 960 };
+      this._oldFlexBasis = [];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.$.insertionPoint.addEventListener('slotchange', () => this.redraw());
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      this._onResize();
+    }
+
+    /**
+     * Adds styles for board row based on width.
+     * @private
+     */
+    _addStyleNames(width, breakpoints) {
+      if (width < breakpoints.smallSize) {
+        this.classList.add(CLASSES.SMALL);
+        this.classList.remove(CLASSES.MEDIUM);
+        this.classList.remove(CLASSES.LARGE);
+      } else if (width < breakpoints.mediumSize) {
+        this.classList.remove(CLASSES.SMALL);
+        this.classList.add(CLASSES.MEDIUM);
+        this.classList.remove(CLASSES.LARGE);
+      } else {
+        this.classList.remove(CLASSES.SMALL);
+        this.classList.remove(CLASSES.MEDIUM);
+        this.classList.add(CLASSES.LARGE);
+      }
+    }
+
+    /**
+     * Calculates flex basis based on colSpan, width and breakpoints.
+     * @param {number} colSpan colspan value of the row
+     * @param {number} width width of the row in px
+     * @param {number} colsInRow number of columns in the row
+     * @param {object} breakpoints object with smallSize and mediumSize number properties, which tells
+     * where the row should switch rendering size in pixels.
+     * @private
+     */
+    _calculateFlexBasis(colSpan, width, colsInRow, breakpoints) {
+      if (width < breakpoints.smallSize) {
+        colsInRow = 1;
+      } else if (width < breakpoints.mediumSize && colsInRow === 4) {
+        colsInRow = 2;
+      }
+      let flexBasis = (colSpan / colsInRow) * 100;
+      flexBasis = flexBasis > 100 ? 100 : flexBasis;
+      return `${flexBasis}%`;
+    }
+
+    /** @private */
+    _reportError() {
+      const errorMessage = 'The column configuration is not valid; column count should add up to 3 or 4.';
+      console.warn(errorMessage, `check: \r\n${this.outerHTML}`);
+    }
+
+    /**
+     * Parses board-cols from DOM.
+     * If there is not enough space in the row drop board cols.
+     * @param {!Array<!Node>} nodes array of nodes
+     * @return {!Array<number>} array of boardCols
+     * @private
+     */
+    _parseBoardCols(nodes) {
+      const boardCols = nodes.map((node) => {
+        if (node.getAttribute('board-cols')) {
+          return parseInt(node.getAttribute('board-cols'));
+        }
+        return 1;
+      });
+
+      let spaceLeft = 4;
+      let returnBoardCols = [];
+      nodes.forEach((_node, i) => {
+        spaceLeft -= boardCols[i];
+      });
+
+      if (spaceLeft < 0) {
+        this._reportError();
+        boardCols.forEach((_node, i) => {
+          returnBoardCols[i] = 1;
+        });
+      } else {
+        returnBoardCols = boardCols.slice(0);
+      }
+
+      return returnBoardCols;
+    }
+
+    /**
+     * If there is not enough space in the row.
+     * Extra items are dropped from DOM.
+     * @param {!Array<number>} boardCols array of board-cols for every node
+     * @param {!Array<!Node>} nodes array of nodes
+     * @return {!Array<!Node>} filtered array of nodes
+     * @private
+     */
+    _removeExtraNodesFromDOM(boardCols, nodes) {
+      let isErrorReported = false;
+      let spaceLeft = 4;
+      const returnNodes = [];
+      nodes.forEach((node, i) => {
+        spaceLeft -= boardCols[i];
+        if (spaceLeft < 0) {
+          if (!isErrorReported) {
+            isErrorReported = true;
+            this._reportError();
+          }
+          this.removeChild(node);
+        } else {
+          returnNodes[i] = node;
+        }
+      });
+      return returnNodes;
+    }
+
+    /**
+     * Redraws the row, if necessary.
+     *
+     * In most cases, a board row will redraw itself if your reconfigure it.
+     * If you dynamically change breakpoints
+     * --vaadin-board-width-small or --vaadin-board-width-medium,
+     * then you need to call this method.
+     */
+    redraw() {
+      this._recalculateFlexBasis(true);
+    }
+
+    /**
+     * @protected
+     * @override
+     */
+    _onResize() {
+      this._recalculateFlexBasis(false);
+    }
+
+    /** @private */
+    _recalculateFlexBasis(forceResize) {
+      const width = this.getBoundingClientRect().width;
+      const breakpoints = this._measureBreakpointsInPx();
+      if (forceResize || this._shouldRecalculate(width, breakpoints)) {
+        const nodes = this.$.insertionPoint.assignedNodes({ flatten: true });
+        const filteredNodes = nodes.filter((node) => node.nodeType === Node.ELEMENT_NODE);
+        this._addStyleNames(width, breakpoints);
+        const boardCols = this._parseBoardCols(filteredNodes);
+        const colsInRow = boardCols.reduce((a, b) => a + b, 0);
+        this._removeExtraNodesFromDOM(boardCols, filteredNodes).forEach((e, i) => {
+          const newFlexBasis = this._calculateFlexBasis(boardCols[i], width, colsInRow, breakpoints);
+          if (forceResize || !this._oldFlexBasis[i] || this._oldFlexBasis[i] !== newFlexBasis) {
+            this._oldFlexBasis[i] = newFlexBasis;
+            e.style.flexBasis = newFlexBasis;
+          }
+        });
+        this._oldWidth = width;
+        this._oldBreakpoints = breakpoints;
+      }
+    }
+
+    /** @private */
+    _shouldRecalculate(width, breakpoints) {
+      // Should not recalculate if row is invisible
+      if (isElementHidden(this)) {
+        return false;
+      }
+      return (
+        width !== this._oldWidth ||
+        breakpoints.smallSize !== this._oldBreakpoints.smallSize ||
+        breakpoints.mediumSize !== this._oldBreakpoints.mediumSize
+      );
+    }
+
+    /**
+     * Measure the breakpoints in pixels.
+     *
+     * The breakpoints for `small` and `medium` can be given in any unit: `px`, `em`, `in` etc.
+     * We need to know them in `px` so that they are comparable with the actual size.
+     *
+     * @return {object} object with smallSize and mediumSize number properties, which tells
+     * where the row should switch rendering size in pixels.
+     * @private
+     */
+    _measureBreakpointsInPx() {
+      // Convert minWidth to px units for comparison
+      const breakpoints = {};
+      const tmpStyleProp = 'background-position';
+      const smallSize = getComputedStyle(this).getPropertyValue('--small-size');
+      const mediumSize = getComputedStyle(this).getPropertyValue('--medium-size');
+      this.style.setProperty(tmpStyleProp, smallSize);
+      breakpoints.smallSize = parseFloat(getComputedStyle(this).getPropertyValue(tmpStyleProp));
+      this.style.setProperty(tmpStyleProp, mediumSize);
+      breakpoints.mediumSize = parseFloat(getComputedStyle(this).getPropertyValue(tmpStyleProp));
+      this.style.removeProperty(tmpStyleProp);
+      return breakpoints;
+    }
+  };

package/src/vaadin-board-row.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -9,7 +9,7 @@
  * license.
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
+import { BoardRowMixin } from './vaadin-board-row-mixin.js';
 
 /**
  * `<vaadin-board-row>` is a web component that together with `<vaadin-board>` component allows
@@ -45,17 +45,7 @@ import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
  * `--vaadin-board-width-small` | Determines the width where mode changes from `small` to `medium` | `600px`
  * `--vaadin-board-width-medium` | Determines the width where mode changes from `medium` to `large` | `960px`
  */
-declare class BoardRow extends ResizeMixin(ElementMixin(HTMLElement)) {
-  /**
-   * Redraws the row, if necessary.
-   *
-   * In most cases, a board row will redraw itself if your reconfigure it.
-   * If you dynamically change breakpoints
-   * `--vaadin-board-width-small` or `--vaadin-board-width-medium`,
-   * then you need to call this method.
-   */
-  redraw(): void;
-}
+declare class BoardRow extends BoardRowMixin(ElementMixin(HTMLElement)) {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-board-row.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -9,16 +9,9 @@
  * license.
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
-
-const CLASSES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large',
-};
+import { BoardRowMixin } from './vaadin-board-row-mixin.js';
 
 /**
  * `<vaadin-board-row>` is a web component that together with `<vaadin-board>` component allows
@@ -57,9 +50,9 @@ const CLASSES = {
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
- * @mixes ResizeMixin
+ * @mixes BoardRowMixin
  */
-class BoardRow extends ResizeMixin(ElementMixin(PolymerElement)) {
+class BoardRow extends BoardRowMixin(ElementMixin(PolymerElement)) {
   static get template() {
     return html`
       <style>
@@ -88,211 +81,6 @@ class BoardRow extends ResizeMixin(ElementMixin(PolymerElement)) {
   static get is() {
     return 'vaadin-board-row';
   }
-
-  constructor() {
-    super();
-    this._oldWidth = 0;
-    this._oldBreakpoints = { smallSize: 600, mediumSize: 960 };
-    this._oldFlexBasis = [];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.$.insertionPoint.addEventListener('slotchange', () => this.redraw());
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    this._onResize();
-  }
-
-  /**
-   * Adds styles for board row based on width.
-   * @private
-   */
-  _addStyleNames(width, breakpoints) {
-    if (width < breakpoints.smallSize) {
-      this.classList.add(CLASSES.SMALL);
-      this.classList.remove(CLASSES.MEDIUM);
-      this.classList.remove(CLASSES.LARGE);
-    } else if (width < breakpoints.mediumSize) {
-      this.classList.remove(CLASSES.SMALL);
-      this.classList.add(CLASSES.MEDIUM);
-      this.classList.remove(CLASSES.LARGE);
-    } else {
-      this.classList.remove(CLASSES.SMALL);
-      this.classList.remove(CLASSES.MEDIUM);
-      this.classList.add(CLASSES.LARGE);
-    }
-  }
-
-  /**
-   * Calculates flex basis based on colSpan, width and breakpoints.
-   * @param {number} colSpan colspan value of the row
-   * @param {number} width width of the row in px
-   * @param {number} colsInRow number of columns in the row
-   * @param {object} breakpoints object with smallSize and mediumSize number properties, which tells
-   * where the row should switch rendering size in pixels.
-   * @private
-   */
-  _calculateFlexBasis(colSpan, width, colsInRow, breakpoints) {
-    if (width < breakpoints.smallSize) {
-      colsInRow = 1;
-    } else if (width < breakpoints.mediumSize && colsInRow === 4) {
-      colsInRow = 2;
-    }
-    let flexBasis = (colSpan / colsInRow) * 100;
-    flexBasis = flexBasis > 100 ? 100 : flexBasis;
-    return `${flexBasis}%`;
-  }
-
-  /** @private */
-  _reportError() {
-    const errorMessage = 'The column configuration is not valid; column count should add up to 3 or 4.';
-    console.warn(errorMessage, `check: \r\n${this.outerHTML}`);
-  }
-
-  /**
-   * Parses board-cols from DOM.
-   * If there is not enough space in the row drop board cols.
-   * @param {!Array<!Node>} nodes array of nodes
-   * @return {!Array<number>} array of boardCols
-   * @private
-   */
-  _parseBoardCols(nodes) {
-    const boardCols = nodes.map((node) => {
-      if (node.getAttribute('board-cols')) {
-        return parseInt(node.getAttribute('board-cols'));
-      }
-      return 1;
-    });
-
-    let spaceLeft = 4;
-    let returnBoardCols = [];
-    nodes.forEach((_node, i) => {
-      spaceLeft -= boardCols[i];
-    });
-
-    if (spaceLeft < 0) {
-      this._reportError();
-      boardCols.forEach((_node, i) => {
-        returnBoardCols[i] = 1;
-      });
-    } else {
-      returnBoardCols = boardCols.slice(0);
-    }
-
-    return returnBoardCols;
-  }
-
-  /**
-   * If there is not enough space in the row.
-   * Extra items are dropped from DOM.
-   * @param {!Array<number>} boardCols array of board-cols for every node
-   * @param {!Array<!Node>} nodes array of nodes
-   * @return {!Array<!Node>} filtered array of nodes
-   * @private
-   */
-  _removeExtraNodesFromDOM(boardCols, nodes) {
-    let isErrorReported = false;
-    let spaceLeft = 4;
-    const returnNodes = [];
-    nodes.forEach((node, i) => {
-      spaceLeft -= boardCols[i];
-      if (spaceLeft < 0) {
-        if (!isErrorReported) {
-          isErrorReported = true;
-          this._reportError();
-        }
-        this.removeChild(node);
-      } else {
-        returnNodes[i] = node;
-      }
-    });
-    return returnNodes;
-  }
-
-  /**
-   * Redraws the row, if necessary.
-   *
-   * In most cases, a board row will redraw itself if your reconfigure it.
-   * If you dynamically change breakpoints
-   * --vaadin-board-width-small or --vaadin-board-width-medium,
-   * then you need to call this method.
-   */
-  redraw() {
-    this._recalculateFlexBasis(true);
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  _onResize() {
-    this._recalculateFlexBasis(false);
-  }
-
-  /** @private */
-  _recalculateFlexBasis(forceResize) {
-    const width = this.getBoundingClientRect().width;
-    const breakpoints = this._measureBreakpointsInPx();
-    if (forceResize || this._shouldRecalculate(width, breakpoints)) {
-      const nodes = this.$.insertionPoint.assignedNodes({ flatten: true });
-      const filteredNodes = nodes.filter((node) => node.nodeType === Node.ELEMENT_NODE);
-      this._addStyleNames(width, breakpoints);
-      const boardCols = this._parseBoardCols(filteredNodes);
-      const colsInRow = boardCols.reduce((a, b) => a + b, 0);
-      this._removeExtraNodesFromDOM(boardCols, filteredNodes).forEach((e, i) => {
-        const newFlexBasis = this._calculateFlexBasis(boardCols[i], width, colsInRow, breakpoints);
-        if (forceResize || !this._oldFlexBasis[i] || this._oldFlexBasis[i] !== newFlexBasis) {
-          this._oldFlexBasis[i] = newFlexBasis;
-          e.style.flexBasis = newFlexBasis;
-        }
-      });
-      this._oldWidth = width;
-      this._oldBreakpoints = breakpoints;
-    }
-  }
-
-  /** @private */
-  _shouldRecalculate(width, breakpoints) {
-    // Should not recalculate if row is invisible
-    if (isElementHidden(this)) {
-      return false;
-    }
-    return (
-      width !== this._oldWidth ||
-      breakpoints.smallSize !== this._oldBreakpoints.smallSize ||
-      breakpoints.mediumSize !== this._oldBreakpoints.mediumSize
-    );
-  }
-
-  /**
-   * Measure the breakpoints in pixels.
-   *
-   * The breakpoints for `small` and `medium` can be given in any unit: `px`, `em`, `in` etc.
-   * We need to know them in `px` so that they are comparable with the actual size.
-   *
-   * @return {object} object with smallSize and mediumSize number properties, which tells
-   * where the row should switch rendering size in pixels.
-   * @private
-   */
-  _measureBreakpointsInPx() {
-    // Convert minWidth to px units for comparison
-    const breakpoints = {};
-    const tmpStyleProp = 'background-position';
-    const smallSize = getComputedStyle(this).getPropertyValue('--small-size');
-    const mediumSize = getComputedStyle(this).getPropertyValue('--medium-size');
-    this.style.setProperty(tmpStyleProp, smallSize);
-    breakpoints.smallSize = parseFloat(getComputedStyle(this).getPropertyValue(tmpStyleProp));
-    this.style.setProperty(tmpStyleProp, mediumSize);
-    breakpoints.mediumSize = parseFloat(getComputedStyle(this).getPropertyValue(tmpStyleProp));
-    this.style.removeProperty(tmpStyleProp);
-    return breakpoints;
-  }
 }
 
 defineCustomElement(BoardRow);

package/src/vaadin-board.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-board.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-lit-board-row.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+export * from './vaadin-board-row.js';

package/src/vaadin-lit-board-row.js

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { BoardRowMixin } from './vaadin-board-row-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-board-row>` 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.
+ */
+class BoardRow extends BoardRowMixin(ElementMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-board-row';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: stretch;
+        --small-size: var(--vaadin-board-width-small, 600px);
+        --medium-size: var(--vaadin-board-width-medium, 960px);
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      :host ::slotted(*) {
+        box-sizing: border-box;
+        flex-grow: 1;
+        overflow: hidden;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`<slot id="insertionPoint"></slot>`;
+  }
+}
+
+defineCustomElement(BoardRow);
+
+export { BoardRow };

package/src/vaadin-lit-board.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+export * from './vaadin-board.js';

package/src/vaadin-lit-board.js

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import './vaadin-lit-board-row.js';
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { BoardRow } from './vaadin-lit-board-row.js';
+
+/**
+ * LitElement based version of `<vaadin-board>` 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.
+ */
+class Board extends ElementMixin(PolylitMixin(LitElement)) {
+  static get is() {
+    return 'vaadin-board';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-board';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  /**
+   * Redraws the board and all rows inside it, if necessary.
+   *
+   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change
+   * breakpoints `--vaadin-board-width-small` or `--vaadin-board-width-medium`,
+   * then you need to call this method.
+   */
+  redraw() {
+    [...this.querySelectorAll('*')].filter((node) => node instanceof BoardRow).forEach((row) => row.redraw());
+  }
+}
+
+defineCustomElement(Board);
+
+export { Board };

package/theme/lumo/vaadin-lit-board-row.d.ts

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-board-row.js';

package/theme/lumo/vaadin-lit-board-row.js

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-board-row.js';

package/theme/lumo/vaadin-lit-board.d.ts

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

package/theme/lumo/vaadin-lit-board.js

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

package/theme/material/vaadin-lit-board-row.d.ts

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-board-row.js';

package/theme/material/vaadin-lit-board-row.js

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-board-row.js';

package/theme/material/vaadin-lit-board.d.ts

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

package/theme/material/vaadin-lit-board.js

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

package/vaadin-lit-board-row.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-board-row.js';

package/vaadin-lit-board-row.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-board-row.js';
+export * from './src/vaadin-lit-board-row.js';

package/vaadin-lit-board.d.ts

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

package/vaadin-lit-board.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-board.js';
+export * from './src/vaadin-lit-board.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/board",
-  "version": "24.6.5",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/board",
-  "version": "24.6.5",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {