docs: improve code snippets in JSDoc comments, add language tags (#9697)

web-padawan · web-flow · commit f889883533c7 · 2025-07-11T15:50:17.000+03:00
diff --git a/packages/accordion/src/vaadin-accordion.d.ts b/packages/accordion/src/vaadin-accordion.d.ts
@@ -38,7 +38,7 @@ export type AccordionEventMap = AccordionCustomEventMap & HTMLElementEventMap;
  * Only one panel can be opened at a time, opening a new one forces
  * previous panel to close and hide its content.
  *
- * ```
+ * ```html
  * <vaadin-accordion>
  *   <vaadin-accordion-panel>
  *     <vaadin-accordion-heading slot="summary">Panel 1</vaadin-accordion-heading>
diff --git a/packages/accordion/src/vaadin-accordion.js b/packages/accordion/src/vaadin-accordion.js
@@ -23,7 +23,7 @@ import { AccordionMixin } from './vaadin-accordion-mixin.js';
  * Only one panel can be opened at a time, opening a new one forces
  * previous panel to close and hide its content.
  *
- * ```
+ * ```html
  * <vaadin-accordion>
  *   <vaadin-accordion-panel>
  *     <vaadin-accordion-heading slot="summary">Panel 1</vaadin-accordion-heading>
diff --git a/packages/app-layout/src/vaadin-app-layout.d.ts b/packages/app-layout/src/vaadin-app-layout.d.ts
@@ -37,7 +37,7 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
 /**
  * `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.
  *
- * ```
+ * ```html
  * <vaadin-app-layout primary-section="navbar|drawer">
  *  <vaadin-drawer-toggle slot="navbar [touch-optimized]"></vaadin-drawer-toggle>
  *  <h3 slot="navbar [touch-optimized]">Company Name</h3>
diff --git a/packages/app-layout/src/vaadin-app-layout.js b/packages/app-layout/src/vaadin-app-layout.js
@@ -17,7 +17,7 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
 /**
  * `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.
  *
- * ```
+ * ```html
  * <vaadin-app-layout primary-section="navbar|drawer">
  *  <vaadin-drawer-toggle slot="navbar [touch-optimized]"></vaadin-drawer-toggle>
  *  <h3 slot="navbar [touch-optimized]">Company Name</h3>
diff --git a/packages/app-layout/src/vaadin-drawer-toggle.d.ts b/packages/app-layout/src/vaadin-drawer-toggle.d.ts
@@ -10,7 +10,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 /**
  * The Drawer Toggle component controls the drawer in App Layout component.
  *
- * ```
+ * ```html
  * <vaadin-app-layout>
  *   <vaadin-drawer-toggle slot="navbar">Toggle drawer</vaadin-drawer-toggle>
  * </vaadin-app-layout>
diff --git a/packages/app-layout/src/vaadin-drawer-toggle.js b/packages/app-layout/src/vaadin-drawer-toggle.js
@@ -17,7 +17,7 @@ import { drawerToggle } from './styles/vaadin-drawer-toggle-core-styles.js';
 /**
  * The Drawer Toggle component controls the drawer in App Layout component.
  *
- * ```
+ * ```html
  * <vaadin-app-layout>
  *   <vaadin-drawer-toggle slot="navbar">Toggle drawer</vaadin-drawer-toggle>
  * </vaadin-app-layout>
diff --git a/packages/avatar-group/src/vaadin-avatar-group.d.ts b/packages/avatar-group/src/vaadin-avatar-group.d.ts
@@ -15,13 +15,13 @@ export { AvatarGroupI18n, AvatarGroupItem, AvatarI18n };
  *
  * To create the avatar group, first add the component to the page:
  *
- * ```
+ * ```html
  * <vaadin-avatar-group></vaadin-avatar-group>
  * ```
  *
  * And then use [`items`](#/elements/vaadin-avatar-group#property-items) property to initialize the structure:
  *
- * ```
+ * ```js
  * document.querySelector('vaadin-avatar-group').items = [
  *   {name: 'John Doe'},
  *   {abbr: 'AB'}
diff --git a/packages/avatar-group/src/vaadin-avatar-group.js b/packages/avatar-group/src/vaadin-avatar-group.js
@@ -22,13 +22,13 @@ import { AvatarGroupMixin } from './vaadin-avatar-group-mixin.js';
  *
  * To create the avatar group, first add the component to the page:
  *
- * ```
+ * ```html
  * <vaadin-avatar-group></vaadin-avatar-group>
  * ```
  *
  * And then use [`items`](#/elements/vaadin-avatar-group#property-items) property to initialize the structure:
  *
- * ```
+ * ```js
  * document.querySelector('vaadin-avatar-group').items = [
  *   {name: 'John Doe'},
  *   {abbr: 'AB'}
diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog.d.ts b/packages/confirm-dialog/src/vaadin-confirm-dialog.d.ts
@@ -12,7 +12,7 @@ export * from './vaadin-confirm-dialog-mixin.js';
 /**
  * `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
  *
- * ```
+ * ```html
  * <vaadin-confirm-dialog cancel-button-visible>
  *   There are unsaved changes. Do you really want to leave?
  * </vaadin-confirm-dialog>
diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog.js b/packages/confirm-dialog/src/vaadin-confirm-dialog.js
@@ -16,7 +16,7 @@ import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
 /**
  * `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
  *
- * ```
+ * ```html
  * <vaadin-confirm-dialog cancel-button-visible>
  *   There are unsaved changes. Do you really want to leave?
  * </vaadin-confirm-dialog>
diff --git a/packages/cookie-consent/src/vaadin-cookie-consent.d.ts b/packages/cookie-consent/src/vaadin-cookie-consent.d.ts
@@ -19,7 +19,7 @@ import { CookieConsentMixin } from './vaadin-cookie-consent-mixin.js';
  * predefined text, a link to https://cookiesandyou.com/ describing cookies and a consent button.
  *
  * The texts, link and position can be configured using attributes/properties, e.g.
- * ```
+ * ```html
  * <vaadin-cookie-consent learn-more-link="https://mysite.com/cookies.html"></vaadin-cookie-consent>
  * ```
  *
diff --git a/packages/cookie-consent/src/vaadin-cookie-consent.js b/packages/cookie-consent/src/vaadin-cookie-consent.js
@@ -22,7 +22,7 @@ import { CookieConsentMixin } from './vaadin-cookie-consent-mixin.js';
  * predefined text, a link to https://cookiesandyou.com/ describing cookies and a consent button.
  *
  * The texts, link and position can be configured using attributes/properties, e.g.
- * ```
+ * ```html
  * <vaadin-cookie-consent learn-more-link="https://mysite.com/cookies.html"></vaadin-cookie-consent>
  * ```
  *
diff --git a/packages/custom-field/src/vaadin-custom-field.d.ts b/packages/custom-field/src/vaadin-custom-field.d.ts
@@ -46,7 +46,7 @@ export interface CustomFieldEventMap extends HTMLElementEventMap, CustomFieldCus
 /**
  * `<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.
  *
- * ```
+ * ```html
  * <vaadin-custom-field label="Appointment time">
  *   <vaadin-date-picker></vaadin-date-picker>
  *   <vaadin-time-picker></vaadin-time-picker>
diff --git a/packages/custom-field/src/vaadin-custom-field.js b/packages/custom-field/src/vaadin-custom-field.js
@@ -15,7 +15,7 @@ import { CustomFieldMixin } from './vaadin-custom-field-mixin.js';
 /**
  * `<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.
  *
- * ```
+ * ```html
  * <vaadin-custom-field label="Appointment time">
  *   <vaadin-date-picker></vaadin-date-picker>
  *   <vaadin-time-picker></vaadin-time-picker>
diff --git a/packages/details/src/vaadin-details.d.ts b/packages/details/src/vaadin-details.d.ts
@@ -22,7 +22,7 @@ export type DetailsEventMap = DetailsCustomEventMap & HTMLElementEventMap;
  * `<vaadin-details>` is a Web Component which the creates an
  * expandable panel similar to `<details>` HTML element.
  *
- * ```
+ * ```html
  * <vaadin-details>
  *   <vaadin-details-summary slot="summary">Expandable Details</vaadin-details-summary>
  *   <div>
diff --git a/packages/details/src/vaadin-details.js b/packages/details/src/vaadin-details.js
@@ -16,7 +16,7 @@ import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
  * `<vaadin-details>` is a Web Component which the creates an
  * expandable panel similar to `<details>` HTML element.
  *
- * ```
+ * ```html
  * <vaadin-details>
  *   <vaadin-details-summary slot="summary">Expandable Details</vaadin-details-summary>
  *   <div>
diff --git a/packages/grid-pro/src/vaadin-grid-pro.d.ts b/packages/grid-pro/src/vaadin-grid-pro.d.ts
@@ -49,7 +49,7 @@ export interface GridProEventMap<TItem>
  *
  * See [`<vaadin-grid>`](#/elements/vaadin-grid) documentation for details.
  *
- * ```
+ * ```html
  * <vaadin-grid-pro></vaadin-grid-pro>
  * ```
  *
diff --git a/packages/grid-pro/src/vaadin-grid-pro.js b/packages/grid-pro/src/vaadin-grid-pro.js
@@ -19,7 +19,7 @@ import { InlineEditingMixin } from './vaadin-grid-pro-inline-editing-mixin.js';
  *
  * See [`<vaadin-grid>`](#/elements/vaadin-grid) documentation for details.
  *
- * ```
+ * ```html
  * <vaadin-grid-pro></vaadin-grid-pro>
  * ```
  *
diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout.d.ts b/packages/horizontal-layout/src/vaadin-horizontal-layout.d.ts
@@ -10,7 +10,7 @@ import { HorizontalLayoutMixin } from './vaadin-horizontal-layout-mixin.js';
 /**
  * `<vaadin-horizontal-layout>` provides a simple way to horizontally align your HTML elements.
  *
- * ```
+ * ```html
  * <vaadin-horizontal-layout>
  *   <div>Item 1</div>
  *   <div>Item 2</div>
diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout.js b/packages/horizontal-layout/src/vaadin-horizontal-layout.js
@@ -15,7 +15,7 @@ import { HorizontalLayoutMixin } from './vaadin-horizontal-layout-mixin.js';
 /**
  * `<vaadin-horizontal-layout>` provides a simple way to horizontally align your HTML elements.
  *
- * ```
+ * ```html
  * <vaadin-horizontal-layout>
  *   <div>Item 1</div>
  *   <div>Item 2</div>
diff --git a/packages/item/src/vaadin-item.d.ts b/packages/item/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
diff --git a/packages/item/src/vaadin-item.js b/packages/item/src/vaadin-item.js
@@ -15,10 +15,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
diff --git a/packages/list-box/src/vaadin-list-box.d.ts b/packages/list-box/src/vaadin-list-box.d.ts
@@ -35,13 +35,13 @@ export interface ListBoxEventMap extends HTMLElementEventMap, ListBoxCustomEvent
 /**
  * `<vaadin-list-box>` is a Web Component for creating menus.
  *
- * ```
- *   <vaadin-list-box selected="2">
- *     <vaadin-item>Item 1</vaadin-item>
- *     <vaadin-item>Item 2</vaadin-item>
- *     <vaadin-item>Item 3</vaadin-item>
- *     <vaadin-item>Item 4</vaadin-item>
- *   </vaadin-list-box>
+ * ```html
+ * <vaadin-list-box selected="2">
+ *   <vaadin-item>Item 1</vaadin-item>
+ *   <vaadin-item>Item 2</vaadin-item>
+ *   <vaadin-item>Item 3</vaadin-item>
+ *   <vaadin-item>Item 4</vaadin-item>
+ * </vaadin-list-box>
  * ```
  *
  * ### Styling
diff --git a/packages/list-box/src/vaadin-list-box.js b/packages/list-box/src/vaadin-list-box.js
@@ -16,13 +16,13 @@ import { MultiSelectListMixin } from './vaadin-multi-select-list-mixin.js';
 /**
  * `<vaadin-list-box>` is a Web Component for creating menus.
  *
- * ```
- *   <vaadin-list-box selected="2">
- *     <vaadin-item>Item 1</vaadin-item>
- *     <vaadin-item>Item 2</vaadin-item>
- *     <vaadin-item>Item 3</vaadin-item>
- *     <vaadin-item>Item 4</vaadin-item>
- *   </vaadin-list-box>
+ * ```html
+ * <vaadin-list-box selected="2">
+ *   <vaadin-item>Item 1</vaadin-item>
+ *   <vaadin-item>Item 2</vaadin-item>
+ *   <vaadin-item>Item 3</vaadin-item>
+ *   <vaadin-item>Item 4</vaadin-item>
+ * </vaadin-list-box>
  * ```
  *
  * ### Styling
diff --git a/packages/login/src/vaadin-login-form.d.ts b/packages/login/src/vaadin-login-form.d.ts
@@ -39,7 +39,7 @@ export interface LoginFormEventMap extends HTMLElementEventMap, LoginFormCustomE
  * `<vaadin-login-form>` is a Web Component providing an easy way to require users
  * to log in into an application. Note that component has no shadowRoot.
  *
- * ```
+ * ```html
  * <vaadin-login-form></vaadin-login-form>
  * ```
  *
diff --git a/packages/login/src/vaadin-login-form.js b/packages/login/src/vaadin-login-form.js
@@ -19,7 +19,7 @@ import { LoginFormMixin } from './vaadin-login-form-mixin.js';
  * `<vaadin-login-form>` is a Web Component providing an easy way to require users
  * to log in into an application. Note that component has no shadowRoot.
  *
- * ```
+ * ```html
  * <vaadin-login-form></vaadin-login-form>
  * ```
  *
diff --git a/packages/login/src/vaadin-login-overlay.d.ts b/packages/login/src/vaadin-login-overlay.d.ts
@@ -52,7 +52,7 @@ export interface LoginOverlayEventMap extends HTMLElementEventMap, LoginOverlayC
  * having an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows
  * password managers to work with login form.
  *
- * ```
+ * ```html
  * <vaadin-login-overlay opened></vaadin-login-overlay>
  * ```
  *
diff --git a/packages/login/src/vaadin-login-overlay.js b/packages/login/src/vaadin-login-overlay.js
@@ -18,7 +18,7 @@ import { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
  * having an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows
  * password managers to work with login form.
  *
- * ```
+ * ```html
  * <vaadin-login-overlay opened></vaadin-login-overlay>
  * ```
  *
diff --git a/packages/menu-bar/src/vaadin-menu-bar.d.ts b/packages/menu-bar/src/vaadin-menu-bar.d.ts
@@ -30,13 +30,13 @@ export interface MenuBarEventMap<TItem extends MenuBarItem = MenuBarItem>
  *
  * To create the menu bar, first add the component to the page:
  *
- * ```
+ * ```html
  * <vaadin-menu-bar></vaadin-menu-bar>
  * ```
  *
  * And then use [`items`](#/elements/vaadin-menu-bar#property-items) property to initialize the structure:
  *
- * ```
+ * ```js
  * document.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];
  * ```
  *
diff --git a/packages/menu-bar/src/vaadin-menu-bar.js b/packages/menu-bar/src/vaadin-menu-bar.js
@@ -22,13 +22,13 @@ import { MenuBarMixin } from './vaadin-menu-bar-mixin.js';
  *
  * To create the menu bar, first add the component to the page:
  *
- * ```
+ * ```html
  * <vaadin-menu-bar></vaadin-menu-bar>
  * ```
  *
  * And then use [`items`](#/elements/vaadin-menu-bar#property-items) property to initialize the structure:
  *
- * ```
+ * ```js
  * document.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];
  * ```
  *
diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor.d.ts b/packages/rich-text-editor/src/vaadin-rich-text-editor.d.ts
@@ -29,7 +29,7 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * It provides a set of toolbar controls to apply formatting on the content,
  * which is stored and can be accessed as HTML5 or JSON string.
  *
- * ```
+ * ```html
  * <vaadin-rich-text-editor></vaadin-rich-text-editor>
  * ```
  *
diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor.js b/packages/rich-text-editor/src/vaadin-rich-text-editor.js
@@ -27,7 +27,7 @@ import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
  * It provides a set of toolbar controls to apply formatting on the content,
  * which is stored and can be accessed as HTML5 or JSON string.
  *
- * ```
+ * ```html
  * <vaadin-rich-text-editor></vaadin-rich-text-editor>
  * ```
  *
diff --git a/packages/scroller/src/vaadin-scroller.d.ts b/packages/scroller/src/vaadin-scroller.d.ts
@@ -10,7 +10,7 @@ import { ScrollerMixin } from './vaadin-scroller-mixin.js';
 /**
  * `<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.
  *
- * ```
+ * ```html
  * <vaadin-scroller>
  *   <div>Content</div>
  * </vaadin-scroller>
diff --git a/packages/scroller/src/vaadin-scroller.js b/packages/scroller/src/vaadin-scroller.js
@@ -16,7 +16,7 @@ import { ScrollerMixin } from './vaadin-scroller-mixin.js';
 /**
  * `<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.
  *
- * ```
+ * ```html
  * <vaadin-scroller>
  *   <div>Content</div>
  * </vaadin-scroller>
diff --git a/packages/tabs/src/vaadin-tab.d.ts b/packages/tabs/src/vaadin-tab.d.ts
@@ -10,10 +10,8 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 /**
  * `<vaadin-tab>` is a Web Component providing an accessible and customizable tab.
  *
- * ```
- *   <vaadin-tab>
- *     Tab 1
- *   </vaadin-tab>
+ * ```html
+ * <vaadin-tab>Tab 1</vaadin-tab>
  * ```
  *
  * The following state attributes are available for styling:
diff --git a/packages/tabs/src/vaadin-tab.js b/packages/tabs/src/vaadin-tab.js
@@ -16,10 +16,8 @@ import { tabStyles } from './styles/vaadin-tab-core-styles.js';
 /**
  * `<vaadin-tab>` is a Web Component providing an accessible and customizable tab.
  *
- * ```
- *   <vaadin-tab>
- *     Tab 1
- *   </vaadin-tab>
+ * ```html
+ * <vaadin-tab>Tab 1</vaadin-tab>
  * ```
  *
  * The following state attributes are available for styling:
diff --git a/packages/tabs/src/vaadin-tabs.d.ts b/packages/tabs/src/vaadin-tabs.d.ts
diff --git a/packages/tabs/src/vaadin-tabs.js b/packages/tabs/src/vaadin-tabs.js
diff --git a/packages/tabsheet/src/vaadin-tabsheet.d.ts b/packages/tabsheet/src/vaadin-tabsheet.d.ts
diff --git a/packages/tabsheet/src/vaadin-tabsheet.js b/packages/tabsheet/src/vaadin-tabsheet.js
diff --git a/packages/upload/src/vaadin-upload.d.ts b/packages/upload/src/vaadin-upload.d.ts
diff --git a/packages/upload/src/vaadin-upload.js b/packages/upload/src/vaadin-upload.js
diff --git a/packages/vertical-layout/src/vaadin-vertical-layout.d.ts b/packages/vertical-layout/src/vaadin-vertical-layout.d.ts
diff --git a/packages/vertical-layout/src/vaadin-vertical-layout.js b/packages/vertical-layout/src/vaadin-vertical-layout.js

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export type AccordionEventMap = AccordionCustomEventMap & HTMLElementEventMap;`
`38`	`38`	`* Only one panel can be opened at a time, opening a new one forces`
`39`	`39`	`* previous panel to close and hide its content.`
`40`	`40`	`*`
`41`		- * ```
	`41`	+ * ```html
`42`	`42`	`* <vaadin-accordion>`
`43`	`43`	`* <vaadin-accordion-panel>`
`44`	`44`	`* <vaadin-accordion-heading slot="summary">Panel 1</vaadin-accordion-heading>`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ import { AccordionMixin } from './vaadin-accordion-mixin.js';`
`23`	`23`	`* Only one panel can be opened at a time, opening a new one forces`
`24`	`24`	`* previous panel to close and hide its content.`
`25`	`25`	`*`
`26`		- * ```
	`26`	+ * ```html
`27`	`27`	`* <vaadin-accordion>`
`28`	`28`	`* <vaadin-accordion-panel>`
`29`	`29`	`* <vaadin-accordion-heading slot="summary">Panel 1</vaadin-accordion-heading>`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;`
`37`	`37`	`/**`
`38`	`38`	* `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.
`39`	`39`	`*`
`40`		- * ```
	`40`	+ * ```html
`41`	`41`	`* <vaadin-app-layout primary-section="navbar\|drawer">`
`42`	`42`	`* <vaadin-drawer-toggle slot="navbar [touch-optimized]"></vaadin-drawer-toggle>`
`43`	`43`	`* <h3 slot="navbar [touch-optimized]">Company Name</h3>`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';`
`17`	`17`	`/**`
`18`	`18`	* `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.
`19`	`19`	`*`
`20`		- * ```
	`20`	+ * ```html
`21`	`21`	`* <vaadin-app-layout primary-section="navbar\|drawer">`
`22`	`22`	`* <vaadin-drawer-toggle slot="navbar [touch-optimized]"></vaadin-drawer-toggle>`
`23`	`23`	`* <h3 slot="navbar [touch-optimized]">Company Name</h3>`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix`
`10`	`10`	`/**`
`11`	`11`	`* The Drawer Toggle component controls the drawer in App Layout component.`
`12`	`12`	`*`
`13`		- * ```
	`13`	+ * ```html
`14`	`14`	`* <vaadin-app-layout>`
`15`	`15`	`* <vaadin-drawer-toggle slot="navbar">Toggle drawer</vaadin-drawer-toggle>`
`16`	`16`	`* </vaadin-app-layout>`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ import { drawerToggle } from './styles/vaadin-drawer-toggle-core-styles.js';`
`17`	`17`	`/**`
`18`	`18`	`* The Drawer Toggle component controls the drawer in App Layout component.`
`19`	`19`	`*`
`20`		- * ```
	`20`	+ * ```html
`21`	`21`	`* <vaadin-app-layout>`
`22`	`22`	`* <vaadin-drawer-toggle slot="navbar">Toggle drawer</vaadin-drawer-toggle>`
`23`	`23`	`* </vaadin-app-layout>`
Original file line number	Diff line number	Diff line change
`@@ -15,13 +15,13 @@ export { AvatarGroupI18n, AvatarGroupItem, AvatarI18n };`
`15`	`15`	`*`
`16`	`16`	`* To create the avatar group, first add the component to the page:`
`17`	`17`	`*`
`18`		- * ```
	`18`	+ * ```html
`19`	`19`	`* <vaadin-avatar-group></vaadin-avatar-group>`
`20`	`20`	* ```
`21`	`21`	`*`
`22`	`22`	* And then use [`items`](#/elements/vaadin-avatar-group#property-items) property to initialize the structure:
`23`	`23`	`*`
`24`		- * ```
	`24`	+ * ```js
`25`	`25`	`* document.querySelector('vaadin-avatar-group').items = [`
`26`	`26`	`* {name: 'John Doe'},`
`27`	`27`	`* {abbr: 'AB'}`
Original file line number	Diff line number	Diff line change
`@@ -22,13 +22,13 @@ import { AvatarGroupMixin } from './vaadin-avatar-group-mixin.js';`
`22`	`22`	`*`
`23`	`23`	`* To create the avatar group, first add the component to the page:`
`24`	`24`	`*`
`25`		- * ```
	`25`	+ * ```html
`26`	`26`	`* <vaadin-avatar-group></vaadin-avatar-group>`
`27`	`27`	* ```
`28`	`28`	`*`
`29`	`29`	* And then use [`items`](#/elements/vaadin-avatar-group#property-items) property to initialize the structure:
`30`	`30`	`*`
`31`		- * ```
	`31`	+ * ```js
`32`	`32`	`* document.querySelector('vaadin-avatar-group').items = [`
`33`	`33`	`* {name: 'John Doe'},`
`34`	`34`	`* {abbr: 'AB'}`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export * from './vaadin-confirm-dialog-mixin.js';`
`12`	`12`	`/**`
`13`	`13`	* `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
`14`	`14`	`*`
`15`		- * ```
	`15`	+ * ```html
`16`	`16`	`* <vaadin-confirm-dialog cancel-button-visible>`
`17`	`17`	`* There are unsaved changes. Do you really want to leave?`
`18`	`18`	`* </vaadin-confirm-dialog>`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';`
`16`	`16`	`/**`
`17`	`17`	* `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
`18`	`18`	`*`
`19`		- * ```
	`19`	+ * ```html
`20`	`20`	`* <vaadin-confirm-dialog cancel-button-visible>`
`21`	`21`	`* There are unsaved changes. Do you really want to leave?`
`22`	`22`	`* </vaadin-confirm-dialog>`