fix: fix typos in docs (#680)

Author: fifoosid

packages/main/src/Badge.js

@@ -20,7 +20,7 @@ const metadata = {
 
 		/**
 		 * Defines the color scheme of the <code>ui5-badge</code>.
-		 * There are 10 predefined schemes. Each scheme applies different values for the <code>background-color> and <code>border-color</code>.
+		 * There are 10 predefined schemes. Each scheme applies different values for the <code>background-color</code> and <code>border-color</code>.
 		 * To use one you can set a number from <code>"1"</code> to <code>"10"</code>. The <code>colorScheme</code> <code>"1"</code> will be set by default.
 		 * <br><br>
 		 * <b>Note:</b> color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.

packages/main/src/BusyIndicator.js

@@ -31,7 +31,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.BusyIndicator.prototype */ {
 		/**
 		 * Defines the size of the <code>ui5-busyindicator</code>.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b> Available options are "Small", "Medium" and "Large"
 		 *
 		 * @type {BusyIndicatorSize}

packages/main/src/Button.js

@@ -22,7 +22,7 @@ const metadata = {
 
 		/**
 		 * Defines the <code>ui5-button</code> design.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b> Available options are "Default", "Emphasized", "Positive",
 		 * "Negative", and "Transparent".
 		 *

packages/main/src/Card.js

@@ -72,7 +72,7 @@ const metadata = {
 
 		/**
 		 * Defines image source URI or built-in icon font URI.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b>
 		 * SAP-icons font provides numerous options. To find all the available icons, see the
 		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
@@ -113,7 +113,7 @@ const metadata = {
  * <code>heading</code>, <code>subtitle</code>, <code>status</code> and <code>avatar</code>.
  *
  * <h3>Keyboard handling</h3>
- * In case you enable <code>headerInteractive</cdoe> property, you can press the <code>ui5-card</code> header by Space and Enter keys.
+ * In case you enable <code>headerInteractive</code> property, you can press the <code>ui5-card</code> header by Space and Enter keys.
  *
  * <h3>ES6 Module Import</h3>
  *

packages/main/src/CheckBox.js

@@ -143,12 +143,12 @@ const metadata = {
  * <h3 class="comment-api-title">Overview</h3>
  *
  * Allows the user to set a binary value, such as true/false or yes/no for an item.
- * <br/><br/>
+ * <br><br>
  * The <code>ui5-checkbox</code> component consists of a box and a label that describes its purpose.
  * If it's checked, an indicator is displayed inside the box.
  * To check/uncheck the <code>ui5-checkbox</code>, the user has to click or tap the square
  * box or its label.
- * <br/><br/>
+ * <br><br>
  * Clicking or tapping toggles the <code>ui5-checkbox</code> between checked and unchecked state.
  * The <code>ui5-checkbox</code> component only has 2 states - checked and unchecked.
  *

packages/main/src/DatePicker.js

@@ -179,8 +179,10 @@ const metadata = {
  * <h3>Usage</h3>
  *
  * The user can enter a date by:
- * <ul><li>Using the calendar that opens in a popup</li>
- * <li>Typing it in directly in the input field</li></ul>
+ * <ul>
+ * <li>Using the calendar that opens in a popup</li>
+ * <li>Typing it in directly in the input field</li>
+ * </ul>
  * <br><br>
  * When the user makes an entry and chooses the enter key, the calendar shows the corresponding date.
  * When the user directly triggers the calendar display, the actual date is displayed.

packages/main/src/Dialog.js

@@ -36,7 +36,7 @@ const metadata = {
  * The <code>ui5-dialog</code> component is used to temporarily display some information in a
  * size-limited window in front of the regular app screen.
  * It is used to prompt the user for an action or a confirmation.
- * The code>ui5-dialog</code> interrupts the current app processing as it is the only focused UI element and
+ * The <code>ui5-dialog</code> interrupts the current app processing as it is the only focused UI element and
  * the main screen is dimmed/blocked.
  * The dialog combines concepts known from other technologies where the windows have
  * names such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.

packages/main/src/GroupHeaderListItem.js

@@ -17,7 +17,8 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.GroupHeaderListItem.prototype */ {
 		/**
 		 * Defines the text of the <code>ui5-li-groupheader</code>.
-		 * <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 * <br>
+		 * <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 		 *
 		 * @type {Node[]}
 		 * @slot

packages/main/src/Input.js

@@ -44,14 +44,14 @@ const metadata = {
 
 		/**
 		 * Defines the <code>ui5-input</code> suggestion items.
-		 * </br></br>
-		 * Example: </br>
-		 * &lt;ui5-input show-suggestions></br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li></br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li></br>
+		 * <br><br>
+		 * Example: <br>
+		 * &lt;ui5-input show-suggestions><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li><br>
 		 * &lt;/ui5-input>
 		 * <ui5-input show-suggestions><ui5-li>Item #1</ui5-li><ui5-li>Item #2</ui5-li></ui5-input>
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b> The suggestion would be displayed only if the <code>showSuggestions</code>
 		 * property is set to <code>true</code>.
 		 *

packages/main/src/Link.js

@@ -21,7 +21,7 @@ const metadata = {
 		/**
 		 * Defines whether the <code>ui5-link</code> is disabled.
 		 * <br><br>
-		 * <b>Note:</b> When disabled, the <code>ui5-link</code cannot be triggered by the user.
+		 * <b>Note:</b> When disabled, the <code>ui5-link</code> cannot be triggered by the user.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -48,9 +48,11 @@ const metadata = {
 		 * Defines the <code>ui5-link</code> target.
 		 * <br><br>
 		 * <b>Notes:</b>
-		 * <ul><li>Available options are the standard values: <code>_self</code>, <code>_top</code>,
+		 * <ul>
+		 * <li>Available options are the standard values: <code>_self</code>, <code>_top</code>,
 		 * <code>_blank</code>, <code>_parent</code>, and <code>_search</code>.</li>
-		 * <li>This property must only be used when the <code>href</code> property is set.</li></ul>
+		 * <li>This property must only be used when the <code>href</code> property is set.</li>
+		 * </ul>
 		 *
 		 * @type {string}
 		 * @defaultvalue ""

packages/main/src/ListItem.js

@@ -30,7 +30,7 @@ const metadata = {
 		/**
 		 * Defines the visual indication and behavior of the list items.
 		 * Available options are <code>Active</code> (by default) and <code>Inactive</code>.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover,
 		 * while with type <code>Inactive</code> - will not.
 		 *

packages/main/src/MessageStrip.js

@@ -26,7 +26,7 @@ const metadata = {
 
 		/**
 		 * Defines the <code>ui5-messagestrip</code> type.
-		 * <br></br>
+		 * <br><br>
 		 * <b>Note:</b> Available options are <code>Information"</code>, <code>"Positive"</code>, <code>"Negative"</code>,
 		 * and "Warning".
 		 *
@@ -41,10 +41,10 @@ const metadata = {
 
 		/**
 		 * Defines the icon src URI to be displayed as graphical element within the <code>ui5-messagestrip</code>.
-		 * <br></br>
+		 * <br><br>
 		 * <b>Note:</b> If no icon is given, the default icon for the <code>ui5-messagestrip</code> type will be added.
 		 * The SAP-icons font provides numerous options.
-		 * <br></br>
+		 * <br><br>
 		 * Example:
 		 * <br>
 		 * <pre>ui5-messagestrip icon="sap-icon://palette"</pre>

packages/main/src/MultiComboBox.js

@@ -23,11 +23,11 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
 		/**
 		 * Defines the <code>ui5-multi-combobox</code> items.
-		 * </br></br>
-		 * Example: </br>
-		 * &lt;ui5-multi-combobox></br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li></br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li></br>
+		 * <br><br>
+		 * Example: <br>
+		 * &lt;ui5-multi-combobox><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li><br>
 		 * &lt;/ui5-multi-combobox>
 		 * <br> <br>
 		 *
@@ -180,14 +180,14 @@ const metadata = {
  *
  * The <code>ui5-multi-combobox</code> provides advanced keyboard handling.
  *
- * <h4>Picker</h3>
+ * <h2>Picker</h2>
  * If the <code>ui5-multi-combobox</code> is focused,
  * you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys.
  * Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys
  * to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys.
  * <br>
  *
- * <h4>Tokens</h2>
+ * <h2>Tokens</h2>
  * <ul>
  * <li> Left/Right arrow keys - moves the focus selection form the currently focues token to the previous/next one (if available). </li>
  * <li> Delete -  deletes the token and focuses the previous token. </li>

packages/main/src/Option.js

@@ -19,7 +19,7 @@ const metadata = {
 
 		/**
 		 * Defines the <code>icon</code> source URI.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b>
 		 * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
 		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.

packages/main/src/RadioButton.js

@@ -101,11 +101,11 @@ const metadata = {
 		/**
 		 * Defines the name of the <code>ui5-radiobutton</code>.
 		 * Radio buttons with the same <code>name</code> will form a radio button group.
-		 * <br/><b>Note:</b>
+		 * <br><b>Note:</b>
 		 * The selection can be changed with <code>ARROW_UP/DOWN</code> and <code>ARROW_LEFT/RIGHT</code> keys between radios in same group.
-		 * <br/><b>Note:</b>
+		 * <br><b>Note:</b>
 		 * Only one radio button can be selected per group.
-		 * <br/>
+		 * <br>
 		 * <b>Important:</b> For the <code>name</code> property to have effect when submitting forms, you must add the following import to your project:
 		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
 		 *
@@ -125,7 +125,7 @@ const metadata = {
 		 * Defines the form value of the <code>ui5-radiobutton</code>.
 		 * When a form with a radio button group is submitted, the group's value
 		 * will be the value of the currently selected radio button.
-		 * <br/>
+		 * <br>
 		 * <b>Important:</b> For the <code>value</code> property to have effect, you must add the following import to your project:
 		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
 		 *
@@ -178,16 +178,16 @@ const SVGConfig = {
  * <code>select</code> event is fired.
  * When a <code>ui5-radiobutton</code> that is within a group is selected, the one
  * that was previously selected gets automatically deselected. You can group radio buttons by using the <code>name</code> property.
- * <br/>
+ * <br>
  * Note: if <code>ui5-radiobutton</code> is not part of a group, it can be selected once, but can not be deselected back.
  *
  * <h3>Keyboard Handling</h3>
  *
  * Once the <code>ui5-radiobutton</code> is on focus, it might be selected by pressing the Space and Enter keys.
- * <br/>
+ * <br>
  * The Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group,
  * while TAB and SHIFT + TAB can be used to enter or leave the radio button group.
- * <br/>
+ * <br>
  * Note: On entering radio button group, the focus goes to the currently selected radio button.
  *
  * <h3>ES6 Module Import</h3>

packages/main/src/Select.js

@@ -34,10 +34,10 @@ const metadata = {
 
 		/**
 		 * Defines the <code>ui5-select</code> options.
-		 * <br/><br/>
+		 * <br><br>
 		 * <b>Note:</b> Only one selected option is allowed.
 		 * If more than one option is defined as selected, the last one would be considered as the selected one.
-		 * <br/><br/>
+		 * <br><br>
 		 * <b>Note:</b> Use the <code>ui5-option</code> component to define the desired options.
 		 * @type {Option[]}
 		 * @slot
@@ -53,7 +53,7 @@ const metadata = {
 
 		/**
 		 * Defines whether <code>ui5-select</code> is in disabled state.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b> A disabled <code>ui5-select</code> is noninteractive.
 		 *
 		 * @type {boolean}

packages/main/src/ShellBar.js

@@ -135,7 +135,7 @@ const metadata = {
 	slots: /** @lends  sap.ui.webcomponents.main.ShellBar.prototype */ {
 		/**
 		 * Defines the <code>ui5-shellbar</code> aditional items.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b>
 		 * You can use the &nbsp;&lt;ui5-shellbar-item>&lt;/ui5-shellbar-item>.
 		 *
@@ -150,7 +150,7 @@ const metadata = {
 
 		/**
 		 * Defines the items displayed in menu after a click on the primary title.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b>
 		 * You can use the &nbsp;&lt;ui5-li>&lt;/ui5-li> and its ancestors.
 		 *

packages/main/src/StandardListItem.js

@@ -24,7 +24,7 @@ const metadata = {
 
 		/**
 		 * Defines the <code>icon</code> source URI.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b>
 		 * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
 		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
@@ -38,7 +38,7 @@ const metadata = {
 
 		/**
 		 * Defines whether the <code>icon</code> should be displayed in the beginning of the list item or in the end.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b> If <code>image</code> is set, the <code>icon</code> would be displayed after the <code>image</code>.
 		 *
 		 * @type {boolean}
@@ -51,7 +51,7 @@ const metadata = {
 
 		/**
 		 * Defines the <code>image</code> source URI.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b> The <code>image</code> would be displayed in the beginning of the list item.
 		 *
 		 * @type {string}
@@ -74,7 +74,7 @@ const metadata = {
 		/**
 		 * Defines the state of the <code>info</code>.
 		 * <br>
-		 * Available options are: <code>"None"</code< (by default), <code>"Success"</code>, <code>"Warning"</code> and <code>"Erorr"</code>.
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code> and <code>"Erorr"</code>.
 		 * @type {string}
 		 * @public
 		 * @since 0.13.0

packages/main/src/Switch.js

@@ -107,12 +107,12 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  * The <code>ui5-switch</code> component is used for changing between binary states.
- * </br>
+ * <br>
  * The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> properties,
  * but texts longer than 3 letters will be cuttted off.
- * </br>
+ * <br>
  * However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (&lt;ui5-switch style="width: 200px">), and set widths, depending on the texts they would use.
- * </br>
+ * <br>
  * Note: the component would not automatically stretch to fit the whole text width.
  *
  * <h3>Keyboard Handling</h3>

packages/main/src/Tab.js

@@ -75,7 +75,7 @@ const metadata = {
 		 * <li>the tab selection line</li>
 		 * </ul>
 		 * <br>
-		 * Available semantic colors are: <code>"Default"</code>, <code>"Neutral", <code>"Positive"</code>, <code>"Critical"</code> and <code>"Negative"</code>.
+		 * Available semantic colors are: <code>"Default"</code>, <code>"Neutral"</code>, <code>"Positive"</code>, <code>"Critical"</code> and <code>"Negative"</code>.
 		 * <br><br>
 		 * <b>Note:</b> The color value depends on the current theme.
 		 * @type {string}

packages/main/src/Table.js

@@ -80,13 +80,15 @@ const metadata = {
 		 * <li>Internet Explorer</li>
 		 * <li>Microsoft Edge lower than version 41 (EdgeHTML 16)</li>
 		 * <li>Mozilla Firefox lower than version 59</li>
-		 * </ul></li>
+		 * </ul>
+		 * </li>
 		 * <li>Scrolling behavior:
 		 * <ul>
 		 * <li>If the Web Component is placed in layout containers that have the <code>overflow: hidden</code>
 		 * or <code>overflow: auto</code> style definition, this can
 		 * prevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.</li>
-		 * </ul></li>
+		 * </ul>
+		 * </li>
 		 * </ul>
 		 *
 		 * @type {boolean}

packages/main/src/TableColumn.js

@@ -27,10 +27,10 @@ const metadata = {
 
 		/**
 		 * Defines the minimum screen width required to display this column. By default it is always displayed.
-		 * </br></br>
+		 * <br><br>
 		 * The responsive behavior of the <code>ui5-table</code> is determined by this property. As an example, by setting
 		 * <code>minWidth</code> property to <code>40em</code> shows this column on tablet (and desktop) but hides it on mobile.
-		 * </br>
+		 * <br>
 		 * For further responsive design options, see <code>demandPopin</code> property.
 		 *
 		 * @type {number}
@@ -55,7 +55,7 @@ const metadata = {
 		/**
 		 * According to your <code>minWidth</code> settings, the <code>ui5-table-column</code> can be hidden
 		 * in different screen sizes.
-		 * </br></br>
+		 * <br><br>
 		 * Setting this property to <code>true</code>, shows this column as pop-in instead of hiding it.
 		 *
 		 * @type {boolean}