@svgrid/grid 2.6.22 → 2.6.23

package/dist/selection.js

@@ -224,15 +224,21 @@ export function createSelection(ctx) {
      * that contains the cell are returned (active range checked last so its
      * outline wins on overlap). Returns null when the cell is in no range.
      */
+    /** Could `getSelectionRects()` return anything? An anchored active range or
+     *  a committed one is the only way a rect can exist, and both are plain
+     *  property reads - so this is the cheap guard in front of anything that
+     *  would otherwise allocate a rect array to discover there is nothing. */
+    function hasAnySelectionRect() {
+        const active = ctx.selectionRange;
+        const committed = ctx.selectionRanges;
+        return Boolean(committed?.length) || Boolean(active?.anchor && active?.focus);
+    }
     function getCellRangeEdges(rowIndex, colIndex) {
         // Bail before `getSelectionRects()`, which allocates an array and resolves
         // every range. This runs once per rendered CELL on every render - about 250
         // times per frame on a default grid - and with nothing selected it did all
-        // that work to return null every time. An anchored active range or a
-        // committed one is the only way any rect can exist.
-        const active = ctx.selectionRange;
-        const committed = ctx.selectionRanges;
-        if (!committed?.length && !(active?.anchor && active?.focus))
+        // that work to return null every time.
+        if (!hasAnySelectionRect())
             return null;
         for (const rect of getSelectionRects()) {
             if (rowIndex < rect.minRow ||
@@ -250,10 +256,40 @@ export function createSelection(ctx) {
         }
         return null;
     }
+    /**
+     * The rectangle a drag is currently promising, or null when no drag is in
+     * flight. A fill grows the source rectangle out to the pointer; a move
+     * detaches an identically-sized rectangle and drops it at the offset the
+     * pointer has travelled. Both feed the same preview tint and marquee, so a
+     * range move looks like the fill handle users already know.
+     */
+    function dragPreviewRect() {
+        const m = ctx.moveDrag;
+        if (m)
+            return ctx.moveDestRect(m);
+        const d = ctx.fillDrag;
+        if (!d)
+            return null;
+        return {
+            minRow: Math.min(d.sourceMinRow, d.targetRow),
+            maxRow: Math.max(d.sourceMaxRow, d.targetRow),
+            minCol: Math.min(d.sourceMinCol, d.targetCol),
+            maxCol: Math.max(d.sourceMaxCol, d.targetCol),
+        };
+    }
     /** Returns true when the given cell is inside the fill-drag preview
      *  range BUT outside the original source range. Used to paint a
      *  dashed-outline preview while the user is dragging the handle. */
     function isInFillPreview(rowIndex, colIndex) {
+        if (ctx.moveDrag) {
+            const rect = dragPreviewRect();
+            if (!rect)
+                return false;
+            return (rowIndex >= rect.minRow &&
+                rowIndex <= rect.maxRow &&
+                colIndex >= rect.minCol &&
+                colIndex <= rect.maxCol);
+        }
         const d = ctx.fillDrag;
         if (!d)
             return false;
@@ -279,13 +315,14 @@ export function createSelection(ctx) {
      * border. Returns null when the cell isn't on the rectangle's boundary.
      */
     function fillMarqueeEdges(rowIndex, colIndex) {
-        const d = ctx.fillDrag;
-        if (!d)
+        // Cheap bail before the shared rect helper, which allocates: this runs
+        // once per rendered cell and no drag is in flight almost all the time.
+        if (!ctx.fillDrag && !ctx.moveDrag)
             return null;
-        const minR = Math.min(d.sourceMinRow, d.targetRow);
-        const maxR = Math.max(d.sourceMaxRow, d.targetRow);
-        const minC = Math.min(d.sourceMinCol, d.targetCol);
-        const maxC = Math.max(d.sourceMaxCol, d.targetCol);
+        const rect = dragPreviewRect();
+        if (!rect)
+            return null;
+        const { minRow: minR, maxRow: maxR, minCol: minC, maxCol: maxC } = rect;
         if (rowIndex < minR || rowIndex > maxR || colIndex < minC || colIndex > maxC) {
             return null;
         }
@@ -309,6 +346,18 @@ export function createSelection(ctx) {
         const column = ctx.allColumns[colIndex];
         if (!row || !column || isGroupRow(row))
             return;
+        // A pointerdown on the outer few pixels of a selection border grabs the
+        // range to move it. Checked before anything else, because everything below
+        // would first collapse the selection this drag is about to relocate.
+        // Returns false unless the pointer really was on the strip, so a click
+        // anywhere further inside falls straight through to the old behaviour.
+        if (ctx.startMoveDrag(event, rowIndex, colIndex)) {
+            // A grab that never moves still ends in a `click` on the cell under the
+            // border. Left alone that click would collapse the range the user was
+            // clearly reaching for, and on a checkbox column it would flip the value.
+            moveGrabSwallowsClick = true;
+            return;
+        }
         // NOTE: we no longer bail for checkbox columns. Bailing here meant a
         // range drag could never START on a checkbox cell. A plain click still
         // toggles the checkbox via onCellClick (a same-cell click), while a
@@ -344,27 +393,93 @@ export function createSelection(ctx) {
         extendSelection(rowIndex, colIndex);
         setActiveCell(rowIndex, colIndex);
     }
-    function endDragSelection() {
+    /** `event` is the window `pointerup` when this comes from the real gesture,
+     *  and absent when `onWindowPointerMove` calls it to recover from a release
+     *  it never saw. A range move reads its copy modifier from it, so holding
+     *  Ctrl between the last movement and the release still copies. */
+    function endDragSelection(event) {
         ctx.isDraggingSelection = false;
+        // Every drag shares one edge-scroll loop, and it exits on its own once no
+        // drag is live - but stopping it here cancels the pending frame rather
+        // than letting one more fire after the gesture is over.
+        ctx.stopEdgeScroll();
         // Also commit a fill-handle drag if one was in progress - the user
         // released the mouse, time to apply the pattern.
         if (ctx.fillDrag)
             ctx.onFillPointerUp();
+        if (ctx.moveDrag)
+            ctx.onMovePointerUp(event);
     }
     function onWindowPointerMove(event) {
+        if (ctx.moveDrag) {
+            ctx.onMovePointerMove(event);
+            return;
+        }
         if (ctx.fillDrag) {
             ctx.onFillPointerMove(event);
             return;
         }
-        if (!ctx.isDraggingSelection)
+        if (!ctx.isDraggingSelection) {
+            updateMoveGrabHover(event);
             return;
+        }
         // Safety: if no mouse button is held the drag is over (we may have
         // missed pointerup because the user lifted outside the window).
         if (event.buttons === 0) {
             endDragSelection();
+            return;
         }
+        // Drag-select past the viewport edge scrolls the grid, same as the fill
+        // and move drags. Without it a range can only ever cover what was already
+        // on screen when the drag started. `onCellPointerEnter` keeps extending
+        // the range for cells the pointer actually crosses; this covers the case
+        // where the pointer has stopped at the edge and the CELLS are moving.
+        ctx.trackEdgeScroll(event);
     }
+    /**
+     * Switch the grid to a move cursor while the pointer sits on the grab strip
+     * of a selection border - without it the feature is invisible, since the
+     * border is painted, not a hit target.
+     *
+     * This runs on every window pointermove, so the order of the guards is the
+     * point: `moveCellsEffective` and the already-hovering flag are plain
+     * property reads, and `isOnMoveGrabStrip` bails on `getCellRangeEdges`
+     * before measuring anything when no range is selected.
+     */
+    function updateMoveGrabHover(event) {
+        const wasHovering = ctx.moveGrabHover;
+        // Two property reads before anything touches the DOM. `closest()` walks
+        // ancestors on EVERY pointer move over the page, so it has to sit behind
+        // both "the feature is on" and "there is a range to grab".
+        if (!ctx.moveCellsEffective || !hasAnySelectionRect()) {
+            if (wasHovering)
+                ctx.moveGrabHover = false;
+            return;
+        }
+        const target = event.target;
+        const cell = target?.closest?.("td[data-svgrid-row][data-svgrid-col]");
+        let hovering = false;
+        if (cell) {
+            const r = Number(cell.dataset.svgridRow);
+            const c = Number(cell.dataset.svgridCol);
+            if (Number.isFinite(r) && Number.isFinite(c)) {
+                hovering = ctx.isOnMoveGrabStrip(cell, r, c, event.clientX, event.clientY);
+            }
+        }
+        if (hovering !== wasHovering)
+            ctx.moveGrabHover = hovering;
+    }
+    /** Set when a pointerdown started a range move, so the `click` that
+     *  follows a zero-distance grab is discarded instead of collapsing the
+     *  selection it grabbed. One gesture, one flag - cleared on the next click
+     *  whether or not the grab turned into a real drag. */
+    let moveGrabSwallowsClick = false;
     function onCellClick(rowIndex, colIndex) {
+        if (moveGrabSwallowsClick) {
+            moveGrabSwallowsClick = false;
+            ctx.gridRootEl?.focus({ preventScroll: true });
+            return;
+        }
         const row = ctx.allRows[rowIndex];
         const column = ctx.allColumns[colIndex];
         if (!row || !column)
@@ -450,6 +565,7 @@ export function createSelection(ctx) {
         fillMarqueeEdges,
         getSelectionRects,
         isInFillPreview,
+        dragPreviewRect,
         findColumnById,
         onCellPointerDown,
         onCellPointerEnter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "2.6.22",
+  "version": "2.6.23",
   "description": "Svelte 5-native data grid and data table. Headless-first engine with virtual scrolling for 100k+ rows, Excel-style filtering, inline editing, grouping, tree data, pivot, and server-side data. Drop-in <SvGrid> component. TypeScript, SSR-ready.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",

package/src/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/src/SvAutoComplete.svelte

@@ -39,6 +39,7 @@
     size = 'md',
     ariaLabel,
     invalid = false,
+    block = false,
     required = false,
     error,
     label,
@@ -111,6 +112,7 @@
   <input
     bind:this={fieldEl}
     class="sv-ac sv-ac--{size}"
+    class:is-block={block}
     class:is-invalid={invalid}
     type="text"
     {placeholder}
@@ -162,4 +164,6 @@
     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>

package/src/SvComboBox.svelte

@@ -63,6 +63,7 @@
     size = 'md',
     ariaLabel,
     invalid = false,
+    block = false,
     required = false,
     error,
     label,
@@ -182,7 +183,8 @@
 </script>
 
 <SvField id={uid} {label} {hint} {error} {required} {dir} loading={loadingProp || loading}>
-  <div bind:this={fieldEl} class="sv-combo sv-combo--{size}" class:is-open={combo.open} class:is-disabled={disabled} class:is-invalid={invalid}>
+  <div bind:this={fieldEl} class="sv-combo sv-combo--{size}"
+    class:is-block={block} class:is-open={combo.open} class:is-disabled={disabled} class:is-invalid={invalid}>
     <input
       bind:this={inputEl}
       class="sv-combo__input"
@@ -272,4 +274,6 @@
     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-combo.is-block { width: 100%; max-width: 100%; }
 </style>

package/src/SvDateRangeInput.svelte

@@ -74,6 +74,7 @@
     size = 'md',
     ariaLabel,
     invalid = false,
+    block = false,
     required = false,
     error,
     label,
@@ -117,6 +118,7 @@
 
   // --- Portalled popover positioning (DOM-bound; stays in the component) -------
   let triggerEl = $state<HTMLDivElement | null>(null)
+  let inputEl = $state<HTMLInputElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
   let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
 
@@ -157,8 +159,26 @@
 </script>
 
 <SvField id={uid} {label} {hint} {error} {required} {dir}>
-<div class="sv-dri" class:sv-dri--disabled={disabled}>
-  <div class="sv-dri__field sv-dri__field--{size}" class:is-invalid={invalid} bind:this={triggerEl} dir={resolvedDir}>
+<div class="sv-dri" class:is-block={block} class:sv-dri--disabled={disabled}>
+  <!-- The whole field is the trigger, not just the <input>. The input is
+       readonly and carries the dialog semantics, but it is the flex child that
+       shrinks: squeezed into a narrow container (a grid filter cell, say) it
+       collapses to a couple of pixels and the icon, padding and range text
+       around it were all dead to a click. The input keeps the a11y role and
+       focus; this only widens the hit area. -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div
+    class="sv-dri__field sv-dri__field--{size}"
+    class:is-invalid={invalid}
+    bind:this={triggerEl}
+    dir={resolvedDir}
+    onclick={() => {
+      if (!isInteractive) return
+      inputEl?.focus()
+      toggle()
+    }}
+  >
     <svg class="sv-dri__icon" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>
     <input
       id={uid}
@@ -171,8 +191,8 @@
       {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
       aria-haspopup="dialog"
       aria-expanded={open}
-      onclick={() => isInteractive && toggle()}
       onkeydown={onFieldKeydown}
+      bind:this={inputEl}
       use:focusOpen
     />
     {#if value && isInteractive}
@@ -253,4 +273,6 @@
     background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
     border-radius: 12px; box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35);
   }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-dri.is-block, .sv-dri.is-block .sv-dri__field { width: 100%; max-width: 100%; }
 </style>

package/src/SvDropDownList.svelte

@@ -57,6 +57,7 @@
     size = 'md',
     ariaLabel,
     invalid = false,
+    block = false,
     required = false,
     error,
     label,
@@ -231,6 +232,7 @@
   <button
     bind:this={triggerEl}
     class="sv-ddl sv-ddl--{size}"
+    class:is-block={block}
     class:is-open={ddl.open}
     class:is-disabled={disabled}
     class:is-invalid={invalid}
@@ -371,4 +373,6 @@
   :global(.sv-ddl__empty) { padding: 12px 12px; font-size: 13px; color: var(--sg-muted, #64748b); text-align: center; }
   :global(.sv-ddl__header) { padding: 8px 10px; border-bottom: 1px solid var(--sg-border, #e2e8f0); font-size: 12.5px; color: var(--sg-muted, #64748b); }
   :global(.sv-ddl__footer) { padding: 8px 10px; border-top: 1px solid var(--sg-border, #e2e8f0); font-size: 12.5px; }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-ddl.is-block { width: 100%; max-width: 100%; }
 </style>