@ui5/webcomponents-ai 0.0.0-69dbc5a15 → 0.0.0-896d5863e

package/dist/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents-ai",
-  "version": "2.6.2",
+  "version": "2.14.0-rc.7",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "ui5-ai-button",
-          "description": "### Overview\n\nThe `ui5-ai-button` component serves as a button for AI-related scenarios. Users can trigger actions by clicking or tapping the `ui5-ai-button`\nor by pressing keyboard keys like [Enter] or [Space].\n\n### Usage\n\nFor the `ui5-ai-button` user interface, you can define one or more button states by placing `ui5-ai-button-state` components in their default slot.\nEach state has a name for identification and can include text, an icon, and an end icon, as needed for its purpose.\nYou can define a split mode for the `ui5-ai-button`, which will results in displaying an arrow button for additional actions.\n\nYou can choose from a set of predefined designs for `ui5-ai-button` (as in `ui5-button`) to match the desired styling.\n\nThe `ui5-ai-button` can be activated by clicking or tapping it. You can change the button state in the click event handler. When the button is\nin split mode, you can activate the default button action by clicking or tapping it, or by pressing keyboard keys like [Enter] or [Space].\nYou can activate the arrow button by clicking or tapping it, or by pressing keyboard keys like [Arrow Up], [Arrow Down], or [F4].\nTo display additional actions, you can attach a menu to the arrow button.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/Button.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n- **arrow-click** - Fired when the component is in split mode and after the arrow button\nis activated either by clicking or tapping it or by using the [Arrow Up] / [Arrow Down],\n[Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys.\n\n### **Slots:**\n - **default** - Defines the available states of the component.\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that\nyou only use `ui5-ai-button-state` components in order to preserve the intended design.",
+          "description": "### Overview\n\nThe `ui5-ai-button` component serves as a button for AI-related scenarios. Users can trigger actions by clicking or tapping the `ui5-ai-button`\nor by pressing keyboard keys like [Enter] or [Space].\n\n### Usage\n\nFor the `ui5-ai-button` user interface, you can define one or more button states by placing `ui5-ai-button-state` components in their default slot.\nEach state has a name for identification and can include text, an icon, and an end icon, as needed for its purpose.\nYou can define a split mode for the `ui5-ai-button`, which will results in displaying an arrow button for additional actions.\n\nYou can choose from a set of predefined designs for `ui5-ai-button` (as in `ui5-button`) to match the desired styling.\n\nThe `ui5-ai-button` can be activated by clicking or tapping it. You can change the button state in the click event handler. When the button is\nin split mode, you can activate the default button action by clicking or tapping it, or by pressing keyboard keys like [Enter] or [Space].\nYou can activate the arrow button by clicking or tapping it, or by pressing keyboard keys like [Arrow Up], [Arrow Down], or [F4].\nTo display additional actions, you can attach a menu to the arrow button.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/Button.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n- **arrow-button-click** - Fired when the component is in split mode and after the arrow button\nis activated either by clicking or tapping it or by using the [Arrow Up] / [Arrow Down],\n[Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys.\n\n### **Slots:**\n - **default** - Defines the available states of the component.\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that\nyou only use `ui5-ai-button-state` components in order to preserve the intended design.",
           "doc-url": "",
           "attributes": [
             {
@@ -30,9 +30,17 @@
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "active-arrow-button",
+              "name": "arrow-button-pressed",
               "description": "Defines the active state of the arrow button in split mode.\nSet to true when the button is in split mode and a menu with additional options\nis opened by the arrow button. Set back to false when the menu is closed.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n   Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n   Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n   Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n   Accepts boolean values: `true` or `false`.",
+              "value": {
+                "type": "AIButtonAccessibilityAttributes",
+                "default": "{}"
+              }
             }
           ],
           "slots": [
@@ -47,7 +55,7 @@
               "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key."
             },
             {
-              "name": "arrow-click",
+              "name": "arrow-button-click",
               "description": "Fired when the component is in split mode and after the arrow button\nis activated either by clicking or tapping it or by using the [Arrow Up] / [Arrow Down],\n[Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys."
             }
           ],
@@ -71,9 +79,14 @@
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "active-arrow-button",
+                "name": "arrow-button-pressed",
                 "description": "Defines the active state of the arrow button in split mode.\nSet to true when the button is in split mode and a menu with additional options\nis opened by the arrow button. Set back to false when the menu is closed.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n   Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n   Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n   Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n   Accepts boolean values: `true` or `false`.",
+                "value": { "type": "AIButtonAccessibilityAttributes" }
               }
             ],
             "events": [
@@ -82,7 +95,7 @@
                 "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key."
               },
               {
-                "name": "arrow-click",
+                "name": "arrow-button-click",
                 "description": "Fired when the component is in split mode and after the arrow button\nis activated either by clicking or tapping it or by using the [Arrow Up] / [Arrow Down],\n[Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys."
               }
             ]
@@ -90,7 +103,7 @@
         },
         {
           "name": "ui5-ai-button-state",
-          "description": "### Overview\n\n`ui5-ai-button-state` is the item to use for defining states of `ui5-ai-button` components.\n\n### Usage\n\n`ui5-si-button-state` is an abstract element, representing a state of `ui5-ai-button`. It is meant to be used in the `states` slot\nof `ui5-ai-button` and should be used as standalone component.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/AiButtonState.js\";`\n---\n",
+          "description": "### Overview\n\n`ui5-ai-button-state` is the item to use for defining states of `ui5-ai-button` components.\n\n### Usage\n\n`ui5-ai-button-state` is an abstract element, representing a state of `ui5-ai-button`. It is meant to be used in the `default` slot\nof `ui5-ai-button` and should not be used as standalone component.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/AiButtonState.js\";`\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -114,7 +127,7 @@
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "split-mode",
+              "name": "show-arrow-button",
               "description": "Defines if the component is in split button mode.",
               "value": { "type": "boolean", "default": "false" }
             }
@@ -143,7 +156,7 @@
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "split-mode",
+                "name": "show-arrow-button",
                 "description": "Defines if the component is in split button mode.",
                 "value": { "type": "boolean" }
               }
@@ -153,7 +166,7 @@
         },
         {
           "name": "ui5-ai-prompt-input",
-          "description": "### Overview\n\nThe `ui5-ai-prompt-input` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.\n\n**Note:** The web component is in an experimental state\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/PromptInput.js\n---\n\n\n### **Events:**\n - **submit** - Fired when the input operation has finished by pressing Enter\nor AI button is clicked.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **change** - Fired when the input operation has finished by pressing Enter\nor on focusout.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Importing the Input Suggestions Support feature:\n\n`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";`\n\nautomatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
+          "description": "### Overview\n\nThe `ui5-ai-prompt-input` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.\n\n**Note:** The web component is in an experimental state\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/PromptInput.js\"`\n---\n\n\n### **Events:**\n - **submit** - Fired when the input operation has finished by pressing Enter\nor AI button is clicked.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **change** - Fired when the input operation has finished by pressing Enter\nor on focusout.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
           "doc-url": "",
           "attributes": [
             {
@@ -206,14 +219,14 @@
             },
             {
               "name": "show-suggestions",
-              "description": "Defines whether the component should show suggestions, if such are present.\n\n**Note:** You need to import the `InputSuggestions` module\nfrom `\"@ui5/webcomponents/dist/features/InputSuggestions.js\"` to enable this functionality.",
+              "description": "Defines whether the component should show suggestions, if such are present.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
             {
               "name": "default",
-              "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Importing the Input Suggestions Support feature:\n\n`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";`\n\nautomatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience."
+              "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items."
             },
             {
               "name": "valueStateMessage",
@@ -285,7 +298,7 @@
               },
               {
                 "name": "show-suggestions",
-                "description": "Defines whether the component should show suggestions, if such are present.\n\n**Note:** You need to import the `InputSuggestions` module\nfrom `\"@ui5/webcomponents/dist/features/InputSuggestions.js\"` to enable this functionality.",
+                "description": "Defines whether the component should show suggestions, if such are present.",
                 "value": { "type": "boolean" }
               }
             ],

package/package-scripts.cjs

@@ -6,6 +6,10 @@ const options = {
 	aiPackage: true,
 	noWatchTS: true,
 	dev: true,
+	internal: {
+		cypress_code_coverage: false,
+		cypress_acc_tests: false,
+	},
 };
 
 const scripts = getScripts(options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-ai",
-  "version": "0.0.0-69dbc5a15",
+  "version": "0.0.0-896d5863e",
   "description": "UI5 Web Components: webcomponents.ai",
   "ui5": {
     "webComponentsPackage": true
@@ -25,7 +25,10 @@
     "generate": "nps generate",
     "generateAPI": "nps generateAPI",
     "bundle": "nps build.bundle",
-    "test": "wc-dev test",
+    "test": "nps test-cy-ci",
+    "test:cypress": "nps test-cy-ci",
+    "test:cypress:single": "npx cypress run --component --browser chrome --spec",
+    "test:cypress:open": "nps test-cy-open",
     "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
     "create-ui5-element": "wc-create-ui5-element",
     "prepublishOnly": "tsc -b"
@@ -45,13 +48,14 @@
     "directory": "packages/ai"
   },
   "dependencies": {
-    "@ui5/webcomponents": "0.0.0-69dbc5a15",
-    "@ui5/webcomponents-base": "0.0.0-69dbc5a15",
-    "@ui5/webcomponents-icons": "0.0.0-69dbc5a15",
-    "@ui5/webcomponents-theming": "0.0.0-69dbc5a15"
+    "@ui5/webcomponents": "0.0.0-896d5863e",
+    "@ui5/webcomponents-base": "0.0.0-896d5863e",
+    "@ui5/webcomponents-icons": "0.0.0-896d5863e",
+    "@ui5/webcomponents-theming": "0.0.0-896d5863e"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-69dbc5a15",
-    "chromedriver": "^131.0.0"
+    "@ui5/cypress-internal": "0.0.0",
+    "@ui5/webcomponents-tools": "0.0.0-896d5863e",
+    "chromedriver": "^138.0.5"
   }
 }

package/src/ButtonTemplate.tsx

@@ -12,6 +12,7 @@ export default function ButtonTemplate(this: Button) {
 			_hideArrowButton={this._hideArrowButton}
 			onClick={this._onClick}
 			onArrowClick={this._onArrowClick}
+			accessibilityAttributes={this._computedAccessibilityAttributes}
 		>
 			{this._hasText && (
 				<div class="ui5-ai-button-text">{this._stateText}</div>

package/src/i18n/messagebundle.properties

@@ -5,4 +5,8 @@
 PROMPT_INPUT_CHARACTERS_LEFT={0} characters remaining
 
 #XTXT: Text for characters over
-PROMPT_INPUT_CHARACTERS_EXCEEDED={0} characters over limit
+PROMPT_INPUT_CHARACTERS_EXCEEDED={0} characters over limit
+
+#XTXT: Text for
+BUTTON_TOOLTIP_TEXT={0} with Artificial Intelligence
+

package/src/i18n/messagebundle_de.properties

@@ -2,3 +2,6 @@
 PROMPT_INPUT_CHARACTERS_LEFT={0} Zeichen verbleibend
 
 PROMPT_INPUT_CHARACTERS_EXCEEDED={0} Zeichen über Limit
+
+BUTTON_TOOLTIP_TEXT={0} mit künstlicher Intelligenz
+

package/src/i18n/messagebundle_en.properties

@@ -2,3 +2,6 @@
 PROMPT_INPUT_CHARACTERS_LEFT={0} characters remaining
 
 PROMPT_INPUT_CHARACTERS_EXCEEDED={0} characters over limit
+
+BUTTON_TOOLTIP_TEXT={0} with Artificial Intelligence
+

package/src/i18n/messagebundle_en_US_sappsd.properties

@@ -2,3 +2,6 @@
 PROMPT_INPUT_CHARACTERS_LEFT=[[[{0} ċĥąŗąċţēŗş ŗēɱąįŋįŋğ]]]
 
 PROMPT_INPUT_CHARACTERS_EXCEEDED=[[[{0} ċĥąŗąċţēŗş ŏʋēŗ ĺįɱįţ]]]
+
+BUTTON_TOOLTIP_TEXT=[[[{0} ŵįţĥ Āŗţįƒįċįąĺ Ĭŋţēĺĺįğēŋċē]]]
+

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -2,3 +2,6 @@
 PROMPT_INPUT_CHARACTERS_LEFT=‌‌‍‍​‌​‍​‌‌‍‌‌​​‍‌‍‌​‌​‌​‌​‍​‌‌​​‍‌‍‍‍‍​​​{0}‌‌‌ characters remaining
 
 PROMPT_INPUT_CHARACTERS_EXCEEDED=‌‌‌​‌‍‍‍​‍‍​​​​‌‍​‍​‌‍​‌​​​‌​​‌​​‍‍​‌‌‌​‍​​​{0}‌‌‌ characters over limit
+
+BUTTON_TOOLTIP_TEXT=‍‍‌‍‍‌‍​‍​​‌‌‌‍‌​‍​​‌‌‌‌​‍‍‍‌​‍‍‌‌​‌‌‌‌​​​​{0}‌‌‌ with Artificial Intelligence
+

package/src/i18n/messagebundle_en_US_saptrc.properties

@@ -2,3 +2,6 @@
 PROMPT_INPUT_CHARACTERS_LEFT=ApfX3Ybp+LpUZGYmQzr70w_{0} characters remaining
 
 PROMPT_INPUT_CHARACTERS_EXCEEDED=j5kNPkXE7zFJCcHSJi7nbg_{0} characters over limit
+
+BUTTON_TOOLTIP_TEXT=6X8mtmOry2zJh+9Uw46jBg_{0} with Artificial Intelligence
+

package/tsconfig.json

@@ -7,19 +7,31 @@
 	"compilerOptions": {
 		"outDir": "dist",
 		"experimentalDecorators": true,
-		"verbatimModuleSyntax": true,
+		"composite": true,
+		"rootDir": "src",
+		"tsBuildInfoFile": "dist/.tsbuildinfo",
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext",
+		"verbatimModuleSyntax": true,
 		"paths": {
 			"@ui5/webcomponents-base/dist/*": [
 				"../base/src/*"
 			],
-			"@ui5/webcomponents/dist/*": [
-				"../main/src/*"
+			"@ui5/webcomponents-localization/dist/*": [
+				"../localization/src/*"
 			],
 			"@ui5/webcomponents-theming/dist/*": [
 				"../theming/src/*"
 			],
+			"@ui5/webcomponents-icons/dist/*": [
+				"../icons/src/*"
+			],
+			"@ui5/webcomponents-icons-business-suite/dist/*": [
+				"../icons-business-suite/src/*"
+			],
+			"@ui5/webcomponents-icons-tnt/dist/*": [
+				"../icons-tnt/src/*"
+			]
 		},
 	},
 	"references": [
@@ -27,10 +39,19 @@
 			"path": "../base"
 		},
 		{
-			"path": "../main"
+			"path": "../localization"
 		},
 		{
 			"path": "../theming"
 		},
+		{
+			"path": "../icons"
+		},
+		{
+			"path": "../icons-business-suite"
+		},
+		{
+			"path": "../icons-tnt"
+		},
 	]
 }

package/dist/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["../src/Assets.ts","../src/Button.ts","../src/ButtonState.ts","../src/ButtonTemplate.tsx","../src/PromptInput.ts","../src/PromptInputTemplate.tsx","../src/bundle.esm.ts","../src/bundle.scoped.config.ts","../src/bundle.scoped.esm.ts","../src/generated/i18n/i18n-defaults.ts","../src/generated/json-imports/Themes-fetch.ts","../src/generated/json-imports/Themes.ts","../src/generated/json-imports/i18n-fetch.ts","../src/generated/json-imports/i18n.ts","../src/generated/themes/Button.css.ts","../src/generated/themes/PromptInput.css.ts","../src/generated/themes/sap_horizon/parameters-bundle.css.ts","../src/generated/themes/sap_horizon_dark/parameters-bundle.css.ts","../src/generated/themes/sap_horizon_hcb/parameters-bundle.css.ts","../src/generated/themes/sap_horizon_hcw/parameters-bundle.css.ts"],"version":"5.6.2"}