@ui5/webcomponents 2.7.1 → 2.7.3

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.7.1",
+  "version": "2.7.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -616,12 +616,12 @@
         },
         {
           "name": "ui5-button-badge",
-          "description": "The `ui5-button-badge` component defines a badge that appears in the `ui5-button`.\n\n * ### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ButtonBadge.js\";`\n---\n",
+          "description": "The `ui5-button-badge` component defines a badge that appears in the `ui5-button`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ButtonBadge.js\";`\n---\n",
           "doc-url": "",
           "attributes": [
             {
               "name": "design",
-              "description": "Determines where the badge should be placed and how it should be styled.",
+              "description": "Defines the badge placement and appearance.\n- **InlineText** - displayed inside the button after its text, and recommended for **compact** density.\n- **OverlayText** - displayed at the top-end corner of the button, and recommended for **cozy** density.\n- **AttentionDot** - displayed at the top-end corner of the button as a dot, and suitable for both **cozy** and **compact** densities.",
               "value": {
                 "type": "\"InlineText\" | \"OverlayText\" | \"AttentionDot\"",
                 "default": "\"AttentionDot\""
@@ -629,7 +629,7 @@
             },
             {
               "name": "text",
-              "description": "Defines the text of the component.\n\n**Note:** Text is not needed when the `design` property is set to `AttentionDot`.",
+              "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.",
               "value": { "type": "string", "default": "\"\"" }
             }
           ],
@@ -638,14 +638,14 @@
             "properties": [
               {
                 "name": "design",
-                "description": "Determines where the badge should be placed and how it should be styled.",
+                "description": "Defines the badge placement and appearance.\n- **InlineText** - displayed inside the button after its text, and recommended for **compact** density.\n- **OverlayText** - displayed at the top-end corner of the button, and recommended for **cozy** density.\n- **AttentionDot** - displayed at the top-end corner of the button as a dot, and suitable for both **cozy** and **compact** densities.",
                 "value": {
                   "type": "\"InlineText\" | \"OverlayText\" | \"AttentionDot\""
                 }
               },
               {
                 "name": "text",
-                "description": "Defines the text of the component.\n\n**Note:** Text is not needed when the `design` property is set to `AttentionDot`.",
+                "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.",
                 "value": { "type": "string" }
               }
             ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.7.1",
+  "version": "2.7.3",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -53,19 +53,19 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.7.1",
-    "@ui5/webcomponents-icons": "2.7.1",
-    "@ui5/webcomponents-icons-business-suite": "2.7.1",
-    "@ui5/webcomponents-icons-tnt": "2.7.1",
-    "@ui5/webcomponents-localization": "2.7.1",
-    "@ui5/webcomponents-theming": "2.7.1"
+    "@ui5/webcomponents-base": "2.7.3",
+    "@ui5/webcomponents-icons": "2.7.3",
+    "@ui5/webcomponents-icons-business-suite": "2.7.3",
+    "@ui5/webcomponents-icons-tnt": "2.7.3",
+    "@ui5/webcomponents-localization": "2.7.3",
+    "@ui5/webcomponents-theming": "2.7.3"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.7.1",
+    "@ui5/webcomponents-tools": "2.7.3",
     "chromedriver": "^131.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "ac15553f68d3e22b4a3a70203976dbf1bb916724"
+  "gitHead": "3c8ad1de49fdfebae5a5a506f07b301cfa4be029"
 }

package/src/ButtonBadgeTemplate.tsx

@@ -2,5 +2,5 @@ import type ButtonBadge from "./ButtonBadge.js";
 import Tag from "./Tag.js";
 
 export default function ButtonTemplate(this: ButtonBadge) {
-	return <Tag design="Critical" hide-state-icon>{this.text}</Tag>;
+	return <Tag design="Critical" hide-state-icon>{this.effectiveText}</Tag>;
 }

package/src/InputPopoverTemplate.tsx

@@ -1,3 +1,4 @@
+import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
 import type Input from "./Input.js";
 import Icon from "./Icon.js";
 import error from "@ui5/webcomponents-icons/dist/error.js";
@@ -8,10 +9,12 @@ import information from "@ui5/webcomponents-icons/dist/information.js";
 import Popover from "./Popover.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 
-export default function InputPopoverTemplate(this: Input) {
+export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult }) {
+	const suggestionsList = hooks?.suggestionsList;
+
 	return (
 		<>
-			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, valueStateMessage, valueStateMessageInputIcon) }
+			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, { suggestionsList, valueStateMessage, valueStateMessageInputIcon }) }
 
 			{this.hasValueStateMessage &&
 				<Popover

package/src/InputTemplate.tsx

@@ -1,11 +1,13 @@
 import type Input from "./Input.js";
+import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
 import Icon from "./Icon.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import InputPopoverTemplate from "./InputPopoverTemplate.js";
 
-type TemplateHook = () => void;
+type TemplateHook = () => JsxTemplateResult;
 
-export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook }) {
+export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook, suggestionsList?: TemplateHook }) {
+	const suggestionsList = hooks?.suggestionsList;
 	const preContent = hooks?.preContent || defaultPreContent;
 	const postContent = hooks?.postContent || defaultPostContent;
 
@@ -104,7 +106,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 				</div>
 			</div>
 
-			{ InputPopoverTemplate.call(this) }
+			{ InputPopoverTemplate.call(this, { suggestionsList }) }
 		</>
 	);
 }

package/src/features/InputSuggestionsTemplate.tsx

@@ -7,7 +7,11 @@ import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import Button from "../Button.js";
 
-export default function InputSuggestionsTemplate(this: Input, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string) {
+export default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {
+	const suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;
+	const valueStateMessage = hooks?.valueStateMessage;
+	const valueStateMessageInputIcon = hooks?.valueStateMessageInputIcon;
+
 	return (
 		<ResponsivePopover
 			class={this.classes.popover}
@@ -55,8 +59,8 @@ export default function InputSuggestionsTemplate(this: Input, valueStateMessage:
 
 					{this.hasValueStateMessage &&
 					<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>
-						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
-						{ this.open && valueStateMessage.call(this) }
+						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+						{ this.open && valueStateMessage?.call(this) }
 					</div>
 					}
 				</>
@@ -72,8 +76,8 @@ export default function InputSuggestionsTemplate(this: Input, valueStateMessage:
 						}}
 						style={this.styles.suggestionPopoverHeader}
 					>
-						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
-						{ this.open && valueStateMessage.call(this) }
+						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+						{ this.open && valueStateMessage?.call(this) }
 					</div>
 			}
 
@@ -93,7 +97,7 @@ export default function InputSuggestionsTemplate(this: Input, valueStateMessage:
 	);
 }
 
-function suggestionsList(this: Input) {
+function defaultSuggestionsList(this: Input) {
 	return (
 		<List
 			separators={this.suggestionSeparators}