@svgrid/grid 1.2.34 → 2.0.1

package/dist/SvCarousel.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  /**
+   * SvCarousel - a slideshow: a sliding track with prev/next arrows, dot
+   * indicators, optional autoplay (pauses on hover/focus) and swipe. Slides are
+   * rendered by the `slide` snippet (index in, your content out). Parity: Smart
+   * carousel.
+   *
+   * ```svelte
+   * <SvCarousel count={imgs.length} autoplay={4000}>
+   *   {#snippet slide(i)}<img src={imgs[i]} alt="" />{/snippet}
+   * </SvCarousel>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    count: number
+    slide?: Snippet<[number]>
+    /** Active slide index (bindable). */
+    current?: number
+    /** Autoplay interval in ms; 0 = off. */
+    autoplay?: number
+    loop?: boolean
+    arrows?: boolean
+    dots?: boolean
+    ariaLabel?: string
+  }
+
+  let {
+    count,
+    slide,
+    current = $bindable(0),
+    autoplay = 0,
+    loop = true,
+    arrows = true,
+    dots = true,
+    ariaLabel = 'Carousel',
+  }: Props = $props()
+
+  function go(i: number) {
+    if (count === 0) return
+    current = loop ? (i + count) % count : Math.max(0, Math.min(i, count - 1))
+  }
+  const next = () => go(current + 1)
+  const prev = () => go(current - 1)
+
+  // Autoplay, paused while hovered/focused.
+  let paused = $state(false)
+  $effect(() => {
+    if (!autoplay || paused || count < 2) return
+    const t = setInterval(next, autoplay)
+    return () => clearInterval(t)
+  })
+
+  // Swipe.
+  let dragging = $state(false)
+  let startX = 0
+  let dx = $state(0)
+  function down(e: PointerEvent) {
+    dragging = true
+    startX = e.clientX
+    ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
+  }
+  function move(e: PointerEvent) { if (dragging) dx = e.clientX - startX }
+  function up() {
+    if (!dragging) return
+    dragging = false
+    if (Math.abs(dx) > 50) (dx < 0 ? next() : prev())
+    dx = 0
+  }
+</script>
+
+<div
+  class="sv-carousel"
+  role="group"
+  aria-roledescription="carousel"
+  aria-label={ariaLabel}
+  onpointerenter={() => (paused = true)}
+  onpointerleave={() => (paused = false)}
+  onfocusin={() => (paused = true)}
+  onfocusout={() => (paused = false)}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="sv-carousel__viewport" onpointerdown={down} onpointermove={move} onpointerup={up} onpointercancel={up}>
+    <div class="sv-carousel__track" class:is-dragging={dragging} style:transform={`translateX(calc(${-current * 100}% + ${dx}px))`}>
+      {#each Array(count) as _, i (i)}
+        <div class="sv-carousel__slide" role="group" aria-roledescription="slide" aria-label={`${i + 1} of ${count}`} aria-hidden={i !== current}>
+          {@render slide?.(i)}
+        </div>
+      {/each}
+    </div>
+  </div>
+
+  {#if arrows && count > 1}
+    <button type="button" class="sv-carousel__arrow is-prev" aria-label="Previous slide" onclick={prev} disabled={!loop && current === 0}>‹</button>
+    <button type="button" class="sv-carousel__arrow is-next" aria-label="Next slide" onclick={next} disabled={!loop && current === count - 1}>›</button>
+  {/if}
+
+  {#if dots && count > 1}
+    <div class="sv-carousel__dots">
+      {#each Array(count) as _, i (i)}
+        <button type="button" class="sv-carousel__dot" class:is-active={i === current} aria-label={`Go to slide ${i + 1}`} aria-current={i === current ? 'true' : undefined} onclick={() => go(i)}></button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sv-carousel { position: relative; border-radius: 12px; overflow: hidden; }
+  .sv-carousel__viewport { overflow: hidden; touch-action: pan-y; }
+  .sv-carousel__track { display: flex; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
+  .sv-carousel__track.is-dragging { transition: none; }
+  .sv-carousel__slide { flex: 0 0 100%; min-width: 0; }
+  .sv-carousel__slide :global(img) { display: block; width: 100%; height: 100%; object-fit: cover; }
+
+  .sv-carousel__arrow {
+    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
+    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
+    background: color-mix(in srgb, var(--sg-bg, #fff) 82%, transparent); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); cursor: pointer; font-size: 20px; line-height: 1;
+    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.3);
+  }
+  .sv-carousel__arrow.is-prev { inset-inline-start: 10px; }
+  .sv-carousel__arrow.is-next { inset-inline-end: 10px; }
+  .sv-carousel__arrow:hover:not(:disabled) { background: var(--sg-bg, #fff); }
+  .sv-carousel__arrow:disabled { opacity: 0.4; cursor: default; }
+
+  .sv-carousel__dots { position: absolute; inset-inline: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; z-index: 2; }
+  .sv-carousel__dot {
+    width: 8px; height: 8px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
+    background: color-mix(in srgb, var(--sg-fg, #0f172a) 30%, var(--sg-bg, #fff)); transition: background 0.15s, width 0.15s;
+  }
+  .sv-carousel__dot.is-active { width: 20px; border-radius: 4px; background: var(--sg-accent, #2563eb); }
+</style>

package/dist/SvCarousel.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+   * SvCarousel - a slideshow: a sliding track with prev/next arrows, dot
+   * indicators, optional autoplay (pauses on hover/focus) and swipe. Slides are
+   * rendered by the `slide` snippet (index in, your content out). Parity: Smart
+   * carousel.
+   *
+   * ```svelte
+   * <SvCarousel count={imgs.length} autoplay={4000}>
+   *   {#snippet slide(i)}<img src={imgs[i]} alt="" />{/snippet}
+   * </SvCarousel>
+   * ```
+   */
+import type { Snippet } from 'svelte';
+type Props = {
+    count: number;
+    slide?: Snippet<[number]>;
+    /** Active slide index (bindable). */
+    current?: number;
+    /** Autoplay interval in ms; 0 = off. */
+    autoplay?: number;
+    loop?: boolean;
+    arrows?: boolean;
+    dots?: boolean;
+    ariaLabel?: string;
+};
+declare const SvCarousel: import("svelte").Component<Props, {}, "current">;
+type SvCarousel = ReturnType<typeof SvCarousel>;
+export default SvCarousel;

package/dist/SvCheckBox.svelte

@@ -4,17 +4,15 @@
    * label. Parity: Smart `smart-check-box`. Controlled via `checked` + `onChange`.
    */
   import type { Snippet } from 'svelte'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
   import { createCheckbox } from './createCheckbox.svelte'
 
-  type Props = {
+  type Props = SvEditorProps & {
     checked?: boolean
     indeterminate?: boolean
     onChange?: (checked: boolean) => void
-    disabled?: boolean
-    size?: 'sm' | 'md' | 'lg'
-    name?: string
     value?: string
-    ariaLabel?: string
     children?: Snippet
   }
 
@@ -27,9 +25,18 @@
     name,
     value,
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    hint,
+    dir,
+    id,
     children,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-check')
+  const uid = $derived(id ?? autoId)
+
   // The styled checkbox is just a renderer over the headless core. The label
   // fallback depends on `children` (a render concern), so it is computed here.
   const cb = createCheckbox({
@@ -38,25 +45,32 @@
     onChange: (v) => onChange?.(v),
     disabled: () => disabled,
     ariaLabel: () => ariaLabel ?? (children ? undefined : 'checkbox'),
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 </script>
 
-<label class="sv-check sv-check--{size}" class:is-disabled={disabled}>
-  <button
-    class="sv-check__box"
-    class:is-checked={checked && !indeterminate}
-    class:is-indeterminate={indeterminate}
-    {...cb.boxProps()}
-  >
-    {#if indeterminate}
-      <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8h8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" /></svg>
-    {:else if checked}
-      <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
-    {/if}
-  </button>
-  {#if children}<span class="sv-check__label">{@render children()}</span>{/if}
-  {#if name}<input type="hidden" {name} value={checked ? (value ?? 'true') : ''} />{/if}
-</label>
+<SvField id={uid} {hint} {error} {required} {dir}>
+  <label class="sv-check sv-check--{size}" class:is-disabled={disabled} class:is-invalid={invalid}>
+    <button
+      class="sv-check__box"
+      class:is-checked={checked && !indeterminate}
+      class:is-indeterminate={indeterminate}
+      {...cb.boxProps()}
+    >
+      {#if indeterminate}
+        <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8h8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" /></svg>
+      {:else if checked}
+        <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
+      {/if}
+    </button>
+    {#if children}<span class="sv-check__label">{@render children()}</span>{/if}
+    {#if name}<input type="hidden" {name} value={checked ? (value ?? 'true') : ''} />{/if}
+  </label>
+</SvField>
 
 <style>
   .sv-check {
@@ -78,5 +92,6 @@
   .sv-check__box.is-checked, .sv-check__box.is-indeterminate {
     background: var(--_accent); border-color: var(--_accent);
   }
+  .sv-check.is-invalid .sv-check__box { border-color: var(--sg-danger, #dc2626); }
   .sv-check__box:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
 </style>

package/dist/SvCheckBox.svelte.d.ts

@@ -3,15 +3,12 @@
    * label. Parity: Smart `smart-check-box`. Controlled via `checked` + `onChange`.
    */
 import type { Snippet } from 'svelte';
-type Props = {
+import { type SvEditorProps } from './editor-contract';
+type Props = SvEditorProps & {
     checked?: boolean;
     indeterminate?: boolean;
     onChange?: (checked: boolean) => void;
-    disabled?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-    name?: string;
     value?: string;
-    ariaLabel?: string;
     children?: Snippet;
 };
 declare const SvCheckBox: import("svelte").Component<Props, {}, "">;

package/dist/SvChip.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  /**
+   * SvChip - a compact pill for a selected/filter/entity value: an optional
+   * leading avatar/icon, a label, and an optional remove (x) button; optionally
+   * clickable. Larger + more interactive than SvBadge (a static status pill).
+   * Theme-driven. Parity: Smart chip / tag.
+   *
+   * ```svelte
+   * <SvChip removable onRemove={() => drop(tag)}>{tag}</SvChip>
+   * <SvChip variant="accent" onClick={select}>{#snippet leading()}<SvAvatar size="sm" name="Ada" />{/snippet}Ada</SvChip>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Variant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'
+
+  type Props = {
+    variant?: Variant
+    size?: 'sm' | 'md'
+    /** Show a remove (x) button. */
+    removable?: boolean
+    onRemove?: () => void
+    /** Make the chip's label a button. */
+    onClick?: () => void
+    /** Filled solid vs soft tint (default soft). */
+    solid?: boolean
+    disabled?: boolean
+    children?: Snippet
+    /** Leading content (avatar / icon). */
+    leading?: Snippet
+  }
+
+  let {
+    variant = 'neutral',
+    size = 'md',
+    removable = false,
+    onRemove,
+    onClick,
+    solid = false,
+    disabled = false,
+    children,
+    leading,
+  }: Props = $props()
+</script>
+
+<span class="sv-chip sv-chip--{variant} sv-chip--{size}" class:is-solid={solid} class:is-disabled={disabled}>
+  {#if leading}<span class="sv-chip__lead">{@render leading()}</span>{/if}
+  {#if onClick}
+    <button type="button" class="sv-chip__label sv-chip__label--btn" {disabled} onclick={onClick}>{@render children?.()}</button>
+  {:else}
+    <span class="sv-chip__label">{@render children?.()}</span>
+  {/if}
+  {#if removable}
+    <button type="button" class="sv-chip__x" aria-label="Remove" {disabled} onclick={onRemove}>&times;</button>
+  {/if}
+</span>
+
+<style>
+  .sv-chip {
+    --_c: var(--sg-muted, #64748b);
+    display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box;
+    border-radius: 999px; font-weight: 550; white-space: nowrap; max-width: 100%;
+    color: var(--_c);
+    background: color-mix(in srgb, var(--_c) 13%, transparent);
+    border: 1px solid color-mix(in srgb, var(--_c) 22%, transparent);
+  }
+  .sv-chip.is-solid { color: var(--sg-on-accent, #fff); background: var(--_c); border-color: var(--_c); }
+  .sv-chip.is-disabled { opacity: 0.55; pointer-events: none; }
+  .sv-chip--sm { font-size: 11.5px; padding: 1px 4px 1px 8px; height: 22px; }
+  .sv-chip--md { font-size: 12.5px; padding: 2px 5px 2px 10px; height: 26px; }
+  .sv-chip:not(:has(.sv-chip__x)).sv-chip--sm { padding-inline-end: 8px; }
+  .sv-chip:not(:has(.sv-chip__x)).sv-chip--md { padding-inline-end: 10px; }
+  .sv-chip__lead { display: inline-flex; margin-inline-start: -4px; }
+  .sv-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  .sv-chip__label--btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
+  .sv-chip__x {
+    flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
+    background: none; border: 0; color: currentColor; cursor: pointer; font-size: 14px; line-height: 1; opacity: 0.7;
+  }
+  .sv-chip__x:hover { opacity: 1; background: color-mix(in srgb, currentColor 20%, transparent); }
+
+  .sv-chip--neutral { --_c: var(--sg-muted, #64748b); }
+  .sv-chip--accent { --_c: var(--sg-accent, #2563eb); }
+  .sv-chip--success { --_c: var(--sg-success, #16a34a); }
+  .sv-chip--warning { --_c: var(--sg-warning, #d97706); }
+  .sv-chip--danger { --_c: var(--sg-danger, #dc2626); }
+  .sv-chip--info { --_c: var(--sg-info, #0891b2); }
+</style>

package/dist/SvChip.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+   * SvChip - a compact pill for a selected/filter/entity value: an optional
+   * leading avatar/icon, a label, and an optional remove (x) button; optionally
+   * clickable. Larger + more interactive than SvBadge (a static status pill).
+   * Theme-driven. Parity: Smart chip / tag.
+   *
+   * ```svelte
+   * <SvChip removable onRemove={() => drop(tag)}>{tag}</SvChip>
+   * <SvChip variant="accent" onClick={select}>{#snippet leading()}<SvAvatar size="sm" name="Ada" />{/snippet}Ada</SvChip>
+   * ```
+   */
+import type { Snippet } from 'svelte';
+type Variant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+type Props = {
+    variant?: Variant;
+    size?: 'sm' | 'md';
+    /** Show a remove (x) button. */
+    removable?: boolean;
+    onRemove?: () => void;
+    /** Make the chip's label a button. */
+    onClick?: () => void;
+    /** Filled solid vs soft tint (default soft). */
+    solid?: boolean;
+    disabled?: boolean;
+    children?: Snippet;
+    /** Leading content (avatar / icon). */
+    leading?: Snippet;
+};
+declare const SvChip: import("svelte").Component<Props, {}, "">;
+type SvChip = ReturnType<typeof SvChip>;
+export default SvChip;

package/dist/SvCircularProgress.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  /**
+   * SvCircularProgress - a circular / ring progress indicator (WAI-ARIA
+   * `progressbar`). Determinate (value/max) or `indeterminate` (spinning), with
+   * color intents, sizing/thickness, and an optional center label or `children`
+   * snippet. Theme-driven; respects prefers-reduced-motion.
+   *
+   * ```svelte
+   * <SvCircularProgress value={72} showLabel />
+   * <SvCircularProgress indeterminate size={28} color="accent" />
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    value?: number
+    max?: number
+    indeterminate?: boolean
+    /** Diameter in px. */
+    size?: number
+    /** Ring stroke width in px. */
+    thickness?: number
+    color?: 'accent' | 'success' | 'warning' | 'danger'
+    /** Show a percentage label in the center. */
+    showLabel?: boolean
+    formatLabel?: (value: number, max: number) => string
+    ariaLabel?: string
+    /** Custom center content (overrides showLabel). */
+    children?: Snippet
+  }
+
+  let {
+    value = 0,
+    max = 100,
+    indeterminate = false,
+    size = 48,
+    thickness = 5,
+    color = 'accent',
+    showLabel = false,
+    formatLabel,
+    ariaLabel,
+    children,
+  }: Props = $props()
+
+  const r = $derived((size - thickness) / 2)
+  const circ = $derived(2 * Math.PI * r)
+  const pct = $derived(max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0)
+  const offset = $derived(circ * (1 - pct / 100))
+  const label = $derived(formatLabel ? formatLabel(value, max) : `${Math.round(pct)}%`)
+</script>
+
+<div
+  class="sv-circ sv-circ--{color}"
+  class:is-indeterminate={indeterminate}
+  style:width={`${size}px`}
+  style:height={`${size}px`}
+  role="progressbar"
+  aria-label={ariaLabel}
+  aria-valuemin={indeterminate ? undefined : 0}
+  aria-valuemax={indeterminate ? undefined : max}
+  aria-valuenow={indeterminate ? undefined : value}
+  aria-valuetext={indeterminate ? undefined : label}
+>
+  <svg class="sv-circ__svg" viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
+    <circle class="sv-circ__track" cx={size / 2} cy={size / 2} r={r} fill="none" stroke-width={thickness} />
+    <circle
+      class="sv-circ__arc"
+      cx={size / 2}
+      cy={size / 2}
+      r={r}
+      fill="none"
+      stroke-width={thickness}
+      stroke-linecap="round"
+      stroke-dasharray={circ}
+      stroke-dashoffset={indeterminate ? circ * 0.7 : offset}
+    />
+  </svg>
+  {#if children}
+    <div class="sv-circ__center">{@render children()}</div>
+  {:else if showLabel && !indeterminate}
+    <div class="sv-circ__center sv-circ__label" style:font-size={`${Math.max(9, size * 0.26)}px`}>{label}</div>
+  {/if}
+</div>
+
+<style>
+  .sv-circ {
+    --_accent: var(--sg-accent, #2563eb);
+    --_c: var(--_accent);
+    position: relative; display: inline-flex; flex: none;
+  }
+  .sv-circ--success { --_c: var(--sg-success, #16a34a); }
+  .sv-circ--warning { --_c: var(--sg-warning, #f59e0b); }
+  .sv-circ--danger { --_c: var(--sg-danger, #dc2626); }
+  .sv-circ__svg { display: block; transform: rotate(-90deg); }
+  .sv-circ__track { stroke: var(--sg-border, #e2e8f0); }
+  .sv-circ__arc { stroke: var(--_c); transition: stroke-dashoffset 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
+  .sv-circ.is-indeterminate .sv-circ__svg { animation: sv-circ-spin 0.9s linear infinite; }
+  .sv-circ.is-indeterminate .sv-circ__arc { transition: none; }
+  @keyframes sv-circ-spin { to { transform: rotate(270deg); } }
+  @media (prefers-reduced-motion: reduce) {
+    .sv-circ.is-indeterminate .sv-circ__svg { animation-duration: 2.4s; }
+    .sv-circ__arc { transition: none; }
+  }
+  .sv-circ__center {
+    position: absolute; inset: 0; display: grid; place-items: center;
+    color: var(--sg-fg, #0f172a);
+  }
+  .sv-circ__label { font-weight: 700; font-variant-numeric: tabular-nums; }
+</style>

package/dist/SvCircularProgress.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+   * SvCircularProgress - a circular / ring progress indicator (WAI-ARIA
+   * `progressbar`). Determinate (value/max) or `indeterminate` (spinning), with
+   * color intents, sizing/thickness, and an optional center label or `children`
+   * snippet. Theme-driven; respects prefers-reduced-motion.
+   *
+   * ```svelte
+   * <SvCircularProgress value={72} showLabel />
+   * <SvCircularProgress indeterminate size={28} color="accent" />
+   * ```
+   */
+import type { Snippet } from 'svelte';
+type Props = {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    /** Diameter in px. */
+    size?: number;
+    /** Ring stroke width in px. */
+    thickness?: number;
+    color?: 'accent' | 'success' | 'warning' | 'danger';
+    /** Show a percentage label in the center. */
+    showLabel?: boolean;
+    formatLabel?: (value: number, max: number) => string;
+    ariaLabel?: string;
+    /** Custom center content (overrides showLabel). */
+    children?: Snippet;
+};
+declare const SvCircularProgress: import("svelte").Component<Props, {}, "">;
+type SvCircularProgress = ReturnType<typeof SvCircularProgress>;
+export default SvCircularProgress;