Merge remote-tracking branch 'origin/main' into radio_button_fontsize

Author: TeodorTaushanov

packages/ai/src/InputTemplate.tsx

@@ -42,7 +42,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 									style={this.styles.innerInput}
 									type={this.inputNativeType}
 									inner-input
-									inner-input-with-icon={!!this.icon.length}
+									inner-input-with-icon={this.iconsCount > 0}
 									disabled={this.disabled}
 									readonly={this._readonly || this.loading}
 									value={this.value}

packages/main/cypress/specs/Avatar.cy.tsx

@@ -123,6 +123,16 @@ describe("Accessibility", () => {
 	});
 
 	// New tests for mode property
+	it("mode='Decorative' returns empty accessibilityInfo", () => {
+		cy.mount(
+			<Avatar mode="Decorative" initials="JD" id="decorative-avatar"></Avatar>
+		);
+		cy.get("#decorative-avatar").then(($el) => {
+			const avatar = $el[0] as any;
+			expect(avatar.accessibilityInfo).to.deep.equal({});
+		});
+	});
+
 	it("mode='Decorative' renders with role='presentation' and aria-hidden", () => {
 		cy.mount(
 			<Avatar 

packages/main/cypress/specs/MultiComboBox.cy.tsx

@@ -4027,7 +4027,7 @@ describe("Keyboard Handling", () => {
 
 	it("Should select/deselect a token with CTRL+SPACE", () => {
 		cy.mount(
-			<MultiComboBox noValidation={true}>
+			<MultiComboBox style={{ width: "300px" }} noValidation={true}>
 				<MultiComboBoxItem selected={true} text="Item 1"></MultiComboBoxItem>
 				<MultiComboBoxItem selected={true} text="Item 2"></MultiComboBoxItem>
 			</MultiComboBox>

packages/main/src/Avatar.ts

@@ -540,6 +540,10 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
 	}
 
 	get accessibilityInfo() {
+		if (this.mode === AvatarMode.Decorative) {
+			return {};
+		}
+
 		return {
 			role: this._role as AriaRole,
 			type: this._interactive ? Avatar.i18nBundle.getText(AVATAR_TYPE_BUTTON) : Avatar.i18nBundle.getText(AVATAR_TYPE_IMAGE),

packages/main/src/InputTemplate.tsx

@@ -30,7 +30,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						style={this.styles.innerInput}
 						type={this.inputNativeType}
 						inner-input
-						inner-input-with-icon={!!this.icon.length}
+						inner-input-with-icon={this.iconsCount > 0}
 						disabled={this.disabled}
 						readonly={this._readonly}
 						value={this.value}

packages/main/src/MultiComboBoxTemplate.tsx

@@ -65,6 +65,7 @@ export default function MultiComboBoxTemplate(this: MultiComboBox) {
 				id="ui5-multi-combobox-input"
 				value={this.value}
 				inner-input
+				inner-input-with-icon={this._effectiveShowClearIcon || !!this.icon || !this.readonly}
 				placeholder={this._getPlaceholder}
 				disabled={this.disabled}
 				readonly={this.readonly}

packages/main/src/MultiInput.ts

@@ -359,6 +359,9 @@ class MultiInput extends Input implements IFormInputElement {
 
 		if (this.tokenizer) {
 			this.tokenizer.readonly = this.readonly;
+
+			// Set the CSS variable on the tokenizer element so it's available in the shadow DOM
+			this.tokenizer.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
 		}
 	}
 

packages/main/src/Token.ts

@@ -127,6 +127,14 @@ class Token extends UI5Element implements IToken {
 	@property({ type: Boolean })
 	toBeDeleted = false;
 
+	/**
+	 * Set by the tokenizer to mark the last visible token before overflow.
+	 * @default false
+	 * @private
+	 */
+	@property({ type: Boolean })
+	lastVisibleToken = false;
+
 	/**
 	 * Defines the tabIndex of the component.
 	 * @private

packages/main/src/Tokenizer.ts

@@ -422,6 +422,10 @@ class Tokenizer extends UI5Element implements IFormInputElement {
 		this._tokens.forEach(token => {
 			token.singleToken = (tokensLength === 1) || this.multiLine;
 			token.readonly = this.readonly;
+			// Clear lastVisibleToken when expanding
+			if (this.expanded && token.lastVisibleToken) {
+				token.lastVisibleToken = false;
+			}
 		});
 	}
 
@@ -513,6 +517,27 @@ class Tokenizer extends UI5Element implements IFormInputElement {
 
 		this._scrollToEndIfNeeded();
 		this._tokenDeleting = false;
+
+		// Update lastVisibleToken after rendering is complete to avoid render loops
+		renderFinished().then(() => {
+			this._updateLastVisibleTokenAttribute();
+		});
+	}
+
+	/**
+	 * Updates the lastVisibleToken property on tokens.
+	 * When collapsed with overflow, marks the last visible token for proper spacing to the n-more indicator.
+	 * @private
+	 */
+	_updateLastVisibleTokenAttribute() {
+		const tokensArray = this._tokens;
+		const hasOverflow = this._nMoreCount > 0;
+		const visibleTokens = tokensArray.filter(token => !token.overflows);
+		const lastVisibleToken = visibleTokens.length > 0 ? visibleTokens[visibleTokens.length - 1] : undefined;
+
+		tokensArray.forEach(token => {
+			token.lastVisibleToken = (!this.expanded && hasOverflow && token === lastVisibleToken);
+		});
 	}
 
 	/**

packages/main/src/themes/ComboBox.css

@@ -8,4 +8,8 @@
 	width: 100%;
 	height: 100%;
 	border-radius: var(--_ui5_input_border_radius);
+}
+
+:host(:not([readonly])) [inner-input] {
+	padding: var(--_ui5_input_inner_padding_with_icon);
 }