@nanahoshi/mona-ui 0.24.2 → 0.24.5

package/types/nanahoshi-mona-ui-dropdowns.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InputSignal, InjectionToken, OutputEmitterRef, TemplateRef } from '@angular/core';
+import { InjectionToken, InputSignal, OutputEmitterRef, Signal, TemplateRef } from '@angular/core';
 import { Predicate, Selector } from '@mirei/ts-collections';
 import { ListSizeInputType, GroupableOptions, ListItem } from '@nanahoshi/mona-ui/internal/list';
 import { PopupCloseEvent, PopupRef, PopupSettings } from '@nanahoshi/mona-ui/popup';
@@ -20,30 +20,34 @@ interface DropdownDataInput<TData> {
     readonly textField: InputSignal<DropdownFieldSelectorType<TData, string>>;
     readonly valueField: InputSignal<DropdownFieldSelectorType<TData, unknown>>;
 }
+declare const DROPDOWN_DATA_INPUT_TOKEN: InjectionToken<DropdownDataInput<unknown>>;
+/**
+ * @deprecated Use {@link DROPDOWN_DATA_INPUT_TOKEN}.
+ */
 declare const DropdownDataInputToken: InjectionToken<DropdownDataInput<unknown>>;
 
 interface DropdownPopupInput {
     readonly close: OutputEmitterRef<PopupCloseEvent>;
     readonly closed: OutputEmitterRef<void>;
-    readonly disabled: InputSignal<boolean>;
+    readonly disabled: Signal<boolean>;
     readonly open: OutputEmitterRef<PreventableEvent>;
     readonly opened: OutputEmitterRef<void>;
     readonly popupHeight: InputSignal<ListSizeInputType>;
     readonly popupWidth: InputSignal<ListSizeInputType>;
-    readonly readonly: InputSignal<boolean>;
+    readonly readonly: Signal<boolean>;
     readonly touch: OutputEmitterRef<void>;
 }
 declare const DROPDOWN_POPUP_INPUT_TOKEN: InjectionToken<DropdownPopupInput>;
 
-declare class DropdownFilterableDirective<TData> {
+declare class DropdownFilterableDirective {
     #private;
     readonly filter: i0.InputSignal<string>;
     readonly filterChange: i0.OutputEmitterRef<FilterChangeEvent>;
     readonly filterPlaceholder: i0.InputSignal<string>;
     readonly options: i0.InputSignal<"" | Partial<FilterableOptions>>;
     constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownFilterableDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownFilterableDirective<any>, "        mona-auto-complete[monaDropDownFilterable],        mona-dropdown-list[monaDropDownFilterable],        mona-combo-box[monaDropDownFilterable],        mona-multi-select[monaDropDownFilterable]    ", never, { "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "options": { "alias": "monaDropDownFilterable"; "required": false; "isSignal": true; }; }, { "filterChange": "filterChange"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownFilterableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownFilterableDirective, "        mona-auto-complete[monaDropDownFilterable],        mona-dropdown-list[monaDropDownFilterable],        mona-combo-box[monaDropDownFilterable],        mona-multi-select[monaDropDownFilterable]    ", never, { "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "options": { "alias": "monaDropDownFilterable"; "required": false; "isSignal": true; }; }, { "filterChange": "filterChange"; }, never, never, true, never>;
 }
 
 declare class DropdownFooterTemplateDirective {
@@ -58,11 +62,11 @@ declare class DropdownGroupHeaderTemplateDirective {
 
 declare class DropdownGroupableDirective<TData> {
     #private;
-    readonly groupBy: i0.InputSignal<string | Selector<TData, any> | null | undefined>;
-    readonly options: i0.InputSignal<"" | GroupableOptions<TData, any>>;
+    readonly groupBy: i0.InputSignal<string | Selector<TData, unknown> | null | undefined>;
+    readonly options: i0.InputSignal<"" | GroupableOptions<TData, unknown>>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownGroupableDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownGroupableDirective<any>, "        mona-auto-complete[monaDropDownGroupable],        mona-combo-box[monaDropDownGroupable],        mona-dropdown-list[monaDropDownGroupable],        mona-multi-select[monaDropDownGroupable],    ", never, { "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "options": { "alias": "monaDropDownGroupable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownGroupableDirective<any>, "        mona-auto-complete[monaDropDownGroupable],        mona-combo-box[monaDropDownGroupable],        mona-dropdown-list[monaDropDownGroupable],        mona-multi-select[monaDropDownGroupable]    ", never, { "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "options": { "alias": "monaDropDownGroupable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class DropdownHeaderTemplateDirective {
@@ -80,12 +84,12 @@ declare class DropdownNoDataTemplateDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownNoDataTemplateDirective, "        ng-template[monaDropDownNoDataTemplate],        ng-template[monaAutoCompleteNoDataTemplate],        ng-template[monaDropDownListNoDataTemplate],        ng-template[monaDropDownTreeNoDataTemplate],        ng-template[monaComboBoxNoDataTemplate],        ng-template[monaMultiSelectNoDataTemplate]    ", never, {}, {}, never, never, true, never>;
 }
 
-declare class DropdownVirtualScrollDirective<TData> {
+declare class DropdownVirtualScrollDirective {
     #private;
     readonly options: i0.InputSignal<"" | Partial<VirtualScrollOptions>>;
     constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownVirtualScrollDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownVirtualScrollDirective<any>, "        mona-auto-complete[monaDropDownVirtualScroll],        mona-dropdown-list[monaDropDownVirtualScroll],        mona-combo-box[monaDropDownVirtualScroll],        mona-multi-select[monaDropDownVirtualScroll]    ", never, { "options": { "alias": "monaDropDownVirtualScroll"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownVirtualScrollDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownVirtualScrollDirective, "        mona-auto-complete[monaDropDownVirtualScroll],        mona-dropdown-list[monaDropDownVirtualScroll],        mona-combo-box[monaDropDownVirtualScroll],        mona-multi-select[monaDropDownVirtualScroll]    ", never, { "options": { "alias": "monaDropDownVirtualScroll"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class DropdownDataHandlerDirective {
@@ -123,12 +127,19 @@ declare class DropdownListPopupHandlerDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownListPopupHandlerDirective, "[monaDropdownListPopupHandler]", never, {}, {}, never, never, true, [{ directive: typeof DropdownPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
 }
 
+/**
+ * Announces how many results a dropdown shows after its list is filtered, or after its items change, while the
+ * popup is open ("3 results available", "No results found").
+ *
+ * The announcement goes through the CDK `LiveAnnouncer`, whose live region lives at the end of the document, so it
+ * never becomes part of the combobox's content. The highlighted option isn't announced here:
+ * `aria-activedescendant` already does that.
+ */
 declare class DropdownLiveRegionDirective {
     #private;
-    protected readonly liveRegionText: i0.Signal<string>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownLiveRegionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownLiveRegionDirective, "span[monaDropdownLiveRegion]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownLiveRegionDirective, "[monaDropdownLiveRegion]", never, {}, {}, never, never, true, never>;
 }
 
 declare class DropdownPrefixTemplateDirective {
@@ -144,6 +155,12 @@ declare class DropdownSuffixTemplateDirective {
 declare class DropdownService {
     readonly beforeKeydown$: Subject<PreventableEvent<KeyboardEvent>>;
     readonly beforeNavigate$: Subject<PreventableEvent<KeyboardEvent>>;
+    /**
+     * Set when the popup finishes closing: whether focus may return to the dropdown. It is `false` when the user
+     * moved focus outside the dropdown and its popup first, for example by clicking another field or pressing
+     * Tab. Read it from `popupCloseComplete$` before calling `focus()`.
+     */
+    readonly focusCanReturn: i0.WritableSignal<boolean>;
     readonly keydown$: Subject<KeyboardEvent>;
     readonly popupCloseComplete$: Subject<PopupCloseEvent<unknown>>;
     readonly popupCloseStart$: Subject<PopupCloseEvent<unknown>>;
@@ -159,12 +176,12 @@ declare class DropdownService {
     static ɵprov: i0.ɵɵInjectableDeclaration<DropdownService>;
 }
 
-declare class DropdownListService {
+declare class DropdownListService<TData = unknown> {
     readonly navigate$: Subject<{
-        item: ListItem<any>;
+        item: ListItem<TData>;
     }>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownListService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<DropdownListService>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownListService<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DropdownListService<any>>;
 }
 
 declare const dropdownPopupThemeVariants: (props?: ({
@@ -176,5 +193,5 @@ type DropdownPopupVariantInput = VariantInputs<DropdownPopupVariantProps>;
 
 declare const DROPDOWNS_DEFAULT_MESSAGES: MonaDropdownsMessages;
 
-export { DROPDOWNS_DEFAULT_MESSAGES, DROPDOWN_POPUP_INPUT_TOKEN, DropdownDataHandlerDirective, DropdownDataInputToken, DropdownFilterableDirective, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownGroupableDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, DropdownListPopupHandlerDirective, DropdownListService, DropdownLiveRegionDirective, DropdownNoDataTemplateDirective, DropdownPopupHandlerDirective, DropdownPrefixTemplateDirective, DropdownService, DropdownSuffixTemplateDirective, DropdownVirtualScrollDirective, dropdownPopupThemeVariants };
+export { DROPDOWNS_DEFAULT_MESSAGES, DROPDOWN_DATA_INPUT_TOKEN, DROPDOWN_POPUP_INPUT_TOKEN, DropdownDataHandlerDirective, DropdownDataInputToken, DropdownFilterableDirective, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownGroupableDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, DropdownListPopupHandlerDirective, DropdownListService, DropdownLiveRegionDirective, DropdownNoDataTemplateDirective, DropdownPopupHandlerDirective, DropdownPrefixTemplateDirective, DropdownService, DropdownSuffixTemplateDirective, DropdownVirtualScrollDirective, dropdownPopupThemeVariants };
 export type { DropdownDataInput, DropdownFieldPredicateType, DropdownFieldSelectorType, DropdownPopupInput, DropdownPopupVariantInput, DropdownPopupVariantProps };

package/types/nanahoshi-mona-ui-i18n.d.ts

@@ -289,6 +289,7 @@ interface MonaListBoxMessages {
 interface MonaMultiSelectMessages {
     readonly clear: string;
     readonly itemsCount: (count: number) => string;
+    readonly removeMoreItems: (count: number) => string;
 }
 
 interface MonaNotificationMessages {

package/types/nanahoshi-mona-ui-internal.d.ts

@@ -80,6 +80,14 @@ type Action<P = void, R = void> = (arg: P) => R;
  */
 declare const createElementControlId: (level?: number, length?: number) => string;
 
+/**
+ * Whether a closing popup may move focus back to its trigger without taking it from somewhere the user put it.
+ * That holds while focus is on the page itself or inside one of `containers`, usually the trigger and the popup.
+ * A click on another field that closed the popup, or a Tab out of it, must leave focus where it went.
+ * This is the rule the CDK dialog uses.
+ */
+declare function focusCanReturn(document: Document, ...containers: ReadonlyArray<Element | null | undefined>): boolean;
+
 declare function focusElement(host: HTMLElement, element: HTMLElement | ElementRef<HTMLElement> | string): void;
 
 declare const rxFromResize: (target: Element | Iterable<Element>, options?: ResizeObserverOptions) => Observable<ResizeObserverEntry[]>;
@@ -151,7 +159,9 @@ interface TypeaheadModifiers {
  * Any single letter or digit in any script counts, plus space, `-` and `_`.
  */
 declare const isTypeaheadKey: (key: string, modifiers?: TypeaheadModifiers) => boolean;
+/** How long typeahead waits after the last key before it starts a new search, in milliseconds. */
+declare const TYPEAHEAD_RESET_DELAY = 200;
 declare const setupTypeahead: (typeaheadKey$: Observable<string>) => Observable<string>;
 
-export { AttributeBinderDirective, NavigationKeys, NavigationKeysList, createElementControlId, focusElement, hex2rgba, hsla2hsva, hsva2rgba, isNavigationKey, isTypeaheadKey, isValidHex, isValidHsla, isValidRgb, restoreOverlayScroll, rgba2hex, rgba2hsla, rgba2hsva, rxFromResize, rxTimeout, setWindowStyles, setupTypeahead, string2Hsla, string2rgba, themeControlBackdropClasses, themeControlSurfaceClasses, themeOverlayBackdropClasses, themeOverlaySurfaceClasses, themeRaisedBackdropClasses, themeRaisedSurfaceClasses, toCssValue };
+export { AttributeBinderDirective, NavigationKeys, NavigationKeysList, TYPEAHEAD_RESET_DELAY, createElementControlId, focusCanReturn, focusElement, hex2rgba, hsla2hsva, hsva2rgba, isNavigationKey, isTypeaheadKey, isValidHex, isValidHsla, isValidRgb, restoreOverlayScroll, rgba2hex, rgba2hsla, rgba2hsva, rxFromResize, rxTimeout, setWindowStyles, setupTypeahead, string2Hsla, string2rgba, themeControlBackdropClasses, themeControlSurfaceClasses, themeOverlayBackdropClasses, themeOverlaySurfaceClasses, themeRaisedBackdropClasses, themeRaisedSurfaceClasses, toCssValue };
 export type { Action, AttributeConfig, Channel, ColorScheme, HSL, HSLA, HSV, HSVA, HSVChannel, RGB, RGBA, RGBAChannel, RGBChannel, TypeaheadModifiers, VariantInputs, WindowStyleSettings };

package/types/nanahoshi-mona-ui-locales-ar-sa.d.ts

@@ -255,6 +255,7 @@ declare const MONA_AR_SA_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-de-de.d.ts

@@ -255,6 +255,7 @@ declare const MONA_DE_DE_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-es-es.d.ts

@@ -255,6 +255,7 @@ declare const MONA_ES_ES_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-fr-fr.d.ts

@@ -255,6 +255,7 @@ declare const MONA_FR_FR_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-id-id.d.ts

@@ -255,6 +255,7 @@ declare const MONA_ID_ID_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-it-it.d.ts

@@ -255,6 +255,7 @@ declare const MONA_IT_IT_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-ja-jp.d.ts

@@ -255,6 +255,7 @@ declare const MONA_JA_JP_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-ko-kr.d.ts

@@ -255,6 +255,7 @@ declare const MONA_KO_KR_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-pt-br.d.ts

@@ -255,6 +255,7 @@ declare const MONA_PT_BR_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-ru-ru.d.ts

@@ -255,6 +255,7 @@ declare const MONA_RU_RU_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-tr-tr.d.ts

@@ -255,6 +255,7 @@ declare const MONA_TR_TR_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-zh-cn.d.ts

@@ -255,6 +255,7 @@ declare const MONA_ZH_CN_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-zh-tw.d.ts

@@ -255,6 +255,7 @@ declare const MONA_ZH_TW_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-multi-select.d.ts

@@ -43,6 +43,9 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
     protected readonly activeDescendant: _angular_core.Signal<string | null>;
     protected readonly affixClass: _angular_core.Signal<string>;
     protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly chipMessages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaChipMessages>;
+    protected readonly clearButtonVisible: _angular_core.Signal<boolean>;
+    protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
     protected readonly expanded: _angular_core.Signal<boolean>;
     protected readonly footerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly groupHeaderTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
@@ -65,7 +68,13 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
     protected readonly valueTextMap: _angular_core.Signal<_mirei_ts_collections.ImmutableDictionary<ListItem<TData>, string>>;
     protected readonly visibleTagCount: _angular_core.Signal<number>;
     /**
-     * @description Sets the aria-label attribute of the multi select component.
+     * @description ID of an element that describes the multi select, such as help text or an error message.
+     * @default ""
+     */
+    readonly ariaDescribedBy: _angular_core.InputSignal<string>;
+    /**
+     * @description Accessible name for the multi select. Describe what it represents.
+     * Falls back to {@link placeholder} when neither this nor {@link ariaLabelledBy} is set.
      * @default ""
      */
     readonly ariaLabel: _angular_core.InputSignal<string>;
@@ -78,12 +87,12 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
      * @description Closes the popup automatically after an item is selected or deselected.
      * @default false
      */
-    readonly autoClose: _angular_core.InputSignal<boolean>;
+    readonly autoClose: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Renders a checkbox next to each item in the popup list to indicate its selected state.
      * @default false
      */
-    readonly checkboxes: _angular_core.InputSignal<boolean>;
+    readonly checkboxes: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Emits when the popup is about to close. This event is preventable.
      */
@@ -101,22 +110,23 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
      * @description Disables the component, preventing the popup from opening and blocking tag removal.
      * @default false
      */
-    readonly disabled: _angular_core.ModelSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Marks the multi select as invalid. When bound to a signal form field via `[formField]`,
      * this is written by the `FormField` directive.
      * @default false
      */
-    readonly invalid: _angular_core.InputSignal<boolean>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description A predicate function or the name of the field that determines whether an item is disabled.
      */
     readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
     /**
-     * @description Sets the loading state of the multi select component.
+     * @description Shows a loading indicator, in place of the clear button, and marks the field busy. It doesn't
+     * block interaction: the field stays usable while data loads.
      * @default false
      */
-    readonly loading: _angular_core.InputSignal<boolean>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Emits when the popup is about to open. This event is preventable.
      */
@@ -125,13 +135,20 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
      * @description Emits after the popup is opened.
      */
     readonly opened: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Text shown when nothing is selected. It also names the multi select when neither {@link ariaLabel}
+     * nor {@link ariaLabelledBy} is set.
+     * @default ""
+     */
+    readonly placeholder: _angular_core.InputSignal<string>;
     /**
      * @description Sets the class of the popup element.
      * @default ""
      */
     readonly popupClass: _angular_core.InputSignal<string>;
     /**
-     * @description Sets the height of the popup element.
+     * @description Maximum height of the popup, in pixels or as a CSS length. Shorter lists shrink to fit. When
+     * unset, the popup is at most 200 pixels tall.
      * @default null
      */
     readonly popupHeight: _angular_core.InputSignal<ListSizeInputType>;
@@ -144,12 +161,12 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
      * @description Sets the readonly state of the multi select component.
      * @default false
      */
-    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the required state of the multi select component.
      * @default false
      */
-    readonly required: _angular_core.InputSignal<boolean>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the border radius of the multi select component.
      * @default "medium"
@@ -159,7 +176,7 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
      * @description Renders a button that clears all selected items when at least one item is selected.
      * @default false
      */
-    readonly showClearButton: _angular_core.InputSignal<boolean>;
+    readonly showClearButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description The size of the multi select component.
      * @default "medium"
@@ -173,8 +190,8 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
      */
     readonly textField: _angular_core.InputSignal<DropdownFieldSelectorType<TData, string>>;
     /**
-     * @description Emitted when the multi select is interacted with on blur, selection, remove, or clear.
-     * The `FormField` directive listens to this to mark the field as touched.
+     * @description Emitted when focus leaves the multi select. Moving between it, its chips, its clear button and its
+     * popup doesn't count. The `FormField` directive listens to this to mark the field as touched.
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
     /**
@@ -182,7 +199,7 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
      * this is written by the `FormField` directive.
      * @default false
      */
-    readonly touched: _angular_core.InputSignal<boolean>;
+    readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
      * @default ""
@@ -215,10 +232,14 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
      *
      * @default false
      */
-    readonly valuePrimitive: _angular_core.InputSignal<boolean>;
+    readonly valuePrimitive: _angular_core.InputSignalWithTransform<boolean, unknown>;
     constructor();
-    focus(): void;
-    protected onBlur(event?: FocusEvent): void;
+    /**
+     * @description Moves focus to the multi select.
+     * @param options Passed to `HTMLElement.focus()`, for example `{ preventScroll: true }`.
+     */
+    focus(options?: FocusOptions): void;
+    protected onFocusOut(event: FocusEvent): void;
     protected onItemSelect(): void;
     protected onPopupPointerDown(event: PointerEvent): void;
     protected onSelectedItemGroupRemove(event: Event): void;
@@ -231,14 +252,17 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
     private setBackspaceKeySubscription;
     private setEnterKeySubscription;
     private setEventListeners;
+    private setPopupCloseSubscription;
+    private setSpaceKeySubscription;
     private setSubscriptions;
     private synchronizeSelection;
+    private toggleHighlightedItem;
     private updateValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelectComponent<any, any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelectComponent<any, any>, "mona-multi-select", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; "checkboxes": { "alias": "checkboxes"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "valuePrimitive": { "alias": "valuePrimitive"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "disabled": "disabledChange"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "tagTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelectComponent<any, any>, "mona-multi-select", never, { "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; "checkboxes": { "alias": "checkboxes"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "valuePrimitive": { "alias": "valuePrimitive"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "tagTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownLiveRegionDirective; inputs: {}; outputs: {}; }]>;
 }
 
-declare class MultiSelectSummaryTagDirective<TData> {
+declare class MultiSelectSummaryTagDirective {
     #private;
     private readonly summaryTagTemplate;
     /**
@@ -248,8 +272,8 @@ declare class MultiSelectSummaryTagDirective<TData> {
      */
     readonly tagCount: _angular_core.InputSignal<number>;
     constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelectSummaryTagDirective<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MultiSelectSummaryTagDirective<any>, "mona-multi-select[monaMultiSelectSummaryTag]", never, { "tagCount": { "alias": "monaMultiSelectSummaryTag"; "required": false; "isSignal": true; }; }, {}, ["summaryTagTemplate"], never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelectSummaryTagDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MultiSelectSummaryTagDirective, "mona-multi-select[monaMultiSelectSummaryTag]", never, { "tagCount": { "alias": "monaMultiSelectSummaryTag"; "required": false; "isSignal": true; }; }, {}, ["summaryTagTemplate"], never, true, never>;
 }
 
 declare class MultiSelectSummaryTagTemplateDirective {