@magicx-eng/ai-autocomplete-angular 0.12.0 → 0.13.0

package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs

@@ -1,4 +1,4 @@
-import { WEEKDAY_LABELS as WEEKDAY_LABELS$1, cellIso as cellIso$1, monthLabel as monthLabel$1, cellDay as cellDay$1, isoDate as isoDate$1, optionsGridTemplateColumns, computeOptionsGridLayout, isOptionsGridMobileViewport, buildAttributionUrl, getFooterHint, AIAutocomplete, selectedIsoFromText, getCursorOffset, extractPlainText, renderEditableContent, plainTextLength, setCursorOffset, ModeController, buildSubmitResult as buildSubmitResult$1, withSkippedParams as withSkippedParams$1, formatDate as formatDate$1, parseDate as parseDate$1, parseLooseDate as parseLooseDate$1 } from '@magicx-eng/ai-autocomplete-vanilla';
+import { WEEKDAY_LABELS as WEEKDAY_LABELS$1, cellIso as cellIso$1, monthLabel as monthLabel$1, cellDay as cellDay$1, isoDate as isoDate$1, optionsGridTemplateColumns, planOptionsGrid, isOptionsGridMobileViewport, needsOptionsGridMeasurement, measureOptionsGrid, optionEnterDelayMs, SCROLL_ARROW_LABEL, buildAttributionUrl, attachScrollArrow, getFooterHint, AIAutocomplete, identifiedParamLabel, selectedIsoFromText, getCursorOffset, extractPlainText, renderEditableContent, plainTextLength, setCursorOffset, ModeController, buildSubmitResult as buildSubmitResult$1, withSkippedParams as withSkippedParams$1, formatDate as formatDate$1, parseDate as parseDate$1, parseLooseDate as parseLooseDate$1 } from '@magicx-eng/ai-autocomplete-vanilla';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -50,6 +50,12 @@ class DateGridComponent {
     isToday(option) {
         return cellIso$1(option) === isoDate$1(new Date());
     }
+    /** Before today: rendered dimmed, but every bit as pickable as the rest. */
+    isPast(option) {
+        const iso = cellIso$1(option);
+        // ISO strings order the same way the dates they name do.
+        return iso != null && iso < isoDate$1(new Date());
+    }
     isSelected(option) {
         const iso = cellIso$1(option);
         return iso != null && this.selectedIso != null && iso === this.selectedIso;
@@ -73,10 +79,10 @@ class DateGridComponent {
     }
 }
 DateGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateGridComponent, isStandalone: true, selector: "aia-date-grid", inputs: { options: "options", activeIndex: "activeIndex", listboxId: "listboxId", view: "view", selectedIso: "selectedIso" }, outputs: { select: "select", highlight: "highlight", previousMonth: "previousMonth", nextMonth: "nextMonth" }, ngImport: i0, template: "<div class=\"magicx-aia-datepicker\" data-aia-datepicker=\"\">\n  <div class=\"magicx-aia-datepicker-header\">\n    <!-- tabIndex -1 for the same reason the skip button is: Tab is already\n         bound to walking the dropdown's options. -->\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      class=\"magicx-aia-datepicker-nav\"\n      data-aia-date-prev=\"\"\n      aria-label=\"Previous month\"\n      (mousedown)=\"preventBlur($event)\"\n      (click)=\"previousMonth.emit()\"\n    >\n      &lsaquo;\n    </button>\n    <span class=\"magicx-aia-datepicker-month\" data-aia-date-month=\"\" aria-live=\"polite\">\n      {{ monthLabel }}\n    </span>\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      class=\"magicx-aia-datepicker-nav\"\n      data-aia-date-next=\"\"\n      aria-label=\"Next month\"\n      (mousedown)=\"preventBlur($event)\"\n      (click)=\"nextMonth.emit()\"\n    >\n      &rsaquo;\n    </button>\n  </div>\n\n  <!-- Decorative: each cell announces its own full date, so repeating the\n       column letters to AT adds noise \u2014 and the duplicate T/S would be\n       meaningless read aloud anyway. -->\n  <div class=\"magicx-aia-datepicker-weekdays\" aria-hidden=\"true\">\n    <span class=\"magicx-aia-datepicker-weekday\" *ngFor=\"let label of weekdays\">{{ label }}</span>\n  </div>\n\n  <div class=\"magicx-aia-datepicker-grid\" data-aia-date-grid=\"\">\n    <ng-container *ngFor=\"let option of options; trackBy: trackByCell; let i = index\">\n      <!-- Padding for the days before the 1st / after the last. Non-tappable,\n           so arrow navigation skips it; hidden from AT so the month reads as\n           its own days and nothing else. -->\n      <div\n        *ngIf=\"dayOf(option) === null; else dayCell\"\n        [id]=\"listboxId + '-option-' + i\"\n        role=\"option\"\n        data-aia-option=\"\"\n        data-aia-date-cell=\"\"\n        aria-hidden=\"true\"\n        [attr.aria-selected]=\"false\"\n        tabindex=\"-1\"\n        class=\"magicx-aia-date-cell magicx-aia-date-cell--blank\"\n      ></div>\n\n      <ng-template #dayCell>\n        <div\n          [id]=\"listboxId + '-option-' + i\"\n          role=\"option\"\n          data-aia-option=\"\"\n          data-aia-date-cell=\"\"\n          [attr.aria-selected]=\"i === activeIndex\"\n          [attr.aria-label]=\"option.text\"\n          tabindex=\"0\"\n          class=\"magicx-aia-date-cell magicx-aia-date-cell--day\"\n          [class.magicx-aia-date-cell--highlighted]=\"i === activeIndex\"\n          [class.magicx-aia-date-cell--today]=\"isToday(option)\"\n          [class.magicx-aia-date-cell--selected]=\"isSelected(option)\"\n          [class.magicx-aia-date-cell--pressed]=\"i === pressedIndex\"\n          (click)=\"onSelect(option, i)\"\n          (keydown)=\"onKeyDown($event, option, i)\"\n          (mouseenter)=\"highlight.emit(i)\"\n        >\n          <!-- The cell paints the day number; `option.text` is the full\n               committed value (\"March 23 2026\") and is what AT announces,\n               since that is what selecting it puts in the input. -->\n          <span class=\"magicx-aia-date-cell-number\">{{ dayOf(option) }}</span>\n        </div>\n      </ng-template>\n    </ng-container>\n  </div>\n</div>\n", styles: [".magicx-aia-datepicker{display:flex;flex-direction:column;gap:4px;padding:4px 2px 8px}.magicx-aia-datepicker-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 6px}.magicx-aia-datepicker-month{font-family:inherit;font-size:var(--aia-date-month-font-size, 14px);font-weight:500;line-height:20px;color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.magicx-aia-datepicker-nav{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:16px;line-height:1;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-datepicker-nav:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent)}.magicx-aia-datepicker-weekdays,.magicx-aia-datepicker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.magicx-aia-datepicker-weekday{padding:2px 0;text-align:center;font-family:inherit;font-size:var(--aia-date-weekday-font-size, 11px);font-weight:500;line-height:16px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));opacity:.7}.magicx-aia-date-cell{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--aia-date-row-height, 40px);font-family:inherit;font-size:var(--aia-date-cell-font-size, 14px);font-weight:450;line-height:20px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb))}.magicx-aia-date-cell-number{display:flex;align-items:center;justify-content:center;width:var(--aia-date-cell-size, 36px);height:var(--aia-date-cell-size, 36px);border-radius:8px}.magicx-aia-date-cell--day{cursor:pointer}.magicx-aia-date-cell--blank{cursor:default}.magicx-aia-date-cell--day:hover .magicx-aia-date-cell-number,.magicx-aia-date-cell--highlighted .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.magicx-aia-date-cell--today .magicx-aia-date-cell-number{box-shadow:inset 0 0 0 1px var(--aia-date-today-ring, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)))}.magicx-aia-date-cell--selected .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-date-selected-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .12));font-weight:500}.magicx-aia-date-cell--pressed .magicx-aia-date-cell-number{opacity:.8;background:rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+DateGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateGridComponent, isStandalone: true, selector: "aia-date-grid", inputs: { options: "options", activeIndex: "activeIndex", listboxId: "listboxId", view: "view", selectedIso: "selectedIso" }, outputs: { select: "select", highlight: "highlight", previousMonth: "previousMonth", nextMonth: "nextMonth" }, ngImport: i0, template: "<div class=\"magicx-aia-datepicker\" data-aia-datepicker=\"\">\n  <div class=\"magicx-aia-datepicker-header\">\n    <!-- tabIndex -1 for the same reason the skip button is: Tab is already\n         bound to walking the dropdown's options. -->\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      class=\"magicx-aia-datepicker-nav\"\n      data-aia-date-prev=\"\"\n      aria-label=\"Previous month\"\n      (mousedown)=\"preventBlur($event)\"\n      (click)=\"previousMonth.emit()\"\n    >\n      &lsaquo;\n    </button>\n    <span class=\"magicx-aia-datepicker-month\" data-aia-date-month=\"\" aria-live=\"polite\">\n      {{ monthLabel }}\n    </span>\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      class=\"magicx-aia-datepicker-nav\"\n      data-aia-date-next=\"\"\n      aria-label=\"Next month\"\n      (mousedown)=\"preventBlur($event)\"\n      (click)=\"nextMonth.emit()\"\n    >\n      &rsaquo;\n    </button>\n  </div>\n\n  <!-- Decorative: each cell announces its own full date, so repeating the\n       column letters to AT adds noise \u2014 and the duplicate T/S would be\n       meaningless read aloud anyway. -->\n  <div class=\"magicx-aia-datepicker-weekdays\" aria-hidden=\"true\">\n    <span class=\"magicx-aia-datepicker-weekday\" *ngFor=\"let label of weekdays\">{{ label }}</span>\n  </div>\n\n  <div class=\"magicx-aia-datepicker-grid\" data-aia-date-grid=\"\">\n    <ng-container *ngFor=\"let option of options; trackBy: trackByCell; let i = index\">\n      <!-- Padding for the days before the 1st / after the last. Non-tappable,\n           so arrow navigation skips it; hidden from AT so the month reads as\n           its own days and nothing else. -->\n      <div\n        *ngIf=\"dayOf(option) === null; else dayCell\"\n        [id]=\"listboxId + '-option-' + i\"\n        role=\"option\"\n        data-aia-option=\"\"\n        data-aia-date-cell=\"\"\n        aria-hidden=\"true\"\n        [attr.aria-selected]=\"false\"\n        tabindex=\"-1\"\n        class=\"magicx-aia-date-cell magicx-aia-date-cell--blank\"\n      ></div>\n\n      <ng-template #dayCell>\n        <!-- A day already gone by is de-emphasized, not disabled: it renders\n             dimmed but stays every bit as pickable as the rest of the month. -->\n        <div\n          [id]=\"listboxId + '-option-' + i\"\n          role=\"option\"\n          data-aia-option=\"\"\n          data-aia-date-cell=\"\"\n          [attr.aria-selected]=\"i === activeIndex\"\n          [attr.aria-label]=\"option.text\"\n          tabindex=\"0\"\n          class=\"magicx-aia-date-cell magicx-aia-date-cell--day\"\n          [class.magicx-aia-date-cell--past]=\"isPast(option)\"\n          [class.magicx-aia-date-cell--highlighted]=\"i === activeIndex\"\n          [class.magicx-aia-date-cell--today]=\"isToday(option)\"\n          [class.magicx-aia-date-cell--selected]=\"isSelected(option)\"\n          [class.magicx-aia-date-cell--pressed]=\"i === pressedIndex\"\n          (click)=\"onSelect(option, i)\"\n          (keydown)=\"onKeyDown($event, option, i)\"\n          (mouseenter)=\"highlight.emit(i)\"\n        >\n          <!-- The cell paints the day number; `option.text` is the full\n               committed value (\"March 23 2026\") and is what AT announces,\n               since that is what selecting it puts in the input. -->\n          <span class=\"magicx-aia-date-cell-number\">{{ dayOf(option) }}</span>\n        </div>\n      </ng-template>\n    </ng-container>\n  </div>\n</div>\n", styles: [".magicx-aia-datepicker{display:flex;flex-direction:column;gap:4px;padding:4px 2px}.magicx-aia-datepicker-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 6px}.magicx-aia-datepicker-month{font-family:inherit;font-size:var(--aia-date-month-font-size, 14px);font-weight:500;line-height:20px;color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.magicx-aia-datepicker-nav{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:16px;line-height:1;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-datepicker-nav:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent)}.magicx-aia-datepicker-weekdays,.magicx-aia-datepicker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.magicx-aia-datepicker-weekday{padding:2px 0;text-align:center;font-family:inherit;font-size:var(--aia-date-weekday-font-size, 11px);font-weight:500;line-height:16px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));opacity:.7}.magicx-aia-date-cell{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--aia-date-row-height, 28px);font-family:inherit;font-size:var(--aia-date-cell-font-size, 13px);font-weight:450;line-height:20px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb))}.magicx-aia-date-cell-number{display:flex;align-items:center;justify-content:center;width:var(--aia-date-cell-size, 26px);height:var(--aia-date-cell-size, 26px);border-radius:6px}.magicx-aia-date-cell--day{cursor:pointer}.magicx-aia-date-cell--blank{cursor:default}.magicx-aia-date-cell--past{opacity:.35}.magicx-aia-date-cell--day:hover .magicx-aia-date-cell-number,.magicx-aia-date-cell--highlighted .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.magicx-aia-date-cell--today .magicx-aia-date-cell-number{box-shadow:inset 0 0 0 1px var(--aia-date-today-ring, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)))}.magicx-aia-date-cell--selected .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-date-selected-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .12));font-weight:500}.magicx-aia-date-cell--pressed .magicx-aia-date-cell-number{opacity:.8;background:rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aia-date-grid", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"magicx-aia-datepicker\" data-aia-datepicker=\"\">\n  <div class=\"magicx-aia-datepicker-header\">\n    <!-- tabIndex -1 for the same reason the skip button is: Tab is already\n         bound to walking the dropdown's options. -->\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      class=\"magicx-aia-datepicker-nav\"\n      data-aia-date-prev=\"\"\n      aria-label=\"Previous month\"\n      (mousedown)=\"preventBlur($event)\"\n      (click)=\"previousMonth.emit()\"\n    >\n      &lsaquo;\n    </button>\n    <span class=\"magicx-aia-datepicker-month\" data-aia-date-month=\"\" aria-live=\"polite\">\n      {{ monthLabel }}\n    </span>\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      class=\"magicx-aia-datepicker-nav\"\n      data-aia-date-next=\"\"\n      aria-label=\"Next month\"\n      (mousedown)=\"preventBlur($event)\"\n      (click)=\"nextMonth.emit()\"\n    >\n      &rsaquo;\n    </button>\n  </div>\n\n  <!-- Decorative: each cell announces its own full date, so repeating the\n       column letters to AT adds noise \u2014 and the duplicate T/S would be\n       meaningless read aloud anyway. -->\n  <div class=\"magicx-aia-datepicker-weekdays\" aria-hidden=\"true\">\n    <span class=\"magicx-aia-datepicker-weekday\" *ngFor=\"let label of weekdays\">{{ label }}</span>\n  </div>\n\n  <div class=\"magicx-aia-datepicker-grid\" data-aia-date-grid=\"\">\n    <ng-container *ngFor=\"let option of options; trackBy: trackByCell; let i = index\">\n      <!-- Padding for the days before the 1st / after the last. Non-tappable,\n           so arrow navigation skips it; hidden from AT so the month reads as\n           its own days and nothing else. -->\n      <div\n        *ngIf=\"dayOf(option) === null; else dayCell\"\n        [id]=\"listboxId + '-option-' + i\"\n        role=\"option\"\n        data-aia-option=\"\"\n        data-aia-date-cell=\"\"\n        aria-hidden=\"true\"\n        [attr.aria-selected]=\"false\"\n        tabindex=\"-1\"\n        class=\"magicx-aia-date-cell magicx-aia-date-cell--blank\"\n      ></div>\n\n      <ng-template #dayCell>\n        <div\n          [id]=\"listboxId + '-option-' + i\"\n          role=\"option\"\n          data-aia-option=\"\"\n          data-aia-date-cell=\"\"\n          [attr.aria-selected]=\"i === activeIndex\"\n          [attr.aria-label]=\"option.text\"\n          tabindex=\"0\"\n          class=\"magicx-aia-date-cell magicx-aia-date-cell--day\"\n          [class.magicx-aia-date-cell--highlighted]=\"i === activeIndex\"\n          [class.magicx-aia-date-cell--today]=\"isToday(option)\"\n          [class.magicx-aia-date-cell--selected]=\"isSelected(option)\"\n          [class.magicx-aia-date-cell--pressed]=\"i === pressedIndex\"\n          (click)=\"onSelect(option, i)\"\n          (keydown)=\"onKeyDown($event, option, i)\"\n          (mouseenter)=\"highlight.emit(i)\"\n        >\n          <!-- The cell paints the day number; `option.text` is the full\n               committed value (\"March 23 2026\") and is what AT announces,\n               since that is what selecting it puts in the input. -->\n          <span class=\"magicx-aia-date-cell-number\">{{ dayOf(option) }}</span>\n        </div>\n      </ng-template>\n    </ng-container>\n  </div>\n</div>\n", styles: [".magicx-aia-datepicker{display:flex;flex-direction:column;gap:4px;padding:4px 2px 8px}.magicx-aia-datepicker-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 6px}.magicx-aia-datepicker-month{font-family:inherit;font-size:var(--aia-date-month-font-size, 14px);font-weight:500;line-height:20px;color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.magicx-aia-datepicker-nav{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:16px;line-height:1;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-datepicker-nav:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent)}.magicx-aia-datepicker-weekdays,.magicx-aia-datepicker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.magicx-aia-datepicker-weekday{padding:2px 0;text-align:center;font-family:inherit;font-size:var(--aia-date-weekday-font-size, 11px);font-weight:500;line-height:16px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));opacity:.7}.magicx-aia-date-cell{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--aia-date-row-height, 40px);font-family:inherit;font-size:var(--aia-date-cell-font-size, 14px);font-weight:450;line-height:20px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb))}.magicx-aia-date-cell-number{display:flex;align-items:center;justify-content:center;width:var(--aia-date-cell-size, 36px);height:var(--aia-date-cell-size, 36px);border-radius:8px}.magicx-aia-date-cell--day{cursor:pointer}.magicx-aia-date-cell--blank{cursor:default}.magicx-aia-date-cell--day:hover .magicx-aia-date-cell-number,.magicx-aia-date-cell--highlighted .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.magicx-aia-date-cell--today .magicx-aia-date-cell-number{box-shadow:inset 0 0 0 1px var(--aia-date-today-ring, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)))}.magicx-aia-date-cell--selected .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-date-selected-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .12));font-weight:500}.magicx-aia-date-cell--pressed .magicx-aia-date-cell-number{opacity:.8;background:rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}\n"] }]
+            args: [{ selector: "aia-date-grid", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"magicx-aia-datepicker\" data-aia-datepicker=\"\">\n  <div class=\"magicx-aia-datepicker-header\">\n    <!-- tabIndex -1 for the same reason the skip button is: Tab is already\n         bound to walking the dropdown's options. -->\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      class=\"magicx-aia-datepicker-nav\"\n      data-aia-date-prev=\"\"\n      aria-label=\"Previous month\"\n      (mousedown)=\"preventBlur($event)\"\n      (click)=\"previousMonth.emit()\"\n    >\n      &lsaquo;\n    </button>\n    <span class=\"magicx-aia-datepicker-month\" data-aia-date-month=\"\" aria-live=\"polite\">\n      {{ monthLabel }}\n    </span>\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      class=\"magicx-aia-datepicker-nav\"\n      data-aia-date-next=\"\"\n      aria-label=\"Next month\"\n      (mousedown)=\"preventBlur($event)\"\n      (click)=\"nextMonth.emit()\"\n    >\n      &rsaquo;\n    </button>\n  </div>\n\n  <!-- Decorative: each cell announces its own full date, so repeating the\n       column letters to AT adds noise \u2014 and the duplicate T/S would be\n       meaningless read aloud anyway. -->\n  <div class=\"magicx-aia-datepicker-weekdays\" aria-hidden=\"true\">\n    <span class=\"magicx-aia-datepicker-weekday\" *ngFor=\"let label of weekdays\">{{ label }}</span>\n  </div>\n\n  <div class=\"magicx-aia-datepicker-grid\" data-aia-date-grid=\"\">\n    <ng-container *ngFor=\"let option of options; trackBy: trackByCell; let i = index\">\n      <!-- Padding for the days before the 1st / after the last. Non-tappable,\n           so arrow navigation skips it; hidden from AT so the month reads as\n           its own days and nothing else. -->\n      <div\n        *ngIf=\"dayOf(option) === null; else dayCell\"\n        [id]=\"listboxId + '-option-' + i\"\n        role=\"option\"\n        data-aia-option=\"\"\n        data-aia-date-cell=\"\"\n        aria-hidden=\"true\"\n        [attr.aria-selected]=\"false\"\n        tabindex=\"-1\"\n        class=\"magicx-aia-date-cell magicx-aia-date-cell--blank\"\n      ></div>\n\n      <ng-template #dayCell>\n        <!-- A day already gone by is de-emphasized, not disabled: it renders\n             dimmed but stays every bit as pickable as the rest of the month. -->\n        <div\n          [id]=\"listboxId + '-option-' + i\"\n          role=\"option\"\n          data-aia-option=\"\"\n          data-aia-date-cell=\"\"\n          [attr.aria-selected]=\"i === activeIndex\"\n          [attr.aria-label]=\"option.text\"\n          tabindex=\"0\"\n          class=\"magicx-aia-date-cell magicx-aia-date-cell--day\"\n          [class.magicx-aia-date-cell--past]=\"isPast(option)\"\n          [class.magicx-aia-date-cell--highlighted]=\"i === activeIndex\"\n          [class.magicx-aia-date-cell--today]=\"isToday(option)\"\n          [class.magicx-aia-date-cell--selected]=\"isSelected(option)\"\n          [class.magicx-aia-date-cell--pressed]=\"i === pressedIndex\"\n          (click)=\"onSelect(option, i)\"\n          (keydown)=\"onKeyDown($event, option, i)\"\n          (mouseenter)=\"highlight.emit(i)\"\n        >\n          <!-- The cell paints the day number; `option.text` is the full\n               committed value (\"March 23 2026\") and is what AT announces,\n               since that is what selecting it puts in the input. -->\n          <span class=\"magicx-aia-date-cell-number\">{{ dayOf(option) }}</span>\n        </div>\n      </ng-template>\n    </ng-container>\n  </div>\n</div>\n", styles: [".magicx-aia-datepicker{display:flex;flex-direction:column;gap:4px;padding:4px 2px}.magicx-aia-datepicker-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 6px}.magicx-aia-datepicker-month{font-family:inherit;font-size:var(--aia-date-month-font-size, 14px);font-weight:500;line-height:20px;color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.magicx-aia-datepicker-nav{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:16px;line-height:1;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-datepicker-nav:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent)}.magicx-aia-datepicker-weekdays,.magicx-aia-datepicker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.magicx-aia-datepicker-weekday{padding:2px 0;text-align:center;font-family:inherit;font-size:var(--aia-date-weekday-font-size, 11px);font-weight:500;line-height:16px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));opacity:.7}.magicx-aia-date-cell{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--aia-date-row-height, 28px);font-family:inherit;font-size:var(--aia-date-cell-font-size, 13px);font-weight:450;line-height:20px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb))}.magicx-aia-date-cell-number{display:flex;align-items:center;justify-content:center;width:var(--aia-date-cell-size, 26px);height:var(--aia-date-cell-size, 26px);border-radius:6px}.magicx-aia-date-cell--day{cursor:pointer}.magicx-aia-date-cell--blank{cursor:default}.magicx-aia-date-cell--past{opacity:.35}.magicx-aia-date-cell--day:hover .magicx-aia-date-cell-number,.magicx-aia-date-cell--highlighted .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.magicx-aia-date-cell--today .magicx-aia-date-cell-number{box-shadow:inset 0 0 0 1px var(--aia-date-today-ring, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)))}.magicx-aia-date-cell--selected .magicx-aia-date-cell-number{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-date-selected-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), .12));font-weight:500}.magicx-aia-date-cell--pressed .magicx-aia-date-cell-number{opacity:.8;background:rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], activeIndex: [{
@@ -367,9 +373,11 @@ class GridComponent {
     /**
      * Explicit column template overrides the intrinsic auto-fit (inline wins).
      * The track string is built by the core so all three packages emit the same
-     * one.
+     * one; a measured template (the two-column split) wins over the count.
      */
     get templateColumns() {
+        if (this.template)
+            return this.template;
         return this.cols ? optionsGridTemplateColumns(this.cols) : null;
     }
     /**
@@ -387,10 +395,10 @@ class GridComponent {
     }
 }
 GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GridComponent, isStandalone: true, selector: "aia-grid", inputs: { min: "min", max: "max", gap: "gap", scroll: "scroll", maxHeight: "maxHeight", scrollResetKey: "scrollResetKey", cols: "cols" }, viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #grid\n  class=\"aia-grid\"\n  [attr.data-scroll]=\"scroll ? '' : null\"\n  [style.--aia-grid-min]=\"min\"\n  [style.--aia-grid-max]=\"max\"\n  [style.--aia-grid-gap]=\"gap\"\n  [style.--aia-grid-max-height]=\"maxHeight\"\n  [style.grid-template-columns]=\"templateColumns\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["aia-grid{display:contents}@layer layout{.aia-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--aia-grid-min),100%),var(--aia-grid-max, 1fr)));gap:var(--aia-grid-gap, 0)}.aia-grid[data-scroll]{grid-auto-rows:min-content;align-content:start;justify-content:start;max-height:var(--aia-grid-max-height, 120px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3)) transparent}.aia-grid[data-scroll]::-webkit-scrollbar{width:6px}.aia-grid[data-scroll]::-webkit-scrollbar-track{background:transparent}.aia-grid[data-scroll]::-webkit-scrollbar-thumb{background:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3));border-radius:3px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GridComponent, isStandalone: true, selector: "aia-grid", inputs: { min: "min", max: "max", gap: "gap", scroll: "scroll", maxHeight: "maxHeight", scrollResetKey: "scrollResetKey", cols: "cols", template: "template", group: "group" }, viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #grid\n  class=\"aia-grid\"\n  [attr.data-scroll]=\"scroll ? '' : null\"\n  [attr.data-aia-group]=\"group ?? null\"\n  [style.--aia-grid-min]=\"min\"\n  [style.--aia-grid-max]=\"max\"\n  [style.--aia-grid-gap]=\"gap\"\n  [style.--aia-grid-max-height]=\"maxHeight\"\n  [style.grid-template-columns]=\"templateColumns\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["aia-grid{display:contents}@layer layout{.aia-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--aia-grid-min),100%),var(--aia-grid-max, 1fr)));gap:var(--aia-grid-gap, 0)}.aia-grid[data-scroll]{grid-auto-rows:min-content;align-content:start;justify-content:start;max-height:var(--aia-grid-max-height, 120px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3)) transparent}.aia-grid[data-scroll]::-webkit-scrollbar{width:6px}.aia-grid[data-scroll]::-webkit-scrollbar-track{background:transparent}.aia-grid[data-scroll]::-webkit-scrollbar-thumb{background:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3));border-radius:3px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aia-grid", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  #grid\n  class=\"aia-grid\"\n  [attr.data-scroll]=\"scroll ? '' : null\"\n  [style.--aia-grid-min]=\"min\"\n  [style.--aia-grid-max]=\"max\"\n  [style.--aia-grid-gap]=\"gap\"\n  [style.--aia-grid-max-height]=\"maxHeight\"\n  [style.grid-template-columns]=\"templateColumns\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["aia-grid{display:contents}@layer layout{.aia-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--aia-grid-min),100%),var(--aia-grid-max, 1fr)));gap:var(--aia-grid-gap, 0)}.aia-grid[data-scroll]{grid-auto-rows:min-content;align-content:start;justify-content:start;max-height:var(--aia-grid-max-height, 120px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3)) transparent}.aia-grid[data-scroll]::-webkit-scrollbar{width:6px}.aia-grid[data-scroll]::-webkit-scrollbar-track{background:transparent}.aia-grid[data-scroll]::-webkit-scrollbar-thumb{background:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3));border-radius:3px}}\n"] }]
+            args: [{ selector: "aia-grid", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  #grid\n  class=\"aia-grid\"\n  [attr.data-scroll]=\"scroll ? '' : null\"\n  [attr.data-aia-group]=\"group ?? null\"\n  [style.--aia-grid-min]=\"min\"\n  [style.--aia-grid-max]=\"max\"\n  [style.--aia-grid-gap]=\"gap\"\n  [style.--aia-grid-max-height]=\"maxHeight\"\n  [style.grid-template-columns]=\"templateColumns\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["aia-grid{display:contents}@layer layout{.aia-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--aia-grid-min),100%),var(--aia-grid-max, 1fr)));gap:var(--aia-grid-gap, 0)}.aia-grid[data-scroll]{grid-auto-rows:min-content;align-content:start;justify-content:start;max-height:var(--aia-grid-max-height, 120px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3)) transparent}.aia-grid[data-scroll]::-webkit-scrollbar{width:6px}.aia-grid[data-scroll]::-webkit-scrollbar-track{background:transparent}.aia-grid[data-scroll]::-webkit-scrollbar-thumb{background:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3));border-radius:3px}}\n"] }]
         }], propDecorators: { min: [{
                 type: Input
             }], max: [{
@@ -405,6 +413,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], cols: [{
                 type: Input
+            }], template: [{
+                type: Input
+            }], group: [{
+                type: Input
             }], gridRef: [{
                 type: ViewChild,
                 args: ["grid", { static: false }]
@@ -415,7 +427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * `packages/react/src/components/SuggestionItem.tsx`. Handles:
  *
  * - Tappable vs non-tappable cursor + hover styling
- * - Pressed-state streak animation (500ms, single-flight)
+ * - Pressed-state compress animation (500ms, single-flight)
  * - Keyboard activation (Enter/Space)
  * - ARIA `role="option"` + `aria-selected` for the listbox pattern
  * - Loading skeleton when `loading=true`
@@ -427,11 +439,28 @@ class SuggestionItemComponent {
         this.isHighlighted = false;
         this.id = "";
         this.loading = false;
+        /** Fade this option's text toward its bottom edge (last visible row of a scrollable grid). */
+        this.scrollHint = false;
+        /**
+         * The captured delay; `null` until the first `enterDelayMs` binding lands.
+         * The template binds it to `--aia-option-enter-delay` (the core's
+         * OPTION_ENTER_DELAY_VAR), which the stylesheet's entrance rule reads.
+         */
+        this.enterDelay = null;
         this.select = new EventEmitter();
         this.highlight = new EventEmitter();
         this.pressed = false;
         this.cdr = inject(ChangeDetectorRef);
     }
+    /**
+     * Start delay of this row's entrance animation (ms) — each row rises in a
+     * beat after the one nearer the input. Captured once, on first render, so a
+     * later change-detection pass can't restart a row mid-rise.
+     */
+    set enterDelayMs(value) {
+        if (this.enterDelay === null)
+            this.enterDelay = value;
+    }
     ngOnDestroy() {
         if (this.pressedTimer !== undefined)
             clearTimeout(this.pressedTimer);
@@ -464,10 +493,10 @@ class SuggestionItemComponent {
     }
 }
 SuggestionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SuggestionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestionItemComponent, isStandalone: true, selector: "aia-suggestion-item", inputs: { option: "option", isHighlighted: "isHighlighted", id: "id", loading: "loading" }, outputs: { select: "select", highlight: "highlight" }, ngImport: i0, template: "<div\n  [id]=\"id\"\n  role=\"option\"\n  data-aia-option=\"\"\n  [attr.data-aia-loading]=\"loading ? '' : null\"\n  [attr.aria-selected]=\"isHighlighted\"\n  class=\"aia-suggestion-item\"\n  [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n  [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n  [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n  [class.aia-suggestion-item-pressed]=\"pressed\"\n  [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n  (click)=\"onSelect()\"\n  (keydown)=\"onKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  <div class=\"aia-suggestion-streaks\"></div>\n  <div class=\"aia-suggestion-streaks-vert\"></div>\n  <span class=\"aia-suggestion-content\">\n    <span class=\"aia-suggestion-text\">\n      <ng-container *ngIf=\"option.icon; else noIcon\"\n        >{{ option.icon }} {{ option.text }}</ng-container\n      >\n      <ng-template #noIcon>{{ option.text }}</ng-template>\n    </span>\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px;animation:aiaSuggestionFadeIn .5s cubic-bezier(.4,0,.2,1) forwards}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{opacity:.8;color:var(--aia-color-text-default, #fff);background:rgba(var(--aia-streak-rgb, 255, 255, 255),.06);animation:aiaGlassFade .5s ease forwards,aiaTapDown .5s ease forwards}@keyframes aiaTapDown{0%{transform:scale(1)}30%{transform:scale(.97)}to{transform:scale(1)}}@keyframes aiaGlassFade{0%{background:var(--aia-streak-glass-bg, rgba(255, 255, 255, .1))}to{background:transparent}}.aia-suggestion-streaks{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden}.aia-suggestion-streaks:before{content:\"\";position:absolute;bottom:-3px;left:60%;width:0;height:6px;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.5) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.2) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.2);filter:blur(1px);border-radius:50%}.aia-suggestion-streaks:after{content:\"\";position:absolute;top:-3px;right:60%;width:0;height:6px;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.5) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.2) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.2);filter:blur(1px);border-radius:50%}.aia-suggestion-streaks-vert{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden}.aia-suggestion-streaks-vert:before{content:\"\";position:absolute;bottom:0;right:-3px;width:6px;height:0;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.4) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.15) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.15);filter:blur(1px);border-radius:50%}.aia-suggestion-streaks-vert:after{content:\"\";position:absolute;top:0;left:-3px;width:6px;height:0;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.4) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.15) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.15);filter:blur(1px);border-radius:50%}.aia-suggestion-item-pressed .aia-suggestion-streaks:before{animation:aiaStreakHorizRight .5s cubic-bezier(.4,0,.2,1) forwards}.aia-suggestion-item-pressed .aia-suggestion-streaks:after{animation:aiaStreakHorizLeft .5s cubic-bezier(.4,0,.2,1) forwards}.aia-suggestion-item-pressed .aia-suggestion-streaks-vert:before{animation:aiaStreakVertUp .3s cubic-bezier(.3,0,.2,1) .2s forwards}.aia-suggestion-item-pressed .aia-suggestion-streaks-vert:after{animation:aiaStreakVertDown .3s cubic-bezier(.3,0,.2,1) .2s forwards}@keyframes aiaStreakHorizRight{0%{width:0;height:4px;opacity:0;filter:blur(1px);box-shadow:0 0 8px 3px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}15%{height:4px;opacity:1;filter:blur(1px);box-shadow:0 0 10px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}80%{width:50%;height:10px;opacity:.8;filter:blur(3px);box-shadow:0 0 16px 6px rgba(var(--aia-streak-rgb, 255, 255, 255),.1)}to{width:50%;height:12px;opacity:0;filter:blur(5px);box-shadow:0 0 20px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.03)}}@keyframes aiaStreakHorizLeft{0%{width:0;height:4px;opacity:0;filter:blur(1px);box-shadow:0 0 8px 3px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}15%{height:4px;opacity:1;filter:blur(1px);box-shadow:0 0 10px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}80%{width:50%;height:10px;opacity:.8;filter:blur(3px);box-shadow:0 0 16px 6px rgba(var(--aia-streak-rgb, 255, 255, 255),.1)}to{width:50%;height:12px;opacity:0;filter:blur(5px);box-shadow:0 0 20px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.03)}}@keyframes aiaStreakVertUp{0%{height:0;width:6px;opacity:.9;filter:blur(1.8px);box-shadow:0 0 12px 5px rgba(var(--aia-streak-rgb, 255, 255, 255),.25)}75%{height:100%;width:10px;opacity:.4;filter:blur(3px);box-shadow:0 0 18px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}to{height:100%;width:14px;opacity:0;filter:blur(5px);box-shadow:0 0 24px 10px rgba(var(--aia-streak-rgb, 255, 255, 255),.02)}}@keyframes aiaStreakVertDown{0%{height:0;width:6px;opacity:.9;filter:blur(1.8px);box-shadow:0 0 12px 5px rgba(var(--aia-streak-rgb, 255, 255, 255),.25)}75%{height:100%;width:10px;opacity:.4;filter:blur(3px);box-shadow:0 0 18px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}to{height:100%;width:14px;opacity:0;filter:blur(5px);box-shadow:0 0 24px 10px rgba(var(--aia-streak-rgb, 255, 255, 255),.02)}}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SuggestionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestionItemComponent, isStandalone: true, selector: "aia-suggestion-item", inputs: { option: "option", isHighlighted: "isHighlighted", id: "id", loading: "loading", scrollHint: "scrollHint", enterDelayMs: "enterDelayMs" }, outputs: { select: "select", highlight: "highlight" }, ngImport: i0, template: "<div\n  [id]=\"id\"\n  role=\"option\"\n  data-aia-option=\"\"\n  [attr.data-aia-loading]=\"loading ? '' : null\"\n  [attr.aria-selected]=\"isHighlighted\"\n  class=\"aia-suggestion-item\"\n  [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n  [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n  [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n  [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n  [class.aia-suggestion-item-pressed]=\"pressed\"\n  [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n  [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n  (click)=\"onSelect()\"\n  (keydown)=\"onKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  <span class=\"aia-suggestion-content\">\n    <span class=\"aia-suggestion-text\">\n      <ng-container *ngIf=\"option.icon; else noIcon\"\n        >{{ option.icon }} {{ option.text }}</ng-container\n      >\n      <ng-template #noIcon>{{ option.text }}</ng-template>\n    </span>\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px;animation:aiaSuggestionFadeIn .15s ease-out both,aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both;animation-delay:var(--aia-option-enter-delay, 0ms)}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .5s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity .15s ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aia-suggestion-item", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  [id]=\"id\"\n  role=\"option\"\n  data-aia-option=\"\"\n  [attr.data-aia-loading]=\"loading ? '' : null\"\n  [attr.aria-selected]=\"isHighlighted\"\n  class=\"aia-suggestion-item\"\n  [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n  [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n  [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n  [class.aia-suggestion-item-pressed]=\"pressed\"\n  [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n  (click)=\"onSelect()\"\n  (keydown)=\"onKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  <div class=\"aia-suggestion-streaks\"></div>\n  <div class=\"aia-suggestion-streaks-vert\"></div>\n  <span class=\"aia-suggestion-content\">\n    <span class=\"aia-suggestion-text\">\n      <ng-container *ngIf=\"option.icon; else noIcon\"\n        >{{ option.icon }} {{ option.text }}</ng-container\n      >\n      <ng-template #noIcon>{{ option.text }}</ng-template>\n    </span>\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px;animation:aiaSuggestionFadeIn .5s cubic-bezier(.4,0,.2,1) forwards}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{opacity:.8;color:var(--aia-color-text-default, #fff);background:rgba(var(--aia-streak-rgb, 255, 255, 255),.06);animation:aiaGlassFade .5s ease forwards,aiaTapDown .5s ease forwards}@keyframes aiaTapDown{0%{transform:scale(1)}30%{transform:scale(.97)}to{transform:scale(1)}}@keyframes aiaGlassFade{0%{background:var(--aia-streak-glass-bg, rgba(255, 255, 255, .1))}to{background:transparent}}.aia-suggestion-streaks{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden}.aia-suggestion-streaks:before{content:\"\";position:absolute;bottom:-3px;left:60%;width:0;height:6px;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.5) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.2) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.2);filter:blur(1px);border-radius:50%}.aia-suggestion-streaks:after{content:\"\";position:absolute;top:-3px;right:60%;width:0;height:6px;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.5) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.2) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.2);filter:blur(1px);border-radius:50%}.aia-suggestion-streaks-vert{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden}.aia-suggestion-streaks-vert:before{content:\"\";position:absolute;bottom:0;right:-3px;width:6px;height:0;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.4) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.15) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.15);filter:blur(1px);border-radius:50%}.aia-suggestion-streaks-vert:after{content:\"\";position:absolute;top:0;left:-3px;width:6px;height:0;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.4) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.15) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.15);filter:blur(1px);border-radius:50%}.aia-suggestion-item-pressed .aia-suggestion-streaks:before{animation:aiaStreakHorizRight .5s cubic-bezier(.4,0,.2,1) forwards}.aia-suggestion-item-pressed .aia-suggestion-streaks:after{animation:aiaStreakHorizLeft .5s cubic-bezier(.4,0,.2,1) forwards}.aia-suggestion-item-pressed .aia-suggestion-streaks-vert:before{animation:aiaStreakVertUp .3s cubic-bezier(.3,0,.2,1) .2s forwards}.aia-suggestion-item-pressed .aia-suggestion-streaks-vert:after{animation:aiaStreakVertDown .3s cubic-bezier(.3,0,.2,1) .2s forwards}@keyframes aiaStreakHorizRight{0%{width:0;height:4px;opacity:0;filter:blur(1px);box-shadow:0 0 8px 3px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}15%{height:4px;opacity:1;filter:blur(1px);box-shadow:0 0 10px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}80%{width:50%;height:10px;opacity:.8;filter:blur(3px);box-shadow:0 0 16px 6px rgba(var(--aia-streak-rgb, 255, 255, 255),.1)}to{width:50%;height:12px;opacity:0;filter:blur(5px);box-shadow:0 0 20px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.03)}}@keyframes aiaStreakHorizLeft{0%{width:0;height:4px;opacity:0;filter:blur(1px);box-shadow:0 0 8px 3px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}15%{height:4px;opacity:1;filter:blur(1px);box-shadow:0 0 10px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}80%{width:50%;height:10px;opacity:.8;filter:blur(3px);box-shadow:0 0 16px 6px rgba(var(--aia-streak-rgb, 255, 255, 255),.1)}to{width:50%;height:12px;opacity:0;filter:blur(5px);box-shadow:0 0 20px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.03)}}@keyframes aiaStreakVertUp{0%{height:0;width:6px;opacity:.9;filter:blur(1.8px);box-shadow:0 0 12px 5px rgba(var(--aia-streak-rgb, 255, 255, 255),.25)}75%{height:100%;width:10px;opacity:.4;filter:blur(3px);box-shadow:0 0 18px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}to{height:100%;width:14px;opacity:0;filter:blur(5px);box-shadow:0 0 24px 10px rgba(var(--aia-streak-rgb, 255, 255, 255),.02)}}@keyframes aiaStreakVertDown{0%{height:0;width:6px;opacity:.9;filter:blur(1.8px);box-shadow:0 0 12px 5px rgba(var(--aia-streak-rgb, 255, 255, 255),.25)}75%{height:100%;width:10px;opacity:.4;filter:blur(3px);box-shadow:0 0 18px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}to{height:100%;width:14px;opacity:0;filter:blur(5px);box-shadow:0 0 24px 10px rgba(var(--aia-streak-rgb, 255, 255, 255),.02)}}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"] }]
+            args: [{ selector: "aia-suggestion-item", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  [id]=\"id\"\n  role=\"option\"\n  data-aia-option=\"\"\n  [attr.data-aia-loading]=\"loading ? '' : null\"\n  [attr.aria-selected]=\"isHighlighted\"\n  class=\"aia-suggestion-item\"\n  [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n  [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n  [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n  [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n  [class.aia-suggestion-item-pressed]=\"pressed\"\n  [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n  [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n  (click)=\"onSelect()\"\n  (keydown)=\"onKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  <span class=\"aia-suggestion-content\">\n    <span class=\"aia-suggestion-text\">\n      <ng-container *ngIf=\"option.icon; else noIcon\"\n        >{{ option.icon }} {{ option.text }}</ng-container\n      >\n      <ng-template #noIcon>{{ option.text }}</ng-template>\n    </span>\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px;animation:aiaSuggestionFadeIn .15s ease-out both,aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both;animation-delay:var(--aia-option-enter-delay, 0ms)}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .5s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity .15s ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"] }]
         }], propDecorators: { option: [{
                 type: Input
             }], isHighlighted: [{
@@ -476,6 +505,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], loading: [{
                 type: Input
+            }], scrollHint: [{
+                type: Input
+            }], enterDelayMs: [{
+                type: Input
             }], select: [{
                 type: Output
             }], highlight: [{
@@ -503,35 +536,91 @@ class SuggestionGridComponent {
          * from the first one instead of from the previous list's scroll offset.
          */
         this.groupKey = "";
+        /**
+         * Which side of the input the dropdown opens on. The rows' entrance starts
+         * from the input's side outward, so "above" reverses the order.
+         */
+        this.optionsPosition = "below";
         this.select = new EventEmitter();
         this.highlight = new EventEmitter();
         this.cdr = inject(ChangeDetectorRef);
-        this.trackByOptionText = (_, opt) => opt.text;
+        /**
+         * The measured layout plan. Starts as the measurement-free baseline (one
+         * column); after each view update the rendered rows are measured and the
+         * plan upgrades to two columns when they provably fit — same two-pass the
+         * React grid does with its layout effect, all through `planOptionsGrid`.
+         */
+        this.plan = planOptionsGrid(0, false, null, null);
+        this.needsMeasure = true;
+        /**
+         * The group is part of the identity: a new suggestion's options are new
+         * rows and get the entrance animation even when one spells the same as a
+         * row already on screen.
+         */
+        this.trackByOptionText = (_, opt) => `${this.groupKey}\0${opt.text}`;
     }
-    // Recompute the responsive layout when the viewport crosses the mobile
-    // breakpoint (OnPush getters only re-run when change detection is triggered).
+    // Re-measure when the viewport changes (breakpoint or width both matter to
+    // the two-column fit).
     onResize() {
+        this.needsMeasure = true;
         this.cdr.markForCheck();
     }
-    /**
-     * Rows/columns policy — owned by the core so vanilla, React and Angular all
-     * lay the options grid out identically. See `computeOptionsGridLayout`.
-     */
-    get layout() {
-        return computeOptionsGridLayout(this.options.length, isOptionsGridMobileViewport());
+    ngOnChanges(changes) {
+        // Only the inputs the plan depends on reset it — activeIndex changes on
+        // every arrow key and must not knock a measured two-column grid back to
+        // the baseline (the React grid's layout effect excludes it the same way).
+        if (!changes["options"] && !changes["loading"])
+            return;
+        this.needsMeasure = true;
+        // The pre-measure baseline for the new inputs, so the first paint is the
+        // same one-column layout the other packages start from.
+        this.plan = planOptionsGrid(this.options.length, isOptionsGridMobileViewport(), null, null);
     }
-    get gridCols() {
-        return this.layout.cols;
+    ngAfterViewChecked() {
+        if (!this.needsMeasure)
+            return;
+        this.needsMeasure = false;
+        const isMobile = isOptionsGridMobileViewport();
+        const grid = this.gridComp?.gridRef?.nativeElement;
+        // Measuring clones every row and forces a layout — skip it whenever the
+        // plan would ignore the result (mobile, fewer than five options).
+        const shouldMeasure = grid && !this.loading && needsOptionsGridMeasurement(this.options.length, isMobile);
+        const measured = shouldMeasure ? measureOptionsGrid(grid) : null;
+        const next = planOptionsGrid(this.options.length, isMobile, measured?.rowWidths ?? null, measured?.gridWidth ?? null);
+        const unchanged = next.template === this.plan.template &&
+            next.maxHeight === this.plan.maxHeight &&
+            next.scrollHintIndices.join() === this.plan.scrollHintIndices.join();
+        if (unchanged)
+            return;
+        // The view was already checked this cycle — apply the measured plan in a
+        // fresh microtask so OnPush picks it up without an
+        // ExpressionChangedAfterItHasBeenChecked error.
+        queueMicrotask(() => {
+            this.plan = next;
+            this.cdr.markForCheck();
+        });
     }
-    get gridMaxHeight() {
-        return this.layout.maxHeight;
+    isScrollHint(index) {
+        return !this.loading && this.plan.scrollHintIndices.includes(index);
+    }
+    /**
+     * Start delay of row `index`'s entrance — each row rises in a beat after
+     * the one nearer the input. Skeleton rows fade in together (they're
+     * placeholders, not content arriving).
+     */
+    enterDelayMs(index) {
+        if (this.loading)
+            return 0;
+        // Across the columns the measured plan settled on — the two-column
+        // upgrade only decides that after the rows exist.
+        return optionEnterDelayMs(index, this.plan.cols, this.options.length, this.optionsPosition);
     }
 }
 SuggestionGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SuggestionGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestionGridComponent, isStandalone: true, selector: "aia-suggestion-grid", inputs: { options: "options", activeIndex: "activeIndex", listboxId: "listboxId", loading: "loading", groupKey: "groupKey" }, outputs: { select: "select", highlight: "highlight" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- max=\"1fr\": columns share out the full width, so a lone column spans the\n     whole options box instead of stopping at 250px. -->\n<aia-grid\n  min=\"250px\"\n  max=\"1fr\"\n  gap=\"0\"\n  [scroll]=\"true\"\n  [scrollResetKey]=\"groupKey\"\n  [cols]=\"gridCols\"\n  [maxHeight]=\"gridMaxHeight\"\n>\n  <aia-suggestion-item\n    *ngFor=\"let option of options; trackBy: trackByOptionText; let i = index\"\n    [option]=\"option\"\n    [isHighlighted]=\"i === activeIndex\"\n    [id]=\"listboxId + '-option-' + i\"\n    [loading]=\"loading\"\n    (select)=\"select.emit($event)\"\n    (highlight)=\"highlight.emit(i)\"\n  ></aia-suggestion-item>\n</aia-grid>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: GridComponent, selector: "aia-grid", inputs: ["min", "max", "gap", "scroll", "maxHeight", "scrollResetKey", "cols"] }, { kind: "component", type: SuggestionItemComponent, selector: "aia-suggestion-item", inputs: ["option", "isHighlighted", "id", "loading"], outputs: ["select", "highlight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SuggestionGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestionGridComponent, isStandalone: true, selector: "aia-suggestion-grid", inputs: { options: "options", activeIndex: "activeIndex", listboxId: "listboxId", loading: "loading", groupKey: "groupKey", optionsPosition: "optionsPosition" }, outputs: { select: "select", highlight: "highlight" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "gridComp", first: true, predicate: GridComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- max=\"1fr\": columns share out the full width, so a lone column spans the\n     whole options box instead of stopping at 250px. -->\n<aia-grid\n  min=\"250px\"\n  max=\"1fr\"\n  gap=\"0\"\n  [scroll]=\"true\"\n  [scrollResetKey]=\"groupKey\"\n  [template]=\"plan.template\"\n  [maxHeight]=\"plan.maxHeight\"\n  [group]=\"groupKey\"\n>\n  <aia-suggestion-item\n    *ngFor=\"let option of options; trackBy: trackByOptionText; let i = index\"\n    [option]=\"option\"\n    [isHighlighted]=\"i === activeIndex\"\n    [id]=\"listboxId + '-option-' + i\"\n    [loading]=\"loading\"\n    [scrollHint]=\"isScrollHint(i)\"\n    [enterDelayMs]=\"enterDelayMs(i)\"\n    (select)=\"select.emit($event)\"\n    (highlight)=\"highlight.emit(i)\"\n  ></aia-suggestion-item>\n</aia-grid>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: GridComponent, selector: "aia-grid", inputs: ["min", "max", "gap", "scroll", "maxHeight", "scrollResetKey", "cols", "template", "group"] }, { kind: "component", type: SuggestionItemComponent, selector: "aia-suggestion-item", inputs: ["option", "isHighlighted", "id", "loading", "scrollHint", "enterDelayMs"], outputs: ["select", "highlight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aia-suggestion-grid", standalone: true, imports: [CommonModule, GridComponent, SuggestionItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- max=\"1fr\": columns share out the full width, so a lone column spans the\n     whole options box instead of stopping at 250px. -->\n<aia-grid\n  min=\"250px\"\n  max=\"1fr\"\n  gap=\"0\"\n  [scroll]=\"true\"\n  [scrollResetKey]=\"groupKey\"\n  [cols]=\"gridCols\"\n  [maxHeight]=\"gridMaxHeight\"\n>\n  <aia-suggestion-item\n    *ngFor=\"let option of options; trackBy: trackByOptionText; let i = index\"\n    [option]=\"option\"\n    [isHighlighted]=\"i === activeIndex\"\n    [id]=\"listboxId + '-option-' + i\"\n    [loading]=\"loading\"\n    (select)=\"select.emit($event)\"\n    (highlight)=\"highlight.emit(i)\"\n  ></aia-suggestion-item>\n</aia-grid>\n" }]
+            args: [{ selector: "aia-suggestion-grid", standalone: true, imports: [CommonModule, GridComponent, SuggestionItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- max=\"1fr\": columns share out the full width, so a lone column spans the\n     whole options box instead of stopping at 250px. -->\n<aia-grid\n  min=\"250px\"\n  max=\"1fr\"\n  gap=\"0\"\n  [scroll]=\"true\"\n  [scrollResetKey]=\"groupKey\"\n  [template]=\"plan.template\"\n  [maxHeight]=\"plan.maxHeight\"\n  [group]=\"groupKey\"\n>\n  <aia-suggestion-item\n    *ngFor=\"let option of options; trackBy: trackByOptionText; let i = index\"\n    [option]=\"option\"\n    [isHighlighted]=\"i === activeIndex\"\n    [id]=\"listboxId + '-option-' + i\"\n    [loading]=\"loading\"\n    [scrollHint]=\"isScrollHint(i)\"\n    [enterDelayMs]=\"enterDelayMs(i)\"\n    (select)=\"select.emit($event)\"\n    (highlight)=\"highlight.emit(i)\"\n  ></aia-suggestion-item>\n</aia-grid>\n" }]
         }], propDecorators: { options: [{
                 type: Input
             }], activeIndex: [{
@@ -542,10 +631,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], groupKey: [{
                 type: Input
+            }], optionsPosition: [{
+                type: Input
             }], select: [{
                 type: Output
             }], highlight: [{
                 type: Output
+            }], gridComp: [{
+                type: ViewChild,
+                args: [GridComponent, { static: false }]
             }], onResize: [{
                 type: HostListener,
                 args: ["window:resize"]
@@ -584,6 +678,10 @@ class AIAutocompleteDropdownComponent {
         this.cdr = inject(ChangeDetectorRef);
         /** Fallback skeleton-bar widths used when loading with zero cached options. */
         this.fallbackSkeletonBarWidths = [159, 119, 164];
+        /** Accessible name of the "more below" scroll arrow. */
+        this.scrollArrowLabel = SCROLL_ARROW_LABEL;
+        /** The grid the scroll-arrow controller is currently bound to. */
+        this.scrollArrowBinding = null;
         /**
          * Attribution/branding link URL for the footer, with a `utm_source` derived
          * from the embedding page's hostname (see {@link buildAttributionUrl}).
@@ -637,8 +735,37 @@ class AIAutocompleteDropdownComponent {
             this.initVm();
         }
     }
+    /**
+     * Keep the core's "more below" arrow controller bound to whichever options
+     * grid is currently rendered — the Angular analogue of React's
+     * useScrollArrow. The controller owns the behaviour (measuring, visibility,
+     * the page-scroll on click — see the core's scrollArrow.ts); this only hands
+     * it the live elements after each view check, re-attaching when the grid
+     * element is replaced and tearing down when there is no grid.
+     */
+    ngAfterViewChecked() {
+        const root = this.dropdownRootRef?.nativeElement;
+        const button = this.scrollArrowRef?.nativeElement;
+        const grid = root?.querySelector(".aia-grid[data-scroll]") ?? null;
+        if (this.scrollArrowBinding && this.scrollArrowBinding.grid !== grid) {
+            this.scrollArrowBinding.controller.destroy();
+            this.scrollArrowBinding = null;
+        }
+        if (!root || !button || !grid)
+            return;
+        if (!this.scrollArrowBinding) {
+            this.scrollArrowBinding = {
+                grid,
+                controller: attachScrollArrow({ dropdown: root, grid, button }),
+            };
+            return; // attach() runs the first update itself
+        }
+        this.scrollArrowBinding.controller.update();
+    }
     ngOnDestroy() {
         this.teardownModeListener();
+        this.scrollArrowBinding?.controller.destroy();
+        this.scrollArrowBinding = null;
     }
     /**
      * Resolve the `mode` input into `resolvedMode`. Unset → null (the dropdown
@@ -778,7 +905,7 @@ class AIAutocompleteDropdownComponent {
     }
 }
 AIAutocompleteDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AIAutocompleteDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteDropdownComponent, isStandalone: true, selector: "ai-autocomplete-dropdown", inputs: { controller: "controller", showPills: "showPills", showSkipButton: "showSkipButton", className: "className", mode: "mode" }, usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"vm$ | async as vm\"\n  [id]=\"controller.listboxId\"\n  role=\"listbox\"\n  data-aia-dropdown=\"\"\n  [attr.data-aia-loading]=\"vm.isLoading ? '' : null\"\n  [attr.data-mode]=\"resolvedMode\"\n  [attr.data-options-position]=\"vm.optionsPosition\"\n  [attr.data-aia-has-products]=\"vm.products.length > 0 ? '' : null\"\n  [class]=\"rootClass\"\n  [class.magicx-aia-dropdown-visible]=\"vm.isVisible\"\n  (mousedown)=\"preventBlur($event)\"\n>\n  <aia-stack space=\"8px\">\n    <aia-cluster\n      *ngIf=\"vm.showsPills || vm.showsSkip\"\n      class=\"magicx-aia-dropdown-pillbar\"\n      data-aia-pillbar=\"\"\n      [noWrap]=\"true\"\n    >\n      <!-- The scroll + right-edge fade live on this wrapper (not the bar) so\n           the skip button stays outside the masked region \u2014 pinned and fully\n           opaque while overflowing pills fade under it. Absent in a skip-only\n           row (pills rendered elsewhere via pillPlacement inline/hidden). -->\n      <span *ngIf=\"vm.showsPills\" class=\"magicx-aia-pill-scroll\" data-aia-pill-scroll=\"\">\n        <aia-pill-list\n          [pills]=\"vm.pills\"\n          [activePillIndex]=\"0\"\n          [activeSelected]=\"vm.isActivePillSelected\"\n          [rounded]=\"true\"\n          [loading]=\"vm.isLoading\"\n          (selectPill)=\"onPillClick($event)\"\n        ></aia-pill-list>\n      </span>\n      <button\n        *ngIf=\"vm.showsSkip\"\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"magicx-aia-skip\"\n        data-aia-skip=\"\"\n        [disabled]=\"vm.skipDisabled\"\n        [attr.aria-label]=\"vm.activePillLabel ? 'Skip ' + vm.activePillLabel : 'Skip'\"\n        (click)=\"onSkip()\"\n      >\n        skip\n      </button>\n    </aia-cluster>\n\n    <aia-suggestion-grid\n      *ngIf=\"vm.showsOptions\"\n      [options]=\"vm.options\"\n      [activeIndex]=\"vm.activeIndex\"\n      [listboxId]=\"controller.listboxId\"\n      [loading]=\"vm.isLoading\"\n      [groupKey]=\"vm.groupKey\"\n      (select)=\"onSelect($event)\"\n      (highlight)=\"onHighlight($event)\"\n    ></aia-suggestion-grid>\n\n    <aia-date-grid\n      *ngIf=\"vm.showsDateGrid\"\n      [options]=\"vm.options\"\n      [activeIndex]=\"vm.activeIndex\"\n      [listboxId]=\"controller.listboxId\"\n      [view]=\"vm.dateView\"\n      [selectedIso]=\"vm.selectedDateIso\"\n      (select)=\"onSelect($event)\"\n      (highlight)=\"onHighlight($event)\"\n      (previousMonth)=\"onPreviousMonth()\"\n      (nextMonth)=\"onNextMonth()\"\n    ></aia-date-grid>\n\n    <div\n      *ngIf=\"vm.showsFallbackSkeleton\"\n      class=\"magicx-aia-dropdown-skeleton-bars\"\n      data-aia-skeleton-bars=\"\"\n    >\n      <span\n        *ngFor=\"let w of fallbackSkeletonBarWidths; trackBy: trackByWidth\"\n        class=\"magicx-aia-dropdown-skeleton-bar\"\n        [style.width.px]=\"w\"\n      ></span>\n    </div>\n\n    <!-- *ngIf, not just the section's own guard inside the component: the host\n         element is an in-flow child of .aia-stack (display:flex; gap:8px), so\n         an always-instantiated zero-height host would add a SECOND 8px gap\n         between the grid and the footer \u2014 in every dropdown, products or not.\n         The grid's --aia-grid-overlap-bottom is tuned for exactly one gap, so\n         the footer would land 8px below the band it is meant to cover. -->\n    <aia-product-strip\n      *ngIf=\"vm.products.length > 0\"\n      [products]=\"vm.products\"\n      [listboxId]=\"controller.listboxId\"\n      [focusable]=\"vm.isVisible\"\n      (select)=\"onProductSelect($event)\"\n      (focusChange)=\"onProductFocusChange($event)\"\n    ></aia-product-strip>\n\n    <footer class=\"magicx-aia-footer\" data-aia-footer=\"\">\n      <div class=\"magicx-aia-footer-row\">\n        <span class=\"magicx-aia-footer-hint-group\">\n          <kbd class=\"magicx-aia-footer-key\">{{ vm.footerKey }}</kbd>\n          <span class=\"magicx-aia-footer-hint\">{{ vm.footerHint }}</span>\n        </span>\n        <a\n          class=\"magicx-aia-footer-brand-link\"\n          [href]=\"brandHref\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"magicx-aia-footer-brand\">AI</span>\n          <span class=\"magicx-aia-footer-badge\">Autocomplete</span>\n        </a>\n      </div>\n    </footer>\n  </aia-stack>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia){--aia-primitive-neutral-0: #000000;--aia-primitive-neutral-150: #1a1b1d;--aia-primitive-neutral-250: #323232;--aia-primitive-neutral-300: #333539;--aia-primitive-neutral-400: #4a4a4a;--aia-primitive-neutral-500: #505050;--aia-primitive-neutral-700: #b0b0b0;--aia-primitive-neutral-750: #bdbdbd;--aia-primitive-neutral-900: #e7e7e7;--aia-primitive-neutral-1000: #ffffff;--aia-primitive-blue-50: #eef2ff;--aia-primitive-neutral-750-a50: rgba(189, 189, 189, .51);--aia-primitive-neutral-750-a25: rgba(189, 189, 189, .25);--aia-primitive-neutral-750-a35: rgba(189, 189, 189, .35);--aia-primitive-neutral-750-a30: rgba(189, 189, 189, .3);--aia-primitive-neutral-750-a15: rgba(189, 189, 189, .15);--aia-primitive-neutral-750-a105: rgba(189, 189, 189, .105);--aia-primitive-neutral-700-a40: rgba(176, 176, 176, .4);--aia-primitive-neutral-900-a50: rgba(231, 231, 231, .5);--aia-primitive-neutral-400-a50: rgba(74, 74, 74, .5)}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: var(--aia-primitive-neutral-1000);--aia-border: var(--aia-primitive-neutral-700);--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-300);--aia-pill-font-size: 16px;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a105);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-0);--aia-option-bg: var(--aia-primitive-blue-50);--aia-option-color: var(--aia-primitive-neutral-150);--aia-option-color-selected: var(--aia-primitive-neutral-0);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-0);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: var(--aia-primitive-neutral-0);--aia-submit-color: var(--aia-primitive-neutral-1000);--aia-color-text-muted: #6b7280;--aia-skeleton-bg: var(--aia-primitive-neutral-750-a25);--aia-streak-rgb: 99, 102, 241;--aia-streak-glass-bg: rgba(99, 102, 241, .1);--aia-footer-hint-color: var(--aia-primitive-neutral-500);--aia-footer-brand-color: var(--aia-primitive-neutral-700);--aia-footer-badge-border: var(--aia-primitive-neutral-750-a50)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: var(--aia-primitive-neutral-0);--aia-border: var(--aia-primitive-neutral-500);--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-700);--aia-pill-font-size: 16px;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a15);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-1000);--aia-option-bg: var(--aia-primitive-neutral-250);--aia-option-color: var(--aia-primitive-neutral-900);--aia-option-color-selected: var(--aia-primitive-neutral-1000);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-1000);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: var(--aia-primitive-neutral-1000);--aia-submit-color: var(--aia-primitive-neutral-0);--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: var(--aia-primitive-neutral-150);--aia-streak-rgb: 255, 255, 255;--aia-streak-glass-bg: rgba(255, 255, 255, .1);--aia-footer-hint-color: var(--aia-primitive-neutral-700);--aia-footer-brand-color: var(--aia-primitive-neutral-500);--aia-footer-badge-border: var(--aia-primitive-neutral-500)}[data-aia-dropdown]{--aia-footer-row-height: 23px;--aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown],[data-aia-dropdown][data-options-position=above]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: var(--aia-footer-band);--aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));top:auto;bottom:100%;margin-top:0;margin-bottom:6px}[data-aia-dropdown][data-aia-has-products]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: 0px;--aia-grid-overlap-top: 0px;--aia-footer-fade-lead: 0px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack,[data-aia-dropdown][data-options-position=above] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer],[data-aia-dropdown][data-options-position=above] [data-aia-footer]{padding:0 8px var(--aia-footer-gap, 8px)}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff))}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .magicx-aia-footer,[data-aia-dropdown][data-options-position=above] .magicx-aia-footer{flex-direction:column-reverse}\n", ".magicx-aia-dropdown{position:absolute;left:0;right:0;top:100%;max-width:544px;margin-top:6px;display:flex;flex-direction:column;box-sizing:border-box;padding:10px 8px;overflow:hidden;container-type:inline-size;z-index:10;opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.4,0,.2,1);background:var(--aia-surface, #ffffff);border:1px solid var(--aia-dropdown-border, rgba(231, 231, 231, .5));border-radius:18px;box-shadow:var(--aia-dropdown-shadow, 0 8px 12px rgba(0, 0, 0, .05))}.magicx-aia-dropdown[data-aia-surface=glass]{background:transparent;border-color:transparent;box-shadow:#fff -3.2px -3.2px 3.2px -3.2px inset,#fff 6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,#ffffff26 -1.6px 0 0 -1.6px inset,#ffffff26 0 -1.6px 0 -1.6px inset,#ffffff4d 0 1.6px inset,#ffffff4d 1.6px 0 inset,inset 0 0 30px 5px #0000000d,#00000014 0 0 30px 2px;backdrop-filter:blur(30px)}.magicx-aia-dropdown-visible{opacity:1;pointer-events:auto}.magicx-aia-dropdown-pillbar{overflow:hidden}.magicx-aia-pill-scroll{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%)}.magicx-aia-pill-scroll::-webkit-scrollbar{display:none}.magicx-aia-skip{display:inline-flex;align-items:center;margin-inline-start:auto;flex-shrink:0;padding:5px 8px;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:var(--aia-skip-font-size, 10px);line-height:18px;color:var(--aia-skip-color, var(--aia-footer-hint-color, #505050));cursor:pointer;white-space:nowrap;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-skip:hover{color:var(--aia-skip-color-hover, var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb)));background:var(--aia-skip-hover-bg, var(--aia-option-bg, transparent))}.magicx-aia-skip:disabled{pointer-events:none;cursor:default;opacity:.5}.magicx-aia-footer{display:flex;flex-direction:column;gap:8px;padding:var(--aia-footer-gap, 8px) 8px 0;position:relative;z-index:3;pointer-events:none}.magicx-aia-footer-row{display:flex;align-items:center;justify-content:space-between}.magicx-aia-footer-hint-group{display:inline-flex;align-items:center;gap:5px}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{pointer-events:auto}.magicx-aia-footer-brand-link{display:inline-flex;align-items:center;gap:2px;text-decoration:none;cursor:pointer;transition:opacity .15s ease-out}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{background:var( --aia-footer-chip-bg, color-mix(in srgb, var(--aia-surface, #ffffff) 65%, transparent) );padding-inline:4px;border-radius:6px}.magicx-aia-footer-brand-link{background:var(--aia-footer-brand-pill-bg, var(--aia-surface, #ffffff));border-radius:999px;padding:2px 7px;gap:4px}.magicx-aia-footer-brand-link:hover{opacity:.7}.magicx-aia-footer-key{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:2px 6px;border:.5px solid var(--aia-footer-hint-color, #505050);border-radius:5px;font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-hint{font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-brand{font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}.magicx-aia-footer-badge{display:inline-flex;align-items:center;height:var(--aia-footer-row-height, 23px);padding:2.5px 5.5px;border:.5px solid var(--aia-footer-badge-border, rgba(189, 189, 189, .51));border-radius:999px;font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}@media (max-width: 768px){.magicx-aia-footer-hint-group{display:none}.magicx-aia-footer-row{justify-content:flex-end}}.magicx-aia-dropdown-skeleton-bars{display:flex;flex-direction:column;gap:20px;padding:7px 8px}.magicx-aia-dropdown-skeleton-bar{display:block;height:14px;border-radius:999px;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));opacity:.5;animation:aiaDropdownSkeletonPulse 1.4s ease-in-out infinite}.magicx-aia-dropdown-skeleton-bar:nth-child(2){animation-delay:.15s}.magicx-aia-dropdown-skeleton-bar:nth-child(3){animation-delay:.3s}@keyframes aiaDropdownSkeletonPulse{0%,to{opacity:.5}50%{opacity:.25}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: PillListComponent, selector: "aia-pill-list", inputs: ["pills", "activePillIndex", "rounded", "loading", "activeSelected"], outputs: ["selectPill"] }, { kind: "component", type: ProductStripComponent, selector: "aia-product-strip", inputs: ["products", "listboxId", "focusable"], outputs: ["select", "focusChange"] }, { kind: "component", type: SuggestionGridComponent, selector: "aia-suggestion-grid", inputs: ["options", "activeIndex", "listboxId", "loading", "groupKey"], outputs: ["select", "highlight"] }, { kind: "component", type: DateGridComponent, selector: "aia-date-grid", inputs: ["options", "activeIndex", "listboxId", "view", "selectedIso"], outputs: ["select", "highlight", "previousMonth", "nextMonth"] }, { kind: "component", type: StackComponent, selector: "aia-stack", inputs: ["space", "align"] }, { kind: "component", type: ClusterComponent, selector: "aia-cluster", inputs: ["gap", "align", "justify", "noWrap", "inline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AIAutocompleteDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteDropdownComponent, isStandalone: true, selector: "ai-autocomplete-dropdown", inputs: { controller: "controller", showPills: "showPills", showSkipButton: "showSkipButton", className: "className", mode: "mode" }, viewQueries: [{ propertyName: "dropdownRootRef", first: true, predicate: ["dropdownRoot"], descendants: true }, { propertyName: "scrollArrowRef", first: true, predicate: ["scrollArrow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"vm$ | async as vm\"\n  #dropdownRoot\n  [id]=\"controller.listboxId\"\n  role=\"listbox\"\n  data-aia-dropdown=\"\"\n  [attr.data-aia-loading]=\"vm.isLoading ? '' : null\"\n  [attr.data-mode]=\"resolvedMode\"\n  [attr.data-options-position]=\"vm.optionsPosition\"\n  [attr.data-aia-has-products]=\"vm.products.length > 0 ? '' : null\"\n  [class]=\"rootClass\"\n  [class.magicx-aia-dropdown-visible]=\"vm.isVisible\"\n  (mousedown)=\"preventBlur($event)\"\n>\n  <aia-stack space=\"8px\">\n    <aia-cluster\n      *ngIf=\"vm.showsPills || vm.showsSkip\"\n      class=\"magicx-aia-dropdown-pillbar\"\n      data-aia-pillbar=\"\"\n      [noWrap]=\"true\"\n    >\n      <!-- The scroll + right-edge fade live on this wrapper (not the bar) so\n           the skip button stays outside the masked region \u2014 pinned and fully\n           opaque while overflowing pills fade under it. Absent in a skip-only\n           row (pills rendered elsewhere via pillPlacement inline/hidden). -->\n      <span *ngIf=\"vm.showsPills\" class=\"magicx-aia-pill-scroll\" data-aia-pill-scroll=\"\">\n        <aia-pill-list\n          [pills]=\"vm.pills\"\n          [activePillIndex]=\"0\"\n          [activeSelected]=\"vm.isActivePillSelected\"\n          [rounded]=\"true\"\n          [loading]=\"vm.isLoading\"\n          (selectPill)=\"onPillClick($event)\"\n        ></aia-pill-list>\n      </span>\n      <button\n        *ngIf=\"vm.showsSkip\"\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"magicx-aia-skip\"\n        data-aia-skip=\"\"\n        [disabled]=\"vm.skipDisabled\"\n        [attr.aria-label]=\"vm.activePillLabel ? 'Skip ' + vm.activePillLabel : 'Skip'\"\n        (click)=\"onSkip()\"\n      >\n        skip\n      </button>\n    </aia-cluster>\n\n    <aia-suggestion-grid\n      *ngIf=\"vm.showsOptions\"\n      [options]=\"vm.options\"\n      [activeIndex]=\"vm.activeIndex\"\n      [listboxId]=\"controller.listboxId\"\n      [loading]=\"vm.isLoading\"\n      [groupKey]=\"vm.groupKey\"\n      [optionsPosition]=\"vm.optionsPosition\"\n      (select)=\"onSelect($event)\"\n      (highlight)=\"onHighlight($event)\"\n    ></aia-suggestion-grid>\n\n    <aia-date-grid\n      *ngIf=\"vm.showsDateGrid\"\n      [options]=\"vm.options\"\n      [activeIndex]=\"vm.activeIndex\"\n      [listboxId]=\"controller.listboxId\"\n      [view]=\"vm.dateView\"\n      [selectedIso]=\"vm.selectedDateIso\"\n      (select)=\"onSelect($event)\"\n      (highlight)=\"onHighlight($event)\"\n      (previousMonth)=\"onPreviousMonth()\"\n      (nextMonth)=\"onNextMonth()\"\n    ></aia-date-grid>\n\n    <div\n      *ngIf=\"vm.showsFallbackSkeleton\"\n      class=\"magicx-aia-dropdown-skeleton-bars\"\n      data-aia-skeleton-bars=\"\"\n    >\n      <span\n        *ngFor=\"let w of fallbackSkeletonBarWidths; trackBy: trackByWidth\"\n        class=\"magicx-aia-dropdown-skeleton-bar\"\n        [style.width.px]=\"w\"\n      ></span>\n    </div>\n\n    <!-- *ngIf, not just the section's own guard inside the component: the host\n         element is an in-flow child of .aia-stack (display:flex; gap:8px), so\n         an always-instantiated zero-height host would add a SECOND 8px gap\n         between the grid and the footer \u2014 in every dropdown, products or not.\n         The grid's --aia-grid-overlap-bottom is tuned for exactly one gap, so\n         the footer would land 8px below the band it is meant to cover. -->\n    <aia-product-strip\n      *ngIf=\"vm.products.length > 0\"\n      [products]=\"vm.products\"\n      [listboxId]=\"controller.listboxId\"\n      [focusable]=\"vm.isVisible\"\n      (select)=\"onProductSelect($event)\"\n      (focusChange)=\"onProductFocusChange($event)\"\n    ></aia-product-strip>\n\n    <footer class=\"magicx-aia-footer\" data-aia-footer=\"\">\n      <div class=\"magicx-aia-footer-row\">\n        <span class=\"magicx-aia-footer-hint-group\">\n          <kbd class=\"magicx-aia-footer-key\">{{ vm.footerKey }}</kbd>\n          <span class=\"magicx-aia-footer-hint\">{{ vm.footerHint }}</span>\n        </span>\n        <a\n          class=\"magicx-aia-footer-brand-link\"\n          [href]=\"brandHref\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"magicx-aia-footer-brand\">AI</span>\n          <span class=\"magicx-aia-footer-badge\">Autocomplete</span>\n        </a>\n      </div>\n    </footer>\n  </aia-stack>\n  <!-- \"More below\" arrow \u2014 an overlay on the panel, not a section of the\n       stack. Shown/positioned by the core's scroll-arrow controller (see\n       syncScrollArrow); markup mirrors vanilla's createScrollArrowButton. -->\n  <button\n    #scrollArrow\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"magicx-aia-scroll-arrow\"\n    data-aia-scroll-arrow=\"\"\n    [attr.aria-label]=\"scrollArrowLabel\"\n    aria-hidden=\"true\"\n  >\n    <svg\n      viewBox=\"0 0 16 16\"\n      width=\"14\"\n      height=\"14\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.75\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path d=\"M4 6.5 8 10.5l4-4\" />\n    </svg>\n  </button>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia){--aia-primitive-neutral-0: #000000;--aia-primitive-neutral-150: #1a1b1d;--aia-primitive-neutral-250: #323232;--aia-primitive-neutral-300: #333539;--aia-primitive-neutral-400: #4a4a4a;--aia-primitive-neutral-500: #505050;--aia-primitive-neutral-700: #b0b0b0;--aia-primitive-neutral-750: #bdbdbd;--aia-primitive-neutral-900: #e7e7e7;--aia-primitive-neutral-1000: #ffffff;--aia-primitive-blue-50: #eef2ff;--aia-primitive-neutral-750-a50: rgba(189, 189, 189, .51);--aia-primitive-neutral-750-a25: rgba(189, 189, 189, .25);--aia-primitive-neutral-750-a35: rgba(189, 189, 189, .35);--aia-primitive-neutral-750-a30: rgba(189, 189, 189, .3);--aia-primitive-neutral-750-a15: rgba(189, 189, 189, .15);--aia-primitive-neutral-750-a105: rgba(189, 189, 189, .105);--aia-primitive-neutral-700-a40: rgba(176, 176, 176, .4);--aia-primitive-neutral-900-a50: rgba(231, 231, 231, .5);--aia-primitive-neutral-400-a50: rgba(74, 74, 74, .5)}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: var(--aia-primitive-neutral-1000);--aia-border: var(--aia-primitive-neutral-700);--aia-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .08);--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-300);--aia-pill-font-size: 16px;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a105);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-0);--aia-option-bg: var(--aia-primitive-blue-50);--aia-option-color: var(--aia-primitive-neutral-150);--aia-option-color-selected: var(--aia-primitive-neutral-0);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-0);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: var(--aia-primitive-neutral-0);--aia-submit-color: var(--aia-primitive-neutral-1000);--aia-color-text-muted: #6b7280;--aia-skeleton-bg: var(--aia-primitive-neutral-750-a25);--aia-streak-rgb: 99, 102, 241;--aia-footer-hint-color: var(--aia-primitive-neutral-500);--aia-footer-brand-color: var(--aia-primitive-neutral-700);--aia-footer-badge-border: var(--aia-primitive-neutral-750-a50)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: var(--aia-primitive-neutral-0);--aia-border: var(--aia-primitive-neutral-500);--aia-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .25);--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-700);--aia-pill-font-size: 16px;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a15);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-1000);--aia-option-bg: var(--aia-primitive-neutral-250);--aia-option-color: var(--aia-primitive-neutral-900);--aia-option-color-selected: var(--aia-primitive-neutral-1000);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-1000);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: var(--aia-primitive-neutral-1000);--aia-submit-color: var(--aia-primitive-neutral-0);--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: var(--aia-primitive-neutral-150);--aia-streak-rgb: 255, 255, 255;--aia-footer-hint-color: var(--aia-primitive-neutral-700);--aia-footer-brand-color: var(--aia-primitive-neutral-500);--aia-footer-badge-border: var(--aia-primitive-neutral-500)}[data-aia-dropdown]{--aia-footer-row-height: 23px;--aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown],[data-aia-dropdown][data-options-position=above]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: var(--aia-footer-band);--aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));transform-origin:50% 100%;top:auto;bottom:100%;margin-top:0;margin-bottom:6px}[data-aia-dropdown][data-aia-has-products]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: 0px;--aia-grid-overlap-top: 0px;--aia-footer-fade-lead: 0px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack,[data-aia-dropdown][data-options-position=above] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer],[data-aia-dropdown][data-options-position=above] [data-aia-footer]{padding:0 0 var(--aia-footer-gap, 8px) 8px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff))}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .magicx-aia-footer,[data-aia-dropdown][data-options-position=above] .magicx-aia-footer{flex-direction:column-reverse}@media (min-width: 769px){[data-aia-dropdown] [data-aia-footer]:before,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before,:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{inset:0;background:var(--aia-surface, #ffffff)}}\n", ".magicx-aia-dropdown{position:absolute;left:0;right:0;top:100%;max-width:544px;margin-top:6px;display:flex;flex-direction:column;box-sizing:border-box;padding:10px 8px;overflow:hidden;container-type:inline-size;z-index:10;opacity:0;pointer-events:none;transform-origin:50% 0;transform:scaleY(var(--aia-dropdown-reveal-scale, .02));transition:opacity .4s cubic-bezier(.4,0,.2,1),transform 0s .4s;background:var(--aia-surface, #ffffff);border:1px solid var(--aia-dropdown-border, rgba(231, 231, 231, .5));border-radius:18px;box-shadow:var(--aia-dropdown-shadow, 0 8px 12px rgba(0, 0, 0, .05))}.magicx-aia-dropdown:has([data-aia-datepicker]){max-width:var(--aia-date-panel-width, 312px)}.magicx-aia-dropdown[data-aia-surface=glass]{background:transparent;border-color:transparent;box-shadow:#fff -3.2px -3.2px 3.2px -3.2px inset,#fff 6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,#ffffff26 -1.6px 0 0 -1.6px inset,#ffffff26 0 -1.6px 0 -1.6px inset,#ffffff4d 0 1.6px inset,#ffffff4d 1.6px 0 inset,inset 0 0 30px 5px #0000000d,#00000014 0 0 30px 2px;backdrop-filter:blur(30px)}.magicx-aia-dropdown-visible{opacity:1;pointer-events:auto;transform:scaleY(1);transition:opacity .1s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.22,1.28,.36,1)}.magicx-aia-scroll-arrow{position:absolute;left:50%;bottom:var(--aia-scroll-arrow-bottom, 8px);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 0 0 -16px;padding:0;border:1px solid var(--aia-scroll-arrow-border, var(--aia-dropdown-border, rgba(231, 231, 231, .5)));border-radius:50%;background:var(--aia-scroll-arrow-bg, var(--aia-surface, #ffffff));color:var( --aia-scroll-arrow-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );box-shadow:var(--aia-scroll-arrow-shadow, 0 2px 8px rgba(0, 0, 0, .12));cursor:pointer;pointer-events:none;transform:translateY(calc(100% + var(--aia-scroll-arrow-bottom, 8px) + 4px));transition:transform .18s cubic-bezier(.4,0,.2,1)}.magicx-aia-scroll-arrow[data-aia-visible]{pointer-events:auto;transform:translateY(0)}.magicx-aia-scroll-arrow:hover{color:var( --aia-scroll-arrow-color-hover, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) )}@media (prefers-reduced-motion: reduce){.magicx-aia-scroll-arrow,.magicx-aia-dropdown{transition-duration:0s}}.magicx-aia-dropdown-pillbar{overflow:hidden}.magicx-aia-pill-scroll{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%)}.magicx-aia-pill-scroll::-webkit-scrollbar{display:none}.magicx-aia-skip{display:inline-flex;align-items:center;margin-inline-start:auto;flex-shrink:0;padding:5px 8px;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:var(--aia-skip-font-size, 10px);line-height:18px;color:var(--aia-skip-color, var(--aia-footer-hint-color, #505050));cursor:pointer;white-space:nowrap;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-skip:hover{color:var(--aia-skip-color-hover, var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb)));background:var(--aia-skip-hover-bg, var(--aia-option-bg, transparent))}.magicx-aia-skip:disabled{pointer-events:none;cursor:default;opacity:.5}.magicx-aia-footer{display:flex;flex-direction:column;gap:8px;padding:var(--aia-footer-gap, 8px) 0 0 8px;position:relative;z-index:3;pointer-events:none}.magicx-aia-footer-row{display:flex;align-items:center;justify-content:space-between}.magicx-aia-footer-hint-group{display:inline-flex;align-items:center;gap:5px}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{pointer-events:auto}.magicx-aia-footer-brand-link{display:inline-flex;align-items:center;gap:2px;text-decoration:none;cursor:pointer;transition:opacity .15s ease-out}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{background:var( --aia-footer-chip-bg, color-mix(in srgb, var(--aia-surface, #ffffff) 65%, transparent) );padding-inline:4px;border-radius:6px}.magicx-aia-footer-brand-link{background:var(--aia-footer-brand-pill-bg, var(--aia-surface, #ffffff));border-radius:999px;padding:2px 4px;gap:4px}.magicx-aia-footer-brand-link:hover{opacity:.7}.magicx-aia-footer-key{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:2px 6px;border:.5px solid var(--aia-footer-hint-color, #505050);border-radius:5px;font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-hint{font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-brand{font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}.magicx-aia-footer-badge{display:inline-flex;align-items:center;height:var(--aia-footer-row-height, 23px);padding:2.5px 5.5px;border:.5px solid var(--aia-footer-badge-border, rgba(189, 189, 189, .51));border-radius:999px;font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}@media (max-width: 768px){.magicx-aia-footer-hint-group{display:none}.magicx-aia-footer-row{justify-content:flex-end}}.magicx-aia-dropdown-skeleton-bars{display:flex;flex-direction:column;gap:20px;padding:7px 8px}.magicx-aia-dropdown-skeleton-bar{display:block;height:14px;border-radius:999px;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));opacity:.5;animation:aiaDropdownSkeletonPulse 1.4s ease-in-out infinite}.magicx-aia-dropdown-skeleton-bar:nth-child(2){animation-delay:.15s}.magicx-aia-dropdown-skeleton-bar:nth-child(3){animation-delay:.3s}@keyframes aiaDropdownSkeletonPulse{0%,to{opacity:.5}50%{opacity:.25}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: PillListComponent, selector: "aia-pill-list", inputs: ["pills", "activePillIndex", "rounded", "loading", "activeSelected"], outputs: ["selectPill"] }, { kind: "component", type: ProductStripComponent, selector: "aia-product-strip", inputs: ["products", "listboxId", "focusable"], outputs: ["select", "focusChange"] }, { kind: "component", type: SuggestionGridComponent, selector: "aia-suggestion-grid", inputs: ["options", "activeIndex", "listboxId", "loading", "groupKey", "optionsPosition"], outputs: ["select", "highlight"] }, { kind: "component", type: DateGridComponent, selector: "aia-date-grid", inputs: ["options", "activeIndex", "listboxId", "view", "selectedIso"], outputs: ["select", "highlight", "previousMonth", "nextMonth"] }, { kind: "component", type: StackComponent, selector: "aia-stack", inputs: ["space", "align"] }, { kind: "component", type: ClusterComponent, selector: "aia-cluster", inputs: ["gap", "align", "justify", "noWrap", "inline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: "ai-autocomplete-dropdown", standalone: true, imports: [
@@ -789,7 +916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DateGridComponent,
                         StackComponent,
                         ClusterComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  *ngIf=\"vm$ | async as vm\"\n  [id]=\"controller.listboxId\"\n  role=\"listbox\"\n  data-aia-dropdown=\"\"\n  [attr.data-aia-loading]=\"vm.isLoading ? '' : null\"\n  [attr.data-mode]=\"resolvedMode\"\n  [attr.data-options-position]=\"vm.optionsPosition\"\n  [attr.data-aia-has-products]=\"vm.products.length > 0 ? '' : null\"\n  [class]=\"rootClass\"\n  [class.magicx-aia-dropdown-visible]=\"vm.isVisible\"\n  (mousedown)=\"preventBlur($event)\"\n>\n  <aia-stack space=\"8px\">\n    <aia-cluster\n      *ngIf=\"vm.showsPills || vm.showsSkip\"\n      class=\"magicx-aia-dropdown-pillbar\"\n      data-aia-pillbar=\"\"\n      [noWrap]=\"true\"\n    >\n      <!-- The scroll + right-edge fade live on this wrapper (not the bar) so\n           the skip button stays outside the masked region \u2014 pinned and fully\n           opaque while overflowing pills fade under it. Absent in a skip-only\n           row (pills rendered elsewhere via pillPlacement inline/hidden). -->\n      <span *ngIf=\"vm.showsPills\" class=\"magicx-aia-pill-scroll\" data-aia-pill-scroll=\"\">\n        <aia-pill-list\n          [pills]=\"vm.pills\"\n          [activePillIndex]=\"0\"\n          [activeSelected]=\"vm.isActivePillSelected\"\n          [rounded]=\"true\"\n          [loading]=\"vm.isLoading\"\n          (selectPill)=\"onPillClick($event)\"\n        ></aia-pill-list>\n      </span>\n      <button\n        *ngIf=\"vm.showsSkip\"\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"magicx-aia-skip\"\n        data-aia-skip=\"\"\n        [disabled]=\"vm.skipDisabled\"\n        [attr.aria-label]=\"vm.activePillLabel ? 'Skip ' + vm.activePillLabel : 'Skip'\"\n        (click)=\"onSkip()\"\n      >\n        skip\n      </button>\n    </aia-cluster>\n\n    <aia-suggestion-grid\n      *ngIf=\"vm.showsOptions\"\n      [options]=\"vm.options\"\n      [activeIndex]=\"vm.activeIndex\"\n      [listboxId]=\"controller.listboxId\"\n      [loading]=\"vm.isLoading\"\n      [groupKey]=\"vm.groupKey\"\n      (select)=\"onSelect($event)\"\n      (highlight)=\"onHighlight($event)\"\n    ></aia-suggestion-grid>\n\n    <aia-date-grid\n      *ngIf=\"vm.showsDateGrid\"\n      [options]=\"vm.options\"\n      [activeIndex]=\"vm.activeIndex\"\n      [listboxId]=\"controller.listboxId\"\n      [view]=\"vm.dateView\"\n      [selectedIso]=\"vm.selectedDateIso\"\n      (select)=\"onSelect($event)\"\n      (highlight)=\"onHighlight($event)\"\n      (previousMonth)=\"onPreviousMonth()\"\n      (nextMonth)=\"onNextMonth()\"\n    ></aia-date-grid>\n\n    <div\n      *ngIf=\"vm.showsFallbackSkeleton\"\n      class=\"magicx-aia-dropdown-skeleton-bars\"\n      data-aia-skeleton-bars=\"\"\n    >\n      <span\n        *ngFor=\"let w of fallbackSkeletonBarWidths; trackBy: trackByWidth\"\n        class=\"magicx-aia-dropdown-skeleton-bar\"\n        [style.width.px]=\"w\"\n      ></span>\n    </div>\n\n    <!-- *ngIf, not just the section's own guard inside the component: the host\n         element is an in-flow child of .aia-stack (display:flex; gap:8px), so\n         an always-instantiated zero-height host would add a SECOND 8px gap\n         between the grid and the footer \u2014 in every dropdown, products or not.\n         The grid's --aia-grid-overlap-bottom is tuned for exactly one gap, so\n         the footer would land 8px below the band it is meant to cover. -->\n    <aia-product-strip\n      *ngIf=\"vm.products.length > 0\"\n      [products]=\"vm.products\"\n      [listboxId]=\"controller.listboxId\"\n      [focusable]=\"vm.isVisible\"\n      (select)=\"onProductSelect($event)\"\n      (focusChange)=\"onProductFocusChange($event)\"\n    ></aia-product-strip>\n\n    <footer class=\"magicx-aia-footer\" data-aia-footer=\"\">\n      <div class=\"magicx-aia-footer-row\">\n        <span class=\"magicx-aia-footer-hint-group\">\n          <kbd class=\"magicx-aia-footer-key\">{{ vm.footerKey }}</kbd>\n          <span class=\"magicx-aia-footer-hint\">{{ vm.footerHint }}</span>\n        </span>\n        <a\n          class=\"magicx-aia-footer-brand-link\"\n          [href]=\"brandHref\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"magicx-aia-footer-brand\">AI</span>\n          <span class=\"magicx-aia-footer-badge\">Autocomplete</span>\n        </a>\n      </div>\n    </footer>\n  </aia-stack>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia){--aia-primitive-neutral-0: #000000;--aia-primitive-neutral-150: #1a1b1d;--aia-primitive-neutral-250: #323232;--aia-primitive-neutral-300: #333539;--aia-primitive-neutral-400: #4a4a4a;--aia-primitive-neutral-500: #505050;--aia-primitive-neutral-700: #b0b0b0;--aia-primitive-neutral-750: #bdbdbd;--aia-primitive-neutral-900: #e7e7e7;--aia-primitive-neutral-1000: #ffffff;--aia-primitive-blue-50: #eef2ff;--aia-primitive-neutral-750-a50: rgba(189, 189, 189, .51);--aia-primitive-neutral-750-a25: rgba(189, 189, 189, .25);--aia-primitive-neutral-750-a35: rgba(189, 189, 189, .35);--aia-primitive-neutral-750-a30: rgba(189, 189, 189, .3);--aia-primitive-neutral-750-a15: rgba(189, 189, 189, .15);--aia-primitive-neutral-750-a105: rgba(189, 189, 189, .105);--aia-primitive-neutral-700-a40: rgba(176, 176, 176, .4);--aia-primitive-neutral-900-a50: rgba(231, 231, 231, .5);--aia-primitive-neutral-400-a50: rgba(74, 74, 74, .5)}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: var(--aia-primitive-neutral-1000);--aia-border: var(--aia-primitive-neutral-700);--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-300);--aia-pill-font-size: 16px;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a105);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-0);--aia-option-bg: var(--aia-primitive-blue-50);--aia-option-color: var(--aia-primitive-neutral-150);--aia-option-color-selected: var(--aia-primitive-neutral-0);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-0);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: var(--aia-primitive-neutral-0);--aia-submit-color: var(--aia-primitive-neutral-1000);--aia-color-text-muted: #6b7280;--aia-skeleton-bg: var(--aia-primitive-neutral-750-a25);--aia-streak-rgb: 99, 102, 241;--aia-streak-glass-bg: rgba(99, 102, 241, .1);--aia-footer-hint-color: var(--aia-primitive-neutral-500);--aia-footer-brand-color: var(--aia-primitive-neutral-700);--aia-footer-badge-border: var(--aia-primitive-neutral-750-a50)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: var(--aia-primitive-neutral-0);--aia-border: var(--aia-primitive-neutral-500);--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-700);--aia-pill-font-size: 16px;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a15);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-1000);--aia-option-bg: var(--aia-primitive-neutral-250);--aia-option-color: var(--aia-primitive-neutral-900);--aia-option-color-selected: var(--aia-primitive-neutral-1000);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-1000);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: var(--aia-primitive-neutral-1000);--aia-submit-color: var(--aia-primitive-neutral-0);--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: var(--aia-primitive-neutral-150);--aia-streak-rgb: 255, 255, 255;--aia-streak-glass-bg: rgba(255, 255, 255, .1);--aia-footer-hint-color: var(--aia-primitive-neutral-700);--aia-footer-brand-color: var(--aia-primitive-neutral-500);--aia-footer-badge-border: var(--aia-primitive-neutral-500)}[data-aia-dropdown]{--aia-footer-row-height: 23px;--aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown],[data-aia-dropdown][data-options-position=above]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: var(--aia-footer-band);--aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));top:auto;bottom:100%;margin-top:0;margin-bottom:6px}[data-aia-dropdown][data-aia-has-products]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: 0px;--aia-grid-overlap-top: 0px;--aia-footer-fade-lead: 0px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack,[data-aia-dropdown][data-options-position=above] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer],[data-aia-dropdown][data-options-position=above] [data-aia-footer]{padding:0 8px var(--aia-footer-gap, 8px)}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff))}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .magicx-aia-footer,[data-aia-dropdown][data-options-position=above] .magicx-aia-footer{flex-direction:column-reverse}\n", ".magicx-aia-dropdown{position:absolute;left:0;right:0;top:100%;max-width:544px;margin-top:6px;display:flex;flex-direction:column;box-sizing:border-box;padding:10px 8px;overflow:hidden;container-type:inline-size;z-index:10;opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.4,0,.2,1);background:var(--aia-surface, #ffffff);border:1px solid var(--aia-dropdown-border, rgba(231, 231, 231, .5));border-radius:18px;box-shadow:var(--aia-dropdown-shadow, 0 8px 12px rgba(0, 0, 0, .05))}.magicx-aia-dropdown[data-aia-surface=glass]{background:transparent;border-color:transparent;box-shadow:#fff -3.2px -3.2px 3.2px -3.2px inset,#fff 6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,#ffffff26 -1.6px 0 0 -1.6px inset,#ffffff26 0 -1.6px 0 -1.6px inset,#ffffff4d 0 1.6px inset,#ffffff4d 1.6px 0 inset,inset 0 0 30px 5px #0000000d,#00000014 0 0 30px 2px;backdrop-filter:blur(30px)}.magicx-aia-dropdown-visible{opacity:1;pointer-events:auto}.magicx-aia-dropdown-pillbar{overflow:hidden}.magicx-aia-pill-scroll{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%)}.magicx-aia-pill-scroll::-webkit-scrollbar{display:none}.magicx-aia-skip{display:inline-flex;align-items:center;margin-inline-start:auto;flex-shrink:0;padding:5px 8px;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:var(--aia-skip-font-size, 10px);line-height:18px;color:var(--aia-skip-color, var(--aia-footer-hint-color, #505050));cursor:pointer;white-space:nowrap;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-skip:hover{color:var(--aia-skip-color-hover, var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb)));background:var(--aia-skip-hover-bg, var(--aia-option-bg, transparent))}.magicx-aia-skip:disabled{pointer-events:none;cursor:default;opacity:.5}.magicx-aia-footer{display:flex;flex-direction:column;gap:8px;padding:var(--aia-footer-gap, 8px) 8px 0;position:relative;z-index:3;pointer-events:none}.magicx-aia-footer-row{display:flex;align-items:center;justify-content:space-between}.magicx-aia-footer-hint-group{display:inline-flex;align-items:center;gap:5px}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{pointer-events:auto}.magicx-aia-footer-brand-link{display:inline-flex;align-items:center;gap:2px;text-decoration:none;cursor:pointer;transition:opacity .15s ease-out}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{background:var( --aia-footer-chip-bg, color-mix(in srgb, var(--aia-surface, #ffffff) 65%, transparent) );padding-inline:4px;border-radius:6px}.magicx-aia-footer-brand-link{background:var(--aia-footer-brand-pill-bg, var(--aia-surface, #ffffff));border-radius:999px;padding:2px 7px;gap:4px}.magicx-aia-footer-brand-link:hover{opacity:.7}.magicx-aia-footer-key{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:2px 6px;border:.5px solid var(--aia-footer-hint-color, #505050);border-radius:5px;font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-hint{font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-brand{font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}.magicx-aia-footer-badge{display:inline-flex;align-items:center;height:var(--aia-footer-row-height, 23px);padding:2.5px 5.5px;border:.5px solid var(--aia-footer-badge-border, rgba(189, 189, 189, .51));border-radius:999px;font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}@media (max-width: 768px){.magicx-aia-footer-hint-group{display:none}.magicx-aia-footer-row{justify-content:flex-end}}.magicx-aia-dropdown-skeleton-bars{display:flex;flex-direction:column;gap:20px;padding:7px 8px}.magicx-aia-dropdown-skeleton-bar{display:block;height:14px;border-radius:999px;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));opacity:.5;animation:aiaDropdownSkeletonPulse 1.4s ease-in-out infinite}.magicx-aia-dropdown-skeleton-bar:nth-child(2){animation-delay:.15s}.magicx-aia-dropdown-skeleton-bar:nth-child(3){animation-delay:.3s}@keyframes aiaDropdownSkeletonPulse{0%,to{opacity:.5}50%{opacity:.25}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  *ngIf=\"vm$ | async as vm\"\n  #dropdownRoot\n  [id]=\"controller.listboxId\"\n  role=\"listbox\"\n  data-aia-dropdown=\"\"\n  [attr.data-aia-loading]=\"vm.isLoading ? '' : null\"\n  [attr.data-mode]=\"resolvedMode\"\n  [attr.data-options-position]=\"vm.optionsPosition\"\n  [attr.data-aia-has-products]=\"vm.products.length > 0 ? '' : null\"\n  [class]=\"rootClass\"\n  [class.magicx-aia-dropdown-visible]=\"vm.isVisible\"\n  (mousedown)=\"preventBlur($event)\"\n>\n  <aia-stack space=\"8px\">\n    <aia-cluster\n      *ngIf=\"vm.showsPills || vm.showsSkip\"\n      class=\"magicx-aia-dropdown-pillbar\"\n      data-aia-pillbar=\"\"\n      [noWrap]=\"true\"\n    >\n      <!-- The scroll + right-edge fade live on this wrapper (not the bar) so\n           the skip button stays outside the masked region \u2014 pinned and fully\n           opaque while overflowing pills fade under it. Absent in a skip-only\n           row (pills rendered elsewhere via pillPlacement inline/hidden). -->\n      <span *ngIf=\"vm.showsPills\" class=\"magicx-aia-pill-scroll\" data-aia-pill-scroll=\"\">\n        <aia-pill-list\n          [pills]=\"vm.pills\"\n          [activePillIndex]=\"0\"\n          [activeSelected]=\"vm.isActivePillSelected\"\n          [rounded]=\"true\"\n          [loading]=\"vm.isLoading\"\n          (selectPill)=\"onPillClick($event)\"\n        ></aia-pill-list>\n      </span>\n      <button\n        *ngIf=\"vm.showsSkip\"\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"magicx-aia-skip\"\n        data-aia-skip=\"\"\n        [disabled]=\"vm.skipDisabled\"\n        [attr.aria-label]=\"vm.activePillLabel ? 'Skip ' + vm.activePillLabel : 'Skip'\"\n        (click)=\"onSkip()\"\n      >\n        skip\n      </button>\n    </aia-cluster>\n\n    <aia-suggestion-grid\n      *ngIf=\"vm.showsOptions\"\n      [options]=\"vm.options\"\n      [activeIndex]=\"vm.activeIndex\"\n      [listboxId]=\"controller.listboxId\"\n      [loading]=\"vm.isLoading\"\n      [groupKey]=\"vm.groupKey\"\n      [optionsPosition]=\"vm.optionsPosition\"\n      (select)=\"onSelect($event)\"\n      (highlight)=\"onHighlight($event)\"\n    ></aia-suggestion-grid>\n\n    <aia-date-grid\n      *ngIf=\"vm.showsDateGrid\"\n      [options]=\"vm.options\"\n      [activeIndex]=\"vm.activeIndex\"\n      [listboxId]=\"controller.listboxId\"\n      [view]=\"vm.dateView\"\n      [selectedIso]=\"vm.selectedDateIso\"\n      (select)=\"onSelect($event)\"\n      (highlight)=\"onHighlight($event)\"\n      (previousMonth)=\"onPreviousMonth()\"\n      (nextMonth)=\"onNextMonth()\"\n    ></aia-date-grid>\n\n    <div\n      *ngIf=\"vm.showsFallbackSkeleton\"\n      class=\"magicx-aia-dropdown-skeleton-bars\"\n      data-aia-skeleton-bars=\"\"\n    >\n      <span\n        *ngFor=\"let w of fallbackSkeletonBarWidths; trackBy: trackByWidth\"\n        class=\"magicx-aia-dropdown-skeleton-bar\"\n        [style.width.px]=\"w\"\n      ></span>\n    </div>\n\n    <!-- *ngIf, not just the section's own guard inside the component: the host\n         element is an in-flow child of .aia-stack (display:flex; gap:8px), so\n         an always-instantiated zero-height host would add a SECOND 8px gap\n         between the grid and the footer \u2014 in every dropdown, products or not.\n         The grid's --aia-grid-overlap-bottom is tuned for exactly one gap, so\n         the footer would land 8px below the band it is meant to cover. -->\n    <aia-product-strip\n      *ngIf=\"vm.products.length > 0\"\n      [products]=\"vm.products\"\n      [listboxId]=\"controller.listboxId\"\n      [focusable]=\"vm.isVisible\"\n      (select)=\"onProductSelect($event)\"\n      (focusChange)=\"onProductFocusChange($event)\"\n    ></aia-product-strip>\n\n    <footer class=\"magicx-aia-footer\" data-aia-footer=\"\">\n      <div class=\"magicx-aia-footer-row\">\n        <span class=\"magicx-aia-footer-hint-group\">\n          <kbd class=\"magicx-aia-footer-key\">{{ vm.footerKey }}</kbd>\n          <span class=\"magicx-aia-footer-hint\">{{ vm.footerHint }}</span>\n        </span>\n        <a\n          class=\"magicx-aia-footer-brand-link\"\n          [href]=\"brandHref\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"magicx-aia-footer-brand\">AI</span>\n          <span class=\"magicx-aia-footer-badge\">Autocomplete</span>\n        </a>\n      </div>\n    </footer>\n  </aia-stack>\n  <!-- \"More below\" arrow \u2014 an overlay on the panel, not a section of the\n       stack. Shown/positioned by the core's scroll-arrow controller (see\n       syncScrollArrow); markup mirrors vanilla's createScrollArrowButton. -->\n  <button\n    #scrollArrow\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"magicx-aia-scroll-arrow\"\n    data-aia-scroll-arrow=\"\"\n    [attr.aria-label]=\"scrollArrowLabel\"\n    aria-hidden=\"true\"\n  >\n    <svg\n      viewBox=\"0 0 16 16\"\n      width=\"14\"\n      height=\"14\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.75\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path d=\"M4 6.5 8 10.5l4-4\" />\n    </svg>\n  </button>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia){--aia-primitive-neutral-0: #000000;--aia-primitive-neutral-150: #1a1b1d;--aia-primitive-neutral-250: #323232;--aia-primitive-neutral-300: #333539;--aia-primitive-neutral-400: #4a4a4a;--aia-primitive-neutral-500: #505050;--aia-primitive-neutral-700: #b0b0b0;--aia-primitive-neutral-750: #bdbdbd;--aia-primitive-neutral-900: #e7e7e7;--aia-primitive-neutral-1000: #ffffff;--aia-primitive-blue-50: #eef2ff;--aia-primitive-neutral-750-a50: rgba(189, 189, 189, .51);--aia-primitive-neutral-750-a25: rgba(189, 189, 189, .25);--aia-primitive-neutral-750-a35: rgba(189, 189, 189, .35);--aia-primitive-neutral-750-a30: rgba(189, 189, 189, .3);--aia-primitive-neutral-750-a15: rgba(189, 189, 189, .15);--aia-primitive-neutral-750-a105: rgba(189, 189, 189, .105);--aia-primitive-neutral-700-a40: rgba(176, 176, 176, .4);--aia-primitive-neutral-900-a50: rgba(231, 231, 231, .5);--aia-primitive-neutral-400-a50: rgba(74, 74, 74, .5)}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: var(--aia-primitive-neutral-1000);--aia-border: var(--aia-primitive-neutral-700);--aia-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .08);--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-300);--aia-pill-font-size: 16px;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a105);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-0);--aia-option-bg: var(--aia-primitive-blue-50);--aia-option-color: var(--aia-primitive-neutral-150);--aia-option-color-selected: var(--aia-primitive-neutral-0);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-0);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: var(--aia-primitive-neutral-0);--aia-submit-color: var(--aia-primitive-neutral-1000);--aia-color-text-muted: #6b7280;--aia-skeleton-bg: var(--aia-primitive-neutral-750-a25);--aia-streak-rgb: 99, 102, 241;--aia-footer-hint-color: var(--aia-primitive-neutral-500);--aia-footer-brand-color: var(--aia-primitive-neutral-700);--aia-footer-badge-border: var(--aia-primitive-neutral-750-a50)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: var(--aia-primitive-neutral-0);--aia-border: var(--aia-primitive-neutral-500);--aia-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .25);--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: var(--aia-primitive-neutral-750);--aia-pill-color: var(--aia-primitive-neutral-700);--aia-pill-font-size: 16px;--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a15);--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);--aia-completed-pill-color: var(--aia-primitive-neutral-1000);--aia-option-bg: var(--aia-primitive-neutral-250);--aia-option-color: var(--aia-primitive-neutral-900);--aia-option-color-selected: var(--aia-primitive-neutral-1000);--aia-option-font-size: 16px;--aia-written-text-color: var(--aia-primitive-neutral-1000);--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: var(--aia-primitive-neutral-1000);--aia-submit-color: var(--aia-primitive-neutral-0);--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: var(--aia-primitive-neutral-150);--aia-streak-rgb: 255, 255, 255;--aia-footer-hint-color: var(--aia-primitive-neutral-700);--aia-footer-brand-color: var(--aia-primitive-neutral-500);--aia-footer-badge-border: var(--aia-primitive-neutral-500)}[data-aia-dropdown]{--aia-footer-row-height: 23px;--aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown],[data-aia-dropdown][data-options-position=above]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: var(--aia-footer-band);--aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));transform-origin:50% 100%;top:auto;bottom:100%;margin-top:0;margin-bottom:6px}[data-aia-dropdown][data-aia-has-products]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: 0px;--aia-grid-overlap-top: 0px;--aia-footer-fade-lead: 0px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack,[data-aia-dropdown][data-options-position=above] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer],[data-aia-dropdown][data-options-position=above] [data-aia-footer]{padding:0 0 var(--aia-footer-gap, 8px) 8px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff))}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .magicx-aia-footer,[data-aia-dropdown][data-options-position=above] .magicx-aia-footer{flex-direction:column-reverse}@media (min-width: 769px){[data-aia-dropdown] [data-aia-footer]:before,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before,:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{inset:0;background:var(--aia-surface, #ffffff)}}\n", ".magicx-aia-dropdown{position:absolute;left:0;right:0;top:100%;max-width:544px;margin-top:6px;display:flex;flex-direction:column;box-sizing:border-box;padding:10px 8px;overflow:hidden;container-type:inline-size;z-index:10;opacity:0;pointer-events:none;transform-origin:50% 0;transform:scaleY(var(--aia-dropdown-reveal-scale, .02));transition:opacity .4s cubic-bezier(.4,0,.2,1),transform 0s .4s;background:var(--aia-surface, #ffffff);border:1px solid var(--aia-dropdown-border, rgba(231, 231, 231, .5));border-radius:18px;box-shadow:var(--aia-dropdown-shadow, 0 8px 12px rgba(0, 0, 0, .05))}.magicx-aia-dropdown:has([data-aia-datepicker]){max-width:var(--aia-date-panel-width, 312px)}.magicx-aia-dropdown[data-aia-surface=glass]{background:transparent;border-color:transparent;box-shadow:#fff -3.2px -3.2px 3.2px -3.2px inset,#fff 6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,#ffffff26 -1.6px 0 0 -1.6px inset,#ffffff26 0 -1.6px 0 -1.6px inset,#ffffff4d 0 1.6px inset,#ffffff4d 1.6px 0 inset,inset 0 0 30px 5px #0000000d,#00000014 0 0 30px 2px;backdrop-filter:blur(30px)}.magicx-aia-dropdown-visible{opacity:1;pointer-events:auto;transform:scaleY(1);transition:opacity .1s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.22,1.28,.36,1)}.magicx-aia-scroll-arrow{position:absolute;left:50%;bottom:var(--aia-scroll-arrow-bottom, 8px);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 0 0 -16px;padding:0;border:1px solid var(--aia-scroll-arrow-border, var(--aia-dropdown-border, rgba(231, 231, 231, .5)));border-radius:50%;background:var(--aia-scroll-arrow-bg, var(--aia-surface, #ffffff));color:var( --aia-scroll-arrow-color, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)) );box-shadow:var(--aia-scroll-arrow-shadow, 0 2px 8px rgba(0, 0, 0, .12));cursor:pointer;pointer-events:none;transform:translateY(calc(100% + var(--aia-scroll-arrow-bottom, 8px) + 4px));transition:transform .18s cubic-bezier(.4,0,.2,1)}.magicx-aia-scroll-arrow[data-aia-visible]{pointer-events:auto;transform:translateY(0)}.magicx-aia-scroll-arrow:hover{color:var( --aia-scroll-arrow-color-hover, var(--aia-option-color-selected, var(--aia-color-text-default, #fff)) )}@media (prefers-reduced-motion: reduce){.magicx-aia-scroll-arrow,.magicx-aia-dropdown{transition-duration:0s}}.magicx-aia-dropdown-pillbar{overflow:hidden}.magicx-aia-pill-scroll{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%)}.magicx-aia-pill-scroll::-webkit-scrollbar{display:none}.magicx-aia-skip{display:inline-flex;align-items:center;margin-inline-start:auto;flex-shrink:0;padding:5px 8px;border:none;border-radius:6px;background:transparent;font-family:inherit;font-size:var(--aia-skip-font-size, 10px);line-height:18px;color:var(--aia-skip-color, var(--aia-footer-hint-color, #505050));cursor:pointer;white-space:nowrap;transition:color .15s ease-out,background-color .15s ease-out}.magicx-aia-skip:hover{color:var(--aia-skip-color-hover, var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb)));background:var(--aia-skip-hover-bg, var(--aia-option-bg, transparent))}.magicx-aia-skip:disabled{pointer-events:none;cursor:default;opacity:.5}.magicx-aia-footer{display:flex;flex-direction:column;gap:8px;padding:var(--aia-footer-gap, 8px) 0 0 8px;position:relative;z-index:3;pointer-events:none}.magicx-aia-footer-row{display:flex;align-items:center;justify-content:space-between}.magicx-aia-footer-hint-group{display:inline-flex;align-items:center;gap:5px}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{pointer-events:auto}.magicx-aia-footer-brand-link{display:inline-flex;align-items:center;gap:2px;text-decoration:none;cursor:pointer;transition:opacity .15s ease-out}.magicx-aia-footer-hint-group,.magicx-aia-footer-brand-link{background:var( --aia-footer-chip-bg, color-mix(in srgb, var(--aia-surface, #ffffff) 65%, transparent) );padding-inline:4px;border-radius:6px}.magicx-aia-footer-brand-link{background:var(--aia-footer-brand-pill-bg, var(--aia-surface, #ffffff));border-radius:999px;padding:2px 4px;gap:4px}.magicx-aia-footer-brand-link:hover{opacity:.7}.magicx-aia-footer-key{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:2px 6px;border:.5px solid var(--aia-footer-hint-color, #505050);border-radius:5px;font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-hint{font-family:inherit;font-size:11px;line-height:18px;color:var(--aia-footer-hint-color, #505050)}.magicx-aia-footer-brand{font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}.magicx-aia-footer-badge{display:inline-flex;align-items:center;height:var(--aia-footer-row-height, 23px);padding:2.5px 5.5px;border:.5px solid var(--aia-footer-badge-border, rgba(189, 189, 189, .51));border-radius:999px;font-family:inherit;font-size:10px;line-height:18px;color:var(--aia-footer-brand-color, #b0b0b0)}@media (max-width: 768px){.magicx-aia-footer-hint-group{display:none}.magicx-aia-footer-row{justify-content:flex-end}}.magicx-aia-dropdown-skeleton-bars{display:flex;flex-direction:column;gap:20px;padding:7px 8px}.magicx-aia-dropdown-skeleton-bar{display:block;height:14px;border-radius:999px;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));opacity:.5;animation:aiaDropdownSkeletonPulse 1.4s ease-in-out infinite}.magicx-aia-dropdown-skeleton-bar:nth-child(2){animation-delay:.15s}.magicx-aia-dropdown-skeleton-bar:nth-child(3){animation-delay:.3s}@keyframes aiaDropdownSkeletonPulse{0%,to{opacity:.5}50%{opacity:.25}}\n"] }]
         }], propDecorators: { controller: [{
                 type: Input
             }], showPills: [{
@@ -800,6 +927,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], mode: [{
                 type: Input
+            }], dropdownRootRef: [{
+                type: ViewChild,
+                args: ["dropdownRoot", { static: false }]
+            }], scrollArrowRef: [{
+                type: ViewChild,
+                args: ["scrollArrow", { static: false }]
             }] } });
 
 /**
@@ -1178,7 +1311,7 @@ function computeDropdown(s, optionsPosition) {
                 // parameter the server matched it to, so the calendar isn't unlabelled.
                 {
                     type: editingIdentified.type,
-                    text: editingIdentified.type,
+                    text: identifiedParamLabel(editingIdentified.type),
                     required: true,
                     options: [],
                 }
@@ -1845,7 +1978,7 @@ AIAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             useExisting: forwardRef(() => AIAutocompleteComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }, { propertyName: "pillContainerRef", first: true, predicate: ["pillContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  class=\"magicx-aia magicx-aia-container\"\n  [attr.data-pill-placement]=\"pillPlacement\"\n  [attr.data-options-position]=\"optionsPosition\"\n  [attr.data-animations]=\"animations ? 'on' : 'off'\"\n  [attr.data-mode]=\"resolvedMode\"\n>\n  <ai-autocomplete-dropdown\n    *ngIf=\"controller\"\n    [controller]=\"controller\"\n    [showPills]=\"showDropdownPills\"\n    [showSkipButton]=\"showSkipButton\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    (click)=\"onWrapperClick($event)\"\n    (keyup)=\"$event.stopPropagation()\"\n  >\n    <div class=\"magicx-aia-editor-area\" data-aia-editor=\"\">\n      <div\n        #editor\n        *ngIf=\"controller\"\n        [aiaEditorHost]=\"controller\"\n        [autoFocus]=\"autoFocus\"\n        class=\"magicx-aia-input\"\n        data-aia-input=\"\"\n      ></div>\n\n      <ng-container *ngIf=\"controller && showInlinePills\">\n        <span\n          #pillContainer\n          class=\"magicx-aia-pill-list-container\"\n          data-aia-pill-list-container=\"\"\n          *ngIf=\"\n            (controller.isLoading$ | async) ||\n              ((controller.suggestionPills$ | async)?.length ?? 0) > 0\n          \"\n        >\n          <aia-pill-list\n            [pills]=\"(controller.suggestionPills$ | async) ?? []\"\n            [activePillIndex]=\"0\"\n            [activeSelected]=\"(controller.isActivePillSelected$ | async) ?? false\"\n            [loading]=\"(controller.isLoading$ | async) ?? false\"\n            (selectPill)=\"onSelectPill($event)\"\n          ></aia-pill-list>\n        </span>\n      </ng-container>\n    </div>\n\n    <ng-container [ngSwitch]=\"submitButtonState\">\n      <aia-submit-button\n        *ngSwitchCase=\"'default'\"\n        [disabled]=\"\n          !(\n            controller &&\n            canSubmit({\n              segments: (controller.segments$ | async) ?? [],\n              completedParams: (controller.completedParams$ | async) ?? []\n            })\n          )\n        \"\n        (submit)=\"onSubmitButtonClick($event)\"\n      ></aia-submit-button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        class=\"magicx-aia-submit-slot\"\n        (click)=\"onSubmitSlotClick($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"customSubmitTemplate\"></ng-container>\n      </span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: #ffffff;--aia-border: #b0b0b0;--aia-dropdown-border: rgba(231, 231, 231, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #333539;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .105);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #000000;--aia-option-bg: #eef2ff;--aia-option-color: #1a1b1d;--aia-option-color-selected: #000000;--aia-option-font-size: 16px;--aia-written-text-color: #000000;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: #000000;--aia-submit-color: #ffffff;--aia-color-text-muted: #6b7280;--aia-skeleton-bg: rgba(189, 189, 189, .25);--aia-streak-rgb: 99, 102, 241;--aia-streak-glass-bg: rgba(99, 102, 241, .1);--aia-footer-hint-color: #505050;--aia-footer-brand-color: #b0b0b0;--aia-footer-badge-border: rgba(189, 189, 189, .51)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: #000000;--aia-border: #505050;--aia-dropdown-border: rgba(72, 72, 72, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #b0b0b0;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .15);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #ffffff;--aia-option-bg: #323232;--aia-option-color: #e7e7e7;--aia-option-color-selected: #ffffff;--aia-option-font-size: 16px;--aia-written-text-color: #ffffff;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: #ffffff;--aia-submit-color: #000000;--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: #1a1b1d;--aia-streak-rgb: 255, 255, 255;--aia-streak-glass-bg: rgba(255, 255, 255, .1);--aia-footer-hint-color: #b0b0b0;--aia-footer-brand-color: #505050;--aia-footer-badge-border: #505050}[data-aia-dropdown]{--aia-footer-row-height: 23px;--aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown][data-aia-has-products]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: 0px;--aia-grid-overlap-top: 0px;--aia-footer-fade-lead: 0px}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: var(--aia-footer-band);--aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));top:auto;bottom:100%;margin-top:0;margin-bottom:6px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]{padding:0 8px var(--aia-footer-gap, 8px)}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff))}:where(.magicx-aia[data-animations=\"off\"]) *,:where(.magicx-aia[data-animations=\"off\"]) *:before,:where(.magicx-aia[data-animations=\"off\"]) *:after{animation-duration:0s!important;transition-duration:0s!important}.magicx-aia-container{position:relative;font-family:var(--aia-font-family, inherit);container-type:inline-size}.magicx-aia-input-wrapper{padding:12px 16px;border:1px solid var(--aia-border, #b0b0b0);border-radius:20px;background:var(--aia-surface, #ffffff);box-shadow:var(--aia-shadow, none);overflow:hidden;display:flex;align-items:flex-start;gap:12px}.magicx-aia-editor-area{position:relative;flex:1;min-width:0;min-height:22px;line-height:var(--aia-editor-line-height, 1.9);font-family:inherit;font-size:var(--aia-written-text-font-size, 14px);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-height:var(--aia-editor-max-height, calc(var(--aia-editor-line-height, 1.9) * 5em));overflow-y:auto;scrollbar-width:none}.magicx-aia-editor-area::-webkit-scrollbar{display:none}.magicx-aia-input{display:inline;outline:none;background:transparent;color:var(--aia-written-text-color, var(--aia-color-text-default, #fff));caret-color:var( --aia-caret-color, var(--aia-written-text-color, var(--aia-color-text-default, #fff)) );font-weight:300;vertical-align:middle}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]{display:inline;padding:3px 6px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:var(--aia-completed-pill-bg, rgba(189, 189, 189, .105));color:var(--aia-completed-pill-color, var(--aia-written-text-color, #fff));font-size:var(--aia-pill-font-size, 14px);font-weight:400;line-height:normal;white-space:normal;letter-spacing:var(--aia-completed-pill-tracking, -.02em);cursor:pointer;transition:background-color .15s ease}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]:hover{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35))}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35));caret-color:transparent;cursor:text}.magicx-aia-input:has(strong[class~=\"magicx-aia-segment--editing\"]){caret-color:transparent}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::selection{background:transparent;color:inherit}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::-moz-selection{background:transparent;color:inherit}.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{content:attr(data-placeholder);color:var(--aia-color-text-muted, #c1c4cb);opacity:.7;pointer-events:none}.magicx-aia-input[data-aia-empty=true]{display:inline-block;min-width:1px}.magicx-aia-pill-list-container{display:inline;margin-left:8px}.magicx-aia-pill-list-container:empty,.magicx-aia-pill-list-container[data-aia-pill-wrapped]{margin-left:0}.magicx-aia-submit-slot{display:contents}:where(.magicx-aia-input) strong[class~=magicx-aia-shimmer-sweep]{animation:aiaPillReveal .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes aiaPillReveal{0%{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: AIAutocompleteDropdownComponent, selector: "ai-autocomplete-dropdown", inputs: ["controller", "showPills", "showSkipButton", "className", "mode"] }, { kind: "directive", type: AIAutocompleteEditorHostDirective, selector: "[aiaEditorHost]", inputs: ["aiaEditorHost", "autoFocus"] }, { kind: "component", type: PillListComponent, selector: "aia-pill-list", inputs: ["pills", "activePillIndex", "rounded", "loading", "activeSelected"], outputs: ["selectPill"] }, { kind: "component", type: SubmitButtonComponent, selector: "aia-submit-button", inputs: ["disabled"], outputs: ["submit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }, { propertyName: "pillContainerRef", first: true, predicate: ["pillContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  class=\"magicx-aia magicx-aia-container\"\n  [attr.data-pill-placement]=\"pillPlacement\"\n  [attr.data-options-position]=\"optionsPosition\"\n  [attr.data-animations]=\"animations ? 'on' : 'off'\"\n  [attr.data-mode]=\"resolvedMode\"\n>\n  <ai-autocomplete-dropdown\n    *ngIf=\"controller\"\n    [controller]=\"controller\"\n    [showPills]=\"showDropdownPills\"\n    [showSkipButton]=\"showSkipButton\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    (click)=\"onWrapperClick($event)\"\n    (keyup)=\"$event.stopPropagation()\"\n  >\n    <div class=\"magicx-aia-editor-area\" data-aia-editor=\"\">\n      <div\n        #editor\n        *ngIf=\"controller\"\n        [aiaEditorHost]=\"controller\"\n        [autoFocus]=\"autoFocus\"\n        class=\"magicx-aia-input\"\n        data-aia-input=\"\"\n      ></div>\n\n      <ng-container *ngIf=\"controller && showInlinePills\">\n        <span\n          #pillContainer\n          class=\"magicx-aia-pill-list-container\"\n          data-aia-pill-list-container=\"\"\n          *ngIf=\"\n            (controller.isLoading$ | async) ||\n              ((controller.suggestionPills$ | async)?.length ?? 0) > 0\n          \"\n        >\n          <aia-pill-list\n            [pills]=\"(controller.suggestionPills$ | async) ?? []\"\n            [activePillIndex]=\"0\"\n            [activeSelected]=\"(controller.isActivePillSelected$ | async) ?? false\"\n            [loading]=\"(controller.isLoading$ | async) ?? false\"\n            (selectPill)=\"onSelectPill($event)\"\n          ></aia-pill-list>\n        </span>\n      </ng-container>\n    </div>\n\n    <ng-container [ngSwitch]=\"submitButtonState\">\n      <aia-submit-button\n        *ngSwitchCase=\"'default'\"\n        [disabled]=\"\n          !(\n            controller &&\n            canSubmit({\n              segments: (controller.segments$ | async) ?? [],\n              completedParams: (controller.completedParams$ | async) ?? []\n            })\n          )\n        \"\n        (submit)=\"onSubmitButtonClick($event)\"\n      ></aia-submit-button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        class=\"magicx-aia-submit-slot\"\n        (click)=\"onSubmitSlotClick($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"customSubmitTemplate\"></ng-container>\n      </span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: #ffffff;--aia-border: #b0b0b0;--aia-dropdown-border: rgba(231, 231, 231, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #333539;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .105);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #000000;--aia-option-bg: #eef2ff;--aia-option-color: #1a1b1d;--aia-option-color-selected: #000000;--aia-option-font-size: 16px;--aia-written-text-color: #000000;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: #000000;--aia-submit-color: #ffffff;--aia-color-text-muted: #6b7280;--aia-skeleton-bg: rgba(189, 189, 189, .25);--aia-streak-rgb: 99, 102, 241;--aia-footer-hint-color: #505050;--aia-footer-brand-color: #b0b0b0;--aia-footer-badge-border: rgba(189, 189, 189, .51)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: #000000;--aia-border: #505050;--aia-dropdown-border: rgba(72, 72, 72, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #b0b0b0;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .15);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #ffffff;--aia-option-bg: #323232;--aia-option-color: #e7e7e7;--aia-option-color-selected: #ffffff;--aia-option-font-size: 16px;--aia-written-text-color: #ffffff;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: #ffffff;--aia-submit-color: #000000;--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: #1a1b1d;--aia-streak-rgb: 255, 255, 255;--aia-footer-hint-color: #b0b0b0;--aia-footer-brand-color: #505050;--aia-footer-badge-border: #505050}[data-aia-dropdown]{--aia-footer-row-height: 23px;--aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown][data-aia-has-products]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: 0px;--aia-grid-overlap-top: 0px;--aia-footer-fade-lead: 0px}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: var(--aia-footer-band);--aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));transform-origin:50% 100%;top:auto;bottom:100%;margin-top:0;margin-bottom:6px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]{padding:0 0 var(--aia-footer-gap, 8px) 8px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff))}:where(.magicx-aia[data-animations=\"off\"]) *,:where(.magicx-aia[data-animations=\"off\"]) *:before,:where(.magicx-aia[data-animations=\"off\"]) *:after{animation-duration:0s!important;transition-duration:0s!important}.magicx-aia-container{position:relative;font-family:var(--aia-font-family, inherit);container-type:inline-size}.magicx-aia-input-wrapper{padding:12px 16px;border:1px solid var(--aia-border, #b0b0b0);border-radius:20px;background:var(--aia-surface, #ffffff);box-shadow:var(--aia-shadow, none);overflow:hidden;display:flex;align-items:flex-start;gap:12px}.magicx-aia-editor-area{position:relative;flex:1;min-width:0;min-height:22px;line-height:var(--aia-editor-line-height, 1.9);font-family:inherit;font-size:var(--aia-written-text-font-size, 14px);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-height:var(--aia-editor-max-height, calc(var(--aia-editor-line-height, 1.9) * 5em));overflow-y:auto;scrollbar-width:none}.magicx-aia-editor-area::-webkit-scrollbar{display:none}.magicx-aia-input{display:inline;outline:none;background:transparent;color:var(--aia-written-text-color, var(--aia-color-text-default, #fff));caret-color:var( --aia-caret-color, var(--aia-written-text-color, var(--aia-color-text-default, #fff)) );font-weight:300;vertical-align:middle}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]{display:inline;padding:3px 6px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:var(--aia-completed-pill-bg, rgba(189, 189, 189, .105));color:var(--aia-completed-pill-color, var(--aia-written-text-color, #fff));font-size:var(--aia-pill-font-size, 14px);font-weight:400;line-height:normal;white-space:normal;letter-spacing:var(--aia-completed-pill-tracking, -.02em);cursor:pointer;transition:background-color .15s ease}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]:hover{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35))}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35));caret-color:transparent;cursor:text}.magicx-aia-input:has(strong[class~=\"magicx-aia-segment--editing\"]){caret-color:transparent}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::selection{background:transparent;color:inherit}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::-moz-selection{background:transparent;color:inherit}.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{content:attr(data-placeholder);color:var(--aia-color-text-muted, #c1c4cb);opacity:.7;pointer-events:none;transition:opacity var(--aia-placeholder-fade, .12s) ease-out}.magicx-aia-input[data-aia-placeholder-leaving]:before{opacity:0}@media (prefers-reduced-motion: reduce){.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{transition-duration:0s}}.magicx-aia-input[data-aia-empty=true]{display:inline-block;min-width:1px}.magicx-aia-pill-list-container{display:inline;margin-left:8px}.magicx-aia-pill-list-container:empty,.magicx-aia-pill-list-container[data-aia-pill-wrapped]{margin-left:0}.magicx-aia-submit-slot{display:contents}:where(.magicx-aia-input) strong[class~=magicx-aia-shimmer-sweep]{animation:aiaPillReveal .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes aiaPillReveal{0%{opacity:0}}@media (min-width: 769px){[data-aia-dropdown] [data-aia-footer]:before,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before,:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{inset:0;background:var(--aia-surface, #ffffff)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: AIAutocompleteDropdownComponent, selector: "ai-autocomplete-dropdown", inputs: ["controller", "showPills", "showSkipButton", "className", "mode"] }, { kind: "directive", type: AIAutocompleteEditorHostDirective, selector: "[aiaEditorHost]", inputs: ["aiaEditorHost", "autoFocus"] }, { kind: "component", type: PillListComponent, selector: "aia-pill-list", inputs: ["pills", "activePillIndex", "rounded", "loading", "activeSelected"], outputs: ["selectPill"] }, { kind: "component", type: SubmitButtonComponent, selector: "aia-submit-button", inputs: ["disabled"], outputs: ["submit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: "ai-autocomplete", standalone: true, imports: [
@@ -1861,7 +1994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useExisting: forwardRef(() => AIAutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  #container\n  class=\"magicx-aia magicx-aia-container\"\n  [attr.data-pill-placement]=\"pillPlacement\"\n  [attr.data-options-position]=\"optionsPosition\"\n  [attr.data-animations]=\"animations ? 'on' : 'off'\"\n  [attr.data-mode]=\"resolvedMode\"\n>\n  <ai-autocomplete-dropdown\n    *ngIf=\"controller\"\n    [controller]=\"controller\"\n    [showPills]=\"showDropdownPills\"\n    [showSkipButton]=\"showSkipButton\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    (click)=\"onWrapperClick($event)\"\n    (keyup)=\"$event.stopPropagation()\"\n  >\n    <div class=\"magicx-aia-editor-area\" data-aia-editor=\"\">\n      <div\n        #editor\n        *ngIf=\"controller\"\n        [aiaEditorHost]=\"controller\"\n        [autoFocus]=\"autoFocus\"\n        class=\"magicx-aia-input\"\n        data-aia-input=\"\"\n      ></div>\n\n      <ng-container *ngIf=\"controller && showInlinePills\">\n        <span\n          #pillContainer\n          class=\"magicx-aia-pill-list-container\"\n          data-aia-pill-list-container=\"\"\n          *ngIf=\"\n            (controller.isLoading$ | async) ||\n              ((controller.suggestionPills$ | async)?.length ?? 0) > 0\n          \"\n        >\n          <aia-pill-list\n            [pills]=\"(controller.suggestionPills$ | async) ?? []\"\n            [activePillIndex]=\"0\"\n            [activeSelected]=\"(controller.isActivePillSelected$ | async) ?? false\"\n            [loading]=\"(controller.isLoading$ | async) ?? false\"\n            (selectPill)=\"onSelectPill($event)\"\n          ></aia-pill-list>\n        </span>\n      </ng-container>\n    </div>\n\n    <ng-container [ngSwitch]=\"submitButtonState\">\n      <aia-submit-button\n        *ngSwitchCase=\"'default'\"\n        [disabled]=\"\n          !(\n            controller &&\n            canSubmit({\n              segments: (controller.segments$ | async) ?? [],\n              completedParams: (controller.completedParams$ | async) ?? []\n            })\n          )\n        \"\n        (submit)=\"onSubmitButtonClick($event)\"\n      ></aia-submit-button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        class=\"magicx-aia-submit-slot\"\n        (click)=\"onSubmitSlotClick($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"customSubmitTemplate\"></ng-container>\n      </span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: #ffffff;--aia-border: #b0b0b0;--aia-dropdown-border: rgba(231, 231, 231, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #333539;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .105);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #000000;--aia-option-bg: #eef2ff;--aia-option-color: #1a1b1d;--aia-option-color-selected: #000000;--aia-option-font-size: 16px;--aia-written-text-color: #000000;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: #000000;--aia-submit-color: #ffffff;--aia-color-text-muted: #6b7280;--aia-skeleton-bg: rgba(189, 189, 189, .25);--aia-streak-rgb: 99, 102, 241;--aia-streak-glass-bg: rgba(99, 102, 241, .1);--aia-footer-hint-color: #505050;--aia-footer-brand-color: #b0b0b0;--aia-footer-badge-border: rgba(189, 189, 189, .51)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: #000000;--aia-border: #505050;--aia-dropdown-border: rgba(72, 72, 72, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #b0b0b0;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .15);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #ffffff;--aia-option-bg: #323232;--aia-option-color: #e7e7e7;--aia-option-color-selected: #ffffff;--aia-option-font-size: 16px;--aia-written-text-color: #ffffff;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: #ffffff;--aia-submit-color: #000000;--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: #1a1b1d;--aia-streak-rgb: 255, 255, 255;--aia-streak-glass-bg: rgba(255, 255, 255, .1);--aia-footer-hint-color: #b0b0b0;--aia-footer-brand-color: #505050;--aia-footer-badge-border: #505050}[data-aia-dropdown]{--aia-footer-row-height: 23px;--aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown][data-aia-has-products]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: 0px;--aia-grid-overlap-top: 0px;--aia-footer-fade-lead: 0px}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: var(--aia-footer-band);--aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));top:auto;bottom:100%;margin-top:0;margin-bottom:6px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]{padding:0 8px var(--aia-footer-gap, 8px)}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff))}:where(.magicx-aia[data-animations=\"off\"]) *,:where(.magicx-aia[data-animations=\"off\"]) *:before,:where(.magicx-aia[data-animations=\"off\"]) *:after{animation-duration:0s!important;transition-duration:0s!important}.magicx-aia-container{position:relative;font-family:var(--aia-font-family, inherit);container-type:inline-size}.magicx-aia-input-wrapper{padding:12px 16px;border:1px solid var(--aia-border, #b0b0b0);border-radius:20px;background:var(--aia-surface, #ffffff);box-shadow:var(--aia-shadow, none);overflow:hidden;display:flex;align-items:flex-start;gap:12px}.magicx-aia-editor-area{position:relative;flex:1;min-width:0;min-height:22px;line-height:var(--aia-editor-line-height, 1.9);font-family:inherit;font-size:var(--aia-written-text-font-size, 14px);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-height:var(--aia-editor-max-height, calc(var(--aia-editor-line-height, 1.9) * 5em));overflow-y:auto;scrollbar-width:none}.magicx-aia-editor-area::-webkit-scrollbar{display:none}.magicx-aia-input{display:inline;outline:none;background:transparent;color:var(--aia-written-text-color, var(--aia-color-text-default, #fff));caret-color:var( --aia-caret-color, var(--aia-written-text-color, var(--aia-color-text-default, #fff)) );font-weight:300;vertical-align:middle}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]{display:inline;padding:3px 6px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:var(--aia-completed-pill-bg, rgba(189, 189, 189, .105));color:var(--aia-completed-pill-color, var(--aia-written-text-color, #fff));font-size:var(--aia-pill-font-size, 14px);font-weight:400;line-height:normal;white-space:normal;letter-spacing:var(--aia-completed-pill-tracking, -.02em);cursor:pointer;transition:background-color .15s ease}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]:hover{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35))}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35));caret-color:transparent;cursor:text}.magicx-aia-input:has(strong[class~=\"magicx-aia-segment--editing\"]){caret-color:transparent}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::selection{background:transparent;color:inherit}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::-moz-selection{background:transparent;color:inherit}.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{content:attr(data-placeholder);color:var(--aia-color-text-muted, #c1c4cb);opacity:.7;pointer-events:none}.magicx-aia-input[data-aia-empty=true]{display:inline-block;min-width:1px}.magicx-aia-pill-list-container{display:inline;margin-left:8px}.magicx-aia-pill-list-container:empty,.magicx-aia-pill-list-container[data-aia-pill-wrapped]{margin-left:0}.magicx-aia-submit-slot{display:contents}:where(.magicx-aia-input) strong[class~=magicx-aia-shimmer-sweep]{animation:aiaPillReveal .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes aiaPillReveal{0%{opacity:0}}\n"] }]
+                    ], template: "<div\n  #container\n  class=\"magicx-aia magicx-aia-container\"\n  [attr.data-pill-placement]=\"pillPlacement\"\n  [attr.data-options-position]=\"optionsPosition\"\n  [attr.data-animations]=\"animations ? 'on' : 'off'\"\n  [attr.data-mode]=\"resolvedMode\"\n>\n  <ai-autocomplete-dropdown\n    *ngIf=\"controller\"\n    [controller]=\"controller\"\n    [showPills]=\"showDropdownPills\"\n    [showSkipButton]=\"showSkipButton\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    (click)=\"onWrapperClick($event)\"\n    (keyup)=\"$event.stopPropagation()\"\n  >\n    <div class=\"magicx-aia-editor-area\" data-aia-editor=\"\">\n      <div\n        #editor\n        *ngIf=\"controller\"\n        [aiaEditorHost]=\"controller\"\n        [autoFocus]=\"autoFocus\"\n        class=\"magicx-aia-input\"\n        data-aia-input=\"\"\n      ></div>\n\n      <ng-container *ngIf=\"controller && showInlinePills\">\n        <span\n          #pillContainer\n          class=\"magicx-aia-pill-list-container\"\n          data-aia-pill-list-container=\"\"\n          *ngIf=\"\n            (controller.isLoading$ | async) ||\n              ((controller.suggestionPills$ | async)?.length ?? 0) > 0\n          \"\n        >\n          <aia-pill-list\n            [pills]=\"(controller.suggestionPills$ | async) ?? []\"\n            [activePillIndex]=\"0\"\n            [activeSelected]=\"(controller.isActivePillSelected$ | async) ?? false\"\n            [loading]=\"(controller.isLoading$ | async) ?? false\"\n            (selectPill)=\"onSelectPill($event)\"\n          ></aia-pill-list>\n        </span>\n      </ng-container>\n    </div>\n\n    <ng-container [ngSwitch]=\"submitButtonState\">\n      <aia-submit-button\n        *ngSwitchCase=\"'default'\"\n        [disabled]=\"\n          !(\n            controller &&\n            canSubmit({\n              segments: (controller.segments$ | async) ?? [],\n              completedParams: (controller.completedParams$ | async) ?? []\n            })\n          )\n        \"\n        (submit)=\"onSubmitButtonClick($event)\"\n      ></aia-submit-button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        class=\"magicx-aia-submit-slot\"\n        (click)=\"onSubmitSlotClick($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"customSubmitTemplate\"></ng-container>\n      </span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: #ffffff;--aia-border: #b0b0b0;--aia-dropdown-border: rgba(231, 231, 231, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #333539;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .105);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #000000;--aia-option-bg: #eef2ff;--aia-option-color: #1a1b1d;--aia-option-color-selected: #000000;--aia-option-font-size: 16px;--aia-written-text-color: #000000;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: #000000;--aia-submit-color: #ffffff;--aia-color-text-muted: #6b7280;--aia-skeleton-bg: rgba(189, 189, 189, .25);--aia-streak-rgb: 99, 102, 241;--aia-footer-hint-color: #505050;--aia-footer-brand-color: #b0b0b0;--aia-footer-badge-border: rgba(189, 189, 189, .51)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: #000000;--aia-border: #505050;--aia-dropdown-border: rgba(72, 72, 72, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #b0b0b0;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .15);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #ffffff;--aia-option-bg: #323232;--aia-option-color: #e7e7e7;--aia-option-color-selected: #ffffff;--aia-option-font-size: 16px;--aia-written-text-color: #ffffff;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: #ffffff;--aia-submit-color: #000000;--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: #1a1b1d;--aia-streak-rgb: 255, 255, 255;--aia-footer-hint-color: #b0b0b0;--aia-footer-brand-color: #505050;--aia-footer-badge-border: #505050}[data-aia-dropdown]{--aia-footer-row-height: 23px;--aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown][data-aia-has-products]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: 0px;--aia-grid-overlap-top: 0px;--aia-footer-fade-lead: 0px}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: var(--aia-footer-band);--aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));transform-origin:50% 100%;top:auto;bottom:100%;margin-top:0;margin-bottom:6px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]{padding:0 0 var(--aia-footer-gap, 8px) 8px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff))}:where(.magicx-aia[data-animations=\"off\"]) *,:where(.magicx-aia[data-animations=\"off\"]) *:before,:where(.magicx-aia[data-animations=\"off\"]) *:after{animation-duration:0s!important;transition-duration:0s!important}.magicx-aia-container{position:relative;font-family:var(--aia-font-family, inherit);container-type:inline-size}.magicx-aia-input-wrapper{padding:12px 16px;border:1px solid var(--aia-border, #b0b0b0);border-radius:20px;background:var(--aia-surface, #ffffff);box-shadow:var(--aia-shadow, none);overflow:hidden;display:flex;align-items:flex-start;gap:12px}.magicx-aia-editor-area{position:relative;flex:1;min-width:0;min-height:22px;line-height:var(--aia-editor-line-height, 1.9);font-family:inherit;font-size:var(--aia-written-text-font-size, 14px);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-height:var(--aia-editor-max-height, calc(var(--aia-editor-line-height, 1.9) * 5em));overflow-y:auto;scrollbar-width:none}.magicx-aia-editor-area::-webkit-scrollbar{display:none}.magicx-aia-input{display:inline;outline:none;background:transparent;color:var(--aia-written-text-color, var(--aia-color-text-default, #fff));caret-color:var( --aia-caret-color, var(--aia-written-text-color, var(--aia-color-text-default, #fff)) );font-weight:300;vertical-align:middle}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]{display:inline;padding:3px 6px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:var(--aia-completed-pill-bg, rgba(189, 189, 189, .105));color:var(--aia-completed-pill-color, var(--aia-written-text-color, #fff));font-size:var(--aia-pill-font-size, 14px);font-weight:400;line-height:normal;white-space:normal;letter-spacing:var(--aia-completed-pill-tracking, -.02em);cursor:pointer;transition:background-color .15s ease}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]:hover{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35))}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35));caret-color:transparent;cursor:text}.magicx-aia-input:has(strong[class~=\"magicx-aia-segment--editing\"]){caret-color:transparent}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::selection{background:transparent;color:inherit}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::-moz-selection{background:transparent;color:inherit}.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{content:attr(data-placeholder);color:var(--aia-color-text-muted, #c1c4cb);opacity:.7;pointer-events:none;transition:opacity var(--aia-placeholder-fade, .12s) ease-out}.magicx-aia-input[data-aia-placeholder-leaving]:before{opacity:0}@media (prefers-reduced-motion: reduce){.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{transition-duration:0s}}.magicx-aia-input[data-aia-empty=true]{display:inline-block;min-width:1px}.magicx-aia-pill-list-container{display:inline;margin-left:8px}.magicx-aia-pill-list-container:empty,.magicx-aia-pill-list-container[data-aia-pill-wrapped]{margin-left:0}.magicx-aia-submit-slot{display:contents}:where(.magicx-aia-input) strong[class~=magicx-aia-shimmer-sweep]{animation:aiaPillReveal .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes aiaPillReveal{0%{opacity:0}}@media (min-width: 769px){[data-aia-dropdown] [data-aia-footer]:before,[data-aia-dropdown][data-options-position=above] [data-aia-footer]:before,:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{inset:0;background:var(--aia-surface, #ffffff)}}\n"] }]
         }], propDecorators: { apiConfig: [{
                 type: Input
             }], additionalContext: [{