ps-helix 7.0.0 → 7.0.1

package/README.md

@@ -2,7 +2,7 @@
 
 A comprehensive Angular component library built with Angular 22+ featuring modern design patterns, accessibility-first development, and optimal developer experience.
 
-[![npm version](https://img.shields.io/badge/npm-7.0.0-blue.svg)](https://www.npmjs.com/package/ps-helix)
+[![npm version](https://img.shields.io/badge/npm-7.0.1-blue.svg)](https://www.npmjs.com/package/ps-helix)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Angular](https://img.shields.io/badge/Angular-22.0.0-red.svg)](https://angular.dev/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-6.0.0-blue.svg)](https://www.typescriptlang.org/)
@@ -108,7 +108,7 @@ After installation, verify that ps-helix is in your `package.json`:
 ```json
 {
   "dependencies": {
-    "ps-helix": "^7.0.0"
+    "ps-helix": "^7.0.1"
   }
 }
 ```
@@ -1188,7 +1188,7 @@ Copyright (c) 2025 PACK Solutions
 
 ---
 
-**Version**: 7.0.0
+**Version**: 7.0.1
 **Built with**: Angular 22.0.0, TypeScript 6.0.0, Phosphor Icons 2.0.3
 **Author**: Fabrice PEREZ | Design Engineer at PACK Solutions
 **Last Updated**: January 2026

package/TOKENS.md

@@ -39,7 +39,7 @@ used before 7.0.0 remain available through the opt-in `styles/compat.css`.
 | `--psh-text-color-secondary` | `var(--psh-surface-600)` | `rgba(255, 255, 255, 0.75)` |
 | `--psh-text-color-tertiary` | `var(--psh-surface-500)` | `rgba(255, 255, 255, 0.6)` |
 | `--psh-text-color-disabled` | `var(--psh-surface-400)` | `rgba(255, 255, 255, 0.4)` |
-| `--psh-text-on-primary` | `#FFFFFF` | `#FFFFFF` |
+| `--psh-text-on-primary` | `#FFFFFF` | `#000000` |
 | `--psh-text-on-secondary` | `#FFFFFF` | `#FFFFFF` |
 | `--psh-text-on-success` | `#FFFFFF` | `#000000` |
 | `--psh-text-on-warning` | `#FFFFFF` | `#000000` |

package/fesm2022/ps-helix.mjs

@@ -214,23 +214,31 @@ class ThemeService {
         this.initializeTheme();
         afterNextRender(() => this.applyCustomerTheme());
     }
+    /**
+     * Switches theme *and* remembers the choice — the two halves of what a theme toggle
+     * means. They used to be split across two methods: `setDarkTheme` wrote `data-theme`
+     * without persisting, `updateTheme` persisted without writing `data-theme`. Whichever
+     * one a consumer picked, half the job was missing, and the demo's own toggle reverted
+     * on every reload.
+     */
     setDarkTheme(isDark) {
-        if (this.isBrowser) {
-            this.document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
-        }
-        this.isDarkThemeSignal.set(isDark);
-        this.themeNameSignal.set(isDark ? 'dark' : 'light');
-        this.lastChangeSignal.set(new Date());
-        this.applyCustomerTheme();
+        this.applyTheme(isDark);
+        this.saveThemePreference(isDark ? 'dark' : 'light');
     }
     toggleTheme() {
         this.setDarkTheme(!this.isDarkThemeSignal());
     }
     updateTheme(name) {
-        this.themeNameSignal.set(name);
-        this.isDarkThemeSignal.set(name === 'dark');
+        this.setDarkTheme(name === 'dark');
+    }
+    /** The visible half: the attribute the stylesheets read, and the derived palette. */
+    applyTheme(isDark) {
+        if (this.isBrowser) {
+            this.document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+        }
+        this.isDarkThemeSignal.set(isDark);
+        this.themeNameSignal.set(isDark ? 'dark' : 'light');
         this.lastChangeSignal.set(new Date());
-        this.saveThemePreference(name);
         this.applyCustomerTheme();
     }
     /**
@@ -322,7 +330,9 @@ class ThemeService {
         const isValid = savedTheme === 'light' || savedTheme === 'dark';
         // No stored preference → honour the OS "prefers-color-scheme" setting.
         const initial = isValid ? savedTheme : this.prefersDarkScheme() ? 'dark' : 'light';
-        this.setDarkTheme(initial === 'dark');
+        // Applied, not saved: with nothing stored the theme follows the OS, and writing the
+        // first value read would pin it there forever.
+        this.applyTheme(initial === 'dark');
     }
     /** True when the OS/browser requests a dark colour scheme. */
     prefersDarkScheme() {
@@ -4370,10 +4380,15 @@ class PshInputComponent {
                 }
                 break;
             case 'Escape':
-                event.preventDefault();
-                this.suggestionsVisible.set(false);
-                this.focusedSuggestionIndex.set(-1);
-                this.syncPanel();
+                // Only when suggestions are showing. Otherwise the keypress belongs to whatever
+                // encloses the field — a modal, most often — and must reach it.
+                if (this.suggestionsVisible()) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.suggestionsVisible.set(false);
+                    this.focusedSuggestionIndex.set(-1);
+                    this.syncPanel();
+                }
                 break;
         }
     }
@@ -6859,6 +6874,7 @@ class PshCollapseComponent {
             case 'Escape':
                 if (this.expanded()) {
                     event.preventDefault();
+                    event.stopPropagation();
                     this.close();
                 }
                 break;
@@ -7120,8 +7136,10 @@ class PshDropdownComponent {
                 }
                 break;
             case 'Escape':
+                // Consumed here, so an enclosing modal does not also close on the same keypress.
                 if (this.isOpen()) {
                     event.preventDefault();
+                    event.stopPropagation();
                     this.close();
                 }
                 break;
@@ -7152,6 +7170,7 @@ class PshDropdownComponent {
                 break;
             case 'Escape':
                 event.preventDefault();
+                event.stopPropagation();
                 this.close();
                 break;
             case 'Tab':
@@ -7682,6 +7701,7 @@ class PshMenuComponent {
             case 'Escape':
                 if (this.collapsible() && !this.collapsed()) {
                     event.preventDefault();
+                    event.stopPropagation();
                     this.toggleCollapse();
                 }
                 break;
@@ -8160,7 +8180,14 @@ class PshSelectComponent {
                 this.focusLast();
                 break;
             case 'Escape':
-                this.close();
+                // Only when there is a panel to dismiss, and then the event stops here: a modal
+                // listens for Escape on the document, so letting it through would close the whole
+                // dialog — the user's form — for someone who only wanted the list gone.
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.close();
+                }
                 break;
             case 'Tab':
                 this.close();