@svgrid/grid 1.2.33 → 2.0.0

package/src/SvAutoComplete.svelte

@@ -7,24 +7,43 @@
    * One styled renderer over the headless `createAutocomplete` core; only
    * portal/measure render concerns live here.
    */
-  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
   import { type ListOption } from './list-option'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
   import { createAutocomplete } from './createAutocomplete.svelte'
 
-  type Props = {
+  type Props = SvEditorProps & {
     value?: string
     onChange?: (value: string) => void
     /** Suggestions - strings or {value,label} (label is shown, value inserted). */
     suggestions?: ReadonlyArray<string | ListOption>
     minChars?: number
     placeholder?: string
-    disabled?: boolean
-    name?: string
-    size?: 'sm' | 'md' | 'lg'
-    ariaLabel?: string
   }
 
-  let { value = '', onChange, suggestions = [], minChars = 1, placeholder, disabled = false, name, size = 'md', ariaLabel }: Props = $props()
+  let {
+    value = '',
+    onChange,
+    suggestions = [],
+    minChars = 1,
+    placeholder,
+    disabled = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-ac')
+  const uid = $derived(id ?? autoId)
 
   let fieldEl = $state<HTMLInputElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
@@ -38,6 +57,11 @@
     disabled: () => disabled,
     ariaLabel: () => ariaLabel,
     focusInput: () => fieldEl?.focus(),
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 
   function updatePos() {
@@ -50,22 +74,25 @@
     updatePos()
     const rp = () => updatePos()
     window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
-    const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (fieldEl?.contains(t) || panelEl?.contains(t))) return; ac.close() }
-    document.addEventListener('pointerdown', od, true)
-    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); document.removeEventListener('pointerdown', od, true) }
+    const layer = createDismissableLayer({ element: () => [fieldEl, panelEl], onDismiss: () => ac.close(), closeOnEscape: false })
+    layer.activate()
+    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); layer.release() }
   })
 </script>
 
-<input
-  bind:this={fieldEl}
-  class="sv-ac sv-ac--{size}"
-  type="text"
-  {placeholder}
-  {...ac.inputProps()}
-/>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <input
+    bind:this={fieldEl}
+    class="sv-ac sv-ac--{size}"
+    class:is-invalid={invalid}
+    type="text"
+    {placeholder}
+    {...ac.inputProps()}
+  />
+</SvField>
 
 {#if ac.open}
-  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} {...ac.listboxProps()}>
+  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} {...ac.listboxProps()}>
     {#each ac.filtered as opt, i (opt.value)}
       <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
       <div class="sv-ddl__opt" class:is-active={ac.isActive(i)} {...ac.optionProps(i)}>{opt.label}</div>
@@ -86,4 +113,6 @@
   .sv-ac--md { height: 34px; font-size: 13px; }
   .sv-ac--lg { height: 40px; font-size: 15px; }
   .sv-ac:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-ac.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-ac.is-invalid:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
 </style>

package/src/SvAvatar.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  /**
+   * SvAvatar - a user/entity avatar: an image with an initials + colour-hash
+   * fallback (used when there is no `src` or the image fails to load), plus an
+   * optional presence status dot. Parity: Smart avatar.
+   *
+   * ```svelte
+   * <SvAvatar name="Ada Lovelace" src="/ada.jpg" status="online" />
+   * ```
+   */
+  import { avatarInitials, avatarColorHue } from './avatar'
+
+  type Props = {
+    name?: string
+    src?: string
+    alt?: string
+    /** Preset (sm 28 / md 36 / lg 48) or an explicit pixel size. */
+    size?: 'sm' | 'md' | 'lg' | number
+    shape?: 'circle' | 'square'
+    status?: 'online' | 'offline' | 'busy' | 'away'
+    /** Override the hash-derived fallback colour (any CSS colour). */
+    color?: string
+  }
+
+  let { name = '', src, alt, size = 'md', shape = 'circle', status, color }: Props = $props()
+
+  const px = $derived(typeof size === 'number' ? size : size === 'sm' ? 28 : size === 'lg' ? 48 : 36)
+  const initials = $derived(avatarInitials(name))
+  const bg = $derived(color ?? `hsl(${avatarColorHue(name || '?')} 62% 45%)`)
+  // Fall back to initials when the image errors.
+  let broken = $state(false)
+  const showImg = $derived(!!src && !broken)
+</script>
+
+<span
+  class="sv-avatar sv-avatar--{shape}"
+  style:width={`${px}px`}
+  style:height={`${px}px`}
+  style:font-size={`${Math.round(px * 0.4)}px`}
+  style:background={showImg ? undefined : bg}
+  role="img"
+  aria-label={alt ?? (name || 'avatar')}
+  title={name || undefined}
+>
+  {#if showImg}
+    <img class="sv-avatar__img" src={src} alt={alt ?? name} onerror={() => (broken = true)} />
+  {:else if initials}
+    <span class="sv-avatar__initials" aria-hidden="true">{initials}</span>
+  {:else}
+    <svg class="sv-avatar__ph" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.5-8 5.5V22h16v-2.5C20 16.5 16.4 14 12 14Z" /></svg>
+  {/if}
+  {#if status}<span class="sv-avatar__status is-{status}" aria-hidden="true"></span>{/if}
+</span>
+
+<style>
+  .sv-avatar {
+    position: relative; display: inline-grid; place-items: center; overflow: visible;
+    color: #fff; font-weight: 600; line-height: 1; user-select: none; flex: none;
+    vertical-align: middle;
+  }
+  .sv-avatar--circle { border-radius: 50%; }
+  .sv-avatar--square { border-radius: 22%; }
+  .sv-avatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
+  .sv-avatar--circle .sv-avatar__img, .sv-avatar--circle { }
+  .sv-avatar__initials { letter-spacing: 0.02em; }
+  .sv-avatar__ph { width: 62%; height: 62%; opacity: 0.9; }
+  .sv-avatar__status {
+    position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: 8px; min-height: 8px;
+    border-radius: 50%; border: 2px solid var(--sg-bg, #fff);
+  }
+  .sv-avatar__status.is-online { background: var(--sg-success, #16a34a); }
+  .sv-avatar__status.is-offline { background: var(--sg-muted, #94a3b8); }
+  .sv-avatar__status.is-busy { background: var(--sg-danger, #dc2626); }
+  .sv-avatar__status.is-away { background: var(--sg-warning, #f59e0b); }
+</style>

package/src/SvAvatarGroup.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  /**
+   * SvAvatarGroup - overlapping stacked avatars with a "+N" overflow pill, for
+   * "assigned to" / "members" rows. Each entry is a set of SvAvatar props.
+   *
+   * ```svelte
+   * <SvAvatarGroup max={3} avatars={[{ name: 'Ada' }, { name: 'Alan' }, { name: 'Grace' }, { name: 'Ken' }]} />
+   * ```
+   */
+  import SvAvatar from './SvAvatar.svelte'
+
+  type AvatarProps = { name?: string; src?: string; alt?: string; color?: string }
+  type Size = 'sm' | 'md' | 'lg' | number
+
+  type Props = {
+    avatars: ReadonlyArray<AvatarProps>
+    /** Max avatars shown before collapsing to "+N". */
+    max?: number
+    size?: Size
+  }
+
+  let { avatars, max = 4, size = 'md' }: Props = $props()
+
+  const shown = $derived(avatars.slice(0, max))
+  const overflow = $derived(Math.max(0, avatars.length - max))
+  const px = $derived(typeof size === 'number' ? size : size === 'sm' ? 28 : size === 'lg' ? 48 : 36)
+  const overlap = $derived(Math.round(px * 0.28))
+</script>
+
+<div class="sv-avgroup" role="group" style:--ov={`${overlap}px`}>
+  {#each shown as a, i (i)}
+    <span class="sv-avgroup__it" style:z-index={shown.length - i}><SvAvatar {...a} {size} /></span>
+  {/each}
+  {#if overflow}
+    <span class="sv-avgroup__more" style:width={`${px}px`} style:height={`${px}px`} style:font-size={`${Math.round(px * 0.36)}px`}>+{overflow}</span>
+  {/if}
+</div>
+
+<style>
+  .sv-avgroup { display: inline-flex; align-items: center; }
+  .sv-avgroup__it { display: inline-flex; margin-inline-start: calc(-1 * var(--ov, 10px)); border-radius: 50%; box-shadow: 0 0 0 2px var(--sg-bg, #fff); }
+  .sv-avgroup__it:first-child { margin-inline-start: 0; }
+  .sv-avgroup__more {
+    display: grid; place-items: center; margin-inline-start: calc(-1 * var(--ov, 10px)); border-radius: 50%;
+    background: var(--sg-row-hover-bg, #e2e8f0); color: var(--sg-muted, #64748b); font-weight: 650;
+    box-shadow: 0 0 0 2px var(--sg-bg, #fff);
+  }
+</style>

package/src/SvBadge.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  /**
+   * SvBadge - a small status pill / count label. Themed via `--sg-*` tokens with
+   * soft `color-mix` tints so it sits well on light and dark. Parity: Smart badge.
+   *
+   * ```svelte
+   * <SvBadge variant="success">Active</SvBadge>
+   * <SvBadge variant="danger" dot /> 3 failed
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Variant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'
+
+  type Props = {
+    variant?: Variant
+    size?: 'sm' | 'md'
+    /** Rounded-pill shape (default) vs a softer rounded rect. */
+    pill?: boolean
+    /** Show a leading status dot instead of / before content. */
+    dot?: boolean
+    children?: Snippet
+  }
+
+  let { variant = 'neutral', size = 'md', pill = true, dot = false, children }: Props = $props()
+</script>
+
+<span class="sv-badge sv-badge--{variant} sv-badge--{size}" class:is-pill={pill} class:has-dot={dot}>
+  {#if dot}<span class="sv-badge__dot" aria-hidden="true"></span>{/if}
+  {@render children?.()}
+</span>
+
+<style>
+  .sv-badge {
+    --_c: var(--sg-muted, #64748b);
+    display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box;
+    font-weight: 600; line-height: 1; white-space: nowrap;
+    color: var(--_c);
+    background: color-mix(in srgb, var(--_c) 14%, transparent);
+    border: 1px solid color-mix(in srgb, var(--_c) 26%, transparent);
+    border-radius: 6px;
+  }
+  .sv-badge.is-pill { border-radius: 999px; }
+  .sv-badge--sm { font-size: 10.5px; padding: 2px 7px; }
+  .sv-badge--md { font-size: 12px; padding: 3px 9px; }
+  .sv-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--_c); }
+
+  .sv-badge--neutral { --_c: var(--sg-muted, #64748b); }
+  .sv-badge--accent { --_c: var(--sg-accent, #2563eb); }
+  .sv-badge--success { --_c: var(--sg-success, #16a34a); }
+  .sv-badge--warning { --_c: var(--sg-warning, #d97706); }
+  .sv-badge--danger { --_c: var(--sg-danger, #dc2626); }
+  .sv-badge--info { --_c: var(--sg-info, #0891b2); }
+</style>

package/src/SvBreadcrumb.svelte

@@ -0,0 +1,88 @@
+<script lang="ts" module>
+  export type { BreadcrumbItem } from './ui-app.types'
+</script>
+
+<script lang="ts">
+  /**
+   * SvBreadcrumb - a navigation trail. Each item is a link (`href`), a button
+   * (`onClick`), or plain text; the last item is the current page and is never
+   * interactive. Long trails collapse the middle to an expandable ellipsis.
+   * Parity: Smart breadcrumb.
+   *
+   * ```svelte
+   * <SvBreadcrumb items={[{label:'Home', href:'/'}, {label:'Orders', href:'/orders'}, {label:'#1024'}]} />
+   * ```
+   */
+  import type { BreadcrumbItem } from './ui-app.types'
+
+  type Props = {
+    items: ReadonlyArray<BreadcrumbItem>
+    /** Separator between crumbs. Default a chevron. */
+    separator?: string
+    /** Collapse the middle when there are more than this many crumbs. */
+    maxItems?: number
+    ariaLabel?: string
+  }
+
+  let { items, separator = '/', maxItems, ariaLabel = 'Breadcrumb' }: Props = $props()
+
+  let expanded = $state(false)
+
+  // When collapsed, show the first crumb, an ellipsis, and the last two.
+  const collapsed = $derived(!!maxItems && !expanded && items.length > maxItems)
+  type Display = { item: BreadcrumbItem; index: number } | 'ellipsis'
+  const display = $derived<Display[]>(
+    collapsed
+      ? [
+          { item: items[0]!, index: 0 },
+          'ellipsis',
+          ...items.slice(-2).map((item, i) => ({ item, index: items.length - 2 + i })),
+        ]
+      : items.map((item, index) => ({ item, index })),
+  )
+</script>
+
+<nav class="sv-bc" aria-label={ariaLabel}>
+  <ol class="sv-bc__list">
+    {#each display as entry, i (entry === 'ellipsis' ? `e${i}` : entry.index)}
+      {#if i > 0}<li class="sv-bc__sep" aria-hidden="true">{separator}</li>{/if}
+      {#if entry === 'ellipsis'}
+        <li>
+          <button type="button" class="sv-bc__ellipsis" aria-label="Show collapsed crumbs" onclick={() => (expanded = true)}>&hellip;</button>
+        </li>
+      {:else}
+        {@const isLast = entry.index === items.length - 1}
+        <li class="sv-bc__item" class:is-current={isLast}>
+          {#if isLast}
+            <span aria-current="page">{#if entry.item.icon}<span class="sv-bc__icon" aria-hidden="true">{entry.item.icon}</span>{/if}{entry.item.label}</span>
+          {:else if entry.item.href}
+            <a class="sv-bc__link" href={entry.item.href}>{#if entry.item.icon}<span class="sv-bc__icon" aria-hidden="true">{entry.item.icon}</span>{/if}{entry.item.label}</a>
+          {:else if entry.item.onClick}
+            <button type="button" class="sv-bc__link sv-bc__btn" onclick={entry.item.onClick}>{#if entry.item.icon}<span class="sv-bc__icon" aria-hidden="true">{entry.item.icon}</span>{/if}{entry.item.label}</button>
+          {:else}
+            <span>{#if entry.item.icon}<span class="sv-bc__icon" aria-hidden="true">{entry.item.icon}</span>{/if}{entry.item.label}</span>
+          {/if}
+        </li>
+      {/if}
+    {/each}
+  </ol>
+</nav>
+
+<style>
+  .sv-bc__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
+  .sv-bc__sep { color: var(--sg-muted, #94a3b8); user-select: none; }
+  .sv-bc__item { color: var(--sg-muted, #64748b); }
+  .sv-bc__item.is-current { color: var(--sg-fg, #0f172a); font-weight: 600; }
+  .sv-bc__icon { margin-inline-end: 4px; }
+  .sv-bc__link {
+    color: var(--sg-muted, #64748b); text-decoration: none; border-radius: 4px;
+    display: inline-flex; align-items: center;
+  }
+  .sv-bc__link:hover { color: var(--sg-accent, #2563eb); text-decoration: underline; }
+  .sv-bc__btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
+  .sv-bc__ellipsis {
+    background: var(--sg-row-hover-bg, #f1f5f9); border: 0; border-radius: 5px; cursor: pointer;
+    color: var(--sg-muted, #64748b); padding: 0 7px; height: 20px; line-height: 1; font: inherit;
+  }
+  .sv-bc__ellipsis:hover { color: var(--sg-fg, #0f172a); }
+</style>

package/src/SvButtonGroup.svelte

@@ -0,0 +1,121 @@
+<script lang="ts" module>
+  export type { ButtonGroupItem, ButtonGroupMode, ButtonGroupValue } from './createButtonGroup.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvButtonGroup - a segmented button bar with single-select (radio semantics),
+   * multi-select (toggle set) or plain action buttons. Parity: Smart
+   * `smart-button-group`. Controlled via `value` + `onChange`; roving tabindex +
+   * arrow-key navigation come from the headless `createButtonGroup` core.
+   *
+   * Part of the editor kit: carries the shared contract (label, hint, error
+   * validation, size, `dir`/RTL) via `<SvField>`.
+   */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { createButtonGroup, type ButtonGroupItem, type ButtonGroupMode, type ButtonGroupValue } from './createButtonGroup.svelte'
+
+  type Props = SvEditorProps & {
+    items: ReadonlyArray<ButtonGroupItem>
+    value?: ButtonGroupValue
+    onChange?: (value: string | number | Array<string | number>) => void
+    /** 'single' (radio), 'multiple' (toggle set), or 'none' (action buttons). */
+    mode?: ButtonGroupMode
+    orientation?: 'horizontal' | 'vertical'
+    /** 'solid' segmented fill (default) or 'outline' pills. */
+    variant?: 'solid' | 'outline'
+  }
+
+  let {
+    items,
+    value = null,
+    onChange,
+    mode = 'single',
+    orientation = 'horizontal',
+    variant = 'solid',
+    disabled = false,
+    size = 'md',
+    name,
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-bg')
+  const uid = $derived(id ?? autoId)
+
+  const g = createButtonGroup({
+    items: () => items,
+    value: () => value,
+    onChange: (v) => onChange?.(v),
+    mode: () => mode,
+    orientation: () => orientation,
+    disabled: () => disabled,
+    dir: () => dir,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+    ariaLabel: () => ariaLabel ?? label,
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div
+    class="sv-bg sv-bg--{orientation} sv-bg--{variant} sv-bg--{size}"
+    class:is-disabled={disabled}
+    class:is-invalid={invalid}
+    {...g.rootProps()}
+  >
+    {#each items as item, i (item.value)}
+      <button
+        class="sv-bg__btn"
+        class:is-selected={g.isSelected(item.value)}
+        {...g.buttonProps(i)}
+      >{item.label ?? item.value}</button>
+    {/each}
+    {#if name}
+      {#each g.selectedValues as v (v)}<input type="hidden" {name} value={v} />{/each}
+    {/if}
+  </div>
+</SvField>
+
+<style>
+  .sv-bg {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-input-border, var(--sg-border, #cbd5e1));
+    --_radius: var(--sg-radius, 8px);
+    display: inline-flex; background: var(--sg-input-bg, #fff);
+    border: 1px solid var(--_border); border-radius: var(--_radius); overflow: hidden;
+  }
+  .sv-bg--vertical { flex-direction: column; }
+  .sv-bg.is-disabled { opacity: 0.6; }
+  .sv-bg.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-bg:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-bg.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+
+  .sv-bg__btn {
+    background: none; border: 0; font: inherit; font-weight: 600; color: var(--sg-fg, #0f172a);
+    cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s;
+  }
+  .sv-bg--sm .sv-bg__btn { padding: 5px 11px; font-size: 12px; }
+  .sv-bg--md .sv-bg__btn { padding: 7px 14px; font-size: 13px; }
+  .sv-bg--lg .sv-bg__btn { padding: 10px 18px; font-size: 15px; }
+  /* Segment dividers use a logical border so the bar mirrors under RTL. */
+  .sv-bg--horizontal .sv-bg__btn + .sv-bg__btn { border-inline-start: 1px solid var(--_border); }
+  .sv-bg--vertical .sv-bg__btn + .sv-bg__btn { border-top: 1px solid var(--_border); }
+  .sv-bg__btn:hover:not(:disabled):not(.is-selected) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-bg__btn:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: -2px; }
+  .sv-bg__btn:disabled { opacity: 0.45; cursor: not-allowed; }
+
+  .sv-bg--solid .sv-bg__btn.is-selected { background: var(--_accent); color: var(--sg-on-accent, #fff); }
+  .sv-bg--solid .sv-bg__btn.is-selected + .sv-bg__btn, .sv-bg--solid .sv-bg__btn.is-selected { border-color: var(--_accent); }
+  .sv-bg--outline .sv-bg__btn.is-selected { color: var(--_accent); background: color-mix(in srgb, var(--_accent) 12%, transparent); }
+</style>

package/src/SvButtonGroup.test.ts

@@ -0,0 +1,72 @@
+/**
+ * Component tests for SvButtonGroup: single-select radio semantics, multi-select
+ * toggle set, roving tabindex, and the shared editor contract wiring.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvButtonGroup from './SvButtonGroup.svelte'
+
+function mountBg(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvButtonGroup, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+const items = [
+  { value: 'day', label: 'Day' },
+  { value: 'week', label: 'Week' },
+  { value: 'month', label: 'Month' },
+]
+
+describe('SvButtonGroup', () => {
+  it('single mode uses radiogroup/radio semantics and checks the value', () => {
+    const { target, destroy } = mountBg({ items, value: 'week', mode: 'single' })
+    try {
+      const group = target.querySelector<HTMLElement>('.sv-bg')!
+      expect(group.getAttribute('role')).toBe('radiogroup')
+      const btns = [...target.querySelectorAll<HTMLButtonElement>('.sv-bg__btn')]
+      expect(btns.map((b) => b.getAttribute('role'))).toEqual(['radio', 'radio', 'radio'])
+      expect(btns[1].getAttribute('aria-checked')).toBe('true')
+      // Roving tabindex: only the checked/active button is tabbable.
+      expect(btns[1].tabIndex).toBe(0)
+      expect(btns[0].tabIndex).toBe(-1)
+    } finally { destroy() }
+  })
+
+  it('single mode emits a scalar on click', () => {
+    let got: unknown
+    const { target, destroy } = mountBg({ items, value: 'day', mode: 'single', onChange: (v: unknown) => (got = v) })
+    try {
+      const btns = target.querySelectorAll<HTMLButtonElement>('.sv-bg__btn')
+      btns[2].click()
+      flushSync()
+      expect(got).toBe('month')
+    } finally { destroy() }
+  })
+
+  it('multiple mode toggles a set and uses aria-pressed', () => {
+    let got: unknown
+    const { target, destroy } = mountBg({ items, value: ['day'], mode: 'multiple', onChange: (v: unknown) => (got = v) })
+    try {
+      const group = target.querySelector<HTMLElement>('.sv-bg')!
+      expect(group.getAttribute('role')).toBe('group')
+      const btns = target.querySelectorAll<HTMLButtonElement>('.sv-bg__btn')
+      expect(btns[0].getAttribute('aria-pressed')).toBe('true')
+      btns[1].click()
+      flushSync()
+      expect(got).toEqual(['day', 'week'])
+    } finally { destroy() }
+  })
+
+  it('wires label + aria-invalid via the editor contract', () => {
+    const { target, destroy } = mountBg({ items, value: null, mode: 'single', label: 'View', invalid: true, error: 'Pick one' })
+    try {
+      const group = target.querySelector<HTMLElement>('.sv-bg')!
+      expect(group.getAttribute('aria-invalid')).toBe('true')
+      expect(target.querySelector('.sv-field__label')!.textContent).toContain('View')
+      expect(target.querySelector('.sv-field__error')!.textContent).toBe('Pick one')
+    } finally { destroy() }
+  })
+})