Merge branch 'master' into 2078-from-scratch

Author: pfafffabian-ifx

lerna.json

@@ -1,5 +1,5 @@
 {
 	"$schema": "node_modules/lerna/schemas/lerna-schema.json",
-	"version": "39.5.5",
+	"version": "39.6.0",
 	"npmClient": "pnpm"
 }

packages/components/CHANGELOG.md

@@ -1,3 +1,75 @@
+# v39.6.0 (Wed Jan 07 2026)
+
+#### 🚀 Enhancement
+
+- Date-picker: fixes icon design on Firefox and adds keyboard navigation [#2093](https://github.com/Infineon/infineon-design-system-stencil/pull/2093) ([@evangeliaPanteliadou](https://github.com/evangeliaPanteliadou) [@tishoyanchev](https://github.com/tishoyanchev))
+
+#### ⚠️ Pushed to `master`
+
+- Update Stencil library version to 39.5.8 (github-actions@github.com)
+
+#### Authors: 3
+
+- Evangelia Panteliadou ([@evangeliaPanteliadou](https://github.com/evangeliaPanteliadou))
+- github-actions (github-actions@github.com)
+- Tisho Yanchev ([@tishoyanchev](https://github.com/tishoyanchev))
+
+---
+
+# v39.5.8 (Mon Jan 05 2026)
+
+#### 🐛 Bug Fix
+
+- Table: Uses generic data naming [#2144](https://github.com/Infineon/infineon-design-system-stencil/pull/2144) ([@halmleticia](https://github.com/halmleticia) [@tishoyanchev](https://github.com/tishoyanchev))
+
+#### ⚠️ Pushed to `master`
+
+- Update Stencil library version to 39.5.7 (github-actions@github.com)
+
+#### Authors: 3
+
+- [@halmleticia](https://github.com/halmleticia)
+- github-actions (github-actions@github.com)
+- Tisho Yanchev ([@tishoyanchev](https://github.com/tishoyanchev))
+
+---
+
+# v39.5.7 (Mon Jan 05 2026)
+
+#### 🐛 Bug Fix
+
+- Stepper: removes glitch on error state [#2138](https://github.com/Infineon/infineon-design-system-stencil/pull/2138) ([@halmleticia](https://github.com/halmleticia) [@tishoyanchev](https://github.com/tishoyanchev))
+
+#### ⚠️ Pushed to `master`
+
+- Update Stencil library version to 39.5.6 (github-actions@github.com)
+
+#### Authors: 3
+
+- [@halmleticia](https://github.com/halmleticia)
+- github-actions (github-actions@github.com)
+- Tisho Yanchev ([@tishoyanchev](https://github.com/tishoyanchev))
+
+---
+
+# v39.5.6 (Mon Jan 05 2026)
+
+#### 🐛 Bug Fix
+
+- Status: changes font weight to 400 from 600 [#2136](https://github.com/Infineon/infineon-design-system-stencil/pull/2136) ([@halmleticia](https://github.com/halmleticia) [@tishoyanchev](https://github.com/tishoyanchev))
+
+#### ⚠️ Pushed to `master`
+
+- Update Stencil library version to 39.5.5 (github-actions@github.com)
+
+#### Authors: 3
+
+- [@halmleticia](https://github.com/halmleticia)
+- github-actions (github-actions@github.com)
+- Tisho Yanchev ([@tishoyanchev](https://github.com/tishoyanchev))
+
+---
+
 # v39.5.5 (Thu Dec 18 2025)
 
 #### 🐛 Bug Fix

packages/components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@infineon/infineon-design-system-stencil",
-	"version": "39.5.5",
+	"version": "39.6.0",
 	"description": "Infineon Design System - Web Components built with Stencil",
 	"keywords": [
 		"infineon",

packages/components/src/components/date-picker/date-picker.scss

@@ -15,7 +15,7 @@
         margin-left: 4px;
 
         &.error {
-          color: #CD002F;
+          color: tokens.$ifxColorRed500;
         }
       }
     }
@@ -48,6 +48,7 @@
 }
 
 .date__picker-input {
+  box-sizing: border-box;
   font-family: 'Source Sans 3';
   outline: none;
   width: 100%;
@@ -57,7 +58,8 @@
   height: 100%;
 
   &.firefox__classes {
-    padding: 8px 16px;
+    padding: 0px 14px;
+    box-sizing: border-box;
     color: tokens.$ifxColorEngineering400;
     font-size: 16px;
     text-transform: uppercase;
@@ -163,6 +165,13 @@
 
   &.disabled {
     & .icon__wrapper {
+      background: none;
+      color: tokens.$ifxColorBaseWhite;
+      &.firefox__classes { 
+        display: none;
+      }
+    }
+    & .icon__wrapper { 
       background-color: tokens.$ifxColorEngineering300;
       color: tokens.$ifxColorBaseWhite;
     }
@@ -183,5 +192,26 @@
 
   & ifx-icon {
     vertical-align: middle;
+    z-index: 1;
   }
-}
+
+  &.firefox__classes {
+    &:focus-visible::after {
+      content: '';
+      position: absolute;
+      top: -4px;
+      left: -4px;
+      right: -4px;
+      bottom: -4px;
+      border: 2px solid tokens.$ifxColorOcean500;
+      border-radius: 15%;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -4px;
+      background-color: tokens.$ifxColorBaseWhite;
+    }
+  }
+}

packages/components/src/components/date-picker/date-picker.tsx

@@ -39,6 +39,13 @@ export class DatePicker {
 
 	@Event() ifxDate: EventEmitter;
 
+	getInput() {
+		const input = this.el.shadowRoot.querySelector(
+			".date__picker-input",
+		) as HTMLInputElement;
+		return input;
+	}
+
 	getDate(e) {
 		const inputValue = e.target.value;
 		const selectedDate = new Date(inputValue);
@@ -59,9 +66,7 @@ export class DatePicker {
 			return;
 		}
 
-		const input = this.el.shadowRoot.querySelector(
-			".date__picker-input",
-		) as HTMLInputElement;
+		const input = this.getInput();
 		input.classList.add("has-value");
 
 		//this.internals.setFormValue(selectedDate.toISOString().substring(0,10))
@@ -74,37 +79,34 @@ export class DatePicker {
 		}
 	}
 
-	handleInputFocusOnIconClick() {
-		const input = this.el.shadowRoot.querySelector(
-			".date__picker-input",
-		) as HTMLInputElement;
-		if (input) {
-			input.focus();
+	handleIconKeyDown(e: KeyboardEvent) {
+		if (this.disabled) return;
+		const browserIsFirefox = this.isFirefox();
+		const input = this.getInput();
+		if (e.key === "Enter" && browserIsFirefox) {
+			e.preventDefault();
+			if (input.showPicker) {
+				input.showPicker();
+			}
 		}
 	}
 
-	getBrowser() {
-		if (navigator.userAgent.indexOf("Chrome") != -1) {
-			return "Chrome";
-		} else if (navigator.userAgent.indexOf("Opera") != -1) {
-			return "Opera";
-		} else if (navigator.userAgent.indexOf("MSIE") != -1) {
-			return "IE";
-		} else if (navigator.userAgent.indexOf("Firefox") != -1) {
-			return "Firefox";
-		} else {
-			return "unknown";
-		}
+	isFirefox() {
+		const isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
+		return isFirefox;
 	}
 
 	setFireFoxClasses() {
-		const browser = this.getBrowser();
-		const input = this.el.shadowRoot.querySelector(".date__picker-input");
+		const browserIsFirefox = this.isFirefox();
+		const input = this.getInput();
+		const iconWrapper = this.el.shadowRoot.querySelector(".icon__wrapper");
 
-		if (browser === "Firefox") {
+		if (browserIsFirefox) {
 			input.classList.add("firefox__classes");
+			iconWrapper.classList.add("firefox__classes");
 		} else if (input.classList.contains("firefox__classes")) {
 			input.classList.remove("firefox__classes");
+			iconWrapper.classList.remove("firefox__classes");
 		}
 	}
 
@@ -158,8 +160,8 @@ export class DatePicker {
 					/>
 					<div
 						class="icon__wrapper"
-						role="button"
-						onClick={() => this.handleInputFocusOnIconClick()}
+						tabIndex={this.isFirefox() ? 0 : undefined}
+						onKeyDown={(e) => this.handleIconKeyDown(e as KeyboardEvent)}
 					>
 						<ifx-icon icon="calendar16" aria-hidden="true"></ifx-icon>
 					</div>

packages/components/src/components/footer/footer.stories.ts

@@ -1,53 +1,52 @@
 import { icons } from "@infineon/infineon-icons";
 export default {
-  title: 'Components/Footer',
-  tags: ['autodocs'],
-  args: {
-    copyrightText: '© 1999 - 2026 Infineon Technologies AG',
-    href: 'http://infineon.com',
-    icon: 'home-16',
-    ariaLabelOfLink: 'Go to Homepage',
-  },
-  argTypes: {
-    copyrightText: {
-      description: 'Sets the text for the copyright.',
-      control: 'text',
-      table: {
-        category: 'ifx-footer props',
-      }
-    },
-    icon: {
-      description: 'Sets the icon for the footer.',
-      options: Object.keys(icons),
-      control: { type: 'select' },
-      table: {
-        category: 'ifx-icon props',
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    href: {
-      description: 'Sets the link for the footer.',
-      control: 'text',
-      table: {
-        category: 'ifx-link props',
-      },
-    },
-    ariaLabelOfLink: {
-      name: 'ariaLabel',
-      description: 'Sets the aria-label for the link. Enhances accessibility.',
-      control: 'text',
-      table: {
-        category: 'ifx-link props',
-        type:{
-          summary: 'Options',
-          detail: 'Follow us on...'
-        }
-      },
-    },
-    
-  },
+	title: "Components/Footer",
+	tags: ["autodocs"],
+	args: {
+		copyrightText: "© 1999 - 2026 Infineon Technologies AG",
+		href: "http://infineon.com",
+		icon: "home-16",
+		ariaLabelOfLink: "Go to Homepage",
+	},
+	argTypes: {
+		copyrightText: {
+			description: "Sets the text for the copyright.",
+			control: "text",
+			table: {
+				category: "ifx-footer props",
+			},
+		},
+		icon: {
+			description: "Sets the icon for the footer.",
+			options: Object.keys(icons),
+			control: { type: "select" },
+			table: {
+				category: "ifx-icon props",
+				type: {
+					summary: "string",
+				},
+			},
+		},
+		href: {
+			description: "Sets the link for the footer.",
+			control: "text",
+			table: {
+				category: "ifx-link props",
+			},
+		},
+		ariaLabelOfLink: {
+			name: "ariaLabel",
+			description: "Sets the aria-label for the link. Enhances accessibility.",
+			control: "text",
+			table: {
+				category: "ifx-link props",
+				type: {
+					summary: "Options",
+					detail: "Follow us on...",
+				},
+			},
+		},
+	},
 };
 
 const DefaultTemplate = (args) => {

packages/components/src/components/status/status.scss

@@ -133,7 +133,7 @@
   margin: 0;
   padding-left: tokens.$ifxSpace50;
   font-style: normal;
-  font-weight: tokens.$ifxFontWeightSemibold;
+  font-weight: tokens.$ifxFontWeightRegular;
   font-size: tokens.$ifxFontSizeM;
   line-height: tokens.$ifxLineHeightS;
   display: inline;