@svgrid/grid 2.1.22 → 2.2.0

package/dist/SvPagination.svelte

@@ -9,7 +9,7 @@
    * <SvPagination page={p} pageCount={20} onChange={(n) => (p = n)} />
    * ```
    */
-  import { paginationRange } from './paginate'
+  import { createPagination } from './createPagination'
 
   type Props = {
     /** 1-based current page. */
@@ -38,23 +38,26 @@
     ariaLabel = 'Pagination',
   }: Props = $props()
 
-  const items = $derived(paginationRange({ page, pageCount, siblingCount, boundaryCount }))
-  const go = (p: number) => {
-    if (disabled) return
-    const next = Math.min(Math.max(p, 1), pageCount)
-    if (next !== page) onChange?.(next)
-  }
+  // Page-range math + navigation live in the shared headless core.
+  const pg = createPagination({
+    page: () => page,
+    pageCount: () => pageCount,
+    onChange,
+    siblingCount: () => siblingCount,
+    boundaryCount: () => boundaryCount,
+    disabled: () => disabled,
+  })
 </script>
 
-<nav class="sv-pg sv-pg--{size}" aria-label={ariaLabel}>
+<nav class="sv-pg sv-pg--{size}" {...pg.navProps(ariaLabel)}>
   <ul class="sv-pg__list">
     {#if showFirstLast}
-      <li><button type="button" class="sv-pg__btn" aria-label="First page" onclick={() => go(1)} disabled={disabled || page <= 1}>&laquo;</button></li>
+      <li><button type="button" class="sv-pg__btn" {...pg.firstProps()}>&laquo;</button></li>
     {/if}
     {#if showPrevNext}
-      <li><button type="button" class="sv-pg__btn" aria-label="Previous page" onclick={() => go(page - 1)} disabled={disabled || page <= 1}>&lsaquo;</button></li>
+      <li><button type="button" class="sv-pg__btn" {...pg.prevProps()}>&lsaquo;</button></li>
     {/if}
-    {#each items as it, i (typeof it === 'number' ? `p${it}` : `${it}-${i}`)}
+    {#each pg.items as it, i (typeof it === 'number' ? `p${it}` : `${it}-${i}`)}
       {#if it === 'ellipsis-left' || it === 'ellipsis-right'}
         <li><span class="sv-pg__ellipsis" aria-hidden="true">&hellip;</span></li>
       {:else}
@@ -62,20 +65,17 @@
           <button
             type="button"
             class="sv-pg__btn"
-            class:is-active={it === page}
-            aria-current={it === page ? 'page' : undefined}
-            aria-label={`Page ${it}`}
-            {disabled}
-            onclick={() => go(it)}
+            class:is-active={pg.isActive(it)}
+            {...pg.pageButtonProps(it)}
           >{it}</button>
         </li>
       {/if}
     {/each}
     {#if showPrevNext}
-      <li><button type="button" class="sv-pg__btn" aria-label="Next page" onclick={() => go(page + 1)} disabled={disabled || page >= pageCount}>&rsaquo;</button></li>
+      <li><button type="button" class="sv-pg__btn" {...pg.nextProps()}>&rsaquo;</button></li>
     {/if}
     {#if showFirstLast}
-      <li><button type="button" class="sv-pg__btn" aria-label="Last page" onclick={() => go(pageCount)} disabled={disabled || page >= pageCount}>&raquo;</button></li>
+      <li><button type="button" class="sv-pg__btn" {...pg.lastProps()}>&raquo;</button></li>
     {/if}
   </ul>
 </nav>

package/dist/SvPasswordInput.svelte

@@ -31,7 +31,7 @@
   }
 
   let {
-    value = '',
+    value = $bindable(''),
     onChange,
     placeholder,
     disabled = false,
@@ -58,7 +58,8 @@
 
   const pw = createPasswordInput({
     value: () => value,
-    onChange: (v) => onChange?.(v),
+    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
+    onChange: (v) => { value = v; onChange?.(v) },
     placeholder: () => placeholder,
     disabled: () => disabled,
     readonly: () => readonly,

package/dist/SvPasswordInput.svelte.d.ts

@@ -20,6 +20,6 @@ type Props = SvEditorProps & {
     /** Override the built-in strings (reveal toggle + strength labels). */
     messages?: Partial<PasswordMessages>;
 };
-declare const SvPasswordInput: import("svelte").Component<Props, {}, "">;
+declare const SvPasswordInput: import("svelte").Component<Props, {}, "value">;
 type SvPasswordInput = ReturnType<typeof SvPasswordInput>;
 export default SvPasswordInput;

package/dist/SvPhoneInput.svelte

@@ -27,7 +27,7 @@
   }
 
   let {
-    value = '',
+    value = $bindable(''),
     onChange,
     country = 'US',
     disabled = false,
@@ -52,7 +52,8 @@
 
   const ph = createPhoneInput({
     value: () => value,
-    onChange: (v, parts) => onChange?.(v, parts),
+    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
+    onChange: (v, parts) => { value = v; onChange?.(v, parts) },
     country: () => country,
     disabled: () => disabled,
     readonly: () => readonly,

package/dist/SvPhoneInput.svelte.d.ts

@@ -13,6 +13,6 @@ type Props = SvEditorProps & {
     /** Override the built-in strings (e.g. the country selector aria-label). */
     messages?: Partial<PhoneMessages>;
 };
-declare const SvPhoneInput: import("svelte").Component<Props, {}, "">;
+declare const SvPhoneInput: import("svelte").Component<Props, {}, "value">;
 type SvPhoneInput = ReturnType<typeof SvPhoneInput>;
 export default SvPhoneInput;

package/dist/SvPopover.svelte

@@ -1,139 +1,139 @@
-<script lang="ts">
-  /**
-   * SvPopover - a floating panel anchored to a trigger, portalled to <body> so it
-   * escapes any `overflow:hidden` ancestor. Open on click (default), hover, or
-   * manually via `open`. Flips above the trigger when there's no room below,
-   * closes on outside-click / Escape, and animates in. Parity: Smart popover.
-   *
-   * ```svelte
-   * <SvPopover>
-   *   {#snippet anchor()}<button>Open</button>{/snippet}
-   *   <p>Panel content</p>
-   * </SvPopover>
-   * ```
-   */
-  import type { Snippet } from 'svelte'
-  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
-  import { createDismissableLayer } from './a11y/dismissable'
-
-  type Props = {
-    /** Controlled open state (bindable). */
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-    /** How the anchor opens the panel. `manual` = only `open` drives it. */
-    trigger?: 'click' | 'hover' | 'manual'
-    /** Estimated panel height for flip decisions. */
-    estimatedHeight?: number
-    /** Force a minimum panel width (else it hugs its content). */
-    minWidth?: number
-    /** Close when clicking outside. Default true. */
-    closeOnOutsideClick?: boolean
-    ariaLabel?: string
-    /** The anchor element(s) that open the panel. */
-    anchor?: Snippet
-    /** Panel content. */
-    children?: Snippet
-  }
-
-  let {
-    open = $bindable(false),
-    onOpenChange,
-    trigger = 'click',
-    estimatedHeight = 220,
-    minWidth,
-    closeOnOutsideClick = true,
-    ariaLabel,
-    anchor,
-    children,
-  }: Props = $props()
-
-  let anchorEl = $state<HTMLSpanElement | null>(null)
-  let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
-
-  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
-  function toggle() { setOpen(!open) }
-
-  function updatePos() {
-    if (!anchorEl) return
-    rect = anchoredRect(anchorEl.getBoundingClientRect(), { estimatedHeight, minWidth })
-  }
-
-  $effect(() => {
-    if (!open) return
-    updatePos()
-    const rp = () => updatePos()
-    window.addEventListener('scroll', rp, true)
-    window.addEventListener('resize', rp)
-    // Escape + outside-click dismissal via the shared layer stack (so a popover
-    // nested in a dialog closes top-first). The trigger is passed alongside the
-    // panel so clicking it toggles rather than dismiss-then-reopen.
-    const layer = createDismissableLayer({
-      element: () => [anchorEl, panelEl],
-      onDismiss: () => setOpen(false),
-      closeOnOutside: closeOnOutsideClick,
-    })
-    layer.activate()
-    return () => {
-      window.removeEventListener('scroll', rp, true)
-      window.removeEventListener('resize', rp)
-      layer.release()
-    }
-  })
-
-  let hoverTimer: ReturnType<typeof setTimeout> | undefined
-  function onEnter() { if (trigger === 'hover') { clearTimeout(hoverTimer); setOpen(true) } }
-  function onLeave() { if (trigger === 'hover') { hoverTimer = setTimeout(() => setOpen(false), 120) } }
-
-  /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
-   * anchor's own aria-label, else its trimmed text content. */
-  function anchorFallbackLabel(): string | undefined {
-    const label = anchorEl?.getAttribute('aria-label')
-    if (label) return label
-    return anchorEl?.textContent?.trim() || undefined
-  }
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<span
-  bind:this={anchorEl}
-  class="sv-pop__anchor"
-  onclick={() => trigger === 'click' && toggle()}
-  onpointerenter={onEnter}
-  onpointerleave={onLeave}
-  onfocusin={onEnter}
-  onfocusout={onLeave}
->
-  {@render anchor?.()}
-</span>
-
-{#if open}
-  <div
-    bind:this={panelEl}
-    class="sv-pop__panel"
-    use:portalToBody
-    use:popIn={{ up: rect.openUpward }}
-    style:position="fixed"
-    style:top={`${rect.top}px`}
-    style:left={`${rect.left}px`}
-    style:min-width={minWidth ? `${rect.width}px` : undefined}
-    role="dialog"
-    aria-label={ariaLabel ?? anchorFallbackLabel()}
-    onpointerenter={onEnter}
-    onpointerleave={onLeave}
-    onfocusin={onEnter}
-    onfocusout={onLeave}
-  >
-    {@render children?.()}
-  </div>
-{/if}
-
-<style>
-  .sv-pop__anchor { display: inline-flex; }
-  :global(.sv-pop__panel) {
-    z-index: 2147483646; max-width: min(92vw, 360px); padding: 12px 14px;
-    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
-    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px; line-height: 1.55;
-  }
-</style>
+<script lang="ts">
+  /**
+   * SvPopover - a floating panel anchored to a trigger, portalled to <body> so it
+   * escapes any `overflow:hidden` ancestor. Open on click (default), hover, or
+   * manually via `open`. Flips above the trigger when there's no room below,
+   * closes on outside-click / Escape, and animates in. Parity: Smart popover.
+   *
+   * ```svelte
+   * <SvPopover>
+   *   {#snippet anchor()}<button>Open</button>{/snippet}
+   *   <p>Panel content</p>
+   * </SvPopover>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+
+  type Props = {
+    /** Controlled open state (bindable). */
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    /** How the anchor opens the panel. `manual` = only `open` drives it. */
+    trigger?: 'click' | 'hover' | 'manual'
+    /** Estimated panel height for flip decisions. */
+    estimatedHeight?: number
+    /** Force a minimum panel width (else it hugs its content). */
+    minWidth?: number
+    /** Close when clicking outside. Default true. */
+    closeOnOutsideClick?: boolean
+    ariaLabel?: string
+    /** The anchor element(s) that open the panel. */
+    anchor?: Snippet
+    /** Panel content. */
+    children?: Snippet
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    trigger = 'click',
+    estimatedHeight = 220,
+    minWidth,
+    closeOnOutsideClick = true,
+    ariaLabel,
+    anchor,
+    children,
+  }: Props = $props()
+
+  let anchorEl = $state<HTMLSpanElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+
+  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
+  function toggle() { setOpen(!open) }
+
+  function updatePos() {
+    if (!anchorEl) return
+    rect = anchoredRect(anchorEl.getBoundingClientRect(), { estimatedHeight, minWidth })
+  }
+
+  $effect(() => {
+    if (!open) return
+    updatePos()
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true)
+    window.addEventListener('resize', rp)
+    // Escape + outside-click dismissal via the shared layer stack (so a popover
+    // nested in a dialog closes top-first). The trigger is passed alongside the
+    // panel so clicking it toggles rather than dismiss-then-reopen.
+    const layer = createDismissableLayer({
+      element: () => [anchorEl, panelEl],
+      onDismiss: () => setOpen(false),
+      closeOnOutside: closeOnOutsideClick,
+    })
+    layer.activate()
+    return () => {
+      window.removeEventListener('scroll', rp, true)
+      window.removeEventListener('resize', rp)
+      layer.release()
+    }
+  })
+
+  let hoverTimer: ReturnType<typeof setTimeout> | undefined
+  function onEnter() { if (trigger === 'hover') { clearTimeout(hoverTimer); setOpen(true) } }
+  function onLeave() { if (trigger === 'hover') { hoverTimer = setTimeout(() => setOpen(false), 120) } }
+
+  /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
+   * anchor's own aria-label, else its trimmed text content. */
+  function anchorFallbackLabel(): string | undefined {
+    const label = anchorEl?.getAttribute('aria-label')
+    if (label) return label
+    return anchorEl?.textContent?.trim() || undefined
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+  bind:this={anchorEl}
+  class="sv-pop__anchor"
+  onclick={() => trigger === 'click' && toggle()}
+  onpointerenter={onEnter}
+  onpointerleave={onLeave}
+  onfocusin={onEnter}
+  onfocusout={onLeave}
+>
+  {@render anchor?.()}
+</span>
+
+{#if open}
+  <div
+    bind:this={panelEl}
+    class="sv-pop__panel"
+    use:portalToBody
+    use:popIn={{ up: rect.openUpward }}
+    style:position="fixed"
+    style:top={`${rect.top}px`}
+    style:left={`${rect.left}px`}
+    style:min-width={minWidth ? `${rect.width}px` : undefined}
+    role="dialog"
+    aria-label={ariaLabel ?? anchorFallbackLabel()}
+    onpointerenter={onEnter}
+    onpointerleave={onLeave}
+    onfocusin={onEnter}
+    onfocusout={onLeave}
+  >
+    {@render children?.()}
+  </div>
+{/if}
+
+<style>
+  .sv-pop__anchor { display: inline-flex; }
+  :global(.sv-pop__panel) {
+    z-index: 2147483646; max-width: min(92vw, 360px); padding: 12px 14px;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
+    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px; line-height: 1.55;
+  }
+</style>