@svgrid/grid 3.0.0 → 3.0.1

package/src/SvCircularProgress.svelte

@@ -1,109 +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, #d97706); }
-  .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>
+<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, #d97706); }
+  .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/src/SvColorInput.svelte

@@ -1,181 +1,181 @@
-<script lang="ts">
-  /**
-   * SvColorInput - a color swatch that opens a portalled popover with a hex
-   * field, a native picker, and a preset palette. Parity: Smart `smart-color-input`.
-   * Emits a hex string. Popover escapes the grid scroll container via popover.ts.
-   *
-   * The styled renderer over the headless `createColorInput` core: hex
-   * normalization, palette, draft field and open/close state come from the core;
-   * the portal + anchored measurement stay here (render concerns).
-   */
-  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
-  import { createDismissableLayer } from './a11y/dismissable'
-  import SvField from './SvField.svelte'
-  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
-  import { createColorInput } from './createColorInput.svelte'
-
-  /** User-facing strings for the color popover (localizable via `messages`). */
-  type ColorMessages = { dialog: string; picker: string; hex: string }
-  const DEFAULT_MESSAGES: ColorMessages = { dialog: 'Choose color', picker: 'Color picker', hex: 'Hex value' }
-
-  type Props = SvEditorProps & {
-    value?: string
-    onChange?: (hex: string) => void
-    /** Preset swatches. */
-    palette?: string[]
-    autoOpen?: boolean
-    /** Override the built-in popover strings. */
-    messages?: Partial<ColorMessages>
-    /** Stretch to the container width (otherwise hugs its content). */
-    block?: boolean
-  }
-
-  let {
-    value = $bindable('#3b82f6'),
-    onChange,
-    disabled = false,
-    readonly = false,
-    palette,
-    name,
-    size = 'md',
-    ariaLabel,
-    invalid = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-    loading = false,
-    autoOpen = false,
-    messages,
-    block = false,
-  }: Props = $props()
-
-  const autoId = nextEditorId('sv-color')
-  const uid = $derived(id ?? autoId)
-  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
-
-  const col = createColorInput({
-    value: () => value,
-    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
-    onChange: (hex) => { value = hex; onChange?.(hex) },
-    disabled: () => disabled,
-    readonly: () => readonly,
-    palette: () => palette as string[],
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-    ariaLabel: () => ariaLabel,
-  })
-
-  let triggerEl = $state<HTMLButtonElement | null>(null)
-  let panelEl = $state<HTMLDivElement | null>(null)
-  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
-
-  function updatePos() {
-    if (!triggerEl) return
-    panelRect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 210, minWidth: 200 })
-  }
-
-  $effect(() => {
-    if (!col.popover.open) return
-    updatePos()
-    const reposition = () => updatePos()
-    window.addEventListener('scroll', reposition, true)
-    window.addEventListener('resize', reposition)
-    const layer = createDismissableLayer({
-      element: () => [triggerEl, panelEl],
-      onDismiss: () => col.popover.close(),
-    })
-    layer.activate()
-    return () => {
-      window.removeEventListener('scroll', reposition, true)
-      window.removeEventListener('resize', reposition)
-      layer.release()
-    }
-  })
-
-  function focusOpen(node: HTMLButtonElement) {
-    if (!autoOpen) return
-    node.focus(); col.popover.show()
-  }
-</script>
-
-<SvField frame id={uid} {label} {hint} {error} {required} {dir} {size} {invalid} {disabled} {readonly} {loading} {block} width={block ? undefined : 'fit-content'}>
-  <button
-    bind:this={triggerEl}
-    class="sv-color sv-color__trigger"
-    class:is-disabled={disabled}
-    {...col.swatchProps()}
-    use:focusOpen
-  >
-    <span class="sv-color__swatch" style:background={col.normalized}></span>
-    <span class="sv-color__hex">{col.normalized}</span>
-  </button>
-</SvField>
-
-{#if col.popover.open}
-  <div
-    class="sv-color__panel"
-    bind:this={panelEl}
-    use:portalToBody
-    use:popIn={{ up: panelRect.openUpward }}
-    style:position="fixed"
-    style:top={`${panelRect.top}px`}
-    style:left={`${panelRect.left}px`}
-    role="dialog"
-    aria-label={M.dialog}
-  >
-    <div class="sv-color__top">
-      <input class="sv-color__native" type="color" value={col.normalized} oninput={(e) => col.pick((e.currentTarget as HTMLInputElement).value)} aria-label={M.picker} />
-      <input
-        class="sv-color__field"
-        type="text"
-        bind:value={col.hexDraft}
-        spellcheck="false"
-        aria-label={M.hex}
-        onblur={col.commitHex}
-        onkeydown={(e) => { if (e.key === 'Enter') col.commitHex() }}
-      />
-    </div>
-    <div class="sv-color__palette">
-      {#each col.palette as c (c)}
-        <button
-          class="sv-color__chip"
-          class:is-active={col.isActive(c)}
-          style:background={c}
-          {...col.chipProps(c)}
-        ></button>
-      {/each}
-    </div>
-  </div>
-{/if}
-{#if name}<input type="hidden" {name} value={col.normalized} />{/if}
-
-<style>
-  .sv-color__trigger {
-    display: flex; align-items: center; gap: 8px; width: 100%; height: 100%;
-    background: none; border: 0; padding: 0 10px; cursor: pointer; font: inherit; color: inherit;
-  }
-  .sv-color__trigger.is-disabled { cursor: not-allowed; }
-  .sv-color__swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); flex: none; }
-  .sv-color__hex { font-variant-numeric: tabular-nums; text-transform: lowercase; white-space: nowrap; }
-
-  :global(.sv-color__panel) {
-    z-index: 2147483647; width: 208px; padding: 12px;
-    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);
-  }
-  :global(.sv-color__top) { display: flex; gap: 8px; margin-bottom: 10px; }
-  :global(.sv-color__native) { width: 36px; height: 34px; padding: 0; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 8px; background: none; cursor: pointer; }
-  :global(.sv-color__field) {
-    flex: 1; min-width: 0; height: 34px; padding: 0 10px; font: inherit; font-size: 13px;
-    border: 1px solid var(--sg-input-border, #cbd5e1); border-radius: 8px; background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); outline: none;
-  }
-  :global(.sv-color__palette) { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
-  :global(.sv-color__chip) { width: 100%; aspect-ratio: 1; border-radius: 5px; border: 1px solid rgba(0,0,0,0.12); cursor: pointer; padding: 0; }
-  :global(.sv-color__chip.is-active) { outline: 2px solid var(--sg-accent, #2563eb); outline-offset: 1px; }
-</style>
+<script lang="ts">
+  /**
+   * SvColorInput - a color swatch that opens a portalled popover with a hex
+   * field, a native picker, and a preset palette. Parity: Smart `smart-color-input`.
+   * Emits a hex string. Popover escapes the grid scroll container via popover.ts.
+   *
+   * The styled renderer over the headless `createColorInput` core: hex
+   * normalization, palette, draft field and open/close state come from the core;
+   * the portal + anchored measurement stay here (render concerns).
+   */
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
+  import { createColorInput } from './createColorInput.svelte'
+
+  /** User-facing strings for the color popover (localizable via `messages`). */
+  type ColorMessages = { dialog: string; picker: string; hex: string }
+  const DEFAULT_MESSAGES: ColorMessages = { dialog: 'Choose color', picker: 'Color picker', hex: 'Hex value' }
+
+  type Props = SvEditorProps & {
+    value?: string
+    onChange?: (hex: string) => void
+    /** Preset swatches. */
+    palette?: string[]
+    autoOpen?: boolean
+    /** Override the built-in popover strings. */
+    messages?: Partial<ColorMessages>
+    /** Stretch to the container width (otherwise hugs its content). */
+    block?: boolean
+  }
+
+  let {
+    value = $bindable('#3b82f6'),
+    onChange,
+    disabled = false,
+    readonly = false,
+    palette,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    loading = false,
+    autoOpen = false,
+    messages,
+    block = false,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-color')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+
+  const col = createColorInput({
+    value: () => value,
+    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
+    onChange: (hex) => { value = hex; onChange?.(hex) },
+    disabled: () => disabled,
+    readonly: () => readonly,
+    palette: () => palette as string[],
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+    ariaLabel: () => ariaLabel,
+  })
+
+  let triggerEl = $state<HTMLButtonElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+
+  function updatePos() {
+    if (!triggerEl) return
+    panelRect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 210, minWidth: 200 })
+  }
+
+  $effect(() => {
+    if (!col.popover.open) return
+    updatePos()
+    const reposition = () => updatePos()
+    window.addEventListener('scroll', reposition, true)
+    window.addEventListener('resize', reposition)
+    const layer = createDismissableLayer({
+      element: () => [triggerEl, panelEl],
+      onDismiss: () => col.popover.close(),
+    })
+    layer.activate()
+    return () => {
+      window.removeEventListener('scroll', reposition, true)
+      window.removeEventListener('resize', reposition)
+      layer.release()
+    }
+  })
+
+  function focusOpen(node: HTMLButtonElement) {
+    if (!autoOpen) return
+    node.focus(); col.popover.show()
+  }
+</script>
+
+<SvField frame id={uid} {label} {hint} {error} {required} {dir} {size} {invalid} {disabled} {readonly} {loading} {block} width={block ? undefined : 'fit-content'}>
+  <button
+    bind:this={triggerEl}
+    class="sv-color sv-color__trigger"
+    class:is-disabled={disabled}
+    {...col.swatchProps()}
+    use:focusOpen
+  >
+    <span class="sv-color__swatch" style:background={col.normalized}></span>
+    <span class="sv-color__hex">{col.normalized}</span>
+  </button>
+</SvField>
+
+{#if col.popover.open}
+  <div
+    class="sv-color__panel"
+    bind:this={panelEl}
+    use:portalToBody
+    use:popIn={{ up: panelRect.openUpward }}
+    style:position="fixed"
+    style:top={`${panelRect.top}px`}
+    style:left={`${panelRect.left}px`}
+    role="dialog"
+    aria-label={M.dialog}
+  >
+    <div class="sv-color__top">
+      <input class="sv-color__native" type="color" value={col.normalized} oninput={(e) => col.pick((e.currentTarget as HTMLInputElement).value)} aria-label={M.picker} />
+      <input
+        class="sv-color__field"
+        type="text"
+        bind:value={col.hexDraft}
+        spellcheck="false"
+        aria-label={M.hex}
+        onblur={col.commitHex}
+        onkeydown={(e) => { if (e.key === 'Enter') col.commitHex() }}
+      />
+    </div>
+    <div class="sv-color__palette">
+      {#each col.palette as c (c)}
+        <button
+          class="sv-color__chip"
+          class:is-active={col.isActive(c)}
+          style:background={c}
+          {...col.chipProps(c)}
+        ></button>
+      {/each}
+    </div>
+  </div>
+{/if}
+{#if name}<input type="hidden" {name} value={col.normalized} />{/if}
+
+<style>
+  .sv-color__trigger {
+    display: flex; align-items: center; gap: 8px; width: 100%; height: 100%;
+    background: none; border: 0; padding: 0 10px; cursor: pointer; font: inherit; color: inherit;
+  }
+  .sv-color__trigger.is-disabled { cursor: not-allowed; }
+  .sv-color__swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); flex: none; }
+  .sv-color__hex { font-variant-numeric: tabular-nums; text-transform: lowercase; white-space: nowrap; }
+
+  :global(.sv-color__panel) {
+    z-index: 2147483647; width: 208px; padding: 12px;
+    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);
+  }
+  :global(.sv-color__top) { display: flex; gap: 8px; margin-bottom: 10px; }
+  :global(.sv-color__native) { width: 36px; height: 34px; padding: 0; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 8px; background: none; cursor: pointer; }
+  :global(.sv-color__field) {
+    flex: 1; min-width: 0; height: 34px; padding: 0 10px; font: inherit; font-size: 13px;
+    border: 1px solid var(--sg-input-border, #cbd5e1); border-radius: 8px; background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); outline: none;
+  }
+  :global(.sv-color__palette) { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
+  :global(.sv-color__chip) { width: 100%; aspect-ratio: 1; border-radius: 5px; border: 1px solid rgba(0,0,0,0.12); cursor: pointer; padding: 0; }
+  :global(.sv-color__chip.is-active) { outline: 2px solid var(--sg-accent, #2563eb); outline-offset: 1px; }
+</style>