ng-hub-ui-forms 21.0.0 → 22.1.2

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "ng-hub-ui-forms",
-  "version": "21.0.0",
+  "version": "22.1.2",
   "license": "MIT",
   "description": "Accessible, signal-based form fields for Angular (input, textarea, slider, select, datepicker) with automatic error display for controls, FormGroups and FormArrays. Reactive Forms today, Signal Forms ready. Part of the ng-hub-ui family.",
   "author": "Carlos Morcillo <carlos.morcillo@me.com> (https://www.carlosmorcillo.com)",
   "repository": {
     "type": "git",
-    "url": "https://github.com/carlos-morcillo/ng-hub-ui-forms.git"
+    "url": "git+https://github.com/carlos-morcillo/ng-hub-ui-forms.git"
   },
   "homepage": "https://hubui.dev/",
   "keywords": [

package/src/lib/styles/_field.scss

@@ -101,6 +101,17 @@
 			box-shadow: 0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color);
 		}
 	}
+
+	// Opt-in success state (mirror of `--invalid`); applied only when a field
+	// enables `showValid` and the control is touched + valid.
+	&--valid {
+		border-color: var(--hub-form-valid-border-color);
+
+		&:focus {
+			border-color: var(--hub-form-valid-border-color);
+			box-shadow: 0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-valid-focus-ring-color);
+		}
+	}
 }
 
 // Helper text below the control.
@@ -129,4 +140,9 @@
 	&-text {
 		display: block;
 	}
+
+	// Success feedback (opt-in valid state).
+	&--valid {
+		color: var(--hub-form-valid-feedback-color);
+	}
 }

package/src/lib/styles/_tokens.scss

@@ -11,12 +11,21 @@
 	// ── Shared form contract (used by every field) ──────────────────────────
 	--hub-form-field-gap: var(--hub-ref-space-1, 0.25rem); // label ↔ control
 	--hub-form-row-gap: var(--hub-ref-space-3, 1rem); // horizontal label gutter
+	--hub-form-fieldset-padding-x: var(--hub-ref-space-3, 1rem);
+	--hub-form-fieldset-padding-y: var(--hub-ref-space-3, 1rem);
 	--hub-form-label-horizontal-max-width: 12rem; // horizontal label caps here, then ellipsizes
 
 	--hub-form-invalid-color: var(--hub-sys-color-danger, #dc3545);
 	--hub-form-invalid-border-color: var(--hub-sys-color-danger, #dc3545);
 	--hub-form-invalid-focus-ring-color: var(--hub-sys-color-danger-subtle, rgba(220, 53, 69, 0.25));
 
+	// Valid / success — mirror of the invalid contract, shown only when a field
+	// opts in via `showValid` (the success state is never automatic).
+	--hub-form-valid-color: var(--hub-sys-color-success, #198754);
+	--hub-form-valid-border-color: var(--hub-sys-color-success, #198754);
+	--hub-form-valid-focus-ring-color: var(--hub-sys-color-success-subtle, rgba(25, 135, 84, 0.25));
+	--hub-form-valid-feedback-color: var(--hub-form-valid-color);
+
 	--hub-form-feedback-color: var(--hub-form-invalid-color);
 	--hub-form-feedback-font-size: var(--hub-ref-font-size-sm, 0.875rem);
 	--hub-form-feedback-margin-top: var(--hub-ref-space-1, 0.25rem);
@@ -44,7 +53,7 @@
 	--hub-input-font-family: var(--hub-ref-font-family-base, system-ui, sans-serif);
 	--hub-input-font-size: var(--hub-ref-font-size-base, 1rem);
 	--hub-input-font-weight: var(--hub-ref-font-weight-base, 400);
-	--hub-input-line-height: 1.5;
+	--hub-input-line-height: var(--hub-ref-line-height-base, 1.5);
 	--hub-input-padding-y: 0.375rem;
 	--hub-input-padding-x: 0.75rem;
 	--hub-input-border-width: var(--hub-ref-border-width, 1px);
@@ -127,11 +136,13 @@
 	--hub-select-clear-color: var(--hub-sys-text-muted, #6c757d);
 	--hub-select-clear-hover-color: var(--hub-sys-color-danger, #dc3545);
 	--hub-select-option-color: var(--hub-sys-text-primary, #212529);
-	--hub-select-option-padding-x: var(--hub-ref-space-3, 0.75rem);
+	--hub-select-option-padding-x: var(--hub-ref-space-3, 1rem);
 	--hub-select-option-padding-y: var(--hub-ref-space-2, 0.5rem);
-	--hub-select-option-marked-bg: var(--hub-sys-surface-elevated, #f1f3f5);
+	--hub-select-option-marked-bg: var(--hub-sys-surface-elevated, #f8f9fa);
 	--hub-select-option-selected-bg: var(--hub-sys-color-primary, #0d6efd);
-	--hub-select-option-selected-color: #fff;
+	// Text on the selected option sits on the primary accent — read the derived
+	// contrast token so a light/custom primary keeps the label legible.
+	--hub-select-option-selected-color: var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff));
 	--hub-select-optgroup-color: var(--hub-sys-text-muted, #6c757d);
 	--hub-select-value-bg: var(--hub-sys-surface-elevated, #f8f9fa);
 	--hub-select-value-color: var(--hub-sys-text-primary, #212529);
@@ -152,17 +163,20 @@
 	--hub-daterangepicker-border-color: var(--hub-sys-border-color-default, #dee2e6);
 	--hub-daterangepicker-border-radius: var(--hub-ref-radius-md, 0.375rem);
 	--hub-daterangepicker-box-shadow: var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.12));
-	--hub-daterangepicker-padding: var(--hub-ref-space-3, 1rem);
+	--hub-daterangepicker-padding-x: var(--hub-ref-space-3, 1rem);
+	--hub-daterangepicker-padding-y: var(--hub-ref-space-3, 1rem);
 	--hub-daterangepicker-cell-size: 2rem;
 	--hub-daterangepicker-cell-color: var(--hub-sys-text-primary, #212529);
 	--hub-daterangepicker-cell-border-radius: var(--hub-ref-radius-sm, 0.25rem);
-	--hub-daterangepicker-cell-hover-bg: var(--hub-sys-surface-elevated, #f5f5f5);
+	--hub-daterangepicker-cell-hover-bg: var(--hub-sys-surface-elevated, #f8f9fa);
 	--hub-daterangepicker-active-bg: var(--hub-sys-color-primary, #0d6efd);
-	--hub-daterangepicker-active-color: #fff;
-	// Light primary tint (theme-aware): `--hub-sys-color-primary-subtle` is a *dark* navy in
-	// this design system, so derive a soft tint from the primary instead.
-	--hub-daterangepicker-in-range-bg: color-mix(in srgb, var(--hub-sys-color-primary, #0d6efd) 14%, transparent);
-	--hub-daterangepicker-off-color: var(--hub-sys-text-muted, #adb5bd);
+	// Text on the active day sits on the primary accent — derived contrast token.
+	--hub-daterangepicker-active-color: var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff));
+	// Soft primary tint for the in-range band. Mixed in OKLCH (perceptually even)
+	// rather than sRGB; kept independent of `-subtle` (which mixes over the page
+	// surface, not transparent) so the band reads as a translucent overlay.
+	--hub-daterangepicker-in-range-bg: color-mix(in oklch, var(--hub-sys-color-primary, #0d6efd) 14%, transparent);
+	--hub-daterangepicker-off-color: var(--hub-sys-text-muted, #6c757d);
 	--hub-daterangepicker-nav-arrow-color: var(--hub-sys-text-muted, #6c757d);
 	--hub-daterangepicker-nav-arrow-hover-color: var(--hub-sys-text-primary, #212529);
 
@@ -170,10 +184,11 @@
 	--hub-select-button-bg: var(--hub-sys-surface-page, #fff);
 	--hub-select-button-color: var(--hub-sys-text-primary, #212529);
 	--hub-select-button-border-color: var(--hub-sys-border-color-default, #dee2e6);
-	--hub-select-button-padding-x: var(--hub-ref-space-3, 0.75rem);
+	--hub-select-button-padding-x: var(--hub-ref-space-3, 1rem);
 	--hub-select-button-padding-y: var(--hub-ref-space-2, 0.5rem);
 	--hub-select-button-gap: var(--hub-ref-space-2, 0.5rem);
 	--hub-select-button-selected-bg: var(--hub-sys-color-primary, #0d6efd);
-	--hub-select-button-selected-color: #fff;
+	// Text on the selected button sits on the primary accent — derived contrast token.
+	--hub-select-button-selected-color: var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff));
 	--hub-select-button-selected-border-color: var(--hub-sys-color-primary, #0d6efd);
 }

package/types/ng-hub-ui-forms.d.ts

@@ -114,6 +114,15 @@ declare abstract class HubFieldControl extends HubFormControl implements Control
     readonly disabled: _angular_core.ModelSignal<boolean>;
     /** Per-field override for the invalid-feedback message builder. */
     readonly invalidFeedbackTemplateFn: _angular_core.InputSignal<((key: string, value: any) => string) | null>;
+    /**
+     * Opt-in success state. When `true`, a touched + valid field renders the
+     * `--valid` styling (success border + ring). Defaults to the global
+     * {@link HubFormsConfig.showValid}; the success state is never automatic
+     * unless enabled. Has no effect while the field is invalid.
+     */
+    readonly showValid: _angular_core.InputSignal<boolean>;
+    /** Optional success message shown below the control while {@link showsValid}. */
+    readonly validFeedback: _angular_core.InputSignal<string | null>;
     onChange: (value: any) => void;
     onTouched: () => void;
     protected readonly _nativeErrors: _angular_core.WritableSignal<ValidationErrors | null>;
@@ -121,6 +130,10 @@ declare abstract class HubFieldControl extends HubFormControl implements Control
     constructor();
     /** Whether the field should display its error feedback (touched + invalid). */
     get isInvalid(): boolean;
+    /** Whether the field is touched and valid (independent of the opt-in). */
+    get isValid(): boolean;
+    /** Whether the opt-in success state should be displayed (touched + valid + `showValid`). */
+    get showsValid(): boolean;
     /** Current validation errors, from the reactive control or from native validity. */
     get errors(): ValidationErrors | null;
     ngAfterContentInit(): void;
@@ -149,7 +162,7 @@ declare abstract class HubFieldControl extends HubFormControl implements Control
      */
     protected updateNativeErrors(target?: EventTarget | null): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubFieldControl, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubFieldControl, never, never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalidFeedbackTemplateFn": { "alias": "invalidFeedbackTemplateFn"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, ["formTextTmp", "errorTpts"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubFieldControl, never, never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalidFeedbackTemplateFn": { "alias": "invalidFeedbackTemplateFn"; "required": false; "isSignal": true; }; "showValid": { "alias": "showValid"; "required": false; "isSignal": true; }; "validFeedback": { "alias": "validFeedback"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, ["formTextTmp", "errorTpts"], never, true, never>;
 }
 
 /** When a container reveals its group-level validation errors. */
@@ -282,6 +295,12 @@ interface HubFormsConfig {
      * @returns The message string (HTML allowed).
      */
     invalidFeedbackTemplateFn: (key: string, value: any) => string;
+    /**
+     * Whether fields render the opt-in valid/success state by default once they
+     * are touched and valid. `false` keeps the success state off everywhere
+     * (only invalid is automatic); a per-field `showValid` input overrides this.
+     */
+    showValid: boolean;
     /** Global datepicker defaults (locale labels, formats, first day of week…). */
     datepicker: HubDatepickerConfig;
 }