@nanahoshi/mona-ui 0.24.2 → 0.24.4

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { ComponentRef, TemplateRef, StaticProvider, OnDestroy, AfterViewInit, InjectionToken } from '@angular/core';
+import { ComponentRef, TemplateRef, Injector, StaticProvider, OnDestroy, InjectionToken } from '@angular/core';
 import { OverlayRef, ConnectionPositionPair, FlexibleConnectedPositionStrategyOrigin, ComponentType, ConnectedPosition } from '@angular/cdk/overlay';
 import { Action } from '@nanahoshi/mona-ui/internal';
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
@@ -34,8 +34,8 @@ interface PopupOffset {
 }
 
 interface PopupRefParams {
-    close: <R>(result?: R, delay?: number) => void;
     get beforeClose$(): Observable<PopupCloseEvent>;
+    close: <R>(result?: R, delay?: number) => boolean;
     get closeStart$(): Observable<PopupCloseEvent>;
     get closed$(): Observable<PopupCloseEvent>;
     get component(): ComponentRef<unknown> | null;
@@ -47,7 +47,14 @@ interface PopupRefParams {
 declare class PopupRef {
     #private;
     constructor(options: PopupRefParams);
-    close<R>(result?: R, delay?: number): void;
+    /**
+     * Requests the popup to close.
+     * @param result optional result passed to `beforeClose` and `closed` as the event's `result`
+     * @param delay optional delay in milliseconds before the popup is removed, instead of waiting for the
+     * leave animation
+     * @returns `false` when the close was prevented or the popup is already closing, `true` otherwise.
+     */
+    close<R>(result?: R, delay?: number): boolean;
     /**
      * Closes the popup after a delay.
      * When the popup is closed, the overlay element is removed from the DOM instantly.
@@ -140,19 +147,17 @@ interface PopupSettings<T = unknown, C = void> {
      * @type {boolean}
      */
     blockScroll?: boolean;
-    /**
-     * The content to display in the popup.
-     * @type {TemplateRef | ComponentType}
-     */
-    content: TemplateRef<C> | ComponentType<C>;
     /**
      * Whether the popup will be closed when the user clicks on the backdrop.
      * Only applies if `hasBackdrop` is true.
+     * Default: true.
      * @type {boolean}
      */
     closeOnBackdropClick?: boolean;
     /**
      * Whether the popup will be closed when the user presses the escape key.
+     * Escape only reaches the topmost open popup. When that popup sets this to `false`, Escape closes nothing,
+     * not even the popups underneath it.
      * Default: true.
      * @type {boolean}
      */
@@ -165,22 +170,29 @@ interface PopupSettings<T = unknown, C = void> {
     closeOnMouseLeave?: boolean;
     /**
      * Whether the popup will be closed when the user clicks outside of it.
+     * Clicks on the backdrop are governed by `closeOnBackdropClick` instead.
+     * Default: true.
      * @type {boolean}
      */
     closeOnOutsideClick?: boolean;
     /**
-     * Whether the popup will be closed when the user scrolls.
+     * Whether the popup will be closed when the user scrolls the page or a scrollable container around the anchor.
      * Default: false.
      * @type {boolean}
      */
     closeOnScroll?: boolean;
+    /**
+     * The content to display in the popup.
+     * @type {TemplateRef | ComponentType}
+     */
+    content: TemplateRef<C> | ComponentType<C>;
     /**
      * Optional data to pass to the popup context.
      */
     data?: T;
     /**
      * Whether the popup will have a backdrop.
-     * Default: true.
+     * Default: false.
      */
     hasBackdrop?: boolean;
     /**
@@ -188,6 +200,14 @@ interface PopupSettings<T = unknown, C = void> {
      * @type {number | string}
      */
     height?: number | string;
+    /**
+     * Parent injector for the popup content. Component content resolves its dependencies here, after
+     * `providers`. Pass the injector of the component that opens the popup so its content can use services
+     * provided by that component, its ancestors or a lazy-loaded route.
+     * Default: the root injector.
+     * @type {Injector}
+     */
+    injector?: Injector;
     /**
      * Maximum height of the popup.
      * @type {number | string}
@@ -256,7 +276,10 @@ interface PopupSettings<T = unknown, C = void> {
      * Controls focus restoration behavior when the popup is closed.
      * - true: Always restore focus to anchor
      * - false: Never restore focus (recommended for tooltips)
-     * - "auto": Only restore focus if the anchor was focused when the popup opened (smart behavior)
+     * - "auto": Only restore focus if the anchor, or an element inside it, was focused when the popup opened;
+     *   focus returns to that element
+     * Focus is only restored while it is on the page itself, inside the popup or inside the anchor. If the user
+     * moved it elsewhere, for example by clicking another field, it stays there.
      * Default: "auto".
      * @type {boolean | "auto"}
      */
@@ -275,6 +298,7 @@ interface PopupSettings<T = unknown, C = void> {
     withPush?: boolean;
     /**
      * Whether the popup should track scroll events and reposition itself.
+     * Default: true.
      * @type {boolean}
      */
     withScrollTracking?: boolean;
@@ -290,7 +314,7 @@ interface PopupAnimationSettings {
     leave?: string | string[];
 }
 
-declare class PopupComponent<T = unknown> implements OnDestroy, AfterViewInit {
+declare class PopupComponent<T = unknown> implements OnDestroy {
     #private;
     protected readonly contentTemplate: _angular_core.Signal<TemplateRef<any>>;
     protected popupRef: PopupRef | null;
@@ -318,19 +342,24 @@ declare class PopupComponent<T = unknown> implements OnDestroy, AfterViewInit {
      * @description Whether to close the popup when clicking on the backdrop.
      * Only applies when the popup has a backdrop.
      */
-    readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    readonly closeOnBackdropClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Whether to close the popup when the escape key is pressed.
+     * Escape only reaches the topmost open popup.
      */
-    readonly closeOnEscape: _angular_core.InputSignal<boolean>;
+    readonly closeOnEscape: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Whether to close the popup when the mouse leaves the anchor element.
      */
-    readonly closeOnMouseLeave: _angular_core.InputSignal<boolean>;
+    readonly closeOnMouseLeave: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Whether to close the popup when clicking outside of it.
      */
-    readonly closeOnOutsideClick: _angular_core.InputSignal<boolean>;
+    readonly closeOnOutsideClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * @description Whether to close the popup when the user scrolls the page or a scrollable container around the anchor.
+     */
+    readonly closeOnScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Arbitrary data to pass to the popup.
      */
@@ -338,7 +367,7 @@ declare class PopupComponent<T = unknown> implements OnDestroy, AfterViewInit {
     /**
      * @description Whether the popup should have a backdrop.
      */
-    readonly hasBackdrop: _angular_core.InputSignal<boolean>;
+    readonly hasBackdrop: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description The height of the popup.
      */
@@ -400,6 +429,15 @@ declare class PopupComponent<T = unknown> implements OnDestroy, AfterViewInit {
      * @description The providers that will be injected into the popup.
      */
     readonly providers: _angular_core.InputSignal<StaticProvider[]>;
+    /**
+     * @description Controls focus restoration when the popup closes.
+     * - `true`: always restore focus to the anchor element.
+     * - `false`: never restore focus (recommended for tooltips).
+     * - `"auto"`: restore focus only if the anchor, or an element inside it, was focused when the popup opened.
+     *
+     * Focus is left alone if the user moved it outside the popup and the anchor before it closed.
+     */
+    readonly restoreFocus: _angular_core.InputSignalWithTransform<boolean | "auto", unknown>;
     /**
      * @description The trigger event for opening the popup.
      */
@@ -411,30 +449,18 @@ declare class PopupComponent<T = unknown> implements OnDestroy, AfterViewInit {
     /**
      * @description Whether to push the popup into the screen when it is opened.
      */
-    readonly withPush: _angular_core.InputSignal<boolean>;
-    /**
-     * @description Whether to close the popup when the user scrolls within a scrollable container.
-     */
-    readonly closeOnScroll: _angular_core.InputSignal<boolean>;
-    /**
-     * @description Controls focus restoration when the popup closes.
-     * - `true`: always restore focus to the anchor element.
-     * - `false`: never restore focus (recommended for tooltips).
-     * - `"auto"`: restore focus only if the anchor was focused when the popup opened.
-     */
-    readonly restoreFocus: _angular_core.InputSignal<boolean | "auto">;
+    readonly withPush: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Whether the popup should track scroll events and reposition itself.
      */
-    readonly withScrollTracking: _angular_core.InputSignal<boolean>;
+    readonly withScrollTracking: _angular_core.InputSignalWithTransform<boolean, unknown>;
     constructor();
     closePopup(): void;
-    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private getPopupWidth;
     private setupEventListeners;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopupComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopupComponent<any>, "mona-popup", never, { "anchor": { "alias": "anchor"; "required": true; "isSignal": true; }; "anchorConnectionPoint": { "alias": "anchorConnectionPoint"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnMouseLeave": { "alias": "closeOnMouseLeave"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupConnectionPoint": { "alias": "popupConnectionPoint"; "required": false; "isSignal": true; }; "popupWrapperClass": { "alias": "popupWrapperClass"; "required": false; "isSignal": true; }; "positionStrategy": { "alias": "positionStrategy"; "required": false; "isSignal": true; }; "positions": { "alias": "positions"; "required": false; "isSignal": true; }; "preventClose": { "alias": "preventClose"; "required": false; "isSignal": true; }; "providers": { "alias": "providers"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "withPush": { "alias": "withPush"; "required": false; "isSignal": true; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; "isSignal": true; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; "isSignal": true; }; "withScrollTracking": { "alias": "withScrollTracking"; "required": false; "isSignal": true; }; }, { "close": "close"; "open": "open"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopupComponent<any>, "mona-popup", never, { "anchor": { "alias": "anchor"; "required": true; "isSignal": true; }; "anchorConnectionPoint": { "alias": "anchorConnectionPoint"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnMouseLeave": { "alias": "closeOnMouseLeave"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupConnectionPoint": { "alias": "popupConnectionPoint"; "required": false; "isSignal": true; }; "popupWrapperClass": { "alias": "popupWrapperClass"; "required": false; "isSignal": true; }; "positionStrategy": { "alias": "positionStrategy"; "required": false; "isSignal": true; }; "positions": { "alias": "positions"; "required": false; "isSignal": true; }; "preventClose": { "alias": "preventClose"; "required": false; "isSignal": true; }; "providers": { "alias": "providers"; "required": false; "isSignal": true; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "withPush": { "alias": "withPush"; "required": false; "isSignal": true; }; "withScrollTracking": { "alias": "withScrollTracking"; "required": false; "isSignal": true; }; }, { "close": "close"; "open": "open"; }, never, ["*"], true, never>;
 }
 
 declare class PopupService {
@@ -442,8 +468,11 @@ declare class PopupService {
     create(settings: PopupSettings): PopupRef;
     private attachContent;
     private buildPanelClass;
+    /**
+     * With `"auto"` (also the default), remembers the focused element when it is the anchor or inside it, such
+     * as the button inside a host component or the input inside a date picker, and returns focus to that element.
+     */
     private captureOriginalFocus;
-    private cleanupEventDelegation;
     private createInjector;
     private createMultiElementPopup;
     private createOverlay;
@@ -454,9 +483,28 @@ declare class PopupService {
     private getPosition;
     private getScrollableAncestorElements;
     private getScrollableContainers;
+    private getTopmostOpenPopup;
+    /**
+     * Escape goes to the topmost open popup only, so closing a dropdown inside a dialog leaves the dialog
+     * open. The topmost popup consumes the key even when it doesn't close on Escape, so a modal that can't
+     * be dismissed doesn't let it reach the popup underneath. An Escape that ends an IME composition is left
+     * alone. `preventDefault()` doesn't keep the popup open, because controls call it on every navigation key;
+     * a control that handles Escape itself stops its propagation instead.
+     */
+    private handleEscapeKey;
     private handleFocusRestoration;
     private isScrollableElement;
     private isScrollableOverflow;
+    /**
+     * One pair of `document` listeners serves every open popup. The capturing one notes which popup is on
+     * top before the key reaches any control; the bubbling one closes it if nothing handled the key.
+     */
+    private listenForEscape;
+    /**
+     * A popup leaves the stack as soon as it starts closing, so a second Escape during its leave animation
+     * goes to the popup underneath.
+     */
+    private registerOpenPopup;
     /**
      * Resolves a PopupAnchor to a FlexibleConnectedPositionStrategyOrigin.
      * This method should only receive actual elements or ElementRefs, not CSS selector strings.
@@ -465,7 +513,6 @@ declare class PopupService {
      * @returns The resolved anchor
      */
     private resolveAnchor;
-    private restoreFocusToAnchor;
     private setupBackdropCloseSubscription;
     /**
      * Starts the backdrop fade-out as soon as the close begins, so it runs alongside the popup's leave
@@ -474,15 +521,26 @@ declare class PopupService {
     private setupBackdropFadeOut;
     private setupCleanupSubscription;
     private setupCloseSubscriptions;
-    private setupEscapeKeyListener;
+    /**
+     * `PopupRef.overlayRef` is public, so the overlay can be detached or disposed without going through
+     * `close()`. Finish the close then too, or `closed` never fires and focus, subscriptions and consumers
+     * waiting for it (the dropdowns won't reopen until it does) stay stuck.
+     */
+    private setupDetachTracking;
+    private setupDirectionTracking;
+    /**
+     * Listens on the document rather than on the elements matched at creation time, so elements added later
+     * get a popup too. One popup shows at a time; it closes when the pointer leaves its element, and the
+     * returned subscription's teardown closes it as well.
+     */
     private setupInternalEventDelegation;
     private setupMouseLeaveSubscription;
     private setupOutsideClickSubscription;
     private setupPositionChangeTracking;
-    private setupDirectionTracking;
     private setupScrollClosing;
     private setupScrollTracking;
     private shouldIgnoreOutsideClick;
+    private unregisterOpenPopup;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopupService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<PopupService>;
 }
@@ -495,6 +553,9 @@ declare const slideFromLeftPopupAnimation: Required<PopupAnimationSettings>;
 declare const slideFromTopPopupAnimation: Required<PopupAnimationSettings>;
 declare const slideFromBottomPopupAnimation: Required<PopupAnimationSettings>;
 
+/**
+ * The `data` passed in `PopupSettings`, available to the popup content.
+ */
 declare const PopupDataInjectionToken: InjectionToken<unknown>;
 
 export { PopupCloseEvent, PopupCloseSource, PopupComponent, PopupDataInjectionToken, PopupRef, PopupService, defaultPopupAnimation, dropdownPopupAnimation, fadePopupAnimation, slideFromBottomPopupAnimation, slideFromLeftPopupAnimation, slideFromRightPopupAnimation, slideFromTopPopupAnimation };

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

@@ -6,7 +6,7 @@ import { VariantInputs, AttributeConfig } from '@nanahoshi/mona-ui/internal';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
-type InputType = "email" | "password" | "text";
+type InputType = "email" | "password" | "search" | "tel" | "text" | "url";
 
 declare const textBoxThemeVariants: (props?: ({
     rounded?: "full" | "large" | "medium" | "none" | "small" | null | undefined;
@@ -28,24 +28,43 @@ declare class TextBoxComponent implements TextBoxVariantInput, FormValueControl<
     protected readonly invalidInput: _angular_core.Signal<boolean>;
     protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaTextBoxMessages>;
     protected readonly prefixTemplateList: _angular_core.Signal<readonly TemplateRef<any>[]>;
+    protected readonly showClearButton: _angular_core.Signal<boolean>;
     protected readonly suffixTemplateList: _angular_core.Signal<readonly TemplateRef<any>[]>;
+    /**
+     * @description Id of an element that describes the inner input, such as a hint or an error message.
+     * @default ""
+     */
+    readonly ariaDescribedBy: _angular_core.InputSignal<string>;
+    /**
+     * @description Accessible name of the inner input. Prefer a visible label, linked through {@link inputId} or
+     * {@link ariaLabelledBy}; the placeholder is not a label.
+     * @default ""
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @description Id of the element that labels the inner input.
+     * @default ""
+     */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string>;
     /**
      * @description Displays a clear button that resets the value to empty.
+     * The button is hidden while the value is empty or the text box is disabled or read-only.
      * @default false
      */
-    readonly clearButton: _angular_core.InputSignal<boolean>;
+    readonly clearButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Renders the component with reduced visual emphasis and removes pointer interaction.
      * @default false
      */
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Additional HTML attributes applied directly to the inner `<input>` element.
      * @default {}
      */
     readonly inputAttributes: _angular_core.InputSignal<AttributeConfig>;
     /**
-     * @description Emitted when the inner input loses focus.
+     * @description Emitted when the inner input loses focus, including when focus moves to the clear button or to
+     * content in the prefix or suffix templates.
      */
     readonly inputBlur: _angular_core.OutputEmitterRef<FocusEvent>;
     /**
@@ -57,6 +76,12 @@ declare class TextBoxComponent implements TextBoxVariantInput, FormValueControl<
      * @description Emitted when the inner input gains focus.
      */
     readonly inputFocus: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * @description Id of the inner `<input>` element. Point a `<label for>` or `<mona-label for>` at it to label the
+     * text box. A unique id is generated when it isn't set.
+     * @default generated
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
     /**
      * @description Inline styles applied to the inner `<input>` element.
      * Accepts a style string or a `CSSStyleDeclaration` partial.
@@ -68,7 +93,25 @@ declare class TextBoxComponent implements TextBoxVariantInput, FormValueControl<
      * this is written by the `FormField` directive.
      * @default false
      */
-    readonly invalid: _angular_core.InputSignal<boolean>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * @description Maximum number of characters, set as `maxlength` on the inner input. When bound to a signal form
+     * field via `[formField]`, this is written from the field's `maxLength` rule.
+     * @default undefined
+     */
+    readonly maxLength: _angular_core.InputSignal<number | undefined>;
+    /**
+     * @description Minimum number of characters, set as `minlength` on the inner input. When bound to a signal form
+     * field via `[formField]`, this is written from the field's `minLength` rule.
+     * @default undefined
+     */
+    readonly minLength: _angular_core.InputSignal<number | undefined>;
+    /**
+     * @description Name of the inner input, used by browsers and password managers for autofill. When bound to a
+     * signal form field via `[formField]`, this is written by the `FormField` directive.
+     * @default ""
+     */
+    readonly name: _angular_core.InputSignal<string>;
     /**
      * @description Placeholder text shown when no value has been entered.
      * @default ""
@@ -78,13 +121,13 @@ declare class TextBoxComponent implements TextBoxVariantInput, 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 text box as required.
      * Triggers the invalid state when the value is empty and the field has been touched.
      * @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"
@@ -96,8 +139,8 @@ declare class TextBoxComponent implements TextBoxVariantInput, FormValueControl<
      */
     readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
     /**
-     * @description Emitted when the text box is interacted with — on blur, value change, or clear.
-     * The `FormField` directive listens to this to mark the field as touched.
+     * @description Emitted when focus leaves the text box, including its clear button and prefix and suffix content.
+     * Form directives (`[formField]`, `ngModel`, `formControl`) listen to this to mark the field as touched.
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
     /**
@@ -105,7 +148,7 @@ declare class TextBoxComponent implements TextBoxVariantInput, FormValueControl<
      * this is written by the `FormField` directive.
      * @default false
      */
-    readonly touched: _angular_core.InputSignal<boolean>;
+    readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the `type` attribute of the inner `<input>` element.
      * @default "text"
@@ -121,12 +164,17 @@ declare class TextBoxComponent implements TextBoxVariantInput, FormValueControl<
      * @default ""
      */
     readonly value: _angular_core.ModelSignal<string>;
-    focus(): void;
+    /**
+     * Focuses the inner input and places the caret after the value, so the end of a long value is in view.
+     * @param options Options passed to the native `focus()` call, such as `preventScroll`.
+     */
+    focus(options?: FocusOptions): void;
     onClearClick(): void;
     onInputBlur(event: FocusEvent): void;
     onValueChange(value: string): void;
+    protected onFocusOut(event: FocusEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextBoxComponent, "mona-text-box", never, { "clearButton": { "alias": "clearButton"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "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; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; "touch": "touch"; "value": "valueChange"; }, ["prefixTemplateList", "suffixTemplateList"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextBoxComponent, "mona-text-box", 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; }; "clearButton": { "alias": "clearButton"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "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; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; "touch": "touch"; "value": "valueChange"; }, ["prefixTemplateList", "suffixTemplateList"], never, true, never>;
 }
 
 declare class TextBoxDirective implements InputVariantInput {
@@ -136,7 +184,7 @@ declare class TextBoxDirective implements InputVariantInput {
      * @description Marks the input as invalid, triggering error border and ring styling.
      * @default false
      */
-    readonly invalid: _angular_core.InputSignal<boolean>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Border-radius preset applied to the component.
      * @default "medium"
@@ -151,7 +199,7 @@ declare class TextBoxDirective implements InputVariantInput {
      * @description Marks the input as touched. Error styling is only shown when both `invalid` and `touched` are `true`.
      * @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 ""