@visitwonders/assembly 0.16.1 → 0.18.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.css

@@ -9,6 +9,19 @@
   font-size: var(--font-size-md);
   color: var(--color-text);
   background-color: var(--color-bg-surface);
+
+  /* Edge inset: how far the first/last column sit from the table's edges.
+     Driven by @paddingInline; defaults to today's 16px. Only the outer side
+     of the edge columns reads it, so inter-column gutters never change. */
+  --_table-edge-inset: var(--spacing-inset-md);
+}
+
+.table_e4aed93fe[data-padding-inline="sm"] {
+  --_table-edge-inset: var(--spacing-inset-sm);
+}
+
+.table_e4aed93fe[data-padding-inline="lg"] {
+  --_table-edge-inset: var(--spacing-inset-lg);
 }
 
 .table_e4aed93fe:focus {
@@ -53,7 +66,7 @@
 }
 
 .header-cell_e4aed93fe {
-  padding: var(--spacing-3) var(--spacing-4);
+  padding: var(--spacing-inset-sm) var(--spacing-inset-md);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-secondary);
   text-align: left;
@@ -98,7 +111,7 @@
   justify-content: space-between;
   gap: var(--spacing-1);
   width: 100%;
-  padding: var(--spacing-3) var(--spacing-4);
+  padding: var(--spacing-inset-sm) var(--spacing-inset-md);
   border: none;
   background: none;
   font: inherit;
@@ -194,7 +207,7 @@
    ============================================================================ */
 
 .cell_e4aed93fe {
-  padding: var(--spacing-3) var(--spacing-4);
+  padding: var(--spacing-inset-sm) var(--spacing-inset-md);
   vertical-align: middle;
 }
 
@@ -215,6 +228,41 @@
   padding-right: 0;
 }
 
+/* ============================================================================
+   Edge Inset (@paddingInline)
+   ============================================================================
+   The inset lands on the outer side of the first and last columns only, so
+   inter-column gutters and row-background bleed stay put. It composes with
+   @isCompact: density owns the inner padding, this owns the outer edge.
+
+   A sortable header cell is zeroed and its padding lives on the sort button.
+   So on a sortable edge column the inset lands on the button, not the zeroed
+   cell. Otherwise its label would not line up with the body cells below. */
+
+.table_e4aed93fe .header-row_e4aed93fe > .header-cell_e4aed93fe:first-child:not([data-sortable="true"]),
+.table_e4aed93fe .row_e4aed93fe > .cell_e4aed93fe:first-child {
+  padding-inline-start: var(--_table-edge-inset);
+}
+
+.table_e4aed93fe .header-row_e4aed93fe > .header-cell_e4aed93fe:last-child:not([data-sortable="true"]),
+.table_e4aed93fe .row_e4aed93fe > .cell_e4aed93fe:last-child {
+  padding-inline-end: var(--_table-edge-inset);
+}
+
+.table_e4aed93fe
+  .header-row_e4aed93fe
+  > .header-cell_e4aed93fe:first-child[data-sortable="true"]
+  .sort-button_e4aed93fe {
+  padding-inline-start: var(--_table-edge-inset);
+}
+
+.table_e4aed93fe
+  .header-row_e4aed93fe
+  > .header-cell_e4aed93fe:last-child[data-sortable="true"]
+  .sort-button_e4aed93fe {
+  padding-inline-end: var(--_table-edge-inset);
+}
+
 /* ============================================================================
    Bordered Variant
    ============================================================================ */

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,23 @@ class Table extends Component {
   get visibleColumns() {
     return this.args.columns.filter(col => !col.hidden);
   }
-  get isControlledSelection() {
-    return this.args.selectedIds !== undefined;
+  // Edge inset on the spacing-inset scale. Always resolves to a value so the
+  // attribute is present on every render; `md` is today's default.
+  get paddingInline() {
+    return this.args.paddingInline ?? 'md';
   }
   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 +180,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;
@@ -440,7 +383,7 @@ class Table extends Component {
   // Template
   // ============================================================================
   static {
-    setComponentTemplate(precompileTemplate("<table class=\"table_e4aed93fe\" data-sticky-header={{if @hasStickyHeader \"true\"}} data-striped={{if @isStriped \"true\"}} data-bordered={{if @isBordered \"true\"}} data-compact={{if @isCompact \"true\"}} data-loading={{if @isLoading \"true\"}} data-test-table tabindex=\"0\" {{this.setupRef}} {{!-- template-lint-disable no-pointer-down-event-binding --}} {{on \"mousedown\" this.handleMouseDown}} {{on \"keydown\" this.handleKeyDown}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} ...attributes>\n  {{#if @caption}}\n    <caption class=\"caption_e4aed93fe\" data-test-table-caption>\n      {{@caption}}\n    </caption>\n  {{/if}}\n\n  <thead class=\"thead_e4aed93fe\" data-test-table-header>\n    <tr class=\"header-row_e4aed93fe\">\n      {{#if @isSelectable}}\n        <th class=\"header-cell_e4aed93fe checkbox-cell_e4aed93fe\" data-test-table-header-checkbox>\n          <Checkbox @isChecked={{this.allRowsSelected}} @isIndeterminate={{this.someRowsSelected}} @isLabelHidden={{true}} @label=\"Select all rows\" @size=\"sm\" data-table-checkbox {{on \"change\" this.handleSelectAll}} />\n        </th>\n      {{/if}}\n\n      {{#each this.visibleColumns as |column|}}\n        <th class=\"header-cell_e4aed93fe\" data-align={{column.align}} data-sortable={{if (this.isColumnSortable column) \"true\"}} data-sorted={{if (this.getColumnSortDirection column) \"true\"}} data-sort-direction={{this.getColumnSortDirection column}} aria-sort={{this.getAriaSortValue column}} style={{if column.width (concat \"width:\" column.width \";\")}} data-test-table-header-cell data-test-column-id={{column.id}}>\n          {{#if (this.isColumnSortable column)}}\n            <button type=\"button\" class=\"sort-button_e4aed93fe\" {{on \"click\" (fn this.handleSort column)}} data-test-table-sort-button>\n              <span class=\"header-text_e4aed93fe\">{{column.header}}</span>\n              <span class=\"sort-icon_e4aed93fe\" aria-hidden=\"true\">\n                {{#if (this.getColumnSortDirection column)}}\n                  {{#if (eq (this.getColumnSortDirection column) \"asc\")}}\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon_e4aed93fe\">\n                      <path d=\"M4 10l4-4 4 4\" />\n                    </svg>\n                  {{else}}\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon_e4aed93fe\">\n                      <path d=\"M4 6l4 4 4-4\" />\n                    </svg>\n                  {{/if}}\n                {{else}}\n                  <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon_e4aed93fe icon-unsorted_e4aed93fe\">\n                    <path d=\"M4 6l4-3 4 3M4 10l4 3 4-3\" />\n                  </svg>\n                {{/if}}\n              </span>\n            </button>\n          {{else}}\n            <span class=\"header-text_e4aed93fe\">{{column.header}}</span>\n          {{/if}}\n        </th>\n      {{/each}}\n    </tr>\n  </thead>\n\n  <tbody class=\"tbody_e4aed93fe\" data-test-table-body>\n    {{#if @isLoading}}\n      {{#if (has-block \"loading\")}}\n        {{yield to=\"loading\"}}\n      {{else}}\n        {{!-- template-lint-disable no-unused-block-params --}}\n        {{#each (repeat this.loadingRowCount)}}\n          <tr class=\"row_e4aed93fe skeleton-row_e4aed93fe\" data-test-table-skeleton-row>\n            {{#if @isSelectable}}\n              <td class=\"cell_e4aed93fe checkbox-cell_e4aed93fe\">\n                <Skeleton @width={{16}} @height={{16}} @radius=\"sm\" />\n              </td>\n            {{/if}}\n            {{#each this.visibleColumns as |column|}}\n              <td class=\"cell_e4aed93fe\" data-align={{column.align}}>\n                <Skeleton @width=\"70%\" @height={{16}} />\n              </td>\n            {{/each}}\n          </tr>\n        {{/each}}\n      {{/if}}\n    {{else if this.isEmpty}}\n      {{#if (has-block \"empty\")}}\n        <tr class=\"empty-row_e4aed93fe\">\n          <td colspan={{if @isSelectable (add (len this.visibleColumns) 1) (len this.visibleColumns)}}>\n            {{yield to=\"empty\"}}\n          </td>\n        </tr>\n      {{else}}\n        <tr class=\"empty-row_e4aed93fe\" data-test-table-empty>\n          <td class=\"empty-cell_e4aed93fe\" colspan={{if @isSelectable (add (len this.visibleColumns) 1) (len this.visibleColumns)}}>\n            {{#if @emptyMessage}}\n              {{@emptyMessage}}\n            {{else}}\n              No data available\n            {{/if}}\n          </td>\n        </tr>\n      {{/if}}\n    {{else}}\n      {{#each this.displayData as |row rowIndex|}}\n        {{!-- template-lint-disable no-invalid-interactive --}}\n        <tr id={{this.getRowElementId row}} class=\"row_e4aed93fe\" data-selected={{if (this.isRowSelected row) \"true\" \"false\"}} data-focused={{if (this.isRowFocused rowIndex) \"true\" \"false\"}} data-disabled={{if (@isRowDisabled row) \"true\" \"false\"}} data-clickable={{if @onRowClick \"true\"}} aria-selected={{if @isSelectable (if (this.isRowSelected row) \"true\" \"false\")}} data-test-table-row data-test-row-id={{this.getRowId row}} {{on \"click\" (fn this.handleRowClick row)}}>\n          {{#if @isSelectable}}\n            <td class=\"cell_e4aed93fe checkbox-cell_e4aed93fe\" data-test-table-row-checkbox>\n              <Checkbox @isChecked={{this.isRowSelected row}} @isDisabled={{@isRowDisabled row}} @isLabelHidden={{true}} @label=\"Select row\" @size=\"sm\" data-table-checkbox {{on \"click\" (fn this.handleRowSelect row)}} />\n            </td>\n          {{/if}}\n\n          {{#each this.visibleColumns as |column|}}\n            <td class=\"cell_e4aed93fe\" data-align={{column.align}} data-test-table-cell data-test-column-id={{column.id}}>\n              {{#if (has-block \"cell\")}}\n                {{yield (this.getCellContext row column rowIndex) to=\"cell\"}}\n              {{else}}\n                {{this.formatCellValue row column}}\n              {{/if}}\n            </td>\n          {{/each}}\n        </tr>\n      {{/each}}\n    {{/if}}\n  </tbody>\n</table>", {
+    setComponentTemplate(precompileTemplate("<table class=\"table_e4aed93fe\" data-sticky-header={{if @hasStickyHeader \"true\"}} data-striped={{if @isStriped \"true\"}} data-bordered={{if @isBordered \"true\"}} data-compact={{if @isCompact \"true\"}} data-padding-inline={{this.paddingInline}} data-loading={{if @isLoading \"true\"}} data-test-table tabindex=\"0\" {{this.setupRef}} {{!-- template-lint-disable no-pointer-down-event-binding --}} {{on \"mousedown\" this.handleMouseDown}} {{on \"keydown\" this.handleKeyDown}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} ...attributes>\n  {{#if @caption}}\n    <caption class=\"caption_e4aed93fe\" data-test-table-caption>\n      {{@caption}}\n    </caption>\n  {{/if}}\n\n  <thead class=\"thead_e4aed93fe\" data-test-table-header>\n    <tr class=\"header-row_e4aed93fe\">\n      {{#if @isSelectable}}\n        <th class=\"header-cell_e4aed93fe checkbox-cell_e4aed93fe\" data-test-table-header-checkbox>\n          <Checkbox @isChecked={{this.allRowsSelected}} @isIndeterminate={{this.someRowsSelected}} @isLabelHidden={{true}} @label=\"Select all rows\" @size=\"sm\" data-table-checkbox {{on \"change\" this.handleSelectAll}} />\n        </th>\n      {{/if}}\n\n      {{#each this.visibleColumns as |column|}}\n        <th class=\"header-cell_e4aed93fe\" data-align={{column.align}} data-sortable={{if (this.isColumnSortable column) \"true\"}} data-sorted={{if (this.getColumnSortDirection column) \"true\"}} data-sort-direction={{this.getColumnSortDirection column}} aria-sort={{this.getAriaSortValue column}} style={{if column.width (concat \"width:\" column.width \";\")}} data-test-table-header-cell data-test-column-id={{column.id}}>\n          {{#if (this.isColumnSortable column)}}\n            <button type=\"button\" class=\"sort-button_e4aed93fe\" {{on \"click\" (fn this.handleSort column)}} data-test-table-sort-button>\n              <span class=\"header-text_e4aed93fe\">{{column.header}}</span>\n              <span class=\"sort-icon_e4aed93fe\" aria-hidden=\"true\">\n                {{#if (this.getColumnSortDirection column)}}\n                  {{#if (eq (this.getColumnSortDirection column) \"asc\")}}\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon_e4aed93fe\">\n                      <path d=\"M4 10l4-4 4 4\" />\n                    </svg>\n                  {{else}}\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon_e4aed93fe\">\n                      <path d=\"M4 6l4 4 4-4\" />\n                    </svg>\n                  {{/if}}\n                {{else}}\n                  <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon_e4aed93fe icon-unsorted_e4aed93fe\">\n                    <path d=\"M4 6l4-3 4 3M4 10l4 3 4-3\" />\n                  </svg>\n                {{/if}}\n              </span>\n            </button>\n          {{else}}\n            <span class=\"header-text_e4aed93fe\">{{column.header}}</span>\n          {{/if}}\n        </th>\n      {{/each}}\n    </tr>\n  </thead>\n\n  <tbody class=\"tbody_e4aed93fe\" data-test-table-body>\n    {{#if @isLoading}}\n      {{#if (has-block \"loading\")}}\n        {{yield to=\"loading\"}}\n      {{else}}\n        {{!-- template-lint-disable no-unused-block-params --}}\n        {{#each (repeat this.loadingRowCount)}}\n          <tr class=\"row_e4aed93fe skeleton-row_e4aed93fe\" data-test-table-skeleton-row>\n            {{#if @isSelectable}}\n              <td class=\"cell_e4aed93fe checkbox-cell_e4aed93fe\">\n                <Skeleton @width={{16}} @height={{16}} @radius=\"sm\" />\n              </td>\n            {{/if}}\n            {{#each this.visibleColumns as |column|}}\n              <td class=\"cell_e4aed93fe\" data-align={{column.align}}>\n                <Skeleton @width=\"70%\" @height={{16}} />\n              </td>\n            {{/each}}\n          </tr>\n        {{/each}}\n      {{/if}}\n    {{else if this.isEmpty}}\n      {{#if (has-block \"empty\")}}\n        <tr class=\"empty-row_e4aed93fe\">\n          <td colspan={{if @isSelectable (add (len this.visibleColumns) 1) (len this.visibleColumns)}}>\n            {{yield to=\"empty\"}}\n          </td>\n        </tr>\n      {{else}}\n        <tr class=\"empty-row_e4aed93fe\" data-test-table-empty>\n          <td class=\"empty-cell_e4aed93fe\" colspan={{if @isSelectable (add (len this.visibleColumns) 1) (len this.visibleColumns)}}>\n            {{#if @emptyMessage}}\n              {{@emptyMessage}}\n            {{else}}\n              No data available\n            {{/if}}\n          </td>\n        </tr>\n      {{/if}}\n    {{else}}\n      {{#each this.displayData as |row rowIndex|}}\n        {{!-- template-lint-disable no-invalid-interactive --}}\n        <tr id={{this.getRowElementId row}} class=\"row_e4aed93fe\" data-selected={{if (this.isRowSelected row) \"true\" \"false\"}} data-focused={{if (this.isRowFocused rowIndex) \"true\" \"false\"}} data-disabled={{if (@isRowDisabled row) \"true\" \"false\"}} data-clickable={{if @onRowClick \"true\"}} aria-selected={{if @isSelectable (if (this.isRowSelected row) \"true\" \"false\")}} data-test-table-row data-test-row-id={{this.getRowId row}} {{on \"click\" (fn this.handleRowClick row)}}>\n          {{#if @isSelectable}}\n            <td class=\"cell_e4aed93fe checkbox-cell_e4aed93fe\" data-test-table-row-checkbox>\n              <Checkbox @isChecked={{this.isRowSelected row}} @isDisabled={{@isRowDisabled row}} @isLabelHidden={{true}} @label=\"Select row\" @size=\"sm\" data-table-checkbox {{on \"click\" (fn this.handleRowSelect row)}} />\n            </td>\n          {{/if}}\n\n          {{#each this.visibleColumns as |column|}}\n            <td class=\"cell_e4aed93fe\" data-align={{column.align}} data-test-table-cell data-test-column-id={{column.id}}>\n              {{#if (has-block \"cell\")}}\n                {{yield (this.getCellContext row column rowIndex) to=\"cell\"}}\n              {{else}}\n                {{this.formatCellValue row column}}\n              {{/if}}\n            </td>\n          {{/each}}\n        </tr>\n      {{/each}}\n    {{/if}}\n  </tbody>\n</table>", {
       strictMode: true,
       scope: () => ({
         on,

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,