Merge remote-tracking branch 'origin/42-integrate-changeset' into chore-changesets-dryrun

Author: mfranzke

.changeset/README.md

@@ -33,7 +33,7 @@ npx changeset
 You’ll be prompted to:
 
 - Select affected packages
-- Choose the bump type (patch, minor, major)
+- Choose the bump/release type (patch, minor, major)
 - Provide a short summary for the changelog
 
 This creates a file like `.changeset/abcd123.md.`
@@ -43,15 +43,14 @@ This creates a file like `.changeset/abcd123.md.`
 
 - Every PR that changes published code must include a changeset file.
 - CI will check that at least one changeset exists when relevant.
-- If your PR introduces a minor or major change, you may need to add the release:approved label to satisfy the approval gate.
 
 ### 3. Release PRs
 
-When PRs are merged into main, the Release workflow will:
+When PRs are merged into `main` branch, the Release workflow will:
 
 - Collect pending changesets
 - Open (or update) a Release PR called “Version Packages”
-- Run changeset version to bump versions and update changelogs
+- Run `changeset version` to bump versions and update changelogs
 
 This PR should be reviewed like any other:
 
@@ -62,12 +61,13 @@ Once everything looks good, merge the Release PR.
 
 ### 4. Publishing
 
-After the Release PR is merged into main:
+After the Release PR is merged into `main` branch:
 
-- CI will build the packages (build-outputs)
-- Run the publish script (scripts/github/publish-npm.js)
-- Publish new versions to npm with the tag latest (or next for pre-releases)
+- CI will build the packages (`build-outputs`)
+- Run the publish script (`scripts/github/publish-npm.js`)
+- Publish new versions to npm with the tag `latest` (or `next` for pre-releases)
 - Push git tags
+- Create a [GitHub Release](https://github.com/db-ux-design-system/core-web/releases)
 
 You don’t have to run anything manually, it’s handled by CI.
 
@@ -77,48 +77,73 @@ You don’t have to run anything manually, it’s handled by CI.
 
 - **Always add a changeset**
 
-        If your code change affects published packages, create a changeset.
+    If your code change affects published packages, create a changeset.
 
     No changeset → no version bump → no release.
 
 - **Choose the correct bump type**
     - patch: bugfix, no API or HTML changes
-    - minor: new features, changes in markup or behavior, backwards-compatible
-    - major: breaking changes (removed props, changed APIs)
+    - minor: new features, changes in inner component markup or behavior, backwards-compatible
+    - major: breaking changes (e.g. removed props, changed APIs)
 
 - **Write user-friendly summaries**
 
-    The text you provide will be copied into the CHANGELOG.md. Keep it concise and helpful.
+    The text you provide will be copied into the `CHANGELOG.md`. Keep it concise and helpful.
 
 - **One changeset per PR**
 
     Usually you only need one. If a PR touches multiple packages with different bump types, a single changeset can cover them all.
 
-- **Approval for larger changes**
-
-    If you mark something as minor or major, make sure the PR gets the release:approved label before merge.
-
 - **Baseline snapshots**
 
-    HTML snapshots help detect markup changes. If they change, prefer minor instead of patch.
+    ARIA snapshots by Playwright help detect markup changes. If they change, prefer minor instead of patch.
+    And please mention those HTML changes within the `CHANGELOG` or of necessary (like bigger changes) in a [migration guide](https://github.com/db-ux-design-system/core-web/tree/main/docs/migration).
 
 - **Avoid manual version bumps**
 
-    Never edit package.json versions by hand. Changesets handles this automatically.
+    Never edit `package.json` `version` field by hand. Changesets handles this automatically.
 
 ---
 
 ## 🚧 Pre-Releases
 
-For pre-releases (tagged next):
+For [pre-releases](https://github.com/changesets/changesets/blob/main/docs/prereleases.md) (tagged `next`):
 
 ```bash
 npx changeset pre enter next
 # work as usual, add changesets, publish...
 npx changeset pre exit
 ```
 
-CI will publish with tag next. Useful for testing before a stable release.
+CI will publish with tag `next`. Useful for testing before a stable release.
+
+---
+
+## 📸 Snapshot Checks
+
+- CI monitors changes in snapshot files (`__snapshots__/**/*.png`, `__snapshots__/**/*.yml`).
+- If snapshots are changed, the pipeline enforces at least a minor or major bump in your changeset.
+    - Snapshot changes usually mean visual or markup changes, these should never be published as just a patch.
+- If only a patch bump is detected, the PR will be blocked with an error:
+
+    “PNG/YML snapshots changed. Please bump at least MINOR in your changeset.”
+
+## ✅ How to handle this
+
+1. If the snapshot changes are intentional (e.g. new component, markup updates, visual updates):
+
+- Run npx changeset
+- Select at least minor or major
+- Commit the changes
+
+2. If the snapshot changes are unintentional (e.g. test noise, local mismatches):
+
+- Revert or update the snapshots correctly
+- Commit the fixed snapshots, the pipeline should pass afterwards
+
+## 🔒 Approval Gate
+
+- For PRs containing any version bumps (patch, minor or major releases), the PR requires explicit approval (as all other PRs).
 
 ---
 
@@ -135,7 +160,7 @@ npx changeset
 npx changeset status --verbose
 
 # Apply version bumps and changelogs
-npm run release:version
+npx changeset version
 
 # Publish (if you want to do it locally, not in CI)
 npm run release:publish
@@ -149,8 +174,9 @@ npx changeset pre exit # exit prerelease
 
 ## 📂 File Overview
 
-- .changeset/ → contains pending changesets (.md files)
-- package.json → versions are updated here automatically
-- CHANGELOG.md → updated by changeset version
-- .github/workflows/release.yml → automation for Release PRs & publishing
-- scripts/github/publish-npm.js → custom publish script (packs & publishes built outputs)
+- `.changeset/` → contains pending changesets (`.md` files)
+- `package.json` → versions are updated automatically in this file
+- `CHANGELOG.md` → updated by changeset version
+- `.github/workflows/changesets-release-pr.yml` → automation for Release PRs & publishing
+- `.github/workflows/pull-request-snapshot-diff.yml` → validates changes in PNG/YML snapshots and enforces at least a MINOR bump
+- `scripts/github/publish-npm.js` → custom publish script (packs & publishes built outputs)

.changeset/config.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://unpkg.com/@changesets/config/schema.json",
-	"changelog": "@changesets/changelog-git",
+	"changelog": "@changesets/changelog-github",
 	"commit": true,
 	"fixed": [],
 	"linked": [

.changeset/eleven-balloons-whisper.md

@@ -0,0 +1,5 @@
+---
+"@db-ux/core-components": minor
+---
+
+refactor(select): not hiding the first `option` HTML element anymore

.changeset/old-wings-appear.md

@@ -0,0 +1,5 @@
+---
+"@db-ux/core-components": minor
+---
+
+feat(Custom Select): Add Enter key support for keyboard navigation

.changeset/plenty-adults-unite.md

@@ -0,0 +1,5 @@
+---
+"@db-ux/core-components": minor
+---
+
+feat(DBInput): add `enterkeyhint` and `inputmode` attributes

.config/.lintstagedrc.js

@@ -9,6 +9,8 @@ export default {
 	// And elsewhere we don't, compare to https://github.com/stylelint/stylelint/pull/8009
 	'*.{css,scss}': 'stylelint --fix --allow-empty-input --no-validate',
 	'*.{js,ts,tsx,jsx,mjs,cjs}': 'xo --fix',
-	// ensure that security vulnerabilities are fixed before committing
-	'package-lock.json': 'npm audit fix --omit=dev'
+	// ensure that security vulnerabilities are fixed before committing - we need to skip `dev` for the moment as there are some unsolveable conflicts
+	'package-lock.json': 'npm audit fix --omit=dev',
+	// ensure that lock file is up to date
+	'**/package.json': () => 'npm install --package-lock-only --ignore-scripts',
 };

.github/copilot-instructions.md

@@ -0,0 +1,195 @@
+# 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
+
+```text
+├── 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.

.github/dependabot.yml

@@ -38,9 +38,6 @@ updates:
         update-types: ["version-update:semver-minor"]
       # There is an issue with sass:1.77.5 and additional colors in foundations we ignore updates for now
       - dependency-name: "sass"
-      # We currently need to ignore eslint@v9
-      - dependency-name: "eslint"
-        update-types: ["version-update:semver-major"]
     pull-request-branch-name:
       separator: "-"
     # https://github.com/dependabot/dependabot-core/issues/5226#issuecomment-1179434437