fix: remove dependencies for TSX components and fix features

packages/ai/src/Button.ts

@@ -6,10 +6,9 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import SplitButton from "@ui5/webcomponents/dist/SplitButton.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type SplitButton from "@ui5/webcomponents/dist/SplitButton.js";
 import type ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
-import ButtonState from "./ButtonState.js";
+import type ButtonState from "./ButtonState.js";
 
 import ButtonTemplate from "./ButtonTemplate.js";
 
@@ -54,7 +53,6 @@ import ButtonCss from "./generated/themes/Button.css.js";
 	renderer: jsxRenderer,
 	template: ButtonTemplate,
 	styles: ButtonCss,
-	dependencies: [SplitButton, Icon, ButtonState],
 	shadowRootOptions: { delegatesFocus: true },
 })
 

packages/ai/src/PromptInput.ts

@@ -8,9 +8,7 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import type { IInputSuggestionItem, InputEventDetail } from "@ui5/webcomponents/dist/Input.js";
-import Input from "@ui5/webcomponents/dist/Input.js";
-import Label from "@ui5/webcomponents/dist/Label.js";
-import Button from "@ui5/webcomponents/dist/Button.js";
+import type Input from "@ui5/webcomponents/dist/Input.js";
 import {
 	isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -46,11 +44,6 @@ import PromptInputCss from "./generated/themes/PromptInput.css.js";
 	renderer: jsxRenderer,
 	styles: PromptInputCss,
 	template: PromptInputTemplate,
-	dependencies: [
-		Input,
-		Label,
-		Button,
-	],
 })
 
 /**

packages/base/src/FeaturesRegistry.ts

@@ -9,6 +9,9 @@ abstract class ComponentFeature {
 	 * @deprecated assign the feature's "i18nBundle" static member directly from the component that uses the feature
 	 */
 	static define?: () => Promise<void>;
+	/**
+	 * @deprecated no longer necessary for jsxRenderer-enabled components
+	 */
 	static dependencies?: Array<typeof UI5Element>
 }
 

packages/base/src/UI5Element.ts

@@ -277,19 +277,6 @@ abstract class UI5Element extends HTMLElement {
 	 * @private
 	 */
 	async connectedCallback() {
-		if (DEV_MODE) {
-			const rootNode = this.getRootNode();
-			// when an element is connected, check if it exists in the `dependencies` of the parent
-			if (rootNode instanceof ShadowRoot && instanceOfUI5Element(rootNode.host)) {
-				const klass = rootNode.host.constructor as typeof UI5Element;
-				const hasDependency = klass.tagsToScope.includes((this.constructor as typeof UI5Element).getMetadata().getPureTag());
-				if (!hasDependency) {
-					// eslint-disable-next-line no-console
-					console.error(`[UI5-FWK] ${(this.constructor as typeof UI5Element).getMetadata().getTag()} not found in dependencies of ${klass.getMetadata().getTag()}`);
-				}
-			}
-		}
-
 		if (DEV_MODE) {
 			const props = (this.constructor as typeof UI5Element).getMetadata().getProperties();
 			for (const [prop, propData] of Object.entries(props)) { // eslint-disable-line
@@ -863,7 +850,7 @@ abstract class UI5Element extends HTMLElement {
 		*/
 		this._changedState = [];
 
-		// Update shadow root and static area item
+		// Update shadow root
 		if (ctor._needsShadowDOM()) {
 			updateShadowRoot(this);
 		}
@@ -1247,9 +1234,10 @@ abstract class UI5Element extends HTMLElement {
 
 	/**
 	 * Returns an array with the dependencies for this UI5 Web Component, which could be:
-	 *  - composed components (used in its shadow root or static area item)
+	 *  - composed components (used in its shadow root)
 	 *  - slotted components that the component may need to communicate with
 	 *
+	 * @deprecated no longer necessary for jsxRenderer-enabled components
 	 * @protected
 	 */
 	static get dependencies(): Array<typeof UI5Element> {

packages/base/src/decorators/customElement.ts

@@ -10,17 +10,54 @@ import type { ComponentStylesData as Styles } from "../types.js";
  * @returns { ClassDecorator }
  */
 const customElement = (tagNameOrComponentSettings: string | {
+	/**
+	 * The tag name of the custom element (will be suffixed if the scoping feature is used).
+	 */
 	tag?: string,
+	/**
+	 * The renderer of the custom element - officially supported are: jsxRenderer and litRender (deprecated).
+	 */
 	renderer?: Renderer,
+	/**
+	 * The styles to be injected into the shadow root of the custom element.
+	 */
 	styles?: Styles,
+	/**
+	 * The template function of the custom element - must match the renderer.
+	 */
 	template?: Template,
+	/**
+	 * Other custom elements used in the shadow root of the custom element.
+	 * @deprecated no longer necessary for jsxRenderer-enabled components
+	 */
 	dependencies?: Array<typeof UI5Element>,
+	/**
+	 * Whether the custom element should be re-rendered when the language changes.
+	 */
 	languageAware?: boolean,
+	/**
+	 * Whether the custom element should be re-rendered when the theme changes.
+	 */
 	themeAware?: boolean,
+	/**
+	 * Whether the custom element needs the CLDR assets.
+	 */
 	cldr?: boolean,
+	/**
+	 * Whether the custom element supports the F6 Fast navigation feature (is a fast-navigation group).
+	 */
 	fastNavigation?: boolean,
+	/**
+	 * Whether the custom element is form-associated and implements form-relevant features.
+	 */
 	formAssociated?: boolean,
+	/**
+	 * The shadow root options of the custom element.
+	 */
 	shadowRootOptions?: Partial<ShadowRootInit>,
+	/**
+	 * A list of all features, supported by the custom element.
+	 */
 	features?: Array<string>,
 } = {}): ClassDecorator => {
 	return (target: any) => {

packages/base/src/jsx-utils.ts

@@ -3,8 +3,6 @@ import hash2str from "./util/hash2str.js";
 import { pascalToKebabCase } from "./util/StringHelper.js";
 
 function convertEventScoping(type: typeof UI5Element, props: Record<string, any>, key: string) {
-	const tag = type.getMetadata().getTag();
-
 	const events = type.getMetadata().getEvents();
 
 	Object.keys(props).forEach(prop => {

packages/compat/src/Table.ts

@@ -32,8 +32,6 @@ import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement
 import { getLastTabbableElement, getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
-import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
-import CheckBox from "@ui5/webcomponents/dist/CheckBox.js";
 import TableGrowingMode from "./types/TableGrowingMode.js";
 import type {
 	TableRowClickEventDetail,
@@ -176,7 +174,6 @@ enum TableFocusTargetElement {
 	styles: tableStyles,
 	renderer: jsxRenderer,
 	template: TableTemplate,
-	dependencies: [BusyIndicator, CheckBox],
 })
 /** Fired when a row in `Active` mode is clicked or `Enter` key is pressed.
  * @param {HTMLElement} row the activated row.

packages/compat/src/TableGroupRow.ts

@@ -5,7 +5,6 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import CheckBox from "@ui5/webcomponents/dist/CheckBox.js";
 import type { ITableRow, TableColumnInfo } from "./Table.js";
 import TableGroupRowTemplate from "./TableGroupRowTemplate.js";
 import TableMode from "./types/TableMode.js";
@@ -39,9 +38,6 @@ import tableGroupRowStyles from "./generated/themes/TableGroupRow.css.js";
 	styles: tableGroupRowStyles,
 	renderer: jsxRenderer,
 	template: TableGroupRowTemplate,
-	dependencies: [
-		CheckBox,
-	],
 })
 @event("_focused", {
 	bubbles: true,

packages/compat/src/TableRow.ts

@@ -15,7 +15,6 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
-import CheckBox from "@ui5/webcomponents/dist/CheckBox.js";
 import type TableCell from "./TableCell.js";
 import type { ITableRow, TableColumnInfo } from "./Table.js";
 import TableMode from "./types/TableMode.js";
@@ -69,7 +68,6 @@ type TableRowF7PressEventDetail = {
 	styles: tableRowStyles,
 	renderer: jsxRenderer,
 	template: TableRowTemplate,
-	dependencies: [CheckBox],
 })
 /**
  * Fired when a row in `Active` mode is clicked or `Enter` key is pressed.

packages/fiori/README.md

@@ -27,6 +27,7 @@ such as a common header (ShellBar).
 | Side Navigation                           | `ui5-side-navigation`          | `import "@ui5/webcomponents-fiori/dist/SideNavigation.js";`           |
 | Side Navigation Item                      | `ui5-side-navigation-item`     | `import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";`       |
 | Side Navigation Sub Item                  | `ui5-side-navigation-sub-item` | `import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";`    |
+| Side Navigation Group                     | `ui5-side-navigation-group`    | `import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";`      |
 | Timeline                                  | `ui5-timeline`                 | `import "@ui5/webcomponents-fiori/dist/Timeline.js";`                 |
 | Timeline Item                             | `ui5-timeline-item`            | comes with `ui5-timeline`                                             |
 | Upload Collection                         | `ui5-upload-collection`        | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";`         |

packages/fiori/src/BarcodeScannerDialog.ts

@@ -2,9 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import Dialog from "@ui5/webcomponents/dist/Dialog.js";
-import Button from "@ui5/webcomponents/dist/Button.js";
-import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import type Dialog from "@ui5/webcomponents/dist/Dialog.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
@@ -80,11 +78,6 @@ type BarcodeScannerDialogScanErrorEventDetail = {
 	renderer: jsxRenderer,
 	template: BarcodeScannerDialogTemplate,
 	styles: [BarcodeScannerDialogCss],
-	dependencies: [
-		Dialog,
-		BusyIndicator,
-		Button,
-	],
 })
 
 /**

packages/fiori/src/DynamicPage.ts

@@ -25,7 +25,7 @@ import DynamicPageCss from "./generated/themes/DynamicPage.css.js";
 
 import DynamicPageHeader from "./DynamicPageHeader.js";
 import DynamicPageTitle from "./DynamicPageTitle.js";
-import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
+import type DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
 
 // Texts
 import {
@@ -101,7 +101,6 @@ const SCROLL_THRESHOLD = 10; // px
 	renderer: jsxRenderer,
 	styles: DynamicPageCss,
 	template: DynamicPageTemplate,
-	dependencies: [DynamicPageHeaderActions],
 })
 
 /**

packages/fiori/src/DynamicPageHeaderActions.ts

@@ -5,8 +5,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import Button from "@ui5/webcomponents/dist/Button.js";
-import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
+import type Button from "@ui5/webcomponents/dist/Button.js";
+import type ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
 import { isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
 import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 
@@ -51,7 +51,6 @@ type DynamicPageHeaderActionsAccessibilityAttributes = Pick<AccessibilityAttribu
 	renderer: jsxRenderer,
 	styles: DynamicPageHeaderActionsCss,
 	template: DynamicPageHeaderActionsTemplate,
-	dependencies: [Button, ToggleButton],
 })
 
 /**

packages/fiori/src/DynamicPageTitle.ts

@@ -13,8 +13,7 @@ import type Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
 import type { ToolbarMinWidthChangeEventDetail } from "@ui5/webcomponents/dist/Toolbar.js";
 import ToolbarItemOverflowBehavior from "@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import Title from "@ui5/webcomponents/dist/Title.js";
+import type Title from "@ui5/webcomponents/dist/Title.js";
 
 // Template
 import DynamicPageTitleTemplate from "./DynamicPageTitleTemplate.js";
@@ -65,7 +64,6 @@ import {
 	renderer: jsxRenderer,
 	styles: DynamicPageTitleCss,
 	template: DynamicPageTitleTemplate,
-	dependencies: [Title, Icon],
 })
 
 /**

packages/fiori/src/FlexibleColumnLayout.ts

@@ -10,7 +10,6 @@ import { supportsTouch } from "@ui5/webcomponents-base/dist/Device.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/vertical-grip.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import {
@@ -168,7 +167,6 @@ type UserDefinedColumnLayouts = {
 	renderer: jsxRenderer,
 	styles: FlexibleColumnLayoutCss,
 	template: FlexibleColumnLayoutTemplate,
-	dependencies: [Icon],
 })
 
 /**

packages/fiori/src/IllustratedMessage.ts

@@ -8,7 +8,6 @@ import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delega
 import { getIllustrationDataSync, getIllustrationData } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import Title from "@ui5/webcomponents/dist/Title.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type { IButton } from "@ui5/webcomponents/dist/Button.js";
 import IllustrationMessageDesign from "./types/IllustrationMessageDesign.js";
@@ -83,7 +82,6 @@ const getEffectiveIllustrationName = (name: string): string => {
 	renderer: jsxRenderer,
 	styles: IllustratedMessageCss,
 	template: IllustratedMessageTemplate,
-	dependencies: [Title],
 })
 class IllustratedMessage extends UI5Element {
 	/**

packages/fiori/src/NotificationList.ts

@@ -12,7 +12,7 @@ import type {
 	ListItemCloseEventDetail,
 } from "@ui5/webcomponents/dist/List.js";
 import type NotificationListItemBase from "./NotificationListItemBase.js";
-import NotificationListInternal from "./NotificationListInternal.js";
+import type NotificationListInternal from "./NotificationListInternal.js";
 
 // Template
 import NotificationListTemplate from "./NotificationListTemplate.js";
@@ -70,9 +70,6 @@ type NotificationItemCloseEventDetail = NotificationItemEventDetail;
 	languageAware: true,
 	styles: [NotificationListCss],
 	template: NotificationListTemplate,
-	dependencies: [
-		NotificationListInternal,
-	],
 })
 
 /**

packages/fiori/src/ProductSwitchItem.ts

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import { isSpace, isEnter, isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
@@ -40,7 +39,6 @@ import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js";
 	renderer: jsxRenderer,
 	styles: ProductSwitchItemCss,
 	template: ProductSwitchItemTemplate,
-	dependencies: [Icon],
 })
 /**
  * Fired when the `ui5-product-switch-item` is activated either with a