@magicx-eng/ai-autocomplete-vanilla 0.27.0 → 0.28.1

package/README.md

@@ -797,10 +797,10 @@ Override these on the container element. The variables are declared with `:where
 | `--aia-submit-bg-disabled` | `--aia-submit-bg` | `--aia-submit-bg` | Submit background when disabled (empty input). Defaults to the enabled background so themed colors aren't washed out. Set this for a faded rest state. |
 | `--aia-submit-color-disabled` | `--aia-submit-color` | `--aia-submit-color` | Submit arrow color when disabled. Defaults to the enabled color. |
 | `--aia-border` | `rgba(17, 24, 39, 0.14)` | `#505050` | Input container border color |
-| `--aia-shadow` | `inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(16,24,40,0.1), 0 8px 24px rgba(16,24,40,0.16)` | `inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5)` | Input container elevation (box-shadow) |
+| `--aia-shadow` | `none` | `none` | Input container elevation (box-shadow). Flat by default; set it to add one |
 | `--aia-dropdown-offset` | `13px` | `13px` | Gap between the input box and the dropdown (the dropdown's margin toward the input). |
 | `--aia-content-inset-left` | `16px` | `16px` | Left inset of the SDK's content: the input wrapper's left padding, and the line the dropdown's content (parameter label, option text, product strip) starts on. Set it when you pad the field to clear a leading icon of your own, so the dropdown's content stays aligned under the typed text. Practical minimum is `10px` (the option text's own inset); both surfaces floor it there. |
-| `--aia-footer-gap` | `8px` | `8px` | Breathing room above the dropdown footer (badge / keyboard hints), additive to the dropdown's 8px section gap. |
+| `--aia-footer-gap` | `12px` | `12px` | Breathing room above the dropdown footer (badge / keyboard hints), additive to the dropdown's 8px section gap. |
 | `--aia-footer-chip-bg` | `--aia-surface` at 65% | `--aia-surface` at 65% | Fill behind the footer's keyboard hint and AI-Autocomplete badge. The option list scrolls under the footer, so this keeps both legible over the row passing behind them. `transparent` on the glass surface. |
 | `--aia-dropdown-bg` | — | — | Optional bg color the dropdown's "glass" rim shadow tints toward. Set this to the page background behind the dropdown so the bottom-corner glow blends seamlessly. |
 | `--aia-scrollbar-thumb` | `rgba(0, 0, 0, 0.3)` | `rgba(0, 0, 0, 0.3)` | Color of the option list's scrollbar thumb (Firefox + WebKit). |

package/dist/index.d.mts

@@ -1442,11 +1442,15 @@ declare function dateCellMarks(iso: string | null, args: {
  * suggestion bubbles, 2026-08-19): opacity 0→1 over ~150 ms, a ~16 px rise
  * easing out over ~280 ms, consecutive rows ~80–110 ms apart.
  *
- * The per-row motion is CSS: the option rule in each package's stylesheet
- * fades the cell, and the option's content rule rises it — the rise is on the
- * inner content, not the cell, because a transformed cell extends the grid's
- * scrollable area and flashed a scrollbar through the entrance (keep the three
- * copies identical; the parity test compares them). This module
+ * The per-row motion is CSS: the option's *content* rule in each package's
+ * stylesheet both fades and rises it. Neither half runs on the cell — the
+ * tappable element — itself: the rise because a transformed cell extends the
+ * grid's scrollable area and flashed a scrollbar through the entrance, the
+ * fade because iOS Safari drops a tap on a scripted-clickable element (the
+ * row is a div with a click handler) whose own opacity is mid-animation — it
+ * fires the hover events, so the row highlights, and never the click. Keep
+ * the three copies identical; the parity test compares them and
+ * tests/render/optionEntranceOverflow.test.ts pins the split. This module
  * owns the *timing numbers* and the per-row delay, so vanilla, React and
  * Angular can't drift onto three different cascades. `OPTION_ENTER_RISE_MS` and
  * `OPTION_ENTER_FADE_MS` must match the durations declared in those rules.
@@ -1911,7 +1915,7 @@ interface ScrollArrowArgs {
     /** The options grid (the scroll box). */
     grid: HTMLElement;
     /** The arrow button, already in the dropdown. */
-    button: HTMLElement;
+    button: HTMLButtonElement;
 }
 declare function attachScrollArrow({ dropdown, grid, button, }: ScrollArrowArgs): ScrollArrowController;
 

package/dist/index.d.ts

@@ -1442,11 +1442,15 @@ declare function dateCellMarks(iso: string | null, args: {
  * suggestion bubbles, 2026-08-19): opacity 0→1 over ~150 ms, a ~16 px rise
  * easing out over ~280 ms, consecutive rows ~80–110 ms apart.
  *
- * The per-row motion is CSS: the option rule in each package's stylesheet
- * fades the cell, and the option's content rule rises it — the rise is on the
- * inner content, not the cell, because a transformed cell extends the grid's
- * scrollable area and flashed a scrollbar through the entrance (keep the three
- * copies identical; the parity test compares them). This module
+ * The per-row motion is CSS: the option's *content* rule in each package's
+ * stylesheet both fades and rises it. Neither half runs on the cell — the
+ * tappable element — itself: the rise because a transformed cell extends the
+ * grid's scrollable area and flashed a scrollbar through the entrance, the
+ * fade because iOS Safari drops a tap on a scripted-clickable element (the
+ * row is a div with a click handler) whose own opacity is mid-animation — it
+ * fires the hover events, so the row highlights, and never the click. Keep
+ * the three copies identical; the parity test compares them and
+ * tests/render/optionEntranceOverflow.test.ts pins the split. This module
  * owns the *timing numbers* and the per-row delay, so vanilla, React and
  * Angular can't drift onto three different cascades. `OPTION_ENTER_RISE_MS` and
  * `OPTION_ENTER_FADE_MS` must match the durations declared in those rules.
@@ -1911,7 +1915,7 @@ interface ScrollArrowArgs {
     /** The options grid (the scroll box). */
     grid: HTMLElement;
     /** The arrow button, already in the dropdown. */
-    button: HTMLElement;
+    button: HTMLButtonElement;
 }
 declare function attachScrollArrow({ dropdown, grid, button, }: ScrollArrowArgs): ScrollArrowController;