@ui5/webcomponents 2.28.0-rc.0 → 2.28.1

package/dist/vscode.html-custom-data.json

@@ -160,7 +160,7 @@
     },
     {
       "name": "ui5-bar",
-      "description": "### Overview\nThe Bar is a container which is primarily used to hold titles, buttons and input elements\nand its design and functionality is the basis for page headers and footers.\nThe component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\nIt has the capability to center content, such as a title, while having other components on the left and right side.\n\n### Usage\nWith the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\n**Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n### Responsive Behavior\nThe default slot will be centered in the available space between the startContent and the endContent areas,\ntherefore it might not always be centered in the entire bar.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Bar.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the content in the middle of the bar.\n- **endContent** - Defines the content at the end of the bar.\n- **startContent** - Defines the content at the start of the bar.\n\n### **CSS Parts:**\n - **bar** - Used to style the wrapper of the content of the component\n- **endContent** - Used to style the wrapper of the end content of the component\n- **midContent** - Used to style the wrapper of the middle content of the component\n- **startContent** - Used to style the wrapper of the start content of the component",
+      "description": "### Overview\nThe Bar is a container which is primarily used to hold titles, buttons and input elements\nand its design and functionality is the basis for page headers and footers.\nThe component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\nIt has the capability to center content, such as a title, while having other components on the left and right side.\n\n### Usage\nWith the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\n**Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n**Note:** The Bar is a structural layout component for organizing page areas (header, footer, subheader) and not an action-oriented toolbar. To group action controls with full keyboard navigation support, use the Toolbar component instead.\n\n### Responsive Behavior\nThe default slot will be centered in the available space between the startContent and the endContent areas,\ntherefore it might not always be centered in the entire bar.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Bar.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the content in the middle of the bar.\n- **endContent** - Defines the content at the end of the bar.\n- **startContent** - Defines the content at the start of the bar.\n\n### **CSS Parts:**\n - **bar** - Used to style the wrapper of the content of the component\n- **endContent** - Used to style the wrapper of the end content of the component\n- **midContent** - Used to style the wrapper of the middle content of the component\n- **startContent** - Used to style the wrapper of the start content of the component",
       "attributes": [
         {
           "name": "accessible-name",
@@ -174,7 +174,7 @@
         },
         {
           "name": "accessible-role",
-          "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- By default, accessibleRole is set to \"Toolbar\", which renders the ARIA role \"toolbar\".\n\n- Use the default accessibleRole value \"Toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, set accessibleRole to \"None\" to avoid rendering the ARIA role \"toolbar\", as that role implies a grouping of multiple interactive controls.",
+          "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:** By default, no ARIA role is applied (\"None\"). The Bar derives its semantics\nfrom the container it is placed in, such as a page header or footer.\n\n**Note:** The \"Toolbar\" value is deprecated. The Bar is a structural layout container and does not\nsupport toolbar keyboard interactions (such as arrow-key navigation between components). When 3 or more\ninteractive elements are needed, use the `ui5-toolbar` component instead, which provides the correct\ntoolbar role and arrow-key navigation between components.",
           "values": [{ "name": "None" }, { "name": "Toolbar" }]
         },
         {
@@ -2246,11 +2246,6 @@
           "description": "Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.\nWhen set, it is also rendered as a native `title` tooltip, unless `hideTooltip` is set.",
           "values": []
         },
-        {
-          "name": "hide-tooltip",
-          "description": "Defines whether the native `title` tooltip, derived from `accessibleName`, is displayed.\n\n**Note:** When set, the `accessibleName` is still announced by screen readers, but no\n`title` tooltip is rendered.",
-          "values": []
-        },
         {
           "name": "name",
           "description": "Defines the icon name to be displayed.\n\n**Note:** Make sure you import the desired icon before using it.",
@@ -3297,6 +3292,11 @@
           "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
           "values": []
         },
+        {
+          "name": "placeholder",
+          "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.",
+          "values": []
+        },
         {
           "name": "readonly",
           "description": "Determines whether the component is displayed as read-only.",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.28.0-rc.0",
+  "version": "2.28.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -335,7 +335,7 @@
         },
         {
           "name": "ui5-bar",
-          "description": "### Overview\nThe Bar is a container which is primarily used to hold titles, buttons and input elements\nand its design and functionality is the basis for page headers and footers.\nThe component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\nIt has the capability to center content, such as a title, while having other components on the left and right side.\n\n### Usage\nWith the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\n**Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n### Responsive Behavior\nThe default slot will be centered in the available space between the startContent and the endContent areas,\ntherefore it might not always be centered in the entire bar.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Bar.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the content in the middle of the bar.\n- **endContent** - Defines the content at the end of the bar.\n- **startContent** - Defines the content at the start of the bar.\n\n### **CSS Parts:**\n - **bar** - Used to style the wrapper of the content of the component\n- **endContent** - Used to style the wrapper of the end content of the component\n- **midContent** - Used to style the wrapper of the middle content of the component\n- **startContent** - Used to style the wrapper of the start content of the component",
+          "description": "### Overview\nThe Bar is a container which is primarily used to hold titles, buttons and input elements\nand its design and functionality is the basis for page headers and footers.\nThe component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\nIt has the capability to center content, such as a title, while having other components on the left and right side.\n\n### Usage\nWith the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\n**Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n**Note:** The Bar is a structural layout component for organizing page areas (header, footer, subheader) and not an action-oriented toolbar. To group action controls with full keyboard navigation support, use the Toolbar component instead.\n\n### Responsive Behavior\nThe default slot will be centered in the available space between the startContent and the endContent areas,\ntherefore it might not always be centered in the entire bar.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Bar.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the content in the middle of the bar.\n- **endContent** - Defines the content at the end of the bar.\n- **startContent** - Defines the content at the start of the bar.\n\n### **CSS Parts:**\n - **bar** - Used to style the wrapper of the content of the component\n- **endContent** - Used to style the wrapper of the end content of the component\n- **midContent** - Used to style the wrapper of the middle content of the component\n- **startContent** - Used to style the wrapper of the start content of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -350,10 +350,10 @@
             },
             {
               "name": "accessible-role",
-              "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- By default, accessibleRole is set to \"Toolbar\", which renders the ARIA role \"toolbar\".\n\n- Use the default accessibleRole value \"Toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, set accessibleRole to \"None\" to avoid rendering the ARIA role \"toolbar\", as that role implies a grouping of multiple interactive controls.",
+              "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:** By default, no ARIA role is applied (\"None\"). The Bar derives its semantics\nfrom the container it is placed in, such as a page header or footer.\n\n**Note:** The \"Toolbar\" value is deprecated. The Bar is a structural layout container and does not\nsupport toolbar keyboard interactions (such as arrow-key navigation between components). When 3 or more\ninteractive elements are needed, use the `ui5-toolbar` component instead, which provides the correct\ntoolbar role and arrow-key navigation between components.",
               "value": {
                 "type": "\"None\" | \"Toolbar\"",
-                "default": "\"Toolbar\""
+                "default": "\"None\""
               }
             },
             {
@@ -394,7 +394,7 @@
               },
               {
                 "name": "accessible-role",
-                "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- By default, accessibleRole is set to \"Toolbar\", which renders the ARIA role \"toolbar\".\n\n- Use the default accessibleRole value \"Toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, set accessibleRole to \"None\" to avoid rendering the ARIA role \"toolbar\", as that role implies a grouping of multiple interactive controls.",
+                "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:** By default, no ARIA role is applied (\"None\"). The Bar derives its semantics\nfrom the container it is placed in, such as a page header or footer.\n\n**Note:** The \"Toolbar\" value is deprecated. The Bar is a structural layout container and does not\nsupport toolbar keyboard interactions (such as arrow-key navigation between components). When 3 or more\ninteractive elements are needed, use the `ui5-toolbar` component instead, which provides the correct\ntoolbar role and arrow-key navigation between components.",
                 "value": { "type": "\"None\" | \"Toolbar\"" }
               },
               {
@@ -4932,11 +4932,6 @@
               "description": "Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.\nWhen set, it is also rendered as a native `title` tooltip, unless `hideTooltip` is set.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
-            {
-              "name": "hide-tooltip",
-              "description": "Defines whether the native `title` tooltip, derived from `accessibleName`, is displayed.\n\n**Note:** When set, the `accessibleName` is still announced by screen readers, but no\n`title` tooltip is rendered.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "name",
               "description": "Defines the icon name to be displayed.\n\n**Note:** Make sure you import the desired icon before using it.",
@@ -4956,11 +4951,6 @@
                 "description": "Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.\nWhen set, it is also rendered as a native `title` tooltip, unless `hideTooltip` is set.",
                 "value": { "type": "string | undefined" }
               },
-              {
-                "name": "hide-tooltip",
-                "description": "Defines whether the native `title` tooltip, derived from `accessibleName`, is displayed.\n\n**Note:** When set, the `accessibleName` is still announced by screen readers, but no\n`title` tooltip is rendered.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "name",
                 "description": "Defines the icon name to be displayed.\n\n**Note:** Make sure you import the desired icon before using it.",
@@ -7412,6 +7402,11 @@
               "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "placeholder",
+              "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "readonly",
               "description": "Determines whether the component is displayed as read-only.",
@@ -7493,6 +7488,11 @@
                 "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "placeholder",
+                "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "readonly",
                 "description": "Determines whether the component is displayed as read-only.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.28.0-rc.0",
+  "version": "2.28.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -56,22 +56,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.28.0-rc.0",
-    "@ui5/webcomponents-icons": "2.28.0-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.28.0-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.28.0-rc.0",
-    "@ui5/webcomponents-localization": "2.28.0-rc.0",
-    "@ui5/webcomponents-theming": "2.28.0-rc.0"
+    "@ui5/webcomponents-base": "2.28.1",
+    "@ui5/webcomponents-icons": "2.28.1",
+    "@ui5/webcomponents-icons-business-suite": "2.28.1",
+    "@ui5/webcomponents-icons-tnt": "2.28.1",
+    "@ui5/webcomponents-localization": "2.28.1",
+    "@ui5/webcomponents-theming": "2.28.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.28.0-rc.0",
+    "@ui5/webcomponents-tools": "2.28.1",
     "cypress": "15.18.1",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.2.7"
   },
-  "gitHead": "650422545256f62e673b1ab8dc47996cdaa6b4d2"
+  "gitHead": "a1c8be3fdb2b6ece9f6f0a3c0e03a90cfe3878f3"
 }

package/src/FormTemplate.tsx

@@ -24,7 +24,7 @@ export default function FormTemplate(this: Form) {
 					{this.hasCustomHeader ?
 						<slot name="header"></slot>
 						:
-						<Title id={`${this._id}-header-text`} level={this.headerLevel}>{this.headerText}</Title>
+						<Title id={`${this._id}-header-text`} wrappingType="None" level={this.headerLevel}>{this.headerText}</Title>
 					}
 				</div>
 			}
@@ -55,7 +55,7 @@ function groupedItemsLayout(this: Form) {
 				>
 					{groupItem.headerText &&
 						<div class="ui5-form-group-heading">
-							<Title id={`${groupItem._id}-group-header-text`} level={groupItem.headerLevel} size="H6">{groupItem.headerText}</Title>
+							<Title id={`${groupItem._id}-group-header-text`} wrappingType="None" level={groupItem.headerLevel} size="H6">{groupItem.headerText}</Title>
 						</div>
 					}
 					{this.accessibleMode === "Edit" ?

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -310,6 +310,14 @@ MULTICOMBOBOX_DIALOG_CANCEL_BUTTON=‌‍​​‍‌​‍​‍​​
 
 COMBOBOX_AVAILABLE_OPTIONS=‍‌‍‌‍​‌‍​‌​​​‌​‌‌‌‌‌‍‌‌​‍‌‍‌‌‌‌​‌​​‌‍‌‍‌Available Options
 
+COMBOBOX_LOADING=‍​​​‌‍‍‍‌‌‌​​‌‌‍‌​‌‍‍‌‌​​‍‍‌​‌‌​‍​‌‌​‌‌​Loading data
+
+COMBOBOX_LOADED=‌​​​​‌​‌‌​​‍‌‍‌‌‍‌​‍​‍​​‍‌‍​‍​​‌‍​​‌​‍​‌‍Data loaded
+
+COMBOBOX_LOADED_ITEMS=‍​‌‌‌‌​​‍‍‍​‌‌​‌‍‍‍​‌‍‍‌‍‍​‍​‌​​‌‌‌‍‌​‌​​​{0}‌‌‌ results are available
+
+COMBOBOX_LOADED_ITEM=‌‍​​​‍​‍‍​‌‍‍‍‌‌​​‌‌​‌​‍​‍‌‌​‌‍​‍‍‌​‌‌‍‌1 result is available
+
 COMBOBOX_DIALOG_OK_BUTTON=‌​‌​‍‍​​‍​‍‍‌‍‍‌‌‌‍‍‌‌‍‍​‌‌‍​‌‍‍‍​‍​​‍​​‍OK
 
 COMBOBOX_DIALOG_CANCEL_BUTTON=‍‍‍‌​​‌‌‍‍​‍‍‌‌‍‍‌‍‍​‍‌‌‌​‌‌​‍​‌​‌‌‌‍‍‍‍Cancel
@@ -609,6 +617,14 @@ DIALOG_FULLSCREEN_MAXIMIZE=‍‍‌‌‌​‍​‍​‍‍​‌
 
 DIALOG_FULLSCREEN_RESTORE=‍‌‍‍​‍​​‍‌‍‍‌​‍​​​‌‍​​​‍‌‍‌​​‍‍‌​‌Restore (Shift+Ctrl+F)
 
+POPOVER_RESIZE_HANDLE_ARIA_LABEL=‌‍​‌​​​‍​​​​​‍‍​‍‌‍​‍​‌‌​‌‌​​‌​‌‍‍​‌‍​‌Resize popover
+
+POPOVER_HANDLE_ARIA_ROLEDESCRIPTION=‍‌‌‍​‌‌‍‌​​‌​‍​‌‍‌‌​‌‌​​​‍‍‌‍​‌‌‌‌‌​‍‌‌‌Handle
+
+POPOVER_ARIA_DESCRIBEDBY_RESIZABLE=‌​‍‌​​​​‌‌‍​​‌‌​​‍‌‌‌‍‌‍‌​​​‌‌‌​​​‍‍‌​​‍​Use shift+arrow keys to resize
+
+POPOVER_RESIZE_HANDLE_TOOLTIP=‌​‌‍‌​‍‍‌​​​​‍​‌‍‌‌‌​​​​‍​‍‍​‍​‌‌‌‌‍‍​‌​Drag handle to resize (shift+arrow)
+
 LABEL_COLON=‌​‌‌‍‌‍‌‌‌‌‍‌‌‌​‌​​​‌​​​‍​‍​‌‍​​‍‍‌‌‍​‌‌:
 
 TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=‌​‌‌​‌​‌​‌‌​​​‌​​‍​​​‍‍‌‍‍‍‍​‍‍‌​‍‌‌​‍‌Additional Options

package/src/themes/Form.css

@@ -10,7 +10,7 @@
 	display: flex;
 	flex-direction: column;
 	background-color: var(--sapGroup_ContentBackground);
-    border-radius: 0.75rem;
+	border-radius: 0.75rem;
 }
 
 .ui5-form-header {
@@ -38,12 +38,14 @@
 	height: var(--_ui5-form-group-heading-height);
 	line-height: var(--_ui5-form-group-heading-height);
 	padding-inline-start: 0.25rem;
+	overflow: hidden;
 }
 
 .ui5-form-column {
 	padding-top: 0.5rem;
-    padding-bottom: 1rem;
-    box-sizing: border-box;
+	padding-bottom: 1rem;
+	box-sizing: border-box;
+	min-width: 0;
 }
 
 ::slotted([ui5-form-group]) {

package/src/themes/FormItem.css

@@ -24,6 +24,10 @@
 	justify-self: var(--ui5-form-item-label-justify, end);
 }
 
+::slotted([slot="labelContent"]) {
+	text-align: var(--ui5-form-item-label-text-align, right);
+}
+
 .ui5-form-item-content {
 	overflow: hidden;
 	width: 100%;

package/src/themes/FormItemSpan.css

@@ -9,6 +9,7 @@
 :host {
 	--ui5-form-item-label-justify-internal: start;
 	--ui5-form-item-label-padding-internal: 0.625rem 0.25rem 0 0.25rem;
+	--ui5-form-item-label-text-align-internal: left;
 }
 
 @container (width < 600px) {
@@ -20,6 +21,7 @@
 	:host(:is([label-span~="S12"], :not([label-span*="S"]))) .ui5-form-item,
 	:host(:is([label-span~="S12"], :not([label-span*="S"]))) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
+		--ui5-form-item-label-text-align: var(--ui5-form-item-label-text-align-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
 }
@@ -33,6 +35,7 @@
 	:host([label-span~="M12"]) .ui5-form-item,
 	:host([label-span~="M12"]) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
+		--ui5-form-item-label-text-align: var(--ui5-form-item-label-text-align-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
 }
@@ -46,6 +49,7 @@
 	:host([label-span~="L12"]) .ui5-form-item,
 	:host([label-span~="L12"]) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
+		--ui5-form-item-label-text-align: var(--ui5-form-item-label-text-align-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
 }
@@ -59,6 +63,7 @@
 	:host([label-span~="XL12"]) .ui5-form-item,
 	:host([label-span~="XL12"]) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
+		--ui5-form-item-label-text-align: var(--ui5-form-item-label-text-align-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
 }