Merge branch 'main' into copilot/fix-4206

Author: mfranzke

.github/copilot-instructions.md

@@ -0,0 +1,194 @@
+# DB UX Design System v3 Core Web
+
+DB UX Design System v3 Core Web is a monorepo containing CSS/SCSS styles, components, and framework-specific implementations (Angular, React, Vue, Web Components) for the Deutsche Bahn design system.
+
+**Always reference these instructions first and fallback to search or bash commands only when you encounter unexpected information that does not match the info here.**
+
+## Working Effectively
+
+### Required Prerequisites
+- **Node.js 24**: Check `.nvmrc` file. Use `node --version` to verify current version.
+- **npm**: Package manager for dependency management and build scripts.
+
+### Bootstrap and Setup
+1. **CRITICAL**: Copy `.env.template` to `.env` and add your email:
+   ```bash
+   cp .env.template .env
+   # Edit .env file: Set COMMIT_MAIL=your.email@example.com
+   ```
+
+2. **Install dependencies**:
+   ```bash
+   npm install --ignore-scripts
+   ```
+   **NOTE**: Use the `--ignore-scripts` flag because the chromedriver package attempts to download binaries during installation, which fails in restricted corporate networks (e.g., behind firewalls or proxies). This workaround prevents installation errors in such environments.
+
+3. **Decode DB Theme assets** (optional for basic development):
+   ```bash
+   node node_modules/@db-ux/db-theme-fonts/build/scripts/index.js
+   node node_modules/@db-ux/db-theme-icons/build/scripts/index.js
+   node node_modules/@db-ux/db-theme-illustrative-icons/build/scripts/index.js
+   ```
+   **NOTE**: These will fail with placeholder credentials in `.env` but are not required for basic development.
+
+### Build and Test
+- **Build core packages**:
+  ```bash
+  npm run build
+  ```
+  **TIMING**: Takes ~30 seconds. NEVER CANCEL. Set timeout to 120+ seconds.
+
+- **Build all framework outputs**:
+  ```bash
+  npm run build-outputs
+  ```
+  **TIMING**: Takes ~2 minutes. NEVER CANCEL. Set timeout to 300+ seconds.
+
+- **Run tests**:
+  ```bash
+  npm run test
+  ```
+  **TIMING**: Takes ~10 seconds. NEVER CANCEL. Set timeout to 60+ seconds.
+
+### Development
+- **Start interactive development server**:
+  ```bash
+  npm run dev
+  ```
+  **Interactive**: Will prompt to select frameworks (plain-html, angular, react, vue, stencil, etc.). Default selection is plain-html.
+  **TIMING**: Takes ~30 seconds to start. Runs on http://localhost:5173/
+
+- **Start documentation site (Patternhub)**:
+  ```bash
+  npm run start
+  ```
+  **TIMING**: Takes ~2 minutes to start. NEVER CANCEL. Set timeout to 300+ seconds.
+  **ACCESS**: Runs on http://localhost:3000 - full design system documentation and examples.
+
+## Validation
+
+### Always Run These Commands Before Committing
+```bash
+npm run build         # Verify core packages build
+npm run test          # Verify all tests pass
+npm run lint          # NOTE: May fail if Nuxt showcase hasn't been run yet - this is known
+npm run build-outputs # Verify framework outputs build
+```
+
+### Manual Validation Scenarios
+**ALWAYS test actual functionality after making changes:**
+
+1. **Component Development Validation**:
+   - Run `npm run dev` and select `plain-html`
+   - Open http://localhost:5173/ in browser
+   - Navigate to components and verify visual rendering
+   - Test interactive components (buttons, forms, etc.)
+
+2. **Documentation Site Validation**:
+   - Run `npm run start`
+   - Open http://localhost:3000 in browser
+   - Navigate through component documentation
+   - Verify code examples render correctly
+
+3. **Framework-Specific Validation**:
+   - Run `npm run dev` and select target framework (react, vue, angular)
+   - Test component integration in selected framework
+   - Verify framework-specific showcase builds: `npm run build-showcases`
+
+### Visual Regression Testing
+**E2E testing with Playwright** (requires Docker):
+```bash
+# Generate/update screenshots:
+npm run regenerate:screenshots
+# Test visual regression:
+docker-compose --file ./e2e/docker-compose.yml up
+```
+**TIMING**: Visual tests take 10+ minutes. NEVER CANCEL. Set timeout to 1800+ seconds.
+
+## Common Tasks
+
+### Working with Components
+- **Generate new component**: `npm run generate:component`
+- **Component build location**: `packages/components/build/`
+- **Framework outputs**: `output/react/`, `output/vue/`, `output/angular/`, `output/stencil/`
+
+### Working with Styles
+- **Foundation styles**: `packages/foundations/`
+- **Component styles**: `packages/components/src/styles/`
+- **Build artifacts**: `packages/foundations/build/` and `packages/components/build/`
+
+### Key Repository Locations
+```
+├── packages/
+│   ├── foundations/        # Base CSS/SCSS styles and design tokens
+│   ├── components/         # Component CSS and build definitions
+│   ├── migration/          # Migration utilities between versions
+│   └── stylelint/          # DB UX Design System Stylelint plugin for QS
+├── output/                 # Framework-specific generated code
+│   ├── angular/            # Angular components (@db-ux/ngx-core-components)
+│   ├── react/              # React components (@db-ux/react-core-components)
+│   ├── vue/                # Vue 3 components (@db-ux/v-core-components)
+│   └── stencil/            # Web Components (@db-ux/wc-core-components)
+├── showcases/              # Example applications for each framework
+├── e2e/                    # End-to-end testing with Playwright
+└── docs/                   # Documentation files
+```
+
+### Package Scripts Reference
+```bash
+# Development
+npm run dev                 # Interactive dev server (framework selection)
+npm run start              # Start Patternhub documentation site
+
+# Building
+npm run build              # Build core packages (~30 seconds)
+npm run build-outputs      # Build all framework outputs (~2 minutes)
+npm run build-showcases    # Build example applications
+
+# Testing & Quality
+npm run test               # Run test suite (~10 seconds)
+npm run lint               # Run all linters (known issue: may fail if Nuxt showcase hasn't been run yet; see "Known Issues and Workarounds" below)
+npm run regenerate:screenshots  # Update visual regression tests material
+
+# Utilities
+npm run clean              # Clean build artifacts
+npm run generate:component # Generate new component scaffolding
+```
+
+## Known Issues and Workarounds
+
+### Installation Issues
+- **chromedriver fails**: Use `npm install --ignore-scripts` - this is expected in restricted network environments
+- **Font decoding fails**: Expected with placeholder credentials - does not affect basic development
+
+### Build Issues
+- **Nuxt-related linting failures**: May fail if Nuxt showcase hasn't been run yet (requires `showcases/nuxt-showcase/.nuxt/tsconfig.json` to be generated)
+- **Stencil warnings**: Component prop name conflicts are expected and documented
+
+### Network Restrictions
+- **Docker registry access**: E2E testing requires Docker and may need proxy configuration
+- **Asset downloads**: DB Theme assets require valid credentials from Deutsche Bahn Marketing Portal
+
+## Development Workflows
+
+### Adding a New Component
+1. `npm run generate:component` - Follow interactive prompts
+2. Implement component in `packages/components/src/components/[name]/`
+3. Build and test: `npm run build && npm run test`
+4. Generate framework outputs: `npm run build-outputs`
+5. Test in development server: `npm run dev`
+
+### Modifying Existing Components
+1. Make changes in `packages/components/src/components/[name]/`
+2. Adapt those changes into the `showcases/vue-showcase`, `showcases/angular-showcase` and `showcases/react-showcase` folders.
+3. **Always run**: `npm run build && npm run dev`
+4. **Manual validation**: Test component behavior in browser
+5. **Before committing**: `npm run test && npm run build-outputs`
+
+### Debugging Build Issues
+1. **Check Node.js version**: Must be v24 (see `.nvmrc`)
+2. **Clean rebuild**: `npm run clean && npm run build`
+3. **Check dependencies**: `npm install --ignore-scripts`
+4. **Isolate issue**: Build individual packages using workspace commands
+
+Remember: This is a design system used by Deutsche Bahn applications. Always ensure changes maintain accessibility, consistency, and brand compliance.

__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png

@@ -145,7 +145,7 @@
     "vite": "6.3.5"
   },
   "validate-branch-name": {
-    "pattern": "((dbux-3)|(dependabot-)|^((test|feat|fix|chore|docs|refactor|style|ci|perf|alert|[0-9]+)\\-[a-zA-Z0-9\\-]+)$)",
+    "pattern": "((copilot/)|(dependabot-)|^((test|feat|fix|chore|docs|refactor|style|ci|perf|alert|[0-9]+)\\-[a-zA-Z0-9\\-]+)$)",
     "errorMsg": "There is something wrong with your branch name. You should rename your branch to a valid name and try again. See the Pattern below."
   }
 }

__snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png

@@ -279,7 +279,7 @@ export default function DBInput(props: DBInputProps) {
 			{props.children}
 			<Show when={stringPropVisible(props.message, props.showMessage)}>
 				<DBInfotext
-					size="small"
+					size={props.messageSize || 'small'}
 					icon={props.messageIcon}
 					id={state._messageId}>
 					{props.message}
@@ -289,15 +289,15 @@ export default function DBInput(props: DBInputProps) {
 			<Show when={state.hasValidState()}>
 				<DBInfotext
 					id={state._validMessageId}
-					size="small"
+					size={props.validMessageSize || 'small'}
 					semantic="successful">
 					{props.validMessage || DEFAULT_VALID_MESSAGE}
 				</DBInfotext>
 			</Show>
 
 			<DBInfotext
 				id={state._invalidMessageId}
-				size="small"
+				size={props.invalidMessageSize || 'small'}
 				semantic="critical">
 				{state._invalidMessage}
 			</DBInfotext>

__snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png

@@ -19,6 +19,7 @@ import {
 	ShowIconLeadingProps,
 	ShowIconProps,
 	ShowIconTrailingProps,
+	SizeType,
 	ValueLabelType
 } from '../../shared/model';
 
@@ -76,6 +77,18 @@ export type DBInputDefaultProps = {
 	 * Sets [step value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step).
 	 */
 	step?: number | string;
+	/**
+	 * The size of the message infotext. Defaults to "small".
+	 */
+	messageSize?: SizeType;
+	/**
+	 * The size of the valid message infotext. Defaults to "small".
+	 */
+	validMessageSize?: SizeType;
+	/**
+	 * The size of the invalid message infotext. Defaults to "small".
+	 */
+	invalidMessageSize?: SizeType;
 };
 
 export type DBInputProps = DBInputDefaultProps &

package-lock.json

@@ -17,7 +17,7 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "sa11y": "4.1.10"
+    "sa11y": "4.2.0"
   },
   "devDependencies": {
     "typescript": "5.8.3"

package.json

@@ -25,7 +25,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "7.6.3",
-    "sa11y": "4.1.10"
+    "sa11y": "4.2.0"
   },
   "devDependencies": {
     "@types/react": "18.3.13",