@nanahoshi/mona-ui 0.1.1 → 0.2.1

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

@@ -1,32 +1,34 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, computed, input, output, model, Component, Directive } from '@angular/core';
+import { computed, input, output, model, Component, Directive } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { twMerge } from 'tailwind-merge';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { cva } from 'class-variance-authority';
+import { themeControlSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
-const radioButtonVariants = cva(`
-        appearance-none outline-none
-        peer absolute inset-0 w-full h-full
-        opacity-0 cursor-pointer z-10
-        focus:ring-2 focus:ring-primary focus:ring-offset-2
+const radioButtonThemeVariants = cva(`
+        peer absolute inset-0 z-10 h-full w-full
+        cursor-pointer appearance-none opacity-0
+        outline-none
         disabled:cursor-not-allowed
     `);
-const radioButtonCircleVariants = cva(`
-        w-4.5 h-4.5
-        flex items-center justify-center
-        overflow-hidden
-        bg-input-background
+const radioButtonCircleThemeVariants = cva(`
+        relative flex h-4.5 w-4.5 items-center justify-center
+        cursor-pointer overflow-hidden
+        ${themeControlSurfaceClasses}
         border border-input-border
-        cursor-pointer
-        relative
-        transition-colors duration-200
-        peer-focus:ring-2 peer-focus:ring-primary/40
-        peer-disabled:opacity-50 peer-disabled:cursor-not-allowed
+        transition-colors duration-(--mona-motion-fast)
+
+        peer-disabled:cursor-not-allowed
+        peer-disabled:border-disabled-border peer-disabled:bg-disabled-background peer-disabled:text-disabled-foreground
+
+        peer-focus-visible:border-focus-indicator
+        peer-focus-visible:ring-2 peer-focus-visible:ring-focus-indicator/35
 
         data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:peer-focus-visible:border-error
+        data-[invalid='true']:peer-focus-visible:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -38,8 +40,10 @@ const radioButtonCircleVariants = cva(`
         }
     }
 });
-const radioButtonIndicatorVariants = cva(`
-        flex w-3 h-3 bg-primary transition-all duration-200
+const radioButtonIndicatorThemeVariants = cva(`
+        flex h-3 w-3
+        bg-primary
+        transition-all duration-(--mona-motion-fast)
     `, {
     variants: {
         rounded: {
@@ -51,13 +55,12 @@ const radioButtonIndicatorVariants = cva(`
         }
     }
 });
-const radioButtonContainerLabelVariants = cva(`
-        w-full h-full flex items-center justify-center gap-1
-        relative
+const radioButtonContainerLabelThemeVariants = cva(`
+        relative flex h-full w-full items-center justify-center gap-1
         cursor-pointer
         data-[disabled='true']:pointer-events-none
         data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
+        data-[disabled='true']:text-disabled-foreground
     `, {
     variants: {
         labelSize: {
@@ -70,30 +73,31 @@ const radioButtonContainerLabelVariants = cva(`
         labelSize: "medium"
     }
 });
-const radioButtonDirectiveVariants = cva(`
-        appearance-none outline-none
-        w-4.5 h-4.5
-        bg-input-background border border-input-border
-        cursor-pointer
-        relative
-        place-content-center
-        flex items-center justify-center
+const radioButtonDirectiveThemeVariants = cva(`
+        relative flex h-4.5 w-4.5 items-center justify-center place-content-center
+        cursor-pointer appearance-none
+        ${themeControlSurfaceClasses}
+        border border-input-border
+        outline-none
 
-        disabled:pointer-events-none
-        disabled:cursor-not-allowed
-        disabled:opacity-50
+        disabled:pointer-events-none disabled:cursor-not-allowed
+        disabled:border-disabled-border disabled:bg-disabled-background disabled:text-disabled-foreground
 
-        after:content-['']
-        after:w-3 after:h-3
         after:inline-grid
+        after:h-3 after:w-3
         after:place-content-center
+        after:content-['']
 
         checked:after:bg-primary
         checked:after:rounded-full
 
-        focus-visible:ring-2 focus-visible:ring-primary/40
+        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
+        data-[invalid='true']:focus-visible:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -128,70 +132,27 @@ const radioButtonDirectiveVariants = cva(`
     ]
 });
 
-const radioButtonThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return radioButtonVariants;
-        default:
-            return radioButtonVariants; // Default to Mona styles
-    }
-};
-const radioButtonCircleThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return radioButtonCircleVariants;
-        default:
-            return radioButtonCircleVariants; // Default to Mona styles
-    }
-};
-const radioButtonIndicatorThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return radioButtonIndicatorVariants;
-        default:
-            return radioButtonIndicatorVariants; // Default to Mona styles
-    }
-};
-const radioButtonContainerLabelThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return radioButtonContainerLabelVariants;
-        default:
-            return radioButtonContainerLabelVariants; // Default to Mona styles
-    }
-};
-const radioButtonDirectiveThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return radioButtonDirectiveVariants;
-        default:
-            return radioButtonDirectiveVariants; // Default to Mona styles
-    }
-};
-
 class RadioButtonComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.containerLabelClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const labelSize = this.labelSize();
             const userClasses = this.userClass();
-            const variantClasses = radioButtonContainerLabelThemeVariants(theme)({ labelSize });
+            const variantClasses = radioButtonContainerLabelThemeVariants({ labelSize });
             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 theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return radioButtonCircleThemeVariants(theme)({ rounded });
+            return radioButtonCircleThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "radioButtonCircleClasses" }] : /* istanbul ignore next */ []));
-        this.radioButtonClasses = computed(() => radioButtonThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.radioButtonClasses = computed(() => radioButtonThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "radioButtonClasses" }] : /* istanbul ignore next */ []));
         this.radioButtonIndicatorClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return radioButtonIndicatorThemeVariants(theme)({ rounded });
+            return radioButtonIndicatorThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "radioButtonIndicatorClasses" }] : /* istanbul ignore next */ []));
         /**
@@ -262,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 ""
@@ -276,7 +244,6 @@ class RadioButtonComponent {
         this.value = model(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     onBlur(event) {
         this.inputBlur.emit(event);
         this.touch.emit();
@@ -286,46 +253,59 @@ 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() {
-        this.#themeService = inject(ThemeService);
         this.classes = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return radioButtonDirectiveThemeVariants(theme)({ rounded });
+            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 */ []));
     }
-    #themeService;
     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-scroll-view.mjs

@@ -1,18 +1,18 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, computed, input, Directive, DestroyRef, DOCUMENT, ElementRef, contentChild, TemplateRef, signal, viewChild, model, afterNextRender, Component } from '@angular/core';
+import { computed, input, Directive, inject, DestroyRef, DOCUMENT, ElementRef, contentChild, TemplateRef, signal, viewChild, model, afterNextRender, Component } from '@angular/core';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { toCssValue } from '@nanahoshi/mona-ui/internal';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { select } from '@mirei/ts-collections';
 import { startWith, pairwise, map, Subject, timer, interval, takeUntil, asyncScheduler, fromEvent, filter, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const scrollViewBaseVariants = cva(`
-        block relative w-full h-full outline-none
-        overflow-hidden
-        border border-border border-2
+const scrollViewBaseThemeVariants = cva(`
+        relative block h-full w-full overflow-hidden
+        bg-surface outline-none
+        border border-border-subtle
+        focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/35
     `, {
     variants: {
         rounded: {
@@ -23,26 +23,24 @@ const scrollViewBaseVariants = cva(`
         }
     }
 });
-const scrollViewContentVariants = cva(`
+const scrollViewContentThemeVariants = cva(`
         absolute inset-0 overflow-hidden
     `);
-const scrollViewListVariants = cva(`
-        relative list-none h-full
+const scrollViewListThemeVariants = cva(`
+        relative h-full list-none
         [&_li]:absolute
         [&_li]:inset-0
         [&_li]:outline-none
     `);
-const scrollViewArrowVariants = cva(`
-        absolute top-0 bottom-0 px-1
-        flex items-center justify-center
+const scrollViewArrowThemeVariants = cva(`
+        absolute top-0 bottom-0 flex items-center justify-center
+        px-1
         cursor-pointer select-none
-
-        text-foreground
-        [&_svg]:stroke-white
-        [&_svg]:drop-shadow-[0_0_15px_#000]
-        [&_svg]:opacity-40
-        hover:[&_svg]:opacity-100
-        [&_svg]:transition-opacity duration-300 ease-out
+        bg-surface-overlay/65 text-foreground
+        transition-colors duration-(--mona-motion-standard) ease-out
+        hover:bg-hover/90 active:bg-active/90
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/35
+        [&_svg]:stroke-current
     `, {
     variants: {
         hidden: {
@@ -59,37 +57,37 @@ const scrollViewArrowVariants = cva(`
         }
     }
 });
-const scrollViewPagerVariants = cva(`
-        absolute left-0 right-0 bottom-0 flex items-center justify-center
+const scrollViewPagerThemeVariants = cva(`
+        absolute right-0 bottom-0 left-0 flex items-center justify-center
     `, {
     variants: {
         pagerOverlay: {
-            dark: "border-0 border-t border-border/20 bg-background-dark/20",
-            light: "border-0 border-t border-border/20 bg-background/20",
+            dark: "bg-canvas/85 border-0 border-t border-border-subtle",
+            light: "bg-surface-overlay/85 border-0 border-t border-border-subtle",
             none: ""
         }
     }
 });
-const scrollViewPagerListContainerVariants = cva(`
-        flex items-center justify-center
-        flex-1 overflow-hidden
+const scrollViewPagerListContainerThemeVariants = cva(`
+        flex flex-1 items-center justify-center overflow-hidden
     `);
-const scrollViewPagerListVariants = cva(`
-        flex items-center gap-2
-        list-none overflow-hidden
-        flex-nowrap px-1 py-3
+const scrollViewPagerListThemeVariants = cva(`
+        flex flex-nowrap items-center gap-2
+        overflow-hidden list-none
+        px-1 py-3
     `);
-const scrollViewPagerListItemVariants = cva(`
-        w-3 h-3
-        content-[' ']
-        flex-grow-0 flex-shrink-0 flex-basis-3
+const scrollViewPagerListItemThemeVariants = cva(`
+        h-3 w-3 flex-none basis-3
         cursor-pointer
-        border border-border bg-white
-        not-last:mr-3
+        bg-muted-foreground/40 border border-border-subtle
+        transition-colors
+        not-last:me-3
+        hover:bg-muted-foreground/60 active:bg-foreground
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-indicator/35
     `, {
     variants: {
         active: {
-            true: "!bg-primary",
+            true: "!bg-foreground hover:!bg-foreground",
             false: ""
         },
         pagerRounded: {
@@ -101,100 +99,23 @@ const scrollViewPagerListItemVariants = cva(`
         }
     }
 });
-const scrollViewPagerArrowVariants = cva(`
+const scrollViewPagerArrowThemeVariants = cva(`
         flex items-center justify-center
-        p-2 cursor-pointer select-none
-        transition-opacity duration-300 ease-out
-        opacity-70 hover:opacity-100
-        font-medium
-        [&_svg]:stroke-white
-        [&_svg]:drop-shadow-[0_0_15px_#000]
-        [&_svg]:opacity-40
-        hover:[&_svg]:opacity-100
-        [&_svg]:transition-opacity duration-300 ease-out
+        p-2
+        cursor-pointer select-none
+        font-medium text-muted-foreground
+        transition-colors duration-(--mona-motion-standard) ease-out
+        hover:bg-hover hover:text-foreground active:bg-active
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/35
+        [&_svg]:stroke-current
     `);
 
-const scrollViewBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewBaseVariants;
-        default:
-            return scrollViewBaseVariants;
-    }
-};
-const scrollViewContentThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewContentVariants;
-        default:
-            return scrollViewContentVariants;
-    }
-};
-const scrollViewListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewListVariants;
-        default:
-            return scrollViewListVariants;
-    }
-};
-const scrollViewArrowThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewArrowVariants;
-        default:
-            return scrollViewArrowVariants;
-    }
-};
-const scrollViewPagerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewPagerVariants;
-        default:
-            return scrollViewPagerVariants;
-    }
-};
-const scrollViewPagerListContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewPagerListContainerVariants;
-        default:
-            return scrollViewPagerListContainerVariants;
-    }
-};
-const scrollViewPagerListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewPagerListVariants;
-        default:
-            return scrollViewPagerListVariants;
-    }
-};
-const scrollViewPagerListItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewPagerListItemVariants;
-        default:
-            return scrollViewPagerListItemVariants;
-    }
-};
-const scrollViewPagerArrowThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewPagerArrowVariants;
-        default:
-            return scrollViewPagerArrowVariants;
-    }
-};
-
 class ScrollViewActivePageDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.pageItemClass = computed(() => {
-            const theme = this.#themeService.theme();
             const active = this.active();
             const pagerRounded = this.rounded();
-            return scrollViewPagerListItemThemeVariants(theme)({ active, pagerRounded });
+            return scrollViewPagerListItemThemeVariants({ active, pagerRounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageItemClass" }] : /* istanbul ignore next */ []));
         this.active = input.required(/* @ts-ignore */
@@ -202,7 +123,6 @@ class ScrollViewActivePageDirective {
         this.rounded = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollViewActivePageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ScrollViewActivePageDirective, isStandalone: true, selector: "button[monaScrollViewActivePage]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "pageItemClass()" } }, ngImport: i0 }); }
 }
@@ -222,7 +142,6 @@ class ScrollViewComponent {
     #viewIndex;
     #directionFromIndex;
     #hostElementRef;
-    #themeService;
     #resizeObserver;
     #scroll$;
     #scrollMouseUpHandler;
@@ -256,7 +175,6 @@ class ScrollViewComponent {
             initialValue: "right"
         });
         this.#hostElementRef = inject(ElementRef);
-        this.#themeService = inject(ThemeService);
         this.#resizeObserver = null;
         this.#scroll$ = new Subject();
         this.#scrollMouseUpHandler = () => this.onPagerScrollEnd();
@@ -266,16 +184,14 @@ class ScrollViewComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            const variantClass = scrollViewBaseThemeVariants(theme)({ rounded });
+            const variantClass = scrollViewBaseThemeVariants({ rounded });
             const userClass = this.userClass();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.contentClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewContentThemeVariants(theme)();
+            return scrollViewContentThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
         this.contentTemplate = contentChild(TemplateRef, /* @ts-ignore */
@@ -291,45 +207,38 @@ class ScrollViewComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leaveAnimation" }] : /* istanbul ignore next */ []));
         this.leftArrowClass = computed(() => {
-            const theme = this.#themeService.theme();
             const hidden = !this.arrows() || !(this.infinite() || this.index() !== 0);
-            return scrollViewArrowThemeVariants(theme)({ left: true, hidden });
+            return scrollViewArrowThemeVariants({ left: true, hidden });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leftArrowClass" }] : /* istanbul ignore next */ []));
         this.listClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewListThemeVariants(theme)();
+            return scrollViewListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
         this.pagerArrowClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewPagerArrowThemeVariants(theme)();
+            return scrollViewPagerArrowThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerArrowClass" }] : /* istanbul ignore next */ []));
         this.pagerArrowVisible = signal(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerArrowVisible" }] : /* istanbul ignore next */ []));
         this.pagerClass = computed(() => {
-            const theme = this.#themeService.theme();
             const pagerOverlay = this.pagerOverlay();
-            return scrollViewPagerThemeVariants(theme)({ pagerOverlay });
+            return scrollViewPagerThemeVariants({ pagerOverlay });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerClass" }] : /* istanbul ignore next */ []));
         this.pagerListClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewPagerListThemeVariants(theme)();
+            return scrollViewPagerListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerListClass" }] : /* istanbul ignore next */ []));
         this.pagerListContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewPagerListContainerThemeVariants(theme)();
+            return scrollViewPagerListContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerListContainerClass" }] : /* istanbul ignore next */ []));
         this.pagerListElementRef = viewChild("pagerListElement", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerListElementRef" }] : /* istanbul ignore next */ []));
         this.rightArrowClass = computed(() => {
-            const theme = this.#themeService.theme();
             const hidden = !this.arrows() || !(this.infinite() || this.index() !== this.itemCount() - 1);
-            return scrollViewArrowThemeVariants(theme)({ right: true, hidden });
+            return scrollViewArrowThemeVariants({ right: true, hidden });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rightArrowClass" }] : /* istanbul ignore next */ []));
         this.scrollViewHeight = computed(() => {