npm - @svgrid/grid - Versions diffs - 2.2.32 → 2.4.0 - Mend

@svgrid/grid 2.2.32 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (405) hide show

package/src/SvPopover.svelte CHANGED Viewed

@@ -1,197 +1,197 @@
-<script lang="ts">
-  /**
-   * SvPopover - a floating panel anchored to a trigger, portalled to <body> so it
-   * escapes any `overflow:hidden` ancestor. Open on click (default), hover, or
-   * manually via `open`. Positioned by the shared engine (`computePosition`): full
-   * placement matrix + flip + shift + an optional arrow, kept in sync with
-   * `autoUpdate`. Closes on outside-click / Escape via the dismissable layer
-   * stack, and animates in. The panel is hoverable (interactive) under the hover
-   * trigger. Parity: Smart popover.
-   *
-   * ```svelte
-   * <SvPopover placement="bottom" arrow>
-   *   {#snippet anchor()}<button>Open</button>{/snippet}
-   *   <p>Panel content</p>
-   * </SvPopover>
-   * ```
-   */
-  import type { Snippet } from 'svelte'
-  import { portalToBody, popIn } from './popover'
-  import { computePosition, autoUpdate, type Placement, type ComputePositionResult } from './positioning'
-  import { createDismissableLayer } from './a11y/dismissable'
-  type Props = {
-    /** Controlled open state (bindable). */
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-    /** How the anchor opens the panel. `manual` = only `open` drives it. */
-    trigger?: 'click' | 'hover' | 'manual'
-    /** Preferred placement (flips when there is no room). Default `bottom-start`. */
-    placement?: Placement
-    /** Main-axis gap between trigger and panel. Default 8 (room for the arrow). */
-    offset?: number
-    /** Render a pointer arrow toward the trigger. Default true. */
-    arrow?: boolean
-    /** Hover trigger: delay (ms) before opening. Default 0. */
-    openDelay?: number
-    /** Hover trigger: delay (ms) before closing after leave. Default 120. */
-    closeDelay?: number
-    /** Estimated panel height, used before the panel has been measured. */
-    estimatedHeight?: number
-    /** Force a minimum panel width (else it hugs its content). */
-    minWidth?: number
-    /** Close when clicking outside. Default true. */
-    closeOnOutsideClick?: boolean
-    ariaLabel?: string
-    /** The anchor element(s) that open the panel. */
-    anchor?: Snippet
-    /** Panel content. */
-    children?: Snippet
-  }
-  let {
-    open = $bindable(false),
-    onOpenChange,
-    trigger = 'click',
-    placement = 'bottom-start',
-    offset = 8,
-    arrow = true,
-    openDelay = 0,
-    closeDelay = 120,
-    estimatedHeight = 220,
-    minWidth,
-    closeOnOutsideClick = true,
-    ariaLabel,
-    anchor,
-    children,
-  }: Props = $props()
-  const ARROW = 10
-  let anchorEl = $state<HTMLSpanElement | null>(null)
-  let panelEl = $state<HTMLDivElement | null>(null)
-  let pos = $state<ComputePositionResult>({
-    x: 0, y: 0, placement, side: 'bottom', align: 'start', maxWidth: 0, maxHeight: 0,
-  })
-  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
-  function toggle() { setOpen(!open) }
-  function updatePos() {
-    if (!anchorEl) return
-    const r = anchorEl.getBoundingClientRect()
-    const f = panelEl?.getBoundingClientRect()
-    const floating = {
-      width: f?.width || minWidth || r.width,
-      height: f?.height || estimatedHeight,
-    }
-    pos = computePosition(
-      { x: r.left, y: r.top, width: r.width, height: r.height },
-      floating,
-      { placement, offset, padding: 8, minMainAxis: 96, arrow: arrow ? { size: ARROW } : undefined },
-    )
-  }
-  // Reposition whenever the trigger/panel resize or an ancestor scrolls, and wire
-  // Escape + outside-click dismissal via the shared layer stack (so a popover
-  // nested in a dialog closes top-first). Re-runs once `panelEl` mounts.
-  $effect(() => {
-    if (!open || !anchorEl || !panelEl) return
-    const stop = autoUpdate(anchorEl, panelEl, updatePos)
-    const layer = createDismissableLayer({
-      element: () => [anchorEl, panelEl],
-      onDismiss: () => setOpen(false),
-      closeOnOutside: closeOnOutsideClick,
-    })
-    layer.activate()
-    return () => { stop(); layer.release() }
-  })
-  let openTimer: ReturnType<typeof setTimeout> | undefined
-  let closeTimer: ReturnType<typeof setTimeout> | undefined
-  function onEnter() {
-    if (trigger !== 'hover') return
-    clearTimeout(closeTimer)
-    if (open) return
-    openTimer = setTimeout(() => setOpen(true), openDelay)
-  }
-  function onLeave() {
-    if (trigger !== 'hover') return
-    clearTimeout(openTimer)
-    closeTimer = setTimeout(() => setOpen(false), closeDelay)
-  }
-  /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
-   * anchor's own aria-label, else its trimmed text content. */
-  function anchorFallbackLabel(): string | undefined {
-    const label = anchorEl?.getAttribute('aria-label')
-    if (label) return label
-    return anchorEl?.textContent?.trim() || undefined
-  }
-</script>
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<span
-  bind:this={anchorEl}
-  class="sv-pop__anchor"
-  onclick={() => trigger === 'click' && toggle()}
-  onpointerenter={onEnter}
-  onpointerleave={onLeave}
-  onfocusin={onEnter}
-  onfocusout={onLeave}
->
-  {@render anchor?.()}
-</span>
-{#if open}
-  <div
-    bind:this={panelEl}
-    class="sv-pop__panel"
-    use:portalToBody
-    use:popIn={{ up: pos.side === 'top' }}
-    style:position="fixed"
-    style:top={`${pos.y}px`}
-    style:left={`${pos.x}px`}
-    style:min-width={minWidth ? `${minWidth}px` : undefined}
-    role="dialog"
-    aria-label={ariaLabel ?? anchorFallbackLabel()}
-    onpointerenter={onEnter}
-    onpointerleave={onLeave}
-    onfocusin={onEnter}
-    onfocusout={onLeave}
-  >
-    {#if arrow}
-      <span
-        class="sv-pop__arrow sv-pop__arrow--{pos.side}"
-        style:left={pos.arrow?.x != null ? `${pos.arrow.x}px` : undefined}
-        style:top={pos.arrow?.y != null ? `${pos.arrow.y}px` : undefined}
-      ></span>
-    {/if}
-    <div class="sv-pop__content" style:max-height={pos.maxHeight ? `${pos.maxHeight}px` : undefined}>
-      {@render children?.()}
-    </div>
-  </div>
-{/if}
-<style>
-  .sv-pop__anchor { display: inline-flex; }
-  :global(.sv-pop__panel) {
-    z-index: 2147483646; max-width: min(92vw, 360px);
-    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
-    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px; line-height: 1.55;
-  }
-  :global(.sv-pop__content) { padding: 12px 14px; overflow: auto; }
-  /* Arrow: a rotated square straddling the panel edge, two borders showing so it
-     reads as a continuation of the panel outline. Not clipped (sibling of the
-     scrollable content, panel itself has no overflow). */
-  :global(.sv-pop__arrow) {
-    position: absolute; width: 10px; height: 10px;
-    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
-    transform: rotate(45deg);
-  }
-  :global(.sv-pop__arrow--bottom) { top: -6px; border-right: 0; border-bottom: 0; }
-  :global(.sv-pop__arrow--top) { bottom: -6px; border-left: 0; border-top: 0; }
-  :global(.sv-pop__arrow--right) { left: -6px; border-top: 0; border-right: 0; }
-  :global(.sv-pop__arrow--left) { right: -6px; border-bottom: 0; border-left: 0; }
-</style>
+<script lang="ts">
+  /**
+   * SvPopover - a floating panel anchored to a trigger, portalled to <body> so it
+   * escapes any `overflow:hidden` ancestor. Open on click (default), hover, or
+   * manually via `open`. Positioned by the shared engine (`computePosition`): full
+   * placement matrix + flip + shift + an optional arrow, kept in sync with
+   * `autoUpdate`. Closes on outside-click / Escape via the dismissable layer
+   * stack, and animates in. The panel is hoverable (interactive) under the hover
+   * trigger. Parity: Smart popover.
+   *
+   * ```svelte
+   * <SvPopover placement="bottom" arrow>
+   *   {#snippet anchor()}<button>Open</button>{/snippet}
+   *   <p>Panel content</p>
+   * </SvPopover>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { portalToBody, popIn } from './popover'
+  import { computePosition, autoUpdate, type Placement, type ComputePositionResult } from './positioning'
+  import { createDismissableLayer } from './a11y/dismissable'
+  type Props = {
+    /** Controlled open state (bindable). */
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    /** How the anchor opens the panel. `manual` = only `open` drives it. */
+    trigger?: 'click' | 'hover' | 'manual'
+    /** Preferred placement (flips when there is no room). Default `bottom-start`. */
+    placement?: Placement
+    /** Main-axis gap between trigger and panel. Default 8 (room for the arrow). */
+    offset?: number
+    /** Render a pointer arrow toward the trigger. Default true. */
+    arrow?: boolean
+    /** Hover trigger: delay (ms) before opening. Default 0. */
+    openDelay?: number
+    /** Hover trigger: delay (ms) before closing after leave. Default 120. */
+    closeDelay?: number
+    /** Estimated panel height, used before the panel has been measured. */
+    estimatedHeight?: number
+    /** Force a minimum panel width (else it hugs its content). */
+    minWidth?: number
+    /** Close when clicking outside. Default true. */
+    closeOnOutsideClick?: boolean
+    ariaLabel?: string
+    /** The anchor element(s) that open the panel. */
+    anchor?: Snippet
+    /** Panel content. */
+    children?: Snippet
+  }
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    trigger = 'click',
+    placement = 'bottom-start',
+    offset = 8,
+    arrow = true,
+    openDelay = 0,
+    closeDelay = 120,
+    estimatedHeight = 220,
+    minWidth,
+    closeOnOutsideClick = true,
+    ariaLabel,
+    anchor,
+    children,
+  }: Props = $props()
+  const ARROW = 10
+  let anchorEl = $state<HTMLSpanElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let pos = $state<ComputePositionResult>({
+    x: 0, y: 0, placement, side: 'bottom', align: 'start', maxWidth: 0, maxHeight: 0,
+  })
+  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
+  function toggle() { setOpen(!open) }
+  function updatePos() {
+    if (!anchorEl) return
+    const r = anchorEl.getBoundingClientRect()
+    const f = panelEl?.getBoundingClientRect()
+    const floating = {
+      width: f?.width || minWidth || r.width,
+      height: f?.height || estimatedHeight,
+    }
+    pos = computePosition(
+      { x: r.left, y: r.top, width: r.width, height: r.height },
+      floating,
+      { placement, offset, padding: 8, minMainAxis: 96, arrow: arrow ? { size: ARROW } : undefined },
+    )
+  }
+  // Reposition whenever the trigger/panel resize or an ancestor scrolls, and wire
+  // Escape + outside-click dismissal via the shared layer stack (so a popover
+  // nested in a dialog closes top-first). Re-runs once `panelEl` mounts.
+  $effect(() => {
+    if (!open || !anchorEl || !panelEl) return
+    const stop = autoUpdate(anchorEl, panelEl, updatePos)
+    const layer = createDismissableLayer({
+      element: () => [anchorEl, panelEl],
+      onDismiss: () => setOpen(false),
+      closeOnOutside: closeOnOutsideClick,
+    })
+    layer.activate()
+    return () => { stop(); layer.release() }
+  })
+  let openTimer: ReturnType<typeof setTimeout> | undefined
+  let closeTimer: ReturnType<typeof setTimeout> | undefined
+  function onEnter() {
+    if (trigger !== 'hover') return
+    clearTimeout(closeTimer)
+    if (open) return
+    openTimer = setTimeout(() => setOpen(true), openDelay)
+  }
+  function onLeave() {
+    if (trigger !== 'hover') return
+    clearTimeout(openTimer)
+    closeTimer = setTimeout(() => setOpen(false), closeDelay)
+  }
+  /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
+   * anchor's own aria-label, else its trimmed text content. */
+  function anchorFallbackLabel(): string | undefined {
+    const label = anchorEl?.getAttribute('aria-label')
+    if (label) return label
+    return anchorEl?.textContent?.trim() || undefined
+  }
+</script>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+  bind:this={anchorEl}
+  class="sv-pop__anchor"
+  onclick={() => trigger === 'click' && toggle()}
+  onpointerenter={onEnter}
+  onpointerleave={onLeave}
+  onfocusin={onEnter}
+  onfocusout={onLeave}
+>
+  {@render anchor?.()}
+</span>
+{#if open}
+  <div
+    bind:this={panelEl}
+    class="sv-pop__panel"
+    use:portalToBody
+    use:popIn={{ up: pos.side === 'top' }}
+    style:position="fixed"
+    style:top={`${pos.y}px`}
+    style:left={`${pos.x}px`}
+    style:min-width={minWidth ? `${minWidth}px` : undefined}
+    role="dialog"
+    aria-label={ariaLabel ?? anchorFallbackLabel()}
+    onpointerenter={onEnter}
+    onpointerleave={onLeave}
+    onfocusin={onEnter}
+    onfocusout={onLeave}
+  >
+    {#if arrow}
+      <span
+        class="sv-pop__arrow sv-pop__arrow--{pos.side}"
+        style:left={pos.arrow?.x != null ? `${pos.arrow.x}px` : undefined}
+        style:top={pos.arrow?.y != null ? `${pos.arrow.y}px` : undefined}
+      ></span>
+    {/if}
+    <div class="sv-pop__content" style:max-height={pos.maxHeight ? `${pos.maxHeight}px` : undefined}>
+      {@render children?.()}
+    </div>
+  </div>
+{/if}
+<style>
+  .sv-pop__anchor { display: inline-flex; }
+  :global(.sv-pop__panel) {
+    z-index: 2147483646; max-width: min(92vw, 360px);
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
+    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px; line-height: 1.55;
+  }
+  :global(.sv-pop__content) { padding: 12px 14px; overflow: auto; }
+  /* Arrow: a rotated square straddling the panel edge, two borders showing so it
+     reads as a continuation of the panel outline. Not clipped (sibling of the
+     scrollable content, panel itself has no overflow). */
+  :global(.sv-pop__arrow) {
+    position: absolute; width: 10px; height: 10px;
+    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
+    transform: rotate(45deg);
+  }
+  :global(.sv-pop__arrow--bottom) { top: -6px; border-right: 0; border-bottom: 0; }
+  :global(.sv-pop__arrow--top) { bottom: -6px; border-left: 0; border-top: 0; }
+  :global(.sv-pop__arrow--right) { left: -6px; border-top: 0; border-right: 0; }
+  :global(.sv-pop__arrow--left) { right: -6px; border-bottom: 0; border-left: 0; }
+</style>

package/src/SvProgress.svelte CHANGED Viewed

@@ -1,116 +1,116 @@
-<script lang="ts">
-  /**
-   * SvProgress - a linear progress bar (WAI-ARIA `progressbar`). Determinate
-   * (value/max) or `indeterminate` (animated), with color intents, sizes, an
-   * optional label and an optional secondary `buffer` track. Theme-driven via
-   * `--sg-*`; respects prefers-reduced-motion. Parity: Smart progress bar.
-   *
-   * ```svelte
-   * <SvProgress value={64} showLabel />
-   * <SvProgress indeterminate color="success" />
-   * ```
-   */
-  type Props = {
-    /** Current value (0..max). Ignored when `indeterminate`. */
-    value?: number
-    max?: number
-    /** Unknown-duration animated bar. */
-    indeterminate?: boolean
-    /** Buffered/secondary value (e.g. streamed-ahead), 0..max. */
-    buffer?: number
-    color?: 'accent' | 'success' | 'warning' | 'danger'
-    size?: 'sm' | 'md' | 'lg'
-    /** Show a percentage label at the end of the bar. */
-    showLabel?: boolean
-    /** Format the label (default: rounded percent). */
-    formatLabel?: (value: number, max: number) => string
-    /** Diagonal candy-stripe overlay on the fill. */
-    striped?: boolean
-    ariaLabel?: string
-  }
-  let {
-    value = 0,
-    max = 100,
-    indeterminate = false,
-    buffer,
-    color = 'accent',
-    size = 'md',
-    showLabel = false,
-    formatLabel,
-    striped = false,
-    ariaLabel,
-  }: Props = $props()
-  const pct = $derived(max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0)
-  const bufPct = $derived(buffer != null && max > 0 ? Math.min(100, Math.max(0, (buffer / max) * 100)) : null)
-  const label = $derived(formatLabel ? formatLabel(value, max) : `${Math.round(pct)}%`)
-</script>
-<div class="sv-prog sv-prog--{size} sv-prog--{color}" class:has-label={showLabel && !indeterminate}>
-  <div
-    class="sv-prog__track"
-    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}
-  >
-    {#if bufPct != null && !indeterminate}<div class="sv-prog__buffer" style:width={`${bufPct}%`}></div>{/if}
-    <div
-      class="sv-prog__fill"
-      class:is-indeterminate={indeterminate}
-      class:is-striped={striped}
-      style:width={indeterminate ? undefined : `${pct}%`}
-    ></div>
-  </div>
-  {#if showLabel && !indeterminate}<span class="sv-prog__label">{label}</span>{/if}
-</div>
-<style>
-  .sv-prog {
-    --_accent: var(--sg-accent, #2563eb);
-    --_c: var(--_accent);
-    display: flex; align-items: center; gap: 10px; width: 100%;
-  }
-  .sv-prog--success { --_c: var(--sg-success, #16a34a); }
-  .sv-prog--warning { --_c: var(--sg-warning, #d97706); }
-  .sv-prog--danger { --_c: var(--sg-danger, #dc2626); }
-  .sv-prog__track {
-    position: relative; flex: 1; overflow: hidden;
-    background: var(--sg-border, #e2e8f0); border-radius: 999px;
-  }
-  .sv-prog--sm .sv-prog__track { height: 5px; }
-  .sv-prog--md .sv-prog__track { height: 8px; }
-  .sv-prog--lg .sv-prog__track { height: 12px; }
-  .sv-prog__buffer {
-    position: absolute; inset-block: 0; inset-inline-start: 0;
-    background: color-mix(in srgb, var(--_c) 28%, transparent); border-radius: 999px;
-  }
-  .sv-prog__fill {
-    position: absolute; inset-block: 0; inset-inline-start: 0; min-width: 0;
-    background: var(--_c); border-radius: 999px; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  }
-  .sv-prog__fill.is-striped {
-    background-image: linear-gradient(45deg, rgba(255,255,255,0.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.22) 75%, transparent 75%);
-    background-size: 16px 16px; animation: sv-prog-stripe 0.8s linear infinite;
-  }
-  .sv-prog__fill.is-indeterminate {
-    width: 40%; border-radius: 999px;
-    animation: sv-prog-indet 1.3s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
-  }
-  @keyframes sv-prog-indet {
-    0% { inset-inline-start: -45%; } 100% { inset-inline-start: 100%; }
-  }
-  @keyframes sv-prog-stripe { to { background-position: 16px 0; } }
-  @media (prefers-reduced-motion: reduce) {
-    .sv-prog__fill.is-indeterminate { animation-duration: 2.4s; }
-    .sv-prog__fill.is-striped { animation: none; }
-    .sv-prog__fill { transition: none; }
-  }
-  .sv-prog__label {
-    flex: none; min-width: 38px; text-align: end; font-size: 12px; font-weight: 600;
-    font-variant-numeric: tabular-nums; color: var(--sg-muted, #64748b);
-  }
-</style>
+<script lang="ts">
+  /**
+   * SvProgress - a linear progress bar (WAI-ARIA `progressbar`). Determinate
+   * (value/max) or `indeterminate` (animated), with color intents, sizes, an
+   * optional label and an optional secondary `buffer` track. Theme-driven via
+   * `--sg-*`; respects prefers-reduced-motion. Parity: Smart progress bar.
+   *
+   * ```svelte
+   * <SvProgress value={64} showLabel />
+   * <SvProgress indeterminate color="success" />
+   * ```
+   */
+  type Props = {
+    /** Current value (0..max). Ignored when `indeterminate`. */
+    value?: number
+    max?: number
+    /** Unknown-duration animated bar. */
+    indeterminate?: boolean
+    /** Buffered/secondary value (e.g. streamed-ahead), 0..max. */
+    buffer?: number
+    color?: 'accent' | 'success' | 'warning' | 'danger'
+    size?: 'sm' | 'md' | 'lg'
+    /** Show a percentage label at the end of the bar. */
+    showLabel?: boolean
+    /** Format the label (default: rounded percent). */
+    formatLabel?: (value: number, max: number) => string
+    /** Diagonal candy-stripe overlay on the fill. */
+    striped?: boolean
+    ariaLabel?: string
+  }
+  let {
+    value = 0,
+    max = 100,
+    indeterminate = false,
+    buffer,
+    color = 'accent',
+    size = 'md',
+    showLabel = false,
+    formatLabel,
+    striped = false,
+    ariaLabel,
+  }: Props = $props()
+  const pct = $derived(max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0)
+  const bufPct = $derived(buffer != null && max > 0 ? Math.min(100, Math.max(0, (buffer / max) * 100)) : null)
+  const label = $derived(formatLabel ? formatLabel(value, max) : `${Math.round(pct)}%`)
+</script>
+<div class="sv-prog sv-prog--{size} sv-prog--{color}" class:has-label={showLabel && !indeterminate}>
+  <div
+    class="sv-prog__track"
+    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}
+  >
+    {#if bufPct != null && !indeterminate}<div class="sv-prog__buffer" style:width={`${bufPct}%`}></div>{/if}
+    <div
+      class="sv-prog__fill"
+      class:is-indeterminate={indeterminate}
+      class:is-striped={striped}
+      style:width={indeterminate ? undefined : `${pct}%`}
+    ></div>
+  </div>
+  {#if showLabel && !indeterminate}<span class="sv-prog__label">{label}</span>{/if}
+</div>
+<style>
+  .sv-prog {
+    --_accent: var(--sg-accent, #2563eb);
+    --_c: var(--_accent);
+    display: flex; align-items: center; gap: 10px; width: 100%;
+  }
+  .sv-prog--success { --_c: var(--sg-success, #16a34a); }
+  .sv-prog--warning { --_c: var(--sg-warning, #d97706); }
+  .sv-prog--danger { --_c: var(--sg-danger, #dc2626); }
+  .sv-prog__track {
+    position: relative; flex: 1; overflow: hidden;
+    background: var(--sg-border, #e2e8f0); border-radius: 999px;
+  }
+  .sv-prog--sm .sv-prog__track { height: 5px; }
+  .sv-prog--md .sv-prog__track { height: 8px; }
+  .sv-prog--lg .sv-prog__track { height: 12px; }
+  .sv-prog__buffer {
+    position: absolute; inset-block: 0; inset-inline-start: 0;
+    background: color-mix(in srgb, var(--_c) 28%, transparent); border-radius: 999px;
+  }
+  .sv-prog__fill {
+    position: absolute; inset-block: 0; inset-inline-start: 0; min-width: 0;
+    background: var(--_c); border-radius: 999px; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .sv-prog__fill.is-striped {
+    background-image: linear-gradient(45deg, rgba(255,255,255,0.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.22) 75%, transparent 75%);
+    background-size: 16px 16px; animation: sv-prog-stripe 0.8s linear infinite;
+  }
+  .sv-prog__fill.is-indeterminate {
+    width: 40%; border-radius: 999px;
+    animation: sv-prog-indet 1.3s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
+  }
+  @keyframes sv-prog-indet {
+    0% { inset-inline-start: -45%; } 100% { inset-inline-start: 100%; }
+  }
+  @keyframes sv-prog-stripe { to { background-position: 16px 0; } }
+  @media (prefers-reduced-motion: reduce) {
+    .sv-prog__fill.is-indeterminate { animation-duration: 2.4s; }
+    .sv-prog__fill.is-striped { animation: none; }
+    .sv-prog__fill { transition: none; }
+  }
+  .sv-prog__label {
+    flex: none; min-width: 38px; text-align: end; font-size: 12px; font-weight: 600;
+    font-variant-numeric: tabular-nums; color: var(--sg-muted, #64748b);
+  }
+</style>