ng-hub-ui-forms 22.30.0 → 22.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-hub-ui-forms",
-  "version": "22.30.0",
+  "version": "22.32.0",
   "license": "MIT",
   "description": "Accessible, signal-based form fields for Angular (input, textarea, slider, segmented, select, datepicker, file input with drag & drop and upload progress) 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)",
@@ -37,7 +37,7 @@
     "@angular/core": ">=21.0.0",
     "@angular/forms": ">=21.0.0",
     "@angular/platform-browser": ">=21.0.0",
-    "ng-hub-ui-utils": ">=22.11.0"
+    "ng-hub-ui-utils": ">=22.12.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/styles/_field.scss

@@ -47,10 +47,21 @@ hub-timepicker {
 
 		// Label sits in the first column, aligned to the control row. It is capped
 		// at the max width and ellipsizes when its text is longer.
-		> .hub-field__label {
+		//
+		// Two selectors because the label is not always a direct child: with
+		// `formTextType="tooltip"` it shares a `__label-row` with the hint trigger.
+		// Whichever of the two the grid actually lays out takes the column and the cap;
+		// the ellipsis always belongs to the label, wrapped or not.
+		> .hub-field__label,
+		> .hub-field__label-row {
 			grid-column: 1;
-			display: block;
 			max-width: var(--hub-form-label-horizontal-max-width);
+		}
+
+		> .hub-field__label,
+		> .hub-field__label-row > .hub-field__label {
+			display: block;
+			min-width: 0;
 			overflow: hidden;
 			white-space: nowrap;
 			text-overflow: ellipsis;
@@ -77,11 +88,86 @@ hub-timepicker {
 		font-weight: var(--hub-label-font-weight);
 	}
 
+	/**
+	 * Label row: the label at one end, the helper-text trigger at the other.
+	 *
+	 * Only rendered when a field asks for `formTextType="tooltip"`. The label stays a
+	 * direct child of `.hub-field` in every other case, because that is what the
+	 * horizontal grid and a good deal of existing markup address.
+	 *
+	 * The mark is pushed to the end with an auto margin rather than with
+	 * `justify-content: space-between`, which only separates two children: a floating-label
+	 * field puts the hint in the row on its own, and space-between would leave it hanging at
+	 * the start. The auto margin sends it to the end either way, so a column of fields lines
+	 * its question marks up instead of scattering them wherever each label happens to stop.
+	 */
+	&__label-row {
+		display: flex;
+		align-items: center;
+		gap: var(--hub-form-field-gap);
+
+		> .hub-field__label {
+			min-width: 0;
+		}
+
+		> .hub-field__hint {
+			margin-inline-start: auto;
+		}
+	}
+
 	&__required {
 		color: var(--hub-form-required-color);
 	}
 
-	&--disabled .hub-field__label {
+	/**
+	 * The helper-text trigger — a question mark in a circle.
+	 *
+	 * A `<button>`, and deliberately outside the `<label>`: activating a label focuses
+	 * the control it names, so a trigger nested in one would fire the tooltip *and*
+	 * jump the caret into the field. Its accessible name is the helper text itself, so
+	 * a screen reader gets what a pointer gets from hovering, without waiting for a
+	 * tooltip it cannot see.
+	 */
+	&__hint {
+		flex: none;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		inline-size: var(--hub-form-hint-size);
+		block-size: var(--hub-form-hint-size);
+		padding: 0;
+		color: var(--hub-form-hint-color);
+		background-color: var(--hub-form-hint-bg);
+		border: var(--hub-form-hint-border-width) solid var(--hub-form-hint-border-color);
+		border-radius: 50%;
+		font-family: inherit;
+		font-size: var(--hub-form-hint-font-size);
+		font-weight: var(--hub-form-hint-font-weight);
+		line-height: 1;
+		cursor: help;
+		transition: var(--hub-form-transition);
+
+		// The glyph is decorative: the button already carries the text as its name, and
+		// an `aria-label` overrides generated content anyway.
+		&::before {
+			content: '?';
+		}
+
+		&:hover {
+			color: var(--hub-form-hint-hover-color);
+			background-color: var(--hub-form-hint-hover-bg);
+			border-color: var(--hub-form-hint-hover-border-color);
+		}
+
+		&:focus-visible {
+			outline: 0;
+			color: var(--hub-form-hint-hover-color);
+			box-shadow: 0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color);
+		}
+	}
+
+	&--disabled .hub-field__label,
+	&--disabled .hub-field__hint {
 		opacity: var(--hub-form-disabled-opacity);
 	}
 }

package/styles/_tokens.scss

@@ -40,6 +40,26 @@
 	--hub-form-text-font-size: var(--hub-ref-font-size-sm, 0.875rem);
 	--hub-form-text-margin-top: var(--hub-ref-space-1, 0.25rem);
 
+	// ── Helper-text tooltip trigger (`formTextType="tooltip"`) ───────────────
+	// The question mark that stands at the end of the label row. Drawn from these
+	// tokens rather than from an icon font: `ng-hub-ui-icons` is not a dependency of
+	// this package, and taking one on for a single glyph would make every consumer of
+	// a text input install an icon set.
+	//
+	// Sized in `em` of the label, not in `rem`: the mark belongs to the label it sits
+	// beside, so a form that scales its labels down scales the mark with them instead
+	// of leaving a circle that grows relative to the words next to it.
+	--hub-form-hint-size: 1.15em;
+	--hub-form-hint-font-size: var(--hub-ref-font-size-xs, 0.75rem);
+	--hub-form-hint-font-weight: var(--hub-ref-font-weight-bold, 700);
+	--hub-form-hint-color: var(--hub-sys-text-muted, #6c757d);
+	--hub-form-hint-bg: transparent;
+	--hub-form-hint-border-width: 1px;
+	--hub-form-hint-border-color: var(--hub-sys-border-color-default, #dee2e6);
+	--hub-form-hint-hover-color: var(--hub-sys-text-primary, #212529);
+	--hub-form-hint-hover-bg: var(--hub-sys-surface-elevated, #f8f9fa);
+	--hub-form-hint-hover-border-color: var(--hub-sys-border-color-default, #dee2e6);
+
 	--hub-form-focus-ring-width: var(--hub-sys-focus-ring-width, 0.25rem);
 	--hub-form-focus-ring-color: var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25));
 

package/styles/index.scss

@@ -7,6 +7,13 @@
 //
 //   // styles.scss
 //   @use 'ng-hub-ui-forms/styles';
+//
+// Fields using `formTextType="tooltip"` also need the tooltip's own sheet, which
+// ships with `ng-hub-ui-utils`: the tooltip element is appended to `<body>`, out of
+// reach of anything declared here. Without it the mark still works and still speaks
+// to a screen reader, but the label it opens is unstyled.
+//
+//   @use 'ng-hub-ui-utils/styles/tooltip';
 // ─────────────────────────────────────────────────────────────────────────
 
 @use 'tokens';

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

@@ -58,6 +58,30 @@ declare abstract class HubFormControl implements OnInit, AfterContentInit, OnDes
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubFormControl, never, never, { "formControlName": { "alias": "formControlName"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, { "required": "requiredChange"; }, never, never, true, never>;
 }
 
+/**
+ * Possible display types for form helper text.
+ */
+type FormTextType = 'bottom' | 'tooltip';
+/**
+ * Enum for form helper text display types.
+ */
+declare enum FormTextTypes {
+    Bottom = "bottom",
+    Tooltip = "tooltip"
+}
+/**
+ * Possible label display types shared by the form field components.
+ */
+type HubLabelType = 'floating' | 'stacked' | 'horizontal';
+/**
+ * Enum for label display types.
+ */
+declare enum HubLabelTypes {
+    Floating = "floating",
+    Stacked = "stacked",
+    Horizontal = "horizontal"
+}
+
 /**
  * Marks a template as the validation error message for a specific error key.
  *
@@ -108,6 +132,17 @@ declare abstract class HubFieldControl extends HubFormControl implements Control
     readonly id: string;
     /** Query for a projected `hubFormText` helper template. */
     readonly formTextTmp: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /** Helper text for the field. Where it is shown is {@link formTextType}'s business. */
+    readonly formText: _angular_core.InputSignal<string>;
+    /**
+     * Where the helper text is shown: under the control (`bottom`, the default) or behind
+     * a question mark at the end of the label row (`tooltip`).
+     *
+     * The rule the product settled on: one sentence goes below, where it is read without
+     * being asked for; anything longer goes in the tooltip, because a paragraph under
+     * every field turns a form into a document and pushes the next field off the screen.
+     */
+    readonly formTextType: _angular_core.InputSignal<FormTextType>;
     /** Query for projected `hubValidationError` templates. */
     readonly errorTpts: _angular_core.Signal<readonly HubValidationErrorDirective[]>;
     /** Whether the field is disabled. */
@@ -123,6 +158,16 @@ declare abstract class HubFieldControl extends HubFormControl implements Control
     readonly showValid: _angular_core.InputSignal<boolean>;
     /** Optional success message shown below the control while {@link showsValid}. */
     readonly validFeedback: _angular_core.InputSignal<string | null>;
+    /**
+     * Whether the helper text is carried by the label-row trigger instead of the block
+     * below the control.
+     *
+     * Gated on `formText()` having content, and that is the whole reason a projected
+     * `hubFormText` template still renders below in tooltip mode: the tooltip takes a
+     * string, so asking it to carry markup would drop the markup silently. A field with
+     * a template keeps its helper text where the template can actually be shown.
+     */
+    protected readonly showsFormTextTooltip: _angular_core.Signal<boolean>;
     onChange: (value: any) => void;
     onTouched: () => void;
     protected readonly _nativeErrors: _angular_core.WritableSignal<ValidationErrors | null>;
@@ -162,7 +207,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; }; "showValid": { "alias": "showValid"; "required": false; "isSignal": true; }; "validFeedback": { "alias": "validFeedback"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, ["formTextTmp", "errorTpts"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubFieldControl, never, never, { "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "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. */
@@ -651,30 +696,6 @@ declare const HUB_FILE_UPLOADER: InjectionToken<HubFileUploader>;
  */
 declare function provideHubFileUploader(uploader: HubFileUploader | Type<HubFileUploader>): EnvironmentProviders;
 
-/**
- * Possible display types for form helper text.
- */
-type FormTextType = 'bottom' | 'tooltip';
-/**
- * Enum for form helper text display types.
- */
-declare enum FormTextTypes {
-    Bottom = "bottom",
-    Tooltip = "tooltip"
-}
-/**
- * Possible label display types shared by the form field components.
- */
-type HubLabelType = 'floating' | 'stacked' | 'horizontal';
-/**
- * Enum for label display types.
- */
-declare enum HubLabelTypes {
-    Floating = "floating",
-    Stacked = "stacked",
-    Horizontal = "horizontal"
-}
-
 /**
  * Projects content into the **inline-start** affix area of a `<hub-input>` (left in
  * LTR, right in RTL). Use it for a leading icon — a `<hub-icon>`, currency symbol,
@@ -743,7 +764,6 @@ declare class HubInputComponent extends HubFieldControl {
     #private;
     protected readonly _inputFormats: typeof HubInputFormats;
     protected readonly _labelTypes: typeof HubLabelTypes;
-    protected readonly _formTextTypes: typeof FormTextTypes;
     protected readonly _value: _angular_core.WritableSignal<HubInputValue>;
     /**
      * Whether the password value is currently revealed (password format only). Two-way
@@ -809,10 +829,6 @@ declare class HubInputComponent extends HubFieldControl {
      * invisible input.
      */
     readonly plaintext: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Helper text shown below the control. */
-    readonly formText: _angular_core.InputSignal<string>;
-    /** Helper text placement. Only `bottom` is supported. */
-    readonly formTextType: _angular_core.InputSignal<FormTextType>;
     /** Text shown before the control as an input-group addon (text-like formats). */
     readonly prepend: _angular_core.InputSignal<string | string[]>;
     /** Text shown after the control as an input-group addon (text-like formats). */
@@ -963,7 +979,7 @@ declare class HubInputComponent extends HubFieldControl {
     /** Clears the selected file(s). */
     protected clearFile(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubInputComponent, "hub-input", never, { "passwordRevealed": { "alias": "passwordRevealed"; "required": false; "isSignal": true; }; "passwordToggle": { "alias": "passwordToggle"; "required": false; "isSignal": true; }; "hideOnBlur": { "alias": "hideOnBlur"; "required": false; "isSignal": true; }; "capsLockWarning": { "alias": "capsLockWarning"; "required": false; "isSignal": true; }; "passwordStrength": { "alias": "passwordStrength"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "plaintext": { "alias": "plaintext"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "unmaskValue": { "alias": "unmaskValue"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; }, { "passwordRevealed": "passwordRevealedChange"; "labelType": "labelTypeChange"; "placeholder": "placeholderChange"; "min": "minChange"; "max": "maxChange"; "indeterminate": "indeterminateChange"; "valueChange": "valueChange"; "enter": "enter"; "search": "search"; }, ["prefixDir", "suffixDir", "_prependTpl", "_appendTpl"], ["[hubInputPrefix]", "[hubInputSuffix]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubInputComponent, "hub-input", never, { "passwordRevealed": { "alias": "passwordRevealed"; "required": false; "isSignal": true; }; "passwordToggle": { "alias": "passwordToggle"; "required": false; "isSignal": true; }; "hideOnBlur": { "alias": "hideOnBlur"; "required": false; "isSignal": true; }; "capsLockWarning": { "alias": "capsLockWarning"; "required": false; "isSignal": true; }; "passwordStrength": { "alias": "passwordStrength"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "plaintext": { "alias": "plaintext"; "required": false; "isSignal": true; }; "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "unmaskValue": { "alias": "unmaskValue"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; }, { "passwordRevealed": "passwordRevealedChange"; "labelType": "labelTypeChange"; "placeholder": "placeholderChange"; "min": "minChange"; "max": "maxChange"; "indeterminate": "indeterminateChange"; "valueChange": "valueChange"; "enter": "enter"; "search": "search"; }, ["prefixDir", "suffixDir", "_prependTpl", "_appendTpl"], ["[hubInputPrefix]", "[hubInputSuffix]"], true, never>;
 }
 
 /** Character set accepted by the OTP field. */
@@ -982,7 +998,6 @@ type HubOtpMode = 'numeric' | 'alphanumeric' | 'alpha';
 declare class HubOtpInputComponent extends HubFieldControl {
     #private;
     protected readonly _labelTypes: typeof HubLabelTypes;
-    protected readonly _formTextTypes: typeof FormTextTypes;
     /** Number of cells / characters in the code. */
     readonly length: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Accepted character set. */
@@ -991,10 +1006,6 @@ declare class HubOtpInputComponent extends HubFieldControl {
     readonly label: _angular_core.InputSignal<string>;
     /** Label placement. */
     readonly labelType: _angular_core.InputSignal<HubLabelType>;
-    /** Helper text shown below the cells. */
-    readonly formText: _angular_core.InputSignal<string>;
-    /** Helper-text placement. */
-    readonly formTextType: _angular_core.InputSignal<FormTextType>;
     /** Masks the characters like a password. */
     readonly secret: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Renders the cells read-only. */
@@ -1029,7 +1040,7 @@ declare class HubOtpInputComponent extends HubFieldControl {
     /** Marks the field as touched when focus leaves the whole group. */
     protected onFocusOut(event: FocusEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubOtpInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubOtpInputComponent, "hub-otp-input", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "secret": { "alias": "secret"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "separatorEvery": { "alias": "separatorEvery"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "completed": "completed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubOtpInputComponent, "hub-otp-input", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "secret": { "alias": "secret"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "separatorEvery": { "alias": "separatorEvery"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "completed": "completed"; }, never, never, true, never>;
 }
 
 /**
@@ -1061,7 +1072,6 @@ declare class HubTextareaComponent extends HubFieldControl {
     protected readonly hasPrepend: _angular_core.Signal<boolean>;
     protected readonly hasAppend: _angular_core.Signal<boolean>;
     protected readonly _labelTypes: typeof HubLabelTypes;
-    protected readonly _formTextTypes: typeof FormTextTypes;
     protected readonly _value: _angular_core.WritableSignal<string>;
     /** Label text. */
     readonly label: _angular_core.InputSignal<string>;
@@ -1090,10 +1100,6 @@ declare class HubTextareaComponent extends HubFieldControl {
      * selectable, and it only loses the box. Implies `readonly`.
      */
     readonly plaintext: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Helper text shown below the control. */
-    readonly formText: _angular_core.InputSignal<string>;
-    /** Helper text placement. Only `bottom` is supported in the MVP. */
-    readonly formTextType: _angular_core.InputSignal<FormTextType>;
     /** Extra CSS classes applied to the host element. */
     readonly classlist: _angular_core.InputSignal<string>;
     /** Emits whenever the value changes. */
@@ -1108,7 +1114,7 @@ declare class HubTextareaComponent extends HubFieldControl {
      */
     setValue(value: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubTextareaComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubTextareaComponent, "hub-textarea", never, { "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "cols": { "alias": "cols"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "autoresize": { "alias": "autoresize"; "required": false; "isSignal": true; }; "counter": { "alias": "counter"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "plaintext": { "alias": "plaintext"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["_prependTpl", "_appendTpl"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubTextareaComponent, "hub-textarea", never, { "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "cols": { "alias": "cols"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "autoresize": { "alias": "autoresize"; "required": false; "isSignal": true; }; "counter": { "alias": "counter"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "plaintext": { "alias": "plaintext"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["_prependTpl", "_appendTpl"], never, true, never>;
 }
 
 /** Value of `<hub-slider>`: a number in single mode, a `[lower, upper]` tuple in range mode. */
@@ -1130,7 +1136,6 @@ type HubSliderValue = number | [number, number];
 declare class HubSliderComponent extends HubFieldControl {
     #private;
     protected readonly _labelTypes: typeof HubLabelTypes;
-    protected readonly _formTextTypes: typeof FormTextTypes;
     protected readonly _value: _angular_core.WritableSignal<HubSliderValue>;
     /** Label text. */
     readonly label: _angular_core.InputSignal<string>;
@@ -1146,10 +1151,6 @@ declare class HubSliderComponent extends HubFieldControl {
     readonly step: _angular_core.InputSignalWithTransform<number, string | number>;
     /** Whether to show the value bubble(s) above the thumb(s). */
     readonly showValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Helper text shown below the control. */
-    readonly formText: _angular_core.InputSignal<string>;
-    /** Helper text placement. Only `bottom` is supported. */
-    readonly formTextType: _angular_core.InputSignal<FormTextType>;
     /** Extra CSS classes applied to the host element. */
     readonly classlist: _angular_core.InputSignal<string>;
     /** Emits whenever the value changes. */
@@ -1186,7 +1187,7 @@ declare class HubSliderComponent extends HubFieldControl {
      */
     setUpper(value: string | number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSliderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubSliderComponent, "hub-slider", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubSliderComponent, "hub-slider", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
 /** Context handed to a projected `hubSegmentedOption` template. */
@@ -1292,8 +1293,6 @@ declare class HubSegmentedComponent extends HubFieldControl {
     readonly label: _angular_core.InputSignal<string>;
     /** Label display type (`stacked`, `horizontal`). */
     readonly labelType: _angular_core.InputSignal<HubLabelType>;
-    /** Helper text shown below the control. */
-    readonly formText: _angular_core.InputSignal<string>;
     /** When `true`, options toggle independently and the value is an array. */
     readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** When `true`, the segments stack vertically instead of sitting in a row. */
@@ -1337,7 +1336,7 @@ declare class HubSegmentedComponent extends HubFieldControl {
      */
     private updateIndicator;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSegmentedComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubSegmentedComponent, "hub-segmented", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["optionTpt"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubSegmentedComponent, "hub-segmented", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["optionTpt"], never, true, never>;
 }
 
 /**
@@ -1493,7 +1492,6 @@ declare class HubSelectComponent extends HubFieldControl {
      */
     protected readonly _ngSelectConfig: NgSelectConfig;
     protected readonly _labelTypes: typeof HubLabelTypes;
-    protected readonly _formTextTypes: typeof FormTextTypes;
     protected readonly _selectFormats: typeof HubSelectFormats;
     protected readonly _value: _angular_core.WritableSignal<any>;
     protected readonly _optionTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
@@ -1644,10 +1642,6 @@ declare class HubSelectComponent extends HubFieldControl {
      * by id). When omitted, the vendor's built-in comparison applies.
      */
     readonly compareWith: _angular_core.InputSignal<((a: any, b: any) => boolean) | undefined>;
-    /** Helper text shown below the control. */
-    readonly formText: _angular_core.InputSignal<string>;
-    /** Helper text placement. Only `bottom` is supported. */
-    readonly formTextType: _angular_core.InputSignal<FormTextType>;
     /** Extra CSS classes applied to the host element. */
     readonly classlist: _angular_core.InputSignal<string>;
     /** ARIA attributes forwarded to the vendor's combobox search input. */
@@ -1754,7 +1748,7 @@ declare class HubSelectComponent extends HubFieldControl {
      */
     protected toggleItem(item: any): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubSelectComponent, "hub-select", never, { "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "searchFn": { "alias": "searchFn"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "fixedPlaceholder": { "alias": "fixedPlaceholder"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "addTag": { "alias": "addTag"; "required": false; "isSignal": true; }; "addTagText": { "alias": "addTagText"; "required": false; "isSignal": true; }; "minTermLength": { "alias": "minTermLength"; "required": false; "isSignal": true; }; "typeahead": { "alias": "typeahead"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onOpen": "onOpen"; "onClose": "onClose"; "onClear": "onClear"; "onSearch": "onSearch"; "onAdd": "onAdd"; "onRemove": "onRemove"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; }, ["_optionTpl", "_optgroupTpl", "_labelTpl", "_multiLabelTpl", "_headerTpl", "_footerTpl", "_notFoundTpl", "_legacySuffixTpl", "_prependTpl", "_genericAppendTpl"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubSelectComponent, "hub-select", never, { "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "searchFn": { "alias": "searchFn"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "fixedPlaceholder": { "alias": "fixedPlaceholder"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "addTag": { "alias": "addTag"; "required": false; "isSignal": true; }; "addTagText": { "alias": "addTagText"; "required": false; "isSignal": true; }; "minTermLength": { "alias": "minTermLength"; "required": false; "isSignal": true; }; "typeahead": { "alias": "typeahead"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onOpen": "onOpen"; "onClose": "onClose"; "onClear": "onClear"; "onSearch": "onSearch"; "onAdd": "onAdd"; "onRemove": "onRemove"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; }, ["_optionTpl", "_optgroupTpl", "_labelTpl", "_multiLabelTpl", "_headerTpl", "_footerTpl", "_notFoundTpl", "_legacySuffixTpl", "_prependTpl", "_genericAppendTpl"], ["*"], true, never>;
 }
 
 /** A calendar cell enriched with its selection / range / disabled / focus state. */
@@ -1818,7 +1812,6 @@ declare class HubDatepickerComponent extends HubFieldControl {
     private readonly _panel;
     constructor();
     protected readonly _labelTypes: typeof HubLabelTypes;
-    protected readonly _formTextTypes: typeof FormTextTypes;
     /**
      * The selection, as local `Date`s. This — not the serialized value — is the component's single
      * source of truth: keeping `Date`s means the emitted shape is derived once, on the way out, and
@@ -1925,10 +1918,6 @@ declare class HubDatepickerComponent extends HubFieldControl {
     readonly labels: _angular_core.InputSignal<Partial<HubDatepickerLabels>>;
     /** Whether the picker is read-only. */
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Helper text shown below the control. */
-    readonly formText: _angular_core.InputSignal<string>;
-    /** Helper text placement. Only `bottom` is supported. */
-    readonly formTextType: _angular_core.InputSignal<FormTextType>;
     /** Extra CSS classes applied to the host element. */
     readonly classlist: _angular_core.InputSignal<string>;
     /** Text shown before the control as a group addon. A string is one; an array a run. */
@@ -2095,7 +2084,7 @@ declare class HubDatepickerComponent extends HubFieldControl {
     /** Moves the period grid's focus without selecting. */
     protected onPeriodFocusMove(date: Date): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubDatepickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubDatepickerComponent, "hub-datepicker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "granularity": { "alias": "granularity"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "parse": { "alias": "parse"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "weekdayFormat": { "alias": "weekdayFormat"; "required": false; "isSignal": true; }; "monthFormat": { "alias": "monthFormat"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "timeDisplayFormat": { "alias": "timeDisplayFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "rangeSeparator": { "alias": "rangeSeparator"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showToday": { "alias": "showToday"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "opened": "opened"; "closed": "closed"; "viewChange": "viewChange"; "cleared": "cleared"; }, ["_prependTpl", "_appendTpl"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubDatepickerComponent, "hub-datepicker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "granularity": { "alias": "granularity"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "parse": { "alias": "parse"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "weekdayFormat": { "alias": "weekdayFormat"; "required": false; "isSignal": true; }; "monthFormat": { "alias": "monthFormat"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "timeDisplayFormat": { "alias": "timeDisplayFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "rangeSeparator": { "alias": "rangeSeparator"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showToday": { "alias": "showToday"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "opened": "opened"; "closed": "closed"; "viewChange": "viewChange"; "cleared": "cleared"; }, ["_prependTpl", "_appendTpl"], never, true, never>;
 }
 
 /**
@@ -2118,7 +2107,6 @@ declare class HubDatepickerComponent extends HubFieldControl {
 declare class HubTimepickerComponent extends HubFieldControl {
     #private;
     protected readonly _labelTypes: typeof HubLabelTypes;
-    protected readonly _formTextTypes: typeof FormTextTypes;
     /** Extra classes forwarded to the host, as every field of the family accepts. */
     readonly classlist: _angular_core.InputSignal<string>;
     /** What the bound control holds, as `HH:MM`. */
@@ -2127,10 +2115,6 @@ declare class HubTimepickerComponent extends HubFieldControl {
     readonly label: _angular_core.InputSignal<string>;
     /** Label placement. */
     readonly labelType: _angular_core.InputSignal<HubLabelType>;
-    /** Helper text shown below the field. */
-    readonly formText: _angular_core.InputSignal<string>;
-    /** Helper-text placement. */
-    readonly formTextType: _angular_core.InputSignal<FormTextType>;
     /** Earliest time the field accepts, as `HH:MM`. */
     readonly min: _angular_core.InputSignal<string>;
     /** Latest time the field accepts, as `HH:MM`. */
@@ -2174,7 +2158,7 @@ declare class HubTimepickerComponent extends HubFieldControl {
     writeValue(value: unknown): void;
     protected onInput(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubTimepickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubTimepickerComponent, "hub-timepicker", never, { "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; }, {}, ["_prependTpl", "_appendTpl"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubTimepickerComponent, "hub-timepicker", never, { "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; }, {}, ["_prependTpl", "_appendTpl"], never, true, never>;
 }
 
 /** Context handed to a projected `hubFileIcon` template. */
@@ -2342,7 +2326,6 @@ declare function toFileArray(value: unknown): File[];
  */
 declare class HubFileInputComponent extends HubFieldControl {
     #private;
-    protected readonly _formTextTypes: typeof FormTextTypes;
     protected readonly _items: _angular_core.WritableSignal<HubFileItem[]>;
     /** Releases every object URL and aborts every in-flight upload when the field goes away. */
     private readonly _cleanup;
@@ -2380,10 +2363,6 @@ declare class HubFileInputComponent extends HubFieldControl {
     readonly dropSubtext: _angular_core.InputSignal<string | null>;
     /** Overrides the auto-generated hint that summarizes the active constraints. Pass `''` to hide it. */
     readonly hint: _angular_core.InputSignal<string | null>;
-    /** Helper text shown below the control. */
-    readonly formText: _angular_core.InputSignal<string>;
-    /** Helper text placement. Only `bottom` is supported. */
-    readonly formTextType: _angular_core.InputSignal<FormTextType>;
     /** Extra CSS classes applied to the host element. */
     readonly classlist: _angular_core.InputSignal<string>;
     /** Emits the native value whenever the selection changes. */
@@ -2510,7 +2489,7 @@ declare class HubFileInputComponent extends HubFieldControl {
      */
     protected previewContext(item: HubFileItem): HubFilePreviewContext;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubFileInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubFileInputComponent, "hub-file-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "maxTotalSize": { "alias": "maxTotalSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "dragDrop": { "alias": "dragDrop"; "required": false; "isSignal": true; }; "paste": { "alias": "paste"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "capture": { "alias": "capture"; "required": false; "isSignal": true; }; "autoUpload": { "alias": "autoUpload"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "dropText": { "alias": "dropText"; "required": false; "isSignal": true; }; "dropSubtext": { "alias": "dropSubtext"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "rejected": "rejected"; "fileRemoved": "fileRemoved"; "uploadStateChange": "uploadStateChange"; }, ["iconTpt", "previewTpt", "noticeTpt"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubFileInputComponent, "hub-file-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "maxTotalSize": { "alias": "maxTotalSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "dragDrop": { "alias": "dragDrop"; "required": false; "isSignal": true; }; "paste": { "alias": "paste"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "capture": { "alias": "capture"; "required": false; "isSignal": true; }; "autoUpload": { "alias": "autoUpload"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "dropText": { "alias": "dropText"; "required": false; "isSignal": true; }; "dropSubtext": { "alias": "dropSubtext"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "rejected": "rejected"; "fileRemoved": "fileRemoved"; "uploadStateChange": "uploadStateChange"; }, ["iconTpt", "previewTpt", "noticeTpt"], never, true, never>;
 }
 
 declare class NgOptionComponent implements OnInit {
@@ -2766,15 +2745,25 @@ declare class HubSelectSuffixDirective {
 }
 
 /**
- * Inverts a HEX color, or returns the best contrasting black/white when `bw` is enabled.
+ * Inverts a colour, or returns the best contrasting black/white when `bw` is enabled.
  */
 declare class HubInvertColorPipe implements PipeTransform {
     /**
-     * @param hex - HEX color (`#rgb` or `#rrggbb`).
-     * @param bw - When `true`, returns `#000000` or `#FFFFFF` for maximum contrast.
-     * @returns The inverted (or contrasting) HEX color.
+     * @param color - Any CSS colour: hex (3/4/6/8 digits, `#` optional), `rgb()`, `hsl()`,
+     * `oklch()`, `oklab()` or a named colour.
+     * @param bw - When `true`, returns the black or white that reads best on `color`.
+     * @param metric - How `bw` decides. `'lightness'` (default) matches the
+     * `--hub-sys-color-*-on` design-system token; `'apca'` and `'wcag'` score the two
+     * candidates instead.
+     * @returns The inverted (or contrasting) colour as a hex string, or `#000000` when the
+     * input is empty or is not a colour this can resolve.
+     */
+    transform(color: string, bw?: boolean, metric?: 'lightness' | 'apca' | 'wcag'): string;
+    /**
+     * Resolves the input, retrying with a `#` prefix so bare hex digits keep working — the
+     * pipe has accepted `'336699'` since it shipped and consumers rely on it.
      */
-    transform(hex: string, bw?: boolean): unknown;
+    private resolve;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubInvertColorPipe, never>;
     static ɵpipe: _angular_core.ɵɵPipeDeclaration<HubInvertColorPipe, "hubInvertColor", true>;
 }