ServiceCard

Service status row with latency + sparkline.

A service tile showing name, host, status tone, latency, and a sparkline. Renders as a real `<a>` when given an `href`, supports `loading` skeletons and a `disabled` inert state, an optional relative "last checked" footer, and an extra metadata snippet. Interactive by default with a visible focus ring.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { ServiceCard } from 'dssoca';
</script>

<ServiceCard
  name="movies-api"
  host="movies.home"
  status="up"
  latency="4ms"
  href="/services/movies-api"
  updatedAt={new Date()}
/>

Props

Prop	Type	Default	Description
`name`	`string`	—	Required. Service name.
`host`	`string`	—	Required. Host string.
`status`	`'up' \| 'deg' \| 'down' \| 'maint'`	`'up'`	Status tone (also folded into the accessible name).
`latency`	`string`	`''`	Latency text (e.g. "4ms").
`spark`	`number[]`	—	Sparkline series (has a built-in default).
`href`	`string`	—	When set, the card renders as a real <a> and navigates here.
`onclick`	`() => void`	—	Click handler (for the non-link interactive card).
`loading`	`boolean`	`false`	Render skeleton placeholders and mark aria-busy; suppresses interaction.
`disabled`	`boolean`	`false`	Non-interactive variant: aria-disabled, no focus/pointer, no onclick.
`updatedAt`	`Date \| string`	—	"Last checked" instant; rendered as relative time in a <time datetime> footer.
`meta`	`Snippet`	—	Optional extra metadata rows (version, IP, tags…) below the head.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.