@sumaris-net/ngx-components 21.0.0 → 21.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "21.0.0",
+  "version": "21.1.0",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",

package/src/assets/manifest.json

@@ -2,7 +2,7 @@
   "name": "ngx-sumaris-components",
   "short_name": "ngx-sumaris-components",
   "manifest_version": 1,
-  "version": "21.0.0",
+  "version": "21.1.0",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{

package/src/theme/_material.scss

@@ -102,11 +102,28 @@
   --mat-select-trigger-text-line-height: inherit;
 }
 
+// Material 3 theme no longer emits the legacy (M2) badge sizing tokens that
+// ngx-sumaris-components and the apps rely on (e.g. pastilles on mat-icon hosts).
+// Without them, small badges collapse (font-size 0, 6px dot) and become invisible.
+// See issue sumaris-app#2090 (Capture / SFA side-panel pastilles).
+.mat-badge-content {
+  --mat-badge-small-size-text-size: var(--mat-badge-legacy-small-size-text-size, 9px);
+  --mat-badge-small-size-line-height: var(--mat-badge-legacy-small-size-line-height, 16px);
+  --mat-badge-small-size-container-size: var(--mat-badge-legacy-small-size-container-size, 16px);
+
+  --mat-badge-text-size: var(--mat-badge-legacy-text-size, 11px);
+  --mat-badge-line-height: var(--mat-badge-legacy-line-height, 22px);
+  --mat-badge-container-size: var(--mat-badge-legacy-container-size, 22px);
+
+  --mat-badge-large-size-text-size: var(--mat-badge-legacy-large-size-text-size, 14px);
+  --mat-badge-large-size-line-height: var(--mat-badge-legacy-large-size-line-height, 28px);
+  --mat-badge-large-size-container-size: var(--mat-badge-legacy-large-size-container-size, 28px);
+}
+
 .mat-badge-primary .mat-badge-content {
   background-color: var(--ion-color-tertiary);
   color: var(--ion-color-tertiary-contrast);
 }
-
 .mat-badge-accent .mat-badge-content {
   background-color: var(--ion-color-accent);
   color: var(--ion-color-accent-contrast);

package/src/theme/_ngx-components.forms.scss

@@ -41,6 +41,12 @@ form.form-container {
 
   --mat-checkbox-label-text-color: var(--ion-text-color);
   --mat-form-field-state-layer-color: var(--app-form-field-focus-background-color);
+  // Hover/focus feedback (state layer over the field): Material applies the hover
+  // overlay only when both the layer color and the hover opacity resolve. Keep them
+  // explicit so the color change on hover is guaranteed
+  // (see issue sumaris-app#2090 — Settings page lost its hover highlight after the Angular 21 migration)
+  --mat-form-field-hover-state-layer-opacity: 0.04;
+  --mat-form-field-focus-state-layer-opacity: 0.12;
   --mat-form-field-container-height: 45px;
   --mat-form-field-container-text-size: inherit;
   --mat-form-field-filled-label-display: block;
@@ -59,6 +65,12 @@ form.form-container {
   --mat-slide-toggle-unselected-hover-track-color: var(--app-form-field-background-color-shade);
   --mat-slide-toggle-unselected-focus-track-color: var(--app-form-field-background-color-shade);
 
+  // M3 switches are wider than M2: a toggle used as a form field suffix touched
+  // the right edge of the field frame (e.g. 'Thème sombre ?' in Settings) — refs #2090
+  mat-slide-toggle[matSuffix] {
+    margin-right: 8px;
+  }
+
   .mat-form-field-disabled,
   .mat-mdc-input-element:disabled {
     color: var(--app-form-color-disabled, #{$app-form-color-disabled}) !important;