Tessl Tile for npm/vaadin-web-components@24.9.0

or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

tessl/npm-vaadin--web-components

A comprehensive monorepo containing 70+ high-quality web components for business web applications built with modern web standards

Workspace: tessl
Visibility: Public
Created: 2 months ago
Last updated: 2 months ago
Describes: pkg:npm/vaadin-web-components@24.9.x

To install, run

npx @tessl/cli install tessl/npm-vaadin--web-components@24.9.0

0
# Vaadin Web Components
1

2
Vaadin Web Components is a comprehensive monorepo containing 70+ high-quality web components for business web applications. Built with modern web standards including Lit and Polymer, these components provide a complete UI toolkit covering layout, input controls, data presentation, navigation, and specialized business functionality.
3

4
## Package Information
5

6
- **Package Name**: vaadin-web-components
7
- **Package Type**: npm (monorepo)
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: Components are installed individually, e.g., `npm install @vaadin/grid`
10
- **License**: Apache-2.0 (Core), Commercial (Pro)
11

12
## Core Imports
13

14
Components are imported individually from their respective packages:
15

16
```javascript
17
// ES Modules
18
import '@vaadin/grid/vaadin-grid.js';
19
import '@vaadin/button/vaadin-button.js';
20
import '@vaadin/text-field/vaadin-text-field.js';
21
```
22

23
For TypeScript:
24

25
```typescript
26
import '@vaadin/grid';
27
import '@vaadin/button';
28
import '@vaadin/text-field';
29
```
30

31
## Basic Usage
32

33
```html
34
<!DOCTYPE html>
35
<html>
36
  <head>
37
    <meta charset="utf-8">
38
    <title>Vaadin Components Example</title>
39
  </head>
40
  <body>
41
    <!-- Use web components in HTML -->
42
    <vaadin-grid column-reordering-allowed multi-sort>
43
      <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column>
44
      <vaadin-grid-sort-column width="9rem" path="firstName"></vaadin-grid-sort-column>
45
      <vaadin-grid-sort-column width="9rem" path="lastName"></vaadin-grid-sort-column>
46
      <vaadin-grid-column width="9rem" path="address.city"></vaadin-grid-column>
47
    </vaadin-grid>
48

49
    <vaadin-button theme="primary">Click me</vaadin-button>
50
    <vaadin-text-field label="Enter text" placeholder="Type here..."></vaadin-text-field>
51

52
    <script type="module">
53
      // Import component modules to register custom elements
54
      import '@vaadin/grid/vaadin-grid.js';
55
      import '@vaadin/grid/vaadin-grid-selection-column.js';
56
      import '@vaadin/grid/vaadin-grid-sort-column.js';
57
      import '@vaadin/button/vaadin-button.js';
58
      import '@vaadin/text-field/vaadin-text-field.js';
59

60
      // Configure components programmatically
61
      const grid = document.querySelector('vaadin-grid');
62
      grid.items = [
63
        { firstName: 'John', lastName: 'Doe', address: { city: 'New York' }},
64
        { firstName: 'Jane', lastName: 'Smith', address: { city: 'London' }}
65
      ];
66
    </script>
67
  </body>
68
</html>
69
```
70

71
## Architecture
72

73
The Vaadin Web Components monorepo is organized around several key architectural principles:
74

75
- **Individual Packages**: Each component is published as a separate npm package under the @vaadin namespace
76
- **Shared Dependencies**: Common utilities and base classes are shared across components through base packages
77
- **Theme System**: Comprehensive theming through Lumo and Material design systems
78
- **Web Standards**: Built on Web Components standards (Custom Elements, Shadow DOM, HTML Templates)
79
- **Framework Agnostic**: Can be used with any frontend framework or vanilla JavaScript
80
- **Accessibility First**: ARIA compliance and keyboard navigation built into all components
81
- **TypeScript Support**: Full TypeScript definitions for all components
82

83
The repository uses Lerna for monorepo management and includes shared development tooling for building, testing, and documentation generation across all component packages.
84

85
## Capabilities
86

87
### Layout Components
88

89
Structural components for organizing application layouts and content.
90

91
```javascript { .api }
92
// App Layout - Main application structure
93
import '@vaadin/app-layout/vaadin-app-layout.js';
94
import '@vaadin/app-layout/vaadin-drawer-toggle.js';
95

96
// Flexbox layouts
97
import '@vaadin/horizontal-layout/vaadin-horizontal-layout.js';
98
import '@vaadin/vertical-layout/vaadin-vertical-layout.js';
99

100
// Advanced layouts
101
import '@vaadin/split-layout/vaadin-split-layout.js';
102
import '@vaadin/form-layout/vaadin-form-layout.js';
103
import '@vaadin/master-detail-layout/vaadin-master-detail-layout.js';
104
```
105

106
### Data Input Components
107

108
Form controls and input components for user interaction.
109

110
```javascript { .api }
111
// Text inputs
112
import '@vaadin/text-field/vaadin-text-field.js';
113
import '@vaadin/text-area/vaadin-text-area.js';
114
import '@vaadin/password-field/vaadin-password-field.js';
115
import '@vaadin/email-field/vaadin-email-field.js';
116

117
// Numeric inputs
118
import '@vaadin/number-field/vaadin-number-field.js';
119
import '@vaadin/integer-field/vaadin-integer-field.js';
120

121
// Date and time
122
import '@vaadin/date-picker/vaadin-date-picker.js';
123
import '@vaadin/time-picker/vaadin-time-picker.js';
124
import '@vaadin/date-time-picker/vaadin-date-time-picker.js';
125

126
// Selection controls
127
import '@vaadin/checkbox/vaadin-checkbox.js';
128
import '@vaadin/checkbox-group/vaadin-checkbox-group.js';
129
import '@vaadin/radio-group/vaadin-radio-group.js';
130
import '@vaadin/combo-box/vaadin-combo-box.js';
131
import '@vaadin/multi-select-combo-box/vaadin-multi-select-combo-box.js';
132
import '@vaadin/select/vaadin-select.js';
133

134
// File upload
135
import '@vaadin/upload/vaadin-upload.js';
136

137
// Custom fields
138
import '@vaadin/custom-field/vaadin-custom-field.js';
139
```
140

141
### Data Display Components
142

143
Components for presenting and organizing data.
144

145
```javascript { .api }
146
// Data grid
147
import '@vaadin/grid/vaadin-grid.js';
148
import '@vaadin/grid/vaadin-grid-column.js';
149
import '@vaadin/grid/vaadin-grid-selection-column.js';
150
import '@vaadin/grid/vaadin-grid-sort-column.js';
151
import '@vaadin/grid/vaadin-grid-tree-column.js';
152

153
// Lists
154
import '@vaadin/virtual-list/vaadin-virtual-list.js';
155
import '@vaadin/list-box/vaadin-list-box.js';
156
import '@vaadin/item/vaadin-item.js';
157

158
// Cards and content
159
import '@vaadin/card/vaadin-card.js';
160
import '@vaadin/details/vaadin-details.js';
161
import '@vaadin/accordion/vaadin-accordion.js';
162
import '@vaadin/accordion/vaadin-accordion-panel.js';
163

164
// Progress indicators
165
import '@vaadin/progress-bar/vaadin-progress-bar.js';
166

167
// Markdown rendering
168
import '@vaadin/markdown/vaadin-markdown.js';
169
```
170

171
### Navigation Components
172

173
Components for application navigation and user interface structure.
174

175
```javascript { .api }
176
// Tab navigation
177
import '@vaadin/tabs/vaadin-tabs.js';
178
import '@vaadin/tabs/vaadin-tab.js';
179
import '@vaadin/tabsheet/vaadin-tabsheet.js';
180

181
// Side navigation
182
import '@vaadin/side-nav/vaadin-side-nav.js';
183
import '@vaadin/side-nav/vaadin-side-nav-item.js';
184

185
// Menus
186
import '@vaadin/menu-bar/vaadin-menu-bar.js';
187
import '@vaadin/context-menu/vaadin-context-menu.js';
188

189
// Buttons
190
import '@vaadin/button/vaadin-button.js';
191
```
192

193
### Overlay Components
194

195
Modal dialogs, notifications, and overlay UI elements.
196

197
```javascript { .api }
198
// Dialogs
199
import '@vaadin/dialog/vaadin-dialog.js';
200
import '@vaadin/confirm-dialog/vaadin-confirm-dialog.js';
201

202
// Notifications and feedback
203
import '@vaadin/notification/vaadin-notification.js';
204
import '@vaadin/tooltip/vaadin-tooltip.js';
205
import '@vaadin/popover/vaadin-popover.js';
206
```
207

208
### Visual Components
209

210
Icons, avatars, and visual elements.
211

212
```javascript { .api }
213
// Icons
214
import '@vaadin/icon/vaadin-icon.js';
215
import '@vaadin/icons/vaadin-iconset.js';
216

217
// User representation
218
import '@vaadin/avatar/vaadin-avatar.js';
219
import '@vaadin/avatar-group/vaadin-avatar-group.js';
220
```
221

222
### Communication Components
223

224
Components for messaging and user communication interfaces.
225

226
```javascript { .api }
227
// Chat and messaging
228
import '@vaadin/message-input/vaadin-message-input.js';
229
import '@vaadin/message-list/vaadin-message-list.js';
230

231
// Authentication
232
import '@vaadin/login/vaadin-login-form.js';
233
import '@vaadin/login/vaadin-login-overlay.js';
234
```
235

236
### Utility Components
237

238
Scrolling, containers, and utility components.
239

240
```javascript { .api }
241
// Containers
242
import '@vaadin/scroller/vaadin-scroller.js';
243
```
244

245
### Pro Components
246

247
Advanced business components (require commercial license).
248

249
```javascript { .api }
250
// Dashboard and layout
251
import '@vaadin/board/vaadin-board.js';
252
import '@vaadin/dashboard/vaadin-dashboard.js';
253

254
// Data visualization
255
import '@vaadin/charts/vaadin-chart.js';
256

257
// Advanced grid
258
import '@vaadin/grid-pro/vaadin-grid-pro.js';
259

260
// Content editing
261
import '@vaadin/rich-text-editor/vaadin-rich-text-editor.js';
262

263
// Maps
264
import '@vaadin/map/vaadin-map.js';
265

266
// CRUD operations
267
import '@vaadin/crud/vaadin-crud.js';
268

269
// Privacy and compliance
270
import '@vaadin/cookie-consent/vaadin-cookie-consent.js';
271
```
272

273
### Base Packages and Utilities
274

275
Foundation packages for component development and theming.
276

277
```javascript { .api }
278
// Component base classes
279
import '@vaadin/component-base/src/element-mixin.js';
280
import '@vaadin/field-base/src/field-mixin.js';
281
import '@vaadin/field-base/src/input-field-mixin.js';
282

283
// Accessibility utilities
284
import '@vaadin/a11y-base/src/focus-trap-mixin.js';
285
import '@vaadin/a11y-base/src/keyboard-mixin.js';
286

287
// Theming and styling
288
import '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
289
import '@vaadin/vaadin-lumo-styles/color.js';
290
import '@vaadin/vaadin-lumo-styles/typography.js';
291
import '@vaadin/vaadin-lumo-styles/sizing.js';
292
import '@vaadin/vaadin-lumo-styles/spacing.js';
293
import '@vaadin/vaadin-material-styles/color.js';
294
import '@vaadin/vaadin-material-styles/typography.js';
295

296
// Overlay and positioning
297
import '@vaadin/overlay/src/vaadin-overlay.js';
298
import '@vaadin/overlay/src/vaadin-overlay-mixin.js';
299

300
// Rendering utilities
301
import '@vaadin/lit-renderer/lit-renderer.js';
302

303
// Input utilities
304
import '@vaadin/input-container/src/vaadin-input-container.js';
305
import '@vaadin/field-highlighter/src/vaadin-field-highlighter.js';
306

307
// Legacy support
308
import '@vaadin/polymer-legacy-adapter/template-renderer.js';
309
```
310

311
## Development and Build System
312

313
### Package Management
314

315
```javascript { .api }
316
// Root package.json scripts
317
"build:ts": "tsc --build tsconfig.build.json"
318
"lint": "npm-run-all --parallel lint:*"
319
"lint:css": "stylelint packages/**/src/*.js packages/**/theme/**/*-styles.js packages/**/*.css"
320
"lint:js": "eslint --ext .js,.ts *.js scripts packages test"
321
"lint:types": "tsc"
322
"test": "web-test-runner"
323
"analyze": "polymer analyze packages/**/vaadin-*.js > analysis.json"
324
"dist": "rimraf dist && yarn analyze && rollup -c rollup.config.js && cp analysis.json dist"
325
```
326

327
### Testing Infrastructure
328

329
The monorepo includes comprehensive testing infrastructure:
330

331
- **Web Test Runner**: Modern browser testing with Playwright
332
- **Cross-browser Support**: Chrome, Firefox, Safari, Edge
333
- **Visual Regression Testing**: Screenshot comparisons
334
- **Accessibility Testing**: ARIA compliance verification
335
- **Unit Testing**: Component behavior and API testing
336
- **Integration Testing**: Component interaction testing
337

338
### Theming System
339

340
```javascript { .api }
341
// Lumo design system (default)
342
import '@vaadin/vaadin-lumo-styles/color.js';
343
import '@vaadin/vaadin-lumo-styles/typography.js';
344
import '@vaadin/vaadin-lumo-styles/sizing.js';
345
import '@vaadin/vaadin-lumo-styles/spacing.js';
346
import '@vaadin/vaadin-lumo-styles/style.js';
347
import '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
348

349
// Material design system
350
import '@vaadin/vaadin-material-styles/color.js';
351
import '@vaadin/vaadin-material-styles/typography.js';
352
import '@vaadin/vaadin-material-styles/mixins/overlay.js';
353

354
// Custom theming
355
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
356
```
357

358
## Types and Interfaces
359

360
```typescript { .api }
361
// Common component interfaces
362
interface FieldMixin {
363
  value: string | number | boolean;
364
  name: string;
365
  label: string;
366
  placeholder: string;
367
  required: boolean;
368
  readonly: boolean;
369
  disabled: boolean;
370
  invalid: boolean;
371
  errorMessage: string;
372
}
373

374
interface InputFieldMixin extends FieldMixin {
375
  autocomplete: string;
376
  autocapitalize: string;
377
  spellcheck: boolean;
378
}
379

380
// Theme variants
381
type ThemeVariant =
382
  | 'primary' | 'secondary' | 'tertiary'
383
  | 'success' | 'error' | 'warning'
384
  | 'contrast' | 'small' | 'large'
385
  | 'icon' | 'contained' | 'outlined';
386

387
// Layout directions
388
type LayoutDirection = 'row' | 'column';
389

390
// Grid column configuration
391
interface GridColumn {
392
  path?: string;
393
  header?: string;
394
  width?: string;
395
  minWidth?: string;
396
  maxWidth?: string;
397
  flexGrow?: number;
398
  textAlign?: 'start' | 'center' | 'end';
399
  frozen?: boolean;
400
  sortable?: boolean;
401
  resizable?: boolean;
402
}
403

404
// Event types
405
interface CustomElementEvent<T = any> extends CustomEvent<T> {
406
  target: HTMLElement;
407
}
408

409
// Renderer function types
410
type GridColumnRenderer<T> = (
411
  root: HTMLElement,
412
  column: GridColumn,
413
  model: { item: T; index: number }
414
) => void;
415

416
type ComboBoxRenderer<T> = (
417
  root: HTMLElement,
418
  comboBox: HTMLElement,
419
  model: { item: T; index: number }
420
) => void;
421
```
422

423
## Browser Support
424

425
**Desktop Browsers:**
426
- Chrome (evergreen)
427
- Firefox (evergreen)
428
- Safari 15 or newer
429
- Edge (Chromium, evergreen)
430

431
**Mobile Browsers:**
432
- Chrome for Android (4.4 or newer)
433
- Safari for iOS (15 or newer)
434

435
## Installation Examples
436

437
### Individual Component Installation
438

439
```bash
440
# Install specific components
441
npm install @vaadin/grid
442
npm install @vaadin/button
443
npm install @vaadin/text-field
444

445
# Install theme system
446
npm install @vaadin/vaadin-lumo-styles
447
npm install @vaadin/vaadin-material-styles
448

449
# Install pro components (requires license)
450
npm install @vaadin/charts
451
npm install @vaadin/grid-pro
452
```
453

454
### Development Dependencies
455

456
```bash
457
# Development tooling
458
npm install @vaadin/testing-helpers
459
npm install @web/test-runner
460
npm install @web/dev-server
461
```
462

463
## Error Handling
464

465
### Common Component Errors
466

467
**Invalid Property Values**: Components validate input and set `invalid` property when constraints are violated.
468

469
```javascript
470
const textField = document.querySelector('vaadin-text-field');
471
textField.required = true;
472
textField.value = ''; // Will set invalid=true and show error message
473
```
474

475
**Missing Dependencies**: Components require proper imports to register custom elements.
476

477
```javascript
478
// This will fail - custom element not registered
479
document.createElement('vaadin-button');
480

481
// Correct - import registers the element
482
import '@vaadin/button/vaadin-button.js';
483
document.createElement('vaadin-button'); // Works
484
```
485

486
**Theme Loading**: Theme modules must be imported before component usage.
487

488
```javascript
489
// Load theme first
490
import '@vaadin/vaadin-lumo-styles/color.js';
491
import '@vaadin/vaadin-lumo-styles/typography.js';
492

493
// Then import components
494
import '@vaadin/button/vaadin-button.js';
495
```