@visitwonders/assembly 0.1.0 → 0.3.0

package/dist/data/table.css

@@ -1,20 +1,21 @@
+/* src/data/table.css */
 /* ============================================================================
    Table Component Styles
    ============================================================================ */
 
-.table {
+.table_e4aed93fe {
   width: 100%;
   border-collapse: collapse;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-md);
   color: var(--color-text);
   background-color: var(--color-bg-surface);
 }
 
-.table:focus {
+.table_e4aed93fe:focus {
   outline: none;
 }
 
-.table:focus-visible {
+.table_e4aed93fe:focus-visible {
   /* Focus is tracked on individual rows, not the table container */
   outline: none;
 }
@@ -23,7 +24,7 @@
    Caption
    ============================================================================ */
 
-.caption {
+.caption_e4aed93fe {
   padding: var(--spacing-3);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
@@ -36,22 +37,22 @@
    Header
    ============================================================================ */
 
-.thead {
+.thead_e4aed93fe {
   background-color: var(--color-bg-surface);
 }
 
-.table[data-sticky-header="true"] .thead {
+.table_e4aed93fe[data-sticky-header="true"] .thead_e4aed93fe {
   position: sticky;
   top: 0;
   z-index: 1;
   background-color: var(--color-bg-surface);
 }
 
-.header-row {
+.header-row_e4aed93fe {
   border-bottom: var(--border-width-1) solid var(--color-border);
 }
 
-.header-cell {
+.header-cell_e4aed93fe {
   padding: var(--spacing-3) var(--spacing-4);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-secondary);
@@ -60,30 +61,30 @@
   vertical-align: middle;
 }
 
-.table[data-compact="true"] .header-cell {
+.table_e4aed93fe[data-compact="true"] .header-cell_e4aed93fe {
   padding: var(--spacing-2) var(--spacing-3);
 }
 
-.header-cell[data-align="center"] {
+.header-cell_e4aed93fe[data-align="center"] {
   text-align: center;
 }
 
-.header-cell[data-align="right"] {
+.header-cell_e4aed93fe[data-align="right"] {
   text-align: right;
 }
 
-.header-cell[data-sortable="true"] {
+.header-cell_e4aed93fe[data-sortable="true"] {
   padding: 0;
   cursor: pointer;
   user-select: none;
 }
 
-.header-cell[data-sortable="true"]:hover {
+.header-cell_e4aed93fe[data-sortable="true"]:hover {
   color: var(--color-text);
   background-color: var(--color-bg-hover-subtle);
 }
 
-.header-cell[data-sorted="true"] {
+.header-cell_e4aed93fe[data-sorted="true"] {
   color: var(--color-text);
 }
 
@@ -91,7 +92,7 @@
    Sort Button
    ============================================================================ */
 
-.sort-button {
+.sort-button_e4aed93fe {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -107,20 +108,20 @@
   text-align: inherit;
 }
 
-.table[data-compact="true"] .sort-button {
+.table_e4aed93fe[data-compact="true"] .sort-button_e4aed93fe {
   padding: var(--spacing-2) var(--spacing-3);
 }
 
-.sort-button:focus-visible {
+.sort-button_e4aed93fe:focus-visible {
   outline: 2px solid var(--color-border-focus);
   outline-offset: -2px;
 }
 
-.header-text {
+.header-text_e4aed93fe {
   display: inline;
 }
 
-.sort-icon {
+.sort-icon_e4aed93fe {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -128,16 +129,16 @@
   height: var(--spacing-4);
 }
 
-.sort-icon .icon {
+.sort-icon_e4aed93fe .icon_e4aed93fe {
   width: var(--spacing-3);
   height: var(--spacing-3);
 }
 
-.sort-icon .icon-unsorted {
+.sort-icon_e4aed93fe .icon-unsorted_e4aed93fe {
   opacity: 0.4;
 }
 
-.header-cell[data-sortable="true"]:hover .icon-unsorted {
+.header-cell_e4aed93fe[data-sortable="true"]:hover .icon-unsorted_e4aed93fe {
   opacity: 0.7;
 }
 
@@ -145,46 +146,46 @@
    Body
    ============================================================================ */
 
-.tbody {
+.tbody_e4aed93fe {
   background-color: var(--color-bg-surface);
 }
 
-.row {
-  border-bottom: var(--border-width-1) solid var(--color-border);
+.row_e4aed93fe {
+  border-bottom: var(--border-width-1) solid var(--color-border-subtle);
   transition: background-color 0.1s ease;
 }
 
-.row:last-child {
+.row_e4aed93fe:last-child {
   border-bottom: none;
 }
 
-.row:hover {
+.row_e4aed93fe:hover {
   background-color: var(--color-bg-hover-subtle);
 }
 
-.row[data-disabled="true"] {
+.row_e4aed93fe[data-disabled="true"] {
   opacity: 0.5;
   pointer-events: none;
 }
 
-.row[data-disabled="true"]:hover {
+.row_e4aed93fe[data-disabled="true"]:hover {
   background-color: transparent;
 }
 
-.row[data-selected="true"] {
+.row_e4aed93fe[data-selected="true"] {
   background-color: var(--color-bg-fill-accent-subtle);
 }
 
-.row[data-selected="true"]:hover {
+.row_e4aed93fe[data-selected="true"]:hover {
   background-color: var(--color-bg-fill-accent-subtle-hover);
 }
 
-.row[data-focused="true"] {
+.row_e4aed93fe[data-focused="true"] {
   outline: 2px solid var(--color-border-focus);
   outline-offset: -2px;
 }
 
-.row[data-clickable="true"] {
+.row_e4aed93fe[data-clickable="true"] {
   cursor: pointer;
 }
 
@@ -192,24 +193,24 @@
    Cells
    ============================================================================ */
 
-.cell {
+.cell_e4aed93fe {
   padding: var(--spacing-3) var(--spacing-4);
   vertical-align: middle;
 }
 
-.table[data-compact="true"] .cell {
+.table_e4aed93fe[data-compact="true"] .cell_e4aed93fe {
   padding: var(--spacing-2) var(--spacing-3);
 }
 
-.cell[data-align="center"] {
+.cell_e4aed93fe[data-align="center"] {
   text-align: center;
 }
 
-.cell[data-align="right"] {
+.cell_e4aed93fe[data-align="right"] {
   text-align: right;
 }
 
-.checkbox-cell {
+.checkbox-cell_e4aed93fe {
   width: var(--spacing-10);
   padding-right: 0;
 }
@@ -218,8 +219,8 @@
    Bordered Variant
    ============================================================================ */
 
-.table[data-bordered="true"] .cell,
-.table[data-bordered="true"] .header-cell {
+.table_e4aed93fe[data-bordered="true"] .cell_e4aed93fe,
+.table_e4aed93fe[data-bordered="true"] .header-cell_e4aed93fe {
   border: var(--border-width-1) solid var(--color-border);
 }
 
@@ -227,15 +228,15 @@
    Striped Variant
    ============================================================================ */
 
-.table[data-striped="true"] .row:nth-child(odd) {
+.table_e4aed93fe[data-striped="true"] .row_e4aed93fe:nth-child(odd.e4aed93fe) {
   background-color: var(--color-bg-surface-sunken);
 }
 
-.table[data-striped="true"] .row:nth-child(odd):hover {
+.table_e4aed93fe[data-striped="true"] .row_e4aed93fe:nth-child(odd.e4aed93fe):hover {
   background-color: var(--color-bg-hover-subtle);
 }
 
-.table[data-striped="true"] .row[data-selected="true"]:nth-child(odd) {
+.table_e4aed93fe[data-striped="true"] .row_e4aed93fe[data-selected="true"]:nth-child(odd.e4aed93fe) {
   background-color: var(--color-bg-fill-accent-subtle);
 }
 
@@ -243,15 +244,15 @@
    Empty State
    ============================================================================ */
 
-.empty-row {
+.empty-row_e4aed93fe {
   background-color: transparent;
 }
 
-.empty-row:hover {
+.empty-row_e4aed93fe:hover {
   background-color: transparent;
 }
 
-.empty-cell {
+.empty-cell_e4aed93fe {
   padding: var(--spacing-8) var(--spacing-4);
   text-align: center;
   color: var(--color-text-secondary);
@@ -261,10 +262,10 @@
    Loading State
    ============================================================================ */
 
-.skeleton-row {
+.skeleton-row_e4aed93fe {
   pointer-events: none;
 }
 
-.table[data-loading="true"] {
+.table_e4aed93fe[data-loading="true"] {
   pointer-events: none;
 }

package/dist/data/table.js

@@ -440,7 +440,7 @@ class Table extends Component {
   // Template
   // ============================================================================
   static {
-    setComponentTemplate(precompileTemplate("<table class=\"table\" 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\" data-test-table-caption>\n      {{@caption}}\n    </caption>\n  {{/if}}\n\n  <thead class=\"thead\" data-test-table-header>\n    <tr class=\"header-row\">\n      {{#if @isSelectable}}\n        <th class=\"header-cell checkbox-cell\" 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\" 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\" {{on \"click\" (fn this.handleSort column)}} data-test-table-sort-button>\n              <span class=\"header-text\">{{column.header}}</span>\n              <span class=\"sort-icon\" 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\">\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\">\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 icon-unsorted\">\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\">{{column.header}}</span>\n          {{/if}}\n        </th>\n      {{/each}}\n    </tr>\n  </thead>\n\n  <tbody class=\"tbody\" 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 skeleton-row\" data-test-table-skeleton-row>\n            {{#if @isSelectable}}\n              <td class=\"cell checkbox-cell\">\n                <Skeleton @width={{16}} @height={{16}} @radius=\"sm\" />\n              </td>\n            {{/if}}\n            {{#each this.visibleColumns as |column|}}\n              <td class=\"cell\" 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\">\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\" data-test-table-empty>\n          <td class=\"empty-cell\" 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\" 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 checkbox-cell\" 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\" 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-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/checkbox.css

@@ -147,17 +147,17 @@
 .label_eed179744 {
   font-size: var(--font-size-md);
   color: var(--color-text);
-  line-height: var(--spacing-5);
+  line-height: var(--line-height-20);
 }
 
 .wrapper_eed179744[data-size="sm"] .label_eed179744 {
   font-size: var(--font-size-sm);
-  line-height: var(--spacing-4);
+  line-height: var(--line-height-16);
 }
 
 .wrapper_eed179744[data-size="lg"] .label_eed179744 {
   font-size: var(--font-size-lg);
-  line-height: var(--spacing-6);
+  line-height: var(--line-height-24);
 }
 
 .label_eed179744[data-visually-hidden="true"] {

package/dist/form/control-css-02e93d930aecac651d5c69dc10a83504.css

@@ -0,0 +1,36 @@
+/* <inline>/src/form/control-css-02e93d930aecac651d5c69dc10a83504.css */
+
+  .assembly-control_e529e8199 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    width: 100%;
+  }
+
+  .assembly-control_e529e8199[data-orientation="horizontal"] {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--spacing-6);
+  }
+
+  .assembly-control_e529e8199[data-orientation="horizontal"] .label {
+    flex-shrink: 0;
+    min-width: 120px;
+    padding-top: var(--spacing-2);
+  }
+
+  .assembly-control_e529e8199[data-max-width="xs"] {
+    max-width: 120px;
+  }
+  .assembly-control_e529e8199[data-max-width="sm"] {
+    max-width: 200px;
+  }
+  .assembly-control_e529e8199[data-max-width="md"] {
+    max-width: 320px;
+  }
+  .assembly-control_e529e8199[data-max-width="lg"] {
+    max-width: 480px;
+  }
+  .assembly-control_e529e8199[data-max-width="xl"] {
+    max-width: 640px;
+  }

package/dist/form/control.js

@@ -1,4 +1,4 @@
-import "./control-css-6c81caf37fd813b36033091d5340bc70.css"
+import "./control-css-02e93d930aecac651d5c69dc10a83504.css"
 import Component from '@glimmer/component';
 import { guidFor } from '@ember/object/internals';
 import { hash } from '@ember/helper';
@@ -39,7 +39,7 @@ class Control extends Component {
     return this.args.isReadOnly ?? false;
   }
   static {
-    setComponentTemplate(precompileTemplate("\n\n<div class=\"assembly-control_e529e8199\" data-orientation={{this.orientation}} data-invalid={{if this.isInvalid \"true\" \"false\"}} data-disabled={{if this.isDisabled \"true\" \"false\"}} data-required={{if this.isRequired \"true\" \"false\"}} data-readonly={{if this.isReadOnly \"true\" \"false\"}} data-test-form-control ...attributes>\n  {{yield (hash Label=(component Label for=this.id isRequired=this.isRequired isDisabled=this.isDisabled) Input=(component Input id=this.id isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly isInvalid=this.isInvalid aria-describedby=this.ariaDescribedBy) Textarea=(component Textarea id=this.id isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly isInvalid=this.isInvalid aria-describedby=this.ariaDescribedBy) HelpText=(component HelpText id=this.helpTextId) ErrorMessage=(component ErrorMessage id=this.errorMessageId isInvalid=this.isInvalid) id=this.id isInvalid=this.isInvalid isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly)}}\n</div>", {
+    setComponentTemplate(precompileTemplate("\n\n<div class=\"assembly-control_e529e8199\" data-orientation={{this.orientation}} data-invalid={{if this.isInvalid \"true\" \"false\"}} data-disabled={{if this.isDisabled \"true\" \"false\"}} data-required={{if this.isRequired \"true\" \"false\"}} data-readonly={{if this.isReadOnly \"true\" \"false\"}} data-test-form-control ...attributes>\n  {{yield (hash Label=(component Label for=this.id isRequired=this.isRequired isDisabled=this.isDisabled info=@labelInfo) Input=(component Input id=this.id isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly isInvalid=this.isInvalid aria-describedby=this.ariaDescribedBy) Textarea=(component Textarea id=this.id isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly isInvalid=this.isInvalid aria-describedby=this.ariaDescribedBy) HelpText=(component HelpText id=this.helpTextId) ErrorMessage=(component ErrorMessage id=this.errorMessageId isInvalid=this.isInvalid) id=this.id isInvalid=this.isInvalid isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly)}}\n</div>", {
       strictMode: true,
       scope: () => ({
         hash,

package/dist/form/country-select-field.js

@@ -23,7 +23,7 @@ class CountrySelectField extends Component {
     return parts.length > 0 ? parts.join(' ') : undefined;
   };
   static {
-    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} ...attributes as |ctrl|>\n  <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </ctrl.Label>\n\n  <CountrySelect @id={{ctrl.id}} @name={{@name}} @value={{@value}} @placeholder={{@placeholder}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @showFlag={{@showFlag}} @showDialCode={{@showDialCode}} @displayDialCode={{@displayDialCode}} @suggestedCountries={{@suggestedCountries}} @prioritizeByLocale={{@prioritizeByLocale}} @includeOnly={{@includeOnly}} @exclude={{@exclude}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} data-test-country-select-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}} @labelInfo={{@labelInfo}} ...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  <CountrySelect @id={{ctrl.id}} @name={{@name}} @value={{@value}} @placeholder={{@placeholder}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @showFlag={{@showFlag}} @showDialCode={{@showDialCode}} @displayDialCode={{@displayDialCode}} @suggestedCountries={{@suggestedCountries}} @prioritizeByLocale={{@prioritizeByLocale}} @includeOnly={{@includeOnly}} @exclude={{@exclude}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} data-test-country-select-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/country-select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"country-select-field.js","sources":["../../src/form/country-select-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport CountrySelect from './country-select.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface CountrySelectFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected value (ISO country code) */\n    value?: string;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Help text displayed below the select */\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    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name for forms */\n    name?: string;\n\n    /** Show flag emoji in options and trigger (default: true) */\n    showFlag?: boolean;\n\n    /** Show dial code in options */\n    showDialCode?: boolean;\n\n    /** Show dial code in the selected value display */\n    displayDialCode?: boolean;\n\n    /** ISO codes to show at top as suggested */\n    suggestedCountries?: string[];\n\n    /** Auto-suggest based on browser locale (default: false) */\n    prioritizeByLocale?: boolean;\n\n    /** Only show these countries (ISO codes) */\n    includeOnly?: string[];\n\n    /** Hide these countries (ISO codes) */\n    exclude?: string[];\n\n    /** Change event handler */\n    onChange?: (countryCode: string | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n  };\n}\n\nexport default class CountrySelectField extends Component<CountrySelectFieldSignature> {\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      ...attributes\n      as |ctrl|\n    >\n      <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n        {{@label}}\n      </ctrl.Label>\n\n      <CountrySelect\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @placeholder={{@placeholder}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @showFlag={{@showFlag}}\n        @showDialCode={{@showDialCode}}\n        @displayDialCode={{@displayDialCode}}\n        @suggestedCountries={{@suggestedCountries}}\n        @prioritizeByLocale={{@prioritizeByLocale}}\n        @includeOnly={{@includeOnly}}\n        @exclude={{@exclude}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        data-test-country-select-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":["CountrySelectField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","CountrySelect"],"mappings":";;;;;;AAqEe,MAAMA,2BAA2BC,SAAA,CAAU;EACxD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;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,u8BAAA,EA0CA;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":"country-select-field.js","sources":["../../src/form/country-select-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport CountrySelect from './country-select.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface CountrySelectFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected value (ISO country code) */\n    value?: string;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Help text displayed below the select */\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    /** Info tooltip text shown next to the label */\n    labelInfo?: string;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name for forms */\n    name?: string;\n\n    /** Show flag emoji in options and trigger (default: true) */\n    showFlag?: boolean;\n\n    /** Show dial code in options */\n    showDialCode?: boolean;\n\n    /** Show dial code in the selected value display */\n    displayDialCode?: boolean;\n\n    /** ISO codes to show at top as suggested */\n    suggestedCountries?: string[];\n\n    /** Auto-suggest based on browser locale (default: false) */\n    prioritizeByLocale?: boolean;\n\n    /** Only show these countries (ISO codes) */\n    includeOnly?: string[];\n\n    /** Hide these countries (ISO codes) */\n    exclude?: string[];\n\n    /** Change event handler */\n    onChange?: (countryCode: string | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n  };\n  Blocks: {\n    /** Rich tooltip content shown next to the label */\n    info: [];\n  };\n}\n\nexport default class CountrySelectField extends Component<CountrySelectFieldSignature> {\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      @labelInfo={{@labelInfo}}\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      <CountrySelect\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @placeholder={{@placeholder}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @showFlag={{@showFlag}}\n        @showDialCode={{@showDialCode}}\n        @displayDialCode={{@displayDialCode}}\n        @suggestedCountries={{@suggestedCountries}}\n        @prioritizeByLocale={{@prioritizeByLocale}}\n        @includeOnly={{@includeOnly}}\n        @exclude={{@exclude}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        data-test-country-select-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":["CountrySelectField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","CountrySelect"],"mappings":";;;;;;AA4Ee,MAAMA,2BAA2BC,SAAA,CAAU;EACxD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;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,+rCAAA,EAkDA;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/country-select.css

@@ -229,7 +229,7 @@
   padding: var(--spacing-2) var(--spacing-3);
   border-radius: var(--radius-sm);
   font-size: var(--font-size-13);
-  line-height: var(--line-height-1-25);
+  line-height: var(--line-height-tight);
   color: var(--color-text);
   cursor: pointer;
   user-select: none;

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}} ...attributes as |ctrl|>\n  <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </ctrl.Label>\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}} ...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>", {
       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    /** 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}\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      ...attributes\n      as |ctrl|\n    >\n      <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n        {{@label}}\n      </ctrl.Label>\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":";;;;;;AA6Fe,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,qrCAAA,EAmDA;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    /** 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    /** 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      ...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":";;;;;;AAoGe,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,66CAAA,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-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}} ...attributes as |ctrl|>\n  <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </ctrl.Label>\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}} ...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>", {
       strictMode: true,
       scope: () => ({
         Control,

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

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

package/dist/form/field.css

@@ -10,7 +10,7 @@
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--color-text);
-  line-height: 1.25rem;
+  line-height: var(--line-height-normal);
 }
 
 .required_e77bb2bf4 {
@@ -28,14 +28,14 @@
 .helper-text_e77bb2bf4 {
   margin: 0;
   font-size: 0.8125rem;
-  line-height: 1.125rem;
+  line-height: var(--line-height-tight);
   color: var(--color-text-secondary);
 }
 
 .error-text_e77bb2bf4 {
   margin: 0;
   font-size: 0.8125rem;
-  line-height: 1.125rem;
+  line-height: var(--line-height-tight);
   color: var(--red-500);
 }