ps-helix 6.2.0 → 6.2.2

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-6.2.0-blue.svg)](https://www.npmjs.com/package/ps-helix)
+[![npm version](https://img.shields.io/badge/npm-6.2.2-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/)
@@ -106,7 +106,7 @@ After installation, verify that ps-helix is in your `package.json`:
 ```json
 {
   "dependencies": {
-    "ps-helix": "^6.2.0"
+    "ps-helix": "^6.2.2"
   }
 }
 ```
@@ -1182,7 +1182,7 @@ Copyright (c) 2025 PACK Solutions
 
 ---
 
-**Version**: 6.2.0
+**Version**: 6.2.2
 **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/fesm2022/ps-helix.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, computed, ChangeDetectionStrategy, Component, model, inject, ElementRef, signal, PLATFORM_ID, ViewEncapsulation, InjectionToken, viewChild, effect, Injectable, DestroyRef, Directive, ViewContainerRef, ChangeDetectorRef, ViewChild, Injector, afterNextRender, HostListener, Renderer2, contentChild, linkedSignal, EventEmitter, Output, Input, contentChildren } from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component, model, inject, ElementRef, signal, PLATFORM_ID, ViewEncapsulation, InjectionToken, viewChild, isDevMode, Injectable, DestroyRef, Directive, ViewContainerRef, ChangeDetectorRef, effect, ViewChild, Injector, afterNextRender, HostListener, Renderer2, contentChild, linkedSignal, EventEmitter, Output, Input, contentChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -1210,6 +1210,9 @@ class PshCheckboxComponent {
         this.config = inject(CHECKBOX_CONFIG);
         this.checkboxInput = viewChild('checkboxInput', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "checkboxInput" }] : /* istanbul ignore next */ []));
+        /** Holds the `label` input or the projected content — whichever provides the visible label. */
+        this.labelSlot = viewChild('labelSlot', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelSlot" }] : /* istanbul ignore next */ []));
         this.uniqueId = `psh-cb-${++checkboxIdCounter}`;
         this.onChange = (_) => { };
         this.onTouched = () => { };
@@ -1261,11 +1264,17 @@ class PshCheckboxComponent {
             return this.checked() ? 'checked' : 'unchecked';
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            if (!this.label() && !this.ariaLabel()) {
-                console.warn('[psh-checkbox] Label manquant pour l\'accessibilité.');
-            }
-        });
+    }
+    ngAfterViewInit() {
+        if (!isDevMode())
+            return;
+        // Read the rendered label slot rather than the `label` input alone: a projected
+        // label (`<psh-checkbox>Accept terms</psh-checkbox>`) is just as accessible, and
+        // `contentChild` cannot see a bare text node. Checked once, after the first render.
+        const hasVisibleLabel = !!this.labelSlot()?.nativeElement.textContent?.trim();
+        if (!hasVisibleLabel && !this.ariaLabel()) {
+            console.warn('[psh-checkbox] No accessible label provided. Please use label input, ariaLabel input, or projected content.');
+        }
     }
     toggle() {
         if (!this.disabled()) {
@@ -1296,7 +1305,7 @@ class PshCheckboxComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: PshCheckboxComponent,
                 multi: true
-            }], viewQueries: [{ propertyName: "checkboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"checkbox-container\">\r\n  <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\r\n    <input\r\n      #checkboxInput\r\n      type=\"checkbox\"\r\n      class=\"checkbox-input\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-label]=\"computedAriaLabel()\"\r\n      [attr.aria-checked]=\"ariaChecked()\"\r\n      [attr.aria-required]=\"required() || null\"\r\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n      (change)=\"toggle()\"\r\n      (keydown)=\"handleKeydown($event)\"\r\n    />\r\n    \r\n    <span class=\"checkbox-control\">\r\n      @if (checked() && !indeterminate()) {\r\n        <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n      }\r\n      @if (indeterminate()) {\r\n        <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\r\n      }\r\n    </span>\r\n\r\n    <span class=\"checkbox-text\">\r\n      @if (label()) {\r\n        {{ label() }}\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </span>\r\n  </label>\r\n\r\n  @if (error()) {\r\n    <div [id]=\"uniqueId + '-error'\" class=\"checkbox-message error\" role=\"alert\">\r\n      {{ error() }}\r\n    </div>\r\n  } @else if (success()) {\r\n    <div [id]=\"uniqueId + '-success'\" class=\"checkbox-message success\" role=\"status\">\r\n      {{ success() }}\r\n    </div>\r\n  }\r\n</div>", styles: [":host{display:inline-flex;flex-direction:column}.checkbox-container{display:flex;flex-direction:column;gap:var(--form-field-gap)}.checkbox-label{display:inline-flex;align-items:center;gap:var(--form-label-gap);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.checkbox-label.label-left{flex-direction:row-reverse;justify-content:space-between}.checkbox-input{position:absolute;opacity:0;width:0;height:0}.checkbox-control{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:.125rem solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:all var(--animation-duration-fast) var(--animation-easing-default);color:#fff;position:relative;flex-shrink:0}:host.checkbox-checked .checkbox-control,:host.checkbox-indeterminate .checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus-visible+.checkbox-control{outline:.125rem solid var(--focus-outline-color);outline-offset:.125rem}.checkbox-control i{font-size:.875rem;line-height:1}:host.checkbox-small .checkbox-control{width:1rem;height:1rem}:host.checkbox-large .checkbox-control{width:1.5rem;height:1.5rem}:host.checkbox-error .checkbox-control{border-color:var(--danger-color)}:host.checkbox-error.checkbox-checked .checkbox-control{background:var(--danger-color)}:host.checkbox-success .checkbox-control{border-color:var(--success-color)}:host.checkbox-success.checkbox-checked .checkbox-control{background:var(--success-color)}:host.checkbox-disabled{opacity:var(--opacity-disabled);cursor:not-allowed}:host.checkbox-disabled .checkbox-label{cursor:not-allowed}.checkbox-message{font-size:.875rem}.checkbox-message.error{color:var(--danger-color)}.checkbox-message.success{color:var(--success-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], viewQueries: [{ propertyName: "checkboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }, { propertyName: "labelSlot", first: true, predicate: ["labelSlot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"checkbox-container\">\r\n  <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\r\n    <input\r\n      #checkboxInput\r\n      type=\"checkbox\"\r\n      class=\"checkbox-input\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-label]=\"computedAriaLabel()\"\r\n      [attr.aria-checked]=\"ariaChecked()\"\r\n      [attr.aria-required]=\"required() || null\"\r\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n      (change)=\"toggle()\"\r\n      (keydown)=\"handleKeydown($event)\"\r\n    />\r\n    \r\n    <span class=\"checkbox-control\">\r\n      @if (checked() && !indeterminate()) {\r\n        <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n      }\r\n      @if (indeterminate()) {\r\n        <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\r\n      }\r\n    </span>\r\n\r\n    <span class=\"checkbox-text\" #labelSlot>\r\n      @if (label()) {\r\n        {{ label() }}\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </span>\r\n  </label>\r\n\r\n  @if (error()) {\r\n    <div [id]=\"uniqueId + '-error'\" class=\"checkbox-message error\" role=\"alert\">\r\n      {{ error() }}\r\n    </div>\r\n  } @else if (success()) {\r\n    <div [id]=\"uniqueId + '-success'\" class=\"checkbox-message success\" role=\"status\">\r\n      {{ success() }}\r\n    </div>\r\n  }\r\n</div>", styles: [":host{display:inline-flex;flex-direction:column}.checkbox-container{display:flex;flex-direction:column;gap:var(--form-field-gap)}.checkbox-label{display:inline-flex;align-items:center;gap:var(--form-label-gap);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.checkbox-label.label-left{flex-direction:row-reverse;justify-content:space-between}.checkbox-input{position:absolute;opacity:0;width:0;height:0}.checkbox-control{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:.125rem solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:all var(--animation-duration-fast) var(--animation-easing-default);color:#fff;position:relative;flex-shrink:0}:host.checkbox-checked .checkbox-control,:host.checkbox-indeterminate .checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus-visible+.checkbox-control{outline:.125rem solid var(--focus-outline-color);outline-offset:.125rem}.checkbox-control i{font-size:.875rem;line-height:1}:host.checkbox-small .checkbox-control{width:1rem;height:1rem}:host.checkbox-large .checkbox-control{width:1.5rem;height:1.5rem}:host.checkbox-error .checkbox-control{border-color:var(--danger-color)}:host.checkbox-error.checkbox-checked .checkbox-control{background:var(--danger-color)}:host.checkbox-success .checkbox-control{border-color:var(--success-color)}:host.checkbox-success.checkbox-checked .checkbox-control{background:var(--success-color)}:host.checkbox-disabled{opacity:var(--opacity-disabled);cursor:not-allowed}:host.checkbox-disabled .checkbox-label{cursor:not-allowed}.checkbox-message{font-size:.875rem}.checkbox-message.error{color:var(--danger-color)}.checkbox-message.success{color:var(--success-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PshCheckboxComponent, decorators: [{
             type: Component,
@@ -1314,8 +1323,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         '[class.checkbox-indeterminate]': 'indeterminate()',
                         '[attr.data-state]': 'state()',
                         '[attr.aria-checked]': 'ariaChecked()'
-                    }, template: "<div class=\"checkbox-container\">\r\n  <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\r\n    <input\r\n      #checkboxInput\r\n      type=\"checkbox\"\r\n      class=\"checkbox-input\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-label]=\"computedAriaLabel()\"\r\n      [attr.aria-checked]=\"ariaChecked()\"\r\n      [attr.aria-required]=\"required() || null\"\r\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n      (change)=\"toggle()\"\r\n      (keydown)=\"handleKeydown($event)\"\r\n    />\r\n    \r\n    <span class=\"checkbox-control\">\r\n      @if (checked() && !indeterminate()) {\r\n        <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n      }\r\n      @if (indeterminate()) {\r\n        <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\r\n      }\r\n    </span>\r\n\r\n    <span class=\"checkbox-text\">\r\n      @if (label()) {\r\n        {{ label() }}\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </span>\r\n  </label>\r\n\r\n  @if (error()) {\r\n    <div [id]=\"uniqueId + '-error'\" class=\"checkbox-message error\" role=\"alert\">\r\n      {{ error() }}\r\n    </div>\r\n  } @else if (success()) {\r\n    <div [id]=\"uniqueId + '-success'\" class=\"checkbox-message success\" role=\"status\">\r\n      {{ success() }}\r\n    </div>\r\n  }\r\n</div>", styles: [":host{display:inline-flex;flex-direction:column}.checkbox-container{display:flex;flex-direction:column;gap:var(--form-field-gap)}.checkbox-label{display:inline-flex;align-items:center;gap:var(--form-label-gap);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.checkbox-label.label-left{flex-direction:row-reverse;justify-content:space-between}.checkbox-input{position:absolute;opacity:0;width:0;height:0}.checkbox-control{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:.125rem solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:all var(--animation-duration-fast) var(--animation-easing-default);color:#fff;position:relative;flex-shrink:0}:host.checkbox-checked .checkbox-control,:host.checkbox-indeterminate .checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus-visible+.checkbox-control{outline:.125rem solid var(--focus-outline-color);outline-offset:.125rem}.checkbox-control i{font-size:.875rem;line-height:1}:host.checkbox-small .checkbox-control{width:1rem;height:1rem}:host.checkbox-large .checkbox-control{width:1.5rem;height:1.5rem}:host.checkbox-error .checkbox-control{border-color:var(--danger-color)}:host.checkbox-error.checkbox-checked .checkbox-control{background:var(--danger-color)}:host.checkbox-success .checkbox-control{border-color:var(--success-color)}:host.checkbox-success.checkbox-checked .checkbox-control{background:var(--success-color)}:host.checkbox-disabled{opacity:var(--opacity-disabled);cursor:not-allowed}:host.checkbox-disabled .checkbox-label{cursor:not-allowed}.checkbox-message{font-size:.875rem}.checkbox-message.error{color:var(--danger-color)}.checkbox-message.success{color:var(--success-color)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { checkboxInput: [{ type: i0.ViewChild, args: ['checkboxInput', { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
+                    }, template: "<div class=\"checkbox-container\">\r\n  <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\r\n    <input\r\n      #checkboxInput\r\n      type=\"checkbox\"\r\n      class=\"checkbox-input\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-label]=\"computedAriaLabel()\"\r\n      [attr.aria-checked]=\"ariaChecked()\"\r\n      [attr.aria-required]=\"required() || null\"\r\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n      (change)=\"toggle()\"\r\n      (keydown)=\"handleKeydown($event)\"\r\n    />\r\n    \r\n    <span class=\"checkbox-control\">\r\n      @if (checked() && !indeterminate()) {\r\n        <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n      }\r\n      @if (indeterminate()) {\r\n        <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\r\n      }\r\n    </span>\r\n\r\n    <span class=\"checkbox-text\" #labelSlot>\r\n      @if (label()) {\r\n        {{ label() }}\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </span>\r\n  </label>\r\n\r\n  @if (error()) {\r\n    <div [id]=\"uniqueId + '-error'\" class=\"checkbox-message error\" role=\"alert\">\r\n      {{ error() }}\r\n    </div>\r\n  } @else if (success()) {\r\n    <div [id]=\"uniqueId + '-success'\" class=\"checkbox-message success\" role=\"status\">\r\n      {{ success() }}\r\n    </div>\r\n  }\r\n</div>", styles: [":host{display:inline-flex;flex-direction:column}.checkbox-container{display:flex;flex-direction:column;gap:var(--form-field-gap)}.checkbox-label{display:inline-flex;align-items:center;gap:var(--form-label-gap);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.checkbox-label.label-left{flex-direction:row-reverse;justify-content:space-between}.checkbox-input{position:absolute;opacity:0;width:0;height:0}.checkbox-control{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:.125rem solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:all var(--animation-duration-fast) var(--animation-easing-default);color:#fff;position:relative;flex-shrink:0}:host.checkbox-checked .checkbox-control,:host.checkbox-indeterminate .checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus-visible+.checkbox-control{outline:.125rem solid var(--focus-outline-color);outline-offset:.125rem}.checkbox-control i{font-size:.875rem;line-height:1}:host.checkbox-small .checkbox-control{width:1rem;height:1rem}:host.checkbox-large .checkbox-control{width:1.5rem;height:1.5rem}:host.checkbox-error .checkbox-control{border-color:var(--danger-color)}:host.checkbox-error.checkbox-checked .checkbox-control{background:var(--danger-color)}:host.checkbox-success .checkbox-control{border-color:var(--success-color)}:host.checkbox-success.checkbox-checked .checkbox-control{background:var(--success-color)}:host.checkbox-disabled{opacity:var(--opacity-disabled);cursor:not-allowed}:host.checkbox-disabled .checkbox-label{cursor:not-allowed}.checkbox-message{font-size:.875rem}.checkbox-message.error{color:var(--danger-color)}.checkbox-message.success{color:var(--success-color)}\n"] }]
+        }], propDecorators: { checkboxInput: [{ type: i0.ViewChild, args: ['checkboxInput', { isSignal: true }] }], labelSlot: [{ type: i0.ViewChild, args: ['labelSlot', { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
 
 class PshCollapseComponent {
     constructor() {
@@ -1325,14 +1334,18 @@ class PshCollapseComponent {
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), transform: (value) => {
                 if (!['default', 'outline'].includes(value)) {
-                    console.warn(`[psh-collapse] Invalid variant "${value}", falling back to "default"`);
+                    if (isDevMode()) {
+                        console.warn(`[psh-collapse] Invalid variant "${value}", falling back to "default"`);
+                    }
                     return 'default';
                 }
                 return value;
             } });
         this.size = input('medium', { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: (value) => {
                 if (!['small', 'medium', 'large'].includes(value)) {
-                    console.warn(`[psh-collapse] Invalid size "${value}", falling back to "medium"`);
+                    if (isDevMode()) {
+                        console.warn(`[psh-collapse] Invalid size "${value}", falling back to "medium"`);
+                    }
                     return 'medium';
                 }
                 return value;
@@ -3505,16 +3518,31 @@ class PshPaginationComponent {
         this.itemsPerPageInput = input(10, { ...(ngDevMode ? { debugName: "itemsPerPageInput" } : /* istanbul ignore next */ {}), alias: 'itemsPerPage' });
         this.itemsPerPage = linkedSignal(this.itemsPerPageInput, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : /* istanbul ignore next */ []));
+        /**
+         * Number of pages used for rendering and navigation: never below 1, and never
+         * written back to the `totalPages` input. `totalPages` is derived data owned by
+         * the caller (`Math.ceil(total / pageSize)`, or a server-side page count), so the
+         * component reads it and clamps its own view of it instead of correcting it.
+         */
+        this.effectiveTotalPages = computed(() => {
+            const total = this.totalPages();
+            return Number.isInteger(total) && total >= 1 ? total : 1;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveTotalPages" }] : /* istanbul ignore next */ []));
         this.size = input(this.config.size ?? 'medium', { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: (value) => {
                 if (!['small', 'medium', 'large'].includes(value)) {
-                    console.warn(`[psh-pagination] Invalid size "${value}", falling back to "medium"`);
+                    if (isDevMode()) {
+                        console.warn(`[psh-pagination] Invalid size "${value}", falling back to "medium"`);
+                    }
                     return 'medium';
                 }
                 return value;
             } });
         this.variant = input(this.config.variant ?? 'default', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), transform: (value) => {
                 if (!['default', 'outline'].includes(value)) {
-                    console.warn(`[psh-pagination] Invalid variant "${value}", falling back to "default"`);
+                    if (isDevMode()) {
+                        console.warn(`[psh-pagination] Invalid variant "${value}", falling back to "default"`);
+                    }
                     return 'default';
                 }
                 return value;
@@ -3559,7 +3587,7 @@ class PshPaginationComponent {
             const pages = [];
             const halfVisible = Math.floor(this.maxVisiblePages() / 2);
             let start = Math.max(1, this.currentPage() - halfVisible);
-            const end = Math.min(this.totalPages(), start + this.maxVisiblePages() - 1);
+            const end = Math.min(this.effectiveTotalPages(), start + this.maxVisiblePages() - 1);
             if (end - start + 1 < this.maxVisiblePages()) {
                 start = Math.max(1, end - this.maxVisiblePages() + 1);
             }
@@ -3571,60 +3599,70 @@ class PshPaginationComponent {
         ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
         this.state = computed(() => this.getState(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-        this.canGoNext = computed(() => this.currentPage() < this.totalPages(), /* @ts-ignore */
+        this.canGoNext = computed(() => this.currentPage() < this.effectiveTotalPages(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "canGoNext" }] : /* istanbul ignore next */ []));
         this.canGoPrevious = computed(() => this.currentPage() > 1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "canGoPrevious" }] : /* istanbul ignore next */ []));
         this.isFirstPage = computed(() => this.currentPage() === 1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isFirstPage" }] : /* istanbul ignore next */ []));
-        this.isLastPage = computed(() => this.currentPage() === this.totalPages(), /* @ts-ignore */
+        this.isLastPage = computed(() => this.currentPage() === this.effectiveTotalPages(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isLastPage" }] : /* istanbul ignore next */ []));
         this.currentPageAnnouncement = computed(() => {
-            return `Page ${this.currentPage()} sur ${this.totalPages()}`;
+            return `Page ${this.currentPage()} sur ${this.effectiveTotalPages()}`;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentPageAnnouncement" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            const total = this.totalPages();
-            if (total < 1 || !Number.isFinite(total)) {
-                console.warn(`[psh-pagination] Invalid totalPages "${total}", setting to 1`);
-                this.totalPages.set(1);
-            }
-        });
+        if (isDevMode()) {
+            effect(() => {
+                // `0` is a legitimate state (empty list, or a server-side page count that is
+                // not loaded yet): stay silent. Only report what betrays a caller bug.
+                const total = this.totalPages();
+                if (total !== 0 && (!Number.isInteger(total) || total < 1)) {
+                    console.warn(`[psh-pagination] Invalid totalPages "${total}", using 1 page`);
+                }
+            });
+            effect(() => {
+                const maxVisible = this.maxVisiblePages();
+                if (maxVisible < 1 || !Number.isFinite(maxVisible)) {
+                    console.warn(`[psh-pagination] Invalid maxVisiblePages "${maxVisible}", must be >= 1`);
+                }
+            });
+        }
+        // `currentPage` IS owned by the component (it navigates), so correcting it with
+        // a write-back is the intended behaviour — clamped on the derived page count.
         effect(() => {
             const current = this.currentPage();
-            const total = this.totalPages();
+            const total = this.effectiveTotalPages();
             if (current < 1 || !Number.isFinite(current)) {
-                console.warn(`[psh-pagination] Invalid currentPage "${current}", setting to 1`);
+                if (isDevMode()) {
+                    console.warn(`[psh-pagination] Invalid currentPage "${current}", setting to 1`);
+                }
                 this.currentPage.set(1);
             }
-            else if (current > total && total >= 1) {
-                console.warn(`[psh-pagination] currentPage "${current}" exceeds totalPages "${total}", setting to ${total}`);
+            else if (current > total) {
+                if (isDevMode()) {
+                    console.warn(`[psh-pagination] currentPage "${current}" exceeds totalPages "${total}", setting to ${total}`);
+                }
                 this.currentPage.set(total);
             }
         });
-        effect(() => {
-            const maxVisible = this.maxVisiblePages();
-            if (maxVisible < 1 || !Number.isFinite(maxVisible)) {
-                console.warn(`[psh-pagination] Invalid maxVisiblePages "${maxVisible}", must be >= 1`);
-            }
-        });
     }
     getState() {
         if (this.currentPage() === 1)
             return 'first';
-        if (this.currentPage() === this.totalPages())
+        if (this.currentPage() === this.effectiveTotalPages())
             return 'last';
         return 'default';
     }
     goToPage(page) {
-        if (page !== this.currentPage() && page >= 1 && page <= this.totalPages()) {
+        const total = this.effectiveTotalPages();
+        if (page !== this.currentPage() && page >= 1 && page <= total) {
             this.currentPage.set(page);
             this.pageChange.emit(page);
         }
-        else if (page < 1 || page > this.totalPages()) {
+        else if (page < 1 || page > total) {
             this.navigationError.emit({
                 action: 'goToPage',
-                reason: `Page ${page} is out of bounds (1-${this.totalPages()})`,
+                reason: `Page ${page} is out of bounds (1-${total})`,
             });
         }
     }
@@ -3632,7 +3670,7 @@ class PshPaginationComponent {
         this.goToPage(1);
     }
     goToLastPage() {
-        this.goToPage(this.totalPages());
+        this.goToPage(this.effectiveTotalPages());
     }
     goToNextPage() {
         if (this.canGoNext()) {
@@ -3865,11 +3903,13 @@ class PshRadioComponent {
         // so aria-describedby references whichever message is actually rendered.
         this.ariaDescribedBy = computed(() => this.errorMessageId() ?? this.successMessageId(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            if (!this.label() && !this.ariaLabel() && !this.hasProjectedContent()) {
-                console.warn('[psh-radio] No accessible label provided. Please use label input, ariaLabel input, or projected content.');
-            }
-        }, { allowSignalWrites: false });
+        if (isDevMode()) {
+            effect(() => {
+                if (!this.label() && !this.ariaLabel() && !this.hasProjectedContent()) {
+                    console.warn('[psh-radio] No accessible label provided. Please use label input, ariaLabel input, or projected content.');
+                }
+            });
+        }
     }
     getState() {
         if (this.disabled())
@@ -3880,6 +3920,11 @@ class PshRadioComponent {
             return 'success';
         return this.checked() ? 'checked' : 'unchecked';
     }
+    /**
+     * Declares whether a label is projected (`<psh-radio>Label</psh-radio>`). Not detected
+     * automatically yet: until a consumer calls this, a projected label still triggers the
+     * dev-only accessibility warning and `aria-label="Radio"` overrides the visible text.
+     */
     updateProjectedContent(hasContent) {
         this.hasProjectedContent.set(hasContent);
     }