@nanahoshi/mona-ui 0.2.0 → 0.3.0

package/fesm2022/nanahoshi-mona-ui-auto-complete.mjs

@@ -148,7 +148,7 @@ class AutoCompleteComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
         this.itemTemplate = contentChild(DropdownItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.value()), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.isEmpty = computed(() => !this.#listService.viewItems().any(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
@@ -518,7 +518,7 @@ class AutoCompleteComponent {
                 useExisting: forwardRef(() => AutoCompleteComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: DropdownSuffixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    role=\"combobox\"\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [ngModel]=\"autoCompleteValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    (ngModelChange)=\"autoCompleteValue$.next($event)\"\n    (blur)=\"onInputBlur()\" />\n\n@if (showClearButton() && autoCompleteValue() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n@if (suffixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n    </span>\n}\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["rounded", "size", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: DropdownSuffixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    role=\"combobox\"\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [ngModel]=\"autoCompleteValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    (ngModelChange)=\"autoCompleteValue$.next($event)\"\n    (blur)=\"onInputBlur()\" />\n\n@if (showClearButton() && autoCompleteValue() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n@if (suffixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n    </span>\n}\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["invalid", "rounded", "size", "touched", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,

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

@@ -595,7 +595,7 @@ class CalendarComponent {
             return calendarHeaderThemeVariants({});
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && this.isEmptyValue()), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && this.isEmptyValue())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.monthBounds = computed(() => {
             const navigatedDate = this.navigatedDate();

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

@@ -25,7 +25,6 @@ const checkmarkThemeVariants = cva(`
         peer-focus-visible:border-focus-indicator
         peer-focus-visible:ring-2 peer-focus-visible:ring-focus-indicator/35
 
-        [&.ng-touched.ng-invalid]:border-error
         data-[invalid='true']:border-error
         data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
         data-[invalid='true']:peer-focus-visible:border-error
@@ -96,10 +95,10 @@ const checkboxDirectiveThemeVariants = cva(`
         indeterminate:after:[mask-repeat:no-repeat]
         indeterminate:after:[mask-size:contain]
 
-        [&.ng-touched.ng-invalid]:border-error
-        [&.ng-touched.ng-invalid]:ring-2 [&.ng-touched.ng-invalid]:ring-error/35
-        [&.ng-touched.ng-invalid]:focus-visible:border-error
-        [&.ng-touched.ng-invalid]:focus-visible:ring-error/35
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:focus-visible:border-error
+        data-[invalid='true']:focus-visible:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -130,7 +129,7 @@ class CheckBoxComponent {
             return twMerge(variantClasses, classes);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerLabelClasses" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.checked()), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.checked())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         /**
          * @description Whether the control is checked.
@@ -255,12 +254,26 @@ class CheckboxDirective {
             return twMerge(variantClasses, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.inputInvalid = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputInvalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the checkbox as invalid, triggering error border and ring styling.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
         /**
          * @description Border-radius preset applied to the checkbox.
          * @default "medium"
          */
         this.rounded = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the checkbox 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 */ []));
         /**
          * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
          * @default ""
@@ -268,17 +281,19 @@ class CheckboxDirective {
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: CheckboxDirective, isStandalone: true, selector: "input[type='checkbox'][monaCheckbox]", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: CheckboxDirective, isStandalone: true, selector: "input[type='checkbox'][monaCheckbox]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-invalid": "inputInvalid() || null", "attr.data-invalid": "inputInvalid() || null", "class": "classes()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckboxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "input[type='checkbox'][monaCheckbox]",
                     host: {
+                        "[attr.aria-invalid]": "inputInvalid() || null",
+                        "[attr.data-invalid]": "inputInvalid() || null",
                         "[class]": "classes()"
                     }
                 }]
-        }], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/check-box

package/fesm2022/nanahoshi-mona-ui-color-gradient.mjs

@@ -196,7 +196,7 @@ class ColorGradientComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hsvRectangleHandleClasses" }] : /* istanbul ignore next */ []));
         this.hueValue$ = new Subject();
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.value()), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.lastSelectedColor = signal("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lastSelectedColor" }] : /* istanbul ignore next */ []));

package/fesm2022/nanahoshi-mona-ui-color-palette.mjs

@@ -711,7 +711,7 @@ class ColorPaletteComponent {
         ...(ngDevMode ? [{ debugName: "focusedColorIndex" }] : /* istanbul ignore next */ []));
         this.activeColorIndex = computed(() => this.focusedColorIndex() === -1 ? 0 : this.focusedColorIndex(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeColorIndex" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.value()), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         /**
          * @description The number of columns in the color palette grid.

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

@@ -49,10 +49,6 @@ const colorPickerBaseThemeVariants = cva(`
         data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
         data-[invalid='true']:focus-within:border-error
         data-[invalid='true']:focus-within:ring-error/35
-        [&.ng-touched.ng-invalid]:border-error
-        [&.ng-touched.ng-invalid]:ring-2 [&.ng-touched.ng-invalid]:ring-error/35
-        [&.ng-touched.ng-invalid]:focus-within:border-error
-        [&.ng-touched.ng-invalid]:focus-within:ring-error/35
     `, {
     variants: {
         expanded: {
@@ -121,7 +117,7 @@ class ColorPickerComponent {
         ...(ngDevMode ? [{ debugName: "colorClasses" }] : /* istanbul ignore next */ []));
         this.expanded = computed(() => this.#popupRef() !== null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.value()), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.gradientPopupClasses = `${themeOverlaySurfaceClasses} border border-border shadow-(--shadow-overlay)`;
         this.palettePopupClasses = `flex flex-col p-0.5 ${themeOverlaySurfaceClasses} border border-border shadow-(--shadow-overlay) outline-none`;

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

@@ -141,7 +141,7 @@ class ComboBoxComponent {
             return comboBoxTextInputThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && this.value() == null), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && this.value() == null)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.itemTemplate = contentChild(DropdownItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.listId = createElementControlId();
@@ -609,7 +609,7 @@ class ComboBoxComponent {
                 useExisting: forwardRef(() => ComboBoxComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [ngModel]=\"comboBoxValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    role=\"combobox\"\n    (ngModelChange)=\"comboBoxValue$.next($event)\"\n    (blur)=\"onInputBlur()\" />\n\n@if (showClearButton() && selectedListItem() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["rounded", "size", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [ngModel]=\"comboBoxValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    role=\"combobox\"\n    (ngModelChange)=\"comboBoxValue$.next($event)\"\n    (blur)=\"onInputBlur()\" />\n\n@if (showClearButton() && selectedListItem() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["invalid", "rounded", "size", "touched", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,

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

@@ -108,7 +108,7 @@ class DatePickerComponent {
             const controls = this.popupId;
             const expanded = this.#dropdownService.popupRef() != null;
             const hasPopup = "grid";
-            const invalid = this.invalid();
+            const invalid = this.invalidState();
             return {
                 "aria-autocomplete": "none",
                 "aria-controls": controls,
@@ -120,7 +120,7 @@ class DatePickerComponent {
             };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputAttributes" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.value()), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.monthCellTemplate = contentChild(CalendarMonthCellTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthCellTemplate" }] : /* istanbul ignore next */ []));

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

@@ -135,7 +135,7 @@ class DateTimePickerComponent {
             const controls = this.popupId;
             const expanded = this.#dropdownService.popupRef() != null;
             const hasPopup = "dialog";
-            const invalid = this.invalid();
+            const invalid = this.invalidState();
             return {
                 "aria-autocomplete": "none",
                 "aria-controls": controls,
@@ -147,7 +147,7 @@ class DateTimePickerComponent {
             };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputAttributes" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.value()), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.monthCellTemplate = contentChild(CalendarMonthCellTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthCellTemplate" }] : /* istanbul ignore next */ []));

package/fesm2022/nanahoshi-mona-ui-dropdown-list.mjs

@@ -135,7 +135,7 @@ class DropdownListComponent {
         this.groupHeaderTemplate = contentChild(DropdownGroupHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "groupHeaderTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.headerTemplate = contentChild(DropdownHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.itemTemplate = contentChild(DropdownItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && this.value() == null), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && this.value() == null)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.isEmpty = computed(() => !this.#listService.viewItems().any(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));

package/fesm2022/nanahoshi-mona-ui-internal-list.mjs

@@ -910,7 +910,7 @@ class ListItemComponent {
         this.checked.emit(checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListItemComponent, isStandalone: true, selector: "mona-list-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checked" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (checkboxes()) {\n    <input\n        type=\"checkbox\"\n        [ngModel]=\"itemChecked()\"\n        monaCheckbox\n        class=\"aspect-square\"\n        (click)=\"$event.stopPropagation()\"\n        (ngModelChange)=\"onCheckboxChange($event)\"\n        (change)=\"$event.preventDefault()\" />\n}\n\n@if (template()) {\n    <ng-container [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"{ $implicit: dataItem() }\"></ng-container>\n} @else {\n    <span [class]=\"textClasses()\">{{ itemText() }}</span>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CheckboxDirective, selector: "input[type='checkbox'][monaCheckbox]", inputs: ["rounded", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListItemComponent, isStandalone: true, selector: "mona-list-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checked" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (checkboxes()) {\n    <input\n        type=\"checkbox\"\n        [ngModel]=\"itemChecked()\"\n        monaCheckbox\n        class=\"aspect-square\"\n        (click)=\"$event.stopPropagation()\"\n        (ngModelChange)=\"onCheckboxChange($event)\"\n        (change)=\"$event.preventDefault()\" />\n}\n\n@if (template()) {\n    <ng-container [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"{ $implicit: dataItem() }\"></ng-container>\n} @else {\n    <span [class]=\"textClasses()\">{{ itemText() }}</span>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CheckboxDirective, selector: "input[type='checkbox'][monaCheckbox]", inputs: ["invalid", "rounded", "touched", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,

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

@@ -0,0 +1,180 @@
+import * as i0 from '@angular/core';
+import { computed, input, Directive, Component } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+const labelComponentThemeVariants = cva(`
+        inline-flex
+        flex-col
+        gap-1.5
+        text-sm
+        font-medium
+        leading-none
+        text-foreground
+    `);
+const labelDirectiveThemeVariants = cva(`
+        text-sm
+        font-medium
+        leading-none
+        text-foreground
+    `);
+const labelCaptionThemeVariants = cva(`
+        inline-flex
+        items-baseline
+    `);
+const labelOptionalThemeVariants = cva(`
+        ms-1
+        text-xs
+        font-normal
+        text-muted-foreground
+    `);
+
+function getLabelForAttribute(target) {
+    return typeof target === "string" ? target : null;
+}
+function focusLabelTarget(target, event) {
+    if (event.defaultPrevented || target === null || target === undefined || typeof target === "string") {
+        return;
+    }
+    target.focus();
+}
+
+class LabelDirective {
+    constructor() {
+        this.classes = computed(() => twMerge(labelDirectiveThemeVariants(), this.userClass()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.forAttribute = computed(() => getLabelForAttribute(this.for()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "forAttribute" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Associates the label with a native control ID or a target that exposes a public `focus()` method.
+         * String values are reflected as the native `for` attribute. Object targets receive focus when the label is clicked.
+         * @default undefined
+         */
+        this.for = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the native label element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+    }
+    onLabelClick(event) {
+        focusLabelTarget(this.for(), event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: LabelDirective, isStandalone: true, selector: "label[monaLabel]", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onLabelClick($event)" }, properties: { "attr.for": "forAttribute()", "class": "classes()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "label[monaLabel]",
+                    host: {
+                        "[attr.for]": "forAttribute()",
+                        "[class]": "classes()",
+                        "(click)": "onLabelClick($event)"
+                    }
+                }]
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class LabelComponent {
+    constructor() {
+        this.captionClasses = labelCaptionThemeVariants();
+        this.classes = computed(() => twMerge(labelComponentThemeVariants(), this.userClass()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.forAttribute = computed(() => getLabelForAttribute(this.for()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "forAttribute" }] : /* istanbul ignore next */ []));
+        this.optionalClasses = labelOptionalThemeVariants();
+        /**
+         * @description Associates the label with a native control ID or a target that exposes a public `focus()` method.
+         * String values are reflected as the native `for` attribute. Object targets receive focus when the label is clicked.
+         * @default undefined
+         */
+        this.for = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether to display optional-field text next to the caption.
+         * @default false
+         */
+        this.optional = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Text displayed when `optional` is enabled.
+         * @default "Optional"
+         */
+        this.optionalText = input("Optional", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionalText" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Visible label caption text.
+         * @default ""
+         */
+        this.text = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the rendered `<label>` element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+    }
+    onLabelClick(event) {
+        focusLabelTarget(this.for(), event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: LabelComponent, isStandalone: true, selector: "mona-label", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalText: { classPropertyName: "optionalText", publicName: "optionalText", 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 } }, host: { classAttribute: "inline-block" }, ngImport: i0, template: `
+        <label
+            [attr.for]="forAttribute()"
+            [class]="classes()"
+            [attr.data-optional]="optional() || null"
+            (click)="onLabelClick($event)">
+            @if (text() || optional()) {
+                <span [class]="captionClasses">
+                    @if (text()) {
+                        <span>{{ text() }}</span>
+                    }
+                    @if (optional()) {
+                        <span [class]="optionalClasses">{{ optionalText() }}</span>
+                    }
+                </span>
+            }
+            <ng-content></ng-content>
+        </label>
+    `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-label",
+                    template: `
+        <label
+            [attr.for]="forAttribute()"
+            [class]="classes()"
+            [attr.data-optional]="optional() || null"
+            (click)="onLabelClick($event)">
+            @if (text() || optional()) {
+                <span [class]="captionClasses">
+                    @if (text()) {
+                        <span>{{ text() }}</span>
+                    }
+                    @if (optional()) {
+                        <span [class]="optionalClasses">{{ optionalText() }}</span>
+                    }
+                </span>
+            }
+            <ng-content></ng-content>
+        </label>
+    `,
+                    host: {
+                        class: "inline-block"
+                    }
+                }]
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], optionalText: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalText", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/label
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LabelComponent, LabelDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-label.mjs.map

package/fesm2022/nanahoshi-mona-ui-multi-select.mjs

@@ -146,7 +146,7 @@ class MultiSelectComponent {
         this.footerTemplate = contentChild(DropdownFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.groupHeaderTemplate = contentChild(DropdownGroupHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "groupHeaderTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.headerTemplate = contentChild(DropdownHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && none(this.value())), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && none(this.value()))), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.indicatorClass = computed(() => {
             const size = this.size();

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

@@ -175,7 +175,7 @@ class NumericTextBoxComponent {
             return this.formatValueForDisplay(this.value());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
-        this.invalidInput = computed(() => this.invalid() || (this.required() && this.value() == null && this.touched()), /* @ts-ignore */
+        this.invalidInput = computed(() => this.touched() && (this.invalid() || (this.required() && this.value() == null)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidInput" }] : /* istanbul ignore next */ []));
         this.keydown$ = new Subject();
         this.rawInputValue = signal("", /* @ts-ignore */
@@ -544,7 +544,7 @@ class NumericTextBoxComponent {
         return parseFloat(sanitizedValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NumericTextBoxComponent, isStandalone: true, selector: "mona-numeric-text-box", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, nullable: { classPropertyName: "nullable", publicName: "nullable", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", 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 }, spinners: { classPropertyName: "spinners", publicName: "spinners", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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", inputFocusOut: "inputFocusOut", touch: "touch", value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidInput() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null" } }, queries: [{ propertyName: "prefixTemplateList", predicate: NumericTextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "valueTextBoxRef", first: true, predicate: ["valueTextBox"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-none flex-wrap items-center overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    inputmode=\"numeric\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Increase value\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Decrease value\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["rounded", "size", "class"] }, { 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", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { 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: NumericTextBoxComponent, isStandalone: true, selector: "mona-numeric-text-box", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, nullable: { classPropertyName: "nullable", publicName: "nullable", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", 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 }, spinners: { classPropertyName: "spinners", publicName: "spinners", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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", inputFocusOut: "inputFocusOut", touch: "touch", value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidInput() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null" } }, queries: [{ propertyName: "prefixTemplateList", predicate: NumericTextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "valueTextBoxRef", first: true, predicate: ["valueTextBox"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-none flex-wrap items-center overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    inputmode=\"numeric\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Increase value\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Decrease value\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["invalid", "rounded", "size", "touched", "class"] }, { 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", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { 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: NumericTextBoxComponent, decorators: [{
             type: Component,

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

@@ -94,10 +94,10 @@ const radioButtonDirectiveThemeVariants = cva(`
         focus-visible:border-focus-indicator
         focus-visible:ring-2 focus-visible:ring-focus-indicator/35
 
-        [&.ng-touched.ng-invalid]:border-error
-        [&.ng-touched.ng-invalid]:ring-2 [&.ng-touched.ng-invalid]:ring-error/35
-        [&.ng-touched.ng-invalid]:focus-visible:border-error
-        [&.ng-touched.ng-invalid]:focus-visible:ring-error/35
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:focus-visible:border-error
+        data-[invalid='true']:focus-visible:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -141,6 +141,8 @@ class RadioButtonComponent {
             return twMerge(variantClasses, userClasses);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerLabelClasses" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.radioButtonCircleClasses = computed(() => {
             const rounded = this.rounded();
             return radioButtonCircleThemeVariants({ rounded });
@@ -221,6 +223,13 @@ class RadioButtonComponent {
         this.rounded = input("full", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
         this.touch = output();
+        /**
+         * @description Marks the radio button as touched. Error styling requires both `invalid` and `touched` to be `true`.
+         * When bound to a signal form field via `[field]`, this is written by the signal forms `Field` directive.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
         /**
          * @description Additional CSS classes merged onto the label container element via `tailwind-merge`.
          * @default ""
@@ -244,15 +253,15 @@ class RadioButtonComponent {
         this.touch.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RadioButtonComponent, isStandalone: true, selector: "mona-radio-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, radioValue: { classPropertyName: "radioValue", publicName: "radioValue", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", 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", inputClick: "inputClick", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { properties: { "attr.data-selected": "radioValue()===value()", "attr.data-disabled": "disabled()" } }, ngImport: i0, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n    <input\n        type=\"radio\"\n        [disabled]=\"disabled()\"\n        [name]=\"name()\"\n        [value]=\"radioValue()\"\n        [class]=\"radioButtonClasses()\"\n        [checked]=\"radioValue() === value()\"\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"inputClick.emit($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (change)=\"onSelectionChange()\" />\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalid() || null\">\n        @if (radioValue() === value()) {\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RadioButtonComponent, isStandalone: true, selector: "mona-radio-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, radioValue: { classPropertyName: "radioValue", publicName: "radioValue", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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", inputClick: "inputClick", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { properties: { "attr.data-selected": "radioValue()===value()", "attr.data-disabled": "disabled()" } }, ngImport: i0, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n    <input\n        type=\"radio\"\n        [disabled]=\"disabled()\"\n        [name]=\"name()\"\n        [value]=\"radioValue()\"\n        [class]=\"radioButtonClasses()\"\n        [checked]=\"radioValue() === value()\"\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"inputClick.emit($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (change)=\"onSelectionChange()\" />\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalidState() || null\">\n        @if (radioValue() === value()) {\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-radio-button", imports: [FormsModule, NgTemplateOutlet], host: {
                         "[attr.data-selected]": "radioValue()===value()",
                         "[attr.data-disabled]": "disabled()"
-                    }, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n    <input\n        type=\"radio\"\n        [disabled]=\"disabled()\"\n        [name]=\"name()\"\n        [value]=\"radioValue()\"\n        [class]=\"radioButtonClasses()\"\n        [checked]=\"radioValue() === value()\"\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"inputClick.emit($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (change)=\"onSelectionChange()\" />\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalid() || null\">\n        @if (radioValue() === value()) {\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n" }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputClick: [{ type: i0.Output, args: ["inputClick"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSize", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], radioValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "radioValue", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], 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"] }] } });
+                    }, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n    <input\n        type=\"radio\"\n        [disabled]=\"disabled()\"\n        [name]=\"name()\"\n        [value]=\"radioValue()\"\n        [class]=\"radioButtonClasses()\"\n        [checked]=\"radioValue() === value()\"\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"inputClick.emit($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (change)=\"onSelectionChange()\" />\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalidState() || null\">\n        @if (radioValue() === value()) {\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n" }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputClick: [{ type: i0.Output, args: ["inputClick"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSize", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], radioValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "radioValue", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", 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"] }] } });
 
 class RadioButtonDirective {
     constructor() {
@@ -261,26 +270,42 @@ class RadioButtonDirective {
             return radioButtonDirectiveThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.inputInvalid = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputInvalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the radio button as invalid, triggering error border and ring styling.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the border radius of the radio button.
          * @default "none"
          */
         this.rounded = input("none", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the radio button 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 */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: RadioButtonDirective, isStandalone: true, selector: "input[type='radio'][monaRadioButton]", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "'radio'" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: RadioButtonDirective, isStandalone: true, selector: "input[type='radio'][monaRadioButton]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-invalid": "inputInvalid() || null", "attr.data-invalid": "inputInvalid() || null", "class": "classes()", "attr.role": "'radio'" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "input[type='radio'][monaRadioButton]",
                     host: {
+                        "[attr.aria-invalid]": "inputInvalid() || null",
+                        "[attr.data-invalid]": "inputInvalid() || null",
                         "[class]": "classes()",
                         "[attr.role]": "'radio'"
                     }
                 }]
-        }], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
+        }], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/radio-button

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

@@ -61,7 +61,6 @@ const switchThemeVariants = cva(`
         focus-visible:border-focus-indicator
         focus-visible:ring-2 focus-visible:ring-focus-indicator/35
 
-        [&.ng-touched.ng-invalid]:border-error
         data-[invalid='true']:border-error
         data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
         data-[invalid='true']:focus-visible:border-error
@@ -136,7 +135,7 @@ class SwitchComponent {
             return twMerge(classes, this.userClass());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.checked()), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.checked())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.handleClasses = computed(() => {
             const rounded = this.rounded();

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

@@ -22,10 +22,6 @@ const textAreaThemeVariants = cva(`
         focus-visible:border-focus-indicator
         focus-visible:ring-2 focus-visible:ring-focus-indicator/35
 
-        [&.ng-touched.ng-invalid]:border-error
-        [&.ng-touched.ng-invalid]:ring-2 [&.ng-touched.ng-invalid]:ring-error/35
-        [&.ng-touched.ng-invalid]:focus-visible:border-error
-        [&.ng-touched.ng-invalid]:focus-visible:ring-error/35
         data-[invalid='true']:border-error
         data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
         data-[invalid='true']:focus-visible:border-error

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

@@ -98,10 +98,10 @@ const inputThemeVariants = cva(`
         focus-visible:border-focus-indicator
         focus-visible:ring-2 focus-visible:ring-focus-indicator/35
 
-        [&.ng-touched.ng-invalid]:border-error
-        [&.ng-touched.ng-invalid]:ring-2 [&.ng-touched.ng-invalid]:ring-error/35
-        [&.ng-touched.ng-invalid]:focus-visible:border-error
-        [&.ng-touched.ng-invalid]:focus-visible:ring-error/35
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:focus-visible:border-error
+        data-[invalid='true']:focus-visible:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -149,7 +149,7 @@ class TextBoxComponent {
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
         this.inputRef = viewChild.required("input", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
-        this.invalidInput = computed(() => this.invalid() || (this.required() && !this.value() && this.touched()), /* @ts-ignore */
+        this.invalidInput = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidInput" }] : /* istanbul ignore next */ []));
         this.prefixTemplateList = contentChildren(TextBoxPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.suffixTemplateList = contentChildren(TextBoxSuffixTemplateDirective, { ...(ngDevMode ? { debugName: "suffixTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -305,6 +305,14 @@ class TextBoxDirective {
             return twMerge(classes, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.inputInvalid = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputInvalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @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 */ []));
         /**
          * @description Border-radius preset applied to the component.
          * @default "medium"
@@ -317,6 +325,12 @@ class TextBoxDirective {
          */
         this.size = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @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 */ []));
         /**
          * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
          * @default ""
@@ -324,17 +338,19 @@ class TextBoxDirective {
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TextBoxDirective, isStandalone: true, selector: "input[monaTextBox]", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TextBoxDirective, isStandalone: true, selector: "input[monaTextBox]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-invalid": "inputInvalid() || null", "attr.data-invalid": "inputInvalid() || null", "class": "classes()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "input[monaTextBox]",
                     host: {
+                        "[attr.aria-invalid]": "inputInvalid() || null",
+                        "[attr.data-invalid]": "inputInvalid() || null",
                         "[class]": "classes()"
                     }
                 }]
-        }], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/text-box

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

@@ -101,7 +101,7 @@ class TimePickerComponent {
             const controls = this.popupId;
             const expanded = this.#dropdownService.popupRef() != null;
             const hasPopup = "dialog";
-            const invalid = this.invalid();
+            const invalid = this.invalidState();
             return {
                 "aria-autocomplete": "none",
                 "aria-controls": controls,
@@ -113,7 +113,7 @@ class TimePickerComponent {
             };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputAttributes" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.value()), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.navigatedDate = signal(new Date(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));

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

@@ -229,6 +229,8 @@ class TimeSelectorComponent {
             return timeSelectorInfoContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "infoContainerClass" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.listContainerClass = computed(() => {
             return timeSelectorListContainerThemeVariants();
         }, /* @ts-ignore */
@@ -628,7 +630,7 @@ class TimeSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TimeSelectorComponent, isStandalone: true, selector: "mona-time-selector", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, focusOnMount: { classPropertyName: "focusOnMount", publicName: "focusOnMount", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", 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 }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "blur": "onBlur()" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "invalid() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()", "attr.data-invalid": "invalid() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "class": "baseClass()" } }, viewQueries: [{ propertyName: "hourListRef", first: true, predicate: ["hourList"], descendants: true, isSignal: true }, { propertyName: "meridiemListRef", first: true, predicate: ["meridiemList"], descendants: true, isSignal: true }, { propertyName: "minuteListRef", first: true, predicate: ["minuteList"], descendants: true, isSignal: true }, { propertyName: "secondListRef", first: true, predicate: ["secondList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n    <div>Hr</div>\n    <div>Min</div>\n    @if (showSeconds()) {\n        <div>Sec</div>\n    }\n</div>\n\n<div [class]=\"infoContainerClass()\">\n    <span>{{ navigatedDateText() }}</span>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onNowClick($event)\"\n        (keydown.enter)=\"onNowClick($event)\"\n        (keydown.space)=\"onNowClick($event)\">\n        Now\n    </button>\n</div>\n\n<div [class]=\"listContainerClass()\">\n    <ol\n        #hourList\n        monaTimeSelectorList\n        aria-label=\"Hours\"\n        [attr.aria-activedescendant]=\"`${hourListId}${navigatedDate().hour}`\"\n        [active]=\"focusedList() === 'hours'\"\n        [id]=\"hourListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (h of viewHours() | timeLimiter: \"h\" : navigatedDate() : minDate() : maxDate(); track h) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"h.viewValue === hour()\"\n                [value]=\"h.value\"\n                [id]=\"`${hourListId}${h.value}`\"\n                (click)=\"onHourChange(h.value)\">\n                {{ h.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    <ol\n        #minuteList\n        monaTimeSelectorList\n        aria-label=\"Minutes\"\n        [attr.aria-activedescendant]=\"`${minuteListId}${navigatedDate().minute}`\"\n        [active]=\"focusedList() === 'minutes'\"\n        [id]=\"minuteListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (m of minutes() | timeLimiter: \"m\" : navigatedDate() : minDate() : maxDate(); track m) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"m.value === minute()\"\n                [value]=\"m.value\"\n                [id]=\"`${minuteListId}${m.value}`\"\n                (click)=\"onMinuteChange(m.value)\">\n                {{ m.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    @if (showSeconds()) {\n        <ol\n            #secondList\n            monaTimeSelectorList\n            aria-label=\"Seconds\"\n            [attr.aria-activedescendant]=\"`${secondListId}${navigatedDate().second}`\"\n            [active]=\"focusedList() === 'seconds'\"\n            [id]=\"secondListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @for (s of seconds() | timeLimiter: \"s\" : navigatedDate() : minDate() : maxDate(); track s) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"s.value === second()\"\n                    [value]=\"s.value\"\n                    [id]=\"`${secondListId}${s.value}`\"\n                    (click)=\"onSecondChange(s.value)\">\n                    {{ s.value | number: \"2.0\" }}\n                </li>\n            }\n        </ol>\n    }\n    @if (hourFormat() === \"12\") {\n        <ol\n            #meridiemList\n            monaTimeSelectorList\n            aria-label=\"AM/PM\"\n            [attr.aria-activedescendant]=\"`${meridiemListId}${meridiem()}`\"\n            [active]=\"focusedList() === 'meridiem'\"\n            [id]=\"meridiemListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @if (amMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'AM'\"\n                    [value]=\"'AM'\"\n                    (click)=\"onMeridiemClick('AM')\"\n                    [id]=\"`${meridiemListId}AM`\">\n                    AM\n                </li>\n            }\n            @if (pmMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'PM'\"\n                    [value]=\"'PM'\"\n                    (click)=\"onMeridiemClick('PM')\"\n                    [id]=\"`${meridiemListId}PM`\">\n                    PM\n                </li>\n            }\n        </ol>\n    }\n</div>\n\n@if (footer()) {\n    <div [class]=\"footerClass()\">\n        <button monaButton look=\"primary\" [rounded]=\"rounded()\" [size]=\"size()\" (click)=\"onSetTimeClick()\">Set</button>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: TimeSelectorItemDirective, selector: "li[monaTimeSelectorItem]", inputs: ["selected", "size", "value"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: TimeSelectorListDirective, selector: "ol[monaTimeSelectorList]", inputs: ["active", "popupHeight", "size"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: TimeLimiterPipe, name: "timeLimiter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TimeSelectorComponent, isStandalone: true, selector: "mona-time-selector", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, focusOnMount: { classPropertyName: "focusOnMount", publicName: "focusOnMount", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", 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 }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "blur": "onBlur()" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "class": "baseClass()" } }, viewQueries: [{ propertyName: "hourListRef", first: true, predicate: ["hourList"], descendants: true, isSignal: true }, { propertyName: "meridiemListRef", first: true, predicate: ["meridiemList"], descendants: true, isSignal: true }, { propertyName: "minuteListRef", first: true, predicate: ["minuteList"], descendants: true, isSignal: true }, { propertyName: "secondListRef", first: true, predicate: ["secondList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n    <div>Hr</div>\n    <div>Min</div>\n    @if (showSeconds()) {\n        <div>Sec</div>\n    }\n</div>\n\n<div [class]=\"infoContainerClass()\">\n    <span>{{ navigatedDateText() }}</span>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onNowClick($event)\"\n        (keydown.enter)=\"onNowClick($event)\"\n        (keydown.space)=\"onNowClick($event)\">\n        Now\n    </button>\n</div>\n\n<div [class]=\"listContainerClass()\">\n    <ol\n        #hourList\n        monaTimeSelectorList\n        aria-label=\"Hours\"\n        [attr.aria-activedescendant]=\"`${hourListId}${navigatedDate().hour}`\"\n        [active]=\"focusedList() === 'hours'\"\n        [id]=\"hourListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (h of viewHours() | timeLimiter: \"h\" : navigatedDate() : minDate() : maxDate(); track h) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"h.viewValue === hour()\"\n                [value]=\"h.value\"\n                [id]=\"`${hourListId}${h.value}`\"\n                (click)=\"onHourChange(h.value)\">\n                {{ h.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    <ol\n        #minuteList\n        monaTimeSelectorList\n        aria-label=\"Minutes\"\n        [attr.aria-activedescendant]=\"`${minuteListId}${navigatedDate().minute}`\"\n        [active]=\"focusedList() === 'minutes'\"\n        [id]=\"minuteListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (m of minutes() | timeLimiter: \"m\" : navigatedDate() : minDate() : maxDate(); track m) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"m.value === minute()\"\n                [value]=\"m.value\"\n                [id]=\"`${minuteListId}${m.value}`\"\n                (click)=\"onMinuteChange(m.value)\">\n                {{ m.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    @if (showSeconds()) {\n        <ol\n            #secondList\n            monaTimeSelectorList\n            aria-label=\"Seconds\"\n            [attr.aria-activedescendant]=\"`${secondListId}${navigatedDate().second}`\"\n            [active]=\"focusedList() === 'seconds'\"\n            [id]=\"secondListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @for (s of seconds() | timeLimiter: \"s\" : navigatedDate() : minDate() : maxDate(); track s) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"s.value === second()\"\n                    [value]=\"s.value\"\n                    [id]=\"`${secondListId}${s.value}`\"\n                    (click)=\"onSecondChange(s.value)\">\n                    {{ s.value | number: \"2.0\" }}\n                </li>\n            }\n        </ol>\n    }\n    @if (hourFormat() === \"12\") {\n        <ol\n            #meridiemList\n            monaTimeSelectorList\n            aria-label=\"AM/PM\"\n            [attr.aria-activedescendant]=\"`${meridiemListId}${meridiem()}`\"\n            [active]=\"focusedList() === 'meridiem'\"\n            [id]=\"meridiemListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @if (amMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'AM'\"\n                    [value]=\"'AM'\"\n                    (click)=\"onMeridiemClick('AM')\"\n                    [id]=\"`${meridiemListId}AM`\">\n                    AM\n                </li>\n            }\n            @if (pmMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'PM'\"\n                    [value]=\"'PM'\"\n                    (click)=\"onMeridiemClick('PM')\"\n                    [id]=\"`${meridiemListId}PM`\">\n                    PM\n                </li>\n            }\n        </ol>\n    }\n</div>\n\n@if (footer()) {\n    <div [class]=\"footerClass()\">\n        <button monaButton look=\"primary\" [rounded]=\"rounded()\" [size]=\"size()\" (click)=\"onSetTimeClick()\">Set</button>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: TimeSelectorItemDirective, selector: "li[monaTimeSelectorItem]", inputs: ["selected", "size", "value"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: TimeSelectorListDirective, selector: "ol[monaTimeSelectorList]", inputs: ["active", "popupHeight", "size"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: TimeLimiterPipe, name: "timeLimiter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimeSelectorComponent, decorators: [{
             type: Component,
@@ -636,10 +638,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         role: "group",
                         "[attr.aria-label]": "ariaLabel()",
                         "[attr.aria-disabled]": "disabled()",
-                        "[attr.aria-invalid]": "invalid() ? 'true' : null",
+                        "[attr.aria-invalid]": "invalidState() ? 'true' : null",
                         "[attr.aria-readonly]": "readonly()",
                         "[attr.aria-required]": "required()",
-                        "[attr.data-invalid]": "invalid() || null",
+                        "[attr.data-invalid]": "invalidState() || null",
                         "[attr.data-readonly]": "readonly() || null",
                         "[attr.data-required]": "required() || null",
                         "[class]": "baseClass()",

package/label/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/nanahoshi-mona-ui-label.mjs",
+  "typings": "../types/nanahoshi-mona-ui-label.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -189,6 +189,10 @@
       "types": "./types/nanahoshi-mona-ui-internal-tree.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-internal-tree.mjs"
     },
+    "./label": {
+      "types": "./types/nanahoshi-mona-ui-label.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-label.mjs"
+    },
     "./list": {
       "types": "./types/nanahoshi-mona-ui-list.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-list.mjs"

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

@@ -112,18 +112,29 @@ declare class CheckBoxComponent implements CheckboxVariantInput, CheckmarkVarian
 
 declare class CheckboxDirective implements CheckboxDirectiveVariantInput {
     protected readonly classes: _angular_core.Signal<string>;
+    protected readonly inputInvalid: _angular_core.Signal<boolean>;
+    /**
+     * @description Marks the checkbox as invalid, triggering error border and ring styling.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
     /**
      * @description Border-radius preset applied to the checkbox.
      * @default "medium"
      */
     readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Marks the checkbox as touched. Error styling is only shown when both `invalid` and `touched` are `true`.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
     /**
      * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
      * @default ""
      */
     readonly userClass: _angular_core.InputSignal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CheckboxDirective, "input[type='checkbox'][monaCheckbox]", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CheckboxDirective, "input[type='checkbox'][monaCheckbox]", never, { "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { CheckBoxComponent, CheckboxDirective };

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

@@ -0,0 +1,64 @@
+import * as _angular_core from '@angular/core';
+
+interface LabelFocusable {
+    focus(options?: FocusOptions): void;
+}
+type LabelTarget = string | LabelFocusable | null | undefined;
+
+declare class LabelDirective {
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly forAttribute: _angular_core.Signal<string | null>;
+    /**
+     * @description Associates the label with a native control ID or a target that exposes a public `focus()` method.
+     * String values are reflected as the native `for` attribute. Object targets receive focus when the label is clicked.
+     * @default undefined
+     */
+    readonly for: _angular_core.InputSignal<LabelTarget>;
+    /**
+     * @description Additional CSS classes merged onto the native label element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    protected onLabelClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LabelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LabelDirective, "label[monaLabel]", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class LabelComponent {
+    protected readonly captionClasses: string;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly forAttribute: _angular_core.Signal<string | null>;
+    protected readonly optionalClasses: string;
+    /**
+     * @description Associates the label with a native control ID or a target that exposes a public `focus()` method.
+     * String values are reflected as the native `for` attribute. Object targets receive focus when the label is clicked.
+     * @default undefined
+     */
+    readonly for: _angular_core.InputSignal<LabelTarget>;
+    /**
+     * @description Whether to display optional-field text next to the caption.
+     * @default false
+     */
+    readonly optional: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Text displayed when `optional` is enabled.
+     * @default "Optional"
+     */
+    readonly optionalText: _angular_core.InputSignal<string>;
+    /**
+     * @description Visible label caption text.
+     * @default ""
+     */
+    readonly text: _angular_core.InputSignal<string>;
+    /**
+     * @description Additional CSS classes merged onto the rendered `<label>` element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    protected onLabelClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LabelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LabelComponent, "mona-label", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "optionalText": { "alias": "optionalText"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { LabelComponent, LabelDirective };
+export type { LabelFocusable, LabelTarget };

package/types/nanahoshi-mona-ui-radio-button.d.ts

@@ -29,6 +29,7 @@ type RadioButtonDirectiveInput = VariantInputs<RadioButtonDirectiveProps>;
 
 declare class RadioButtonComponent implements RadioButtonVariantInput, FormValueControl<unknown> {
     protected readonly containerLabelClasses: _angular_core.Signal<string>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
     protected readonly radioButtonCircleClasses: _angular_core.Signal<string>;
     protected readonly radioButtonClasses: _angular_core.Signal<string>;
     protected readonly radioButtonIndicatorClasses: _angular_core.Signal<string>;
@@ -92,6 +93,12 @@ declare class RadioButtonComponent implements RadioButtonVariantInput, FormValue
      */
     readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
     readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Marks the radio button as touched. Error styling requires both `invalid` and `touched` to be `true`.
+     * When bound to a signal form field via `[field]`, this is written by the signal forms `Field` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
     /**
      * @description Additional CSS classes merged onto the label container element via `tailwind-merge`.
      * @default ""
@@ -107,18 +114,29 @@ declare class RadioButtonComponent implements RadioButtonVariantInput, FormValue
     protected onBlur(event: FocusEvent): void;
     protected onSelectionChange(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioButtonComponent, "mona-radio-button", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labelSize": { "alias": "labelSize"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "radioValue": { "alias": "radioValue"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "inputBlur": "inputBlur"; "inputClick": "inputClick"; "inputFocus": "inputFocus"; "touch": "touch"; "value": "valueChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioButtonComponent, "mona-radio-button", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labelSize": { "alias": "labelSize"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "radioValue": { "alias": "radioValue"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "inputBlur": "inputBlur"; "inputClick": "inputClick"; "inputFocus": "inputFocus"; "touch": "touch"; "value": "valueChange"; }, never, ["*"], true, never>;
 }
 
 declare class RadioButtonDirective implements RadioButtonDirectiveInput {
     protected readonly classes: _angular_core.Signal<string>;
+    protected readonly inputInvalid: _angular_core.Signal<boolean>;
+    /**
+     * @description Marks the radio button as invalid, triggering error border and ring styling.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
     /**
      * @description Sets the border radius of the radio button.
      * @default "none"
      */
     readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Marks the radio button as touched. Error styling is only shown when both `invalid` and `touched` are `true`.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioButtonDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RadioButtonDirective, "input[type='radio'][monaRadioButton]", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RadioButtonDirective, "input[type='radio'][monaRadioButton]", never, { "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { RadioButtonComponent, RadioButtonDirective };

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

@@ -129,6 +129,12 @@ declare class TextBoxComponent implements TextBoxVariantInput, FormValueControl<
 
 declare class TextBoxDirective implements InputVariantInput {
     protected readonly classes: _angular_core.Signal<string>;
+    protected readonly inputInvalid: _angular_core.Signal<boolean>;
+    /**
+     * @description Marks the input as invalid, triggering error border and ring styling.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
     /**
      * @description Border-radius preset applied to the component.
      * @default "medium"
@@ -139,13 +145,18 @@ declare class TextBoxDirective implements InputVariantInput {
      * @default "medium"
      */
     readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
+    /**
+     * @description Marks the input as touched. Error styling is only shown when both `invalid` and `touched` are `true`.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
     /**
      * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
      * @default ""
      */
     readonly userClass: _angular_core.InputSignal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextBoxDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TextBoxDirective, "input[monaTextBox]", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TextBoxDirective, "input[monaTextBox]", never, { "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class TextBoxPrefixTemplateDirective {

package/types/nanahoshi-mona-ui-time-selector.d.ts

@@ -50,6 +50,7 @@ declare class TimeSelectorComponent implements FormValueControl<Date | null>, Ti
     protected readonly hourListId: string;
     protected readonly hourListRef: _angular_core.Signal<ElementRef<HTMLOListElement>>;
     protected readonly infoContainerClass: _angular_core.Signal<string>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
     protected readonly listContainerClass: _angular_core.Signal<string>;
     protected readonly maxDate: _angular_core.Signal<DateTime<true> | DateTime<false> | null>;
     protected readonly meridiem: _angular_core.WritableSignal<Meridiem>;