@nanahoshi/mona-ui 0.24.1 → 0.24.4

package/fesm2022/nanahoshi-mona-ui-sheet.mjs

@@ -245,7 +245,7 @@ class SheetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SheetComponent, isStandalone: true, selector: "mona-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed" }, host: { classAttribute: "hidden" }, viewQueries: [{ propertyName: "sheetTemplate", first: true, predicate: ["sheetTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #sheetTemplate>\n    <section\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"true\"\n        [class]=\"baseClass()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        [attr.aria-labelledby]=\"title() ? titleId : null\"\n        [attr.aria-describedby]=\"description() ? descriptionId : null\"\n        [attr.aria-label]=\"!title() ? ariaLabel() : null\">\n        @if (title() || description() || closable()) {\n            <header [class]=\"headerClass()\">\n                <div class=\"min-w-0 flex-1\">\n                    @if (title()) {\n                        <h2 [id]=\"titleId\" [class]=\"titleClass()\">{{ title() }}</h2>\n                    }\n                    @if (description()) {\n                        <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ description() }}</p>\n                    }\n                </div>\n                @if (closable()) {\n                    <button\n                        monaButton\n                        type=\"button\"\n                        look=\"ghost\"\n                        [iconOnly]=\"true\"\n                        [attr.aria-label]=\"resolvedMessages().closeSheet\"\n                        size=\"small\"\n                        [class]=\"closeButtonClass()\"\n                        (click)=\"closeSheet()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </header>\n        }\n        <div [class]=\"contentClass()\">\n            <ng-content></ng-content>\n        </div>\n    </section>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SheetComponent, isStandalone: true, selector: "mona-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed" }, host: { classAttribute: "hidden" }, viewQueries: [{ propertyName: "sheetTemplate", first: true, predicate: ["sheetTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #sheetTemplate>\n    <section\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"true\"\n        [class]=\"baseClass()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        [attr.aria-labelledby]=\"title() ? titleId : null\"\n        [attr.aria-describedby]=\"description() ? descriptionId : null\"\n        [attr.aria-label]=\"!title() ? ariaLabel() : null\">\n        @if (title() || description() || closable()) {\n            <header [class]=\"headerClass()\">\n                <div class=\"min-w-0 flex-1\">\n                    @if (title()) {\n                        <h2 [id]=\"titleId\" [class]=\"titleClass()\">{{ title() }}</h2>\n                    }\n                    @if (description()) {\n                        <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ description() }}</p>\n                    }\n                </div>\n                @if (closable()) {\n                    <button\n                        monaButton\n                        type=\"button\"\n                        look=\"ghost\"\n                        [iconOnly]=\"true\"\n                        [attr.aria-label]=\"resolvedMessages().closeSheet\"\n                        size=\"small\"\n                        [class]=\"closeButtonClass()\"\n                        (click)=\"closeSheet()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </header>\n        }\n        <div [class]=\"contentClass()\">\n            <ng-content></ng-content>\n        </div>\n    </section>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SheetComponent, decorators: [{
             type: Component,

package/fesm2022/nanahoshi-mona-ui-split-button.mjs

@@ -389,7 +389,7 @@ class SplitButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitButtonComponent, isStandalone: true, selector: "mona-split-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, menuButtonAriaLabel: { classPropertyName: "menuButtonAriaLabel", publicName: "menuButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", menuItemClick: "menuItemClick" }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SplitButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: SplitButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "mainButtonTextTemplate", first: true, predicate: SplitButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "menuButtonTemplate", first: true, predicate: SplitButtonMenuButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "shortcutTemplate", first: true, predicate: SplitButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: SplitButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "menuButtonRef", first: true, predicate: ["menuButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    (click)=\"buttonClick.emit($event)\"\n    [disabled]=\"disabled()\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-e-none\"\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #mainButton>\n    @if (mainButtonTextTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\n    } @else {\n        <span>{{ text() }}</span>\n    }\n</button>\n<button\n    monaButton\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"true\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-s-none border-s-0\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"menuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"effectiveMenuButtonAriaLabel()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #menuButton>\n    @if (menuButtonTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\n    } @else {\n        <svg lucideChevronDown [size]=\"16\"></svg>\n    }\n</button>\n\n<mona-popup-menu\n    [anchorConnectionPoint]=\"'bottomleft'\"\n    [anchor]=\"mainButton\"\n    [items]=\"menuItems()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    (close)=\"onMenuClose()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topleft'\"\n    [rounded]=\"popupMenuRounded()\"\n    [size]=\"size()\"\n    [target]=\"menuButton\"\n    [trigger]=\"'click'\"\n    [id]=\"menuId\"\n    [minWidth]=\"popupWidth() || undefined\"\n    #popupMenu>\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (iconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (shortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (textTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"textTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitButtonComponent, isStandalone: true, selector: "mona-split-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, menuButtonAriaLabel: { classPropertyName: "menuButtonAriaLabel", publicName: "menuButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", menuItemClick: "menuItemClick" }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SplitButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: SplitButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "mainButtonTextTemplate", first: true, predicate: SplitButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "menuButtonTemplate", first: true, predicate: SplitButtonMenuButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "shortcutTemplate", first: true, predicate: SplitButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: SplitButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "menuButtonRef", first: true, predicate: ["menuButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    (click)=\"buttonClick.emit($event)\"\n    [disabled]=\"disabled()\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-e-none\"\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #mainButton>\n    @if (mainButtonTextTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\n    } @else {\n        <span>{{ text() }}</span>\n    }\n</button>\n<button\n    monaButton\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"true\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-s-none border-s-0\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"menuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"effectiveMenuButtonAriaLabel()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #menuButton>\n    @if (menuButtonTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\n    } @else {\n        <svg lucideChevronDown [size]=\"16\"></svg>\n    }\n</button>\n\n<mona-popup-menu\n    [anchorConnectionPoint]=\"'bottomleft'\"\n    [anchor]=\"mainButton\"\n    [items]=\"menuItems()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    (close)=\"onMenuClose()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topleft'\"\n    [rounded]=\"popupMenuRounded()\"\n    [size]=\"size()\"\n    [target]=\"menuButton\"\n    [trigger]=\"'click'\"\n    [id]=\"menuId\"\n    [minWidth]=\"popupWidth() || undefined\"\n    #popupMenu>\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (iconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (shortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (textTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"textTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,

package/fesm2022/nanahoshi-mona-ui-splitter.mjs

@@ -246,7 +246,7 @@ class SplitterResizerHandleComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitterResizerHandleComponent, isStandalone: true, selector: "mona-splitter-resizer-handle", inputs: { nextControlsVisible: { classPropertyName: "nextControlsVisible", publicName: "nextControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousControlsVisible: { classPropertyName: "previousControlsVisible", publicName: "previousControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { collapseNext: "collapseNext", collapsePrevious: "collapsePrevious" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (orientation() === \"horizontal\") {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapsePrevious\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronLeft [size]=\"12\" class=\"rtl:rotate-180\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapseNext\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronRight [size]=\"12\" class=\"rtl:rotate-180\"></svg>\n        </button>\n    }\n} @else {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapseUp\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronUp [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapseDown\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronDown [size]=\"12\"></svg>\n        </button>\n    }\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitterResizerHandleComponent, isStandalone: true, selector: "mona-splitter-resizer-handle", inputs: { nextControlsVisible: { classPropertyName: "nextControlsVisible", publicName: "nextControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousControlsVisible: { classPropertyName: "previousControlsVisible", publicName: "previousControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { collapseNext: "collapseNext", collapsePrevious: "collapsePrevious" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (orientation() === \"horizontal\") {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapsePrevious\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronLeft [size]=\"12\" class=\"rtl:rotate-180\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapseNext\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronRight [size]=\"12\" class=\"rtl:rotate-180\"></svg>\n        </button>\n    }\n} @else {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapseUp\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronUp [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            [attr.aria-label]=\"messages().collapseDown\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronDown [size]=\"12\"></svg>\n        </button>\n    }\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerHandleComponent, decorators: [{
             type: Component,

package/fesm2022/nanahoshi-mona-ui-switch.mjs

@@ -75,7 +75,7 @@ const switchThemeVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            large: "h-7.5 w-14 text-md",
+            large: "h-7.5 w-14 text-base",
             medium: "h-6.5 w-12 text-sm",
             small: "h-5.5 w-10 text-xs"
         }

package/fesm2022/nanahoshi-mona-ui-tabs.mjs

@@ -476,7 +476,7 @@ class TabListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabListComponent, isStandalone: true, selector: "mona-tab-list", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, tabList: { classPropertyName: "tabList", publicName: "tabList", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedTabId: "selectedTabIdChange", tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "tabListElement", first: true, predicate: ["tabListElement"], descendants: true, isSignal: true }, { propertyName: "tabListItems", predicate: TabListItemDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        [attr.aria-label]=\"messages().scrollPrevious\"\n        (click)=\"startScrolling(tabListElement, 'previous', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'previous')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronUp [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronLeft [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n        }\n    </button>\n}\n<div [class]=\"listWrapperClass()\">\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\n        @for (tab of tabList(); track tab) {\n            @let selected = tab.id === selectedTabId();\n            @let itemDisabled = tab.disabled || disabled();\n            <li\n                monaTabListItem\n                [id]=\"tab.id + '-tab'\"\n                [active]=\"selected\"\n                [disabled]=\"itemDisabled\"\n                [position]=\"position()\"\n                [size]=\"size()\"\n                role=\"tab\"\n                [tabindex]=\"selected ? 0 : -1\"\n                [attr.aria-selected]=\"selected\"\n                [attr.aria-disabled]=\"itemDisabled\"\n                [attr.aria-controls]=\"tab.id + '-panel'\"\n                [attr.data-selected]=\"selected\"\n                [attr.data-tab-id]=\"tab.id\"\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\n                <div>\n                    @if (tab.titleTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\n                    } @else {\n                        <span>{{ tab.title }}</span>\n                    }\n                </div>\n                @if (tab.closable || closable()) {\n                    <button\n                        monaButton\n                        look=\"link\"\n                        [disabled]=\"itemDisabled\"\n                        [attr.aria-label]=\"messages().closeTab\"\n                        (click)=\"onTabClose(tab, $event)\"\n                        class=\"px-0 h-fit ms-1 w-min\"\n                        tabindex=\"-1\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</div>\n@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        [attr.aria-label]=\"messages().scrollNext\"\n        (click)=\"startScrolling(tabListElement, 'next', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'next')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronDown [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n        }\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TabListItemDirective, selector: "li[monaTabListItem]", inputs: ["active", "disabled", "position", "size"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabListComponent, isStandalone: true, selector: "mona-tab-list", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, tabList: { classPropertyName: "tabList", publicName: "tabList", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedTabId: "selectedTabIdChange", tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "tabListElement", first: true, predicate: ["tabListElement"], descendants: true, isSignal: true }, { propertyName: "tabListItems", predicate: TabListItemDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        [attr.aria-label]=\"messages().scrollPrevious\"\n        (click)=\"startScrolling(tabListElement, 'previous', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'previous')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronUp [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronLeft [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n        }\n    </button>\n}\n<div [class]=\"listWrapperClass()\">\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\n        @for (tab of tabList(); track tab) {\n            @let selected = tab.id === selectedTabId();\n            @let itemDisabled = tab.disabled || disabled();\n            <li\n                monaTabListItem\n                [id]=\"tab.id + '-tab'\"\n                [active]=\"selected\"\n                [disabled]=\"itemDisabled\"\n                [position]=\"position()\"\n                [size]=\"size()\"\n                role=\"tab\"\n                [tabindex]=\"selected ? 0 : -1\"\n                [attr.aria-selected]=\"selected\"\n                [attr.aria-disabled]=\"itemDisabled\"\n                [attr.aria-controls]=\"tab.id + '-panel'\"\n                [attr.data-selected]=\"selected\"\n                [attr.data-tab-id]=\"tab.id\"\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\n                <div>\n                    @if (tab.titleTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\n                    } @else {\n                        <span>{{ tab.title }}</span>\n                    }\n                </div>\n                @if (tab.closable || closable()) {\n                    <button\n                        monaButton\n                        look=\"link\"\n                        [disabled]=\"itemDisabled\"\n                        [attr.aria-label]=\"messages().closeTab\"\n                        (click)=\"onTabClose(tab, $event)\"\n                        class=\"px-0 h-fit ms-1 w-min\"\n                        tabindex=\"-1\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</div>\n@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        [attr.aria-label]=\"messages().scrollNext\"\n        (click)=\"startScrolling(tabListElement, 'next', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'next')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronDown [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n        }\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TabListItemDirective, selector: "li[monaTabListItem]", inputs: ["active", "disabled", "position", "size"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListComponent, decorators: [{
             type: Component,

package/fesm2022/nanahoshi-mona-ui-text-box.mjs

@@ -1,12 +1,10 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, inject, DestroyRef, computed, viewChild, contentChildren, TemplateRef, input, output, model, Component } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { Directive, inject, ElementRef, computed, viewChild, contentChildren, TemplateRef, input, booleanAttribute, output, model, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
-import { themeControlSurfaceClasses, rxTimeout, AttributeBinderDirective } from '@nanahoshi/mona-ui/internal';
+import { themeControlSurfaceClasses, createElementControlId, AttributeBinderDirective } from '@nanahoshi/mona-ui/internal';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -78,7 +76,7 @@ const textBoxThemeVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            large: "h-10 text-md",
+            large: "h-10 text-base",
             medium: "h-9 text-sm",
             small: "h-8 text-xs"
         }
@@ -119,33 +117,18 @@ const inputThemeVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            large: "h-10 text-md",
+            large: "h-10 text-base",
             medium: "h-9 text-sm",
             small: "h-8 text-xs"
         }
-    },
-    compoundVariants: [
-        {
-            rounded: "full",
-            size: "large",
-            class: "px-4"
-        },
-        {
-            rounded: "full",
-            size: "medium",
-            class: "px-4"
-        },
-        {
-            rounded: "full",
-            size: "small",
-            class: "px-4"
-        }
-    ]
+    }
 });
 
+/** Input types that support `setSelectionRange`; `email` throws. */
+const selectableInputTypes = new Set(["password", "search", "tel", "text", "url"]);
 class TextBoxComponent {
     constructor() {
-        this.#destroyRef = inject(DestroyRef);
+        this.#hostElementRef = inject(ElementRef);
         this.#i18n = inject(MonaI18nService);
         this.classes = computed(() => {
             const rounded = this.rounded();
@@ -161,19 +144,36 @@ class TextBoxComponent {
         ...(ngDevMode ? [{ debugName: "invalidInput" }] : /* istanbul ignore next */ []));
         this.messages = this.#i18n.componentMessages("textBox", TEXT_BOX_DEFAULT_MESSAGES);
         this.prefixTemplateList = contentChildren(TextBoxPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.showClearButton = computed(() => this.clearButton() && !this.disabled() && !this.readonly() && !!this.value(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
         this.suffixTemplateList = contentChildren(TextBoxSuffixTemplateDirective, { ...(ngDevMode ? { debugName: "suffixTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Id of an element that describes the inner input, such as a hint or an error message.
+         * @default ""
+         */
+        this.ariaDescribedBy = input("", { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: "aria-describedby" });
+        /**
+         * @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 ""
+         */
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description Id of the element that labels the inner input.
+         * @default ""
+         */
+        this.ariaLabelledBy = input("", { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: "aria-labelledby" });
         /**
          * @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
          */
-        this.clearButton = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "clearButton" }] : /* istanbul ignore next */ []));
+        this.clearButton = input(false, { ...(ngDevMode ? { debugName: "clearButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Renders the component with reduced visual emphasis and removes pointer interaction.
          * @default false
          */
-        this.disabled = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Additional HTML attributes applied directly to the inner `<input>` element.
          * @default {}
@@ -181,7 +181,8 @@ class TextBoxComponent {
         this.inputAttributes = input({}, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputAttributes" }] : /* istanbul ignore next */ []));
         /**
-         * @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.
          */
         this.inputBlur = output();
         /**
@@ -194,6 +195,13 @@ class TextBoxComponent {
          * @description Emitted when the inner input gains focus.
          */
         this.inputFocus = output();
+        /**
+         * @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
+         */
+        this.inputId = input(createElementControlId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         /**
          * @description Inline styles applied to the inner `<input>` element.
          * Accepts a style string or a `CSSStyleDeclaration` partial.
@@ -206,8 +214,28 @@ class TextBoxComponent {
          * this is written by the `FormField` directive.
          * @default false
          */
-        this.invalid = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * @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
+         */
+        this.maxLength = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+        /**
+         * @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
+         */
+        this.minLength = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
+        /**
+         * @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 ""
+         */
+        this.name = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
         /**
          * @description Placeholder text shown when no value has been entered.
          * @default ""
@@ -218,15 +246,13 @@ class TextBoxComponent {
          * @description Prevents value changes while preserving the component's visual state.
          * @default false
          */
-        this.readonly = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Marks the text box as required.
          * Triggers the invalid state when the value is empty and the field has been touched.
          * @default false
          */
-        this.required = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Border-radius preset applied to the component.
          * @default "medium"
@@ -240,8 +266,8 @@ class TextBoxComponent {
         this.size = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
-         * @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.
          */
         this.touch = output();
         /**
@@ -249,8 +275,7 @@ class TextBoxComponent {
          * this is written by the `FormField` directive.
          * @default false
          */
-        this.touched = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        this.touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Sets the `type` attribute of the inner `<input>` element.
          * @default "text"
@@ -269,41 +294,55 @@ class TextBoxComponent {
         this.value = model("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
-    #destroyRef;
+    #hostElementRef;
     #i18n;
-    focus() {
-        const el = this.inputRef().nativeElement;
-        el.focus();
-        rxTimeout(this.#destroyRef, () => {
-            el.scrollLeft = el.scrollWidth;
-        });
+    /**
+     * 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) {
+        const input = this.inputRef().nativeElement;
+        input.focus(options);
+        if (selectableInputTypes.has(input.type)) {
+            const end = input.value.length;
+            input.setSelectionRange(end, end);
+        }
     }
     onClearClick() {
         this.value.set("");
-        this.touch.emit();
         this.inputRef().nativeElement.focus();
     }
     onInputBlur(event) {
         this.inputBlur.emit(event);
-        this.touch.emit();
     }
     onValueChange(value) {
         this.value.set(value);
+    }
+    onFocusOut(event) {
+        const nextTarget = event.relatedTarget;
+        if (nextTarget instanceof Node && this.#hostElementRef.nativeElement.contains(nextTarget)) {
+            return;
+        }
         this.touch.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TextBoxComponent, isStandalone: true, selector: "mona-text-box", inputs: { clearButton: { classPropertyName: "clearButton", publicName: "clearButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputAttributes: { classPropertyName: "inputAttributes", publicName: "inputAttributes", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputBlur: "inputBlur", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { properties: { "attr.data-disabled": "disabled() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "attr.data-invalid": "invalidInput() || null", "class": "classes()" } }, queries: [{ propertyName: "prefixTemplateList", predicate: TextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "suffixTemplateList", predicate: TextBoxSuffixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@let textBoxValue = value();\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\n    <button monaButton look=\"link\" size=\"small\" class=\"me-2 p-0\" [attr.aria-label]=\"messages().clear\" (click)=\"onClearClick()\">\n        <svg lucideX class=\"size-4 opacity-50 hover:opacity-90\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: AttributeBinderDirective, selector: "[monaAttributeBinder]", inputs: ["monaAttributeBinder"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TextBoxComponent, isStandalone: true, selector: "mona-text-box", inputs: { ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, clearButton: { classPropertyName: "clearButton", publicName: "clearButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputAttributes: { classPropertyName: "inputAttributes", publicName: "inputAttributes", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputBlur: "inputBlur", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "attr.aria-describedby": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.data-disabled": "disabled() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "attr.data-invalid": "invalidInput() || null", "class": "classes()" } }, queries: [{ propertyName: "prefixTemplateList", predicate: TextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "suffixTemplateList", predicate: TextBoxSuffixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [id]=\"inputId()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.minlength]=\"minLength() ?? null\"\n    [attr.name]=\"name() || null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [value]=\"value()\"\n    (input)=\"onValueChange(input.value)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@if (showClearButton()) {\n    <button\n        monaButton\n        look=\"ghost\"\n        size=\"small\"\n        class=\"me-1 size-6 shrink-0 p-0 text-muted-foreground hover:text-foreground\"\n        [attr.aria-label]=\"messages().clear\"\n        (click)=\"onClearClick()\">\n        <svg lucideX class=\"size-4\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: AttributeBinderDirective, selector: "[monaAttributeBinder]", inputs: ["monaAttributeBinder"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-text-box", imports: [NgTemplateOutlet, FormsModule, ButtonDirective, AttributeBinderDirective, LucideX], host: {
+            args: [{ selector: "mona-text-box", imports: [NgTemplateOutlet, ButtonDirective, AttributeBinderDirective, LucideX], host: {
+                        // The ARIA inputs below are applied to the inner input, so the host must not keep the static attributes.
+                        "[attr.aria-describedby]": "null",
+                        "[attr.aria-label]": "null",
+                        "[attr.aria-labelledby]": "null",
                         "[attr.data-disabled]": "disabled() || null",
                         "[attr.data-readonly]": "readonly() || null",
                         "[attr.data-required]": "required() || null",
                         "[attr.data-invalid]": "invalidInput() || null",
-                        "[class]": "classes()"
-                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@let textBoxValue = value();\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\n    <button monaButton look=\"link\" size=\"small\" class=\"me-2 p-0\" [attr.aria-label]=\"messages().clear\" (click)=\"onClearClick()\">\n        <svg lucideX class=\"size-4 opacity-50 hover:opacity-90\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\n" }]
-        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ["input", { isSignal: true }] }], prefixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextBoxPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], suffixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextBoxSuffixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], clearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButton", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAttributes", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                        "[class]": "classes()",
+                        "(focusout)": "onFocusOut($event)"
+                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [id]=\"inputId()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.minlength]=\"minLength() ?? null\"\n    [attr.name]=\"name() || null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [value]=\"value()\"\n    (input)=\"onValueChange(input.value)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@if (showClearButton()) {\n    <button\n        monaButton\n        look=\"ghost\"\n        size=\"small\"\n        class=\"me-1 size-6 shrink-0 p-0 text-muted-foreground hover:text-foreground\"\n        [attr.aria-label]=\"messages().clear\"\n        (click)=\"onClearClick()\">\n        <svg lucideX class=\"size-4\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\n" }]
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ["input", { isSignal: true }] }], prefixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextBoxPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], suffixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextBoxSuffixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], clearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButton", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAttributes", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class TextBoxDirective {
     constructor() {
@@ -321,8 +360,7 @@ class TextBoxDirective {
          * @description Marks the input as invalid, triggering error border and ring styling.
          * @default false
          */
-        this.invalid = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Border-radius preset applied to the component.
          * @default "medium"
@@ -339,8 +377,7 @@ class TextBoxDirective {
          * @description Marks the input as touched. Error styling is only shown when both `invalid` and `touched` are `true`.
          * @default false
          */
-        this.touched = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        this.touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
          * @default ""

package/fesm2022/nanahoshi-mona-ui-time-picker.mjs

@@ -11,7 +11,7 @@ import { themeControlSurfaceClasses, createElementControlId } from '@nanahoshi/m
 import { TextBoxComponent, TextBoxSuffixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
 import { TimeSelectorComponent } from '@nanahoshi/mona-ui/time-selector';
 import { DateTime } from 'luxon';
-import { fromEvent } from 'rxjs';
+import { fromEvent, filter } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -63,7 +63,7 @@ const timePickerBaseThemeVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            large: "h-10 text-md",
+            large: "h-10 text-base",
             medium: "h-9 text-sm",
             small: "h-8 text-xs"
         }
@@ -129,6 +129,8 @@ class TimePickerComponent {
                 "aria-haspopup": hasPopup,
                 "aria-invalid": invalid,
                 id: this.#id,
+                // The text box hides its clear button when read-only, so typing is blocked here instead.
+                readonly: this.readonly() || this.readonlyInput(),
                 role: "combobox"
             };
         }, /* @ts-ignore */
@@ -428,7 +430,7 @@ class TimePickerComponent {
             .pipe(takeUntilDestroyed(this.#destroyRef))
             .subscribe(() => this.focus());
         this.#dropdownService.popupCloseComplete$
-            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .pipe(filter(() => this.#dropdownService.focusCanReturn()), takeUntilDestroyed(this.#destroyRef))
             .subscribe(() => this.focus());
     }
     updateCurrentDateString(date, format) {
@@ -447,7 +449,7 @@ class TimePickerComponent {
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: false
             }
-        ], viewQueries: [{ propertyName: "timePopupTemplateRef", first: true, predicate: ["timePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [value]=\"currentDateString()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    (inputBlur)=\"onTimeInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideClock [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().timePicker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"hourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideClock, selector: "svg[lucideClock]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["aria-label", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
+        ], viewQueries: [{ propertyName: "timePopupTemplateRef", first: true, predicate: ["timePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [value]=\"currentDateString()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    (inputBlur)=\"onTimeInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideClock [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().timePicker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"hourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideClock, selector: "svg[lucideClock]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["aria-label", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["aria-describedby", "aria-label", "aria-labelledby", "clearButton", "disabled", "inputAttributes", "inputClass", "inputId", "inputStyle", "invalid", "maxLength", "minLength", "name", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -474,7 +476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-readonly]": "readonly() || null",
                         "[class]": "baseClass()",
                         "(blur)": "onTimeInputBlur()"
-                    }, template: "<mona-text-box\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [value]=\"currentDateString()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    (inputBlur)=\"onTimeInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideClock [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().timePicker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"hourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n" }]
+                    }, template: "<mona-text-box\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [value]=\"currentDateString()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    (inputBlur)=\"onTimeInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideClock [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().timePicker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"hourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { timePopupTemplateRef: [{ type: i0.ViewChild, args: ["timePopupTemplate", { isSignal: true }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], hourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourStep", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /*