@nanahoshi/mona-ui 0.24.2 → 0.24.5

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;

package/types/nanahoshi-mona-ui-dropdown-list.d.ts

@@ -39,6 +39,7 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
     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 effectiveAriaLabel: _angular_core.Signal<string>;
     protected readonly expanded: _angular_core.Signal<boolean>;
     protected readonly footerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
@@ -59,6 +60,11 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
     protected readonly valueContainerClass: _angular_core.Signal<string>;
     protected readonly valueTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly valueText: _angular_core.Signal<string>;
+    /**
+     * @description ID of an element that describes the dropdown list, such as help text or an error message.
+     * @default ""
+     */
+    readonly ariaDescribedBy: _angular_core.InputSignal<string>;
     /**
      * @description Accessible name for the host element. Describe what the component represents.
      * When empty, falls back to the placeholder text.
@@ -87,22 +93,23 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
      * @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 Marks the field as invalid. Set automatically by the `FormField` directive when bound via `[formField]`.
      * @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 Emitted when the popup is about to open. This event is preventable.
      */
@@ -122,7 +129,8 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
      */
     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>;
@@ -135,12 +143,12 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
      * @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"
@@ -150,7 +158,7 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
      * @description Shows a clear button that resets the selected value when clicked.
      * @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"
@@ -163,15 +171,15 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
      */
     readonly textField: _angular_core.InputSignal<DropdownFieldSelectorType<TData, string>>;
     /**
-     * @description Emitted when the control is interacted with via blur, selection, or clear.
-     * The `FormField` directive listens to this to mark the field as touched.
+     * @description Emitted when focus leaves the dropdown list. Moving between it, 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>;
     /**
      * @description Marks the control as touched. Set automatically by the `FormField` directive when bound via `[formField]`.
      * @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,11 +210,15 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
      *
      * @default false
      */
-    readonly valuePrimitive: _angular_core.InputSignal<boolean>;
+    readonly valuePrimitive: _angular_core.InputSignalWithTransform<boolean, unknown>;
     constructor();
-    focus(): void;
+    /**
+     * @description Moves focus to the dropdown list.
+     * @param options Passed to `HTMLElement.focus()`, for example `{ preventScroll: true }`.
+     */
+    focus(options?: FocusOptions): void;
     setValue(value: TValue): void;
-    protected onBlur(event?: FocusEvent): void;
+    protected onFocusOut(event: FocusEvent): void;
     protected onItemSelect(event: SelectionChangeEvent<TData>): void;
     protected onPopupPointerDown(event: PointerEvent): void;
     protected onValueClear(event: MouseEvent | KeyboardEvent): void;
@@ -216,17 +228,19 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
     private handleEnterKey;
     private handleHomeEndKeys;
     private initialize;
+    private pushTypeaheadKey;
     private scrollToSelectedItem;
     private setArrowKeyNavigationSubscription;
     private setFilterChangeSubscription;
     private setKeydownSubscription;
     private setPopupCloseSubscriptions;
     private setSubscriptions;
+    private setTypeaheadSpaceSubscription;
     private setTypeaheadSubscription;
     private synchronizeSelection;
     private updateValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownListComponent<any, any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownListComponent<any, any>, "mona-dropdown-list", never, { "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"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "valueTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownListComponent<any, any>, "mona-dropdown-list", 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; }; "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", "valueTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownLiveRegionDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare class DropdownListValueTemplateDirective {