@magicx-eng/ai-autocomplete-react 0.21.2 → 0.22.0

package/README.md

@@ -383,11 +383,12 @@ narrowing.
 
 Each server item becomes a `Product` with `id` (the item's stable id), `title`,
 `price` (the item's lowest price, verbatim as the catalog spells it — the
-currency is yours to add), `vendor`, `imageUrl`, and a **relative** `url` of
-`/products/{handle}` — the right link for a widget running on the storefront
-itself. An item the catalog has no handle for gets no `url`: its card is still
-activatable and still emits `onProductSelect`, it just has nothing for
-cmd-click to open. `productFromMatchedItem` / `productsFromCustomFields` are
+currency is yours to add), `vendor`, `imageUrl`, and a `url`: the item's own
+`item_url` when the uploaded catalog named one (absolute or root-relative;
+anything else is ignored), else a **relative** `/products/{handle}` — the right
+link for a Shopify widget running on the storefront itself. An item with
+neither gets no `url`: its card is still activatable and still emits
+`onProductSelect`, it just has nothing for cmd-click to open. `productFromMatchedItem` / `productsFromCustomFields` are
 exported for a hand-rolled strip that wants the same mapping.
 
 Pass `showProducts={false}` to render no strip at all. The catalog report
@@ -749,6 +750,7 @@ Override on the container (via `className`). The variables are declared with `:w
 | `--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-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-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. |

package/dist/index.js

@@ -8,7 +8,14 @@
 }
 
 .aia-inputWrapper-FLq1b {
-  padding: 12px 16px;
+  /* The left inset is a token shared with the dropdown (which insets its
+     content by the same amount), so the typed text, the parameter label,
+     the option text and the product strip share one left edge. A host that
+     pads the field to clear its own leading icon sets --aia-content-inset-left
+     and the dropdown follows. Floored at 10px \u2014 the dropdown's sections inset
+     their text by 10px and its own padding can't go below zero, so below
+     10px the two sides would diverge; flooring both keeps them together. */
+  padding: 12px 16px 12px max(10px, var(--aia-content-inset-left, 16px));
   border: 1px solid var(--aia-border, #b0b0b0);
   border-radius: 20px;
   background: var(--aia-surface, #ffffff);
@@ -701,7 +708,15 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  padding: 10px 8px;
+  /* The left padding derives from --aia-content-inset-left, the token the
+     input wrapper reads for its own left padding. The option text and the
+     parameter label sit 10px inside this padding edge (the option's padding;
+     the pill bar's list wrapper carries the same 10px \u2014 see appearance.css),
+     and the product strip is inset to the same line, so the whole panel's
+     content starts exactly under the typed text. max() keeps the padding at
+     zero (never negative, which CSS would clamp anyway) for a token under
+     10px \u2014 the input wrapper floors the token at 10px to match. */
+  padding: 10px 8px 10px max(0px, calc(var(--aia-content-inset-left, 16px) - 10px));
   overflow: hidden;
   container-type: inline-size;
   z-index: 10;
@@ -770,9 +785,10 @@
 /* "More below" scroll arrow \u2014 see the core's render/scrollArrow.ts.
    A bare down chevron at the bottom-centre of the option list, shown while
    there is more to scroll to \u2014 no disc, border or shadow around it. It rests
-   just above the grid's reserved band (--aia-scroll-arrow-bottom is measured
-   and set inline by the controller so it tracks the grid's bottom edge in
-   every layout). It never travels with the scroll: the controller toggles
+   just above the grid's reserved band, or \u2014 when a product strip follows the
+   grid \u2014 centred on the strip's "Products" label row, off the last option row
+   (--aia-scroll-arrow-bottom is measured and set inline by the controller so
+   it tracks the layout). It never travels with the scroll: the controller toggles
    data-aia-visible and the only thing that transitions is opacity \u2014 a slow,
    even second in and the same second out. Its one motion is an idle bob, a few
    pixels up and back over a couple of seconds, running all the time so a fade
@@ -1384,9 +1400,11 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  /* Matches the grid's own 8px inline padding so the section label lines up
-     with the option text above it. */
-  padding: 0 8px;
+  /* The option text sits 10px inside the dropdown's padding edge (the
+     option's own padding), so the section carries the same 10px and its
+     label lands on the option text's left edge \u2014 which the dropdown in turn
+     places under the typed text (--aia-content-inset-left). */
+  padding: 0 10px;
   min-width: 0;
 }
 
@@ -1414,6 +1432,10 @@
   overflow-y: hidden;
   overscroll-behavior-x: contain;
   padding-bottom: 2px;
+  /* Pull the row out by the card's own 6px padding so the first card's
+     image tile \u2014 not its hover fill \u2014 starts on the label's left edge, the
+     same way the option's highlight fill hangs outside its text. */
+  margin-inline: -6px;
   /* Hide the scrollbar chrome across all three engines while leaving the box
      scrollable by trackpad, wheel, touch and keyboard. */
   scrollbar-width: none;
@@ -1542,7 +1564,7 @@
     var(--aia-option-color-selected, var(--aia-color-text-default, #fff))
   );
 }
-`,document.head.appendChild(e)}var Y={section:"aia-section-Hugfg",label:"aia-label-nuc93",row:"aia-row-WDVBX",card:"aia-card-JBGYT",media:"aia-media-RrbGe",image:"aia-image-5pNL7",body:"aia-body-ly032",vendor:"aia-vendor-Gvu7G",title:"aia-title-gCNmq",price:"aia-price-gULcE"};var q=require("react/jsx-runtime");function wt({products:e,listboxId:i,onSelect:a,onFocusChange:r,focusable:n=!0}){if(e.length===0)return null;let o=`${i}-products-label`;return(0,q.jsxs)("section",{className:Y.section,"data-aia-products":"",role:"group","aria-labelledby":o,children:[(0,q.jsx)("div",{className:Y.label,id:o,children:"Products"}),(0,q.jsx)("div",{className:Y.row,"data-aia-products-row":"",children:e.map((s,g)=>(0,q.jsx)(Jt,{product:s,id:`${i}-product-${g}`,onSelect:a,onFocusChange:r,focusable:n},s.id))})]})}function Jt({product:e,id:i,onSelect:a,onFocusChange:r,focusable:n}){let o=s=>{s.metaKey||s.ctrlKey||s.shiftKey||s.altKey||s.button!==0||(s.preventDefault(),a(e))};return(0,q.jsxs)("a",{id:i,className:Y.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:n?0:-1,onClick:o,onKeyDown:s=>{s.key!=="Enter"&&s.key!==" "||(s.preventDefault(),a(e))},onFocus:()=>r?.(!0),onBlur:s=>{s.relatedTarget?.closest("[data-aia-dropdown]")||r?.(!1)},children:[(0,q.jsx)("span",{className:Y.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?(0,q.jsx)("img",{className:Y.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),(0,q.jsxs)("span",{className:Y.body,children:[e.vendor?(0,q.jsx)("span",{className:Y.vendor,children:e.vendor}):null,(0,q.jsx)("span",{className:Y.title,children:e.title}),e.price?(0,q.jsx)("span",{className:Y.price,children:e.price}):null]})]})}var U=require("@magicx-eng/ai-autocomplete-vanilla"),fe=require("react");var xt=require("@magicx-eng/ai-autocomplete-vanilla"),je=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`.aia-grid {
+`,document.head.appendChild(e)}var Y={section:"aia-section-Hugfg",label:"aia-label-nuc93",row:"aia-row-WDVBX",card:"aia-card-JBGYT",media:"aia-media-RrbGe",image:"aia-image-5pNL7",body:"aia-body-ly032",vendor:"aia-vendor-Gvu7G",title:"aia-title-gCNmq",price:"aia-price-gULcE"};var q=require("react/jsx-runtime");function wt({products:e,listboxId:i,onSelect:a,onFocusChange:r,focusable:n=!0}){if(e.length===0)return null;let o=`${i}-products-label`;return(0,q.jsxs)("section",{className:Y.section,"data-aia-products":"",role:"group","aria-labelledby":o,children:[(0,q.jsx)("div",{className:Y.label,id:o,"data-aia-products-label":"",children:"Products"}),(0,q.jsx)("div",{className:Y.row,"data-aia-products-row":"",children:e.map((s,g)=>(0,q.jsx)(Jt,{product:s,id:`${i}-product-${g}`,onSelect:a,onFocusChange:r,focusable:n},s.id))})]})}function Jt({product:e,id:i,onSelect:a,onFocusChange:r,focusable:n}){let o=s=>{s.metaKey||s.ctrlKey||s.shiftKey||s.altKey||s.button!==0||(s.preventDefault(),a(e))};return(0,q.jsxs)("a",{id:i,className:Y.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:n?0:-1,onClick:o,onKeyDown:s=>{s.key!=="Enter"&&s.key!==" "||(s.preventDefault(),a(e))},onFocus:()=>r?.(!0),onBlur:s=>{s.relatedTarget?.closest("[data-aia-dropdown]")||r?.(!1)},children:[(0,q.jsx)("span",{className:Y.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?(0,q.jsx)("img",{className:Y.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),(0,q.jsxs)("span",{className:Y.body,children:[e.vendor?(0,q.jsx)("span",{className:Y.vendor,children:e.vendor}):null,(0,q.jsx)("span",{className:Y.title,children:e.title}),e.price?(0,q.jsx)("span",{className:Y.price,children:e.price}):null]})]})}var U=require("@magicx-eng/ai-autocomplete-vanilla"),fe=require("react");var xt=require("@magicx-eng/ai-autocomplete-vanilla"),je=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`.aia-grid {
   display: grid;
   grid-template-columns: repeat(
       auto-fit,
@@ -1577,7 +1599,17 @@
 }
 `,document.head.appendChild(e)}var kt=require("react/jsx-runtime");function yt({min:e="16rem",max:i,gap:a,scroll:r=!1,maxHeight:n,scrollResetKey:o,cols:s,template:g,innerRef:w,className:b,children:x,...m}){let y=(0,je.useRef)(null);(0,je.useLayoutEffect)(()=>{if(o===void 0)return;let v=y.current;v&&(v.scrollTop=0)},[o]);let P={"--aia-grid-min":e};return i&&(P["--aia-grid-max"]=i),a&&(P["--aia-grid-gap"]=a),n&&(P["--aia-grid-max-height"]=n),s&&(P.gridTemplateColumns=(0,xt.optionsGridTemplateColumns)(s)),g&&(P.gridTemplateColumns=g),(0,kt.jsx)("div",{ref:v=>{y.current=v,w?.(v)},className:b?`aia-grid ${b}`:"aia-grid","data-scroll":r||void 0,style:P,...m,children:x})}var De=require("@magicx-eng/ai-autocomplete-vanilla"),me=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;
-  overflow: visible;
+  /* Clip, not visible: the entrance rise below runs on the inner content,
+     and a transformed box extends its scroll container's scrollable area.
+     Unclipped, the rows rising 16px from below made the option grid overflow
+     for the length of the entrance whenever nothing sat under the grid to
+     absorb it (product strip, optionsPosition="above"), so a scrollbar
+     flashed in and out and the columns shifted sideways by its width. The
+     cell's own children never paint outside it (the streak layer clips
+     itself; press and highlight stay inside the box), so nothing is lost.
+     \`hidden\` first for engines without \`clip\`. */
+  overflow: hidden;
+  overflow: clip;
   display: flex;
   /* Top-align so single-line and multi-line options in the same row share
      the same baseline at the top edge of the cell. */
@@ -1595,11 +1627,10 @@
   padding: 8px 10px;
   /* Entrance: fade in while rising into place, each row a beat after the one
      before it (--aia-option-enter-delay is set inline per row from the core's
-     optionEnterDelayMs). The durations and distance mirror OPTION_ENTER_* in
-     the core's derive/optionsEntrance.ts \u2014 change both together. */
-  animation:
-    aia-fadeIn-I8u35 150ms ease-out both,
-    aia-riseIn-etXZT 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+     optionEnterDelayMs). The fade is here; the rise is on the inner content
+     (see the overflow note above). The durations and distance mirror
+     OPTION_ENTER_* in the core's derive/optionsEntrance.ts \u2014 change both together. */
+  animation: aia-fadeIn-I8u35 150ms ease-out both;
   animation-delay: var(--aia-option-enter-delay, 0ms);
 }
 
@@ -1616,7 +1647,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .aia-item-d4vpD {
+  .aia-item-d4vpD,
+  .aia-content-T-Qba {
     animation-duration: 0s;
     animation-delay: 0s;
   }
@@ -1625,6 +1657,10 @@
 .aia-content-T-Qba {
   position: relative;
   z-index: 2;
+  /* The entrance rise (the cell above keeps the fade). Inherits the cell's
+     per-row delay through the custom property. */
+  animation: aia-riseIn-etXZT 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation-delay: var(--aia-option-enter-delay, 0ms);
 }
 
 .aia-tappable-70KcX {
@@ -1766,7 +1802,7 @@
     filter: brightness(0.55);
   }
 }
-`,document.head.appendChild(e)}var X={item:"aia-item-d4vpD",fadeIn:"aia-fadeIn-I8u35",riseIn:"aia-riseIn-etXZT",content:"aia-content-T-Qba",tappable:"aia-tappable-70KcX",nonTappable:"aia-nonTappable-xSZM-",highlighted:"aia-highlighted-Hb0SU",tag:"aia-tag-e3Fwe",pressed:"aia-pressed-98o-r",pressCompress:"aia-pressCompress-ICV3q",scrollHint:"aia-scrollHint-xKXPt",skeletonPulse:"aia-skeletonPulse-plvdD",text:"aia-text-yqoh9",icon:"aia-icon-Qw938"};var Ie=require("react/jsx-runtime");function Ct({option:e,isHighlighted:i,onSelect:a,onHighlight:r,id:n,loading:o,showIcon:s=!0,scrollHint:g,enterDelayMs:w=0}){let[b]=(0,me.useState)(w),[x,m]=(0,me.useState)(!1),y=(0,me.useMemo)(()=>s&&e.icon_svg?(0,De.sanitizeOptionIconSvg)(e.icon_svg):null,[s,e.icon_svg]),P=(0,me.useRef)(void 0);(0,me.useEffect)(()=>()=>clearTimeout(P.current),[]);let v=()=>{o||!e.is_tappable||x||(m(!0),a(e),clearTimeout(P.current),P.current=setTimeout(()=>m(!1),170))},A=[X.item,i&&!o?X.highlighted:"",e.is_tappable?X.tappable:X.nonTappable,x?X.pressed:"",g?X.scrollHint:""].filter(Boolean).join(" ");return(0,Ie.jsx)("div",{id:n,role:"option","data-aia-option":"","data-aia-loading":o?"":void 0,"data-aia-icon":y&&e.icon?e.icon:void 0,"aria-selected":i,className:A,style:{[De.OPTION_ENTER_DELAY_VAR]:`${b}ms`},tabIndex:o||!e.is_tappable?-1:0,onClick:v,onKeyDown:M=>{!o&&e.is_tappable&&(M.key==="Enter"||M.key===" ")&&(M.preventDefault(),v())},onMouseEnter:!o&&e.is_tappable?r:void 0,children:(0,Ie.jsxs)("span",{className:X.content,children:[y&&(0,Ie.jsx)("span",{className:`${X.icon} magicx-aia-option-icon`,"aria-hidden":"true",dangerouslySetInnerHTML:{__html:y}}),(0,Ie.jsx)("span",{className:X.text,children:(0,De.optionLabel)(e)}),e.tag&&(0,Ie.jsx)("span",{className:X.tag,children:e.tag})]})})}var nt=require("react/jsx-runtime");function ea(){let[e,i]=(0,fe.useState)(U.isOptionsGridMobileViewport);return(0,fe.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let a=window.matchMedia(U.OPTIONS_GRID_MOBILE_QUERY),r=()=>i(a.matches);return r(),a.addEventListener("change",r),()=>a.removeEventListener("change",r)},[]),e}function Pt({options:e,activeIndex:i,onSelect:a,onHighlight:r,listboxId:n,loading:o,groupKey:s="",optionsPosition:g="below",showIcons:w=!0}){let b=ea(),x=(0,fe.useRef)(null),[m,y]=(0,fe.useState)(null);(0,fe.useLayoutEffect)(()=>{let v=x.current,M=v&&!o&&(0,U.needsOptionsGridMeasurement)(e.length,b)?(0,U.measureOptionsGrid)(v):null;y(M?(0,U.planOptionsGrid)(e.length,b,M.rowWidths,M.gridWidth):null)},[e,b,o]);let P=m??(0,U.planOptionsGrid)(e.length,b,null,null);return(0,nt.jsx)(yt,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:s,template:P.template,maxHeight:P.maxHeight,innerRef:v=>{x.current=v},"data-aia-group":s,children:e.map((v,A)=>(0,nt.jsx)(Ct,{option:v,isHighlighted:A===i,onSelect:a,onHighlight:()=>r(A),id:`${n}-option-${A}`,loading:o,showIcon:w,scrollHint:!o&&P.scrollHintIndices.includes(A),enterDelayMs:o?0:(0,U.optionEnterDelayMs)(A,P.cols,e.length,g)},`${s}\0${v.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`.aia-stack {
+`,document.head.appendChild(e)}var X={item:"aia-item-d4vpD",fadeIn:"aia-fadeIn-I8u35",content:"aia-content-T-Qba",riseIn:"aia-riseIn-etXZT",tappable:"aia-tappable-70KcX",nonTappable:"aia-nonTappable-xSZM-",highlighted:"aia-highlighted-Hb0SU",tag:"aia-tag-e3Fwe",pressed:"aia-pressed-98o-r",pressCompress:"aia-pressCompress-ICV3q",scrollHint:"aia-scrollHint-xKXPt",skeletonPulse:"aia-skeletonPulse-plvdD",text:"aia-text-yqoh9",icon:"aia-icon-Qw938"};var Ie=require("react/jsx-runtime");function Ct({option:e,isHighlighted:i,onSelect:a,onHighlight:r,id:n,loading:o,showIcon:s=!0,scrollHint:g,enterDelayMs:w=0}){let[b]=(0,me.useState)(w),[x,m]=(0,me.useState)(!1),y=(0,me.useMemo)(()=>s&&e.icon_svg?(0,De.sanitizeOptionIconSvg)(e.icon_svg):null,[s,e.icon_svg]),P=(0,me.useRef)(void 0);(0,me.useEffect)(()=>()=>clearTimeout(P.current),[]);let v=()=>{o||!e.is_tappable||x||(m(!0),a(e),clearTimeout(P.current),P.current=setTimeout(()=>m(!1),170))},A=[X.item,i&&!o?X.highlighted:"",e.is_tappable?X.tappable:X.nonTappable,x?X.pressed:"",g?X.scrollHint:""].filter(Boolean).join(" ");return(0,Ie.jsx)("div",{id:n,role:"option","data-aia-option":"","data-aia-loading":o?"":void 0,"data-aia-icon":y&&e.icon?e.icon:void 0,"aria-selected":i,className:A,style:{[De.OPTION_ENTER_DELAY_VAR]:`${b}ms`},tabIndex:o||!e.is_tappable?-1:0,onClick:v,onKeyDown:M=>{!o&&e.is_tappable&&(M.key==="Enter"||M.key===" ")&&(M.preventDefault(),v())},onMouseEnter:!o&&e.is_tappable?r:void 0,children:(0,Ie.jsxs)("span",{className:X.content,children:[y&&(0,Ie.jsx)("span",{className:`${X.icon} magicx-aia-option-icon`,"aria-hidden":"true",dangerouslySetInnerHTML:{__html:y}}),(0,Ie.jsx)("span",{className:X.text,children:(0,De.optionLabel)(e)}),e.tag&&(0,Ie.jsx)("span",{className:X.tag,children:e.tag})]})})}var nt=require("react/jsx-runtime");function ea(){let[e,i]=(0,fe.useState)(U.isOptionsGridMobileViewport);return(0,fe.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let a=window.matchMedia(U.OPTIONS_GRID_MOBILE_QUERY),r=()=>i(a.matches);return r(),a.addEventListener("change",r),()=>a.removeEventListener("change",r)},[]),e}function Pt({options:e,activeIndex:i,onSelect:a,onHighlight:r,listboxId:n,loading:o,groupKey:s="",optionsPosition:g="below",showIcons:w=!0}){let b=ea(),x=(0,fe.useRef)(null),[m,y]=(0,fe.useState)(null);(0,fe.useLayoutEffect)(()=>{let v=x.current,M=v&&!o&&(0,U.needsOptionsGridMeasurement)(e.length,b)?(0,U.measureOptionsGrid)(v):null;y(M?(0,U.planOptionsGrid)(e.length,b,M.rowWidths,M.gridWidth):null)},[e,b,o]);let P=m??(0,U.planOptionsGrid)(e.length,b,null,null);return(0,nt.jsx)(yt,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:s,template:P.template,maxHeight:P.maxHeight,innerRef:v=>{x.current=v},"data-aia-group":s,children:e.map((v,A)=>(0,nt.jsx)(Ct,{option:v,isHighlighted:A===i,onSelect:a,onHighlight:()=>r(A),id:`${n}-option-${A}`,loading:o,showIcon:w,scrollHint:!o&&P.scrollHintIndices.includes(A),enterDelayMs:o?0:(0,U.optionEnterDelayMs)(A,P.cols,e.length,g)},`${s}\0${v.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`.aia-stack {
   display: flex;
   flex-direction: column;
   gap: var(--aia-stack-space, 0.5rem);
@@ -1805,6 +1841,10 @@
   width: 18px;
   height: 18px;
   fill: none;
+  /* The root draws nothing and the path pins its own stroke, but a page's
+     \`svg { stroke: \u2026 }\` would otherwise still land here; say none, as the
+     markup does. */
+  stroke: none;
 }
 .aia-submitButton-otz7H svg path {
   fill: none;