ps-helix 7.0.1 → 7.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ps-helix",
-  "version": "7.0.1",
+  "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/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

@@ -3024,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;
@@ -3035,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)
      */
@@ -3184,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
      */
@@ -3511,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>;