@onsvisual/svelte-components 1.1.55 → 1.1.57

package/dist/components/BarChart/BarChart.stories.svelte

@@ -6,7 +6,7 @@
 	import componentDocs from "./docs/component.md?raw";
 
 	const { Story } = defineMeta({
-		title: "Charts/BarChart",
+		title: "Data visualisation/BarChart",
 		component: BarChart,
 		tags: ["autodocs"],
 		argTypes: {

package/dist/components/ChangeStat/ChangeStat.stories.svelte

@@ -0,0 +1,67 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import ChangeStat from "./ChangeStat.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/ChangeStat",
+		component: ChangeStat,
+		tags: ["autodocs"],
+		argTypes: {
+			direction: {
+				control: { type: "select" }
+			},
+			tone: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<ChangeStat {...args} />
+	</div>
+{/snippet}
+
+<Story
+	name="Lower"
+	args={{
+		value: "7%",
+		direction: "down",
+		context: "than last year"
+	}}
+	{template}
+/>
+
+<Story
+	name="Higher"
+	args={{
+		value: "1.3pp",
+		direction: "up",
+		context: "than the previous quarter"
+	}}
+	{template}
+/>
+
+<Story
+	name="No change"
+	args={{
+		label: "No change",
+		direction: "neutral"
+	}}
+	{template}
+/>
+
+<Story
+	name="Fewer"
+	args={{
+		value: "69 (0.7%)",
+		label: "fewer",
+		direction: "down",
+		tone: "positive"
+	}}
+	{template}
+/>

package/dist/components/ChangeStat/ChangeStat.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ChangeStatProps */
+/** @typedef {typeof __propDef.events}  ChangeStatEvents */
+/** @typedef {typeof __propDef.slots}  ChangeStatSlots */
+export default class ChangeStat extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ChangeStatProps = typeof __propDef.props;
+export type ChangeStatEvents = typeof __propDef.events;
+export type ChangeStatSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/ChangeStat/ChangeStat.svelte

@@ -0,0 +1,167 @@
+<script>
+	/**
+	 * Highlighted change value, for example "7%" or "1.3pp"
+	 * @type {string|number|null}
+	 */
+	export let value = null;
+	/**
+	 * Direction of change
+	 * @type {"up"|"down"|"neutral"}
+	 */
+	export let direction = "neutral";
+	/**
+	 * Optional override for the descriptive label
+	 * @type {string|null}
+	 */
+	export let label = null;
+	/**
+	 * Optional trailing context, for example "than last year"
+	 * @type {string|null}
+	 */
+	export let context = null;
+	/**
+	 * Optional colour treatment
+	 * @type {"default"|"positive"|"negative"|"subtle"}
+	 */
+	export let tone = "default";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+
+	const directionLabels = {
+		up: "higher",
+		down: "lower",
+		neutral: "unchanged"
+	};
+
+	$: hasValue = value !== null && value !== undefined && `${value}`.trim().length > 0;
+	$: resolvedLabel = label || directionLabels[direction] || "";
+</script>
+
+<p
+	class="ons-change-stat ons-u-fs-r {cls}"
+	class:ons-change-stat--direction-up={direction === "up"}
+	class:ons-change-stat--direction-down={direction === "down"}
+	class:ons-change-stat--direction-neutral={direction === "neutral"}
+	class:ons-change-stat--tone-positive={tone === "positive"}
+	class:ons-change-stat--tone-negative={tone === "negative"}
+	class:ons-change-stat--tone-subtle={tone === "subtle"}
+>
+	<span class="ons-change-stat__leading">
+		{#if direction === "neutral" && hasValue}
+			<svg
+				class="ons-change-stat__icon"
+				width="14"
+				height="16"
+				viewBox="0 0 12 14"
+				aria-hidden="true"
+			>
+				<path d="M2 7H10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+			</svg>
+		{:else if direction !== "neutral"}
+			<svg
+				class="ons-change-stat__icon"
+				class:ons-change-stat__icon--down={direction === "down"}
+				width="14"
+				height="16"
+				viewBox="0 0 12 14"
+				aria-hidden="true"
+			>
+				<path
+					d="M5.5 1.5L5.5 12.5M5.5 1.5L9.5 5.5M5.5 1.5L1.5 5.5"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		{/if}
+		{#if hasValue}
+			<span class="ons-change-stat__value">{value}</span>
+		{/if}
+		<span>{resolvedLabel}</span>
+	</span>
+	{#if context}
+		<span class="ons-change-stat__context">{context}</span>
+	{/if}
+</p>
+
+<style>
+	.ons-change-stat {
+		--ons-change-stat-accent: #c14e01;
+		--ons-change-stat-background: rgb(247, 223, 207);
+		--ons-change-stat-context: var(--ons-color-text-light);
+		--ons-change-stat-text: var(--ons-color-text);
+		align-items: center;
+		border-radius: 0.125rem;
+		background: var(--ons-change-stat-background);
+		color: var(--ons-change-stat-text);
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 0.125rem 0.25rem;
+		margin: 0;
+		padding: 0.625rem 0.875rem;
+	}
+
+	.ons-change-stat__leading {
+		align-items: center;
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 0.375rem;
+	}
+
+	.ons-change-stat__icon {
+		color: var(--ons-change-stat-accent);
+		display: block;
+		flex: 0 0 auto;
+	}
+
+	.ons-change-stat__icon--down {
+		transform: rotate(180deg);
+	}
+
+	.ons-change-stat__value {
+		font-size: 1.75rem;
+		font-weight: 700;
+		line-height: 1;
+	}
+
+	.ons-change-stat__context {
+		color: var(--ons-change-stat-context);
+	}
+
+	.ons-change-stat--tone-positive {
+		--ons-change-stat-accent: #0b6a0b;
+		--ons-change-stat-background: rgb(207, 225, 198);
+	}
+
+	.ons-change-stat--tone-negative {
+		--ons-change-stat-accent: var(--ons-color-errors, #d4351c);
+		--ons-change-stat-background: rgb(247, 223, 207);
+	}
+
+	.ons-change-stat--tone-subtle {
+		--ons-change-stat-accent: var(--ons-color-text);
+		--ons-change-stat-background: var(--ons-color-grey-10, #f3f2f1);
+		--ons-change-stat-context: var(--ons-color-text);
+	}
+
+	.ons-change-stat--direction-up {
+		--ons-change-stat-accent: #c14e01;
+		--ons-change-stat-background: rgb(247, 223, 207);
+	}
+
+	.ons-change-stat--direction-down {
+		--ons-change-stat-accent: #4f4b96;
+		--ons-change-stat-background: rgb(221, 218, 242);
+	}
+
+	.ons-change-stat--direction-neutral {
+		--ons-change-stat-accent: var(--ons-color-text);
+		--ons-change-stat-background: rgb(230, 230, 230);
+		--ons-change-stat-context: var(--ons-color-text);
+	}
+</style>

package/dist/components/ChangeStat/ChangeStat.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  ChangeStatProps */
+/** @typedef {typeof __propDef.events}  ChangeStatEvents */
+/** @typedef {typeof __propDef.slots}  ChangeStatSlots */
+export default class ChangeStat extends SvelteComponentTyped<{
+    cls?: string | null | undefined;
+    label?: string | null | undefined;
+    value?: string | number | null | undefined;
+    direction?: "up" | "down" | "neutral" | undefined;
+    context?: string | null | undefined;
+    tone?: "default" | "negative" | "positive" | "subtle" | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ChangeStatProps = typeof __propDef.props;
+export type ChangeStatEvents = typeof __propDef.events;
+export type ChangeStatSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        cls?: string | null | undefined;
+        label?: string | null | undefined;
+        value?: string | number | null | undefined;
+        direction?: "up" | "down" | "neutral" | undefined;
+        context?: string | null | undefined;
+        tone?: "default" | "negative" | "positive" | "subtle" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/ChangeStat/docs/component.md

@@ -0,0 +1,14 @@
+Shows a short directional stat such as `7% lower`, `1.3pp higher`, or `69 (0.7%) fewer`.
+
+The component separates **direction** from **tone**, so visual styling can reflect whether a change is good or bad without assuming that higher is always positive.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { ChangeStat } from "@onsvisual/svelte-components";
+</script>
+
+<ChangeStat value="7%" direction="down" />
+<ChangeStat value="1.3pp" direction="up" />
+<ChangeStat value="69 (0.7%)" label="fewer" direction="down" tone="positive" />
+```

package/dist/components/Chart/Chart.stories.svelte

@@ -73,7 +73,7 @@
 	];
 
 	const { Story } = defineMeta({
-		title: "Charts/Chart",
+		title: "Data visualisation/Chart",
 		component: Chart,
 		tags: ["autodocs"],
 		argTypes: {},

package/dist/components/ColumnChart/ColumnChart.stories.svelte

@@ -6,7 +6,7 @@
 	import componentDocs from "./docs/component.md?raw";
 
 	const { Story } = defineMeta({
-		title: "Charts/ColumnChart",
+		title: "Data visualisation/ColumnChart",
 		component: ColumnChart,
 		tags: ["autodocs"],
 		argTypes: {

package/dist/components/DataCard/DataCard.stories.svelte

@@ -7,7 +7,7 @@
 	import data from "../../demo-data/data-scatter.js";
 
 	const { Story } = defineMeta({
-		title: "Charts/DataCard",
+		title: "Data visualisation/DataCard",
 		component: DataCard,
 		tags: ["autodocs"],
 		argTypes: {

package/dist/components/DotPlotChart/DotPlotChart.stories.svelte

@@ -6,7 +6,7 @@
 	import componentDocs from "./docs/component.md?raw";
 
 	const { Story } = defineMeta({
-		title: "Charts/DotPlotChart",
+		title: "Data visualisation/DotPlotChart",
 		component: DotPlotChart,
 		tags: ["autodocs"],
 		argTypes: {},

package/dist/components/Grid/Grid.stories.svelte

@@ -33,6 +33,22 @@
 	</Grid>
 {/snippet}
 
+{#snippet threeColumnsTemplate()}
+	<Grid colWidth="medium">
+		<GridCell><div class="grid-cell">Grid cell one</div></GridCell>
+		<GridCell><div class="grid-cell">Grid cell two</div></GridCell>
+		<GridCell><div class="grid-cell">Grid cell three</div></GridCell>
+	</Grid>
+{/snippet}
+
+{#snippet threeColumnsClassTemplate()}
+	<Grid>
+		<GridCell cls="ons-col-4@m"><div class="grid-cell">Grid cell one</div></GridCell>
+		<GridCell cls="ons-col-4@m"><div class="grid-cell">Grid cell two</div></GridCell>
+		<GridCell cls="ons-col-4@m"><div class="grid-cell">Grid cell three</div></GridCell>
+	</Grid>
+{/snippet}
+
 <Story name="Default" args={{}} {template} />
 
 <Story name="Wide columns" args={{ colWidth: "wide" }} {template} />
@@ -41,6 +57,10 @@
 
 <Story name="Full width columns" args={{ colWidth: "full" }} {template} />
 
+<Story name="Three columns with medium column width" args={{}} template={threeColumnsTemplate} />
+
+<Story name="Three columns with GridCell class override" args={{}} template={threeColumnsClassTemplate} />
+
 <style>
 	.grid-cell {
 		background: var(--ons-color-grey-10);

package/dist/components/Input/Input.stories.svelte

@@ -13,6 +13,7 @@
 	});
 </script>
 
+
 {#snippet template(args)}
 	<div style:padding="12px">
 		<Input {...args} />
@@ -71,3 +72,4 @@
 	}}
 	{template}
 />
+

package/dist/components/Input/docs/component.md

@@ -1,5 +1,7 @@
 A standard `<input>` element with Svelte bindings and events.
 
+## Basic Usage
+
 <!-- prettier-ignore -->
 ```html
 <script>
@@ -14,3 +16,164 @@ A standard `<input>` element with Svelte bindings and events.
 
 <Input bind:value on:change="{handleChange}" />
 ```
+
+## Using with Autocomplete/Lookup Functions
+
+The Input component can be paired with a lookup function to provide autocomplete functionality or data enrichment. Here are common patterns:
+
+### Postcode Lookup Example
+
+Use the `on:input` or `on:blur` events to trigger async lookups (e.g., postcode validation/enrichment via postcodes.io):
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Input } from "@onsvisual/svelte-components";
+
+  let postcode = "";
+  let postcodeData = null;
+  let isLoading = false;
+
+  // Function to lookup postcode data
+  const lookupPostcode = async (inputValue) => {
+    if (!inputValue || inputValue.length < 2) return;
+    
+    isLoading = true;
+    try {
+      const response = await fetch(`https://api.postcodes.io/postcodes/${encodeURIComponent(inputValue)}`);
+      const data = await response.json();
+      
+      if (data.result) {
+        postcodeData = data.result;
+      }
+    } catch (error) {
+      console.error("Postcode lookup failed:", error);
+    } finally {
+      isLoading = false;
+    }
+  };
+
+  // Trigger lookup on blur or after debounced input
+  const handleChange = (e) => {
+    lookupPostcode(e.detail.value);
+  };
+</script>
+
+<Input 
+  id="postcode"
+  label="Enter postcode"
+  bind:value={postcode}
+  placeholder="e.g., SW1A 1AA"
+  on:change={handleChange}
+/>
+
+{#if isLoading}
+  <p>Looking up postcode...</p>
+{/if}
+
+{#if postcodeData}
+  <div>
+    <p><strong>Area:</strong> {postcodeData.admin_district}</p>
+    <p><strong>Region:</strong> {postcodeData.region}</p>
+    <p><strong>Country:</strong> {postcodeData.country}</p>
+  </div>
+{/if}
+```
+
+### Debounced Input with Autocomplete Suggestions
+
+For real-time autocomplete without overwhelming API calls, use a debounce function:
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Input } from "@onsvisual/svelte-components";
+
+  let searchValue = "";
+  let suggestions = [];
+  let debounceTimer;
+
+  // Generic autocomplete lookup function
+  const fetchSuggestions = async (query) => {
+    if (!query || query.length < 2) {
+      suggestions = [];
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+      const data = await response.json();
+      suggestions = data.results || [];
+    } catch (error) {
+      console.error("Autocomplete fetch failed:", error);
+    }
+  };
+
+  // Debounced handler to avoid excessive API calls
+  const handleInput = (e) => {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      fetchSuggestions(e.detail.value);
+    }, 300); // Wait 300ms after user stops typing
+  };
+
+  const selectSuggestion = (suggestion) => {
+    searchValue = suggestion;
+    suggestions = [];
+  };
+</script>
+
+<Input 
+  id="search"
+  label="Search"
+  bind:value={searchValue}
+  placeholder="Start typing..."
+  on:input={handleInput}
+/>
+
+{#if suggestions.length > 0}
+  <ul class="suggestions">
+    {#each suggestions as item}
+      <li>
+        <button on:click={() => selectSuggestion(item.name)}>
+          {item.name}
+        </button>
+      </li>
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  .suggestions {
+    list-style: none;
+    padding: 0;
+    border: 1px solid #ccc;
+    margin: 4px 0;
+  }
+  
+  .suggestions li button {
+    width: 100%;
+    padding: 8px;
+    text-align: left;
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
+  
+  .suggestions li button:hover {
+    background-color: #f0f0f0;
+  }
+</style>
+```
+
+## Events
+
+The Input component dispatches three events:
+
+- **`on:input`** - Fired on each keystroke (useful for real-time feedback/autocomplete)
+- **`on:change`** - Fired when the input loses focus (useful for validation or lookups)
+- **`on:blur`** - Fired when the input loses focus
+
+Each event detail contains:
+- `value` - The current input value
+- `e` - The native DOM event

package/dist/components/LineChart/LineChart.stories.svelte

@@ -6,7 +6,7 @@
 	import componentDocs from "./docs/component.md?raw";
 
 	const { Story } = defineMeta({
-		title: "Charts/LineChart",
+		title: "Data visualisation/LineChart",
 		component: LineChart,
 		tags: ["autodocs"],
 		argTypes: {

package/dist/components/ScatterChart/ScatterChart.stories.svelte

@@ -6,7 +6,7 @@
 	import componentDocs from "./docs/component.md?raw";
 
 	const { Story } = defineMeta({
-		title: "Charts/ScatterChart",
+		title: "Data visualisation/ScatterChart",
 		component: ScatterChart,
 		tags: ["autodocs"],
 		argTypes: {},

package/dist/components/Table/Table.stories.svelte

@@ -28,7 +28,7 @@
 	];
 
 	const { Story } = defineMeta({
-		title: "Charts/Table",
+		title: "Data visualisation/Table",
 		component: Table,
 		tags: ["autodocs"],
 		argTypes: {},

package/dist/components/Toolbar/ToolbarIcon.svelte

@@ -50,6 +50,11 @@
 			selected: "M24 14a10 10 0 1 1-20 0 10 10 0 0 1 20 0",
 			d: "m28.708 27.293-6.26-6.258a11.014 11.014 0 1 0-1.413 1.414l6.258 6.258a1 1 0 0 0 1.415-1.415M5 14a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"
 		},
+		save: {
+			selected:
+				"M22.11,5H7.44c-1.36,0-2.44,1.1-2.44,2.44v17.11c0,1.34,1.09,2.44,2.44,2.44h17.11c1.34,0,2.44-1.1,2.44-2.44v-14.67l-4.89-4.89Z",
+			d: "M27.71,9.18l-4.89-4.89c-.19-.19-.44-.29-.71-.29H7.44c-1.9,0-3.44,1.54-3.44,3.44v17.11c0,1.9,1.54,3.44,3.44,3.44h17.11c1.9,0,3.44-1.54,3.44-3.44v-14.67c0-.27-.11-.52-.29-.71ZM18.67,6v4.78h-8.26v-4.78h8.26ZM26,24.56c0,.8-.65,1.44-1.44,1.44H7.44c-.8,0-1.44-.65-1.44-1.44V7.44c0-.8.65-1.44,1.44-1.44h.96v5.78c0,.55.45,1,1,1h10.26c.55,0,1-.45,1-1v-5.78h1.03l4.3,4.3v14.25ZM16,15.65c-2.57,0-4.67,2.09-4.67,4.67s2.09,4.67,4.67,4.67,4.67-2.09,4.67-4.67-2.09-4.67-4.67-4.67ZM16,22.98c-1.47,0-2.67-1.2-2.67-2.67s1.2-2.67,2.67-2.67,2.67,1.2,2.67,2.67-1.2,2.67-2.67,2.67Z"
+		},
 		download: {
 			selected: "M27 6v20H5V6a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2",
 			d: "M28 18v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8a1 1 0 1 1 2 0v7h20v-7a1 1 0 0 1 2 0m-12.707.707a1 1 0 0 0 1.415 0l5-5a1 1 0 0 0-1.415-1.415L17 15.587V4a1 1 0 0 0-2 0v11.586l-3.293-3.293a1 1 0 1 0-1.415 1.415z"

package/dist/components/UpdateStatus/UpdateStatus.stories.svelte

@@ -0,0 +1,52 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import UpdateStatus from "./UpdateStatus.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/UpdateStatus",
+		component: UpdateStatus,
+		tags: ["autodocs"],
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<UpdateStatus {...args} />
+	</div>
+{/snippet}
+
+<Story
+	name="Recent flag"
+	args={{
+		recent: true
+	}}
+	{template}
+/>
+
+<Story
+	name="Last updated date"
+	args={{
+		date: "1 September 2026"
+	}}
+	{template}
+/>
+
+<Story
+	name="Custom recent label"
+	args={{
+		recent: true,
+		recentLabel: "Updated recently"
+	}}
+	{template}
+/>
+
+<Story
+	name="Missing date fallback"
+	args={{
+		date: null
+	}}
+	{template}
+/>

package/dist/components/UpdateStatus/UpdateStatus.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  UpdateStatusProps */
+/** @typedef {typeof __propDef.events}  UpdateStatusEvents */
+/** @typedef {typeof __propDef.slots}  UpdateStatusSlots */
+export default class UpdateStatus extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type UpdateStatusProps = typeof __propDef.props;
+export type UpdateStatusEvents = typeof __propDef.events;
+export type UpdateStatusSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/UpdateStatus/UpdateStatus.svelte

@@ -0,0 +1,91 @@
+<script>
+	/**
+	 * Last updated date or label to display when the content is not recent
+	 * @type {string|null}
+	 */
+	export let date = null;
+	/**
+	 * Whether the content has been updated recently
+	 * @type {boolean}
+	 */
+	export let recent = false;
+	/**
+	 * Label used when recent is true
+	 * @type {string}
+	 */
+	export let recentLabel = "Updated this week";
+	/**
+	 * Prefix used when showing the date
+	 * @type {string}
+	 */
+	export let prefix = "Last updated:";
+	/**
+	 * Message shown when no date is available
+	 * @type {string}
+	 */
+	export let missingLabel = "No update date provided";
+	/**
+	 * Whether to show the status dot for recent updates
+	 * @type {boolean}
+	 */
+	export let showRecentDot = true;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+
+	$: hasDate = typeof date === "string" ? date.trim().length > 0 : date != null;
+</script>
+
+<div class="ons-update-status-container {cls}">
+	<p
+		class="ons-update-status ons-u-fs-s"
+		class:ons-update-status--recent={recent}
+		class:ons-update-status--missing={!recent && !hasDate}
+	>
+		{#if recent}
+			{#if showRecentDot}
+				<span class="ons-update-status__dot" aria-hidden="true"></span>
+			{/if}
+			<span>{recentLabel}</span>
+		{:else if !hasDate}
+			{missingLabel}
+		{:else}
+			{prefix} {date}
+		{/if}
+	</p>
+</div>
+
+<style>
+	.ons-update-status-container {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.ons-update-status {
+		color: var(--ons-color-text-light);
+		margin: 0;
+	}
+
+	.ons-update-status--recent {
+		align-items: center;
+		color: var(--ons-color-text);
+		display: inline-flex;
+		gap: 0.375rem;
+	}
+
+	.ons-update-status--missing {
+		color: var(--ons-color-errors, #d4351c);
+		text-align: right;
+	}
+
+	.ons-update-status__dot {
+		background: #69e073;
+		border-radius: 50%;
+		display: inline-block;
+		flex: 0 0 auto;
+		height: 0.625rem;
+		width: 0.625rem;
+	}
+</style>

package/dist/components/UpdateStatus/UpdateStatus.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  UpdateStatusProps */
+/** @typedef {typeof __propDef.events}  UpdateStatusEvents */
+/** @typedef {typeof __propDef.slots}  UpdateStatusSlots */
+export default class UpdateStatus extends SvelteComponentTyped<{
+    cls?: string | null | undefined;
+    prefix?: string | undefined;
+    date?: string | null | undefined;
+    recent?: boolean | undefined;
+    recentLabel?: string | undefined;
+    missingLabel?: string | undefined;
+    showRecentDot?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type UpdateStatusProps = typeof __propDef.props;
+export type UpdateStatusEvents = typeof __propDef.events;
+export type UpdateStatusSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        cls?: string | null | undefined;
+        prefix?: string | undefined;
+        date?: string | null | undefined;
+        recent?: boolean | undefined;
+        recentLabel?: string | undefined;
+        missingLabel?: string | undefined;
+        showRecentDot?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/UpdateStatus/docs/component.md

@@ -0,0 +1,13 @@
+Shows a short status message for recently updated content, or falls back to a standard "Last updated" label.
+
+Useful for dashboard cards and article metadata where the recency logic is handled outside the component.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { UpdateStatus } from "@onsvisual/svelte-components";
+</script>
+
+<UpdateStatus recent />
+<UpdateStatus date="1 September 2026" />
+```

package/dist/index.d.ts

@@ -56,7 +56,9 @@ export { default as Document } from "./components/DocumentList/Document.svelte";
 export { default as ErrorPage } from "./components/ErrorPage/ErrorPage.svelte";
 export { default as Image } from "./components/Image/Image.svelte";
 export { default as Notice } from "./components/Notice/Notice.svelte";
+export { default as UpdateStatus } from "./components/UpdateStatus/UpdateStatus.svelte";
 export { default as ShareButtons } from "./components/ShareButtons/ShareButtons.svelte";
+export { default as ChangeStat } from "./components/ChangeStat/ChangeStat.svelte";
 export { default as Summary } from "./components/Summary/Summary.svelte";
 export { default as Timeline } from "./components/Timeline/Timeline.svelte";
 export { default as TimelineItem } from "./components/Timeline/TimelineItem.svelte";

package/dist/index.js

@@ -77,7 +77,9 @@ export { default as Document } from "./components/DocumentList/Document.svelte";
 export { default as ErrorPage } from "./components/ErrorPage/ErrorPage.svelte";
 export { default as Image } from "./components/Image/Image.svelte";
 export { default as Notice } from "./components/Notice/Notice.svelte";
+export { default as UpdateStatus } from "./components/UpdateStatus/UpdateStatus.svelte";
 export { default as ShareButtons } from "./components/ShareButtons/ShareButtons.svelte";
+export { default as ChangeStat } from "./components/ChangeStat/ChangeStat.svelte";
 export { default as Summary } from "./components/Summary/Summary.svelte";
 export { default as Timeline } from "./components/Timeline/Timeline.svelte";
 export { default as TimelineItem } from "./components/Timeline/TimelineItem.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.1.55",
+	"version": "1.1.57",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",