Merge branch 'main' into copilot/fix-4673

Author: michaelmkraus

.github/copilot-instructions.md

@@ -7,67 +7,81 @@ DB UX Design System v3 Core Web is a monorepo containing CSS/SCSS styles, compon
 ## 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 [email protected]
-   ```
+
+    ```bash
+    cp .env.template .env
+    # Edit .env file: Set [email protected]
+    ```
 
 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.
+
+    ```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.
+    ```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.
+
+    ```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.
+
+    ```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.
+    ```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/>
+
+    ```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.
+    ```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
@@ -76,43 +90,49 @@ 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.)
+    - 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
+    - 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`
+    - 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/`
@@ -136,6 +156,7 @@ docker-compose --file ./e2e/docker-compose.yml up
 ```
 
 ### Package Scripts Reference
+
 ```bash
 # Development
 npm run dev                 # Interactive dev server (framework selection)
@@ -159,14 +180,25 @@ 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
 
+### Git hook issues
+
+**Husky blocking git commit**: To prevent Husky blocking commits due to missing `COMMIT_MAIL` within `.env` file, just add `--no-verify` to your `git commit` command:
+
+```bash
+git commit -m "Your commit message" --no-verify
+```
+
 ### 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
 
@@ -175,20 +207,23 @@ npm run generate:component # Generate new component scaffolding
 If possible, start by writing a test that you could use to verify your solution, as well as we could use for ongoing regression testing throughout the product's development.
 
 ### 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`

.github/workflows/codeql.yml

@@ -0,0 +1,100 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL Advanced"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '23 2 * * 2'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: actions
+          build-mode: none
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v5
+
+    # Add any setup steps before running the `github/codeql-action/init` action.
+    # This includes steps like installing compilers or runtimes (`actions/setup-node`
+    # or others). This is typically only required for manual builds.
+    # - name: Setup runtime (example)
+    #   uses: actions/setup-example@v1
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        echo 'If you are using a "manual" build mode for one or more of the' \
+          'languages you are analyzing, replace this with the commands to build' \
+          'your code, for example:'
+        echo '  make bootstrap'
+        echo '  make release'
+        exit 1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3
+      with:
+        category: "/language:${{matrix.language}}"

.github/workflows/default.yml

@@ -218,10 +218,12 @@ jobs:
     uses: ./.github/workflows/02-e2e-regenerated-snapshots-commit.yml
     secrets: inherit
     if: |
-      needs.regenerate-snapshots-components.result == 'success' ||
-      needs.regenerate-snapshots-foundations.result == 'success' ||
-      needs.regenerate-snapshots-patternhub.result == 'success' ||
-      needs.regenerate-snapshots.result == 'success'
+      ${{ !cancelled() &&
+        ( needs.regenerate-snapshots-components.result == 'success' ||
+        needs.regenerate-snapshots-foundations.result == 'success' ||
+        needs.regenerate-snapshots-patternhub.result == 'success' ||
+        needs.regenerate-snapshots.result == 'success' )
+      }}
     needs:
       [
         regenerate-snapshots-components,