hr-design-system-handlebars 1.126.1 → 1.126.3

package/.github/copilot-instructions.md

@@ -0,0 +1,50 @@
+# Copilot Instructions for HR Design System (Handlebars)
+
+## Project Overview
+This is a Node.js-based design system using Handlebars, Storybook, and custom asset optimization. It provides reusable UI components, templates, and assets for HR applications. The architecture is modular, with build scripts, asset pipelines, and story-driven documentation.
+
+## Key Directories & Files
+- `src/` — Main source code, including `index.js`, assets, and stories
+- `build/handlebars/` — Compiled Handlebars templates, helpers, and partials
+- `build/gulp/` — Gulp build scripts and cache
+- `public/` — Static assets for Storybook and documentation
+- `gulpfile.js` — Gulp build configuration
+- `package.json` — Scripts, dependencies, and project metadata
+- `README.md` — Setup, workflow, and developer guidance
+
+## Developer Workflows
+- **Install dependencies:** Use `yarn` (not npm)
+- **Start Storybook:** `yarn storybook`
+- **Optimize assets:** `yarn optimize-assets` (must run in parallel with Storybook)
+- **Recommended:** Use VS Code Macro-Commander extension to start both scripts together (see README for macro setup)
+- **Node version:** Use Node.js 20.11.1 (see `.nvmrc` and README for NVM setup)
+
+## Build & Asset Pipeline
+- Asset optimization (SVGs, JSON test data, Modernizr.js, Handlebars templates) is handled by `yarn optimize-assets`.
+- Optimized/cached assets are stored in `build/gulp/cache`.
+- The pipeline runs in watch mode and only re-processes changed files for faster builds.
+
+## Project-Specific Conventions
+- **Yarn is required** for dependency management due to Storybook compatibility.
+- **Storybook stories** and documentation are in `src/stories/` and `public/storybook-static/`.
+- **Handlebars templates** are compiled and exported as JS modules for integration.
+- **Custom Modernizr build** is generated and used for feature detection.
+- **Macros for VS Code**: Macro-Commander is recommended for running both main scripts together.
+
+## Integration Points
+- **External dependencies:** Storybook, Handlebars, Modernizr, Gulp, TailwindCSS, PostCSS
+- **Custom helpers/partials:** Located in `build/handlebars/helpers/` and `build/handlebars/partials/`
+- **Webpack config:** For bundling assets and scripts
+
+## Examples & Patterns
+- To add a new UI component, create a Handlebars template in `build/handlebars/partials/` and a story in `src/stories/`.
+- For asset changes, update source files and run `yarn optimize-assets` to regenerate optimized outputs.
+- For new helpers, add to `build/handlebars/helpers/` and ensure they are registered in the build pipeline.
+
+## Troubleshooting
+- If Storybook does not reflect changes, ensure both `yarn storybook` and `yarn optimize-assets` are running.
+- For Node version issues, use NVM and check `.nvmrc`.
+- For dependency issues, always use `yarn`.
+
+---
+For more details, see the [README.md](../../README.md).

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# v1.126.3 (Tue Jan 20 2026)
+
+#### 🐛 Bug Fix
+
+- Fix z-index issue in scroll depth measurement component [#1337](https://github.com/mumprod/hr-design-system-handlebars/pull/1337) ([@szuelch](https://github.com/szuelch))
+
+#### 📝 Documentation
+
+- Add Copilot instructions for HR Design System [#1336](https://github.com/mumprod/hr-design-system-handlebars/pull/1336) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v1.126.2 (Thu Jan 15 2026)
+
+#### 🐛 Bug Fix
+
+- changed wording of App Banner [#1335](https://github.com/mumprod/hr-design-system-handlebars/pull/1335) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.126.1 (Fri Dec 19 2025)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1285,6 +1285,9 @@ article #commentList {
 .top-px {
   top: 1px;
 }
+.-z-10 {
+  z-index: -10;
+}
 .-z-40 {
   z-index: -40;
 }
@@ -3915,7 +3918,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1766157244936;
+  counter-reset: cnt1768912212551;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4376,7 +4379,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1766157244936 1;
+  counter-increment: cnt1768912212551 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4394,7 +4397,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1766157244936);
+  content: counter(cnt1768912212551);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/views/components/appBanner/appBanner.hbs

@@ -7,8 +7,8 @@
                 class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
         </div>
         <div class="flex flex-col items-start text-sm sm:text-base font-heading">
-            <span class="font-bold">hessenschau App</span>
-            <span>Kostenlos bei Google Play</span>
+            <span class="font-bold">hessenschau-App</span>
+            <span>Kostenlos und werbefrei</span>
         </div>
     </div>
     <div class="flex items-center gap-4 ">

package/dist/views/components/appBanner/nativeAppBanner.hbs

@@ -7,8 +7,8 @@
                 class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
         </div>
         <div class="flex flex-col items-start text-sm sm:text-base font-heading">
-            <span class="font-bold">hessenschau App</span>
-            <span>Kostenlos bei Google Play</span>
+            <span class="font-bold">hessenschau-App</span>
+            <span>Kostenlos und webefrei</span>
         </div>
     </div>
     <div class="flex items-center gap-4 ">

package/dist/views/components/scroll_depth_measurement/scroll_depth_measurement.hbs

@@ -1,4 +1,4 @@
-<div class="absolute w-full h-full" x-ref="scroll_depth_container" ax-load x-data="measureScrollDepth()" x-ignore>
+<div class="absolute w-full h-full -z-10" x-ref="scroll_depth_container" ax-load x-data="measureScrollDepth()" x-ignore>
     <div data-scroll-depth="0%" x-ref="scroll_depth_0" class="w-full h-1/4"></div>
     <div data-scroll-depth="25%" x-ref="scroll_depth_25" class="w-full h-1/4"></div>
     <div data-scroll-depth="50%" x-ref="scroll_depth_50" class="w-full h-1/4"></div>

package/dist/views_static/components/appBanner/appBanner.hbs

@@ -7,8 +7,8 @@
                 class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
         </div>
         <div class="flex flex-col items-start text-sm sm:text-base font-heading">
-            <span class="font-bold">hessenschau App</span>
-            <span>Kostenlos bei Google Play</span>
+            <span class="font-bold">hessenschau-App</span>
+            <span>Kostenlos und werbefrei</span>
         </div>
     </div>
     <div class="flex items-center gap-4 ">

package/dist/views_static/components/appBanner/nativeAppBanner.hbs

@@ -7,8 +7,8 @@
                 class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
         </div>
         <div class="flex flex-col items-start text-sm sm:text-base font-heading">
-            <span class="font-bold">hessenschau App</span>
-            <span>Kostenlos bei Google Play</span>
+            <span class="font-bold">hessenschau-App</span>
+            <span>Kostenlos und webefrei</span>
         </div>
     </div>
     <div class="flex items-center gap-4 ">

package/dist/views_static/components/scroll_depth_measurement/scroll_depth_measurement.hbs

@@ -1,4 +1,4 @@
-<div class="absolute w-full h-full" x-ref="scroll_depth_container" ax-load x-data="measureScrollDepth()" x-ignore>
+<div class="absolute w-full h-full -z-10" x-ref="scroll_depth_container" ax-load x-data="measureScrollDepth()" x-ignore>
     <div data-scroll-depth="0%" x-ref="scroll_depth_0" class="w-full h-1/4"></div>
     <div data-scroll-depth="25%" x-ref="scroll_depth_25" class="w-full h-1/4"></div>
     <div data-scroll-depth="50%" x-ref="scroll_depth_50" class="w-full h-1/4"></div>

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.126.1",
+  "version": "1.126.3",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/stories/views/components/appBanner/appBanner.hbs

@@ -7,8 +7,8 @@
                 class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
         </div>
         <div class="flex flex-col items-start text-sm sm:text-base font-heading">
-            <span class="font-bold">hessenschau App</span>
-            <span>Kostenlos bei Google Play</span>
+            <span class="font-bold">hessenschau-App</span>
+            <span>Kostenlos und werbefrei</span>
         </div>
     </div>
     <div class="flex items-center gap-4 ">

package/src/stories/views/components/appBanner/nativeAppBanner.hbs

@@ -7,8 +7,8 @@
                 class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
         </div>
         <div class="flex flex-col items-start text-sm sm:text-base font-heading">
-            <span class="font-bold">hessenschau App</span>
-            <span>Kostenlos bei Google Play</span>
+            <span class="font-bold">hessenschau-App</span>
+            <span>Kostenlos und webefrei</span>
         </div>
     </div>
     <div class="flex items-center gap-4 ">

package/src/stories/views/components/scroll_depth_measurement/scroll_depth_measurement.hbs

@@ -1,4 +1,4 @@
-<div class="absolute w-full h-full" x-ref="scroll_depth_container" ax-load x-data="measureScrollDepth()" x-ignore>
+<div class="absolute w-full h-full -z-10" x-ref="scroll_depth_container" ax-load x-data="measureScrollDepth()" x-ignore>
     <div data-scroll-depth="0%" x-ref="scroll_depth_0" class="w-full h-1/4"></div>
     <div data-scroll-depth="25%" x-ref="scroll_depth_25" class="w-full h-1/4"></div>
     <div data-scroll-depth="50%" x-ref="scroll_depth_50" class="w-full h-1/4"></div>