v2.2.0

Features

• add Duration component, svelteDuration action, and duration attachment (076ae7e, #93)
• add time attachment (8901464, #85)
• support children snippet for custom markup (f4c3479, #84)
• add tz prop for per-instance timezone conversion (48fb1c0, #87)
• add relativeStyle prop for compact relative time (d624b00, #89)
• add relativeThreshold prop (4a6056b, #88)
• export now, formatTime, and relativeTime primitives (0e9a678, #86)
• annotate generated locale union with human-readable names (07a47fa, #98)
• bump dayjs to ^1.11.21 (9d6b4b4)

Fixes

• svelteTime action no longer drops falsy timestamps (df9bb2d, #76)
• emit valid ISO 8601 datetime for non-string timestamps (2b3ea6c, #77)
• restore hand-rolled .d.ts for dayjs, datetime, and ticker subpath exports (0417f4d)
• correct format type, drop phantom formatted prop, and export public types (cfdc154, #83)
• silence state_referenced_locally warning on initial interval in Time and Duration (e89b240, #96)
• don't pass a null title to setAttribute (81a17e9)
• type onVisibilityChange in ticker utilities (2b5b248)
• replace any with unknown for the data-* index signature in Time.svelte.d.ts (f7537d3, #100)

Performance

• parse timestamp once and share across derived values (d7c51af, #78)
• write action output via textContent (844608a, #79)
• share one live-update timer across components (19368f1, #80)
• add adaptive live-update scheduling and visibility-aware refresh (e849d57, #81)

---

New features

• Use Duration when you want semantic duration rendering as a component:

<script>
  import { Duration } from "svelte-time";
</script>

<Duration ms={90_000} />

• Use attachments on Svelte 5.29+ as the reactive successor to actions:

<script>
  import { time, duration } from "svelte-time";
</script>

<time {@attach time({ timestamp: "2021-02-02", format: "YYYY-MM-DD" })}></time>
<div {@attach duration({ ms: 90_000 })}></div>

• Use the children snippet to supply custom markup while preserving the component-managed text, title, and datetime behavior:

<Time relative timestamp={post.createdAt}>
  {#snippet children(formatted)}
    <strong>{formatted}</strong>
  {/snippet}
</Time>

• Use tz, relativeStyle, and relativeThreshold for per-instance timezone conversion and denser relative displays:

<Time
  timestamp="2024-01-01T12:00:00Z"
  tz="America/Chicago"
  relative
  relativeStyle="micro"
  relativeThreshold={2 * 60 * 60 * 1_000}
/>

• Use the new utilities and public types directly in app code:

import {
  formatTime,
  now,
  relativeTime,
  type Locales,
  type RelativeStyle,
  type SvelteTimeOptions,
  type TimeProps,
} from "svelte-time";

const current = now();
const formatted = formatTime(current, { format: "YYYY-MM-DD" });
const relative = relativeTime(current);

const locale: Locales = "de";
const style: RelativeStyle = "default";