@svgrid/grid 2.7.0 → 3.0.1

package/dist/SvToaster.svelte

@@ -1,159 +1,159 @@
-<script lang="ts">
-  /**
-   * SvToaster - renders the shared toast queue (see `toast-store`). Mount ONCE
-   * near the app root; call `toast()` from anywhere to push notifications. The
-   * container is an `aria-live` region as a visual backstop, though each toast
-   * is also announced through the shared live region by the store.
-   *
-   * ```svelte
-   * <SvToaster position="bottom-right" />
-   * ```
-   */
-  import { portalToBody } from './popover'
-  import { toastStore, dismissToast, pauseToast, resumeToast, type Toast, type ToastAction } from './toast-store.svelte'
-
-  type Position =
-    | 'top-left' | 'top-center' | 'top-right'
-    | 'bottom-left' | 'bottom-center' | 'bottom-right'
-
-  type Props = {
-    /** Corner/edge the stack anchors to. Default 'bottom-right'. */
-    position?: Position
-    /** Max toasts shown at once (older ones stay queued in the store). */
-    max?: number
-  }
-
-  let { position = 'bottom-right', max = 5 }: Props = $props()
-
-  const visible = $derived(toastStore.toasts.slice(-max))
-  const icon = (v: Toast['variant']) =>
-    v === 'success' ? '✓' : v === 'error' ? '✕' : v === 'warning' ? '⚠' : 'ℹ'
-
-  // Swipe-to-dismiss: drag a toast sideways past ~60px to dismiss it.
-  let drag = $state<{ id: number; startX: number; dx: number } | null>(null)
-  function onDown(e: PointerEvent, id: number) {
-    // Only the primary button starts a swipe.
-    if (e.button !== 0) return
-    // Don't hijack presses on the toast's own controls (dismiss X, action /
-    // cancel buttons). Capturing the pointer here would redirect the pointerup
-    // to the toast and swallow the button's click.
-    if (e.target instanceof Element && e.target.closest('button')) return
-    drag = { id, startX: e.clientX, dx: 0 }
-    ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
-    pauseToast(id)
-  }
-  function onMove(e: PointerEvent) {
-    if (drag) drag = { ...drag, dx: e.clientX - drag.startX }
-  }
-  function onUp(id: number) {
-    if (!drag || drag.id !== id) return
-    const dx = drag.dx
-    drag = null
-    if (Math.abs(dx) > 60) dismissToast(id)
-    else resumeToast(id)
-  }
-  const dragDx = (id: number) => (drag?.id === id ? drag.dx : 0)
-
-  // Run a toast action, then dismiss the toast unless it opted to stay open.
-  function runAction(a: ToastAction, id: number) {
-    a.onClick?.(id)
-    if (!a.keepOpen) dismissToast(id)
-  }
-</script>
-
-<div class="sv-toaster sv-toaster--{position}" use:portalToBody role="region" aria-label="Notifications">
-  {#each visible as t (t.id)}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="sv-toast sv-toast--{t.variant}"
-      class:is-dragging={drag?.id === t.id}
-      role={t.variant === 'error' || t.variant === 'warning' ? 'alert' : 'status'}
-      style:transform={dragDx(t.id) ? `translateX(${dragDx(t.id)}px)` : undefined}
-      style:opacity={dragDx(t.id) ? 1 - Math.min(Math.abs(dragDx(t.id)) / 160, 0.7) : undefined}
-      onmouseenter={() => pauseToast(t.id)}
-      onmouseleave={() => resumeToast(t.id)}
-      onfocusin={() => pauseToast(t.id)}
-      onfocusout={() => resumeToast(t.id)}
-      onpointerdown={(e) => onDown(e, t.id)}
-      onpointermove={onMove}
-      onpointerup={() => onUp(t.id)}
-      onpointercancel={() => onUp(t.id)}
-    >
-      {#if t.render}
-        <div class="sv-toast__content">{@render t.render(t)}</div>
-      {:else}
-        <span class="sv-toast__icon" aria-hidden="true">{icon(t.variant)}</span>
-        <div class="sv-toast__content">
-          {#if t.title}<div class="sv-toast__title">{t.title}</div>{/if}
-          <div class="sv-toast__msg">{t.message}</div>
-          {#if t.action || t.cancel}
-            <div class="sv-toast__actions">
-              {#if t.cancel}
-                <button type="button" class="sv-toast__action sv-toast__action--cancel" onclick={() => runAction(t.cancel!, t.id)}>{t.cancel.label}</button>
-              {/if}
-              {#if t.action}
-                <button type="button" class="sv-toast__action" onclick={() => runAction(t.action!, t.id)}>{t.action.label}</button>
-              {/if}
-            </div>
-          {/if}
-        </div>
-      {/if}
-      {#if t.dismissible}
-        <button type="button" class="sv-toast__x" aria-label="Dismiss" onclick={() => dismissToast(t.id)}>&times;</button>
-      {/if}
-    </div>
-  {/each}
-</div>
-
-<style>
-  :global(.sv-toaster) {
-    position: fixed; z-index: 2147483001; display: flex; flex-direction: column; gap: 8px;
-    padding: 16px; max-width: min(92vw, 380px); pointer-events: none;
-  }
-  :global(.sv-toaster--top-left) { top: 0; left: 0; }
-  :global(.sv-toaster--top-center) { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }
-  :global(.sv-toaster--top-right) { top: 0; right: 0; }
-  :global(.sv-toaster--bottom-left) { bottom: 0; left: 0; flex-direction: column-reverse; }
-  :global(.sv-toaster--bottom-center) { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
-  :global(.sv-toaster--bottom-right) { bottom: 0; right: 0; flex-direction: column-reverse; }
-
-  :global(.sv-toast) {
-    pointer-events: auto;
-    display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box;
-    padding: 11px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
-    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-border, #e2e8f0);
-    border-inline-start: 3px solid var(--_accent, var(--sg-accent, #2563eb));
-    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.4);
-    animation: sv-toast-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
-    transition: transform 0.2s ease, opacity 0.2s ease;
-    touch-action: pan-y; /* let vertical scroll through; capture horizontal swipe */
-  }
-  :global(.sv-toast.is-dragging) { transition: none; cursor: grabbing; user-select: none; }
-  @keyframes sv-toast-in { from { opacity: 0; transform: translateY(6px) scale(0.98) } to { opacity: 1 } }
-  @media (prefers-reduced-motion: reduce) { :global(.sv-toast) { animation: none } }
-
-  :global(.sv-toast--success) { --_accent: var(--sg-success, #16a34a); }
-  :global(.sv-toast--error) { --_accent: var(--sg-danger, #dc2626); }
-  :global(.sv-toast--warning) { --_accent: var(--sg-warning, #d97706); }
-  :global(.sv-toast--info) { --_accent: var(--sg-accent, #2563eb); }
-
-  :global(.sv-toast__icon) { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--_accent); font-weight: 700; }
-  :global(.sv-toast__content) { flex: 1; min-width: 0; }
-  :global(.sv-toast__title) { font-weight: 650; margin-bottom: 1px; }
-  :global(.sv-toast__msg) { color: var(--sg-fg, #0f172a); overflow-wrap: anywhere; }
-  :global(.sv-toast__actions) { display: flex; gap: 8px; margin-top: 9px; }
-  :global(.sv-toast__action) {
-    font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 6px;
-    border: 1px solid var(--_accent, var(--sg-accent, #2563eb)); background: none; color: var(--_accent, var(--sg-accent, #2563eb));
-    cursor: pointer;
-  }
-  :global(.sv-toast__action:hover) { background: color-mix(in srgb, var(--_accent, #2563eb) 12%, transparent); }
-  :global(.sv-toast__action--cancel) { border-color: var(--sg-border, #e2e8f0); color: var(--sg-muted, #64748b); }
-  :global(.sv-toast__action--cancel:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
-  :global(.sv-toast__x) {
-    flex: none; width: 22px; height: 22px; display: grid; place-items: center; margin: -2px -2px 0 0;
-    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 5px; font-size: 17px; line-height: 1;
-  }
-  :global(.sv-toast__x:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
-</style>
+<script lang="ts">
+  /**
+   * SvToaster - renders the shared toast queue (see `toast-store`). Mount ONCE
+   * near the app root; call `toast()` from anywhere to push notifications. The
+   * container is an `aria-live` region as a visual backstop, though each toast
+   * is also announced through the shared live region by the store.
+   *
+   * ```svelte
+   * <SvToaster position="bottom-right" />
+   * ```
+   */
+  import { portalToBody } from './popover'
+  import { toastStore, dismissToast, pauseToast, resumeToast, type Toast, type ToastAction } from './toast-store.svelte'
+
+  type Position =
+    | 'top-left' | 'top-center' | 'top-right'
+    | 'bottom-left' | 'bottom-center' | 'bottom-right'
+
+  type Props = {
+    /** Corner/edge the stack anchors to. Default 'bottom-right'. */
+    position?: Position
+    /** Max toasts shown at once (older ones stay queued in the store). */
+    max?: number
+  }
+
+  let { position = 'bottom-right', max = 5 }: Props = $props()
+
+  const visible = $derived(toastStore.toasts.slice(-max))
+  const icon = (v: Toast['variant']) =>
+    v === 'success' ? '✓' : v === 'error' ? '✕' : v === 'warning' ? '⚠' : 'ℹ'
+
+  // Swipe-to-dismiss: drag a toast sideways past ~60px to dismiss it.
+  let drag = $state<{ id: number; startX: number; dx: number } | null>(null)
+  function onDown(e: PointerEvent, id: number) {
+    // Only the primary button starts a swipe.
+    if (e.button !== 0) return
+    // Don't hijack presses on the toast's own controls (dismiss X, action /
+    // cancel buttons). Capturing the pointer here would redirect the pointerup
+    // to the toast and swallow the button's click.
+    if (e.target instanceof Element && e.target.closest('button')) return
+    drag = { id, startX: e.clientX, dx: 0 }
+    ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
+    pauseToast(id)
+  }
+  function onMove(e: PointerEvent) {
+    if (drag) drag = { ...drag, dx: e.clientX - drag.startX }
+  }
+  function onUp(id: number) {
+    if (!drag || drag.id !== id) return
+    const dx = drag.dx
+    drag = null
+    if (Math.abs(dx) > 60) dismissToast(id)
+    else resumeToast(id)
+  }
+  const dragDx = (id: number) => (drag?.id === id ? drag.dx : 0)
+
+  // Run a toast action, then dismiss the toast unless it opted to stay open.
+  function runAction(a: ToastAction, id: number) {
+    a.onClick?.(id)
+    if (!a.keepOpen) dismissToast(id)
+  }
+</script>
+
+<div class="sv-toaster sv-toaster--{position}" use:portalToBody role="region" aria-label="Notifications">
+  {#each visible as t (t.id)}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="sv-toast sv-toast--{t.variant}"
+      class:is-dragging={drag?.id === t.id}
+      role={t.variant === 'error' || t.variant === 'warning' ? 'alert' : 'status'}
+      style:transform={dragDx(t.id) ? `translateX(${dragDx(t.id)}px)` : undefined}
+      style:opacity={dragDx(t.id) ? 1 - Math.min(Math.abs(dragDx(t.id)) / 160, 0.7) : undefined}
+      onmouseenter={() => pauseToast(t.id)}
+      onmouseleave={() => resumeToast(t.id)}
+      onfocusin={() => pauseToast(t.id)}
+      onfocusout={() => resumeToast(t.id)}
+      onpointerdown={(e) => onDown(e, t.id)}
+      onpointermove={onMove}
+      onpointerup={() => onUp(t.id)}
+      onpointercancel={() => onUp(t.id)}
+    >
+      {#if t.render}
+        <div class="sv-toast__content">{@render t.render(t)}</div>
+      {:else}
+        <span class="sv-toast__icon" aria-hidden="true">{icon(t.variant)}</span>
+        <div class="sv-toast__content">
+          {#if t.title}<div class="sv-toast__title">{t.title}</div>{/if}
+          <div class="sv-toast__msg">{t.message}</div>
+          {#if t.action || t.cancel}
+            <div class="sv-toast__actions">
+              {#if t.cancel}
+                <button type="button" class="sv-toast__action sv-toast__action--cancel" onclick={() => runAction(t.cancel!, t.id)}>{t.cancel.label}</button>
+              {/if}
+              {#if t.action}
+                <button type="button" class="sv-toast__action" onclick={() => runAction(t.action!, t.id)}>{t.action.label}</button>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/if}
+      {#if t.dismissible}
+        <button type="button" class="sv-toast__x" aria-label="Dismiss" onclick={() => dismissToast(t.id)}>&times;</button>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  :global(.sv-toaster) {
+    position: fixed; z-index: 2147483001; display: flex; flex-direction: column; gap: 8px;
+    padding: 16px; max-width: min(92vw, 380px); pointer-events: none;
+  }
+  :global(.sv-toaster--top-left) { top: 0; left: 0; }
+  :global(.sv-toaster--top-center) { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }
+  :global(.sv-toaster--top-right) { top: 0; right: 0; }
+  :global(.sv-toaster--bottom-left) { bottom: 0; left: 0; flex-direction: column-reverse; }
+  :global(.sv-toaster--bottom-center) { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
+  :global(.sv-toaster--bottom-right) { bottom: 0; right: 0; flex-direction: column-reverse; }
+
+  :global(.sv-toast) {
+    pointer-events: auto;
+    display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box;
+    padding: 11px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0);
+    border-inline-start: 3px solid var(--_accent, var(--sg-accent, #2563eb));
+    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.4);
+    animation: sv-toast-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+    touch-action: pan-y; /* let vertical scroll through; capture horizontal swipe */
+  }
+  :global(.sv-toast.is-dragging) { transition: none; cursor: grabbing; user-select: none; }
+  @keyframes sv-toast-in { from { opacity: 0; transform: translateY(6px) scale(0.98) } to { opacity: 1 } }
+  @media (prefers-reduced-motion: reduce) { :global(.sv-toast) { animation: none } }
+
+  :global(.sv-toast--success) { --_accent: var(--sg-success, #16a34a); }
+  :global(.sv-toast--error) { --_accent: var(--sg-danger, #dc2626); }
+  :global(.sv-toast--warning) { --_accent: var(--sg-warning, #d97706); }
+  :global(.sv-toast--info) { --_accent: var(--sg-accent, #2563eb); }
+
+  :global(.sv-toast__icon) { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--_accent); font-weight: 700; }
+  :global(.sv-toast__content) { flex: 1; min-width: 0; }
+  :global(.sv-toast__title) { font-weight: 650; margin-bottom: 1px; }
+  :global(.sv-toast__msg) { color: var(--sg-fg, #0f172a); overflow-wrap: anywhere; }
+  :global(.sv-toast__actions) { display: flex; gap: 8px; margin-top: 9px; }
+  :global(.sv-toast__action) {
+    font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 6px;
+    border: 1px solid var(--_accent, var(--sg-accent, #2563eb)); background: none; color: var(--_accent, var(--sg-accent, #2563eb));
+    cursor: pointer;
+  }
+  :global(.sv-toast__action:hover) { background: color-mix(in srgb, var(--_accent, #2563eb) 12%, transparent); }
+  :global(.sv-toast__action--cancel) { border-color: var(--sg-border, #e2e8f0); color: var(--sg-muted, #64748b); }
+  :global(.sv-toast__action--cancel:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+  :global(.sv-toast__x) {
+    flex: none; width: 22px; height: 22px; display: grid; place-items: center; margin: -2px -2px 0 0;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 5px; font-size: 17px; line-height: 1;
+  }
+  :global(.sv-toast__x:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+</style>

package/dist/SvToggleButton.svelte

@@ -1,85 +1,85 @@
-<script lang="ts">
-  /**
-   * SvToggleButton - a button with a pressed on/off state (aria-pressed).
-   * Parity: Smart `smart-toggle-button`. Controlled via `pressed` + `onChange`.
-   */
-  import type { Snippet } from 'svelte'
-  import SvField from './SvField.svelte'
-  import { nextEditorId, type SvEditorProps } from './editor-contract'
-  import { createToggle } from './createToggle.svelte'
-
-  type Props = SvEditorProps & {
-    pressed?: boolean
-    onChange?: (pressed: boolean) => void
-    children?: Snippet
-  }
-
-  let {
-    pressed = false,
-    onChange,
-    disabled = false,
-    readonly = false,
-    size = 'md',
-    ariaLabel,
-    invalid = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-    children,
-  }: Props = $props()
-
-  const autoId = nextEditorId('sv-toggle')
-  const uid = $derived(id ?? autoId)
-
-  // The styled toggle is just a renderer over the headless core.
-  const t = createToggle({
-    pressed: () => pressed,
-    onChange: (v) => { if (readonly) return; onChange?.(v) },
-    disabled: () => disabled,
-    ariaLabel: () => ariaLabel,
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-  })
-</script>
-
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <button
-    class="sv-toggle sv-toggle--{size}"
-    class:is-pressed={pressed}
-    class:is-invalid={invalid}
-    class:is-readonly={readonly}
-    {...t.buttonProps()}
-  >
-    {#if children}{@render children()}{/if}
-  </button>
-</SvField>
-
-<style>
-  .sv-toggle {
-    --_accent: var(--sg-accent, #2563eb);
-    --_border: var(--sg-border, #cbd5e1);
-    --_radius: var(--sg-radius, 8px);
-    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-    font: inherit; font-weight: 600; line-height: 1;
-    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--_border); border-radius: var(--_radius); cursor: pointer; user-select: none;
-    transition: background 0.12s, border-color 0.12s, color 0.12s;
-  }
-  .sv-toggle--sm { padding: 5px 10px; font-size: 12px; }
-  .sv-toggle--md { padding: 8px 13px; font-size: 13px; }
-  .sv-toggle--lg { padding: 11px 17px; font-size: 15px; }
-  .sv-toggle:hover:not([disabled]):not(.is-pressed) { background: var(--sg-row-hover-bg, #f1f5f9); }
-  .sv-toggle.is-pressed {
-    background: var(--_accent); color: var(--sg-on-accent, #fff); border-color: var(--_accent);
-  }
-  .sv-toggle[disabled] { opacity: 0.55; cursor: not-allowed; }
-  .sv-toggle.is-readonly { cursor: default; }
-  .sv-toggle.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-toggle:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
-</style>
+<script lang="ts">
+  /**
+   * SvToggleButton - a button with a pressed on/off state (aria-pressed).
+   * Parity: Smart `smart-toggle-button`. Controlled via `pressed` + `onChange`.
+   */
+  import type { Snippet } from 'svelte'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { createToggle } from './createToggle.svelte'
+
+  type Props = SvEditorProps & {
+    pressed?: boolean
+    onChange?: (pressed: boolean) => void
+    children?: Snippet
+  }
+
+  let {
+    pressed = false,
+    onChange,
+    disabled = false,
+    readonly = false,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    children,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-toggle')
+  const uid = $derived(id ?? autoId)
+
+  // The styled toggle is just a renderer over the headless core.
+  const t = createToggle({
+    pressed: () => pressed,
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <button
+    class="sv-toggle sv-toggle--{size}"
+    class:is-pressed={pressed}
+    class:is-invalid={invalid}
+    class:is-readonly={readonly}
+    {...t.buttonProps()}
+  >
+    {#if children}{@render children()}{/if}
+  </button>
+</SvField>
+
+<style>
+  .sv-toggle {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-border, #cbd5e1);
+    --_radius: var(--sg-radius, 8px);
+    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+    font: inherit; font-weight: 600; line-height: 1;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--_border); border-radius: var(--_radius); cursor: pointer; user-select: none;
+    transition: background 0.12s, border-color 0.12s, color 0.12s;
+  }
+  .sv-toggle--sm { padding: 5px 10px; font-size: 12px; }
+  .sv-toggle--md { padding: 8px 13px; font-size: 13px; }
+  .sv-toggle--lg { padding: 11px 17px; font-size: 15px; }
+  .sv-toggle:hover:not([disabled]):not(.is-pressed) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-toggle.is-pressed {
+    background: var(--_accent); color: var(--sg-on-accent, #fff); border-color: var(--_accent);
+  }
+  .sv-toggle[disabled] { opacity: 0.55; cursor: not-allowed; }
+  .sv-toggle.is-readonly { cursor: default; }
+  .sv-toggle.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-toggle:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+</style>