@sd-angular/core 19.0.45 → 19.0.46

package/README.md

@@ -120,7 +120,9 @@ export const appConfig: ApplicationConfig = {
 | `--sd-view-label-color` | `var(--sd-black400)` | Label chỉ-đọc (`sd-view`, control ở `viewed`, `sd-section-item`), class `.sd-view-label` |
 | `--sd-view-value-color` | `var(--sd-black500)` | Giá trị chỉ-đọc, class `.sd-view-value` |
 
-`theme()` còn ánh xạ token Material của form field, option và datepicker sang palette này (`assets/scss/themes/_material-tokens.scss`): viền/label/caret khi focus và option/ngày đang chọn dùng `--sd-primary`, viền lúc nghỉ dùng `--sd-black200`, field lỗi chỉ đổi viền sang `--sd-error` (label giữ màu thường). Đổi `primary` trong `theme()` là các trạng thái này đổi theo.
+`theme()` còn ánh xạ token Material của form field, option và datepicker sang palette này (`assets/scss/themes/_material-tokens.scss`): label/caret/mũi tên select khi focus và option/ngày đang chọn dùng `--sd-primary`. Đổi `primary` trong `theme()` là các trạng thái này đổi theo.
+
+Viền (outline) của form field luôn là `--sd-black200` ở mọi trạng thái — nghỉ, hover, focus (chỉ dày hơn) và lỗi (`assets/scss/core/form.scss`, `!important`). Field lỗi báo bằng label, message và dấu `*` màu đỏ; riêng field `hideInlineError` bị lỗi (không có message) có viền `--sd-error`.
 
 ### Custom Theme / Tuỳ chỉnh theme
 

package/assets/scss/core/form.scss

@@ -11,8 +11,22 @@
     color: map.get(color.$color_map, 'error');
   }
 
-  // Màu viền / label / caret theo trạng thái (thường, focus, lỗi): token Material ánh xạ sang palette
-  // Core trong theme() — xem themes/_material-tokens.scss.
+  // Xử lý màu border nhạt bớt
+  // why: viền xám ở MỌI trạng thái (nghỉ, hover, focus, lỗi) — focus chỉ dày hơn, lỗi báo bằng label và
+  // message đỏ. 19.0.45 từng đổi viền focus sang primary và viền lỗi sang đỏ; 19.0.46 trả lại giao diện
+  // cũ vì các app đang dùng không được báo trước thay đổi này.
+  .mat-mdc-notch-piece {
+    &.mdc-notched-outline__leading {
+      border-color: map.get(color.$color_map, 'black200') !important;
+    }
+    &.mdc-notched-outline__notch {
+      border-top-color: map.get(color.$color_map, 'black200') !important;
+      border-bottom-color: map.get(color.$color_map, 'black200') !important;
+    }
+    &.mdc-notched-outline__trailing {
+      border-color: map.get(color.$color_map, 'black200') !important;
+    }
+  }
 
   // Xử lý icon
   .sd-suffix-icon {
@@ -113,12 +127,27 @@
     }
   }
 
-  // Bỏ padding nếu hideInlineError. Viền đỏ khi lỗi đến từ token `error-outline-color` trong theme(),
-  // như mọi field khác.
+  // Bỏ padding nếu hideInlineError
   &.hide-inline-error {
     .mat-mdc-form-field-subscript-wrapper {
       display: none;
     }
+
+    // why: không có message lỗi bên dưới nên field lỗi tô viền đỏ — ngoại lệ duy nhất của viền xám ở trên.
+    &.mat-form-field-invalid {
+      .mat-mdc-notch-piece {
+        &.mdc-notched-outline__leading {
+          border-color: map.get(color.$color_map, 'error') !important;
+        }
+        &.mdc-notched-outline__notch {
+          border-top-color: map.get(color.$color_map, 'error') !important;
+          border-bottom-color: map.get(color.$color_map, 'error') !important;
+        }
+        &.mdc-notched-outline__trailing {
+          border-color: map.get(color.$color_map, 'error') !important;
+        }
+      }
+    }
   }
 
   // Size normal`

package/assets/scss/themes/_material-tokens.scss

@@ -1,20 +1,18 @@
 // Angular Material component tokens mapped onto the Core palette.
 //
-// why: `core/form.scss` used to force `border-color: var(--sd-black200) !important` on the outline
-// pieces in every state, so a focused field only drew a thicker grey outline and an invalid field kept
-// a grey outline under a red label. The colours now go through Material's own tokens, declared by
-// theme() so every theme scope resolves them against its palette and a parent of a field can still
-// override a token for its subtree.
+// why: theme() declares these, so every theme scope resolves them against its palette and a parent of a
+// field can still override a token for its subtree.
 //
-// - Rest / hover / disabled outline: --sd-black200 (the colour the old rule forced).
-// - Focus: --sd-primary for the outline, floating label, caret, select arrow and datepicker toggle.
-// - Error: only the outline (and the filled active indicator) turns --sd-error. The floating label and
-//   the select arrow keep the colour of a valid field; the error message, error icon and required
-//   marker stay red.
+// - Outline: not here. `core/form.scss` forces `--sd-black200` with `!important` on the outline pieces in
+//   every state (red only for an invalid `hideInlineError` field). 19.0.45 moved the outline onto the
+//   focus/error tokens (primary while focused, red when invalid); 19.0.46 restored the grey outline.
+// - Focus: --sd-primary for the floating label, caret, select arrow, datepicker toggle and the filled
+//   active indicator.
+// - Error: Material's own error colours (the Material 2 warn palette of `material-theme.scss`): red label,
+//   caret and select arrow; the filled active indicator turns --sd-error.
 // - Options, checkmarks and datepicker: selected state in --sd-primary.
 //
 // Token names are the Material 19 ones (`--mdc-*-text-field-*`, `--mat-{full,minimal}-pseudo-checkbox-*`).
-// The label references fall back to the Material 2 theme values of `material-theme.scss`.
 
 $-text-field-prefixes: (
   outlined: '--mdc-outlined-text-field-',
@@ -24,20 +22,8 @@ $-text-field-prefixes: (
 @mixin emit() {
   @each $appearance, $prefix in $-text-field-prefixes {
     #{$prefix}caret-color: var(--sd-primary);
-    #{$prefix}error-caret-color: var(--sd-primary);
     #{$prefix}focus-label-text-color: var(--sd-primary);
-    #{$prefix}error-focus-label-text-color: var(--sd-primary);
-    #{$prefix}error-label-text-color: var(#{$prefix}label-text-color, rgba(0, 0, 0, 0.6));
-    #{$prefix}error-hover-label-text-color: var(#{$prefix}hover-label-text-color, rgba(0, 0, 0, 0.87));
-    @if $appearance == outlined {
-      #{$prefix}outline-color: var(--sd-black200);
-      #{$prefix}hover-outline-color: var(--sd-black200);
-      #{$prefix}disabled-outline-color: var(--sd-black200);
-      #{$prefix}focus-outline-color: var(--sd-primary);
-      #{$prefix}error-outline-color: var(--sd-error);
-      #{$prefix}error-hover-outline-color: var(--sd-error);
-      #{$prefix}error-focus-outline-color: var(--sd-error);
-    } @else {
+    @if $appearance == filled {
       #{$prefix}focus-active-indicator-color: var(--sd-primary);
       #{$prefix}error-active-indicator-color: var(--sd-error);
       #{$prefix}error-hover-active-indicator-color: var(--sd-error);
@@ -46,7 +32,6 @@ $-text-field-prefixes: (
   }
   --mat-form-field-focus-select-arrow-color: var(--sd-primary);
   --mat-select-focused-arrow-color: var(--sd-primary);
-  --mat-select-invalid-arrow-color: var(--mat-select-enabled-arrow-color, rgba(0, 0, 0, 0.54));
   --mat-datepicker-toggle-active-state-icon-color: var(--sd-primary);
 
   --mat-option-selected-state-label-text-color: var(--sd-primary);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sd-angular/core",
-  "version": "19.0.45",
+  "version": "19.0.46",
   "peerDependencies": {
     "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0",
     "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0",
@@ -38,14 +38,14 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/sd-angular-core.mjs"
     },
-    "./configurations": {
-      "types": "./configurations/index.d.ts",
-      "default": "./fesm2022/sd-angular-core-configurations.mjs"
-    },
     "./components": {
       "types": "./components/index.d.ts",
       "default": "./fesm2022/sd-angular-core-components.mjs"
     },
+    "./configurations": {
+      "types": "./configurations/index.d.ts",
+      "default": "./fesm2022/sd-angular-core-configurations.mjs"
+    },
     "./directives": {
       "types": "./directives/index.d.ts",
       "default": "./fesm2022/sd-angular-core-directives.mjs"
@@ -274,10 +274,6 @@
       "types": "./forms/label/index.d.ts",
       "default": "./fesm2022/sd-angular-core-forms-label.mjs"
     },
-    "./forms/models": {
-      "types": "./forms/models/index.d.ts",
-      "default": "./fesm2022/sd-angular-core-forms-models.mjs"
-    },
     "./forms/radio": {
       "types": "./forms/radio/index.d.ts",
       "default": "./fesm2022/sd-angular-core-forms-radio.mjs"
@@ -302,30 +298,34 @@
       "types": "./modules/authom/index.d.ts",
       "default": "./fesm2022/sd-angular-core-modules-authom.mjs"
     },
+    "./forms/models": {
+      "types": "./forms/models/index.d.ts",
+      "default": "./fesm2022/sd-angular-core-forms-models.mjs"
+    },
     "./modules/keycloak": {
       "types": "./modules/keycloak/index.d.ts",
       "default": "./fesm2022/sd-angular-core-modules-keycloak.mjs"
     },
-    "./modules/layout": {
-      "types": "./modules/layout/index.d.ts",
-      "default": "./fesm2022/sd-angular-core-modules-layout.mjs"
-    },
     "./modules/permission": {
       "types": "./modules/permission/index.d.ts",
       "default": "./fesm2022/sd-angular-core-modules-permission.mjs"
     },
+    "./modules/layout": {
+      "types": "./modules/layout/index.d.ts",
+      "default": "./fesm2022/sd-angular-core-modules-layout.mjs"
+    },
     "./services/api": {
       "types": "./services/api/index.d.ts",
       "default": "./fesm2022/sd-angular-core-services-api.mjs"
     },
-    "./services/cache": {
-      "types": "./services/cache/index.d.ts",
-      "default": "./fesm2022/sd-angular-core-services-cache.mjs"
-    },
     "./services/confirm": {
       "types": "./services/confirm/index.d.ts",
       "default": "./fesm2022/sd-angular-core-services-confirm.mjs"
     },
+    "./services/cache": {
+      "types": "./services/cache/index.d.ts",
+      "default": "./fesm2022/sd-angular-core-services-cache.mjs"
+    },
     "./services/date-time": {
       "types": "./services/date-time/index.d.ts",
       "default": "./fesm2022/sd-angular-core-services-date-time.mjs"