@svgrid/grid 2.2.16 → 2.2.18

package/dist/SvPasswordInput.svelte

@@ -5,7 +5,11 @@
    *
    * The styled renderer over the headless `createPasswordInput` core: the reveal
    * toggle + strength heuristic come from the core, spread here via prop-getters.
+   * The box, size, invalid state and focus ring are owned by SvField's `frame`
+   * chrome; the reveal eye lives in the trailing slot and the strength meter sits
+   * below the field.
    */
+  import type { Snippet } from 'svelte'
   import SvField from './SvField.svelte'
   import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createPasswordInput } from './createPasswordInput.svelte'
@@ -28,6 +32,12 @@
     autocomplete?: string
     /** Override the built-in strings (reveal toggle + strength labels). */
     messages?: Partial<PasswordMessages>
+    /** Leading adornment (icon) inside the field. */
+    leading?: Snippet
+    /** Stretch to the container width. */
+    block?: boolean
+    /** Control width in px (ignored when `block`). Default 220. */
+    width?: number
   }
 
   let {
@@ -48,8 +58,12 @@
     hint,
     dir,
     id,
+    loading = false,
     autocomplete = 'current-password',
     messages,
+    leading,
+    block = false,
+    width = 220,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-pass')
@@ -76,20 +90,40 @@
   })
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-<div class="sv-pw sv-pw--{size}" class:is-disabled={disabled}>
-  <div class="sv-pw__field" class:is-invalid={invalid}>
+{#snippet eye()}
+  {#if revealable}
+    <button class="sv-pw__eye" {...pw.toggleProps()}>
+      {#if pw.revealed}
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" /><path d="M1 1l22 22" /></svg>
+      {:else}
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></svg>
+      {/if}
+    </button>
+  {/if}
+{/snippet}
+
+<div class="sv-pw" class:sv-pw--block={block}>
+  <SvField
+    frame
+    id={uid}
+    {label}
+    {hint}
+    {error}
+    {required}
+    {dir}
+    {size}
+    {invalid}
+    {disabled}
+    {readonly}
+    {loading}
+    {block}
+    {width}
+    {leading}
+    trailing={revealable ? eye : undefined}
+  >
     <input class="sv-pw__input" {...pw.inputProps()} />
-    {#if revealable}
-      <button class="sv-pw__eye" {...pw.toggleProps()}>
-        {#if pw.revealed}
-          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" /><path d="M1 1l22 22" /></svg>
-        {:else}
-          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></svg>
-        {/if}
-      </button>
-    {/if}
-  </div>
+    {#if name}<input type="hidden" {name} value={value} />{/if}
+  </SvField>
   {#if showStrength}
     <div class="sv-pw__meter" aria-hidden="true">
       {#each Array(4) as _, i (i)}
@@ -98,27 +132,13 @@
     </div>
     <span class="sv-pw__strength is-lvl{pw.strength}">{pw.strengthLabel}</span>
   {/if}
-  {#if name}<input type="hidden" {name} value={value} />{/if}
 </div>
-</SvField>
 
 <style>
-  .sv-pw { --_accent: var(--sg-accent, #2563eb); display: inline-flex; flex-direction: column; gap: 5px; width: 220px; }
-  .sv-pw.is-disabled { opacity: 0.6; }
-  .sv-pw__field {
-    display: flex; align-items: center;
-    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);
-  }
-  .sv-pw__field:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
-  .sv-pw__field.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-pw__field.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  .sv-pw__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; padding: 0 10px; }
-  .sv-pw--sm .sv-pw__field { height: 28px; font-size: 12px; }
-  .sv-pw--md .sv-pw__field { height: 34px; font-size: 13px; }
-  .sv-pw--lg .sv-pw__field { height: 40px; font-size: 15px; }
-  .sv-pw__eye { display: grid; place-items: center; width: 32px; align-self: stretch; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; }
-  .sv-pw__eye:hover { color: var(--_accent); }
+  .sv-pw { display: inline-flex; flex-direction: column; gap: 5px; }
+  .sv-pw--block { display: flex; width: 100%; }
+  .sv-pw__eye { display: grid; place-items: center; width: 26px; align-self: center; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; padding: 0; }
+  .sv-pw__eye:hover { color: var(--sg-accent, #2563eb); }
   .sv-pw__meter { display: flex; gap: 4px; }
   .sv-pw__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--sg-border, #e2e8f0); transition: background 0.15s; }
   .sv-pw__bar.on.is-lvl1 { background: var(--sg-danger, #dc2626); }

package/dist/SvPasswordInput.svelte.d.ts

@@ -1,3 +1,14 @@
+/**
+   * SvPasswordInput - a password field with a reveal toggle and an optional
+   * strength meter. Parity: Smart `smart-password-input`. Emits the string value.
+   *
+   * The styled renderer over the headless `createPasswordInput` core: the reveal
+   * toggle + strength heuristic come from the core, spread here via prop-getters.
+   * The box, size, invalid state and focus ring are owned by SvField's `frame`
+   * chrome; the reveal eye lives in the trailing slot and the strength meter sits
+   * below the field.
+   */
+import type { Snippet } from 'svelte';
 import { type SvEditorProps } from './editor-contract';
 /** User-facing strings for the password input (localizable via `messages`). */
 type PasswordMessages = {
@@ -19,6 +30,12 @@ type Props = SvEditorProps & {
     autocomplete?: string;
     /** Override the built-in strings (reveal toggle + strength labels). */
     messages?: Partial<PasswordMessages>;
+    /** Leading adornment (icon) inside the field. */
+    leading?: Snippet;
+    /** Stretch to the container width. */
+    block?: boolean;
+    /** Control width in px (ignored when `block`). Default 220. */
+    width?: number;
 };
 declare const SvPasswordInput: import("svelte").Component<Props, {}, "value">;
 type SvPasswordInput = ReturnType<typeof SvPasswordInput>;

package/dist/SvPhoneInput.svelte

@@ -24,6 +24,10 @@
     placeholder?: string
     /** Override the built-in strings (e.g. the country selector aria-label). */
     messages?: Partial<PhoneMessages>
+    /** Stretch to the container width. */
+    block?: boolean
+    /** Control width in px (ignored when `block`). Default 250. */
+    width?: number
   }
 
   let {
@@ -43,7 +47,10 @@
     hint,
     dir,
     id,
+    loading = false,
     messages,
+    block = false,
+    width = 250,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-phone')
@@ -68,53 +75,57 @@
   })
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-<div class="sv-phone sv-phone--{size}" class:is-disabled={disabled} class:is-invalid={invalid}>
-  <div class="sv-phone__country">
+{#snippet countryChip()}
+  <span class="sv-phone__country">
     <span class="sv-phone__flag" aria-hidden="true">{ph.flag}</span>
     <span class="sv-phone__dial">{ph.dial}</span>
+    <svg class="sv-phone__chev" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
     <select class="sv-phone__select" {...ph.selectProps()}>
       {#each COUNTRIES as c (c.code)}
         <option value={c.code}>{flagEmoji(c.code)} {c.name} ({c.dial})</option>
       {/each}
     </select>
-    <svg class="sv-phone__chev" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
-  </div>
+  </span>
+{/snippet}
+
+<SvField
+  frame
+  id={uid}
+  {label}
+  {hint}
+  {error}
+  {required}
+  {dir}
+  {size}
+  {invalid}
+  {disabled}
+  {readonly}
+  {loading}
+  {block}
+  {width}
+  leading={countryChip}
+>
   <input class="sv-phone__number" {...ph.inputProps()} />
   {#if name}<input type="hidden" {name} value={ph.value} />{/if}
-</div>
 </SvField>
 
 <style>
-  .sv-phone {
-    --_accent: var(--sg-accent, #2563eb);
-    display: inline-flex; align-items: stretch; width: 250px;
-    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);
-    overflow: hidden;
-  }
-  .sv-phone:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
-  .sv-phone.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-phone.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  .sv-phone.is-disabled { opacity: 0.6; }
+  /* A compact country chip in the leading slot: flag + dial + chevron, with the
+     native <select> as an invisible overlay covering it. */
   .sv-phone__country {
     position: relative; display: inline-flex; align-items: center; gap: 4px;
-    padding-block: 0; padding-inline: 10px 6px; border-inline-end: 1px solid var(--sg-border, #e2e8f0);
-    background: var(--sg-header-bg, #f8fafc); cursor: pointer;
+    padding-inline-end: 8px; border-inline-end: 1px solid var(--sg-border, #e2e8f0); cursor: pointer;
   }
   .sv-phone__flag { font-size: 15px; }
   .sv-phone__dial { font-size: 13px; font-weight: 600; }
   .sv-phone__chev { color: var(--sg-muted, #64748b); }
   /* The native <select> is an invisible overlay, but its option popup is drawn by
-     the OS using the control's own color/background - so theme them explicitly or
-     dark themes get light text on the default white popup. */
-  .sv-phone__select {
-    position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 13px;
+     the OS using the control's own color/background - so theme them explicitly (a
+     2-class selector, so it beats SvField frame's generic `select` reset) or dark
+     themes get light text on the default white popup. */
+  .sv-phone__country .sv-phone__select {
+    position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 13px; padding: 0;
     color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff);
   }
-  .sv-phone__select option { color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff); }
-  .sv-phone__number { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; padding: 0 10px; }
-  .sv-phone--sm { height: 28px; font-size: 12px; }
-  .sv-phone--md { height: 34px; font-size: 13px; }
-  .sv-phone--lg { height: 40px; font-size: 15px; }
+  .sv-phone__country .sv-phone__select option { color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff); }
 </style>

package/dist/SvPhoneInput.svelte.d.ts

@@ -12,6 +12,10 @@ type Props = SvEditorProps & {
     placeholder?: string;
     /** Override the built-in strings (e.g. the country selector aria-label). */
     messages?: Partial<PhoneMessages>;
+    /** Stretch to the container width. */
+    block?: boolean;
+    /** Control width in px (ignored when `block`). Default 250. */
+    width?: number;
 };
 declare const SvPhoneInput: import("svelte").Component<Props, {}, "value">;
 type SvPhoneInput = ReturnType<typeof SvPhoneInput>;

package/dist/SvPopconfirm.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  /**
+   * SvPopconfirm - a lightweight confirm step in a popover anchored to its
+   * trigger, for a low-stakes destructive action ("Delete this row?") where a
+   * full modal dialog would be too heavy. Click the anchor to reveal a short
+   * message plus Cancel / Confirm buttons; confirming runs `onConfirm` and closes.
+   * Built on SvPopover, so it is portalled, positioned by the shared engine, and
+   * dismisses on Escape / outside-click.
+   *
+   * ```svelte
+   * <SvPopconfirm title="Delete this row?" confirmVariant="danger"
+   *               onConfirm={() => remove(row)}>
+   *   {#snippet anchor()}<SvButton variant="danger" size="sm">Delete</SvButton>{/snippet}
+   * </SvPopconfirm>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import SvPopover from './SvPopover.svelte'
+  import SvButton from './SvButton.svelte'
+  import type { Placement } from './positioning'
+
+  type Props = {
+    /** Controlled open state (bindable). */
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    /** Bold prompt, e.g. "Delete this row?". */
+    title?: string
+    /** Optional longer explanation under the title. */
+    description?: string
+    confirmLabel?: string
+    cancelLabel?: string
+    /** Variant for the confirm button (use `danger` for destructive actions). */
+    confirmVariant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
+    /** Runs when the user confirms; the popover then closes. */
+    onConfirm?: () => void
+    /** Runs when the user cancels (or dismisses); the popover then closes. */
+    onCancel?: () => void
+    /** Preferred placement; flips when there is no room. Default `top`. */
+    placement?: Placement
+    ariaLabel?: string
+    /** The trigger that opens the confirm. */
+    anchor?: Snippet
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    title,
+    description,
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    confirmVariant = 'primary',
+    onConfirm,
+    onCancel,
+    placement = 'top',
+    ariaLabel,
+    anchor,
+  }: Props = $props()
+
+  function confirm() { onConfirm?.(); open = false }
+  function cancel() { onCancel?.(); open = false }
+</script>
+
+<SvPopover bind:open {onOpenChange} trigger="click" {placement} minWidth={230} ariaLabel={ariaLabel ?? title} {anchor}>
+  <div class="sv-popconfirm">
+    {#if title}<div class="sv-popconfirm__title">{title}</div>{/if}
+    {#if description}<div class="sv-popconfirm__desc">{description}</div>{/if}
+    <div class="sv-popconfirm__actions">
+      <SvButton size="sm" variant="ghost" onclick={cancel}>{cancelLabel}</SvButton>
+      <SvButton size="sm" variant={confirmVariant} onclick={confirm}>{confirmLabel}</SvButton>
+    </div>
+  </div>
+</SvPopover>
+
+<style>
+  .sv-popconfirm__title { font-weight: 650; font-size: 13px; color: var(--sg-fg, #0f172a); }
+  .sv-popconfirm__desc { margin-top: 4px; font-size: 12.5px; color: var(--sg-muted, #64748b); line-height: 1.45; }
+  .sv-popconfirm__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
+</style>

package/dist/SvPopconfirm.svelte.d.ts

@@ -0,0 +1,42 @@
+/**
+   * SvPopconfirm - a lightweight confirm step in a popover anchored to its
+   * trigger, for a low-stakes destructive action ("Delete this row?") where a
+   * full modal dialog would be too heavy. Click the anchor to reveal a short
+   * message plus Cancel / Confirm buttons; confirming runs `onConfirm` and closes.
+   * Built on SvPopover, so it is portalled, positioned by the shared engine, and
+   * dismisses on Escape / outside-click.
+   *
+   * ```svelte
+   * <SvPopconfirm title="Delete this row?" confirmVariant="danger"
+   *               onConfirm={() => remove(row)}>
+   *   {#snippet anchor()}<SvButton variant="danger" size="sm">Delete</SvButton>{/snippet}
+   * </SvPopconfirm>
+   * ```
+   */
+import type { Snippet } from 'svelte';
+import type { Placement } from './positioning';
+type Props = {
+    /** Controlled open state (bindable). */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Bold prompt, e.g. "Delete this row?". */
+    title?: string;
+    /** Optional longer explanation under the title. */
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Variant for the confirm button (use `danger` for destructive actions). */
+    confirmVariant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+    /** Runs when the user confirms; the popover then closes. */
+    onConfirm?: () => void;
+    /** Runs when the user cancels (or dismisses); the popover then closes. */
+    onCancel?: () => void;
+    /** Preferred placement; flips when there is no room. Default `top`. */
+    placement?: Placement;
+    ariaLabel?: string;
+    /** The trigger that opens the confirm. */
+    anchor?: Snippet;
+};
+declare const SvPopconfirm: import("svelte").Component<Props, {}, "open">;
+type SvPopconfirm = ReturnType<typeof SvPopconfirm>;
+export default SvPopconfirm;

package/dist/SvPopover.svelte

@@ -2,18 +2,22 @@
   /**
    * 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.
+   * manually via `open`. Positioned by the shared engine (`computePosition`): full
+   * placement matrix + flip + shift + an optional arrow, kept in sync with
+   * `autoUpdate`. Closes on outside-click / Escape via the dismissable layer
+   * stack, and animates in. The panel is hoverable (interactive) under the hover
+   * trigger. Parity: Smart popover.
    *
    * ```svelte
-   * <SvPopover>
+   * <SvPopover placement="bottom" arrow>
    *   {#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 { portalToBody, popIn } from './popover'
+  import { computePosition, autoUpdate, type Placement, type ComputePositionResult } from './positioning'
   import { createDismissableLayer } from './a11y/dismissable'
 
   type Props = {
@@ -22,7 +26,17 @@
     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. */
+    /** Preferred placement (flips when there is no room). Default `bottom-start`. */
+    placement?: Placement
+    /** Main-axis gap between trigger and panel. Default 8 (room for the arrow). */
+    offset?: number
+    /** Render a pointer arrow toward the trigger. Default true. */
+    arrow?: boolean
+    /** Hover trigger: delay (ms) before opening. Default 0. */
+    openDelay?: number
+    /** Hover trigger: delay (ms) before closing after leave. Default 120. */
+    closeDelay?: number
+    /** Estimated panel height, used before the panel has been measured. */
     estimatedHeight?: number
     /** Force a minimum panel width (else it hugs its content). */
     minWidth?: number
@@ -39,6 +53,11 @@
     open = $bindable(false),
     onOpenChange,
     trigger = 'click',
+    placement = 'bottom-start',
+    offset = 8,
+    arrow = true,
+    openDelay = 0,
+    closeDelay = 120,
     estimatedHeight = 220,
     minWidth,
     closeOnOutsideClick = true,
@@ -47,43 +66,60 @@
     children,
   }: Props = $props()
 
+  const ARROW = 10
+
   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 })
+  let pos = $state<ComputePositionResult>({
+    x: 0, y: 0, placement, side: 'bottom', align: 'start', maxWidth: 0, maxHeight: 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 })
+    const r = anchorEl.getBoundingClientRect()
+    const f = panelEl?.getBoundingClientRect()
+    const floating = {
+      width: f?.width || minWidth || r.width,
+      height: f?.height || estimatedHeight,
+    }
+    pos = computePosition(
+      { x: r.left, y: r.top, width: r.width, height: r.height },
+      floating,
+      { placement, offset, padding: 8, minMainAxis: 96, arrow: arrow ? { size: ARROW } : undefined },
+    )
   }
 
+  // Reposition whenever the trigger/panel resize or an ancestor scrolls, and wire
+  // Escape + outside-click dismissal via the shared layer stack (so a popover
+  // nested in a dialog closes top-first). Re-runs once `panelEl` mounts.
   $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.
+    if (!open || !anchorEl || !panelEl) return
+    const stop = autoUpdate(anchorEl, panelEl, updatePos)
     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()
-    }
+    return () => { stop(); 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) } }
+  let openTimer: ReturnType<typeof setTimeout> | undefined
+  let closeTimer: ReturnType<typeof setTimeout> | undefined
+  function onEnter() {
+    if (trigger !== 'hover') return
+    clearTimeout(closeTimer)
+    if (open) return
+    openTimer = setTimeout(() => setOpen(true), openDelay)
+  }
+  function onLeave() {
+    if (trigger !== 'hover') return
+    clearTimeout(openTimer)
+    closeTimer = setTimeout(() => setOpen(false), closeDelay)
+  }
 
   /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
    * anchor's own aria-label, else its trimmed text content. */
@@ -112,11 +148,11 @@
     bind:this={panelEl}
     class="sv-pop__panel"
     use:portalToBody
-    use:popIn={{ up: rect.openUpward }}
+    use:popIn={{ up: pos.side === 'top' }}
     style:position="fixed"
-    style:top={`${rect.top}px`}
-    style:left={`${rect.left}px`}
-    style:min-width={minWidth ? `${rect.width}px` : undefined}
+    style:top={`${pos.y}px`}
+    style:left={`${pos.x}px`}
+    style:min-width={minWidth ? `${minWidth}px` : undefined}
     role="dialog"
     aria-label={ariaLabel ?? anchorFallbackLabel()}
     onpointerenter={onEnter}
@@ -124,16 +160,38 @@
     onfocusin={onEnter}
     onfocusout={onLeave}
   >
-    {@render children?.()}
+    {#if arrow}
+      <span
+        class="sv-pop__arrow sv-pop__arrow--{pos.side}"
+        style:left={pos.arrow?.x != null ? `${pos.arrow.x}px` : undefined}
+        style:top={pos.arrow?.y != null ? `${pos.arrow.y}px` : undefined}
+      ></span>
+    {/if}
+    <div class="sv-pop__content" style:max-height={pos.maxHeight ? `${pos.maxHeight}px` : undefined}>
+      {@render children?.()}
+    </div>
   </div>
 {/if}
 
 <style>
   .sv-pop__anchor { display: inline-flex; }
   :global(.sv-pop__panel) {
-    z-index: 2147483646; max-width: min(92vw, 360px); padding: 12px 14px;
+    z-index: 2147483646; max-width: min(92vw, 360px);
     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;
   }
+  :global(.sv-pop__content) { padding: 12px 14px; overflow: auto; }
+  /* Arrow: a rotated square straddling the panel edge, two borders showing so it
+     reads as a continuation of the panel outline. Not clipped (sibling of the
+     scrollable content, panel itself has no overflow). */
+  :global(.sv-pop__arrow) {
+    position: absolute; width: 10px; height: 10px;
+    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
+    transform: rotate(45deg);
+  }
+  :global(.sv-pop__arrow--bottom) { top: -6px; border-right: 0; border-bottom: 0; }
+  :global(.sv-pop__arrow--top) { bottom: -6px; border-left: 0; border-top: 0; }
+  :global(.sv-pop__arrow--right) { left: -6px; border-top: 0; border-right: 0; }
+  :global(.sv-pop__arrow--left) { right: -6px; border-bottom: 0; border-left: 0; }
 </style>

package/dist/SvPopover.svelte.d.ts

@@ -1,24 +1,38 @@
 /**
    * 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.
+   * manually via `open`. Positioned by the shared engine (`computePosition`): full
+   * placement matrix + flip + shift + an optional arrow, kept in sync with
+   * `autoUpdate`. Closes on outside-click / Escape via the dismissable layer
+   * stack, and animates in. The panel is hoverable (interactive) under the hover
+   * trigger. Parity: Smart popover.
    *
    * ```svelte
-   * <SvPopover>
+   * <SvPopover placement="bottom" arrow>
    *   {#snippet anchor()}<button>Open</button>{/snippet}
    *   <p>Panel content</p>
    * </SvPopover>
    * ```
    */
 import type { Snippet } from 'svelte';
+import { type Placement } from './positioning';
 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. */
+    /** Preferred placement (flips when there is no room). Default `bottom-start`. */
+    placement?: Placement;
+    /** Main-axis gap between trigger and panel. Default 8 (room for the arrow). */
+    offset?: number;
+    /** Render a pointer arrow toward the trigger. Default true. */
+    arrow?: boolean;
+    /** Hover trigger: delay (ms) before opening. Default 0. */
+    openDelay?: number;
+    /** Hover trigger: delay (ms) before closing after leave. Default 120. */
+    closeDelay?: number;
+    /** Estimated panel height, used before the panel has been measured. */
     estimatedHeight?: number;
     /** Force a minimum panel width (else it hugs its content). */
     minWidth?: number;

package/dist/SvRadioGroup.svelte

@@ -25,6 +25,7 @@
     onChange,
     name,
     disabled = false,
+    readonly = false,
     orientation = 'vertical',
     size = 'md',
     ariaLabel,
@@ -44,7 +45,7 @@
   const rg = createRadioGroup({
     options: () => options,
     value: () => value,
-    onChange: (v) => onChange?.(v),
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
     disabled: () => disabled,
     // A visible field `label` also names the group for assistive tech.
     ariaLabel: () => ariaLabel ?? label,
@@ -60,7 +61,9 @@
   <div
     class="sv-radiogroup sv-radiogroup--{orientation} sv-radiogroup--{size}"
     class:is-invalid={invalid}
+    class:is-readonly={readonly}
     {...rg.groupProps()}
+    aria-readonly={readonly ? 'true' : undefined}
   >
     {#each options as opt (opt.value)}
       <button
@@ -88,6 +91,7 @@
   .sv-radiogroup--md .sv-radio { font-size: 13px; }
   .sv-radiogroup--lg .sv-radio { font-size: 15px; }
   .sv-radio[disabled] { opacity: 0.5; cursor: not-allowed; }
+  .sv-radiogroup.is-readonly .sv-radio { cursor: default; }
   .sv-radio__dot {
     width: 17px; height: 17px; flex: none; border-radius: 50%;
     border: 1.5px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff);