@svgrid/grid 1.2.33 → 2.0.0

package/src/SvRating.svelte

@@ -4,22 +4,24 @@
    * `smart-rating`. Hover preview, keyboard, optional half steps, readOnly.
    * Uses the grid's `--sg-rating-*` tokens so it matches the in-grid editor.
    */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createRating } from './createRating.svelte'
 
-  type Props = {
+  /** User-facing strings (localizable via `messages`). */
+  type RatingMessages = { label: string; star: string; stars: string }
+  const DEFAULT_MESSAGES: RatingMessages = { label: 'Rating', star: 'star', stars: 'stars' }
+
+  type Props = SvEditorProps & {
     value?: number
     onChange?: (value: number) => void
     max?: number
     /** Allow half-star precision. */
     allowHalf?: boolean
-    /** Read-only: shown but not editable (the kit-standard name). */
-    readonly?: boolean
     /** @deprecated use `readonly` - kept for back-compat. */
     readOnly?: boolean
-    disabled?: boolean
-    size?: 'sm' | 'md' | 'lg'
-    name?: string
-    ariaLabel?: string
+    /** Override the built-in strings (group + per-star aria-labels). */
+    messages?: Partial<RatingMessages>
   }
 
   let {
@@ -33,9 +35,20 @@
     size = 'md',
     name,
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
   }: Props = $props()
 
   const ro = $derived(readonly || readOnly)
+  const autoId = nextEditorId('sv-rating')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
 
   // The styled rating is just a renderer over the headless core.
   const r = createRating({
@@ -45,32 +58,40 @@
     allowHalf: () => allowHalf,
     readonly: () => ro,
     disabled: () => disabled,
-    ariaLabel: () => ariaLabel,
+    ariaLabel: () => ariaLabel ?? label ?? M.label,
+    starLabel: (n) => `${n} ${n === 1 ? M.star : M.stars}`,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 </script>
 
-<div
-  class="sv-rating sv-rating--{size}"
-  class:is-readonly={ro}
-  class:is-disabled={disabled}
-  {...r.rootProps()}
->
-  {#each Array(max) as _, i (i)}
-    <button
-      class="sv-rating__star is-{r.fillOf(i)}"
-      {...r.starProps(i)}
-    >
-      <svg viewBox="0 0 24 24" aria-hidden="true">
-        <defs>
-          <linearGradient id="half-{i}"><stop offset="50%" stop-color="var(--_on)" /><stop offset="50%" stop-color="var(--_off)" /></linearGradient>
-        </defs>
-        <path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.7l1.2-6.6L2.5 9.5l6.6-.9z"
-          fill={r.fillOf(i) === 'full' ? 'var(--_on)' : r.fillOf(i) === 'half' ? `url(#half-${i})` : 'var(--_off)'} />
-      </svg>
-    </button>
-  {/each}
-  {#if name}<input type="hidden" {name} value={value} />{/if}
-</div>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div
+    class="sv-rating sv-rating--{size}"
+    class:is-readonly={ro}
+    class:is-disabled={disabled}
+    {...r.rootProps()}
+  >
+    {#each Array(max) as _, i (i)}
+      <button
+        class="sv-rating__star is-{r.fillOf(i)}"
+        {...r.starProps(i)}
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <defs>
+            <linearGradient id="half-{uid}-{i}"><stop offset="50%" stop-color="var(--_on)" /><stop offset="50%" stop-color="var(--_off)" /></linearGradient>
+          </defs>
+          <path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.7l1.2-6.6L2.5 9.5l6.6-.9z"
+            fill={r.fillOf(i) === 'full' ? 'var(--_on)' : r.fillOf(i) === 'half' ? `url(#half-${uid}-${i})` : 'var(--_off)'} />
+        </svg>
+      </button>
+    {/each}
+    {#if name}<input type="hidden" {name} value={value} />{/if}
+  </div>
+</SvField>
 
 <style>
   .sv-rating {

package/src/SvRichText.svelte

@@ -0,0 +1,192 @@
+<script lang="ts" module>
+  export type RichTextTool =
+    | 'bold' | 'italic' | 'underline' | 'strike'
+    | 'h1' | 'h2' | 'h3' | 'p'
+    | 'ul' | 'ol' | 'quote' | 'code'
+    | 'alignLeft' | 'alignCenter' | 'alignRight'
+    | 'link' | 'clear' | 'undo' | 'redo'
+    | '|'
+</script>
+
+<script lang="ts">
+  /**
+   * SvRichText - a lightweight WYSIWYG editor: a formatting toolbar over a
+   * `contentEditable` region, emitting HTML. Parity: Smart `smart-editor` (the
+   * common commands). Uses `document.execCommand` - the pragmatic, widely-working
+   * approach for a component-kit editor. Bindable `value` (HTML string).
+   *
+   * ```svelte
+   * <SvRichText bind:value={html} placeholder="Write something…" />
+   * ```
+   */
+  import { nextEditorId } from './editor-contract'
+
+  const DEFAULT_TOOLS: RichTextTool[] = [
+    'bold', 'italic', 'underline', 'strike', '|',
+    'h1', 'h2', 'h3', 'p', '|',
+    'ul', 'ol', 'quote', 'code', '|',
+    'alignLeft', 'alignCenter', 'alignRight', '|',
+    'link', 'clear', '|', 'undo', 'redo',
+  ]
+
+  const META: Record<Exclude<RichTextTool, '|'>, { label: string; glyph: string }> = {
+    bold: { label: 'Bold', glyph: 'B' }, italic: { label: 'Italic', glyph: 'I' },
+    underline: { label: 'Underline', glyph: 'U' }, strike: { label: 'Strikethrough', glyph: 'S' },
+    h1: { label: 'Heading 1', glyph: 'H1' }, h2: { label: 'Heading 2', glyph: 'H2' },
+    h3: { label: 'Heading 3', glyph: 'H3' }, p: { label: 'Paragraph', glyph: '¶' },
+    ul: { label: 'Bullet list', glyph: '•' }, ol: { label: 'Numbered list', glyph: '1.' },
+    quote: { label: 'Quote', glyph: '❝' }, code: { label: 'Code block', glyph: '</>' },
+    alignLeft: { label: 'Align left', glyph: '≡' }, alignCenter: { label: 'Align center', glyph: '≣' },
+    alignRight: { label: 'Align right', glyph: '≡' }, link: { label: 'Link', glyph: '🔗' },
+    clear: { label: 'Clear formatting', glyph: '⌫' }, undo: { label: 'Undo', glyph: '↶' }, redo: { label: 'Redo', glyph: '↷' },
+  }
+
+  type Props = {
+    /** HTML string (bindable). */
+    value?: string
+    onChange?: (html: string) => void
+    placeholder?: string
+    disabled?: boolean
+    readonly?: boolean
+    minHeight?: string
+    /** Toolbar tools + order; use '|' for a separator. */
+    tools?: RichTextTool[]
+    ariaLabel?: string
+  }
+
+  let {
+    value = $bindable(''),
+    onChange,
+    placeholder = '',
+    disabled = false,
+    readonly = false,
+    minHeight = '160px',
+    tools = DEFAULT_TOOLS,
+    ariaLabel = 'Rich text editor',
+  }: Props = $props()
+
+  const uid = nextEditorId('sv-rt')
+  let editorEl = $state<HTMLDivElement | null>(null)
+  let focused = $state(false)
+  let empty = $state(true)
+  let activeState = $state<Record<string, boolean>>({})
+
+  // Push external value into the DOM only when it differs and we're not typing
+  // (writing innerHTML while focused would collapse the caret).
+  $effect(() => {
+    const v = value ?? ''
+    if (editorEl && !focused && editorEl.innerHTML !== v) editorEl.innerHTML = v
+    if (editorEl) empty = editorEl.textContent!.trim().length === 0
+  })
+
+  function sync() {
+    if (!editorEl) return
+    const html = editorEl.innerHTML
+    empty = editorEl.textContent!.trim().length === 0
+    value = html
+    onChange?.(html)
+  }
+  function q(cmd: string): boolean {
+    try { return document.queryCommandState(cmd) } catch { return false }
+  }
+  function refreshState() {
+    activeState = {
+      bold: q('bold'), italic: q('italic'), underline: q('underline'), strike: q('strikeThrough'),
+      ul: q('insertUnorderedList'), ol: q('insertOrderedList'),
+    }
+  }
+  function exec(cmd: string, arg?: string) {
+    if (disabled || readonly) return
+    editorEl?.focus()
+    try { document.execCommand(cmd, false, arg) } catch { /* jsdom / unsupported */ }
+    sync()
+    refreshState()
+  }
+
+  const run: Record<Exclude<RichTextTool, '|'>, () => void> = {
+    bold: () => exec('bold'), italic: () => exec('italic'), underline: () => exec('underline'), strike: () => exec('strikeThrough'),
+    h1: () => exec('formatBlock', 'H1'), h2: () => exec('formatBlock', 'H2'), h3: () => exec('formatBlock', 'H3'), p: () => exec('formatBlock', 'P'),
+    ul: () => exec('insertUnorderedList'), ol: () => exec('insertOrderedList'),
+    quote: () => exec('formatBlock', 'BLOCKQUOTE'), code: () => exec('formatBlock', 'PRE'),
+    alignLeft: () => exec('justifyLeft'), alignCenter: () => exec('justifyCenter'), alignRight: () => exec('justifyRight'),
+    link: () => { const url = typeof prompt === 'function' ? prompt('Link URL', 'https://') : null; if (url) exec('createLink', url) },
+    clear: () => exec('removeFormat'), undo: () => exec('undo'), redo: () => exec('redo'),
+  }
+</script>
+
+<div class="sv-rt" class:is-disabled={disabled} class:is-readonly={readonly}>
+  {#if !readonly}
+    <div class="sv-rt__toolbar" role="toolbar" aria-label="Formatting" aria-controls={uid}>
+      {#each tools as t, i (i)}
+        {#if t === '|'}
+          <span class="sv-rt__sep" aria-hidden="true"></span>
+        {:else}
+          <button
+            type="button"
+            class="sv-rt__btn"
+            class:is-on={activeState[t]}
+            data-tool={t}
+            title={META[t].label}
+            aria-label={META[t].label}
+            aria-pressed={activeState[t] ? true : undefined}
+            {disabled}
+            onmousedown={(e) => e.preventDefault()}
+            onclick={run[t]}
+          >{META[t].glyph}</button>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    bind:this={editorEl}
+    id={uid}
+    class="sv-rt__body"
+    class:is-empty={empty}
+    style:min-height={minHeight}
+    contenteditable={!disabled && !readonly}
+    role="textbox"
+    aria-multiline="true"
+    aria-label={ariaLabel}
+    data-placeholder={placeholder}
+    tabindex={disabled ? -1 : 0}
+    oninput={sync}
+    onfocus={() => (focused = true)}
+    onblur={() => { focused = false; sync() }}
+    onkeyup={refreshState}
+    onmouseup={refreshState}
+  ></div>
+</div>
+
+<style>
+  .sv-rt {
+    --_accent: var(--sg-accent, #2563eb);
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); overflow: hidden;
+    display: flex; flex-direction: column;
+  }
+  .sv-rt:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 20%, transparent); }
+  .sv-rt.is-disabled { opacity: 0.6; }
+  .sv-rt__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; padding: 5px 6px; border-bottom: 1px solid var(--sg-border, #e2e8f0); background: var(--sg-header-bg, #f8fafc); }
+  .sv-rt__btn {
+    min-width: 28px; height: 28px; padding: 0 6px; display: grid; place-items: center;
+    background: none; border: 0; border-radius: 6px; color: var(--sg-fg, #334155); cursor: pointer;
+    font-size: 12.5px; font-weight: 600;
+  }
+  .sv-rt__btn:hover:not(:disabled) { background: var(--sg-row-hover-bg, #eef2f7); }
+  .sv-rt__btn.is-on { background: color-mix(in srgb, var(--_accent) 16%, transparent); color: var(--_accent); }
+  .sv-rt__btn[data-tool='italic'] { font-style: italic; }
+  .sv-rt__btn[data-tool='underline'] { text-decoration: underline; }
+  .sv-rt__btn[data-tool='strike'] { text-decoration: line-through; }
+  .sv-rt__btn[data-tool='alignRight'] { transform: scaleX(-1); }
+  .sv-rt__sep { width: 1px; height: 18px; background: var(--sg-border, #e2e8f0); margin: 0 4px; }
+  .sv-rt__body { padding: 10px 12px; outline: none; overflow: auto; font-size: 14px; line-height: 1.6; }
+  .sv-rt__body.is-empty::before { content: attr(data-placeholder); color: var(--sg-muted, #94a3b8); pointer-events: none; }
+  .sv-rt__body :global(h1) { font-size: 1.5em; font-weight: 700; margin: 0.4em 0; }
+  .sv-rt__body :global(h2) { font-size: 1.25em; font-weight: 700; margin: 0.4em 0; }
+  .sv-rt__body :global(h3) { font-size: 1.1em; font-weight: 650; margin: 0.4em 0; }
+  .sv-rt__body :global(blockquote) { margin: 0.4em 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--sg-border, #cbd5e1); color: var(--sg-muted, #64748b); }
+  .sv-rt__body :global(pre) { margin: 0.4em 0; padding: 10px 12px; border-radius: 8px; background: var(--sg-row-hover-bg, #f1f5f9); font: 12.5px/1.6 ui-monospace, monospace; overflow-x: auto; }
+  .sv-rt__body :global(a) { color: var(--_accent); }
+  .sv-rt__body :global(ul), .sv-rt__body :global(ol) { margin: 0.4em 0; padding-inline-start: 24px; }
+</style>

package/src/SvRowGroupPanel.svelte

@@ -0,0 +1,147 @@
+<!--
+  A row-group panel (like the "drag columns to group" bar in enterprise grids).
+  Shows the current group-by columns as chips you can remove or drag to reorder,
+  plus a "+ Group by" menu to add one. It is also a drop target: a column drag
+  that carries `text/sv-column` (its column id) adds that column. Wire `onChange`
+  to a server group model's `setGroupBy`, or to client grouping.
+
+      <SvRowGroupPanel
+        columns={[{ id: 'region', label: 'Region' }, { id: 'country', label: 'Country' }]}
+        groupBy={view.groupBy}
+        onChange={(g) => ctl.setGroupBy(g)}
+      />
+-->
+<script lang="ts">
+  type Col = { id: string; label: string }
+  type Props = {
+    /** Columns that can be grouped on. */
+    columns: Col[]
+    /** Current group-by column ids, outer to inner. */
+    groupBy: string[]
+    /** Called with the new group-by order. */
+    onChange: (groupBy: string[]) => void
+    /** Text shown when nothing is grouped. */
+    placeholder?: string
+  }
+  let { columns, groupBy, onChange, placeholder = 'Drag a column here to group by it' }: Props = $props()
+
+  const labelOf = (id: string) => columns.find((c) => c.id === id)?.label ?? id
+  const available = $derived(columns.filter((c) => !groupBy.includes(c.id)))
+
+  let dragIndex = $state<number | null>(null)
+
+  function remove(id: string) {
+    onChange(groupBy.filter((g) => g !== id))
+  }
+  function add(id: string) {
+    if (id && !groupBy.includes(id)) onChange([...groupBy, id])
+  }
+  function reorder(to: number) {
+    if (dragIndex === null || dragIndex === to) return
+    const next = [...groupBy]
+    const [moved] = next.splice(dragIndex, 1)
+    next.splice(to, 0, moved!)
+    dragIndex = null
+    onChange(next)
+  }
+  function onPanelDrop(e: DragEvent) {
+    const id = e.dataTransfer?.getData('text/sv-column')
+    if (id) add(id)
+  }
+</script>
+
+<div
+  class="sv-rowgroup-panel"
+  role="group"
+  aria-label="Row groups"
+  ondragover={(e) => e.preventDefault()}
+  ondrop={onPanelDrop}
+>
+  <span class="sv-rgp-label" aria-hidden="true">Group by:</span>
+  {#if groupBy.length === 0}
+    <span class="sv-rgp-empty">{placeholder}</span>
+  {:else}
+    {#each groupBy as id, i (id)}
+      {#if i > 0}<span class="sv-rgp-sep" aria-hidden="true">›</span>{/if}
+      <span
+        class="sv-rgp-chip"
+        class:sv-rgp-chip-drag={dragIndex === i}
+        draggable="true"
+        ondragstart={() => (dragIndex = i)}
+        ondragend={() => (dragIndex = null)}
+        ondragover={(e) => e.preventDefault()}
+        ondrop={() => reorder(i)}
+      >
+        <span class="sv-rgp-grip" aria-hidden="true">⠿</span>
+        {labelOf(id)}
+        <button type="button" class="sv-rgp-x" onclick={() => remove(id)} aria-label={`Stop grouping by ${labelOf(id)}`}>×</button>
+      </span>
+    {/each}
+  {/if}
+  {#if available.length}
+    <select
+      class="sv-rgp-add"
+      aria-label="Add a group column"
+      onchange={(e) => { add(e.currentTarget.value); e.currentTarget.value = '' }}
+    >
+      <option value="">+ Group by</option>
+      {#each available as c (c.id)}<option value={c.id}>{c.label}</option>{/each}
+    </select>
+  {/if}
+</div>
+
+<style>
+  .sv-rowgroup-panel {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 8px 10px;
+    border: 1px dashed var(--sg-border, #cbd5e1);
+    border-radius: 10px;
+    background: var(--sg-header-bg, #f8fafc);
+    font-size: 13px;
+  }
+  .sv-rgp-label { color: var(--sg-muted, #64748b); font-weight: 600; }
+  .sv-rgp-empty { color: var(--sg-muted, #94a3b8); font-style: italic; }
+  .sv-rgp-sep { color: var(--sg-muted, #94a3b8); }
+  .sv-rgp-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 6px 3px 8px;
+    border-radius: 999px;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #e2e8f0);
+    cursor: grab;
+    user-select: none;
+    font-weight: 600;
+  }
+  .sv-rgp-chip-drag { opacity: 0.5; }
+  .sv-rgp-grip { color: var(--sg-muted, #94a3b8); cursor: grab; }
+  .sv-rgp-x {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border: 0;
+    border-radius: 50%;
+    background: none;
+    color: var(--sg-muted, #64748b);
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1;
+  }
+  .sv-rgp-x:hover { background: var(--sg-header-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+  .sv-rgp-add {
+    font: inherit;
+    font-size: 13px;
+    padding: 4px 8px;
+    border-radius: 8px;
+    border: 1px solid var(--sg-border, #e2e8f0);
+    background: var(--sg-bg, #fff);
+    color: var(--sg-accent, #2563eb);
+    cursor: pointer;
+  }
+</style>

package/src/SvScrollArea.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  /**
+   * SvScrollArea - a scroll container with the kit's themed custom scrollbars
+   * (Firefox `scrollbar-color` + Chromium `::-webkit-scrollbar`) consuming the
+   * `--sg-scrollbar-*` tokens, so any panel matches the grid/demos without
+   * hand-rolling scrollbar CSS. The fallbacks derive from `--sg-fg` so it also
+   * adapts to light/dark when no preset defines the tokens.
+   *
+   * ```svelte
+   * <SvScrollArea maxHeight="240px">…long content…</SvScrollArea>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    maxHeight?: string
+    height?: string
+    /** Scroll horizontally instead of vertically. */
+    horizontal?: boolean
+    children?: Snippet
+  }
+
+  let { maxHeight, height, horizontal = false, children }: Props = $props()
+</script>
+
+<div class="sv-scroll" class:is-x={horizontal} style:max-height={maxHeight} style:height={height}>
+  {@render children?.()}
+</div>
+
+<style>
+  .sv-scroll {
+    overflow: auto; overscroll-behavior: contain; min-height: 0;
+    scrollbar-width: thin;
+    scrollbar-color: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #0f172a) 26%, transparent)) var(--sg-scrollbar-bg, transparent);
+  }
+  .sv-scroll.is-x { overflow: auto hidden; }
+  .sv-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
+  .sv-scroll::-webkit-scrollbar-track {
+    background: var(--sg-scrollbar-bg, transparent);
+    box-shadow: inset 1px 0 0 0 var(--sg-scrollbar-border, transparent);
+  }
+  .sv-scroll::-webkit-scrollbar-thumb {
+    background: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #0f172a) 26%, transparent));
+    border-radius: var(--sg-scrollbar-thumb-radius, 6px);
+    border: 3px solid transparent; background-clip: padding-box;
+  }
+  .sv-scroll::-webkit-scrollbar-thumb:hover { background: var(--sg-scrollbar-thumb-hover, color-mix(in srgb, var(--sg-fg, #0f172a) 38%, transparent)); }
+  .sv-scroll::-webkit-scrollbar-thumb:active { background: var(--sg-scrollbar-thumb-active, color-mix(in srgb, var(--sg-fg, #0f172a) 50%, transparent)); }
+  .sv-scroll::-webkit-scrollbar-corner { background: var(--sg-scrollbar-bg, transparent); }
+</style>

package/src/SvSkeleton.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  /**
+   * SvSkeleton - a shimmering loading placeholder. Use it while data is in
+   * flight; it respects `prefers-reduced-motion` (falls back to a static tint).
+   * Parity: Smart skeleton / loading indicators.
+   *
+   * ```svelte
+   * <SvSkeleton variant="text" lines={3} />
+   * <SvSkeleton variant="circle" width="40px" height="40px" />
+   * ```
+   */
+  type Props = {
+    variant?: 'text' | 'rect' | 'circle'
+    /** Any CSS length. Defaults suit the variant. */
+    width?: string
+    height?: string
+    /** Corner radius (rect/text). */
+    radius?: string
+    /** Number of text lines (variant="text" only). The last line is shorter. */
+    lines?: number
+    /** Turn the shimmer off (static tint only). */
+    animated?: boolean
+  }
+
+  let { variant = 'text', width, height, radius, lines = 1, animated = true }: Props = $props()
+
+  const isText = $derived(variant === 'text')
+  const rowCount = $derived(isText ? Math.max(1, lines) : 1)
+</script>
+
+<div class="sv-skel" role="status" aria-busy="true" aria-live="polite">
+  <span class="sv-skel__sr">Loading</span>
+  {#each Array(rowCount) as _, i (i)}
+    <span
+      class="sv-skel__box sv-skel__box--{variant}"
+      class:is-animated={animated}
+      class:is-last={isText && i === rowCount - 1 && rowCount > 1}
+      style:width={width}
+      style:height={height}
+      style:border-radius={variant === 'circle' ? '50%' : radius}
+      aria-hidden="true"
+    ></span>
+  {/each}
+</div>
+
+<style>
+  .sv-skel { display: flex; flex-direction: column; gap: 8px; }
+  .sv-skel__sr {
+    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
+    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+  }
+  .sv-skel__box {
+    display: block;
+    background: var(--sg-skeleton-bg, var(--sg-row-hover-bg, #e2e8f0));
+    border-radius: var(--sg-radius, 8px);
+  }
+  .sv-skel__box--text { width: 100%; height: 0.85em; }
+  .sv-skel__box--rect { width: 100%; height: 120px; }
+  .sv-skel__box--circle { width: 40px; height: 40px; border-radius: 50%; }
+  .sv-skel__box.is-last { width: 60%; }
+
+  .sv-skel__box.is-animated {
+    background: linear-gradient(
+      90deg,
+      var(--sg-skeleton-bg, var(--sg-row-hover-bg, #e2e8f0)) 25%,
+      color-mix(in srgb, var(--sg-skeleton-bg, var(--sg-row-hover-bg, #e2e8f0)) 55%, var(--sg-bg, #fff)) 37%,
+      var(--sg-skeleton-bg, var(--sg-row-hover-bg, #e2e8f0)) 63%
+    );
+    background-size: 400% 100%;
+    animation: sv-skel-shimmer 1.4s ease-in-out infinite;
+  }
+  @keyframes sv-skel-shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
+  @media (prefers-reduced-motion: reduce) {
+    .sv-skel__box.is-animated { animation: none; background: var(--sg-skeleton-bg, var(--sg-row-hover-bg, #e2e8f0)); }
+  }
+</style>