refactor(ui5-li, ui5-li-custom): rename classes

docs/1-getting-started/02-importing-components.md

@@ -33,7 +33,7 @@ For example:
 import "@ui5/webcomponents/dist/Button.js"; // ui5-button
 import "@ui5/webcomponents/dist/Input.js"; // ui5-input
 import "@ui5/webcomponents/dist/List.js"; // ui5-list
-import "@ui5/webcomponents/dist/StandardListItem.js"; // ui5-li
+import "@ui5/webcomponents/dist/ListItemStandard.js"; // ui5-li
 
 import "@ui5/webcomponents-fiori/dist/Wizard.js"; // ui5-wizard
 ```
@@ -53,4 +53,4 @@ For example:
 ```
 
 **Note:** For most components the name of the module (f.e. `Button.js`, `Icon.js`) coincides with the name of the tag (`ui5-button`, `ui5-icon`), 
-whereas for others this is not the case (f.e. `StandardListItem.js` and `ui5-li`). Always consult the documentation when in doubt.
+whereas for others this is not the case (f.e. `ListItemStandard.js` and `ui5-li`). Always consult the documentation when in doubt.

docs/2-advanced/07-accessibility.md

@@ -176,7 +176,7 @@ The `accessibilityAttributes` property is currently supported in:
 * [Link](https://sap.github.io/ui5-webcomponents/nightly/components/Link/)
 * [ToggleButton](https://sap.github.io/ui5-webcomponents/nightly/components/ToggleButton/)
 * [Link](https://sap.github.io/ui5-webcomponents/nightly/components/Link/)
-* List Items (for example [StandardListItem](https://sap.github.io/ui5-webcomponents/nightly/components/StandardListItem/))
+* List Items (for example [ListItemStandard](https://sap.github.io/ui5-webcomponents/nightly/components/ListItemStandard/))
 
 `accessibilityAttributes` is also supported for composite components, where the application can enrich the accessibility of elements inside the component. For a more detailed information check the documentation of the property in:
 * [FlexibleColumnLayout](https://sap.github.io/ui5-webcomponents/nightly/components/fiori/FlexibleColumnLayout/)

docs/Migrating to version 2.0 guide.md

@@ -477,6 +477,21 @@ Now you have to use it like:
 ```
 
 ### ui5-li
+| Changed item | Old     | New     | 
+|--------------|---------|---------|
+| class     | StandardListItem | ListItemStandard | 
+
+If you previously imported the class as follows:
+```ts
+import StandardListItem from "@ui5/webcomponents/StandardListItem.js";
+```
+
+now you must change the import to:
+
+```ts
+import ListItemStandard from "@ui5/webcomponents/ListItemStandard.js";
+```
+
 
 | Changed item | Old     | New     | 
 |--------------|---------|---------|
@@ -512,6 +527,24 @@ Now you have to use it like:
 <ui5-li additional-text-state="Success"></ui5-li>
 ```
 
+
+### ui5-li-custom
+
+| Changed item | Old     | New     | 
+|--------------|---------|---------|
+| class     | CustomListItem | ListItemCustom | 
+
+If you previously imported the class as follows:
+```ts
+import CustomListItem from "@ui5/webcomponents/CustomListItem.js";
+```
+
+now you must change the import to:
+
+```ts
+import ListItemCustom from "@ui5/webcomponents/ListItemCustom.js";
+```
+
 ### ui5-list
 
 | Changed item | Old       | New                                                                  | 

packages/fiori/src/ShellBar.ts

@@ -9,7 +9,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import type AriaRole from "@ui5/webcomponents-base/dist/types/AriaRole.js";
 import AriaHasPopup from "@ui5/webcomponents-base/dist/types/AriaHasPopup.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import type { ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -155,7 +155,7 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
 		Icon,
 		List,
 		Popover,
-		StandardListItem,
+		ListItemStandard,
 	],
 })
 /**

packages/fiori/src/ViewSettingsDialog.ts

@@ -14,7 +14,7 @@ import Label from "@ui5/webcomponents/dist/Label.js";
 import ListItemGroup from "@ui5/webcomponents/dist/ListItemGroup.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import type { ListItemClickEventDetail } from "@ui5/webcomponents/dist/List.js";
-import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
 import Title from "@ui5/webcomponents/dist/Title.js";
 import SegmentedButton from "@ui5/webcomponents/dist/SegmentedButton.js";
 import SegmentedButtonItem from "@ui5/webcomponents/dist/SegmentedButtonItem.js";
@@ -113,7 +113,7 @@ type VSDInternalSettings = {
 		Dialog,
 		Label,
 		List,
-		StandardListItem,
+		ListItemStandard,
 		ListItemGroup,
 		SegmentedButton,
 		SegmentedButtonItem,

packages/main/README.md

@@ -43,8 +43,8 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 | Label                    | `ui5-label`                 | `import "@ui5/webcomponents/dist/Label.js";`               |
 | Link                     | `ui5-link`                  | `import "@ui5/webcomponents/dist/Link.js";`                |
 | List                     | `ui5-list`                  | `import "@ui5/webcomponents/dist/List.js";`                |
-| List - Standard Item     | `ui5-li`                    | `import "@ui5/webcomponents/dist/StandardListItem.js";`    |
-| List - Custom Item       | `ui5-li-custom`             | `import "@ui5/webcomponents/dist/CustomListItem.js";`      |
+| List - Standard Item     | `ui5-li`                    | `import "@ui5/webcomponents/dist/ListItemStandard.js";`    |
+| List - Custom Item       | `ui5-li-custom`             | `import "@ui5/webcomponents/dist/ListItemCustom.js";`      |
 | List - Group Item        | `ui5-li-group`              | `import "@ui5/webcomponents/dist/ListItemGroup.js";`       |
 | Menu                     | `ui5-menu        `          | `import "@ui5/webcomponents/dist/Menu.js";`                |
 | Message Strip            | `ui5-message-strip`         | `import "@ui5/webcomponents/dist/MessageStrip.js";`        |

packages/main/src/Breadcrumbs.ts

@@ -33,7 +33,7 @@ import type { LinkClickEventDetail } from "./Link.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
 import type { ListSelectionChangeEventDetail } from "./List.js";
-import StandardListItem from "./StandardListItem.js";
+import ListItemStandard from "./ListItemStandard.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
@@ -93,7 +93,7 @@ type BreadcrumbsItemClickEventDetail = {
 		Link,
 		ResponsivePopover,
 		List,
-		StandardListItem,
+		ListItemStandard,
 		Icon,
 		Button,
 	],

packages/main/src/ComboBox.ts

@@ -76,7 +76,7 @@ import List from "./List.js";
 import type { ListItemClickEventDetail } from "./List.js";
 import BusyIndicator from "./BusyIndicator.js";
 import Button from "./Button.js";
-import StandardListItem from "./StandardListItem.js";
+import ListItemStandard from "./ListItemStandard.js";
 import ComboBoxItemGroup, { isInstanceOfComboBoxItemGroup } from "./ComboBoxItemGroup.js";
 import ListItemGroup from "./ListItemGroup.js";
 import ListItemGroupHeader from "./ListItemGroupHeader.js";
@@ -106,7 +106,7 @@ interface IComboBoxItem extends UI5Element {
 type ValueStateAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 type ValueStateTypeAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 
-type ComboBoxListItem = StandardListItem & {
+type ComboBoxListItem = ListItemStandard & {
 	mappedItem: ComboBoxItem
 };
 
@@ -179,7 +179,7 @@ type ComboBoxSelectionChangeEventDetail = {
 		List,
 		BusyIndicator,
 		Button,
-		StandardListItem,
+		ListItemStandard,
 		ListItemGroup,
 		ListItemGroupHeader,
 		Popover,

packages/main/src/List.ts

@@ -150,9 +150,9 @@ type ListItemClickEventDetail = {
  *
  * `import "@ui5/webcomponents/dist/List.js";`
  *
- * `import "@ui5/webcomponents/dist/StandardListItem.js";` (for `ui5-li`)
+ * `import "@ui5/webcomponents/dist/ListItemStandard.js";` (for `ui5-li`)
  *
- * `import "@ui5/webcomponents/dist/CustomListItem.js";` (for `ui5-li-custom`)
+ * `import "@ui5/webcomponents/dist/ListItemCustom.js";` (for `ui5-li-custom`)
  *
  * `import "@ui5/webcomponents/dist/ListItemGroup.js";` (for `ui5-li-group`)
  * @constructor

packages/main/src/ListItem.ts

@@ -73,7 +73,7 @@ type ListItemAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup"
 /**
  * @class
  * A class to serve as a base
- * for the `StandardListItem` and `CustomListItem` classes.
+ * for the `ListItemStandard` and `ListItemCustom` classes.
  * @constructor
  * @abstract
  * @extends ListItemBase
@@ -192,7 +192,7 @@ abstract class ListItem extends ListItemBase {
 	deactivateByKey: (e: KeyboardEvent) => void;
 	deactivate: () => void;
 	_ontouchstart: PassiveEventListenerObject;
-	// used in template, implemented in TreeItemBase, StandardListItem
+	// used in template, implemented in TreeItemBase, ListItemStandard
 	accessibleName?: string;
 	// used in ListItem template but implemented in TreeItemBase
 	indeterminate?: boolean;

packages/main/src/CustomListItem.ts → packages/main/src/ListItemCustom.ts

@@ -3,10 +3,10 @@ import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import ListItem from "./ListItem.js";
-import CustomListItemTemplate from "./generated/templates/CustomListItemTemplate.lit.js";
+import ListItemCustomTemplate from "./generated/templates/ListItemCustomTemplate.lit.js";
 
 // Styles
-import customListItemCss from "./generated/themes/CustomListItem.css.js";
+import ListItemCustomCss from "./generated/themes/ListItemCustom.css.js";
 
 /**
  * @class
@@ -28,10 +28,10 @@ import customListItemCss from "./generated/themes/CustomListItem.css.js";
  */
 @customElement({
 	tag: "ui5-li-custom",
-	template: CustomListItemTemplate,
-	styles: [ListItem.styles, customListItemCss],
+	template: ListItemCustomTemplate,
+	styles: [ListItem.styles, ListItemCustomCss],
 })
-class CustomListItem extends ListItem {
+class ListItemCustom extends ListItem {
 	/**
 	 * Defines whether the item is movable.
 	 * @default false
@@ -83,6 +83,6 @@ class CustomListItem extends ListItem {
 	}
 }
 
-CustomListItem.define();
+ListItemCustom.define();
 
-export default CustomListItem;
+export default ListItemCustom;

packages/main/src/ListItemGroup.ts

@@ -10,7 +10,7 @@ import ListItemGroupTemplate from "./generated/templates/ListItemGroupTemplate.l
 
 // Styles
 import ListItemGroupCss from "./generated/themes/ListItemGroup.css.js";
-import StandardListItem from "./StandardListItem.js";
+import ListItemStandard from "./ListItemStandard.js";
 import ListItemGroupHeader from "./ListItemGroupHeader.js";
 
 /**
@@ -34,7 +34,7 @@ import ListItemGroupHeader from "./ListItemGroupHeader.js";
 	languageAware: true,
 	template: ListItemGroupTemplate,
 	styles: [ListItemGroupCss],
-	dependencies: [StandardListItem, ListItemGroupHeader],
+	dependencies: [ListItemStandard, ListItemGroupHeader],
 })
 class ListItemGroup extends UI5Element {
 	/**

packages/main/src/StandardListItem.ts → packages/main/src/ListItemStandard.ts

@@ -7,7 +7,7 @@ import type { IAccessibleListItem } from "./ListItem.js";
 import Icon from "./Icon.js";
 import Avatar from "./Avatar.js";
 import WrappingType from "./types/WrappingType.js";
-import StandardListItemTemplate from "./generated/templates/StandardListItemTemplate.lit.js";
+import ListItemStandardTemplate from "./generated/templates/ListItemStandardTemplate.lit.js";
 
 /**
  * @class
@@ -36,14 +36,14 @@ import StandardListItemTemplate from "./generated/templates/StandardListItemTemp
  */
 @customElement({
 	tag: "ui5-li",
-	template: StandardListItemTemplate,
+	template: ListItemStandardTemplate,
 	dependencies: [
 		...ListItem.dependencies,
 		Icon,
 		Avatar,
 	],
 })
-class StandardListItem extends ListItem implements IAccessibleListItem {
+class ListItemStandard extends ListItem implements IAccessibleListItem {
 	/**
 	 * Defines the description displayed right under the item text, if such is present.
 	 * @default ""
@@ -180,6 +180,6 @@ class StandardListItem extends ListItem implements IAccessibleListItem {
 	}
 }
 
-StandardListItem.define();
+ListItemStandard.define();
 
-export default StandardListItem;
+export default ListItemStandard;

packages/main/src/MultiComboBox.ts

@@ -68,7 +68,7 @@ import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
 import type { ListSelectionChangeEventDetail } from "./List.js";
-import StandardListItem from "./StandardListItem.js";
+import ListItemStandard from "./ListItemStandard.js";
 import ToggleButton from "./ToggleButton.js";
 import * as Filters from "./Filters.js";
 import Button from "./Button.js";
@@ -198,7 +198,7 @@ type MultiComboboxItemWithSelection = {
 		ResponsivePopover,
 		Popover,
 		List,
-		StandardListItem,
+		ListItemStandard,
 		ListItemGroup,
 		ToggleButton,
 		Button,

packages/main/src/MultiComboBoxItemGroup.ts

@@ -3,7 +3,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import type { IMultiComboBoxItem } from "./MultiComboBox.js";
-import MultiComboBoxItem from "./MultiComboBoxItem.js";
+import type MultiComboBoxItem from "./MultiComboBoxItem.js";
 
 /**
  * @class

packages/main/src/SuggestionListItem.hbs

@@ -1,4 +1,4 @@
-{{>include "./StandardListItem.hbs"}}
+{{>include "./ListItemStandard.hbs"}}
 
 {{#*inline "listItemContent"}}
 	<div class="ui5-li-text-wrapper">

packages/main/src/SuggestionListItem.ts

@@ -1,14 +1,14 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import StandardListItem from "./StandardListItem.js";
+import ListItemStandard from "./ListItemStandard.js";
 import SuggestionListItemTemplate from "./generated/templates/SuggestionListItemTemplate.lit.js";
 
 /**
  * @class
  * The `ui5-li-suggestion-item` represents the suggestion item in the `ui5-input`
  * suggestion popover.
  * @constructor
- * @extends StandardListItem
+ * @extends ListItemStandard
  * @csspart title - Used to style the title of the suggestion list item
  * @csspart description - Used to style the description of the suggestion list item
  * @csspart info - Used to style the info of the suggestion list item
@@ -17,7 +17,7 @@ import SuggestionListItemTemplate from "./generated/templates/SuggestionListItem
 	tag: "ui5-li-suggestion-item",
 	template: SuggestionListItemTemplate,
 })
-class SuggestionListItem extends StandardListItem {
+class SuggestionListItem extends ListItemStandard {
 	/**
 	 * Defines a description that can contain HTML.
 	 * **Note:** If not specified, the `description` property will be used.

packages/main/src/Tab.ts

@@ -28,7 +28,7 @@ import TabContainer from "./TabContainer.js";
 import type { TabContainerStripInfo, TabContainerOverflowInfo, ITab } from "./TabContainer.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
-import CustomListItem from "./CustomListItem.js";
+import ListItemCustom from "./ListItemCustom.js";
 
 // Templates
 import TabTemplate from "./generated/templates/TabTemplate.lit.js";
@@ -52,7 +52,7 @@ interface TabInStrip extends HTMLElement {
 	realTabReference: Tab;
 }
 
-interface TabInOverflow extends CustomListItem {
+interface TabInOverflow extends ListItemCustom {
 	realTabReference: Tab;
 }
 
@@ -76,7 +76,7 @@ interface TabInOverflow extends CustomListItem {
 	dependencies: [
 		Icon,
 		Button,
-		CustomListItem,
+		ListItemCustom,
 	],
 })
 class Tab extends UI5Element implements ITabbable, ITab {

packages/main/src/TabContainer.ts

@@ -51,7 +51,7 @@ import type Tab from "./Tab.js";
 import type { TabInStrip, TabInOverflow } from "./Tab.js";
 import type { TabSeparatorInOverflow, TabSeparatorInStrip } from "./TabSeparator.js";
 import type { ListItemClickEventDetail, ListMoveEventDetail } from "./List.js";
-import CustomListItem from "./CustomListItem.js";
+import ListItemCustom from "./ListItemCustom.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TabContainerTabsPlacement from "./types/TabContainerTabsPlacement.js";
 import SemanticColor from "./types/SemanticColor.js";
@@ -173,7 +173,7 @@ interface ITab extends UI5Element {
 		List,
 		ResponsivePopover,
 		DropIndicator,
-		CustomListItem,
+		ListItemCustom,
 	],
 })
 /**