@ui5/webcomponents-ai 0.0.0-8ae0ba6fc → 0.0.0-95afb1087

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-ai",
-  "version": "2.9.0-rc.1",
+  "version": "2.17.0-rc.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -33,6 +33,14 @@
               "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 - **title**: Specifies a tooltip or description for screen readers.\n   Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\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": [
@@ -74,6 +82,11 @@
                 "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 - **title**: Specifies a tooltip or description for screen readers.\n   Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\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": [
@@ -151,6 +164,89 @@
             "events": []
           }
         },
+        {
+          "name": "ui5-ai-input",
+          "description": "### Overview\n\nThe `ui5-ai-input` component extends the standard `ui5-input` with **AI Writing Assistant** capabilities.\n\n### Structure\n\nThe `ui5-ai-input` consists of the following main parts:\n\n- **Input Field** – Inherits all standard Input behaviors.\n- **AI Action Button** – Appears when focused or loading, providing access to AI-related actions or stopping generation.\n\nThe component automatically determines which elements to render based on its internal state:\n- The AI Button is only shown when there are available `actions`.\n- The version navigation appears only when `totalVersions > 1`.\n\n### Keyboard Support\n\n- **Shift + F4** — Opens the AI menu.\n- **Ctrl + Shift + Z / Y** — Navigates backward/forward between AI-generated versions.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/Input.js\";`\n---\n\n\n### **Events:**\n - **button-click** - Fired when the user selects the AI button.\n- **item-click** - Fired when an item from the AI actions menu is clicked.\n- **stop-generation** - Fired when the user selects the \"Stop\" button to stop ongoing AI text generation.\n- **version-change** - Fired when the user selects the version navigation buttons.\n\n### **Slots:**\n - **actions** - Defines the items of the menu for the component.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "current-version",
+              "description": "Indicates the index of the currently displayed version.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "total-versions",
+              "description": "Indicates the total number of result versions available.\n\nWhen not set or set to 0, the versioning will be hidden.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "loading",
+              "description": "Defines whether the AI Writing Assistant is currently loading.\n\nWhen `true`, indicates that an AI action is in progress.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "actions",
+              "description": "Defines the items of the menu for the component."
+            }
+          ],
+          "events": [
+            {
+              "name": "button-click",
+              "description": "Fired when the user selects the AI button."
+            },
+            {
+              "name": "item-click",
+              "description": "Fired when an item from the AI actions menu is clicked."
+            },
+            {
+              "name": "stop-generation",
+              "description": "Fired when the user selects the \"Stop\" button to stop ongoing AI text generation."
+            },
+            {
+              "name": "version-change",
+              "description": "Fired when the user selects the version navigation buttons."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "current-version",
+                "description": "Indicates the index of the currently displayed version.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "total-versions",
+                "description": "Indicates the total number of result versions available.\n\nWhen not set or set to 0, the versioning will be hidden.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "loading",
+                "description": "Defines whether the AI Writing Assistant is currently loading.\n\nWhen `true`, indicates that an AI action is in progress.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "button-click",
+                "description": "Fired when the user selects the AI button."
+              },
+              {
+                "name": "item-click",
+                "description": "Fired when an item from the AI actions menu is clicked."
+              },
+              {
+                "name": "stop-generation",
+                "description": "Fired when the user selects the \"Stop\" button to stop ongoing AI text generation."
+              },
+              {
+                "name": "version-change",
+                "description": "Fired when the user selects the version navigation buttons."
+              }
+            ]
+          }
+        },
         {
           "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- **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.",
@@ -304,6 +400,83 @@
               }
             ]
           }
+        },
+        {
+          "name": "ui5-ai-textarea",
+          "description": "### Overview\n\nThe `ui5-ai-textarea` component extends the standard TextArea with Writing Assistant capabilities.\nIt provides AI-powered text generation, editing suggestions, and version management functionality.\n\n### Structure\nThe `ui5-ai-textarea` consists of the following elements:\n- TextArea: The main text input area with all standard textarea functionality\n- WritingAssistant: Dedicated toolbar containing:\n  - Versioning: A component with left/right navigation buttons and a label for browsing AI-generated versions\n  - AI Button: Opens a menu that can be extended with custom AI generation options through slotting\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/TextArea.js\";`\n---\n\n\n### **Events:**\n - **version-change** - Fired when the user clicks on version navigation buttons.\n- **stop-generation** - Fired when the user requests to stop AI text generation.\n\n### **Slots:**\n - **menu** - Defines a slot for `ui5-menu` integration. This slot allows you to pass a `ui5-menu` instance that will be associated with the assistant.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "loading",
+              "description": "Defines whether the `ui5-ai-textarea` is currently in a loading(processing) state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "prompt-description",
+              "description": "Defines the prompt description of the current action.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "current-version",
+              "description": "Indicates the index of the currently displayed version.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "total-versions",
+              "description": "Indicates the total number of result versions available.\n\nNotes:\nVersioning is hidden if the value is `0`",
+              "value": { "type": "number", "default": "0" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "menu",
+              "description": "Defines a slot for `ui5-menu` integration. This slot allows you to pass a `ui5-menu` instance that will be associated with the assistant."
+            }
+          ],
+          "events": [
+            {
+              "name": "version-change",
+              "description": "Fired when the user clicks on version navigation buttons."
+            },
+            {
+              "name": "stop-generation",
+              "description": "Fired when the user requests to stop AI text generation."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "loading",
+                "description": "Defines whether the `ui5-ai-textarea` is currently in a loading(processing) state.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "prompt-description",
+                "description": "Defines the prompt description of the current action.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "current-version",
+                "description": "Indicates the index of the currently displayed version.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "total-versions",
+                "description": "Indicates the total number of result versions available.\n\nNotes:\nVersioning is hidden if the value is `0`",
+                "value": { "type": "number" }
+              }
+            ],
+            "events": [
+              {
+                "name": "version-change",
+                "description": "Fired when the user clicks on version navigation buttons."
+              },
+              {
+                "name": "stop-generation",
+                "description": "Fired when the user requests to stop AI text generation."
+              }
+            ]
+          }
         }
       ]
     },

package/package-scripts.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-ai",
-  "version": "0.0.0-8ae0ba6fc",
+  "version": "0.0.0-95afb1087",
   "description": "UI5 Web Components: webcomponents.ai",
   "ui5": {
     "webComponentsPackage": true
@@ -8,8 +8,7 @@
   "type": "module",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
-  "private": false,
-  "customElements": "./dist/custom-elements.json",
+  "customElements": "dist/custom-elements.json",
   "keywords": [
     "openui5",
     "sapui5",
@@ -18,23 +17,22 @@
   "scripts": {
     "clean": "wc-dev clean",
     "lint": "wc-dev lint",
-    "lint:scope": "nps scope.lint",
+    "lint:scope": "wc-dev scope.lint",
     "start": "wc-dev start",
     "build": "wc-dev build",
     "watch": "wc-dev watch",
-    "generate": "nps generate",
-    "generateAPI": "nps generateAPI",
-    "bundle": "nps build.bundle",
-    "test": "nps test-cy-ci",
-    "test:cypress": "nps test-cy-ci",
+    "generate": "wc-dev generate",
+    "generateAPI": "wc-dev generateAPI",
+    "bundle": "wc-dev build.bundle",
+    "test": "yarn test:cypress",
+    "test:cypress": "wc-dev test-cy-ci",
     "test:cypress:single": "npx cypress run --component --browser chrome --spec",
-    "test:cypress:open": "nps test-cy-open",
+    "test:cypress:open": "wc-dev test-cy-open",
     "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
     "create-ui5-element": "wc-create-ui5-element",
     "prepublishOnly": "tsc -b"
   },
   "exports": {
-    "./.port": "./.port",
     "./src/*": "./src/*",
     "./dist/*": "./dist/*",
     "./package.json": "./package.json",
@@ -44,18 +42,21 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/SAP/ui5-webcomponents.git",
+    "url": "https://github.com/UI5/webcomponents.git",
     "directory": "packages/ai"
   },
   "dependencies": {
-    "@ui5/webcomponents": "0.0.0-8ae0ba6fc",
-    "@ui5/webcomponents-base": "0.0.0-8ae0ba6fc",
-    "@ui5/webcomponents-icons": "0.0.0-8ae0ba6fc",
-    "@ui5/webcomponents-theming": "0.0.0-8ae0ba6fc"
+    "@ui5/webcomponents": "0.0.0-95afb1087",
+    "@ui5/webcomponents-base": "0.0.0-95afb1087",
+    "@ui5/webcomponents-icons": "0.0.0-95afb1087",
+    "@ui5/webcomponents-theming": "0.0.0-95afb1087"
   },
   "devDependencies": {
-    "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "0.0.0-8ae0ba6fc",
-    "chromedriver": "^133.0.0"
-  }
-}
+    "@custom-elements-manifest/analyzer": "^0.10.10",
+    "@ui5/cypress-internal": "0.1.0",
+    "@ui5/webcomponents-tools": "0.0.0-95afb1087",
+    "cypress": "^15.3.0",
+    "vite": "5.4.21"
+  },
+  "gitHead": "1b7f451f1e43ae13626dfc69b3c2bfa8b0d32219"
+}

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/InputTemplate.tsx

@@ -0,0 +1,197 @@
+import type Input from "./Input.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import MenuItem from "@ui5/webcomponents/dist/MenuItem.js";
+import MenuSeparator from "@ui5/webcomponents/dist/MenuSeparator.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Menu from "@ui5/webcomponents/dist/Menu.js";
+import "@ui5/webcomponents-icons/dist/navigation-left-arrow.js";
+import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import type { JsxTemplateResult } from "@ui5/webcomponents-base";
+
+type TemplateHook = () => JsxTemplateResult;
+
+export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook }) {
+	const preContent = hooks?.preContent || defaultPreContent;
+	const postContent = hooks?.postContent || defaultPostContent;
+	return (
+		<>
+			<div
+				class={`ui5-ai-input-root ui5-input-focusable-element ${this.loading && "ui5-ai-input-busy"}`}
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+			>
+				<div class="ui5-input-content">
+					<BusyIndicator
+						id={`${this._id}-busyIndicator`}
+						active={this.loading}
+						class="ui5-input-busy-indicator"
+					>
+
+						<div
+							class="ui5-input-root"
+							part="root"
+						>
+							<div class="ui5-input-content">
+								{preContent.call(this)}
+
+								<input
+									id="inner"
+									part="input"
+									class="ui5-input-inner"
+									style={this.styles.innerInput}
+									type={this.inputNativeType}
+									inner-input
+									inner-input-with-icon={!!this.icon.length}
+									disabled={this.disabled}
+									readonly={this._readonly || this.loading}
+									value={this._innerValue}
+									placeholder={this._placeholder}
+									maxlength={this.maxlength}
+									role={this.accInfo.role}
+									enterkeyhint={this.hint}
+									aria-controls={this.accInfo.ariaControls}
+									aria-invalid={this.accInfo.ariaInvalid}
+									aria-haspopup={this.accInfo.ariaHasPopup}
+									aria-describedby={this.accInfo.ariaDescribedBy}
+									aria-roledescription={this.accInfo.ariaRoledescription}
+									aria-autocomplete={this.accInfo.ariaAutoComplete}
+									aria-expanded={this.accInfo.ariaExpanded}
+									aria-label={this.ariaLabel}
+									aria-required={this.required}
+									autocomplete="off"
+									data-sap-focus-ref
+									step={this.nativeInputAttributes.step}
+									min={this.nativeInputAttributes.min}
+									max={this.nativeInputAttributes.max}
+									onInput={this._handleNativeInput}
+									onChange={this._handleChange}
+									onSelect={this._handleSelect}
+									onKeyDown={this._onkeydown}
+									onKeyUp={this._onkeyup}
+									onClick={this._click}
+									onFocusIn={this.innerFocusIn}
+								/>
+
+								{this._effectiveShowClearIcon &&
+									<div
+										tabindex={-1}
+										part="clear-icon-wrapper"
+										class="ui5-input-clear-icon-wrapper inputIcon"
+										onClick={this._clear}
+										onMouseDown={this._iconMouseDown}
+									>
+										<Icon
+											part="clear-icon"
+											class="ui5-input-clear-icon"
+											name={"decline"}
+											tabindex={-1}
+											accessibleName={this.clearIconAccessibleName}>
+										</Icon>
+									</div>
+								}
+
+								{this.icon.length > 0 &&
+									<div class="ui5-input-icon-root"
+										tabindex={-1}
+									>
+										<slot name="icon"></slot>
+									</div>
+								}
+
+								<div class="ui5-input-value-state-icon">
+									{this._valueStateInputIcon}
+								</div>
+								{ postContent.call(this) }
+
+								{this.accInfo.ariaDescription &&
+									<span id="descr" class="ui5-hidden-text">{this.accInfo.ariaDescription}</span>
+								}
+
+								{this.accInfo.accessibleDescription &&
+									<span id="accessibleDescription" class="ui5-hidden-text">{this.accInfo.accessibleDescription}</span>
+								}
+
+								{this.linksInAriaValueStateHiddenText.length > 0 &&
+									<span id="hiddenText-value-state-link-shortcut" class="ui5-hidden-text">{this.valueStateLinksShortcutsTextAcc}</span>
+								}
+
+								{this.hasValueState &&
+									<span id="valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
+								}
+							</div>
+						</div>
+
+					</BusyIndicator>
+					<Button
+						id="ai-menu-btn"
+						hidden={(!this.isFocused && !this.loading) || !this.hasActions || this.readonly}
+						tabIndex={-1}
+						class={`ui5-input-ai-button ui5-ai-input-button-wrapper ${this._isMenuOpen && "ui5-input-button-menu-open"} ${this.loading && "ui5-ai-input-loading"}`}
+						design="Transparent"
+						icon={this.loading ? "stop" : "ai"}
+						onClick={this._handleAIButtonClick}
+						onKeyDown={this._handleAIButtonKeydown}
+						aria-keyshortcuts={ this.loading ? "Esc" : "Shift + F4" }
+						tooltip={this.loading ? this.stopGeneratingTooltip : this.ariaLabel}
+						accessibilityAttributes={{ hasPopup: this.loading ? "false" : "menu" }}
+					/>
+					<Menu
+						onItemClick={this._onMenuIconClick}
+						onBeforeOpen={() => { this._isMenuOpen = true; }}
+						onBeforeClose={() => { this._isMenuOpen = false; }}
+						onClose={() => { if (!this.loading) { this.focus(); } }}
+					>
+						<slot name="actions"></slot>
+						{this.totalVersions > 1 && Versioning.call(this)}
+					</Menu>
+				</div>
+			</div>
+		</>
+	);
+}
+
+function Versioning(this: Input) {
+	return (
+		<>
+			<MenuSeparator />
+			<MenuItem
+				type="Inactive"
+				class="ui5-ai-versioning-menu-footer"
+				text={`${this.currentVersion} / ${this.totalVersions}`}
+			>
+				<Button
+					id="arrow-left"
+					class="versioning-button"
+					slot="endContent"
+					design="Transparent"
+					icon="navigation-left-arrow"
+					tooltip={this.previousButtonAccessibleName}
+					accessibleName={this.previousButtonAccessibleName}
+					aria-keyshortcut="Shift+Ctrl+Z"
+					disabled={this.currentVersion <= 1}
+					onClick={this._handlePreviousButtonClick}
+					data-ui5-versioning-button="previous"
+				>
+				</Button>
+				<Button
+					id="arrow-right"
+					class="versioning-button"
+					slot="endContent"
+					design="Transparent"
+					icon="navigation-right-arrow"
+					tooltip={this.nextButtonAccessibleName}
+					accessibleName={this.nextButtonAccessibleName}
+					aria-keyshortcut="Shift+Ctrl+Y"
+					disabled={this.currentVersion >= this.totalVersions}
+					onClick={this._handleNextButtonClick}
+					data-ui5-versioning-button="next"
+				/>
+			</MenuItem>
+		</>
+	);
+}
+
+function defaultPreContent() { }
+
+function defaultPostContent() {}

package/src/TextArea.css

@@ -0,0 +1,45 @@
+.ui5-ai-textarea-root {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+}
+
+.ui5-ai-textarea-root .ui5-textarea-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	position: relative;
+}
+
+.ui5-ai-textarea-root [part="footer"] {
+	position: relative;
+	width: 100%;
+	margin-top: auto;
+	flex-shrink: 0;
+}
+
+.ui5-ai-writing-assistant-footer-bar {
+	background: var(--_ui5_texteditor_toolbar_background, var(--sapPageFooter_Background));
+	width: 100%;
+	box-sizing: border-box;
+	box-shadow: none;
+	border-bottom: none;
+	border-top: none;
+}
+
+.ui5-ai-writing-assistant-footer-bar--with-border {
+	border-top: 1px solid var(--sapPageFooter_BorderColor);
+}
+
+.ui5-ai-writing-assistant-action-label {
+	margin-left: 0.5rem;
+	color: var(--sapContent_LabelColor);
+	font-size: var(--sapFontSmallSize);
+}
+
+#ai-menu-wrapper {
+	position: relative;
+	z-index: 1000;
+}

package/src/TextAreaTemplate.tsx

@@ -0,0 +1,90 @@
+import type TextArea from "./TextArea.js";
+import WritingAssistant from "./WritingAssistant.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import TextAreaPopoverTemplate from "@ui5/webcomponents/dist/TextAreaPopoverTemplate.js";
+
+export default function TextAreaTemplate(this: TextArea) {
+	return (
+		<div class="ui5-ai-textarea-root">
+			<div
+				class={this.classes.root}
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+			>
+				<div class="ui5-textarea-wrapper">
+					{this.growing &&
+					<div id={`${this._id}-mirror`} class="ui5-textarea-mirror" aria-hidden="true">
+						{this._mirrorText.map(mirrorText => {
+							return (
+								<>
+									{mirrorText.text}
+									<br />
+								</>
+							);
+						})}
+					</div>
+					}
+					<BusyIndicator
+						id={`${this._id}-busyIndicator`}
+						active={this.loading}
+						class="ui5-textarea-busy-indicator"
+					>
+						<textarea
+							id={`${this._id}-inner`}
+							class="ui5-textarea-inner"
+							part="textarea"
+							placeholder={this.placeholder}
+							disabled={this.disabled}
+							readonly={this.readonly}
+							aria-label={this._ariaLabel}
+							aria-describedby={this.ariaDescribedBy}
+							aria-invalid={this._ariaInvalid}
+							aria-required={this.required}
+							maxlength={this._exceededTextProps.calcedMaxLength}
+							value={this.value}
+							data-sap-focus-ref
+							onInput={this._oninput}
+							onChange={this._onchange}
+							onKeyUp={this._onkeyup}
+							onKeyDown={this._onkeydown}
+							onSelect={this._onselect}
+							onScroll={this._onscroll}>
+						</textarea>
+					</BusyIndicator>
+					<div part="footer">
+						<slot name="footer">
+							<WritingAssistant
+								loading={this.loading}
+								currentVersion={this.currentVersion}
+								totalVersions={this.totalVersions}
+								promptDescription={this.promptDescription}
+								onButtonClick={this._handleAIButtonClick}
+								onStopGeneration={this.handleStopGeneration}
+								onVersionChange={this._handleVersionChange}
+							/>
+						</slot>
+					</div>
+				</div>
+
+				{this.showExceededText &&
+				<span class="ui5-textarea-exceeded-text">{this._exceededTextProps.exceededText}</span>
+				}
+
+				{this.hasValueState &&
+				<span id={`${this._id}-valueStateDesc`} class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
+				}
+			</div>
+
+			{TextAreaPopoverTemplate.call(this)}
+
+			{/* ARIA live region for screen readers */}
+			<div aria-live="polite" aria-atomic="true" class="ui5-hidden-text">
+				{this.loading ? this.promptDescription : ""}
+			</div>
+
+			<div id="ai-menu-wrapper">
+				<slot name="menu"></slot>
+			</div>
+		</div>
+	);
+}

package/src/ToolbarLabelTemplate.tsx

@@ -0,0 +1,9 @@
+import type ToolbarLabel from "./ToolbarLabel.js";
+
+export default function ToolbarLabelTemplate(this: ToolbarLabel) {
+	return (
+		<span class="ui5-ai-toolbar-label">
+			{this.text}
+		</span>
+	);
+}