ng-hub-ui-forms 22.33.2 → 22.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-hub-ui-forms",
-  "version": "22.33.2",
+  "version": "22.34.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,8 +37,14 @@
     "@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"
   },
+  "peerDependenciesMeta": {
+    "ng-hub-ui-ds": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "tslib": "^2.3.0"
   },

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

@@ -1346,6 +1346,30 @@ declare class HubSegmentedComponent extends HubFieldControl {
     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>;
 }
 
+/**
+ * The legend of a `<hub-fieldset>` (or any grouped section), with optional required/invalid state
+ * styling.
+ *
+ * Project it as a direct child of the fieldset: it is lifted into the native `<legend>` element,
+ * which is also what `<hub-fieldset legend="…">` builds for you — so a text legend and a rich one
+ * are the same element with the same classes. It also stands alone as a section title.
+ *
+ * @example
+ * ```html
+ * <hub-fieldset [group]="form.controls.address">
+ *   <hub-legend [required]="true" [invalid]="form.controls.address.invalid">Shipping address</hub-legend>
+ * </hub-fieldset>
+ * ```
+ */
+declare class HubLegendComponent {
+    /** Whether to render the required indicator. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether to render the invalid state styling. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubLegendComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubLegendComponent, "hub-legend", never, { "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 /**
  * Groups related fields under a `<fieldset>`/`<legend>` and **automatically displays the
  * group-level (cross-field) validation errors** of the bound `FormGroup`/`FormArray`.
@@ -1362,6 +1386,21 @@ declare class HubSegmentedComponent extends HubFieldControl {
  * parent container. Errors set on the group itself — e.g. by `hubAreEqual` — are rendered without
  * any extra wiring, mirroring how the field components show control-level errors.
  *
+ * ## The legend is always a `<hub-legend>`
+ *
+ * `legend="…"` is shorthand: it builds one for you. When the legend needs more than a string — a
+ * required marker, an icon, a badge — project the element yourself and it lands in the same place:
+ *
+ * ```html
+ * <fieldset hubFieldset [group]="form.controls.address">
+ *   <hub-legend [required]="true">Shipping address</hub-legend>
+ *   …
+ * </fieldset>
+ * ```
+ *
+ * The older `<ng-template hubLegend>` slot still works and is deprecated; see
+ * {@link HubLegendDirective}.
+ *
  * @example
  * ```html
  * <fieldset hubFieldset legend="Credentials" [group]="form.controls.credentials">
@@ -1378,14 +1417,29 @@ declare class HubFieldsetComponent extends HubGroupControl {
      * the appearance classes land on the element that actually is the fieldset in either form.
      */
     protected readonly _isElementForm: boolean;
-    /** Legend text. Ignored when a `hubLegend` template is projected. */
+    /**
+     * Legend text. Rendered inside a `<hub-legend>`, so a text legend and a projected one are the
+     * same element. Ignored when a `<hub-legend>` is projected, or a `hubLegend` template is.
+     */
     readonly legend: _angular_core.InputSignal<string>;
     /** Extra CSS classes applied to the host element. */
     readonly classlist: _angular_core.InputSignal<string>;
-    /** Query for a projected `hubLegend` template. */
+    /**
+     * Query for a projected `hubLegend` template.
+     *
+     * @deprecated Project a `<hub-legend>` element instead — the slot exists only so the legend can
+     * carry markup, and `<hub-legend>` carries markup without an `ng-template` and without an extra
+     * import. Removed in 23.0.0.
+     */
     readonly legendTmp: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /**
+     * A `<hub-legend>` projected as a direct child, which is the way a legend that needs more than
+     * text is written. Queried rather than merely projected because the `<legend>` element must not
+     * be emitted at all when the group has no legend of any kind.
+     */
+    protected readonly _projectedLegend: _angular_core.Signal<HubLegendComponent | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubFieldsetComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubFieldsetComponent, "hub-fieldset, fieldset[hubFieldset]", never, { "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, {}, ["legendTmp"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubFieldsetComponent, "hub-fieldset, fieldset[hubFieldset]", never, { "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, {}, ["legendTmp", "_projectedLegend"], ["hub-legend", "*"], true, never>;
 }
 
 /**
@@ -1420,30 +1474,6 @@ declare class HubFormComponent extends HubGroupControl {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubFormComponent, "form[hubForm]", never, {}, {}, never, ["*"], true, never>;
 }
 
-/**
- * Presentational legend for a `<hub-fieldset>` (or any grouped section), with optional
- * required/invalid state styling.
- *
- * Use it inside a `hubLegend` template, or standalone as a section title.
- *
- * @example
- * ```html
- * <hub-fieldset [group]="form.controls.address">
- *   <ng-template hubLegend>
- *     <hub-legend [required]="true" [invalid]="form.controls.address.invalid">Shipping address</hub-legend>
- *   </ng-template>
- * </hub-fieldset>
- * ```
- */
-declare class HubLegendComponent {
-    /** Whether to render the required indicator. */
-    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Whether to render the invalid state styling. */
-    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubLegendComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubLegendComponent, "hub-legend", never, { "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
 /**
  * Rendering formats for `<hub-select>`.
  *
@@ -1516,13 +1546,42 @@ declare class HubSelectComponent extends HubFieldControl {
     protected readonly _labelTypes: typeof HubLabelTypes;
     protected readonly _selectFormats: typeof HubSelectFormats;
     protected readonly _value: _angular_core.WritableSignal<any>;
+    private readonly _hubOptionTpl;
+    private readonly _ngOptionTpl;
     protected readonly _optionTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly _hubOptgroupTpl;
+    private readonly _ngOptgroupTpl;
     protected readonly _optgroupTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly _hubLabelTpl;
+    private readonly _ngLabelTpl;
     protected readonly _labelTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly _hubMultiLabelTpl;
+    private readonly _ngMultiLabelTpl;
     protected readonly _multiLabelTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly _hubHeaderTpl;
+    private readonly _ngHeaderTpl;
     protected readonly _headerTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly _hubFooterTpl;
+    private readonly _ngFooterTpl;
     protected readonly _footerTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly _hubNotFoundTpl;
+    private readonly _ngNotFoundTpl;
     protected readonly _notFoundTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly _hubTypeToSearchTpl;
+    private readonly _ngTypeToSearchTpl;
+    protected readonly _typeToSearchTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly _hubLoadingTextTpl;
+    private readonly _ngLoadingTextTpl;
+    protected readonly _loadingTextTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly _hubLoadingSpinnerTpl;
+    private readonly _ngLoadingSpinnerTpl;
+    protected readonly _loadingSpinnerTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly _hubTagTpl;
+    private readonly _ngTagTpl;
+    protected readonly _tagTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly _hubClearButtonTpl;
+    private readonly _ngClearButtonTpl;
+    protected readonly _clearButtonTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
     /** Deprecated select-only slot, superseded by `[hubAppend]`. */
     protected readonly _legacySuffixTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
     /** Projected inline-start content (`[hubPrepend]`). */
@@ -1770,7 +1829,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"; }, ["_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"; }, ["_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. */
@@ -2524,6 +2583,163 @@ declare class HubFileInputComponent extends HubFieldControl {
     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; }; "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>;
 }
 
+/**
+ * Hub-named slots for the parts of a `<hub-select>` a consumer can re-draw.
+ *
+ * `hub-select` is built on a vendored copy of ng-select (see `PATCHES.md`), whose own slot
+ * directives are attribute selectors in the `ng-*` namespace: `ng-option-tmp`, `ng-label-tmp` and
+ * ten more. Those were re-exported, so the public surface of `ng-hub-ui-forms` invited consumers to
+ * write markup named after an internal dependency that is re-synced from upstream on a schedule and
+ * that no promise here covers. The directives in this file are the surface the library actually
+ * owns: same slots, same template contexts, hub names, and nothing in `vendor/` changed — so the
+ * automated sync stays as low-conflict as it was.
+ *
+ * Each is a plain marker over an `<ng-template>`; `hub-select` queries it and forwards the template
+ * into the engine with the context documented on each directive.
+ */
+/**
+ * Draws one option in the dropdown list.
+ *
+ * Context: `item` (the raw item), `item$` (the engine's wrapper, carrying `selected`/`disabled`),
+ * `index`, `searchTerm`.
+ *
+ * @example
+ * ```html
+ * <hub-select [items]="users" bindLabel="name">
+ *   <ng-template hubSelectOption let-item="item" let-search="searchTerm">
+ *     <img [src]="item.avatar" alt="" /> {{ item.name }}
+ *   </ng-template>
+ * </hub-select>
+ * ```
+ */
+declare class HubSelectOptionDirective {
+    /** Template reference for the option content. */
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectOptionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSelectOptionDirective, "[hubSelectOption]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Draws a group header when the list is grouped with `groupBy`.
+ *
+ * Context: `item`, `item$`, `index`, `searchTerm`.
+ */
+declare class HubSelectOptgroupDirective {
+    /** Template reference for the group header content. */
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectOptgroupDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSelectOptgroupDirective, "[hubSelectOptgroup]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Draws the selected value inside the closed control, in single-select mode.
+ *
+ * Context: `item`, `label`, `clear`.
+ */
+declare class HubSelectLabelDirective {
+    /** Template reference for the selected-value content. */
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectLabelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSelectLabelDirective, "[hubSelectLabel]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Draws all selected values at once in multiple mode, replacing the per-value chips.
+ *
+ * Context: `items`, `clear`.
+ */
+declare class HubSelectMultiLabelDirective {
+    /** Template reference for the multi-value content. */
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectMultiLabelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSelectMultiLabelDirective, "[hubSelectMultiLabel]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Draws a fixed block above the option list.
+ *
+ * Context: `searchTerm`.
+ */
+declare class HubSelectHeaderDirective {
+    /** Template reference for the dropdown header. */
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSelectHeaderDirective, "[hubSelectHeader]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Draws a fixed block below the option list.
+ *
+ * Context: `searchTerm`.
+ */
+declare class HubSelectFooterDirective {
+    /** Template reference for the dropdown footer. */
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSelectFooterDirective, "[hubSelectFooter]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Replaces the "no items found" message.
+ *
+ * Context: `searchTerm`.
+ */
+declare class HubSelectNotFoundDirective {
+    /** Template reference for the empty-result content. */
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectNotFoundDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSelectNotFoundDirective, "[hubSelectNotFound]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Replaces the "type to search" hint shown before `minTermLength` characters have been typed.
+ *
+ * No context.
+ */
+declare class HubSelectTypeToSearchDirective {
+    /** Template reference for the type-to-search hint. */
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectTypeToSearchDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSelectTypeToSearchDirective, "[hubSelectTypeToSearch]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Replaces the "loading…" message shown while a typeahead is in flight and no item has arrived.
+ *
+ * Context: `searchTerm`.
+ */
+declare class HubSelectLoadingTextDirective {
+    /** Template reference for the loading message. */
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectLoadingTextDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSelectLoadingTextDirective, "[hubSelectLoadingText]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Replaces the spinner drawn in the control while `loading` is set.
+ *
+ * No context.
+ */
+declare class HubSelectLoadingSpinnerDirective {
+    /** Template reference for the loading spinner. */
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectLoadingSpinnerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSelectLoadingSpinnerDirective, "[hubSelectLoadingSpinner]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Replaces the "add <term>" row offered when `addTag` is enabled.
+ *
+ * Context: `searchTerm`.
+ */
+declare class HubSelectTagDirective {
+    /** Template reference for the add-tag row. */
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectTagDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSelectTagDirective, "[hubSelectTag]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Replaces the clear (×) control.
+ *
+ * No context.
+ */
+declare class HubSelectClearButtonDirective {
+    /** Template reference for the clear control. */
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectClearButtonDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSelectClearButtonDirective, "[hubSelectClearButton]", never, {}, {}, never, never, true, never>;
+}
+
 declare class NgOptionComponent implements OnInit {
     readonly value: _angular_core.InputSignal<any>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -2618,11 +2834,24 @@ declare class HubFormTextDirective {
 /**
  * Marks a template as the legend content of a `<hub-fieldset>`.
  *
+ * @deprecated Project a `<hub-legend>` element as a direct child of the fieldset instead. The slot
+ * existed only so a legend could carry markup, and `<hub-legend>` carries markup on its own —
+ * without an `ng-template`, without a second directive to import, and producing the same DOM the
+ * `legend` input produces, so the library has one answer to "how is a legend written". The slot
+ * keeps working until it is removed in **23.0.0**; a fieldset that still uses it renders exactly as
+ * before, so nothing breaks by doing nothing before then.
+ *
  * @example
  * ```html
+ * <!-- before -->
  * <hub-fieldset formGroupName="address">
  *   <ng-template hubLegend>Shipping address <span class="badge">required</span></ng-template>
  * </hub-fieldset>
+ *
+ * <!-- after -->
+ * <hub-fieldset formGroupName="address">
+ *   <hub-legend>Shipping address <span class="badge">required</span></hub-legend>
+ * </hub-fieldset>
  * ```
  */
 declare class HubLegendDirective {
@@ -2671,8 +2900,8 @@ declare class HubAutoresizeDirective implements OnInit {
  * content is always the outermost element on that side.
  *
  * Declared as a template rather than plain projected content because a field's `<ng-content>`
- * is already spoken for — the select's carries `<ng-option>` through to its engine, and the
- * input projects its in-field affixes — so anything projected plainly would land in the wrong
+ * is already spoken for — the select's opens straight into the dropdown engine, and the input
+ * projects its in-field affixes — so anything projected plainly would land in the wrong
  * place. Rendering from a template also fixes the DOM order, which is what keeps tabbing sane
  * around an attached button.
  *
@@ -2720,7 +2949,7 @@ declare class HubPrependDirective {
  * the box and shares its border, so the two read as one field with an action on it.
  *
  * Declared as a template rather than plain projected content because a field's `<ng-content>`
- * is already spoken for — the select's carries `<ng-option>` through to its engine — so
+ * is already spoken for — the select's opens straight into the dropdown engine — so
  * anything projected plainly would land in the wrong place. Rendering from a template also
  * keeps the action after the control in the DOM, so tabbing reaches the field before the button
  * acting on it.
@@ -2751,7 +2980,7 @@ declare class HubAppendDirective {
  * one field with an action on it.
  *
  * Declared as a template rather than projected content because the select's catch-all
- * `<ng-content>` — which carries `<ng-option>` through to the engine — is declared first
+ * `<ng-content>` — which opens straight into the dropdown engine — is declared first
  * and would swallow it. Rendering from a template also keeps the action after the control
  * in the DOM, so tabbing reaches the field before the button acting on it.
  *
@@ -3123,10 +3352,11 @@ declare function uuid(): string;
 /**
  * Returns the active element within the given root, descending into shadow roots when needed.
  *
- * @param root - The document or shadow root to search. Defaults to `document`.
+ * @param root - The document or shadow root to search. Defaults to the global document when there
+ * is one; on a server render there is not, and nothing has focus there anyway.
  * @returns The deepest active element, or `null`.
  */
-declare function getActiveElement(root?: Document | ShadowRoot): Element | null;
+declare function getActiveElement(root?: Document | ShadowRoot | null): Element | null;
 
 /**
  * Pattern-mask utilities for `hub-input`.
@@ -3228,5 +3458,5 @@ interface HubFormControlAdapter {
  */
 declare const hubFormControlAdapter: HubFormControlAdapter;
 
-export { FormTextTypes, 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, HubSelectComponent, HubSelectFormats, HubSelectSuffixDirective, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubTimepickerComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFileInputLabels, defaultHubFormsConfig, defaultHubPasswordLabels, defaultInvalidFeedback, fileKey, formatFileSize, get, getActiveElement, getMinOrMaxValueFromValidator, hubAcceptedFiles, hubAreEqual, hubFormControlAdapter, hubMaxFileSize, hubMaxFiles, hubMaxTotalSize, hubMinFileSize, hubMinFiles, isDefined, isMaskActive, isString, joinButLast, matchesAccept, provideHubFileUploader, provideHubForms, runInZone, scorePasswordStrength, toFileArray, uuid };
+export { FormTextTypes, 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, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFileInputLabels, defaultHubFormsConfig, defaultHubPasswordLabels, defaultInvalidFeedback, fileKey, 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, HubDateRange, HubDateValue, HubDatepickerConfig, HubDatepickerGranularity, HubDatepickerLabels, HubDatepickerMode, HubDatepickerValueFormat, HubFileConstraints, HubFileIconContext, HubFileInputLabels, HubFileItem, 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 };