@visitwonders/assembly 0.16.1 → 0.17.0

package/dist/action/button-group.js

@@ -1,38 +1,21 @@
 import "./button-group.css"
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { fn, hash } from '@ember/helper';
 import Button from './button.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 ButtonGroup extends Component {
-  static {
-    g(this.prototype, "internalValue", [tracked]);
-  }
-  #internalValue = (i(this, "internalValue"), void 0);
-  constructor(owner, args) {
-    super(owner, args);
-    const defaultVal = args.defaultValue;
-    if (this.selectionType === 'multiple') {
-      this.internalValue = Array.isArray(defaultVal) ? [...defaultVal] : defaultVal ? [defaultVal] : [];
-    } else {
-      this.internalValue = Array.isArray(defaultVal) ? defaultVal[0] ?? '' : defaultVal ?? '';
-    }
-  }
   get selectionType() {
     return this.args.type ?? 'single';
   }
-  get isControlled() {
-    return this.args.value !== undefined;
-  }
   get selectedValue() {
-    return this.isControlled ? this.args.value ?? '' : this.internalValue;
+    return this.args.value;
   }
   get variant() {
     return this.args.variant ?? 'outline';
@@ -74,15 +57,9 @@ class ButtonGroup extends Component {
       } else {
         newValues = [...currentArray, value];
       }
-      if (!this.isControlled) {
-        this.internalValue = newValues;
-      }
       this.args.onChange?.(newValues);
     } else {
       if (this.selectedValue === value) return;
-      if (!this.isControlled) {
-        this.internalValue = value;
-      }
       this.args.onChange?.(value);
     }
   }

package/dist/data/pagination.js

@@ -20,13 +20,6 @@ import { g, i } from 'decorator-transforms/runtime';
 // Component
 // ============================================================================
 class Pagination extends Component {
-  static {
-    g(this.prototype, "internalCurrentPage", [tracked], function () {
-      return 1;
-    });
-  }
-  #internalCurrentPage = (i(this, "internalCurrentPage"), void 0); // Uncontrolled-mode state. When the consumer passes `@currentPage`, this
-  // value is ignored; otherwise it tracks page locally.
   // Tracked snapshot of the last seen totalPages so the refresh-clamp modifier
   // can detect a shrink-under-the-user without scheduling its own runloop.
   previousTotalPages = null;
@@ -86,15 +79,10 @@ class Pagination extends Component {
     return this.args.showJumpTo ?? false;
   }
   // ============================================================================
-  // Mode inference (mirrors Table's isControlledSelection / isControlledSort).
-  // Note: unlike Table, @onChange fires in BOTH modes — Pagination models a
-  // navigation event. See spec §Behaviour > Callback contract.
+  // Current page (the consumer owns it)
   // ============================================================================
-  get isControlled() {
-    return this.args.currentPage !== undefined;
-  }
   get currentPage() {
-    return this.args.currentPage ?? this.internalCurrentPage;
+    return this.args.currentPage;
   }
   // ============================================================================
   // Derived counts
@@ -182,14 +170,11 @@ class Pagination extends Component {
   // ============================================================================
   // Navigation
   // ============================================================================
-  // Single update path. Fires @onChange in both modes — the callback models a
-  // navigation event regardless of whether the parent stores currentPage.
-  // Spec §Behaviour > Callback contract.
+  // Single navigation path. Clamps to [1, totalPages] and fires @onChange with
+  // the result; the consumer advances @currentPage. The component never writes
+  // its own page. Spec §Behaviour > Callback contract.
   goToPage(page) {
     const clamped = Math.max(1, Math.min(this.totalPages, page));
-    if (!this.isControlled) {
-      this.internalCurrentPage = clamped;
-    }
     this.args.onChange(clamped);
   }
   handlePageClick = page => {
@@ -253,10 +238,11 @@ class Pagination extends Component {
     // assumed to be valid.
     if (previous === null) return;
     // Only clamp on shrink-past-current. Growth never re-fires.
-    // The mutation is deferred to a microtask: the modifier reads
-    // `currentPage` (which in uncontrolled mode is `internalCurrentPage`)
-    // and `goToPage` writes it. Glimmer rejects same-computation read+write
-    // on a tracked field, so we punt the write to the next microtask.
+    // @onChange is deferred to a microtask: the modifier reads `currentPage`
+    // (i.e. @currentPage), and firing @onChange drives the consumer to update
+    // that same arg. Glimmer rejects mutating a tracked value read in the
+    // same computation, so we punt the fire to the next microtask. Tests
+    // flush it with `await settled()`.
     if (totalPages < previous && currentPage > totalPages) {
       void Promise.resolve().then(() => this.goToPage(totalPages));
     }

package/dist/data/table.js

@@ -54,18 +54,6 @@ class Table extends Component {
     });
   }
   #focusedRowIndex = (i(this, "focusedRowIndex"), void 0);
-  static {
-    g(this.prototype, "internalSortState", [tracked], function () {
-      return null;
-    });
-  }
-  #internalSortState = (i(this, "internalSortState"), void 0);
-  static {
-    g(this.prototype, "internalSelectedIds", [tracked], function () {
-      return [];
-    });
-  }
-  #internalSelectedIds = (i(this, "internalSelectedIds"), void 0);
   static {
     g(this.prototype, "lastSelectedIndex", [tracked], function () {
       return null;
@@ -92,60 +80,18 @@ class Table extends Component {
   get visibleColumns() {
     return this.args.columns.filter(col => !col.hidden);
   }
-  get isControlledSelection() {
-    return this.args.selectedIds !== undefined;
-  }
   get selectedIds() {
-    return this.isControlledSelection ? this.args.selectedIds ?? [] : this.internalSelectedIds;
-  }
-  get isControlledSort() {
-    return this.args.sortBy !== undefined || this.args.onSortChange !== undefined;
+    return this.args.selectedIds ?? [];
   }
   get sortState() {
-    return this.isControlledSort ? this.args.sortBy ?? null : this.internalSortState;
-  }
-  get sortedData() {
-    const data = this.args.data ?? [];
-    const sort = this.sortState;
-    if (!sort) return data;
-    const column = this.args.columns.find(col => col.id === sort.columnId);
-    if (!column) return data;
-    const sorted = [...data];
-    sorted.sort((a, b) => {
-      // Use custom sort function if provided
-      if (column.sortFn) {
-        const result = column.sortFn(a, b);
-        return sort.direction === 'desc' ? -result : result;
-      }
-      // Default sort using accessor
-      const aVal = this.getCellValue(a, column);
-      const bVal = this.getCellValue(b, column);
-      let result = 0;
-      if (aVal === bVal) {
-        result = 0;
-      } else if (aVal === null || aVal === undefined) {
-        result = 1;
-      } else if (bVal === null || bVal === undefined) {
-        result = -1;
-      } else if (typeof aVal === 'string' && typeof bVal === 'string') {
-        result = aVal.localeCompare(bVal);
-      } else if (typeof aVal === 'number' && typeof bVal === 'number') {
-        result = aVal - bVal;
-      } else {
-        // Handle other types by converting to string safely
-        const aStr = stringifyValue(aVal);
-        const bStr = stringifyValue(bVal);
-        result = aStr.localeCompare(bStr);
-      }
-      return sort.direction === 'desc' ? -result : result;
-    });
-    return sorted;
+    return this.args.sortBy ?? null;
   }
+  // The table renders @data in the order it is given and never sorts it. The
+  // consumer owns the sort: @sortBy drives the header indicator and
+  // @onSortChange reports a click; the consumer reorders the data.
+  // See docs/decisions/0003-sorting-model.md.
   get displayData() {
-    if (this.args.isLoading) {
-      return [];
-    }
-    return this.sortedData;
+    return this.args.isLoading ? [] : this.args.data ?? [];
   }
   get isEmpty() {
     return !this.args.isLoading && this.displayData.length === 0;
@@ -229,18 +175,10 @@ class Table extends Component {
     return 'none';
   };
   updateSelection(newIds) {
-    if (this.isControlledSelection) {
-      this.args.onSelectionChange?.(newIds);
-    } else {
-      this.internalSelectedIds = newIds;
-    }
+    this.args.onSelectionChange?.(newIds);
   }
   updateSort(newSort) {
-    if (this.isControlledSort) {
-      this.args.onSortChange?.(newSort);
-    } else {
-      this.internalSortState = newSort;
-    }
+    this.args.onSortChange?.(newSort);
   }
   moveFocus(direction) {
     const rows = this.displayData;

package/dist/form/calendar.js

@@ -18,35 +18,26 @@ import { g, i } from 'decorator-transforms/runtime';
 // ============================================================================
 class Calendar extends Component {
   static {
-    g(this.prototype, "internalMonth", [tracked], function () {
+    g(this.prototype, "_navigationMonth", [tracked], function () {
       return new Date();
     });
   }
-  #internalMonth = (i(this, "internalMonth"), void 0);
+  #_navigationMonth = (i(this, "_navigationMonth"), void 0);
+  /**
+  * The month the calendar is currently showing. This is the calendar's own
+  * navigation mechanics, not the consumer's domain state: the user pages
+  * through months to find a date. It seeds to the current month and the prev
+  * and next buttons (and keyboard month paging) drive it. When the consumer
+  * passes `@month`, that override wins and this field is bypassed.
+  */
   static {
     g(this.prototype, "focusedDate", [tracked], function () {
       return null;
     });
   }
-  #focusedDate = (i(this, "focusedDate"), void 0);
-  static {
-    g(this.prototype, "internalValue", [tracked], function () {
-      return null;
-    });
-  }
-  #internalValue = (i(this, "internalValue"), void 0);
-  static {
-    g(this.prototype, "internalMultiValue", [tracked], function () {
-      return [];
-    });
-  }
-  #internalMultiValue = (i(this, "internalMultiValue"), void 0);
-  static {
-    g(this.prototype, "internalRangeValue", [tracked], function () {
-      return null;
-    });
-  }
-  #internalRangeValue = (i(this, "internalRangeValue"), void 0);
+  #focusedDate = (i(this, "focusedDate"), void 0); // Ephemeral UI mechanics the calendar owns: which day has keyboard focus,
+  // which day is hovered during a range drag, and the first-click anchor of an
+  // in-progress range before the second click lands.
   static {
     g(this.prototype, "rangeSelectionStart", [tracked], function () {
       return null;
@@ -78,46 +69,32 @@ class Calendar extends Component {
   get showToday() {
     return this.args.showToday ?? true;
   }
-  /** Current displayed month (controlled or uncontrolled) */
+  /**
+  * The month on screen. The `@month` override wins when present; otherwise the
+  * calendar's own navigation state drives. Writing it (via the prev and next
+  * buttons or keyboard month paging) updates the navigation state and reports
+  * the new month up. The override is left untouched — when it is in play the
+  * consumer updates it in response to `onMonthChange`, exactly as it owns the
+  * selection.
+  */
   get currentMonth() {
-    if (this.args.month !== undefined) {
-      return this.args.month;
-    }
-    if (this.args.defaultMonth !== undefined && !this.hasInternalMonthChanged) {
-      return this.args.defaultMonth;
-    }
-    return this.internalMonth;
+    return this.args.month ?? this._navigationMonth;
   }
-  hasInternalMonthChanged = false;
-  hasInternalValueChanged = false;
   set currentMonth(value) {
-    this.hasInternalMonthChanged = true;
-    this.internalMonth = value;
+    this._navigationMonth = value;
     this.args.onMonthChange?.(value);
   }
-  /** Selected value for single mode (controlled or uncontrolled) */
+  /** Selected value for single mode, owned by the consumer via `@value`. */
   get selectedValue() {
-    if (this.args.value !== undefined) {
-      return this.args.value;
-    }
-    if (this.args.defaultValue !== undefined && !this.hasInternalValueChanged) {
-      return this.args.defaultValue;
-    }
-    return this.internalValue;
+    return this.args.value ?? null;
   }
-  /** Selected values for multiple mode */
+  /** Selected values for multiple mode, owned by the consumer via `@multiValue`. */
   get selectedMultiValue() {
-    if (this.args.multiValue !== undefined) {
-      return this.args.multiValue;
-    }
-    return this.internalMultiValue;
+    return this.args.multiValue ?? [];
   }
-  /** Selected range for range mode */
+  /** Selected range for range mode, owned by the consumer via `@rangeValue`. */
   get selectedRange() {
-    if (this.args.rangeValue !== undefined) {
-      return this.args.rangeValue;
-    }
-    return this.internalRangeValue;
+    return this.args.rangeValue ?? null;
   }
   /** Weekday labels starting from weekStartsOn */
   get weekdayLabels() {
@@ -278,8 +255,6 @@ class Calendar extends Component {
   selectDate = date => {
     if (this.isDateDisabled(date)) return;
     if (this.mode === 'single') {
-      this.hasInternalValueChanged = true;
-      this.internalValue = date;
       this.args.onChange?.(date);
     } else if (this.mode === 'multiple') {
       const current = [...this.selectedMultiValue];
@@ -291,13 +266,11 @@ class Calendar extends Component {
       } else {
         current.push(date);
       }
-      this.internalMultiValue = current;
       this.args.onMultiChange?.(current);
     } else if (this.mode === 'range') {
       if (!this.rangeSelectionStart) {
-        // First click: set range start and clear any existing range
+        // First click: set range start (ephemeral anchor) and clear the range.
         this.rangeSelectionStart = date;
-        this.internalRangeValue = null;
         this.args.onRangeChange?.(null);
       } else {
         // Second click: complete range
@@ -312,7 +285,6 @@ class Calendar extends Component {
         };
         this.rangeSelectionStart = null;
         this.hoveredDate = null;
-        this.internalRangeValue = range;
         this.args.onRangeChange?.(range);
       }
     }

package/dist/form/checkbox-group.js

@@ -1,6 +1,5 @@
 import "./checkbox-group.css"
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { hash } from '@ember/helper';
@@ -9,25 +8,14 @@ import Checkbox from './checkbox.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 CheckboxGroup extends Component {
-  static {
-    g(this.prototype, "internalValues", [tracked]);
-  }
-  #internalValues = (i(this, "internalValues"), void 0);
-  constructor(owner, args) {
-    super(owner, args);
-    this.internalValues = [...(args.defaultValue ?? [])];
-  }
   guid = guidFor(this);
-  get isControlled() {
-    return this.args.value !== undefined;
-  }
   get selectedValues() {
-    return this.isControlled ? this.args.value ?? [] : this.internalValues;
+    return this.args.value;
   }
   get orientation() {
     return this.args.orientation ?? 'vertical';
@@ -48,15 +36,7 @@ class CheckboxGroup extends Component {
     return this.selectedValues.includes(value);
   };
   handleCheckboxChange(value, isChecked) {
-    let newValues;
-    if (isChecked) {
-      newValues = [...this.selectedValues, value];
-    } else {
-      newValues = this.selectedValues.filter(v => v !== value);
-    }
-    if (!this.isControlled) {
-      this.internalValues = newValues;
-    }
+    const newValues = isChecked ? [...this.selectedValues, value] : this.selectedValues.filter(v => v !== value);
     this.args.onChange?.(newValues);
   }
   static {

package/dist/form/checkbox.js

@@ -1,32 +1,20 @@
 import "./checkbox.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';
 
 ;
 
 class Checkbox extends Component {
-  static {
-    g(this.prototype, "internalChecked", [tracked]);
-  }
-  #internalChecked = (i(this, "internalChecked"), void 0);
-  constructor(owner, args) {
-    super(owner, args);
-    this.internalChecked = args.defaultChecked ?? false;
-  }
   get size() {
     return this.args.size ?? 'md';
   }
-  get isControlled() {
-    return this.args.isChecked !== undefined;
-  }
   get checked() {
-    return this.isControlled ? this.args.isChecked ?? false : this.internalChecked;
+    return this.args.isChecked;
   }
   get ariaChecked() {
     if (this.args.isIndeterminate) {
@@ -49,9 +37,7 @@ class Checkbox extends Component {
   });
   handleChange(event) {
     const target = event.target;
-    if (!this.isControlled) {
-      this.internalChecked = target.checked;
-    }
+    this.args.onChange?.(target.checked, event);
   }
   static {
     n(this.prototype, "handleChange", [action]);

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-field.js","sources":["../../src/form/combobox-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport ComboBox from './combobox.gts';\nimport type { ComboBoxItems, ComboBoxOption } from './combobox-shared.ts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface ComboBoxFieldSignature {\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 value (controlled). */\n    value?: string | null;\n\n    /** Fires when the selection changes. */\n    onChange?: (value: string | null, option: ComboBoxOption | null) => void;\n\n    /** Async search (passed through to ComboBox). */\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. */\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    /** 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 button when a value is 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 for forms. */\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 ComboBoxField extends Component<ComboBoxFieldSignature> {\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 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      @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      <ComboBox\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @items={{@items}}\n        @value={{@value}}\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        @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-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":["ComboBoxField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","ComboBox"],"mappings":";;;;;;AAkGe,MAAMA,sBAAsBC,SAAA,CAAU;EACnD,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,81CAAA,EAyDA;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":"combobox-field.js","sources":["../../src/form/combobox-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport ComboBox from './combobox.gts';\nimport type { ComboBoxItems, ComboBoxOption } from './combobox-shared.ts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface ComboBoxFieldSignature {\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 value. The consumer owns it; pair with `onChange`. */\n    value?: string | null;\n\n    /** Fires when the selection changes. */\n    onChange?: (value: string | null, option: ComboBoxOption | null) => void;\n\n    /** Async search (passed through to ComboBox). */\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. */\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    /** 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 button when a value is 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 for forms. */\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 ComboBoxField extends Component<ComboBoxFieldSignature> {\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 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      @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      <ComboBox\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @items={{@items}}\n        @value={{@value}}\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        @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-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":["ComboBoxField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","ComboBox"],"mappings":";;;;;;AAkGe,MAAMA,sBAAsBC,SAAA,CAAU;EACnD,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,81CAAA,EAyDA;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-field.js

@@ -23,7 +23,7 @@ class DatePickerField 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  <DatePicker @id={{ctrl.id}} @name={{@name}} @value={{@value}} @defaultValue={{@defaultValue}} @placeholder={{@placeholder}} @format={{@format}} @minDate={{@minDate}} @maxDate={{@maxDate}} @disabledDates={{@disabledDates}} @disabledDaysOfWeek={{@disabledDaysOfWeek}} @weekStartsOn={{@weekStartsOn}} @showOutsideDays={{@showOutsideDays}} @showToday={{@showToday}} @allowTextInput={{@allowTextInput}} @closeOnSelect={{@closeOnSelect}} @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-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  <DatePicker @id={{ctrl.id}} @name={{@name}} @value={{@value}} @placeholder={{@placeholder}} @format={{@format}} @minDate={{@minDate}} @maxDate={{@maxDate}} @disabledDates={{@disabledDates}} @disabledDaysOfWeek={{@disabledDaysOfWeek}} @weekStartsOn={{@weekStartsOn}} @showOutsideDays={{@showOutsideDays}} @showToday={{@showToday}} @allowTextInput={{@allowTextInput}} @closeOnSelect={{@closeOnSelect}} @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-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-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,