ng-hub-ui-forms 22.35.2 → 22.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-hub-ui-forms",
-  "version": "22.35.2",
+  "version": "22.37.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 Fernández <carlos.morcillo@me.com> (https://www.carlosmorcillo.com)",
@@ -36,10 +36,10 @@
     "angular21"
   ],
   "peerDependencies": {
-    "@angular/common": ">=19.0.0",
-    "@angular/core": ">=19.0.0",
-    "@angular/forms": ">=19.0.0",
-    "@angular/platform-browser": ">=19.0.0",
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@angular/forms": ">=21.0.0",
+    "@angular/platform-browser": ">=21.0.0",
     "ng-hub-ui-ds": ">=22.0.0",
     "ng-hub-ui-utils": ">=22.12.0"
   },

package/styles/_field.scss

@@ -32,6 +32,15 @@ hub-timepicker {
 }
 
 .hub-field {
+	// The field is the containing block for anything absolute inside it. Only the
+	// visually-hidden label is absolute and has no closer positioned ancestor of its own —
+	// and with none at all it measured from the page, which in a scroll container put it
+	// thousands of pixels down and stretched the scroll height to reach it.
+	// The field is the containing block for anything absolute inside it. Only the
+	// visually-hidden label is absolute and has no closer positioned ancestor of its own —
+	// and with none at all it measured from the page, which in a scroll container put it
+	// thousands of pixels down and stretched the scroll height to reach it.
+	position: relative;
 	display: flex;
 	flex-direction: column;
 	gap: var(--hub-form-field-gap);

package/styles/_tokens.scss

@@ -21,6 +21,16 @@
 	--hub-form-fieldset-padding-y: var(--hub-ref-space-3, 1rem);
 	--hub-form-label-horizontal-max-width: 12rem; // horizontal label caps here, then ellipsizes
 
+	// The height every control in a form row stands at: one line of text between the input's two
+	// paddings and its two borders. An `<input>` reaches it by construction and needs nobody to
+	// say so; a control built out of divs — the select, the segmented bar — reaches it only if it
+	// is told, and each one guessing left a row of fields whose tops and bottoms never met.
+	// Written as the arithmetic rather than as a number so it follows the input scale on its own.
+	--hub-field-control-min-height: calc(
+		var(--hub-input-line-height) * var(--hub-input-font-size) + 2 * var(--hub-input-padding-y) + 2 *
+			var(--hub-input-border-width)
+	);
+
 	--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));
@@ -254,6 +264,13 @@
 	--hub-file-input-padding-x: var(--hub-ref-space-3, 1rem);
 	--hub-file-input-padding-y: var(--hub-ref-space-4, 1.5rem);
 	--hub-file-input-min-height: 7rem;
+	// `appearance="compact"`: the same field on one row. It stands at the shared control height,
+	// so a logo field lines up with the text inputs beside it instead of towering over them, and
+	// takes the input's own padding rather than the panel's.
+	--hub-file-input-compact-min-height: var(--hub-field-control-min-height);
+	--hub-file-input-compact-padding-x: var(--hub-input-padding-x);
+	--hub-file-input-compact-padding-y: var(--hub-input-padding-y);
+	--hub-file-input-compact-gap: var(--hub-ref-space-2, 0.5rem);
 	--hub-file-input-gap: var(--hub-ref-space-2, 0.5rem);
 	--hub-file-input-transition: var(--hub-form-transition);
 	--hub-file-input-hover-border-color: var(--hub-sys-color-primary, #0d6efd);
@@ -448,6 +465,34 @@
 	--hub-file-input-progress-bar-bg: var(--hub-sys-color-primary, #0d6efd);
 	--hub-file-input-progress-indeterminate-duration: 1.2s;
 
+	// ── Page / container drop zone (`hubFileDrop`) ───────────────────────────
+	// The card raised over a whole screen while files are dragged onto it. Its own family rather
+	// than the dropzone's: this one covers something, and what it covers decides how it is drawn.
+	--hub-file-drop-veil-bg: color-mix(in oklch, var(--hub-sys-surface-page, #fff) 75%, transparent);
+	--hub-file-drop-padding: var(--hub-ref-space-4, 1.5rem);
+	--hub-file-drop-gap: var(--hub-ref-space-2, 0.5rem);
+	--hub-file-drop-card-bg: var(--hub-sys-surface-page, #fff);
+	--hub-file-drop-card-padding: var(--hub-ref-space-5, 2rem) var(--hub-ref-space-6, 3rem);
+	--hub-file-drop-card-max-width: 28rem;
+	--hub-file-drop-card-shadow: var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
+	--hub-file-drop-color: var(--hub-sys-text-primary, #212529);
+	--hub-file-drop-border-width: 2px;
+	--hub-file-drop-border-style: dashed;
+	--hub-file-drop-border-color: var(--hub-sys-color-primary, #0d6efd);
+	--hub-file-drop-radius: var(--hub-ref-radius-lg, 0.5rem);
+	--hub-file-drop-icon: var(--hub-file-input-icon);
+	--hub-file-drop-icon-size: 2.5rem;
+	--hub-file-drop-icon-color: var(--hub-sys-color-primary, #0d6efd);
+	--hub-file-drop-text-color: var(--hub-sys-text-primary, #212529);
+	--hub-file-drop-text-font-size: var(--hub-ref-font-size-lg, 1.125rem);
+	--hub-file-drop-text-font-weight: var(--hub-ref-font-weight-medium, 500);
+	--hub-file-drop-subtext-color: var(--hub-sys-text-muted, #6c757d);
+	--hub-file-drop-subtext-font-size: var(--hub-ref-font-size-sm, 0.875rem);
+	--hub-file-drop-transition: 0.15s ease-in-out;
+	// Above a modal, because a screen can be a modal: a drop zone that lands under the dialog it
+	// belongs to is a drop zone nobody can see.
+	--hub-file-drop-zindex: calc(var(--hub-sys-zindex-modal, 1055) + 10);
+
 	// ── Textarea (inherits input) ──────────────────────────────────────────────
 	--hub-textarea-padding-x: var(--hub-input-padding-x);
 	--hub-textarea-padding-y: var(--hub-input-padding-y);
@@ -514,15 +559,11 @@
 	--hub-select-focus-box-shadow: var(--hub-input-focus-box-shadow);
 	--hub-select-placeholder-color: var(--hub-input-placeholder-color);
 	--hub-select-padding-x: var(--hub-input-padding-x);
-	// The height an input reaches by construction — one line of text between two paddings
-	// and two borders. The select is a div and inherits none of that, so the arithmetic is
-	// written out rather than approximated by a number: at 2.5rem it stood 2px taller than
-	// every other field, which a floating label only made more visible by carrying the gap
-	// into a taller box.
-	--hub-select-min-height: calc(
-		var(--hub-input-line-height) * var(--hub-input-font-size) + 2 * var(--hub-input-padding-y) + 2 *
-			var(--hub-input-border-width)
-	);
+	// The shared control height. Kept as its own token so a dense select can still be tuned on
+	// its own, but no longer a second copy of the arithmetic: at 2.5rem it stood 2px taller than
+	// every other field, which a floating label only made more visible by carrying the gap into
+	// a taller box.
+	--hub-select-min-height: var(--hub-field-control-min-height);
 	// Group addons (`prepend` / `append`), chained to the input's so a currency or a
 	// unit looks the same whichever field it is attached to — and still overridable
 	// on its own when a select needs to differ.
@@ -546,7 +587,11 @@
 	--hub-select-option-color: var(--hub-sys-text-primary, #212529);
 	--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, #f8f9fa);
+	// The row under the cursor, derived from the panel it sits in rather than named outright.
+	// It used to read the elevated surface, which is a surface and not a relation: in a theme
+	// with a grey page and a white elevated surface the marked row came out the only white one
+	// in the panel, so it read as the background and everything else as highlighted.
+	--hub-select-option-marked-bg: color-mix(in oklch, var(--hub-select-option-color) 8%, var(--hub-select-dropdown-bg));
 	--hub-select-option-selected-bg: var(--hub-sys-color-primary, #0d6efd);
 	// Text on the selected option sits on the primary accent — read the derived
 	// contrast token so a light/custom primary keeps the label legible.
@@ -625,7 +670,16 @@
 	--hub-segmented-radius: var(--hub-ref-radius-md, 0.375rem);
 	--hub-segmented-gap: 0.25rem;
 	--hub-segmented-padding-x: var(--hub-ref-space-3, 1rem);
-	--hub-segmented-padding-y: var(--hub-ref-space-2, 0.5rem);
+	--hub-segmented-padding-y: var(--hub-ref-space-1, 0.25rem);
+	// The bar stands as tall as any other control in the row, which is the whole reason it has a
+	// height of its own at all: a segmented control lives beside a select, and it measured 43px
+	// against the select's 38 — close enough to look like a mistake and far enough to be one.
+	// The track's own padding is taken off here, so the bar comes out at the field height exactly
+	// rather than at the field height plus its frame.
+	--hub-segmented-min-height: var(--hub-field-control-min-height);
+	// How far `sm` and `lg` step either side of that height, so the three sizes stay a scale and
+	// the middle one keeps its promise.
+	--hub-segmented-size-step: var(--hub-ref-space-2, 0.5rem);
 	// Duration/easing of the single-mode sliding indicator as it moves between options.
 	--hub-segmented-indicator-transition: 0.2s ease;
 }

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

@@ -457,6 +457,18 @@ interface HubFileItem {
  * `inline` shows the files a record already has, through `currentFile`.
  */
 type HubFilePreview = 'none' | 'list' | 'grid' | 'inline';
+/**
+ * How much room the field takes before it holds anything.
+ *
+ * `dropzone` is the invitation everybody knows: a tall panel with a glyph, a line asking for a
+ * drag and a browse control. It earns its height when files are the point of the screen.
+ *
+ * `compact` is the same field on one row — the browse control and the constraints, no glyph and
+ * no drag copy — for the case the tall one is wrong for: a logo beside four text inputs in a
+ * dialog, where the panel took half the height for one small file. It still takes a drop, and
+ * the drag copy would be a lie if it did not.
+ */
+type HubFileInputAppearance = 'dropzone' | 'compact';
 /**
  * A file the record already has on the server, shown by `preview="inline"` while nothing is picked.
  *
@@ -1923,6 +1935,12 @@ declare class HubSelectComponent extends HubFieldControl {
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Whether the dropdown closes after a selection. */
     readonly closeOnSelect: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the search box empties after each selection. Left undefined so the engine keeps its
+     * own rule — it falls back to `closeOnSelect`, which is right until the two are wanted apart:
+     * a tag field that stays open to take the next value still has to clear the term it just used.
+     */
+    readonly clearSearchOnAdd: _angular_core.InputSignal<boolean | undefined>;
     /**
      * Keep the placeholder visible even when a value is selected. Defaults to `false` (the
      * placeholder hides on selection) — ng-select v23 defaults this to `true`, which is not the
@@ -1977,8 +1995,17 @@ declare class HubSelectComponent extends HubFieldControl {
     readonly classlist: _angular_core.InputSignal<string>;
     /** ARIA attributes forwarded to the vendor's combobox search input. */
     protected readonly a11yInputAttrs: _angular_core.Signal<Record<string, string>>;
-    /** Emits whenever the value changes. */
+    /** Emits whenever the value changes. Carries the bound value, the one the form holds. */
     readonly valueChange: _angular_core.OutputEmitterRef<any>;
+    /**
+     * Emits the selected ITEM — the whole object, not the bound value — whenever the selection
+     * changes, which is what `ng-select` has always emitted under this name.
+     *
+     * It exists as a real output because otherwise `(change)` on `<hub-select>` is a DOM listener:
+     * it caught whatever the inner search input happened to bubble, never fired for a value added
+     * by an asynchronous `addTag`, and compiled without a word of warning either way.
+     */
+    readonly change: _angular_core.OutputEmitterRef<any>;
     /** Emits when the control gains focus (dropdown format). */
     readonly onFocus: _angular_core.OutputEmitterRef<any>;
     /** Emits when the control loses focus (dropdown format). */
@@ -2079,7 +2106,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; }; "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"; }, ["_hubOptionTpl", "_ngOptionTpl", "_hubOptgroupTpl", "_ngOptgroupTpl", "_hubLabelTpl", "_ngLabelTpl", "_hubMultiLabelTpl", "_ngMultiLabelTpl", "_hubHeaderTpl", "_ngHeaderTpl", "_hubFooterTpl", "_ngFooterTpl", "_hubNotFoundTpl", "_ngNotFoundTpl", "_hubTypeToSearchTpl", "_ngTypeToSearchTpl", "_hubLoadingTextTpl", "_ngLoadingTextTpl", "_hubLoadingSpinnerTpl", "_ngLoadingSpinnerTpl", "_hubTagTpl", "_ngTagTpl", "_hubClearButtonTpl", "_ngClearButtonTpl", "_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; }; "clearSearchOnAdd": { "alias": "clearSearchOnAdd"; "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"; "change": "change"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onOpen": "onOpen"; "onClose": "onClose"; "onClear": "onClear"; "onSearch": "onSearch"; "onAdd": "onAdd"; "onRemove": "onRemove"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; }, ["_hubOptionTpl", "_ngOptionTpl", "_hubOptgroupTpl", "_ngOptgroupTpl", "_hubLabelTpl", "_ngLabelTpl", "_hubMultiLabelTpl", "_ngMultiLabelTpl", "_hubHeaderTpl", "_ngHeaderTpl", "_hubFooterTpl", "_ngFooterTpl", "_hubNotFoundTpl", "_ngNotFoundTpl", "_hubTypeToSearchTpl", "_ngTypeToSearchTpl", "_hubLoadingTextTpl", "_ngLoadingTextTpl", "_hubLoadingSpinnerTpl", "_ngLoadingSpinnerTpl", "_hubTagTpl", "_ngTagTpl", "_hubClearButtonTpl", "_ngClearButtonTpl", "_legacySuffixTpl", "_prependTpl", "_genericAppendTpl"], ["*"], true, never>;
 }
 
 /** A calendar cell enriched with its selection / range / disabled / focus state. */
@@ -2743,6 +2770,21 @@ declare class HubFileInputComponent extends HubFieldControl {
      * the tiles form a grid whose last tile adds more files.
      */
     readonly preview: _angular_core.InputSignal<HubFilePreview>;
+    /**
+     * How much room the empty field takes: the tall dropzone, or one row.
+     *
+     * `compact` is for the field that is not the point of the screen — a logo among four text
+     * inputs, where the panel and its glyph took half a dialog for one small file. It drops the
+     * glyph and the drag copy and keeps the browse control and the constraints; the drop still
+     * works, so the copy is what goes, not the behaviour. An inline grid's add tile is unaffected:
+     * it is already a tile and has no panel to shrink.
+     *
+     * It is the answer for a field that only picks. A field that has to SHOW what it holds gets
+     * its height from `preview="inline"` instead, which needs room for the picture and is sized
+     * through its own `--hub-file-input-inline-*` tokens — the avatar in the inline example is the
+     * compact version of that shape. Asking for both leaves the inline geometry in charge.
+     */
+    readonly appearance: _angular_core.InputSignal<HubFileInputAppearance>;
     /**
      * The files the record already has, shown by `preview="inline"` among the picked ones: a URL,
      * whose name and type are read from the URL itself, a {@link HubCurrentFile} when the URL does not
@@ -2830,6 +2872,8 @@ declare class HubFileInputComponent extends HubFieldControl {
     protected readonly _canChange: _angular_core.Signal<boolean>;
     /** Whether the user may remove what the field holds. */
     protected readonly _canRemove: _angular_core.Signal<boolean>;
+    /** Whether the empty field is drawn as one row rather than as a panel. */
+    protected readonly _isCompact: _angular_core.Signal<boolean>;
     /** Whether the files sit inside the field (`preview="inline"`), single or multiple. */
     protected readonly _isInline: _angular_core.Signal<boolean>;
     /** One file filling the whole field. */
@@ -3013,7 +3057,28 @@ declare class HubFileInputComponent extends HubFieldControl {
      */
     protected guardNativeClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubFileInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubFileInputComponent, "hub-file-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "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; }; "currentFile": { "alias": "currentFile"; "required": false; "isSignal": true; }; "imagePreview": { "alias": "imagePreview"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "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"; "currentFileRemoved": "currentFileRemoved"; "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; }; "labelType": { "alias": "labelType"; "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; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "currentFile": { "alias": "currentFile"; "required": false; "isSignal": true; }; "imagePreview": { "alias": "imagePreview"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "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"; "currentFileRemoved": "currentFileRemoved"; "uploadStateChange": "uploadStateChange"; }, ["iconTpt", "previewTpt", "noticeTpt"], never, true, never>;
+}
+
+/**
+ * The card a {@link HubFileDropDirective} raises while files are being dragged over its target.
+ *
+ * Created by the directive rather than written by the consumer, so turning a page into a drop
+ * zone stays one attribute. It is `aria-hidden` on purpose: dragging a file is a pointer gesture
+ * and there is nothing here for a screen reader to do — the file field the drop feeds is what
+ * answers to the keyboard, and it is still there.
+ */
+declare class HubFileDropOverlayComponent {
+    /** Whether a drag is currently over the target. */
+    readonly visible: _angular_core.InputSignal<boolean>;
+    /** Whether the card covers the viewport (window scope) rather than its container. */
+    readonly fixed: _angular_core.InputSignal<boolean>;
+    /** The invitation. */
+    readonly text: _angular_core.InputSignal<string>;
+    /** The second line, usually the restrictions. */
+    readonly subtext: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubFileDropOverlayComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubFileDropOverlayComponent, "hub-file-drop-overlay", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "fixed": { "alias": "fixed"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "subtext": { "alias": "subtext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -3438,6 +3503,69 @@ declare class HubSelectSuffixDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSelectSuffixDirective, "[hubSelectSuffix]", never, {}, {}, never, never, true, never>;
 }
 
+/** What the drag is watched on: the element carrying the directive, or the whole window. */
+type HubFileDropScope = 'element' | 'window';
+/**
+ * Turns a container — or the whole window — into a zone that takes dropped files.
+ *
+ * `<hub-file-input>` only accepts a drop inside its own box, which is right for a field and
+ * wrong for a screen: on a list of expenses the natural gesture is to drop the receipt anywhere
+ * on the page, and nothing in the library listened at that level. So every application that
+ * wanted it wrote the same component again — the window listeners, the card over the page, the
+ * type and size checks by hand — and got the same three details wrong, the worst of which is
+ * silent: a file dropped outside a drop target makes the browser navigate away from the page,
+ * unsaved form and all.
+ *
+ * The directive raises its own card while the drag is over the target, applies the same
+ * constraints a file field applies (`accept`, `maxSize`, `minSize`, `maxFiles`) with the same
+ * rejection shape, and hands back what passed.
+ *
+ * It is an addition to a file field and not a replacement: dragging is a pointer gesture, so the
+ * card is `aria-hidden` and the keyboard route stays the field's.
+ *
+ * @example
+ * ```html
+ * <section hubFileDrop="window" accept="image/*" [maxSize]="5_000_000"
+ *          (filesDropped)="attach($event)" (rejected)="warn($event)">
+ *   …the screen…
+ * </section>
+ * ```
+ */
+declare class HubFileDropDirective {
+    #private;
+    /**
+     * Where the drag is watched. `element` is the host and its subtree; `window` is the whole
+     * page, which is the one that also stops the browser from opening a file dropped beside the
+     * target instead of on it.
+     */
+    readonly hubFileDrop: _angular_core.InputSignal<"" | HubFileDropScope>;
+    /** Accepted types, in the same grammar as a file field's `accept`. */
+    readonly accept: _angular_core.InputSignal<string>;
+    /** Largest accepted file, in bytes. */
+    readonly maxSize: _angular_core.InputSignal<number | null>;
+    /** Smallest accepted file, in bytes. */
+    readonly minSize: _angular_core.InputSignal<number | null>;
+    /** How many files one drop may carry. Anything beyond it is rejected, not silently dropped. */
+    readonly maxFiles: _angular_core.InputSignalWithTransform<number | null, unknown>;
+    /** Whether the zone is currently accepting drops. */
+    readonly dropDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the card is drawn. Off leaves the behaviour and lets the consumer draw its own. */
+    readonly overlay: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The card's invitation. Falls back to the global file-input labels. */
+    readonly dropText: _angular_core.InputSignal<string | null>;
+    /** The card's second line. Falls back to the constraints, written out. */
+    readonly dropSubtext: _angular_core.InputSignal<string | null>;
+    /** The files that passed every constraint. Never emitted empty. */
+    readonly filesDropped: _angular_core.OutputEmitterRef<File[]>;
+    /** The files that did not, each with the reason and the limit it broke. */
+    readonly rejected: _angular_core.OutputEmitterRef<HubFileRejection[]>;
+    /** Whether a file drag is currently over the target. */
+    readonly dragActive: _angular_core.WritableSignal<boolean>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubFileDropDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubFileDropDirective, "[hubFileDrop]", never, { "hubFileDrop": { "alias": "hubFileDrop"; "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; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "dropDisabled": { "alias": "dropDisabled"; "required": false; "isSignal": true; }; "overlay": { "alias": "overlay"; "required": false; "isSignal": true; }; "dropText": { "alias": "dropText"; "required": false; "isSignal": true; }; "dropSubtext": { "alias": "dropSubtext"; "required": false; "isSignal": true; }; }, { "filesDropped": "filesDropped"; "rejected": "rejected"; }, never, never, true, never>;
+}
+
 /**
  * Inverts a colour, or returns the best contrasting black/white when `bw` is enabled.
  */
@@ -3891,5 +4019,5 @@ interface HubFormControlAdapter {
  */
 declare const hubFormControlAdapter: HubFormControlAdapter;
 
-export { FormTextTypes, HUB_COLOR_PALETTES, HUB_FILE_UPLOADER, HUB_FORMS_CONFIG, HubAppendDirective, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFileDropzoneNoticeDirective, HubFileIconDirective, HubFileInputComponent, HubFilePreviewDirective, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubPrependDirective, HubSafeUrlPipe, HubSegmentedComponent, HubSegmentedOptionDirective, HubSelectClearButtonDirective, HubSelectComponent, HubSelectFooterDirective, HubSelectFormats, HubSelectHeaderDirective, HubSelectLabelDirective, HubSelectLoadingSpinnerDirective, HubSelectLoadingTextDirective, HubSelectMultiLabelDirective, HubSelectNotFoundDirective, HubSelectOptgroupDirective, HubSelectOptionDirective, HubSelectSuffixDirective, HubSelectTagDirective, HubSelectTypeToSearchDirective, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubTimepickerComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubColorConfig, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFileInputLabels, defaultHubFormsConfig, defaultHubPasswordLabels, defaultInvalidFeedback, fileKey, fileKind, formatFileSize, get, getActiveElement, getMinOrMaxValueFromValidator, hubAcceptedFiles, hubAreEqual, hubFormControlAdapter, hubMaxFileSize, hubMaxFiles, hubMaxTotalSize, hubMinFileSize, hubMinFiles, isDefined, isMaskActive, isString, joinButLast, matchesAccept, provideHubFileUploader, provideHubForms, runInZone, scorePasswordStrength, toFileArray, uuid };
-export type { FormTextType, HubColorConfig, HubColorPaletteName, HubColorSwatch, HubColorSwatchInput, HubCurrentFile, HubDateRange, HubDateValue, HubDatepickerConfig, HubDatepickerGranularity, HubDatepickerLabels, HubDatepickerMode, HubDatepickerValueFormat, HubFileConstraints, HubFileIconContext, HubFileInputLabels, HubFileItem, HubFileKind, HubFilePreview, HubFilePreviewContext, HubFileRejection, HubFileRejectionReason, HubFileStatus, HubFileUploadEvent, HubFileUploader, HubFileValue, HubFormControlAdapter, HubFormControlConfig, HubFormControlHandle, HubFormControlOption, HubFormsConfig, HubGroupErrorTrigger, HubInputFormat, HubLabelType, HubMaskResult, HubOtpMode, HubPasswordLabels, HubPasswordStrengthScore, HubSegmentedOption, HubSegmentedOptionContext, HubSegmentedSize, HubSelectFormat, HubSliderValue };
+export { FormTextTypes, HUB_COLOR_PALETTES, HUB_FILE_UPLOADER, HUB_FORMS_CONFIG, HubAppendDirective, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFileDropDirective, HubFileDropOverlayComponent, HubFileDropzoneNoticeDirective, HubFileIconDirective, HubFileInputComponent, HubFilePreviewDirective, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubPrependDirective, HubSafeUrlPipe, HubSegmentedComponent, HubSegmentedOptionDirective, HubSelectClearButtonDirective, HubSelectComponent, HubSelectFooterDirective, HubSelectFormats, HubSelectHeaderDirective, HubSelectLabelDirective, HubSelectLoadingSpinnerDirective, HubSelectLoadingTextDirective, HubSelectMultiLabelDirective, HubSelectNotFoundDirective, HubSelectOptgroupDirective, HubSelectOptionDirective, HubSelectSuffixDirective, HubSelectTagDirective, HubSelectTypeToSearchDirective, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubTimepickerComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubColorConfig, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFileInputLabels, defaultHubFormsConfig, defaultHubPasswordLabels, defaultInvalidFeedback, fileKey, fileKind, formatFileSize, get, getActiveElement, getMinOrMaxValueFromValidator, hubAcceptedFiles, hubAreEqual, hubFormControlAdapter, hubMaxFileSize, hubMaxFiles, hubMaxTotalSize, hubMinFileSize, hubMinFiles, isDefined, isMaskActive, isString, joinButLast, matchesAccept, provideHubFileUploader, provideHubForms, runInZone, scorePasswordStrength, toFileArray, uuid };
+export type { FormTextType, HubColorConfig, HubColorPaletteName, HubColorSwatch, HubColorSwatchInput, HubCurrentFile, HubDateRange, HubDateValue, HubDatepickerConfig, HubDatepickerGranularity, HubDatepickerLabels, HubDatepickerMode, HubDatepickerValueFormat, HubFileConstraints, HubFileDropScope, HubFileIconContext, HubFileInputAppearance, HubFileInputLabels, HubFileItem, HubFileKind, HubFilePreview, HubFilePreviewContext, HubFileRejection, HubFileRejectionReason, HubFileStatus, HubFileUploadEvent, HubFileUploader, HubFileValue, HubFormControlAdapter, HubFormControlConfig, HubFormControlHandle, HubFormControlOption, HubFormsConfig, HubGroupErrorTrigger, HubInputFormat, HubLabelType, HubMaskResult, HubOtpMode, HubPasswordLabels, HubPasswordStrengthScore, HubSegmentedOption, HubSegmentedOptionContext, HubSegmentedSize, HubSelectFormat, HubSliderValue };