@visitwonders/assembly 0.16.1 → 0.18.0

package/dist/form/date-picker-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker-field.js","sources":["../../src/form/date-picker-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport DatePicker, { type DateFormat } from './date-picker.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface DatePickerFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected date value */\n    value?: Date | null;\n\n    /** Default value (uncontrolled) */\n    defaultValue?: Date | null;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Date format for display and parsing (date-fns format) */\n    format?: DateFormat;\n\n    /** Minimum allowed date */\n    minDate?: Date;\n\n    /** Maximum allowed date */\n    maxDate?: Date;\n\n    /** Array of disabled dates or a function to check if a date is disabled */\n    disabledDates?: Date[] | ((date: Date) => boolean);\n\n    /** Array of day numbers (0-6, Sunday-Saturday) to disable */\n    disabledDaysOfWeek?: number[];\n\n    /** Day to start the week on (0 = Sunday, 1 = Monday, etc.) */\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n    /** Show days from adjacent months */\n    showOutsideDays?: boolean;\n\n    /** Show today indicator */\n    showToday?: boolean;\n\n    /** Allow typing in the input */\n    allowTextInput?: boolean;\n\n    /** Close dropdown when a date is selected */\n    closeOnSelect?: boolean;\n\n    /** Show calendar icon */\n    showIcon?: boolean;\n\n    /** Show clear button when value is selected */\n    clearable?: boolean;\n\n    /** Help text displayed below the input */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Field is read-only */\n    isReadOnly?: boolean;\n\n    /** Info tooltip text shown next to the label */\n    labelInfo?: string;\n\n    /** Optional indicator - shows \"optional\" or custom text next to the label */\n    optionalIndicator?: boolean | string;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name for forms */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: Date | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n\n    /** Open state change handler */\n    onOpenChange?: (open: boolean) => void;\n  };\n  Blocks: {\n    /** Rich tooltip content shown next to the label */\n    info: [];\n  };\n}\n\nexport default class DatePickerField extends Component<DatePickerFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @isReadOnly={{@isReadOnly}}\n      @labelInfo={{@labelInfo}}\n      @optionalIndicator={{@optionalIndicator}}\n      ...attributes\n      as |ctrl|\n    >\n      {{#if (has-block \"info\")}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          <:default>{{@label}}</:default>\n          <:info>{{yield to=\"info\"}}</:info>\n        </ctrl.Label>\n      {{else}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          {{@label}}\n        </ctrl.Label>\n      {{/if}}\n\n      <DatePicker\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @defaultValue={{@defaultValue}}\n        @placeholder={{@placeholder}}\n        @format={{@format}}\n        @minDate={{@minDate}}\n        @maxDate={{@maxDate}}\n        @disabledDates={{@disabledDates}}\n        @disabledDaysOfWeek={{@disabledDaysOfWeek}}\n        @weekStartsOn={{@weekStartsOn}}\n        @showOutsideDays={{@showOutsideDays}}\n        @showToday={{@showToday}}\n        @allowTextInput={{@allowTextInput}}\n        @closeOnSelect={{@closeOnSelect}}\n        @showIcon={{@showIcon}}\n        @clearable={{@clearable}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @isReadOnly={{@isReadOnly}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        @onOpenChange={{@onOpenChange}}\n        data-test-date-picker-field\n      />\n\n      {{#if @helpText}}\n        <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n      {{/if}}\n\n      {{#if @error}}\n        <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n      {{/if}}\n    </Control>\n  </template>\n}\n"],"names":["DatePickerField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","DatePicker"],"mappings":";;;;;;AAuGe,MAAMA,wBAAwBC,SAAA,CAAU;EACrD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,u9CAAA,EA4DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"date-picker-field.js","sources":["../../src/form/date-picker-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport DatePicker, { type DateFormat } from './date-picker.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface DatePickerFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /**\n     * Selected date. The consumer owns it: pair with `onChange` to track edits.\n     * Optional because a date picker can be empty.\n     */\n    value?: Date | null;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Date format for display and parsing (date-fns format) */\n    format?: DateFormat;\n\n    /** Minimum allowed date */\n    minDate?: Date;\n\n    /** Maximum allowed date */\n    maxDate?: Date;\n\n    /** Array of disabled dates or a function to check if a date is disabled */\n    disabledDates?: Date[] | ((date: Date) => boolean);\n\n    /** Array of day numbers (0-6, Sunday-Saturday) to disable */\n    disabledDaysOfWeek?: number[];\n\n    /** Day to start the week on (0 = Sunday, 1 = Monday, etc.) */\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n    /** Show days from adjacent months */\n    showOutsideDays?: boolean;\n\n    /** Show today indicator */\n    showToday?: boolean;\n\n    /** Allow typing in the input */\n    allowTextInput?: boolean;\n\n    /** Close dropdown when a date is selected */\n    closeOnSelect?: boolean;\n\n    /** Show calendar icon */\n    showIcon?: boolean;\n\n    /** Show clear button when value is selected */\n    clearable?: boolean;\n\n    /** Help text displayed below the input */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Field is read-only */\n    isReadOnly?: boolean;\n\n    /** Info tooltip text shown next to the label */\n    labelInfo?: string;\n\n    /** Optional indicator - shows \"optional\" or custom text next to the label */\n    optionalIndicator?: boolean | string;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name for forms */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: Date | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n\n    /** Open state change handler */\n    onOpenChange?: (open: boolean) => void;\n  };\n  Blocks: {\n    /** Rich tooltip content shown next to the label */\n    info: [];\n  };\n}\n\nexport default class DatePickerField extends Component<DatePickerFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @isReadOnly={{@isReadOnly}}\n      @labelInfo={{@labelInfo}}\n      @optionalIndicator={{@optionalIndicator}}\n      ...attributes\n      as |ctrl|\n    >\n      {{#if (has-block \"info\")}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          <:default>{{@label}}</:default>\n          <:info>{{yield to=\"info\"}}</:info>\n        </ctrl.Label>\n      {{else}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          {{@label}}\n        </ctrl.Label>\n      {{/if}}\n\n      <DatePicker\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @placeholder={{@placeholder}}\n        @format={{@format}}\n        @minDate={{@minDate}}\n        @maxDate={{@maxDate}}\n        @disabledDates={{@disabledDates}}\n        @disabledDaysOfWeek={{@disabledDaysOfWeek}}\n        @weekStartsOn={{@weekStartsOn}}\n        @showOutsideDays={{@showOutsideDays}}\n        @showToday={{@showToday}}\n        @allowTextInput={{@allowTextInput}}\n        @closeOnSelect={{@closeOnSelect}}\n        @showIcon={{@showIcon}}\n        @clearable={{@clearable}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @isReadOnly={{@isReadOnly}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        @onOpenChange={{@onOpenChange}}\n        data-test-date-picker-field\n      />\n\n      {{#if @helpText}}\n        <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n      {{/if}}\n\n      {{#if @error}}\n        <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n      {{/if}}\n    </Control>\n  </template>\n}\n"],"names":["DatePickerField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","DatePicker"],"mappings":";;;;;;AAuGe,MAAMA,wBAAwBC,SAAA,CAAU;EACrD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,u7CAAA,EA2DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/form/date-picker.js

@@ -70,18 +70,12 @@ class DatePicker extends Component {
     });
   }
   #inputValue = (i(this, "inputValue"), void 0);
-  static {
-    g(this.prototype, "internalValue", [tracked], function () {
-      return null;
-    });
-  }
-  #internalValue = (i(this, "internalValue"), void 0);
-  static {
-    g(this.prototype, "hasInternalValueChanged", [tracked], function () {
-      return false;
-    });
-  }
-  #hasInternalValueChanged = (i(this, "hasInternalValueChanged"), void 0);
+  /**
+  * In-progress typed date string (e.g. "15/06" before it parses to a Date).
+  * This is ephemeral UI state the picker owns, not the consumer's selection:
+  * it holds exactly what is being typed until the value parses and commits up
+  * via `onChange`.
+  */
   static {
     g(this.prototype, "skipInputReset", [tracked], function () {
       return false;
@@ -118,19 +112,9 @@ class DatePicker extends Component {
   get showToday() {
     return this.args.showToday ?? true;
   }
-  /** Check if component is controlled */
-  get isControlled() {
-    return this.args.value !== undefined;
-  }
-  /** Get current selected value (controlled or uncontrolled) */
+  /** The selected date, owned by the consumer via `@value`. */
   get selectedValue() {
-    if (this.isControlled) {
-      return this.args.value ?? null;
-    }
-    if (this.args.defaultValue !== undefined && !this.hasInternalValueChanged) {
-      return this.args.defaultValue;
-    }
-    return this.internalValue;
+    return this.args.value ?? null;
   }
   /** Value for Calendar component (converts null to undefined) */
   get calendarValue() {
@@ -307,11 +291,9 @@ class DatePicker extends Component {
   // Methods
   // ============================================================================
   setValue(date) {
-    if (!this.isControlled) {
-      this.hasInternalValueChanged = true;
-      this.internalValue = date;
-    }
     this.args.onChange?.(date);
+    // Reflect the committed value in the input straight away, ahead of the
+    // parent's @value round-trip.
     this.inputValue = formatDate(date, this.dateFormat);
   }
   openDropdown = () => {

package/dist/form/date-range-picker-field.js

@@ -23,7 +23,7 @@ class DateRangePickerField extends Component {
     return parts.length > 0 ? parts.join(' ') : undefined;
   };
   static {
-    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @labelInfo={{@labelInfo}} @optionalIndicator={{@optionalIndicator}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <DateRangePicker @id={{ctrl.id}} @name={{@name}} @value={{@value}} @defaultValue={{@defaultValue}} @startPlaceholder={{@startPlaceholder}} @endPlaceholder={{@endPlaceholder}} @format={{@format}} @minDate={{@minDate}} @maxDate={{@maxDate}} @disabledDates={{@disabledDates}} @disabledDaysOfWeek={{@disabledDaysOfWeek}} @weekStartsOn={{@weekStartsOn}} @showOutsideDays={{@showOutsideDays}} @showToday={{@showToday}} @presets={{@presets}} @allowTextInput={{@allowTextInput}} @showIcon={{@showIcon}} @clearable={{@clearable}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} @onOpenChange={{@onOpenChange}} data-test-date-range-picker-field />\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n  {{/if}}\n</Control>", {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @labelInfo={{@labelInfo}} @optionalIndicator={{@optionalIndicator}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <DateRangePicker @id={{ctrl.id}} @name={{@name}} @value={{@value}} @startPlaceholder={{@startPlaceholder}} @endPlaceholder={{@endPlaceholder}} @format={{@format}} @minDate={{@minDate}} @maxDate={{@maxDate}} @disabledDates={{@disabledDates}} @disabledDaysOfWeek={{@disabledDaysOfWeek}} @weekStartsOn={{@weekStartsOn}} @showOutsideDays={{@showOutsideDays}} @showToday={{@showToday}} @presets={{@presets}} @allowTextInput={{@allowTextInput}} @showIcon={{@showIcon}} @clearable={{@clearable}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} @onOpenChange={{@onOpenChange}} data-test-date-range-picker-field />\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n  {{/if}}\n</Control>", {
       strictMode: true,
       scope: () => ({
         Control,

package/dist/form/date-range-picker-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker-field.js","sources":["../../src/form/date-range-picker-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport DateRangePicker, {\n  type DateFormat,\n  type DateRangePreset,\n  type DateRange,\n} from './date-range-picker.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface DateRangePickerFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected date range value */\n    value?: DateRange | null;\n\n    /** Default value (uncontrolled) */\n    defaultValue?: DateRange | null;\n\n    /** Placeholder text for start date */\n    startPlaceholder?: string;\n\n    /** Placeholder text for end date */\n    endPlaceholder?: string;\n\n    /** Date format for display and parsing (date-fns format) */\n    format?: DateFormat;\n\n    /** Minimum allowed date */\n    minDate?: Date;\n\n    /** Maximum allowed date */\n    maxDate?: Date;\n\n    /** Array of disabled dates or a function to check if a date is disabled */\n    disabledDates?: Date[] | ((date: Date) => boolean);\n\n    /** Array of day numbers (0-6, Sunday-Saturday) to disable */\n    disabledDaysOfWeek?: number[];\n\n    /** Day to start the week on (0 = Sunday, 1 = Monday, etc.) */\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n    /** Show days from adjacent months */\n    showOutsideDays?: boolean;\n\n    /** Show today indicator */\n    showToday?: boolean;\n\n    /** Preset date range options */\n    presets?: DateRangePreset[];\n\n    /** Allow typing in the inputs */\n    allowTextInput?: boolean;\n\n    /** Show calendar icon */\n    showIcon?: boolean;\n\n    /** Show clear button when value is selected */\n    clearable?: boolean;\n\n    /** Help text displayed below the input */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Field is read-only */\n    isReadOnly?: boolean;\n\n    /** Info tooltip text shown next to the label */\n    labelInfo?: string;\n\n    /** Optional indicator - shows \"optional\" or custom text next to the label */\n    optionalIndicator?: boolean | string;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name prefix for forms (creates {name}_start and {name}_end) */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: DateRange | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n\n    /** Open state change handler */\n    onOpenChange?: (open: boolean) => void;\n  };\n  Blocks: {\n    /** Rich tooltip content shown next to the label */\n    info: [];\n  };\n}\n\nexport default class DateRangePickerField extends Component<DateRangePickerFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @isReadOnly={{@isReadOnly}}\n      @labelInfo={{@labelInfo}}\n      @optionalIndicator={{@optionalIndicator}}\n      ...attributes\n      as |ctrl|\n    >\n      {{#if (has-block \"info\")}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          <:default>{{@label}}</:default>\n          <:info>{{yield to=\"info\"}}</:info>\n        </ctrl.Label>\n      {{else}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          {{@label}}\n        </ctrl.Label>\n      {{/if}}\n\n      <DateRangePicker\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @defaultValue={{@defaultValue}}\n        @startPlaceholder={{@startPlaceholder}}\n        @endPlaceholder={{@endPlaceholder}}\n        @format={{@format}}\n        @minDate={{@minDate}}\n        @maxDate={{@maxDate}}\n        @disabledDates={{@disabledDates}}\n        @disabledDaysOfWeek={{@disabledDaysOfWeek}}\n        @weekStartsOn={{@weekStartsOn}}\n        @showOutsideDays={{@showOutsideDays}}\n        @showToday={{@showToday}}\n        @presets={{@presets}}\n        @allowTextInput={{@allowTextInput}}\n        @showIcon={{@showIcon}}\n        @clearable={{@clearable}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @isReadOnly={{@isReadOnly}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        @onOpenChange={{@onOpenChange}}\n        data-test-date-range-picker-field\n      />\n\n      {{#if @helpText}}\n        <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n      {{/if}}\n\n      {{#if @error}}\n        <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n      {{/if}}\n    </Control>\n  </template>\n}\n"],"names":["DateRangePickerField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","DateRangePicker"],"mappings":";;;;;;AA8Ge,MAAMA,6BAA6BC,SAAA,CAAU;EAC1D,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,ogDAAA,EA6DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"date-range-picker-field.js","sources":["../../src/form/date-range-picker-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport DateRangePicker, {\n  type DateFormat,\n  type DateRangePreset,\n  type DateRange,\n} from './date-range-picker.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface DateRangePickerFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /**\n     * Selected date range. The consumer owns it: pair with `onChange` to track\n     * edits. Optional because the range can be empty.\n     */\n    value?: DateRange | null;\n\n    /** Placeholder text for start date */\n    startPlaceholder?: string;\n\n    /** Placeholder text for end date */\n    endPlaceholder?: string;\n\n    /** Date format for display and parsing (date-fns format) */\n    format?: DateFormat;\n\n    /** Minimum allowed date */\n    minDate?: Date;\n\n    /** Maximum allowed date */\n    maxDate?: Date;\n\n    /** Array of disabled dates or a function to check if a date is disabled */\n    disabledDates?: Date[] | ((date: Date) => boolean);\n\n    /** Array of day numbers (0-6, Sunday-Saturday) to disable */\n    disabledDaysOfWeek?: number[];\n\n    /** Day to start the week on (0 = Sunday, 1 = Monday, etc.) */\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n    /** Show days from adjacent months */\n    showOutsideDays?: boolean;\n\n    /** Show today indicator */\n    showToday?: boolean;\n\n    /** Preset date range options */\n    presets?: DateRangePreset[];\n\n    /** Allow typing in the inputs */\n    allowTextInput?: boolean;\n\n    /** Show calendar icon */\n    showIcon?: boolean;\n\n    /** Show clear button when value is selected */\n    clearable?: boolean;\n\n    /** Help text displayed below the input */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Field is read-only */\n    isReadOnly?: boolean;\n\n    /** Info tooltip text shown next to the label */\n    labelInfo?: string;\n\n    /** Optional indicator - shows \"optional\" or custom text next to the label */\n    optionalIndicator?: boolean | string;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name prefix for forms (creates {name}_start and {name}_end) */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: DateRange | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n\n    /** Open state change handler */\n    onOpenChange?: (open: boolean) => void;\n  };\n  Blocks: {\n    /** Rich tooltip content shown next to the label */\n    info: [];\n  };\n}\n\nexport default class DateRangePickerField extends Component<DateRangePickerFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @isReadOnly={{@isReadOnly}}\n      @labelInfo={{@labelInfo}}\n      @optionalIndicator={{@optionalIndicator}}\n      ...attributes\n      as |ctrl|\n    >\n      {{#if (has-block \"info\")}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          <:default>{{@label}}</:default>\n          <:info>{{yield to=\"info\"}}</:info>\n        </ctrl.Label>\n      {{else}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          {{@label}}\n        </ctrl.Label>\n      {{/if}}\n\n      <DateRangePicker\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @startPlaceholder={{@startPlaceholder}}\n        @endPlaceholder={{@endPlaceholder}}\n        @format={{@format}}\n        @minDate={{@minDate}}\n        @maxDate={{@maxDate}}\n        @disabledDates={{@disabledDates}}\n        @disabledDaysOfWeek={{@disabledDaysOfWeek}}\n        @weekStartsOn={{@weekStartsOn}}\n        @showOutsideDays={{@showOutsideDays}}\n        @showToday={{@showToday}}\n        @presets={{@presets}}\n        @allowTextInput={{@allowTextInput}}\n        @showIcon={{@showIcon}}\n        @clearable={{@clearable}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @isReadOnly={{@isReadOnly}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        @onOpenChange={{@onOpenChange}}\n        data-test-date-range-picker-field\n      />\n\n      {{#if @helpText}}\n        <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n      {{/if}}\n\n      {{#if @error}}\n        <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n      {{/if}}\n    </Control>\n  </template>\n}\n"],"names":["DateRangePickerField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","DateRangePicker"],"mappings":";;;;;;AA8Ge,MAAMA,6BAA6BC,SAAA,CAAU;EAC1D,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,o+CAAA,EA4DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/form/date-range-picker.js

@@ -40,7 +40,9 @@ class DateRangePicker extends Component {
       return '';
     });
   }
-  #startInputValue = (i(this, "startInputValue"), void 0);
+  #startInputValue = (i(this, "startInputValue"), void 0); // In-progress typed strings for each input, ephemeral UI state the picker
+  // owns. They hold exactly what is being typed until the range parses and
+  // commits up via `onChange`.
   static {
     g(this.prototype, "endInputValue", [tracked], function () {
       return '';
@@ -53,18 +55,6 @@ class DateRangePicker extends Component {
     });
   }
   #activeInput = (i(this, "activeInput"), void 0);
-  static {
-    g(this.prototype, "internalRangeValue", [tracked], function () {
-      return null;
-    });
-  }
-  #internalRangeValue = (i(this, "internalRangeValue"), void 0);
-  static {
-    g(this.prototype, "hasInternalValueChanged", [tracked], function () {
-      return false;
-    });
-  }
-  #hasInternalValueChanged = (i(this, "hasInternalValueChanged"), void 0);
   calendarId = `date-range-picker-calendar-${++dateRangePickerIdCounter}`;
   startInputElement = null;
   endInputElement = null;
@@ -101,19 +91,9 @@ class DateRangePicker extends Component {
   get hasPresets() {
     return !!this.args.presets && this.args.presets.length > 0;
   }
-  /** Check if component is controlled */
-  get isControlled() {
-    return this.args.value !== undefined;
-  }
-  /** Get current selected range (controlled or uncontrolled) */
+  /** The selected range, owned by the consumer via `@value`. */
   get selectedRange() {
-    if (this.isControlled) {
-      return this.args.value ?? null;
-    }
-    if (this.args.defaultValue !== undefined && !this.hasInternalValueChanged) {
-      return this.args.defaultValue ?? null;
-    }
-    return this.internalRangeValue;
+    return this.args.value ?? null;
   }
   /** Value for Calendar component (converts null to undefined) */
   get calendarRangeValue() {
@@ -379,14 +359,11 @@ class DateRangePicker extends Component {
   // ============================================================================
   // Methods
   // ============================================================================
-  /** Set the range value (handles both controlled and uncontrolled mode) */
+  /** Commit a range up to the consumer and refresh the inputs to match. */
   setRange(range) {
-    if (!this.isControlled) {
-      this.hasInternalValueChanged = true;
-      this.internalRangeValue = range;
-    }
     this.args.onChange?.(range);
-    // Update input values
+    // Reflect the committed range in the inputs straight away, ahead of the
+    // parent's @value round-trip.
     if (range) {
       this.startInputValue = formatDate(range.start, this.dateFormat);
       this.endInputValue = formatDate(range.end, this.dateFormat);

package/dist/form/input.js

@@ -22,18 +22,13 @@ class Input extends Component {
   get isFullWidth() {
     return this.args.isFullWidth ?? true;
   }
-  get inputValue() {
-    // Controlled mode: use value prop
-    // Uncontrolled mode: use defaultValue for initial render
-    return this.args.value ?? this.args.defaultValue;
-  }
   autoFocusModifier = modifier(element => {
     if (this.args.autoFocus) {
       element.focus();
     }
   });
   static {
-    setComponentTemplate(precompileTemplate("<div class=\"input-wrapper_ef268a5e9\" data-size={{this.size}} data-variant={{this.variant}} data-disabled={{if @isDisabled \"true\"}} data-readonly={{if @isReadOnly \"true\"}} data-invalid={{if @isInvalid \"true\"}} data-full-width={{if this.isFullWidth \"true\" \"false\"}} data-test-input-wrapper>\n  {{#if (has-block \"prefix\")}}\n    <span class=\"input-prefix_ef268a5e9\" data-test-input-prefix>{{yield to=\"prefix\"}}</span>\n  {{else if @prefix}}\n    <span class=\"input-prefix_ef268a5e9\" data-test-input-prefix>{{@prefix}}</span>\n  {{/if}}\n\n  <input class=\"input_ef268a5e9\" id={{@id}} type={{this.type}} name={{@name}} value={{this.inputValue}} placeholder={{@placeholder}} disabled={{@isDisabled}} readonly={{@isReadOnly}} required={{@isRequired}} autocomplete={{this.autoComplete}} inputmode={{@inputMode}} min={{@min}} max={{@max}} step={{@step}} pattern={{@pattern}} maxlength={{@maxLength}} aria-invalid={{if @isInvalid \"true\"}} aria-required={{if @isRequired \"true\"}} aria-describedby={{@aria-describedby}} {{this.autoFocusModifier}} data-test-input ...attributes />\n\n  {{#if (has-block \"suffix\")}}\n    <span class=\"input-suffix_ef268a5e9\" data-test-input-suffix>{{yield to=\"suffix\"}}</span>\n  {{else if @suffix}}\n    <span class=\"input-suffix_ef268a5e9\" data-test-input-suffix>{{@suffix}}</span>\n  {{/if}}\n</div>", {
+    setComponentTemplate(precompileTemplate("<div class=\"input-wrapper_ef268a5e9\" data-size={{this.size}} data-variant={{this.variant}} data-disabled={{if @isDisabled \"true\"}} data-readonly={{if @isReadOnly \"true\"}} data-invalid={{if @isInvalid \"true\"}} data-full-width={{if this.isFullWidth \"true\" \"false\"}} data-test-input-wrapper>\n  {{#if (has-block \"prefix\")}}\n    <span class=\"input-prefix_ef268a5e9\" data-test-input-prefix>{{yield to=\"prefix\"}}</span>\n  {{else if @prefix}}\n    <span class=\"input-prefix_ef268a5e9\" data-test-input-prefix>{{@prefix}}</span>\n  {{/if}}\n\n  <input class=\"input_ef268a5e9\" id={{@id}} type={{this.type}} name={{@name}} value={{@value}} placeholder={{@placeholder}} disabled={{@isDisabled}} readonly={{@isReadOnly}} required={{@isRequired}} autocomplete={{this.autoComplete}} inputmode={{@inputMode}} min={{@min}} max={{@max}} step={{@step}} pattern={{@pattern}} maxlength={{@maxLength}} aria-invalid={{if @isInvalid \"true\"}} aria-required={{if @isRequired \"true\"}} aria-describedby={{@aria-describedby}} {{this.autoFocusModifier}} data-test-input ...attributes />\n\n  {{#if (has-block \"suffix\")}}\n    <span class=\"input-suffix_ef268a5e9\" data-test-input-suffix>{{yield to=\"suffix\"}}</span>\n  {{else if @suffix}}\n    <span class=\"input-suffix_ef268a5e9\" data-test-input-suffix>{{@suffix}}</span>\n  {{/if}}\n</div>", {
       strictMode: true
     }), this);
   }

package/dist/form/money-field.js

@@ -40,11 +40,18 @@ const CURRENCY_CONFIG = {
 };
 class MoneyField extends Component {
   static {
-    g(this.prototype, "internalDisplayValue", [tracked], function () {
-      return '';
+    g(this.prototype, "displayBuffer", [tracked], function () {
+      return null;
     });
   }
-  #internalDisplayValue = (i(this, "internalDisplayValue"), void 0);
+  #displayBuffer = (i(this, "displayBuffer"), void 0);
+  /**
+  * In-progress typing buffer: the raw string the user is mid-typing, e.g. "12."
+  * before it parses to a number. This is ephemeral UI state the component owns,
+  * not the consumer's domain value. It is `null` whenever the field is not being
+  * edited, in which case the display formats `@value` instead. It is set on each
+  * keystroke and cleared on blur, once the parsed value commits up via `onChange`.
+  */
   get currencyConfig() {
     return CURRENCY_CONFIG[this.args.currency] ?? {
       symbol: this.args.currency,
@@ -73,14 +80,11 @@ class MoneyField extends Component {
   get isInvalid() {
     return !!this.args.error;
   }
-  get isControlled() {
-    return this.args.value !== undefined;
-  }
   get displayValue() {
-    if (this.isControlled) {
-      return this.formatMinorToDisplay(this.args.value);
-    }
-    return this.internalDisplayValue;
+    // While editing, the buffer is authoritative so half-typed strings ("12.")
+    // survive keystrokes. Otherwise the display is the consumer's committed
+    // value, formatted.
+    return this.displayBuffer ?? this.formatMinorToDisplay(this.args.value);
   }
   get placeholder() {
     if (this.args.placeholder) {
@@ -146,9 +150,9 @@ class MoneyField extends Component {
         return;
       }
     }
-    if (!this.isControlled) {
-      this.internalDisplayValue = rawValue;
-    }
+    // Hold the raw keystrokes in the ephemeral buffer so the field shows exactly
+    // what is being typed; the committed value still flows up through onInput.
+    this.displayBuffer = rawValue;
     const minorValue = this.parseDisplayToMinor(rawValue);
     this.args.onInput?.(minorValue, event);
   }
@@ -158,21 +162,18 @@ class MoneyField extends Component {
   handleBlur(event) {
     const input = event.target;
     const minorValue = this.parseDisplayToMinor(input.value);
+    // Editing is over, so drop the typing buffer: from here the display formats
+    // @value. The parent updates @value in response to onChange, which the
+    // displayValue getter then reflects on the next render.
+    this.displayBuffer = null;
     if (minorValue !== null) {
       const clampedValue = this.clampValue(minorValue);
       const formattedDisplay = this.formatMinorToDisplay(clampedValue);
-      if (!this.isControlled) {
-        this.internalDisplayValue = formattedDisplay;
-      }
-      // Set DOM value directly for immediate visual feedback of formatted value.
-      // In controlled mode, the parent should update @value in response to onChange,
-      // which will sync the displayValue getter on the next render.
+      // Set the DOM value directly for immediate feedback of the formatted value,
+      // ahead of the parent's @value round-trip.
       input.value = formattedDisplay;
       this.args.onChange?.(clampedValue, event);
     } else {
-      if (!this.isControlled) {
-        this.internalDisplayValue = '';
-      }
       input.value = '';
       this.args.onChange?.(null, event);
     }

package/dist/form/multi-combobox-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-combobox-field.js","sources":["../../src/form/multi-combobox-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport MultiComboBox from './multi-combobox.gts';\nimport type { ComboBoxItems, ComboBoxOption } from './combobox-shared.ts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface MultiComboBoxFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required). */\n    label: string;\n\n    /** Available options. Flat or pre-grouped. */\n    items: ComboBoxItems;\n\n    /** Current selected values (controlled). */\n    values?: string[];\n\n    /** Fires when the selection changes. */\n    onChange?: (values: string[], options: ComboBoxOption[]) => void;\n\n    /** Async search. */\n    onSearch?: (query: string) => Promise<ComboBoxItems>;\n\n    /** Debounce for `onSearch` in ms. */\n    searchDebounceMs?: number;\n\n    /** Force the loading state. */\n    isLoading?: boolean;\n\n    /** Called when an `onSearch` promise rejects. */\n    onSearchError?: (error: unknown) => void;\n\n    /** Loading row text. */\n    loadingText?: string;\n\n    /** Input placeholder when no values selected. */\n    placeholder?: string;\n\n    /** Empty state text. */\n    noResultsText?: string;\n\n    /** Allow creating new options from a non-matching query. */\n    isCreatable?: boolean;\n\n    /** Fires when the user activates the create row. */\n    onCreate?: (query: string) => void;\n\n    /** Build the create-row label. */\n    createLabel?: (query: string) => string;\n\n    /** Chips shown before collapsing to \"+N more\". */\n    maxVisibleChips?: number;\n\n    /** Help text displayed below the control. */\n    helpText?: string;\n\n    /** Error message (also sets invalid state). */\n    error?: string;\n\n    /** Field is required. */\n    isRequired?: boolean;\n\n    /** Field is disabled. */\n    isDisabled?: boolean;\n\n    /** Show the clear-all button when values are set. */\n    isClearable?: boolean;\n\n    /** Info tooltip text shown next to the label. */\n    labelInfo?: string;\n\n    /** Optional indicator - shows \"optional\" or custom text next to the label. */\n    optionalIndicator?: boolean | string;\n\n    /** Label visibility. */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name — one hidden input is rendered per selected value. */\n    name?: string;\n\n    /** Blur event handler. */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler. */\n    onFocus?: (event: FocusEvent) => void;\n\n    /** Fires when the dropdown opens. */\n    onOpen?: () => void;\n\n    /** Fires when the dropdown closes. */\n    onClose?: () => void;\n  };\n  Blocks: {\n    /** Rich tooltip content shown next to the label. */\n    info: [];\n  };\n}\n\nexport default class MultiComboBoxField extends Component<MultiComboBoxFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @labelInfo={{@labelInfo}}\n      @optionalIndicator={{@optionalIndicator}}\n      ...attributes\n      as |ctrl|\n    >\n      {{#if (has-block \"info\")}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          <:default>{{@label}}</:default>\n          <:info>{{yield to=\"info\"}}</:info>\n        </ctrl.Label>\n      {{else}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          {{@label}}\n        </ctrl.Label>\n      {{/if}}\n\n      <MultiComboBox\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @items={{@items}}\n        @values={{@values}}\n        @placeholder={{@placeholder}}\n        @noResultsText={{@noResultsText}}\n        @onSearch={{@onSearch}}\n        @searchDebounceMs={{@searchDebounceMs}}\n        @isLoading={{@isLoading}}\n        @onSearchError={{@onSearchError}}\n        @loadingText={{@loadingText}}\n        @isCreatable={{@isCreatable}}\n        @onCreate={{@onCreate}}\n        @createLabel={{@createLabel}}\n        @maxVisibleChips={{@maxVisibleChips}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @isClearable={{@isClearable}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        @onOpen={{@onOpen}}\n        @onClose={{@onClose}}\n        data-test-multi-combobox-field\n      />\n\n      {{#if @helpText}}\n        <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n      {{/if}}\n\n      {{#if @error}}\n        <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n      {{/if}}\n    </Control>\n  </template>\n}\n"],"names":["MultiComboBoxField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","MultiComboBox"],"mappings":";;;;;;AAqGe,MAAMA,2BAA2BC,SAAA,CAAU;EACxD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;EAEAC,kBAAA,GAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,i5CAAA,EA0DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"multi-combobox-field.js","sources":["../../src/form/multi-combobox-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport MultiComboBox from './multi-combobox.gts';\nimport type { ComboBoxItems, ComboBoxOption } from './combobox-shared.ts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface MultiComboBoxFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required). */\n    label: string;\n\n    /** Available options. Flat or pre-grouped. */\n    items: ComboBoxItems;\n\n    /** The selected values. The consumer owns them; pair with `onChange`. */\n    values?: string[];\n\n    /** Fires when the selection changes. */\n    onChange?: (values: string[], options: ComboBoxOption[]) => void;\n\n    /** Async search. */\n    onSearch?: (query: string) => Promise<ComboBoxItems>;\n\n    /** Debounce for `onSearch` in ms. */\n    searchDebounceMs?: number;\n\n    /** Force the loading state. */\n    isLoading?: boolean;\n\n    /** Called when an `onSearch` promise rejects. */\n    onSearchError?: (error: unknown) => void;\n\n    /** Loading row text. */\n    loadingText?: string;\n\n    /** Input placeholder when no values selected. */\n    placeholder?: string;\n\n    /** Empty state text. */\n    noResultsText?: string;\n\n    /** Allow creating new options from a non-matching query. */\n    isCreatable?: boolean;\n\n    /** Fires when the user activates the create row. */\n    onCreate?: (query: string) => void;\n\n    /** Build the create-row label. */\n    createLabel?: (query: string) => string;\n\n    /** Chips shown before collapsing to \"+N more\". */\n    maxVisibleChips?: number;\n\n    /** Help text displayed below the control. */\n    helpText?: string;\n\n    /** Error message (also sets invalid state). */\n    error?: string;\n\n    /** Field is required. */\n    isRequired?: boolean;\n\n    /** Field is disabled. */\n    isDisabled?: boolean;\n\n    /** Show the clear-all button when values are set. */\n    isClearable?: boolean;\n\n    /** Info tooltip text shown next to the label. */\n    labelInfo?: string;\n\n    /** Optional indicator - shows \"optional\" or custom text next to the label. */\n    optionalIndicator?: boolean | string;\n\n    /** Label visibility. */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name — one hidden input is rendered per selected value. */\n    name?: string;\n\n    /** Blur event handler. */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler. */\n    onFocus?: (event: FocusEvent) => void;\n\n    /** Fires when the dropdown opens. */\n    onOpen?: () => void;\n\n    /** Fires when the dropdown closes. */\n    onClose?: () => void;\n  };\n  Blocks: {\n    /** Rich tooltip content shown next to the label. */\n    info: [];\n  };\n}\n\nexport default class MultiComboBoxField extends Component<MultiComboBoxFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @labelInfo={{@labelInfo}}\n      @optionalIndicator={{@optionalIndicator}}\n      ...attributes\n      as |ctrl|\n    >\n      {{#if (has-block \"info\")}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          <:default>{{@label}}</:default>\n          <:info>{{yield to=\"info\"}}</:info>\n        </ctrl.Label>\n      {{else}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          {{@label}}\n        </ctrl.Label>\n      {{/if}}\n\n      <MultiComboBox\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @items={{@items}}\n        @values={{@values}}\n        @placeholder={{@placeholder}}\n        @noResultsText={{@noResultsText}}\n        @onSearch={{@onSearch}}\n        @searchDebounceMs={{@searchDebounceMs}}\n        @isLoading={{@isLoading}}\n        @onSearchError={{@onSearchError}}\n        @loadingText={{@loadingText}}\n        @isCreatable={{@isCreatable}}\n        @onCreate={{@onCreate}}\n        @createLabel={{@createLabel}}\n        @maxVisibleChips={{@maxVisibleChips}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @isClearable={{@isClearable}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        @onOpen={{@onOpen}}\n        @onClose={{@onClose}}\n        data-test-multi-combobox-field\n      />\n\n      {{#if @helpText}}\n        <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n      {{/if}}\n\n      {{#if @error}}\n        <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n      {{/if}}\n    </Control>\n  </template>\n}\n"],"names":["MultiComboBoxField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","MultiComboBox"],"mappings":";;;;;;AAqGe,MAAMA,2BAA2BC,SAAA,CAAU;EACxD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;EAEAC,kBAAA,GAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,i5CAAA,EA0DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/form/radio.js

@@ -20,16 +20,15 @@ class Radio extends Component {
     return this.args.size ?? 'md';
   }
   get checkedValue() {
-    // Controlled mode takes precedence
+    // An explicit isChecked takes precedence over the group's selection.
     if (this.args.isChecked !== undefined) {
       return this.args.isChecked;
     }
-    // Group value mode (from RadioGroup)
+    // Otherwise the radio is checked when its value matches the group's.
     if (this.args.groupValue !== undefined) {
       return this.args.value === this.args.groupValue;
     }
-    // Uncontrolled mode
-    return this.args.defaultChecked;
+    return false;
   }
   handleChange() {
     this.args.onChange?.(this.args.value);

package/dist/form/search-input.js

@@ -18,13 +18,10 @@ class SearchInput extends Component {
       return false;
     });
   }
-  #isFocused = (i(this, "isFocused"), void 0);
-  static {
-    g(this.prototype, "value", [tracked], function () {
-      return this.args.value || '';
-    });
+  #isFocused = (i(this, "isFocused"), void 0); // Ephemeral UI state the component owns; the value itself is consumer-owned.
+  get currentValue() {
+    return this.args.value ?? '';
   }
-  #value = (i(this, "value"), void 0);
   get inputId() {
     return guidFor(this);
   }
@@ -36,7 +33,6 @@ class SearchInput extends Component {
   }
   handleInput(event) {
     const target = event.target;
-    this.value = target.value;
     this.args.onInput?.(target.value, event);
   }
   static {
@@ -65,14 +61,15 @@ class SearchInput extends Component {
   }
   handleKeyUp(event) {
     if (event.key === 'Enter') {
-      this.args.onSearch?.(this.value);
+      const target = event.target;
+      this.args.onSearch?.(target.value);
     }
   }
   static {
     n(this.prototype, "handleKeyUp", [action]);
   }
   static {
-    setComponentTemplate(precompileTemplate("<div class=\"field_e35e7cf3c\" ...attributes>\n  {{#if @label}}\n    <label for={{this.inputId}} class=\"label_e35e7cf3c\">\n      {{@label}}\n      {{#if @required}}\n        <span class=\"required_e35e7cf3c\">*</span>\n      {{/if}}\n    </label>\n  {{/if}}\n\n  <div class=\"input-wrapper_e35e7cf3c\">\n    <span class=\"search-icon_e35e7cf3c\">\n      <Icon @icon={{Search}} @size={{16}} />\n    </span>\n    <input id={{this.inputId}} type=\"search\" name={{@name}} value={{this.value}} placeholder={{@placeholder}} disabled={{@disabled}} readonly={{@readonly}} required={{@required}} autocomplete={{@autocomplete}} class=\"input_e35e7cf3c\" data-size={{this.size}} data-error={{if this.hasError \"true\"}} {{on \"input\" this.handleInput}} {{on \"change\" this.handleChange}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} {{on \"keyup\" this.handleKeyUp}} />\n  </div>\n\n  {{#if @helperText}}\n    <p class=\"helper-text_e35e7cf3c\">{{@helperText}}</p>\n  {{/if}}\n\n  {{#if @error}}\n    <p class=\"error-text_e35e7cf3c\">{{@error}}</p>\n  {{/if}}\n</div>", {
+    setComponentTemplate(precompileTemplate("<div class=\"field_e35e7cf3c\" ...attributes>\n  {{#if @label}}\n    <label for={{this.inputId}} class=\"label_e35e7cf3c\">\n      {{@label}}\n      {{#if @required}}\n        <span class=\"required_e35e7cf3c\">*</span>\n      {{/if}}\n    </label>\n  {{/if}}\n\n  <div class=\"input-wrapper_e35e7cf3c\">\n    <span class=\"search-icon_e35e7cf3c\">\n      <Icon @icon={{Search}} @size={{16}} />\n    </span>\n    <input id={{this.inputId}} type=\"search\" name={{@name}} value={{this.currentValue}} placeholder={{@placeholder}} disabled={{@disabled}} readonly={{@readonly}} required={{@required}} autocomplete={{@autocomplete}} class=\"input_e35e7cf3c\" data-size={{this.size}} data-error={{if this.hasError \"true\"}} {{on \"input\" this.handleInput}} {{on \"change\" this.handleChange}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} {{on \"keyup\" this.handleKeyUp}} />\n  </div>\n\n  {{#if @helperText}}\n    <p class=\"helper-text_e35e7cf3c\">{{@helperText}}</p>\n  {{/if}}\n\n  {{#if @error}}\n    <p class=\"error-text_e35e7cf3c\">{{@error}}</p>\n  {{/if}}\n</div>", {
       strictMode: true,
       scope: () => ({
         Icon,

package/dist/form/text-field.js

@@ -1,6 +1,5 @@
 import "./text-field-css-754feeb82dbd9fc9afdc1f00dceb13ad.css"
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import { on } from '@ember/modifier';
@@ -11,20 +10,12 @@ import HelpText from './help-text.js';
 import ErrorMessage from './error-message.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i, n } from 'decorator-transforms/runtime';
+import { n } from 'decorator-transforms/runtime';
 
 ;
 
 class TextField extends Component {
-  static {
-    g(this.prototype, "internalValue", [tracked]);
-  }
-  #internalValue = (i(this, "internalValue"), void 0);
   id = this.args.id ?? guidFor(this);
-  constructor(owner, args) {
-    super(owner, args);
-    this.internalValue = args.value ?? args.defaultValue ?? '';
-  }
   get helpTextId() {
     return `${this.id}-help-text`;
   }
@@ -59,11 +50,8 @@ class TextField extends Component {
   get rows() {
     return this.args.rows ?? 3;
   }
-  get isControlled() {
-    return this.args.value !== undefined;
-  }
   get currentValue() {
-    return this.isControlled ? this.args.value ?? '' : this.internalValue;
+    return this.args.value ?? '';
   }
   get characterCount() {
     return this.currentValue.length;
@@ -77,9 +65,6 @@ class TextField extends Component {
   }
   // Handler for Textarea (receives value as first arg)
   handleTextareaInput(value, event) {
-    if (!this.isControlled) {
-      this.internalValue = value;
-    }
     this.args.onInput?.(value, event);
   }
   static {
@@ -94,11 +79,7 @@ class TextField extends Component {
   }
   handleInputEvent(event) {
     const target = event.target;
-    const value = target.value;
-    if (!this.isControlled) {
-      this.internalValue = value;
-    }
-    this.args.onInput?.(value, event);
+    this.args.onInput?.(target.value, event);
   }
   static {
     n(this.prototype, "handleInputEvent", [action]);

package/dist/form/textarea.js

@@ -1,12 +1,11 @@
 import "./textarea.css"
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { modifier } from 'ember-modifier';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i, n } from 'decorator-transforms/runtime';
+import { n } from 'decorator-transforms/runtime';
 
 ;
 
@@ -45,19 +44,8 @@ const autoGrow = modifier((element, [enabled, minRows, maxRows]) => {
   };
 });
 class Textarea extends Component {
-  static {
-    g(this.prototype, "internalValue", [tracked]);
-  }
-  #internalValue = (i(this, "internalValue"), void 0);
-  constructor(owner, args) {
-    super(owner, args);
-    this.internalValue = args.value ?? args.defaultValue ?? '';
-  }
-  get isControlled() {
-    return this.args.value !== undefined;
-  }
   get currentValue() {
-    return this.isControlled ? this.args.value ?? '' : this.internalValue;
+    return this.args.value ?? '';
   }
   get size() {
     return this.args.size ?? 'md';
@@ -98,9 +86,6 @@ class Textarea extends Component {
   }
   handleInput(event) {
     const target = event.target;
-    if (!this.isControlled) {
-      this.internalValue = target.value;
-    }
     this.args.onInput?.(target.value, event);
   }
   static {

package/dist/form/toggle-field.js

@@ -26,7 +26,7 @@ class ToggleField extends Component {
     return undefined;
   }
   static {
-    setComponentTemplate(precompileTemplate("<div class=\"toggle-field_e5c1644c4\" data-invalid={{if this.isInvalid \"true\"}} data-test-toggle-field ...attributes>\n  <Toggle @id={{this.fieldId}} @label={{@label}} @description={{@description}} @checked={{@checked}} @defaultChecked={{@defaultChecked}} @onChange={{@onChange}} @labelPosition={{@labelPosition}} @size={{@size}} @isDisabled={{@isDisabled}} @name={{@name}} @value={{@value}} @isRequired={{@isRequired}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} @aria-describedby={{this.ariaDescribedBy}} />\n\n  {{#if @error}}\n    <ErrorMessage id={{this.errorMessageId}} @isInvalid={{this.isInvalid}}>\n      {{@error}}\n    </ErrorMessage>\n  {{/if}}\n</div>", {
+    setComponentTemplate(precompileTemplate("<div class=\"toggle-field_e5c1644c4\" data-invalid={{if this.isInvalid \"true\"}} data-test-toggle-field ...attributes>\n  <Toggle @id={{this.fieldId}} @label={{@label}} @description={{@description}} @checked={{@checked}} @onChange={{@onChange}} @labelPosition={{@labelPosition}} @size={{@size}} @isDisabled={{@isDisabled}} @name={{@name}} @value={{@value}} @isRequired={{@isRequired}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} @aria-describedby={{this.ariaDescribedBy}} />\n\n  {{#if @error}}\n    <ErrorMessage id={{this.errorMessageId}} @isInvalid={{this.isInvalid}}>\n      {{@error}}\n    </ErrorMessage>\n  {{/if}}\n</div>", {
       strictMode: true,
       scope: () => ({
         Toggle,

package/dist/form/toggle.js

@@ -12,20 +12,13 @@ import { g, i, n } from 'decorator-transforms/runtime';
 ;
 
 class Toggle extends Component {
-  static {
-    g(this.prototype, "internalChecked", [tracked]);
-  }
-  #internalChecked = (i(this, "internalChecked"), void 0);
   static {
     g(this.prototype, "isFocused", [tracked], function () {
       return false;
     });
   }
-  #isFocused = (i(this, "isFocused"), void 0);
-  constructor(owner, args) {
-    super(owner, args);
-    this.internalChecked = args.defaultChecked ?? false;
-  }
+  #isFocused = (i(this, "isFocused"), void 0); // Ephemeral UI state — which the component owns. Tracks the focus ring;
+  // never the consumer's checked state.
   guid = guidFor(this);
   get inputId() {
     return this.args.id ?? this.guid;
@@ -45,11 +38,8 @@ class Toggle extends Component {
   get value() {
     return this.args.value ?? 'on';
   }
-  get isControlled() {
-    return this.args.checked !== undefined;
-  }
   get checked() {
-    return this.isControlled ? this.args.checked ?? false : this.internalChecked;
+    return this.args.checked;
   }
   get hasLabel() {
     return !!this.args.label;
@@ -68,11 +58,7 @@ class Toggle extends Component {
   }
   handleChange(event) {
     const target = event.target;
-    const newChecked = target.checked;
-    if (!this.isControlled) {
-      this.internalChecked = newChecked;
-    }
-    this.args.onChange?.(newChecked);
+    this.args.onChange?.(target.checked, event);
   }
   static {
     n(this.prototype, "handleChange", [action]);