ng-blatui 1.25.0 → 1.27.0

package/fesm2022/ng-blatui.mjs

@@ -1,8 +1,9 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { input, computed, Directive, Component, signal, model, inject, PLATFORM_ID, effect, Injectable, ElementRef, ViewContainerRef, viewChild, afterNextRender, output, linkedSignal, ViewEncapsulation, DestroyRef } from '@angular/core';
+import { input, computed, Directive, Component, signal, model, forwardRef, inject, PLATFORM_ID, effect, Injectable, ElementRef, ViewContainerRef, viewChild, afterNextRender, output, linkedSignal, ViewEncapsulation, DestroyRef } from '@angular/core';
 import { cva } from 'class-variance-authority';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 export { AccordionContent, AccordionGroup, AccordionPanel, AccordionTrigger, ɵɵDeferredContent, ɵɵDeferredContentAware } from '@angular/aria/accordion';
 export { Tab, TabContent, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
 export { DIALOG_DATA, Dialog, DialogModule, DialogRef } from '@angular/cdk/dialog';
@@ -677,6 +678,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$i = () => { };
 const CHECKBOX_BASE = 'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 flex items-center justify-center';
 /**
  * BlatUI checkbox. A native `<button role="checkbox">` (Space/Enter toggle for free)
@@ -687,9 +690,11 @@ class BuiCheckbox {
     ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
     indeterminate = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
+    disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$i;
+    onTouched = noop$i;
     state = computed(() => {
         if (this.indeterminate()) {
             return 'indeterminate';
@@ -712,9 +717,25 @@ class BuiCheckbox {
         else {
             this.checked.update((value) => !value);
         }
+        this.onChange(this.checked());
+        this.onTouched();
+    }
+    writeValue(isChecked) {
+        this.checked.set(!!isChecked);
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCheckbox, isStandalone: true, selector: "button[buiCheckbox]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange" }, host: { attributes: { "type": "button", "role": "checkbox", "data-slot": "checkbox" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-checked": "ariaChecked()", "attr.data-state": "state()", "disabled": "disabled()", "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCheckbox, isStandalone: true, selector: "button[buiCheckbox]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange", disabled: "disabledChange" }, host: { attributes: { "type": "button", "role": "checkbox", "data-slot": "checkbox" }, listeners: { "click": "toggle()", "blur": "onTouched()" }, properties: { "attr.aria-checked": "ariaChecked()", "attr.data-state": "state()", "disabled": "disabled()", "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiCheckbox), multi: true },
+        ], ngImport: i0, template: `
     @if (checked() || indeterminate()) {
       <span data-slot="checkbox-indicator" class="flex items-center justify-center text-current">
         @if (indeterminate()) {
@@ -763,7 +784,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[disabled]': 'disabled()',
                         '[class]': 'computedClass()',
                         '(click)': 'toggle()',
+                        '(blur)': 'onTouched()',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiCheckbox), multi: true },
+                    ],
                     template: `
     @if (checked() || indeterminate()) {
       <span data-slot="checkbox-indicator" class="flex items-center justify-center text-current">
@@ -800,8 +825,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$h = () => { };
 const SWITCH_BASE = 'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50';
 const SWITCH_TRACK = {
     sm: 'h-4 w-7',
@@ -821,7 +848,7 @@ const THUMB_BASE = 'bg-background dark:data-[state=unchecked]:bg-foreground dark
 class BuiSwitch {
     checked = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
+    disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     size = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -832,6 +859,8 @@ class BuiSwitch {
     iconOff = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconOff" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$h;
+    onTouched = noop$h;
     state = computed(() => (this.checked() ? 'checked' : 'unchecked'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     activeIcon = computed(() => (this.checked() ? this.iconOn() : this.iconOff()), /* @ts-ignore */
@@ -845,9 +874,25 @@ class BuiSwitch {
             return;
         }
         this.checked.update((value) => !value);
+        this.onChange(this.checked());
+        this.onTouched();
+    }
+    writeValue(isChecked) {
+        this.checked.set(!!isChecked);
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSwitch, isStandalone: true, selector: "button[buiSwitch]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "type": "button", "role": "switch", "data-slot": "switch" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "state()", "disabled": "disabled()", "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSwitch, isStandalone: true, selector: "button[buiSwitch]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange" }, host: { attributes: { "type": "button", "role": "switch", "data-slot": "switch" }, listeners: { "click": "toggle()", "blur": "onTouched()" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "state()", "disabled": "disabled()", "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiSwitch), multi: true },
+        ], ngImport: i0, template: `
     <span data-slot="switch-thumb" [attr.data-state]="state()" [class]="thumbClass()">
       @if (activeIcon(); as icon) {
         <svg
@@ -879,7 +924,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[disabled]': 'disabled()',
                         '[class]': 'computedClass()',
                         '(click)': 'toggle()',
+                        '(blur)': 'onTouched()',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiSwitch), multi: true },
+                    ],
                     template: `
     <span data-slot="switch-thumb" [attr.data-state]="state()" [class]="thumbClass()">
       @if (activeIcon(); as icon) {
@@ -899,7 +948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     </span>
   `,
                 }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOn", required: false }] }], iconOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOff", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOn", required: false }] }], iconOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOff", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const TRIGGER = 'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&>svg]:text-muted-foreground [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:translate-y-0.5 [&>svg]:transition-transform [&>svg]:duration-200 [&[aria-expanded=true]>svg]:rotate-180';
 class BuiAccordion {
@@ -1939,6 +1988,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }] });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$g = () => { };
 /**
  * BlatUI radio group. `role="radiogroup"` with arrow-key roving focus across the
  * `buiRadioItem` buttons; `[(value)]` two-way binds the selected value.
@@ -1946,12 +1997,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 class BuiRadioGroup {
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$g;
+    onTouched = noop$g;
     host = inject(ElementRef);
     computedClass = computed(() => cn('grid gap-3', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     select(next) {
         this.value.set(next);
+        this.onChange(next);
+    }
+    writeValue(value) {
+        this.value.set(typeof value === 'string' ? value : null);
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     onKeydown(event) {
         if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(event.key)) {
@@ -1971,7 +2039,9 @@ class BuiRadioGroup {
         next.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiRadioGroup, isStandalone: true, selector: "[buiRadioGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "radiogroup", "data-slot": "radio-group" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "computedClass()" } }, exportAs: ["buiRadioGroup"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiRadioGroup, isStandalone: true, selector: "[buiRadioGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { attributes: { "role": "radiogroup", "data-slot": "radio-group" }, listeners: { "keydown": "onKeydown($event)", "focusout": "onTouched()" }, properties: { "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiRadioGroup), multi: true },
+        ], exportAs: ["buiRadioGroup"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRadioGroup, decorators: [{
             type: Directive,
@@ -1983,9 +2053,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         'data-slot': 'radio-group',
                         '[class]': 'computedClass()',
                         '(keydown)': 'onKeydown($event)',
+                        '(focusout)': 'onTouched()',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiRadioGroup), multi: true },
+                    ],
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 const ITEM = 'border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50';
 class BuiRadioGroupItem {
     value = input.required(/* @ts-ignore */
@@ -1996,17 +2070,19 @@ class BuiRadioGroupItem {
     group = inject(BuiRadioGroup);
     checked = computed(() => this.group.value() === this.value(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.group.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     tabIndex = computed(() => this.checked() || this.group.value() === null ? 0 : -1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn(ITEM, this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     select() {
-        if (!this.disabled()) {
+        if (!this.isDisabled()) {
             this.group.select(this.value());
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRadioGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiRadioGroupItem, isStandalone: true, selector: "button[buiRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "radio", "data-slot": "radio-group-item" }, listeners: { "click": "select()" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "checked() ? 'checked' : 'unchecked'", "attr.tabindex": "tabIndex()", "disabled": "disabled()", "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiRadioGroupItem, isStandalone: true, selector: "button[buiRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "radio", "data-slot": "radio-group-item" }, listeners: { "click": "select()" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "checked() ? 'checked' : 'unchecked'", "attr.tabindex": "tabIndex()", "disabled": "isDisabled()", "class": "computedClass()" } }, ngImport: i0, template: `
     @if (checked()) {
       <span data-slot="radio-group-indicator" class="flex items-center justify-center">
         <svg viewBox="0 0 24 24" fill="currentColor" class="size-2" aria-hidden="true">
@@ -2027,7 +2103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[attr.aria-checked]': 'checked()',
                         '[attr.data-state]': "checked() ? 'checked' : 'unchecked'",
                         '[attr.tabindex]': 'tabIndex()',
-                        '[disabled]': 'disabled()',
+                        '[disabled]': 'isDisabled()',
                         '[class]': 'computedClass()',
                         '(click)': 'select()',
                     },
@@ -2758,6 +2834,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }] });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$f = () => { };
 const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
@@ -2776,18 +2854,41 @@ const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounde
 class BuiToggle {
     pressed = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     variant = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$f;
+    onTouched = noop$f;
     computedClass = computed(() => cn(toggleVariants({ variant: this.variant(), size: this.size() }), this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     toggle() {
+        if (this.disabled()) {
+            return;
+        }
         this.pressed.update((value) => !value);
+        this.onChange(this.pressed());
+        this.onTouched();
+    }
+    writeValue(isPressed) {
+        this.pressed.set(!!isPressed);
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiToggle, isStandalone: true, selector: "button[buiToggle]", inputs: { pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 } }, outputs: { pressed: "pressedChange" }, host: { attributes: { "type": "button", "data-slot": "toggle" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-pressed": "pressed()", "attr.data-state": "pressed() ? 'on' : 'off'", "class": "computedClass()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiToggle, isStandalone: true, selector: "button[buiToggle]", inputs: { pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 } }, outputs: { pressed: "pressedChange", disabled: "disabledChange" }, host: { attributes: { "type": "button", "data-slot": "toggle" }, listeners: { "click": "toggle()", "blur": "onTouched()" }, properties: { "attr.aria-pressed": "pressed()", "attr.data-state": "pressed() ? 'on' : 'off'", "disabled": "disabled()", "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiToggle), multi: true },
+        ], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiToggle, decorators: [{
             type: Component,
@@ -2798,12 +2899,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         'data-slot': 'toggle',
                         '[attr.aria-pressed]': 'pressed()',
                         '[attr.data-state]': "pressed() ? 'on' : 'off'",
+                        '[disabled]': 'disabled()',
                         '[class]': 'computedClass()',
                         '(click)': 'toggle()',
+                        '(blur)': 'onTouched()',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiToggle), multi: true },
+                    ],
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }, { type: i0.Output, args: ["pressedChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", 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: { pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }, { type: i0.Output, args: ["pressedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A spinning loading indicator (`role="status"`). */
 class BuiSpinner {
@@ -4234,6 +4340,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], filename: [{ type: i0.Input, args: [{ isSignal: true, alias: "filename", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$e = () => { };
 /**
  * A slider (`role="slider"`) with pointer drag and full keyboard support
  * (arrows, Home/End, PageUp/PageDown). Single value, or a two-thumb `range`
@@ -4254,13 +4362,15 @@ class BuiSlider {
     ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     step = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
+    disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     orientation = input('horizontal', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Value', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$e;
+    onTouched = noop$e;
     track = viewChild.required('track');
     active = signal('start', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
@@ -4350,6 +4460,7 @@ class BuiSlider {
         }
         else {
             this.value.set(next);
+            this.onChange(next);
         }
     }
     toPct(value) {
@@ -4370,8 +4481,22 @@ class BuiSlider {
     clamp(value) {
         return Math.max(this.min(), Math.min(this.max(), value));
     }
+    writeValue(value) {
+        this.value.set(typeof value === 'number' ? value : 0);
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSlider, isStandalone: true, selector: "bui-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, endValue: { classPropertyName: "endValue", publicName: "endValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", endValue: "endValueChange" }, host: { attributes: { "data-slot": "slider" }, listeners: { "document:pointermove": "onMove($event)", "document:pointerup": "onUp()" }, properties: { "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? '' : null", "class": "computedClass()" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSlider, isStandalone: true, selector: "bui-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, endValue: { classPropertyName: "endValue", publicName: "endValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", endValue: "endValueChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "slider" }, listeners: { "document:pointermove": "onMove($event)", "document:pointerup": "onUp()", "focusout": "onTouched()" }, properties: { "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? '' : null", "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiSlider), multi: true },
+        ], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <span
       #track
       data-slot="slider-track"
@@ -4434,7 +4559,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[class]': 'computedClass()',
                         '(document:pointermove)': 'onMove($event)',
                         '(document:pointerup)': 'onUp()',
+                        '(focusout)': 'onTouched()',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiSlider), multi: true },
+                    ],
                     template: `
     <span
       #track
@@ -4487,8 +4616,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], endValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "endValue", required: false }] }, { type: i0.Output, args: ["endValueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], endValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "endValue", required: false }] }, { type: i0.Output, args: ["endValueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$d = () => { };
 const STAR_SIZE = { sm: 'size-4', default: 'size-5', lg: 'size-6' };
 /** A star rating (`role="radiogroup"`) with hover preview and keyboard support. */
 class BuiRating {
@@ -4498,6 +4629,8 @@ class BuiRating {
     ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     size = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     color = input('text-amber-500', /* @ts-ignore */
@@ -4505,6 +4638,10 @@ class BuiRating {
     ariaLabel = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$d;
+    onTouched = noop$d;
+    inactive = computed(() => this.readonly() || this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inactive" }] : /* istanbul ignore next */ []));
     hover = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
     current = computed(() => this.hover() || this.value(), /* @ts-ignore */
@@ -4516,23 +4653,25 @@ class BuiRating {
     computedClass = computed(() => cn('inline-flex items-center gap-0.5', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     set(next) {
-        if (!this.readonly()) {
-            this.value.set(next);
+        if (this.inactive()) {
+            return;
         }
+        this.value.set(next);
+        this.onChange(next);
     }
     onHover(next) {
-        if (!this.readonly()) {
+        if (!this.inactive()) {
             this.hover.set(next);
         }
     }
     tabindexFor(star) {
-        if (this.readonly()) {
+        if (this.inactive()) {
             return -1;
         }
         return star === (this.value() || 1) ? 0 : -1;
     }
     onKeydown(event) {
-        if (this.readonly()) {
+        if (this.inactive()) {
             return;
         }
         if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
@@ -4544,8 +4683,22 @@ class BuiRating {
             this.set(Math.max(0, this.value() - 1));
         }
     }
+    writeValue(value) {
+        this.value.set(typeof value === 'number' ? value : 0);
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRating, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiRating, isStandalone: true, selector: "bui-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "rating", "role": "radiogroup" }, listeners: { "mouseleave": "hover.set(0)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiRating, isStandalone: true, selector: "bui-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "rating", "role": "radiogroup" }, listeners: { "mouseleave": "hover.set(0)", "keydown": "onKeydown($event)", "focusout": "onTouched()" }, properties: { "attr.aria-label": "ariaLabel()", "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiRating), multi: true },
+        ], ngImport: i0, template: `
     @for (star of stars(); track star) {
       <button
         type="button"
@@ -4553,7 +4706,7 @@ class BuiRating {
         [attr.aria-checked]="value() === star"
         [attr.aria-label]="star + ' / ' + max()"
         [attr.tabindex]="tabindexFor(star)"
-        [disabled]="readonly()"
+        [disabled]="inactive()"
         class="rounded-sm transition-colors outline-none not-disabled:cursor-pointer focus-visible:ring-[3px] focus-visible:ring-ring/50"
         [class]="current() >= star ? color() : 'text-muted-foreground/30'"
         (click)="set(star)"
@@ -4589,7 +4742,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[class]': 'computedClass()',
                         '(mouseleave)': 'hover.set(0)',
                         '(keydown)': 'onKeydown($event)',
+                        '(focusout)': 'onTouched()',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiRating), multi: true },
+                    ],
                     template: `
     @for (star of stars(); track star) {
       <button
@@ -4598,7 +4755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         [attr.aria-checked]="value() === star"
         [attr.aria-label]="star + ' / ' + max()"
         [attr.tabindex]="tabindexFor(star)"
-        [disabled]="readonly()"
+        [disabled]="inactive()"
         class="rounded-sm transition-colors outline-none not-disabled:cursor-pointer focus-visible:ring-[3px] focus-visible:ring-ring/50"
         [class]="current() >= star ? color() : 'text-muted-foreground/30'"
         (click)="set(star)"
@@ -4623,7 +4780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const FIELD_HEIGHT = { sm: 'h-7 text-xs', default: 'h-8 text-sm', lg: 'h-9 text-base' };
 const BTN_SIZE$1 = {
@@ -5188,24 +5345,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], lineWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineWidth", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$c = () => { };
 /** A single-select segmented control (`role="radiogroup"`) with arrow-key navigation. */
 class BuiSegmentedControl {
     value = model('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
+    disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$c;
+    onTouched = noop$c;
     host = inject(ElementRef);
     normalized = computed(() => this.options().map((option) => typeof option === 'string' ? { value: option, label: option } : option), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "normalized" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('inline-flex items-center gap-1 rounded-lg bg-muted p-1', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     select(next) {
-        if (!this.disabled()) {
-            this.value.set(next);
+        if (this.disabled()) {
+            return;
         }
+        this.value.set(next);
+        this.onChange(next);
     }
     tabindexFor(optionValue) {
         if (this.value() === optionValue) {
@@ -5227,11 +5390,26 @@ class BuiSegmentedControl {
         const isForward = event.key === 'ArrowRight' || event.key === 'ArrowDown';
         const nextIndex = (current + (isForward ? 1 : -1) + items.length) % items.length;
         this.value.set(items[nextIndex].value);
+        this.onChange(items[nextIndex].value);
         const buttons = this.host.nativeElement.querySelectorAll('[role="radio"]');
         buttons[nextIndex].focus();
     }
+    writeValue(value) {
+        this.value.set(typeof value === 'string' ? value : '');
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSegmentedControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSegmentedControl, isStandalone: true, selector: "bui-segmented-control", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "segmented-control", "role": "radiogroup" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSegmentedControl, isStandalone: true, selector: "bui-segmented-control", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "segmented-control", "role": "radiogroup" }, listeners: { "keydown": "onKeydown($event)", "focusout": "onTouched()" }, properties: { "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiSegmentedControl), multi: true },
+        ], ngImport: i0, template: `
     @for (option of normalized(); track option.value) {
       <button
         type="button"
@@ -5261,7 +5439,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         role: 'radiogroup',
                         '[class]': 'computedClass()',
                         '(keydown)': 'onKeydown($event)',
+                        '(focusout)': 'onTouched()',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiSegmentedControl), multi: true },
+                    ],
                     template: `
     @for (option of normalized(); track option.value) {
       <button
@@ -5283,7 +5465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * A terminal / console window (always dark). Put prompt + output lines in the content;
@@ -5727,6 +5909,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], scaleTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "scaleTo", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$b = () => { };
 /**
  * An accessible select (combobox + listbox) using the `aria-activedescendant` pattern:
  * focus stays on the trigger while arrows move the active option. Full keyboard support
@@ -5744,9 +5928,11 @@ class BuiSelect {
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     placeholder = input('Select…', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
+    disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$b;
+    onTouched = noop$b;
     listId = inject(_IdGenerator).getId('bui-select-');
     host = inject(ElementRef);
     open = signal(false, /* @ts-ignore */
@@ -5792,9 +5978,11 @@ class BuiSelect {
                 next.add(option.value);
             }
             this.values.set([...next]);
+            this.onChange([...next]);
             return;
         }
         this.value.set(option.value);
+        this.onChange(option.value);
         this.close();
     }
     onKeydown(event) {
@@ -5859,10 +6047,32 @@ class BuiSelect {
         this.open.set(true);
     }
     close() {
+        if (this.open()) {
+            this.onTouched();
+        }
         this.open.set(false);
     }
+    writeValue(value) {
+        if (this.multiple()) {
+            this.values.set(Array.isArray(value) ? [...value] : []);
+        }
+        else {
+            this.value.set(typeof value === 'string' ? value : '');
+        }
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSelect, isStandalone: true, selector: "bui-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange" }, host: { attributes: { "data-slot": "select" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSelect, isStandalone: true, selector: "bui-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "select" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiSelect), multi: true },
+        ], ngImport: i0, template: `
     <button
       type="button"
       role="combobox"
@@ -5975,6 +6185,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[class]': 'computedClass()',
                         '(document:click)': 'onDocumentClick($event)',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiSelect), multi: true },
+                    ],
                     template: `
     <button
       type="button"
@@ -6079,7 +6292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const VARIANTS$1 = {
     primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
@@ -6173,6 +6386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$a = () => { };
 /**
  * A filterable combobox: a text input (`role="combobox"`, `aria-autocomplete="list"`) over a
  * filtered listbox, using the `aria-activedescendant` pattern. Full keyboard + outside-click.
@@ -6189,12 +6404,14 @@ class BuiCombobox {
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     placeholder = input('Search…', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
+    disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** When false, the field can't be typed in — it just opens the full list (select-like). */
     searchable = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$a;
+    onTouched = noop$a;
     listId = inject(_IdGenerator).getId('bui-combobox-');
     host = inject(ElementRef);
     open = signal(false, /* @ts-ignore */
@@ -6254,12 +6471,15 @@ class BuiCombobox {
                 next.add(option.value);
             }
             this.values.set([...next]);
+            this.onChange([...next]);
             this.query.set('');
             return;
         }
         this.value.set(option.value);
+        this.onChange(option.value);
         this.query.set('');
         this.open.set(false);
+        this.onTouched();
     }
     onKeydown(event) {
         if (this.disabled()) {
@@ -6304,9 +6524,29 @@ class BuiCombobox {
         }
         this.open.set(false);
         this.query.set('');
+        this.onTouched();
+    }
+    writeValue(value) {
+        if (this.multiple()) {
+            this.values.set(Array.isArray(value) ? [...value] : []);
+        }
+        else {
+            this.value.set(typeof value === 'string' ? value : '');
+        }
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCombobox, isStandalone: true, selector: "bui-combobox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange" }, host: { attributes: { "data-slot": "combobox" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCombobox, isStandalone: true, selector: "bui-combobox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "combobox" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiCombobox), multi: true },
+        ], ngImport: i0, template: `
     <input
       type="text"
       role="combobox"
@@ -6387,6 +6627,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[class]': 'computedClass()',
                         '(document:click)': 'onDocumentClick($event)',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiCombobox), multi: true },
+                    ],
                     template: `
     <input
       type="text"
@@ -6459,7 +6702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A live countdown to a target time (`role="timer"`). SSR-safe — ticks only in the browser. */
 class BuiCountdown {
@@ -7491,6 +7734,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], blur: [{ type: i0.Input, args: [{ isSignal: true, alias: "blur", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$9 = () => { };
 const BTN = 'border-input text-foreground hover:bg-accent inline-flex items-center justify-center border bg-transparent outline-none transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4';
 const INPUT = 'w-16 [appearance:textfield] border-y border-input bg-transparent text-center tabular-nums outline-none focus-visible:relative focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none';
 const BTN_SIZE = {
@@ -7512,13 +7757,15 @@ class BuiNumberInput {
     max = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     stepBy = input(1, { ...(ngDevMode ? { debugName: "stepBy" } : /* istanbul ignore next */ {}), alias: 'step' });
-    disabled = input(false, /* @ts-ignore */
+    disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     size = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     ariaLabel = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$9;
+    onTouched = noop$9;
     btnClass = computed(() => cn(BTN, BTN_SIZE[this.size()]), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "btnClass" }] : /* istanbul ignore next */ []));
     inputClass = computed(() => cn(INPUT, INPUT_SIZE[this.size()]), /* @ts-ignore */
@@ -7553,9 +7800,24 @@ class BuiNumberInput {
             value = max;
         }
         this.value.set(value);
+        this.onChange(value);
+    }
+    writeValue(value) {
+        this.value.set(typeof value === 'number' ? value : 0);
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiNumberInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiNumberInput, isStandalone: true, selector: "bui-number-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, stepBy: { classPropertyName: "stepBy", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "number-input" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiNumberInput, isStandalone: true, selector: "bui-number-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, stepBy: { classPropertyName: "stepBy", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "number-input" }, properties: { "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiNumberInput), multi: true },
+        ], ngImport: i0, template: `
     <button
       type="button"
       [class]="btnClass() + ' rounded-l-md'"
@@ -7587,6 +7849,7 @@ class BuiNumberInput {
       [class]="inputClass()"
       (input)="onInput($event)"
       (change)="onInput($event)"
+      (blur)="onTouched()"
     />
     <button
       type="button"
@@ -7615,6 +7878,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             args: [{
                     selector: 'bui-number-input',
                     host: { 'data-slot': 'number-input', '[class]': 'computedClass()' },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiNumberInput), multi: true },
+                    ],
                     template: `
     <button
       type="button"
@@ -7647,6 +7913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       [class]="inputClass()"
       (input)="onInput($event)"
       (change)="onInput($event)"
+      (blur)="onTouched()"
     />
     <button
       type="button"
@@ -7670,7 +7937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     </button>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], stepBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], stepBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A radio-group of product variants, rendered as pills or colour swatches. */
 class BuiVariantSelector {
@@ -9167,6 +9434,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$8 = () => { };
 const SELECT_CLASS = 'h-9 rounded-md border border-input bg-background px-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50';
 /** A styled time field: a native `<input type="time">`, or hour/minute selects in `select` mode. */
 class BuiTimeField {
@@ -9182,7 +9451,7 @@ class BuiTimeField {
     ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     seconds = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "seconds" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
+    disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** `select` renders hour + minute dropdowns instead of a native time input. */
     mode = input('input', /* @ts-ignore */
@@ -9193,6 +9462,8 @@ class BuiTimeField {
     ariaLabel = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$8;
+    onTouched = noop$8;
     selectClass = SELECT_CLASS;
     hourPart = computed(() => (this.value().split(':', 1)[0] || '12').padStart(2, '0'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hourPart" }] : /* istanbul ignore next */ []));
@@ -9209,15 +9480,32 @@ class BuiTimeField {
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     onInput(event) {
         this.value.set(event.target.value);
+        this.onChange(this.value());
     }
     setHour(event) {
         this.value.set(`${event.target.value}:${this.minutePart()}`);
+        this.onChange(this.value());
     }
     setMinute(event) {
         this.value.set(`${this.hourPart()}:${event.target.value}`);
+        this.onChange(this.value());
+    }
+    writeValue(value) {
+        this.value.set(typeof value === 'string' ? value : '');
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTimeField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiTimeField, isStandalone: true, selector: "bui-time-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "time-field" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiTimeField, isStandalone: true, selector: "bui-time-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "time-field" }, listeners: { "focusout": "onTouched()" }, properties: { "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiTimeField), multi: true },
+        ], ngImport: i0, template: `
     @if (mode() === 'select') {
       <div class="inline-flex items-center gap-1">
         <select
@@ -9265,7 +9553,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             type: Component,
             args: [{
                     selector: 'bui-time-field',
-                    host: { 'data-slot': 'time-field', '[class]': 'computedClass()' },
+                    host: {
+                        'data-slot': 'time-field',
+                        '[class]': 'computedClass()',
+                        '(focusout)': 'onTouched()',
+                    },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiTimeField), multi: true },
+                    ],
                     template: `
     @if (mode() === 'select') {
       <div class="inline-flex items-center gap-1">
@@ -9310,7 +9605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A group of toggle buttons (single or multiple selection). Use `button[buiToggleGroupItem]`. */
 class BuiToggleGroup {
@@ -9393,6 +9688,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$7 = () => { };
 /** A free-text tags input: type and press Enter (or comma) to add chips; Backspace removes. */
 class BuiTagsInput {
     tags = model([], /* @ts-ignore */
@@ -9401,9 +9698,11 @@ class BuiTagsInput {
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     max = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
+    disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$7;
+    onTouched = noop$7;
     draft = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
     atMax = computed(() => {
@@ -9430,6 +9729,7 @@ class BuiTagsInput {
         const next = [...this.tags()];
         next.splice(index, 1);
         this.tags.set(next);
+        this.onChange(next);
     }
     add() {
         const value = this.draft().trim();
@@ -9437,10 +9737,26 @@ class BuiTagsInput {
         if (value === '' || this.atMax() || this.tags().includes(value)) {
             return;
         }
-        this.tags.set([...this.tags(), value]);
+        const next = [...this.tags(), value];
+        this.tags.set(next);
+        this.onChange(next);
+    }
+    writeValue(value) {
+        this.tags.set(Array.isArray(value) ? [...value] : []);
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTagsInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiTagsInput, isStandalone: true, selector: "bui-tags-input", inputs: { tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tags: "tagsChange" }, host: { attributes: { "data-slot": "tags-input" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiTagsInput, isStandalone: true, selector: "bui-tags-input", inputs: { tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tags: "tagsChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "tags-input" }, listeners: { "focusout": "onTouched()" }, properties: { "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiTagsInput), multi: true },
+        ], ngImport: i0, template: `
     @for (tag of tags(); track tag; let i = $index) {
       <span
         class="inline-flex items-center gap-1 rounded bg-secondary px-2 py-0.5 text-sm text-secondary-foreground"
@@ -9471,7 +9787,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             type: Component,
             args: [{
                     selector: 'bui-tags-input',
-                    host: { 'data-slot': 'tags-input', '[class]': 'computedClass()' },
+                    host: { 'data-slot': 'tags-input', '[class]': 'computedClass()', '(focusout)': 'onTouched()' },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiTagsInput), multi: true },
+                    ],
                     template: `
     @for (tag of tags(); track tag; let i = $index) {
       <span
@@ -9499,7 +9818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     />
   `,
                 }]
-        }], propDecorators: { tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }, { type: i0.Output, args: ["tagsChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }, { type: i0.Output, args: ["tagsChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** Click-to-edit inline text: shows a value, swaps to an input on click. Enter commits, Escape cancels. */
 class BuiEditable {
@@ -9755,6 +10074,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$6 = () => { };
 const DIMS = {
     sm: { box: 'size-16', text: 'text-sm' },
     default: { box: 'size-24', text: 'text-base' },
@@ -9777,9 +10098,11 @@ class BuiKnob {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     label = input('Value', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
+    disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$6;
+    onTouched = noop$6;
     radius = RADIUS;
     dashArray = `${ARC} ${CIRC}`;
     dragging = false;
@@ -9840,19 +10163,19 @@ class BuiKnob {
                 break;
             }
             case 'Home': {
-                this.value.set(this.min());
+                this.commit(this.min());
                 break;
             }
             case 'End': {
-                this.value.set(this.max());
+                this.commit(this.max());
                 break;
             }
             case 'PageUp': {
-                this.value.set(this.clamp(this.value() + this.bigStep()));
+                this.commit(this.clamp(this.value() + this.bigStep()));
                 break;
             }
             case 'PageDown': {
-                this.value.set(this.clamp(this.value() - this.bigStep()));
+                this.commit(this.clamp(this.value() - this.bigStep()));
                 break;
             }
             default: {
@@ -9873,10 +10196,10 @@ class BuiKnob {
         const cy = rect.top + rect.height / 2;
         const angle = (Math.atan2(event.clientX - cx, cy - event.clientY) * 180) / Math.PI;
         const ratio = Math.min(1, Math.max(0, (angle + 135) / 270));
-        this.value.set(this.snap(this.min() + ratio * (this.max() - this.min())));
+        this.commit(this.snap(this.min() + ratio * (this.max() - this.min())));
     }
     bump(direction) {
-        this.value.set(this.clamp(this.value() + direction * this.step()));
+        this.commit(this.clamp(this.value() + direction * this.step()));
     }
     bigStep() {
         return Math.max(this.step(), (this.max() - this.min()) / 10);
@@ -9888,8 +10211,24 @@ class BuiKnob {
         const snapped = Math.round((value - this.min()) / this.step()) * this.step() + this.min();
         return Number.parseFloat(this.clamp(snapped).toFixed(6));
     }
+    commit(value) {
+        this.value.set(value);
+        this.onChange(value);
+    }
+    writeValue(value) {
+        this.value.set(typeof value === 'number' ? value : 0);
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiKnob, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiKnob, isStandalone: true, selector: "bui-knob", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "knob" }, listeners: { "document:pointermove": "onMove($event)", "document:pointerup": "onUp()" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiKnob, isStandalone: true, selector: "bui-knob", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "knob" }, listeners: { "document:pointermove": "onMove($event)", "document:pointerup": "onUp()", "focusout": "onTouched()" }, properties: { "class": "computedClass()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiKnob), multi: true }], ngImport: i0, template: `
     <div
       role="slider"
       [attr.aria-valuemin]="min()"
@@ -9947,7 +10286,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[class]': 'computedClass()',
                         '(document:pointermove)': 'onMove($event)',
                         '(document:pointerup)': 'onUp()',
+                        '(focusout)': 'onTouched()',
                     },
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiKnob), multi: true }],
                     template: `
     <div
       role="slider"
@@ -9997,7 +10338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A lazy image with a blurred placeholder / skeleton and a graceful error state. */
 class BuiImage {
@@ -10686,13 +11027,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$5 = () => { };
 /** A one-time-password input: a row of single-character boxes with focus management + paste. */
 class BuiInputOtp {
     value = model('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     maxlength = input(6, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
+    disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     alphanumeric = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "alphanumeric" }] : /* istanbul ignore next */ []));
@@ -10702,6 +11045,8 @@ class BuiInputOtp {
     ariaLabel = input('One-time password', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$5;
+    onTouched = noop$5;
     host = inject(ElementRef);
     slots = computed(() => Array.from({ length: this.maxlength() }, (_, index) => index), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
@@ -10719,6 +11064,7 @@ class BuiInputOtp {
         const char = this.sanitize(element.value).slice(-1);
         const next = (this.value().slice(0, index) + char + this.value().slice(index + 1)).slice(0, this.maxlength());
         this.value.set(next);
+        this.onChange(next);
         element.value = char;
         if (char !== '' && index < this.maxlength() - 1) {
             this.focusBox(index + 1);
@@ -10741,11 +11087,24 @@ class BuiInputOtp {
         event.preventDefault();
         const text = this.sanitize(event.clipboardData?.getData('text') ?? '').slice(0, this.maxlength());
         this.value.set(text);
+        this.onChange(text);
         this.focusBox(Math.min(text.length, this.maxlength() - 1));
     }
     onFocus(event) {
         event.target.select();
     }
+    writeValue(value) {
+        this.value.set(typeof value === 'string' ? value : '');
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
     sanitize(raw) {
         return this.alphanumeric() ? raw.replaceAll(/[^a-zA-Z0-9]/g, '') : raw.replaceAll(/\D/g, '');
     }
@@ -10754,7 +11113,9 @@ class BuiInputOtp {
         boxes.item(index).focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiInputOtp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiInputOtp, isStandalone: true, selector: "bui-input-otp", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, alphanumeric: { classPropertyName: "alphanumeric", publicName: "alphanumeric", isSignal: true, isRequired: false, transformFunction: null }, groupSize: { classPropertyName: "groupSize", publicName: "groupSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "input-otp" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiInputOtp, isStandalone: true, selector: "bui-input-otp", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, alphanumeric: { classPropertyName: "alphanumeric", publicName: "alphanumeric", isSignal: true, isRequired: false, transformFunction: null }, groupSize: { classPropertyName: "groupSize", publicName: "groupSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "input-otp" }, listeners: { "focusout": "onTouched()" }, properties: { "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiInputOtp), multi: true },
+        ], ngImport: i0, template: `
     @for (slot of slots(); track slot) {
       <input
         type="text"
@@ -10780,7 +11141,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             type: Component,
             args: [{
                     selector: 'bui-input-otp',
-                    host: { 'data-slot': 'input-otp', '[class]': 'computedClass()' },
+                    host: { 'data-slot': 'input-otp', '[class]': 'computedClass()', '(focusout)': 'onTouched()' },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiInputOtp), multi: true },
+                    ],
                     template: `
     @for (slot of slots(); track slot) {
       <input
@@ -10803,7 +11167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], alphanumeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "alphanumeric", required: false }] }], groupSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSize", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], alphanumeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "alphanumeric", required: false }] }], groupSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSize", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const COUNTRIES = [
     { code: 'US', name: 'United States', dial: '+1', flag: '🇺🇸' },
@@ -13839,6 +14203,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$4 = () => { };
 const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 function pad(value) {
     return String(value).padStart(2, '0');
@@ -13886,7 +14252,11 @@ class BuiCalendar {
     /** Hide days that fall outside the current month. */
     hideOutsideDays = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hideOutsideDays" }] : /* istanbul ignore next */ []));
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$4;
+    onTouched = noop$4;
     view = signal(new Date(new Date().getFullYear(), new Date().getMonth(), 1), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
     weekdays = computed(() => {
@@ -13971,6 +14341,19 @@ class BuiCalendar {
             return;
         }
         this.value.set(iso);
+        this.onChange(iso);
+    }
+    writeValue(value) {
+        this.value.set(typeof value === 'string' ? value : '');
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     isSelected(iso) {
         if (iso === '') {
@@ -14038,7 +14421,9 @@ class BuiCalendar {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCalendar, isStandalone: true, selector: "bui-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disableWeekends: { classPropertyName: "disableWeekends", publicName: "disableWeekends", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, hideOutsideDays: { classPropertyName: "hideOutsideDays", publicName: "hideOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange", values: "valuesChange" }, host: { attributes: { "data-slot": "calendar" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCalendar, isStandalone: true, selector: "bui-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disableWeekends: { classPropertyName: "disableWeekends", publicName: "disableWeekends", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, hideOutsideDays: { classPropertyName: "hideOutsideDays", publicName: "hideOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange", values: "valuesChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "calendar" }, listeners: { "focusout": "onTouched()" }, properties: { "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiCalendar), multi: true },
+        ], ngImport: i0, template: `
     <div class="flex items-center justify-between pb-2">
       <button
         type="button"
@@ -14145,7 +14530,7 @@ class BuiCalendar {
                           [class]="dayClass(day)"
                           [attr.aria-pressed]="isSelected(day.iso)"
                           [attr.aria-current]="day.isToday ? 'date' : null"
-                          [disabled]="day.disabled"
+                          [disabled]="day.disabled || disabled()"
                           (click)="select(day.iso)"
                         >
                           {{ day.num }}
@@ -14168,7 +14553,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             type: Component,
             args: [{
                     selector: 'bui-calendar',
-                    host: { 'data-slot': 'calendar', '[class]': 'computedClass()' },
+                    host: { 'data-slot': 'calendar', '[class]': 'computedClass()', '(focusout)': 'onTouched()' },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiCalendar), multi: true },
+                    ],
                     template: `
     <div class="flex items-center justify-between pb-2">
       <button
@@ -14276,7 +14664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                           [class]="dayClass(day)"
                           [attr.aria-pressed]="isSelected(day.iso)"
                           [attr.aria-current]="day.isToday ? 'date' : null"
-                          [disabled]="day.disabled"
+                          [disabled]="day.disabled || disabled()"
                           (click)="select(day.iso)"
                         >
                           {{ day.num }}
@@ -14295,8 +14683,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], disableWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableWeekends", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], hideOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOutsideDays", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], disableWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableWeekends", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], hideOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOutsideDays", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$3 = () => { };
 /** A date input that opens a calendar popover. */
 class BuiDatePicker {
     value = model('', /* @ts-ignore */
@@ -14328,7 +14718,11 @@ class BuiDatePicker {
     ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
     hideOutsideDays = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hideOutsideDays" }] : /* istanbul ignore next */ []));
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$3;
+    onTouched = noop$3;
     host = inject(ElementRef);
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
@@ -14350,7 +14744,9 @@ class BuiDatePicker {
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     onPick(iso) {
         this.value.set(iso);
+        this.onChange(iso);
         this.open.set(false);
+        this.onTouched();
     }
     onRange(range) {
         this.range.set(range);
@@ -14366,16 +14762,33 @@ class BuiDatePicker {
         });
     }
     onDocumentClick(event) {
-        if (this.open() && !this.host.nativeElement.contains(event.target)) {
-            this.open.set(false);
+        if (!(this.open() && !this.host.nativeElement.contains(event.target))) {
+            return;
         }
+        this.open.set(false);
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.value.set(typeof value === 'string' ? value : '');
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDatePicker, isStandalone: true, selector: "bui-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disableWeekends: { classPropertyName: "disableWeekends", publicName: "disableWeekends", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, hideOutsideDays: { classPropertyName: "hideOutsideDays", publicName: "hideOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange" }, host: { attributes: { "data-slot": "date-picker" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDatePicker, isStandalone: true, selector: "bui-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disableWeekends: { classPropertyName: "disableWeekends", publicName: "disableWeekends", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, hideOutsideDays: { classPropertyName: "hideOutsideDays", publicName: "hideOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "date-picker" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiDatePicker), multi: true },
+        ], ngImport: i0, template: `
     <button
       type="button"
-      class="flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      class="flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
       [attr.aria-expanded]="open()"
+      [disabled]="disabled()"
       (click)="open.set(!open())"
     >
       <svg
@@ -14413,7 +14826,7 @@ class BuiDatePicker {
         />
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "mode", "range", "values", "months", "weekStart", "minDate", "maxDate", "disabledDates", "disableWeekends", "showWeekNumbers", "captionLayout", "hideOutsideDays", "class"], outputs: ["valueChange", "rangeChange", "valuesChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "mode", "range", "values", "months", "weekStart", "minDate", "maxDate", "disabledDates", "disableWeekends", "showWeekNumbers", "captionLayout", "hideOutsideDays", "disabled", "class"], outputs: ["valueChange", "rangeChange", "valuesChange", "disabledChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDatePicker, decorators: [{
             type: Component,
@@ -14425,11 +14838,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[class]': 'computedClass()',
                         '(document:click)': 'onDocumentClick($event)',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiDatePicker), multi: true },
+                    ],
                     template: `
     <button
       type="button"
-      class="flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      class="flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
       [attr.aria-expanded]="open()"
+      [disabled]="disabled()"
       (click)="open.set(!open())"
     >
       <svg
@@ -14469,7 +14886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], disableWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableWeekends", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], hideOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOutsideDays", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], disableWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableWeekends", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], hideOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOutsideDays", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A slide carousel. Project slides as direct children; arrows + dots navigate. SSR-safe. */
 class BuiCarousel {
@@ -15647,6 +16064,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$2 = () => { };
 /** A combined date + time picker in a popover. Value is `YYYY-MM-DDTHH:mm`. */
 class BuiDatetimePicker {
     value = model('', /* @ts-ignore */
@@ -15670,7 +16089,11 @@ class BuiDatetimePicker {
     ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
     seconds = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "seconds" }] : /* istanbul ignore next */ []));
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop$2;
+    onTouched = noop$2;
     host = inject(ElementRef);
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
@@ -15704,6 +16127,7 @@ class BuiDatetimePicker {
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     onDate(iso) {
         this.value.set(`${iso}T${this.timePart()}`);
+        this.onChange(this.value());
     }
     onRange(range) {
         const time = this.timePart();
@@ -15723,6 +16147,7 @@ class BuiDatetimePicker {
         }
         const date = this.datePart();
         this.value.set(`${date === '' ? this.todayIso() : date}T${time}`);
+        this.onChange(this.value());
     }
     fmt(value) {
         return new Date(value).toLocaleString('en-US', {
@@ -15733,20 +16158,37 @@ class BuiDatetimePicker {
         });
     }
     onDocumentClick(event) {
-        if (this.open() && !this.host.nativeElement.contains(event.target)) {
-            this.open.set(false);
+        if (!(this.open() && !this.host.nativeElement.contains(event.target))) {
+            return;
         }
+        this.open.set(false);
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.value.set(typeof value === 'string' ? value : '');
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     todayIso() {
         const now = new Date();
         return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDatetimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDatetimePicker, isStandalone: true, selector: "bui-datetime-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange" }, host: { attributes: { "data-slot": "datetime-picker" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDatetimePicker, isStandalone: true, selector: "bui-datetime-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "datetime-picker" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiDatetimePicker), multi: true },
+        ], ngImport: i0, template: `
     <button
       type="button"
-      class="flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      class="flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
       [attr.aria-expanded]="open()"
+      [disabled]="disabled()"
       (click)="open.set(!open())"
     >
       <svg
@@ -15795,7 +16237,7 @@ class BuiDatetimePicker {
         </div>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "mode", "range", "values", "months", "weekStart", "minDate", "maxDate", "disabledDates", "disableWeekends", "showWeekNumbers", "captionLayout", "hideOutsideDays", "class"], outputs: ["valueChange", "rangeChange", "valuesChange"] }, { kind: "component", type: BuiTimeField, selector: "bui-time-field", inputs: ["value", "name", "id", "min", "max", "seconds", "disabled", "mode", "minuteStep", "ariaLabel", "class"], outputs: ["valueChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "mode", "range", "values", "months", "weekStart", "minDate", "maxDate", "disabledDates", "disableWeekends", "showWeekNumbers", "captionLayout", "hideOutsideDays", "disabled", "class"], outputs: ["valueChange", "rangeChange", "valuesChange", "disabledChange"] }, { kind: "component", type: BuiTimeField, selector: "bui-time-field", inputs: ["value", "name", "id", "min", "max", "seconds", "disabled", "mode", "minuteStep", "ariaLabel", "class"], outputs: ["valueChange", "disabledChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDatetimePicker, decorators: [{
             type: Component,
@@ -15807,11 +16249,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[class]': 'computedClass()',
                         '(document:click)': 'onDocumentClick($event)',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiDatetimePicker), multi: true },
+                    ],
                     template: `
     <button
       type="button"
-      class="flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      class="flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
       [attr.aria-expanded]="open()"
+      [disabled]="disabled()"
       (click)="open.set(!open())"
     >
       <svg
@@ -15862,8 +16308,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$1 = () => { };
 const AC_SIZE = {
     sm: 'h-8 text-xs',
     default: 'h-9 text-sm',
@@ -15884,7 +16332,7 @@ class BuiAutocomplete {
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     empty = input('No results found.', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
+    disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     name = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
@@ -15898,6 +16346,8 @@ class BuiAutocomplete {
     ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
     boxClass = computed(() => cn('flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border border-input bg-transparent px-2 py-1 shadow-xs focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "boxClass" }] : /* istanbul ignore next */ []));
+    onChange = noop$1;
+    onTouched = noop$1;
     host = inject(ElementRef);
     listId = inject(_IdGenerator).getId('bui-autocomplete-');
     open = signal(false, /* @ts-ignore */
@@ -15922,6 +16372,9 @@ class BuiAutocomplete {
         this.value.set(event.target.value);
         this.open.set(true);
         this.active.set(0);
+        if (!this.multiple()) {
+            this.onChange(this.value());
+        }
     }
     onKeydown(event) {
         const options = this.filtered();
@@ -15945,6 +16398,7 @@ class BuiAutocomplete {
             const picked = this.values();
             if (picked.length > 0) {
                 this.values.set(picked.slice(0, -1));
+                this.onChange(this.values());
             }
         }
     }
@@ -15955,21 +16409,45 @@ class BuiAutocomplete {
             }
             this.value.set('');
             this.active.set(0);
+            this.onChange(this.values());
             return;
         }
         this.value.set(option);
         this.open.set(false);
+        this.onChange(option);
     }
     removeChip(chip) {
         this.values.set(this.values().filter((value) => value !== chip));
+        this.onChange(this.values());
     }
     onDocumentClick(event) {
-        if (this.open() && !this.host.nativeElement.contains(event.target)) {
-            this.open.set(false);
+        if (!(this.open() && !this.host.nativeElement.contains(event.target))) {
+            return;
         }
+        this.open.set(false);
+        this.onTouched();
+    }
+    writeValue(value) {
+        if (this.multiple()) {
+            this.values.set(Array.isArray(value) ? [...value] : []);
+        }
+        else {
+            this.value.set(typeof value === 'string' ? value : '');
+        }
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiAutocomplete, isStandalone: true, selector: "bui-autocomplete", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange" }, host: { attributes: { "data-slot": "autocomplete" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiAutocomplete, isStandalone: true, selector: "bui-autocomplete", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "autocomplete" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiAutocomplete), multi: true },
+        ], ngImport: i0, template: `
     @if (multiple()) {
       <div [class]="boxClass()">
         @for (chip of values(); track chip) {
@@ -16082,6 +16560,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[class]': 'computedClass()',
                         '(document:click)': 'onDocumentClick($event)',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiAutocomplete), multi: true },
+                    ],
                     template: `
     @if (multiple()) {
       <div [class]="boxClass()">
@@ -16186,7 +16667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A before/after image comparison with a draggable, keyboard-operable divider. */
 class BuiComparisonSlider {
@@ -16661,6 +17142,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => { };
 const PLACEHOLDERS = new Set(['9', 'a', '*']);
 function isTokenChar(char, token) {
     if (token === '9') {
@@ -16714,7 +17197,11 @@ class BuiInputMask {
     ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
     name = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    onChange = noop;
+    onTouched = noop;
     computedClass = computed(() => cn('block', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     onInput(event) {
@@ -16722,16 +17209,33 @@ class BuiInputMask {
         const masked = this.mask() === '' ? target.value : applyMask$1(target.value, this.mask());
         target.value = masked;
         this.value.set(masked);
+        this.onChange(masked);
+    }
+    writeValue(value) {
+        this.value.set(typeof value === 'string' ? value : '');
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiInputMask, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiInputMask, isStandalone: true, selector: "bui-input-mask", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "input-mask" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiInputMask, isStandalone: true, selector: "bui-input-mask", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "input-mask" }, properties: { "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiInputMask), multi: true },
+        ], ngImport: i0, template: `
     <input
       [value]="value()"
       [placeholder]="placeholder()"
       [attr.inputmode]="inputmode() || null"
       [attr.name]="name() || null"
-      class="h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      [disabled]="disabled()"
+      class="h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
       (input)="onInput($event)"
+      (blur)="onTouched()"
     />
   `, isInline: true });
 }
@@ -16740,18 +17244,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             args: [{
                     selector: 'bui-input-mask',
                     host: { 'data-slot': 'input-mask', '[class]': 'computedClass()' },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiInputMask), multi: true },
+                    ],
                     template: `
     <input
       [value]="value()"
       [placeholder]="placeholder()"
       [attr.inputmode]="inputmode() || null"
       [attr.name]="name() || null"
-      class="h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      [disabled]="disabled()"
+      class="h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
       (input)="onInput($event)"
+      (blur)="onTouched()"
     />
   `,
                 }]
-        }], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const SIDE = {
     right: 'inset-y-0 right-0 h-full w-80 max-w-[85vw] border-l',