feat(ui5-form): introduce Form web component

package.json

@@ -95,4 +95,4 @@
     "packages/website",
     "packages/create-package"
   ]
-}
+}

packages/base/src/features/OpenUI5Support.ts

@@ -136,7 +136,7 @@ class OpenUI5Support {
 				timezone: Localization.getTimezone(),
 				calendarType: Formatting.getCalendarType(),
 				formatSettings: {
-					firstDayOfWeek: CalendarUtils.getWeekConfigurationValues().firstDayOfWeek,
+					firstDayOfWeek: CalendarUtils?.getWeekConfigurationValues().firstDayOfWeek,
 					legacyDateCalendarCustomizing: Formatting.getCustomIslamicCalendarData?.()
 												?? Formatting.getLegacyDateCalendarCustomizing?.(),
 				},

packages/main/src/DatePicker.ts

@@ -326,7 +326,7 @@ class DatePicker extends DateComponentBase implements IFormElement {
 	 * Defines the open or closed state of the popover.
 	 * @public
 	 * @default false
-	 * @since 2.0
+	 * @since 2.0.0
 	 */
 	@property({ type: Boolean })
 	open!: boolean;

packages/main/src/Form.hbs

@@ -0,0 +1,35 @@
+<div class="ui5-form-root" role="form" aria-labelledby="{{ariaLabelledByID}}">
+	<div class="ui5-form-header" part="header">
+		{{#if hasCustomHeader}}
+			<slot name="header"></slot>
+		{{else}}
+			<ui5-title id="{{_id}}-header-text" level="H4">{{ headerText }}</ui5-title>
+		{{/if}}
+	</div>
+
+	<div class="ui5-form-layout" part="layout">
+			{{#if this.hasGroupItems}}
+					{{#each groupItemsInfo}}
+						<div class="ui5-form-column {{this.classes}}" part="column">
+							<div class="ui5-form-group">
+								{{#if this.groupItem.headerText}}
+									<div class="ui5-form-group-heading">
+										<ui5-title level="H6">{{ this.groupItem.headerText }}</ui5-title>
+									</div>
+								{{/if}}
+
+								<div class="ui5-form-group-layout">
+									<slot name="{{this.groupItem._individualSlot}}"></slot>
+								</div>
+							</div>
+						</div>
+					{{/each}}
+			{{else}}
+				{{#each itemsInfo}}
+					<div class="ui5-form-item {{this.classes}}">
+						<slot name="{{this.item._individualSlot}}"></slot>
+					</div>
+				{{/each}}
+			{{/if}}
+	</div>
+</div>