@svgrid/grid 2.6.22 → 2.7.0

package/dist/GridMenus.svelte

@@ -16,6 +16,9 @@
   } from "./SvGrid.types";
   import {
     getEditorInputType,
+    usesRichDateFilter,
+    toIsoDateLocal,
+    fromIsoDateLocal,
   } from "./SvGrid.helpers";
 
   import type { SvGridController } from "./SvGrid.controller.svelte";
@@ -72,11 +75,45 @@
   // anything OUTSIDE them scrolls, or on resize. Scrolling the menu's own body
   // or its facet list has to keep it open - hence onScrollOutside rather than a
   // bare capture-phase listener.
+  //
+  // The cell context menu and the comment editor were missing from this gate.
+  // Both are positioned from a one-time cursor measurement and rendered
+  // `position: fixed`, so after a scroll they float over unrelated cells - the
+  // exact defect the effect exists to prevent. Their backdrop swallows a wheel
+  // over the grid, but it does not stop the PAGE scrolling underneath them, and
+  // it does not stop a programmatic scroll.
+  //
+  // The comment editor is dismissed by SAVING rather than discarding. Clicking
+  // the backdrop or pressing Escape throws the draft away, and that is fine -
+  // both are the user saying "away with this". A scroll is not a dismissal
+  // gesture, so it must not destroy text the user has typed.
   $effect(() => {
-    if (!(columnMenuFor || filterMenuFor || operatorMenuFor || chooseColumnsPos)) return;
-    const close = () => closeMenus();
+    if (
+      !(
+        columnMenuFor ||
+        filterMenuFor ||
+        operatorMenuFor ||
+        chooseColumnsPos ||
+        contextMenuFor ||
+        commentEditFor
+      )
+    )
+      return;
+    const close = () => {
+      closeMenus();
+      closeContextMenu();
+      if (ctrl.commentEditFor) saveComment();
+    };
     const offScroll = onScrollOutside(
-      () => Array.from(document.querySelectorAll<HTMLElement>('.sv-grid-menu')),
+      // Scoped to THIS grid's menus. A bare document query treats a second
+      // grid's open menu as "inside", so scrolling in that other menu would
+      // leave this one stranded at its stale coordinates.
+      () =>
+        Array.from(
+          document.querySelectorAll<HTMLElement>(
+            `.sv-grid-menu[data-svgrid-menu="${ctrl.gridDomId}"]`,
+          ),
+        ),
       close,
     );
     window.addEventListener('resize', close);
@@ -96,6 +133,71 @@
   const clearGroupingFromMenu = $derived(ctrl.clearGroupingFromMenu);
   const columnMenuFacetValues = $derived(ctrl.columnMenuFacetValues);
   const columnMenuVisibleFacets = $derived(ctrl.columnMenuVisibleFacets);
+
+  /**
+   * How many value rows the checklist shows. It was pinned at 7 regardless of
+   * the window, so a tall screen left most of the space under the menu empty
+   * while the list stayed a 7-row porthole over a few hundred values.
+   *
+   * Read once per open rather than on resize: the popover is transient, and
+   * the menu is already capped by its own `max-height`.
+   */
+  const FACET_ROW_HEIGHT = 24;
+  const facetRows = $derived.by(function facetRows_d() {
+    if (typeof window === "undefined") return 7;
+    const top = (filterMenuFor ? filterMenuPos.y : columnMenuPos.y) || 0;
+    // What is left under the menu's top edge once the condition block, the
+    // search row and the action bar have taken their share.
+    const room = window.innerHeight - top - 320;
+    return Math.max(7, Math.min(16, Math.floor(room / FACET_ROW_HEIGHT)));
+  });
+
+  /**
+   * The same date controls the filter ROW uses. Without them a date column
+   * offered two different date UIs depending on which surface you touched:
+   * a rich picker under the header, a bare `<input type="date">` in the menu.
+   *
+   * Lazy even though GridMenus is itself a lazy chunk - the picker drags in
+   * the date-format engine, and most grids that open a column menu have no
+   * date column at all.
+   */
+  let MenuDatePicker = $state<typeof import("./SvDateTimePicker.svelte").default | null>(null);
+  let MenuRangePicker = $state<typeof import("./SvDateRangeInput.svelte").default | null>(null);
+  $effect(() => {
+    const colId = filterMenuFor ?? columnMenuFor;
+    if (!colId) return;
+    const column = allColumns.find((c) => c.id === colId);
+    if (!usesRichDateFilter(column?.columnDef.editorType)) return;
+    if (!MenuDatePicker)
+      import("./SvDateTimePicker.svelte").then((m) => (MenuDatePicker = m.default));
+    if (!MenuRangePicker)
+      import("./SvDateRangeInput.svelte").then((m) => (MenuRangePicker = m.default));
+  });
+
+  /**
+   * Opening the filter popover used to leave focus on the funnel button
+   * outside it, so a keyboard user landed nowhere and had to tab in past the
+   * whole menu. Focus the first control instead - the condition value if the
+   * column has one, else the value search.
+   */
+  function focusFilterPanel(node: HTMLElement) {
+    requestAnimationFrame(() => {
+      const first = node.querySelector<HTMLElement>(
+        ".sv-grid-menu-condition-value, .sv-dtp__input, .sv-dri__input, .sv-grid-menu-search",
+      );
+      first?.focus({ preventScroll: true });
+    });
+  }
+
+  /** Enter anywhere in the panel means "done" - filtering is already live. */
+  function onFilterPanelKeydown(event: KeyboardEvent) {
+    if (event.key !== "Enter" || event.shiftKey) return;
+    const target = event.target as HTMLElement | null;
+    // Let the listbox and real buttons keep Enter for their own activation.
+    if (target?.closest(".sv-listbox") || target?.tagName === "BUTTON") return;
+    event.preventDefault();
+    closeMenus();
+  }
   const columnMenuFacetOptions = $derived(ctrl.columnMenuFacetOptions);
   const columnMenuSelectedFacets = $derived(ctrl.columnMenuSelectedFacets);
   const setFacetSelection = $derived(ctrl.setFacetSelection);
@@ -187,6 +289,21 @@
     {@const menuOperatorOptions = operatorsForColumn(menuColumn)}
     {@const menuActiveOperator = filterMenuValues[colId]?.operator ?? defaultOperatorFor(menuColumn)}
     {@const menuInputType = getEditorInputType((menuColumn?.columnDef.editorType ?? "text") as CellEditorType)}
+    {@const richDate =
+      usesRichDateFilter(menuColumn?.columnDef.editorType) &&
+      menuActiveOperator !== "isBlank" &&
+      menuActiveOperator !== "isNotBlank" &&
+      menuActiveOperator !== "regex" &&
+      menuActiveOperator !== "in" &&
+      menuActiveOperator !== "notIn"}
+    {@const searching =
+      columnMenuVisibleFacets.length !== columnMenuFacetValues.length}
+    {@const conditionActive =
+      menuActiveOperator === "isBlank" ||
+      menuActiveOperator === "isNotBlank" ||
+      (filterMenuValues[colId]?.value ?? "").trim().length > 0}
+    {@const pickedCount = columnMenuSelectedFacets.size}
+    {@const totalCount = columnMenuFacetValues.length}
     <div class="sv-grid-menu-filter">
       <div class="sv-grid-menu-filter-head">
         <span class="sv-grid-header-icon">{@render icon("filter")}</span> Filter
@@ -204,6 +321,40 @@
         {/each}
       </select>
       {#if menuActiveOperator !== "isBlank" && menuActiveOperator !== "isNotBlank"}
+      {#if richDate}
+        <!-- Same controls the filter row uses, so a date column behaves the
+             same wherever you touch it: a picker, or a range field for
+             `between`. `regex` and the set operators keep the text box - a
+             pattern and a token list are not dates. -->
+        {#if menuActiveOperator === "between"}
+          {#if MenuRangePicker}
+            {@const RangePicker = MenuRangePicker}
+            {@const from = fromIsoDateLocal(filterMenuValues[colId]?.value)}
+            {@const to = fromIsoDateLocal(filterMenuValues[colId]?.valueTo)}
+            <RangePicker
+              value={from && to ? [from, to] : null}
+              formatString="yyyy-MM-dd"
+              block
+              placeholder="Pick a range..."
+              onChange={(range) => {
+                updateFilterMenuValue(colId, range ? toIsoDateLocal(range[0]) : "");
+                updateFilterMenuValueTo(colId, range ? toIsoDateLocal(range[1]) : "");
+              }}
+            />
+          {/if}
+        {:else if MenuDatePicker}
+          {@const DatePicker = MenuDatePicker}
+          <DatePicker
+            value={(filterMenuValues[colId]?.value ?? "") || null}
+            formatString="yyyy-MM-dd"
+            dropDownDisplayMode="calendar"
+            block
+            nullable
+            placeholder="Filter value..."
+            onChange={(d) => updateFilterMenuValue(colId, toIsoDateLocal(d))}
+          />
+        {/if}
+      {:else}
         {@const isSetOp =
           menuActiveOperator === "in" || menuActiveOperator === "notIn"}
         <!-- in/notIn drives the shared value-suggestions dropdown (a windowed
@@ -239,6 +390,9 @@
             oninput={(event) => updateFilterMenuValueTo(colId, (event.currentTarget as HTMLInputElement).value)}
           />
         {/if}
+      {/if}
+        <!-- A second condition is offered for every column type, date
+             included, so this sits outside the value-control branch. -->
         {@const mf = filterMenuValues[colId]}
         {#if mf?.operator2}
           {@const op2 = mf.operator2 ?? defaultOperatorFor(menuColumn)}
@@ -288,7 +442,16 @@
         {/if}
       {/if}
       <div class="sv-grid-menu-sep"></div>
-      <div class="sv-grid-menu-filter-head">Values</div>
+      <div class="sv-grid-menu-filter-head">
+        Values
+        <!-- The condition above and this checklist are ANDed. Nothing said so,
+             so a row could vanish for a reason neither half showed on its own. -->
+        {#if conditionActive}
+          <span class="sv-grid-menu-head-note">and the condition above</span>
+        {:else if pickedCount < totalCount}
+          <span class="sv-grid-menu-head-note">{pickedCount} of {totalCount}</span>
+        {/if}
+      </div>
       <input
         class="sv-grid-menu-search"
         placeholder="Search values..."
@@ -296,7 +459,11 @@
       />
       <label class="sv-grid-facet sv-grid-facet-all">
         <input type="checkbox" checked={isAllFacetsChecked(colId)} onchange={() => toggleAllFacets(colId)} />
-        <span class="sv-grid-facet-label">(Select all)</span>
+        <!-- Says what it will actually do: with a query typed it acts on the
+             matches only, leaving the rest of the selection untouched. -->
+        <span class="sv-grid-facet-label"
+          >{searching ? "(Select all results)" : "(Select all)"}</span
+        >
       </label>
       <!-- Windowed checklist. A high-cardinality column (10k distinct symbols
            on a live feed) would otherwise mount a label + checkbox per value -
@@ -308,7 +475,7 @@
           checkbox
           multiple
           virtual={columnMenuFacetOptions.length > FACET_VIRTUAL_THRESHOLD}
-          rows={7}
+          rows={facetRows}
           rowHeight={24}
           size="sm"
           ariaLabel="Filter values"
@@ -348,6 +515,7 @@
     {@const menuTab = ctrl.columnMenuTab}
     <div
       class="sv-grid-menu sv-grid-column-menu"
+      data-svgrid-menu={ctrl.gridDomId}
       role="menu"
       style={`left: ${columnMenuPos.x}px; top: ${columnMenuPos.y}px; max-height: calc(100vh - ${columnMenuPos.y}px - 12px);`}
     >
@@ -535,10 +703,15 @@
   {/if}
 
   {#if filterMenuFor && showColumnFiltersEffective}
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
     <div
       class="sv-grid-menu sv-grid-filter-menu"
+      data-svgrid-menu={ctrl.gridDomId}
       role="menu"
       style={`left: ${filterMenuPos.x}px; top: ${filterMenuPos.y}px; max-height: calc(100vh - ${filterMenuPos.y}px - 12px);`}
+      tabindex="-1"
+      use:focusFilterPanel
+      onkeydown={onFilterPanelKeydown}
     >
       {@render filterPanelBody(filterMenuFor)}
     </div>
@@ -548,6 +721,7 @@
     {@const everyColumn = grid.getAllColumns()}
     <div
       class="sv-grid-menu sv-grid-choose-columns-menu"
+      data-svgrid-menu={ctrl.gridDomId}
       role="menu"
       style={`left: ${chooseColumnsPos.x}px; top: ${chooseColumnsPos.y}px;`}
     >
@@ -576,6 +750,7 @@
       filterMenuValues[opColumnId]?.operator ?? defaultOperatorFor(opColumn)}
     <div
       class="sv-grid-menu sv-grid-operator-menu"
+      data-svgrid-menu={ctrl.gridDomId}
       role="menu"
       style={`left: ${operatorMenuPos.x}px; top: ${operatorMenuPos.y}px;`}
     >
@@ -613,6 +788,7 @@
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="sv-grid-menu sv-grid-in-suggest"
+      data-svgrid-menu={ctrl.gridDomId}
       style={`left: ${inSuggestPos.x}px; top: ${inSuggestPos.y}px;`}
       onmousedown={(event) => event.preventDefault()}
     >
@@ -656,6 +832,7 @@
     ></div>
     <div
       class="sv-grid-menu sv-grid-context-menu"
+      data-svgrid-menu={ctrl.gridDomId}
       role="menu"
       style={`left: ${contextMenuPos.x}px; top: ${contextMenuPos.y}px;`}
     >
@@ -683,6 +860,7 @@
     ></div>
     <div
       class="sv-grid-menu sv-grid-comment-editor"
+      data-svgrid-menu={ctrl.gridDomId}
       role="dialog"
       aria-label="Edit comment"
       style={`left: ${commentEditFor.x}px; top: ${commentEditFor.y}px;`}

package/dist/SvAutoComplete.svelte

@@ -1,165 +1,169 @@
-<script lang="ts">
-  /**
-   * SvAutoComplete - a free-text input with a live-filtered suggestion list.
-   * Unlike SvComboBox, it accepts ANY value (the text), suggestions are just
-   * shortcuts. Parity: Smart `smart-input` (autocomplete). Emits the text string.
-   *
-   * One styled renderer over the headless `createAutocomplete` core; only
-   * portal/measure render concerns live here.
-   */
-  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
-  import { startPanelResize } from './panel-resize'
-  import { createDismissableLayer } from './a11y/dismissable'
-  import { type ListOption } from './list-option'
-  import SvField from './SvField.svelte'
-  import { nextEditorId, type SvEditorProps } from './editor-contract'
-  import { createAutocomplete } from './createAutocomplete.svelte'
-
-  type Props = SvEditorProps & {
-    value?: string
-    onChange?: (value: string) => void
-    /** Suggestions - strings or {value,label} (label is shown, value inserted). */
-    suggestions?: ReadonlyArray<string | ListOption>
-    minChars?: number
-    placeholder?: string
-    /** Show a bottom drag grip so the user can resize the open suggestion panel's
-     *  height (hidden when the panel flips upward, where there is no room to grow). */
-    resizable?: boolean
-  }
-
-  let {
-    value = $bindable(''),
-    onChange,
-    suggestions = [],
-    minChars = 1,
-    placeholder,
-    resizable = false,
-    disabled = false,
-    name,
-    size = 'md',
-    ariaLabel,
-    invalid = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-    loading = false,
-  }: Props = $props()
-
-  const autoId = nextEditorId('sv-ac')
-  const uid = $derived(id ?? autoId)
-
-  let fieldEl = $state<HTMLInputElement | null>(null)
-  let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
-  // User-chosen panel height (px) once they drag the resize grip; null = auto.
-  let userHeight = $state<number | null>(null)
-  const DEFAULT_CAP = 288
-  const panelMaxH = $derived(
-    resizable && userHeight != null ? Math.min(userHeight, rect.availHeight) : Math.min(rect.availHeight, DEFAULT_CAP),
-  )
-  const showGrip = $derived(resizable && !rect.openUpward)
-
-  const ac = createAutocomplete({
-    value: () => value,
-    onChange: (v) => { value = v; onChange?.(v) },
-    suggestions: () => suggestions,
-    minChars: () => minChars,
-    disabled: () => disabled,
-    ariaLabel: () => ariaLabel,
-    focusInput: () => fieldEl?.focus(),
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-  })
-
-  function updatePos() {
-    if (!fieldEl) return
-    // estimatedHeight only picks the flip direction; real max-height is availHeight
-    // below, so the panel takes its natural content height. See SvComboBox. When
-    // the user has dragged the grip, anchor the flip decision to THAT height.
-    const est = resizable && userHeight != null ? userHeight : Math.min(ac.filtered.length, 8) * 34 + 12
-    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: est })
-  }
-
-  function startResize(e: PointerEvent) {
-    if (!panelEl) return
-    startPanelResize(e, {
-      startHeight: panelEl.clientHeight,
-      min: 96,
-      max: () => rect.availHeight,
-      onHeight: (h) => { userHeight = h; updatePos() },
-    })
-  }
-
-  $effect(() => {
-    if (!ac.open) return
-    updatePos()
-    const rp = () => updatePos()
-    window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
-    const layer = createDismissableLayer({ element: () => [fieldEl, panelEl], onDismiss: () => ac.close(), closeOnEscape: false })
-    layer.activate()
-    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); layer.release() }
-  })
-</script>
-
-<SvField id={uid} {label} {hint} {error} {required} {dir} {loading}>
-  <input
-    bind:this={fieldEl}
-    class="sv-ac sv-ac--{size}"
-    class:is-invalid={invalid}
-    type="text"
-    {placeholder}
-    {...ac.inputProps()}
-  />
-</SvField>
-
-{#if ac.open}
-  <div bind:this={panelEl} class="sv-ddl__panel" class:is-resizable={showGrip} use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${panelMaxH}px`} style:height={resizable && userHeight != null && !rect.openUpward ? `${panelMaxH}px` : undefined} {...ac.listboxProps()}>
-    {#each ac.filtered as opt, i (i)}
-      <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-      <div class="sv-ddl__opt" class:is-active={ac.isActive(i)} {...ac.optionProps(i)}>{opt.label}</div>
-    {/each}
-    {#if showGrip}
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div class="sv-ddl__grip" onpointerdown={startResize} title="Drag to resize" aria-hidden="true">
-        <span class="sv-ddl__grip-dots"></span>
-      </div>
-    {/if}
-  </div>
-{/if}
-{#if name}<input type="hidden" {name} value={value} />{/if}
-
-<style>
-  .sv-ac {
-    --_accent: var(--sg-accent, #2563eb);
-    box-sizing: border-box; width: 220px;
-    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
-    font: inherit; padding: 0 10px; outline: none;
-  }
-  .sv-ac--sm { height: 28px; font-size: 12px; }
-  .sv-ac--md { height: 34px; font-size: 13px; }
-  .sv-ac--lg { height: 40px; font-size: 15px; }
-  .sv-ac:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
-  .sv-ac.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-ac.is-invalid:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  /* Bottom resize grip (shared "····" handle - see SvDropDownList / panel-resize). */
-  :global(.sv-ddl__panel.is-resizable) { padding-bottom: 0; }
-  :global(.sv-ddl__grip) {
-    position: sticky; bottom: 0; z-index: 1; margin: 2px -4px -4px; height: 15px;
-    display: flex; align-items: center; justify-content: center; cursor: ns-resize;
-    background: var(--sg-bg, #fff); border-top: 1px solid var(--sg-border, #e2e8f0);
-    border-radius: 0 0 10px 10px; touch-action: none;
-  }
-  :global(.sv-ddl__grip-dots) {
-    width: 26px; height: 4px; color: var(--sg-muted, #94a3b8); opacity: 0.6;
-    background-image: radial-gradient(currentColor 1px, transparent 1.6px);
-    background-size: 6px 4px; background-position: center; background-repeat: repeat-x;
-  }
-  :global(.sv-ddl__grip:hover .sv-ddl__grip-dots) { opacity: 1; }
-</style>
+<script lang="ts">
+  /**
+   * SvAutoComplete - a free-text input with a live-filtered suggestion list.
+   * Unlike SvComboBox, it accepts ANY value (the text), suggestions are just
+   * shortcuts. Parity: Smart `smart-input` (autocomplete). Emits the text string.
+   *
+   * One styled renderer over the headless `createAutocomplete` core; only
+   * portal/measure render concerns live here.
+   */
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { startPanelResize } from './panel-resize'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import { type ListOption } from './list-option'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { createAutocomplete } from './createAutocomplete.svelte'
+
+  type Props = SvEditorProps & {
+    value?: string
+    onChange?: (value: string) => void
+    /** Suggestions - strings or {value,label} (label is shown, value inserted). */
+    suggestions?: ReadonlyArray<string | ListOption>
+    minChars?: number
+    placeholder?: string
+    /** Show a bottom drag grip so the user can resize the open suggestion panel's
+     *  height (hidden when the panel flips upward, where there is no room to grow). */
+    resizable?: boolean
+  }
+
+  let {
+    value = $bindable(''),
+    onChange,
+    suggestions = [],
+    minChars = 1,
+    placeholder,
+    resizable = false,
+    disabled = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    block = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    loading = false,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-ac')
+  const uid = $derived(id ?? autoId)
+
+  let fieldEl = $state<HTMLInputElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+  // User-chosen panel height (px) once they drag the resize grip; null = auto.
+  let userHeight = $state<number | null>(null)
+  const DEFAULT_CAP = 288
+  const panelMaxH = $derived(
+    resizable && userHeight != null ? Math.min(userHeight, rect.availHeight) : Math.min(rect.availHeight, DEFAULT_CAP),
+  )
+  const showGrip = $derived(resizable && !rect.openUpward)
+
+  const ac = createAutocomplete({
+    value: () => value,
+    onChange: (v) => { value = v; onChange?.(v) },
+    suggestions: () => suggestions,
+    minChars: () => minChars,
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+    focusInput: () => fieldEl?.focus(),
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+  })
+
+  function updatePos() {
+    if (!fieldEl) return
+    // estimatedHeight only picks the flip direction; real max-height is availHeight
+    // below, so the panel takes its natural content height. See SvComboBox. When
+    // the user has dragged the grip, anchor the flip decision to THAT height.
+    const est = resizable && userHeight != null ? userHeight : Math.min(ac.filtered.length, 8) * 34 + 12
+    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: est })
+  }
+
+  function startResize(e: PointerEvent) {
+    if (!panelEl) return
+    startPanelResize(e, {
+      startHeight: panelEl.clientHeight,
+      min: 96,
+      max: () => rect.availHeight,
+      onHeight: (h) => { userHeight = h; updatePos() },
+    })
+  }
+
+  $effect(() => {
+    if (!ac.open) return
+    updatePos()
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
+    const layer = createDismissableLayer({ element: () => [fieldEl, panelEl], onDismiss: () => ac.close(), closeOnEscape: false })
+    layer.activate()
+    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); layer.release() }
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir} {loading}>
+  <input
+    bind:this={fieldEl}
+    class="sv-ac sv-ac--{size}"
+    class:is-block={block}
+    class:is-invalid={invalid}
+    type="text"
+    {placeholder}
+    {...ac.inputProps()}
+  />
+</SvField>
+
+{#if ac.open}
+  <div bind:this={panelEl} class="sv-ddl__panel" class:is-resizable={showGrip} use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${panelMaxH}px`} style:height={resizable && userHeight != null && !rect.openUpward ? `${panelMaxH}px` : undefined} {...ac.listboxProps()}>
+    {#each ac.filtered as opt, i (i)}
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
+      <div class="sv-ddl__opt" class:is-active={ac.isActive(i)} {...ac.optionProps(i)}>{opt.label}</div>
+    {/each}
+    {#if showGrip}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="sv-ddl__grip" onpointerdown={startResize} title="Drag to resize" aria-hidden="true">
+        <span class="sv-ddl__grip-dots"></span>
+      </div>
+    {/if}
+  </div>
+{/if}
+{#if name}<input type="hidden" {name} value={value} />{/if}
+
+<style>
+  .sv-ac {
+    --_accent: var(--sg-accent, #2563eb);
+    box-sizing: border-box; width: 220px;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+    font: inherit; padding: 0 10px; outline: none;
+  }
+  .sv-ac--sm { height: 28px; font-size: 12px; }
+  .sv-ac--md { height: 34px; font-size: 13px; }
+  .sv-ac--lg { height: 40px; font-size: 15px; }
+  .sv-ac:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-ac.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-ac.is-invalid:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+  /* Bottom resize grip (shared "····" handle - see SvDropDownList / panel-resize). */
+  :global(.sv-ddl__panel.is-resizable) { padding-bottom: 0; }
+  :global(.sv-ddl__grip) {
+    position: sticky; bottom: 0; z-index: 1; margin: 2px -4px -4px; height: 15px;
+    display: flex; align-items: center; justify-content: center; cursor: ns-resize;
+    background: var(--sg-bg, #fff); border-top: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 0 0 10px 10px; touch-action: none;
+  }
+  :global(.sv-ddl__grip-dots) {
+    width: 26px; height: 4px; color: var(--sg-muted, #94a3b8); opacity: 0.6;
+    background-image: radial-gradient(currentColor 1px, transparent 1.6px);
+    background-size: 6px 4px; background-position: center; background-repeat: repeat-x;
+  }
+  :global(.sv-ddl__grip:hover .sv-ddl__grip-dots) { opacity: 1; }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-ac.is-block { width: 100%; max-width: 100%; }
+</style>