@nanahoshi/mona-ui 0.24.4 → 0.24.5

package/locales/ar-sa/ar-sa.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "مسح",
-        "itemsCount": "+ {count}"
+        "itemsCount": "+ {count}",
+        "removeMoreItems": "حذف العناصر الإضافية ({count})"
     },
     "notification": {
         "close": "إغلاق",

package/locales/de-de/de-de.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "Leeren",
-        "itemsCount": "{count, plural, =1 {+ # Element} other {+ # Elemente}}"
+        "itemsCount": "{count, plural, =1 {+ # Element} other {+ # Elemente}}",
+        "removeMoreItems": "{count, plural, =1 {# weiteres Element entfernen} other {# weitere Elemente entfernen}}"
     },
     "notification": {
         "close": "Schließen",

package/locales/es-es/es-es.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "Limpiar",
-        "itemsCount": "{count, plural, =1 {+ # elemento} other {+ # elementos}}"
+        "itemsCount": "{count, plural, =1 {+ # elemento} other {+ # elementos}}",
+        "removeMoreItems": "{count, plural, =1 {Quitar # elemento más} other {Quitar # elementos más}}"
     },
     "notification": {
         "close": "Cerrar",

package/locales/fr-fr/fr-fr.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "Effacer",
-        "itemsCount": "{count, plural, =1 {+ # élément} other {+ # éléments}}"
+        "itemsCount": "{count, plural, =1 {+ # élément} other {+ # éléments}}",
+        "removeMoreItems": "{count, plural, =1 {Retirer # autre élément} other {Retirer # autres éléments}}"
     },
     "notification": {
         "close": "Fermer",

package/locales/id-id/id-id.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "Bersihkan",
-        "itemsCount": "+ {count} item"
+        "itemsCount": "+ {count} item",
+        "removeMoreItems": "Hapus {count} item lainnya"
     },
     "notification": {
         "close": "Tutup",

package/locales/it-it/it-it.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "Cancella",
-        "itemsCount": "{count, plural, =1 {+ 1 elemento} other {+ # elementi}}"
+        "itemsCount": "{count, plural, =1 {+ 1 elemento} other {+ # elementi}}",
+        "removeMoreItems": "{count, plural, =1 {Rimuovi un altro elemento} other {Rimuovi altri # elementi}}"
     },
     "notification": {
         "close": "Chiudi",

package/locales/ja-jp/ja-jp.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "クリア",
-        "itemsCount": "+ {count}件"
+        "itemsCount": "+ {count}件",
+        "removeMoreItems": "他の{count}件を削除"
     },
     "notification": {
         "close": "閉じる",

package/locales/ko-kr/ko-kr.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "지우기",
-        "itemsCount": "+ {count}개"
+        "itemsCount": "+ {count}개",
+        "removeMoreItems": "나머지 {count}개 삭제"
     },
     "notification": {
         "close": "닫기",

package/locales/pt-br/pt-br.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "Limpar",
-        "itemsCount": "{count, plural, =1 {+ 1 item} other {+ # itens}}"
+        "itemsCount": "{count, plural, =1 {+ 1 item} other {+ # itens}}",
+        "removeMoreItems": "{count, plural, =1 {Remover mais 1 item} other {Remover mais # itens}}"
     },
     "notification": {
         "close": "Fechar",

package/locales/ru-ru/ru-ru.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "Очистить",
-        "itemsCount": "+ {count, plural, one {# элемент} few {# элемента} many {# элементов} other {# элемента}}"
+        "itemsCount": "+ {count, plural, one {# элемент} few {# элемента} many {# элементов} other {# элемента}}",
+        "removeMoreItems": "Удалить ещё {count, plural, one {# элемент} few {# элемента} many {# элементов} other {# элемента}}"
     },
     "notification": {
         "close": "Закрыть",

package/locales/tr-tr/tr-tr.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "Temizle",
-        "itemsCount": "+ {count} öğe"
+        "itemsCount": "+ {count} öğe",
+        "removeMoreItems": "Diğer {count} öğeyi kaldır"
     },
     "notification": {
         "close": "Kapat",

package/locales/zh-cn/zh-cn.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "清除",
-        "itemsCount": "+ {count} 项"
+        "itemsCount": "+ {count} 项",
+        "removeMoreItems": "删除其余 {count} 项"
     },
     "notification": {
         "close": "关闭",

package/locales/zh-tw/zh-tw.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "清除",
-        "itemsCount": "+ {count} 項"
+        "itemsCount": "+ {count} 項",
+        "removeMoreItems": "移除其餘 {count} 項"
     },
     "notification": {
         "close": "關閉",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.24.4",
+  "version": "0.24.5",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {

package/types/nanahoshi-mona-ui-auto-complete.d.ts

@@ -40,12 +40,11 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
     protected readonly autoCompleteValue: _angular_core.WritableSignal<string>;
     protected readonly autoCompleteValue$: Subject<string | null>;
     protected readonly baseClass: _angular_core.Signal<string>;
-    protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
+    protected readonly clearButtonVisible: _angular_core.Signal<boolean>;
     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>;
     protected readonly headerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
-    protected readonly id: string;
     protected readonly inputClass: _angular_core.Signal<string>;
     protected readonly invalidState: _angular_core.Signal<boolean>;
     protected readonly isEmpty: _angular_core.Signal<boolean>;
@@ -65,8 +64,9 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
      */
     readonly ariaDescribedBy: _angular_core.InputSignal<string>;
     /**
-     * @description Accessible name for the input. Describe what the autocomplete represents.
-     * Falls back to {@link placeholder} when neither this nor {@link ariaLabelledBy} is set.
+     * @description Accessible name for the input. Describe what the autocomplete represents. Prefer a visible label,
+     * linked through {@link inputId} or {@link ariaLabelledBy}; without any of them, browsers fall back to the
+     * {@link placeholder}.
      * @default ""
      */
     readonly ariaLabel: _angular_core.InputSignal<string>;
@@ -92,28 +92,35 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
      * @description Renders the component with reduced visual emphasis and removes pointer interaction.
      * @default false
      */
-    readonly disabled: _angular_core.ModelSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Defines whether the first matching item should be highlighted while typing.
      * @default true
      */
-    readonly highlightFirst: _angular_core.InputSignal<boolean>;
+    readonly highlightFirst: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * @description Id of the inner `<input>` element. Point a `<label for>` or `<mona-label for>` at it to label the
+     * autocomplete. A unique id is generated when it isn't set.
+     * @default generated
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
     /**
      * @description Marks the autocomplete 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 Predicate or field name used to determine whether an individual item is disabled.
      * @default undefined
      */
     readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
     /**
-     * @description Displays a loading indicator and prevents interaction while an operation is in progress.
+     * @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.
      */
@@ -133,7 +140,8 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
      */
     readonly popupClass: _angular_core.InputSignal<string>;
     /**
-     * @description 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>;
@@ -146,22 +154,23 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
      * @description Prevents value changes while preserving the component's visual state.
      * @default false
      */
-    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Marks the field as required for form validation.
      * @default false
      */
-    readonly required: _angular_core.InputSignal<boolean>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Border-radius preset applied to the component.
      * @default "medium"
      */
     readonly rounded: _angular_core.InputSignal<"none" | "small" | "medium" | "large" | "full" | null | undefined>;
     /**
-     * @description Displays a button that clears the current value when clicked.
+     * @description Displays a button that clears the current value when clicked. Unlike the other dropdowns, this
+     * defaults to `true`.
      * @default true
      */
-    readonly showClearButton: _angular_core.InputSignal<boolean>;
+    readonly showClearButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Size preset controlling the component's dimensions.
      * @default "medium"
@@ -174,8 +183,8 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
      */
     readonly textField: _angular_core.InputSignal<DropdownFieldSelectorType<TData, string>>;
     /**
-     * @description Emitted when the autocomplete is interacted with on blur, selection, clear, or committed input.
-     * The `FormField` directive listens to this to mark the field as touched.
+     * @description Emitted when focus leaves the autocomplete. Moving between its input, clear button and popup
+     * doesn't count. The `FormField` directive listens to this to mark the field as touched.
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
     /**
@@ -183,7 +192,7 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
      * 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 ""
@@ -202,8 +211,13 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
      */
     readonly valueField: _angular_core.InputSignal<DropdownFieldSelectorType<TData, unknown>>;
     constructor();
-    focus(): void;
-    protected onInputBlur(event: FocusEvent): void;
+    /**
+     * @description Moves focus to the inner input. The caret goes to the end of the text.
+     * @param options Passed to `HTMLElement.focus()`, for example `{ preventScroll: true }`.
+     */
+    focus(options?: FocusOptions): void;
+    protected onFocusOut(event: FocusEvent): void;
+    protected onInput(text: string): void;
     protected onItemSelect(event: SelectionChangeEvent<TData>): void;
     protected onPopupPointerDown(event: PointerEvent): void;
     protected onValueClear(event: MouseEvent | KeyboardEvent): void;
@@ -220,7 +234,7 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
     private setSubscriptions;
     private updateValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AutoCompleteComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AutoCompleteComponent<any>, "mona-auto-complete", 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; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "highlightFirst": { "alias": "highlightFirst"; "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; }; }, { "close": "close"; "closed": "closed"; "disabled": "disabledChange"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "suffixTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AutoCompleteComponent<any>, "mona-auto-complete", 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; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "highlightFirst": { "alias": "highlightFirst"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "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; }; }, { "close": "close"; "closed": "closed"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "suffixTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownLiveRegionDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare const AUTO_COMPLETE_DEFAULT_MESSAGES: MonaAutoCompleteMessages;

package/types/nanahoshi-mona-ui-combo-box.d.ts

@@ -38,14 +38,13 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
     protected readonly activeDescendant: _angular_core.Signal<string | null>;
     protected readonly affixClass: _angular_core.Signal<string>;
     protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly clearButtonVisible: _angular_core.Signal<boolean>;
     protected readonly comboBoxValue: _angular_core.WritableSignal<string>;
     protected readonly comboBoxValue$: Subject<string | null>;
-    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>;
     protected readonly headerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
-    protected readonly id: string;
     protected readonly inputClass: _angular_core.Signal<string>;
     protected readonly invalidState: _angular_core.Signal<boolean>;
     protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
@@ -62,15 +61,16 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      * @description Allows a custom value to be committed when it doesn't match any item in {@link data}.
      * @default false
      */
-    readonly allowCustomValue: _angular_core.InputSignal<boolean>;
+    readonly allowCustomValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description ID of an element that provides an extended description for the input.
      * @default ""
      */
     readonly ariaDescribedBy: _angular_core.InputSignal<string>;
     /**
-     * @description Accessible name for the input. Describe what the combo box represents.
-     * Falls back to {@link placeholder} when neither this nor {@link ariaLabelledBy} is set.
+     * @description Accessible name for the input. Describe what the combo box represents. Prefer a visible label,
+     * linked through {@link inputId} or {@link ariaLabelledBy}; without any of them, browsers fall back to the
+     * {@link placeholder}.
      * @default ""
      */
     readonly ariaLabel: _angular_core.InputSignal<string>;
@@ -96,23 +96,30 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      * @description Renders the component with reduced visual emphasis and removes pointer interaction.
      * @default false
      */
-    readonly disabled: _angular_core.ModelSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * @description Id of the inner `<input>` element. Point a `<label for>` or `<mona-label for>` at it to label the
+     * combo box. A unique id is generated when it isn't set.
+     * @default generated
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
     /**
      * @description Marks the combo box 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.
      * @default undefined
      */
     readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
     /**
-     * @description Displays a loading indicator and prevents interaction while an operation is in progress.
+     * @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 Emitted when the popup is about to open. This event is preventable.
      */
@@ -132,7 +139,8 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      */
     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>;
@@ -145,12 +153,12 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      * @description Prevents value changes while preserving the component's visual state.
      * @default false
      */
-    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the required state of the combo box component.
      * @default false
      */
-    readonly required: _angular_core.InputSignal<boolean>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Border-radius preset applied to the component.
      * @default "medium"
@@ -160,7 +168,7 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      * @description Displays a button that resets the value to empty when an item is selected.
      * @default false
      */
-    readonly showClearButton: _angular_core.InputSignal<boolean>;
+    readonly showClearButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Size preset controlling the component's dimensions.
      * @default "medium"
@@ -173,8 +181,8 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      */
     readonly textField: _angular_core.InputSignal<DropdownFieldSelectorType<TData, string>>;
     /**
-     * @description Emitted when the combo box is interacted with on blur, selection, clear, or committed input.
-     * The `FormField` directive listens to this to mark the field as touched.
+     * @description Emitted when focus leaves the combo box. Moving between its input, clear button and popup doesn't
+     * count. The `FormField` directive listens to this to mark the field as touched.
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
     /**
@@ -182,7 +190,7 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      * 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 ""
@@ -197,8 +205,8 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      */
     readonly value: _angular_core.ModelSignal<TValue | null>;
     /**
-     * @description Emitted with the entered text when the user presses Enter on unmatched input.
-     * Only emitted when {@link allowCustomValue} is true.
+     * @description Emitted with the entered text when the user presses Enter on text that matches no item, or leaves
+     * the field with it. Only emitted when {@link allowCustomValue} is true.
      */
     readonly valueAdd: _angular_core.OutputEmitterRef<string>;
     /**
@@ -219,10 +227,16 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      *
      * @default false
      */
-    readonly valuePrimitive: _angular_core.InputSignal<boolean>;
+    readonly valuePrimitive: _angular_core.InputSignalWithTransform<boolean, unknown>;
     constructor();
-    focus(): void;
-    protected onInputBlur(event: FocusEvent): void;
+    /**
+     * @description Moves focus to the inner input. The caret goes to the end of the text.
+     * @param options Passed to `HTMLElement.focus()`, for example `{ preventScroll: true }`.
+     */
+    focus(options?: FocusOptions): void;
+    protected onFocusOut(event: FocusEvent): void;
+    protected onHostPointerDown(event: PointerEvent): void;
+    protected onInput(text: string): void;
     protected onItemSelect(event: SelectionChangeEvent<TData>): void;
     protected onPopupPointerDown(event: PointerEvent): void;
     protected onValueClear(event: Event): void;
@@ -232,19 +246,24 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
     private handleEnterKey;
     private initialize;
     private notifyFilterChange;
+    /**
+     * Settles typed text when focus leaves the combo box, so the field never shows text that isn't its value:
+     * an item whose text matches is selected, empty text clears the value, other text is offered through
+     * `valueAdd` when custom values are allowed, and otherwise the selected item's text comes back.
+     */
+    private resolveText;
     private selectItem;
     private setArrowNavigationSubscription;
     private setComboboxValueSubscription;
     private setEscapeKeySubscription;
     private setKeydownSubscription;
-    private setNavigatedItemSubscription;
     private setPopupCloseSubscriptions;
     private setSpaceKeySubscription;
     private setSubscriptions;
     private synchronizeSelection;
     private updateValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboBoxComponent<any, any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboBoxComponent<any, any>, "mona-combo-box", never, { "allowCustomValue": { "alias": "allowCustomValue"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "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"; "disabled": "disabledChange"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; "valueAdd": "valueAdd"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboBoxComponent<any, any>, "mona-combo-box", never, { "allowCustomValue": { "alias": "allowCustomValue"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "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"; "valueAdd": "valueAdd"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownLiveRegionDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare const COMBO_BOX_DEFAULT_MESSAGES: MonaComboBoxMessages;