ps-helix 7.0.0 → 7.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ps-helix",
-  "version": "7.0.0",
+  "version": "7.0.2",
   "description": "Helix Design System - A comprehensive Angular component library",
   "author": "Fabrice PEREZ - Design Engineer at PACK Solutions",
   "license": "MIT",

package/src/lib/styles/themes/dark-auto.css

@@ -233,7 +233,10 @@
     --psh-text-color-disabled: rgba(255, 255, 255, 0.4);
 
     /* Text on colored backgrounds */
-    --psh-text-on-primary: #FFFFFF;
+    /* Primary is lightened for this theme so it reads against a dark surface; that same
+       lightening put white text on it at 3.52:1, under the 4.5:1 floor. Dark ink, like the
+       five semantic fills below already use here. */
+    --psh-text-on-primary: #000000;
     --psh-text-on-secondary: #FFFFFF;
     --psh-text-on-success: #000000;
     --psh-text-on-warning: #000000;

package/src/lib/styles/themes/dark.css

@@ -222,7 +222,10 @@
   --psh-text-color-disabled: rgba(255, 255, 255, 0.4);
 
   /* Text on colored backgrounds */
-  --psh-text-on-primary: #FFFFFF;
+  /* Primary is lightened for this theme so it reads against a dark surface; that same
+     lightening put white text on it at 3.52:1, under the 4.5:1 floor. Dark ink, like the
+     five semantic fills below already use here. */
+  --psh-text-on-primary: #000000;
   --psh-text-on-secondary: #FFFFFF;
   --psh-text-on-success: #000000;
   --psh-text-on-warning: #000000;

package/src/lib/styles/tokens/sizing.tokens.css

@@ -99,6 +99,16 @@
    */
   --psh-touch-target-min: 2.75rem; /* 44px */
 
+  /**
+   * The AA floor, for a control that lives *inside* a compact component.
+   *
+   * 44px is right for a standalone control. It is wrong for the close button of a tag: the
+   * tag would either grow to 44px, or its hit area would spill over the neighbouring tag and
+   * swallow clicks meant for it — and 2.5.8 is only met when targets do not overlap. 24px
+   * clears the floor without either.
+   */
+  --psh-touch-target-compact: 1.5rem; /* 24px */
+
   /* Scrollbar width compensation */
   --psh-scrollbar-width: 0;
 

package/types/ps-helix.d.ts

@@ -45,9 +45,18 @@ declare class ThemeService {
         lastChange: Date;
     }>;
     constructor();
+    /**
+     * 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: boolean): void;
     toggleTheme(): void;
     updateTheme(name: Theme): void;
+    /** The visible half: the attribute the stylesheets read, and the derived palette. */
+    private applyTheme;
     /**
      * Applies the customer brand colors to CSS variables, automatically
      * deriving variants in OKLCH and enforcing WCAG contrast against the
@@ -3015,7 +3024,6 @@ declare class PshModalComponent implements AfterViewInit, OnDestroy {
     private readonly overlay;
     private readonly renderer;
     private readonly platformId;
-    private readonly zone;
     private readonly document;
     /** Elements this modal marked `inert`, so it only ever undoes its own. */
     private inertedByThisModal;
@@ -3026,9 +3034,17 @@ declare class PshModalComponent implements AfterViewInit, OnDestroy {
     protected readonly zIndex: _angular_core.WritableSignal<number | null>;
     private modalElement?;
     private isAttachedToBody;
-    private resizeListener?;
-    private readonly isMobileSignal;
-    private readonly mobileBreakpoint;
+    /**
+     * Read from the shared `matchMedia`, on the same `md` step the stylesheet uses.
+     *
+     * It was `innerWidth < 768` behind a resize listener per modal — a pixel breakpoint written
+     * in TypeScript, which no amount of `verify:breakpoints` could see because that script reads
+     * stylesheets. It also did not follow browser zoom: at 150% the stylesheet switched at an
+     * effective 1150px while this stayed at 768, so the modal was in its mobile layout while
+     * `isMobileScreen()` still said no, and a consumer binding it — the demo does, for full-width
+     * footer buttons — got desktop buttons in a mobile dialog.
+     */
+    private readonly isMobile;
     /**
      * Controls the visibility of the modal (two-way binding)
      */
@@ -3175,18 +3191,6 @@ declare class PshModalComponent implements AfterViewInit, OnDestroy {
     private releaseBackgroundInert;
     /** Releases this modal's overlay layer and clears its z-index. */
     private releaseOverlay;
-    /**
-     * Checks if the current screen size is mobile
-     */
-    private checkScreenSize;
-    /**
-     * Sets up resize listener to detect screen size changes
-     */
-    private setupResizeListener;
-    /**
-     * Removes resize listener
-     */
-    private removeResizeListener;
     /**
      * Adds keyboard event listeners
      */
@@ -3502,6 +3506,16 @@ declare class PshSidebarComponent implements OnDestroy {
     readonly mode: _angular_core.InputSignal<SidebarMode>;
     readonly position: _angular_core.InputSignal<SidebarPosition>;
     readonly width: _angular_core.InputSignal<string>;
+    /**
+     * The width below which the sidebar becomes an overlay.
+     *
+     * Defaults to the `md` step of the library's scale, in `em` like every media query it ships:
+     * a px breakpoint does not follow browser zoom, so at 150% the rest of the page had switched
+     * to its narrow layout while the sidebar was still docked. It is also exclusive — `768px` was
+     * true at exactly 768px, where a `min-width: 48em` rule is true as well.
+     *
+     * Any CSS length is still accepted, so `'768px'` keeps working.
+     */
     readonly breakpoint: _angular_core.InputSignal<string>;
     readonly autoFocus: _angular_core.InputSignal<boolean>;
     readonly ariaLabelInput: _angular_core.InputSignal<string | undefined>;