@magicx-eng/ai-autocomplete-react 0.29.0 → 0.29.1

package/README.md

@@ -819,7 +819,7 @@ Override on the container (via `className`). The variables are declared with `:w
 | `--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). |
+| `--aia-scrollbar-thumb` | `rgba(0, 0, 0, 0.3)` | `rgba(0, 0, 0, 0.3)` | No longer used: the option list hides its scrollbar in every browser. Kept so existing overrides don't break. |
 | `--aia-streak-rgb` | `99, 102, 241` | `255, 255, 255` | Comma-separated RGB triplet tinting the datepicker's pressed cell, and its selected cell when `--aia-date-selected-bg` is unset. The today ring uses `--aia-date-today-ring`, not this. |
 | `--aia-product-card-width` | `116px` | `116px` | Width of a product card in the strip. The media tile is square, so this also sets its height. |
 | `--aia-product-gap` | `8px` | `8px` | Gap between product cards. |

package/dist/index.js

@@ -1710,8 +1710,18 @@
   gap: var(--aia-grid-gap, 0);
 }
 
-/* Scrollable variant \u2014 capped height with a styled thin scrollbar. Rows pack
-   from the top instead of stretching to fill the container. */
+/* Scrollable variant \u2014 capped height, rows packed from the top instead of
+   stretching to fill the container.
+
+   The scrollbar is hidden in every engine, as the product strip's and the
+   input's already are: the list stays scrollable by wheel, trackpad, touch
+   and keyboard, and the dropdown's "more below" arrow says there is more.
+   Styling it instead (a thin, tinted bar) looked right only in Chrome, whose
+   macOS overlay scrollbar ignores the ::-webkit-scrollbar rules \u2014 Safari drew
+   a permanent bar over the list.
+
+   overscroll-behavior: contain keeps a wheel or trackpad fling that runs past
+   either end of the list from scrolling the page behind the dropdown. */
 .aia-grid[data-scroll] {
   grid-auto-rows: min-content;
   align-content: start;
@@ -1721,18 +1731,11 @@
      appearance.css for why. */
   max-height: var(--aia-grid-max-height, 120px);
   overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3)) transparent;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
 }
 .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, 0.3));
-  border-radius: 3px;
+  display: none;
 }
 `,document.head.appendChild(e)}var Et=require("react/jsx-runtime");function It({min:e="16rem",max:a,gap:t,scroll:n=!1,maxHeight:i,scrollResetKey:r,cols:o,template:d,innerRef:x,className:v,children:w,...S}){let f=(0,Xe.useRef)(null);(0,Xe.useLayoutEffect)(()=>{if(r===void 0)return;let D=f.current;D&&(D.scrollTop=0)},[r]);let y={"--aia-grid-min":e};return a&&(y["--aia-grid-max"]=a),t&&(y["--aia-grid-gap"]=t),i&&(y["--aia-grid-max-height"]=i),o&&(y.gridTemplateColumns=(0,St.optionsGridTemplateColumns)(o)),d&&(y.gridTemplateColumns=d),(0,Et.jsx)("div",{ref:D=>{f.current=D,x?.(D)},className:v?`aia-grid ${v}`:"aia-grid","data-scroll":n||void 0,style:y,...S,children:w})}var de=require("@magicx-eng/ai-autocomplete-vanilla"),le=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.aia-item-d4vpD {
   position: relative;