@onsvisual/svelte-components 1.0.0-next.3 → 1.0.0-next.5

package/dist/datavis/DataTile/DataTile.stories.svelte

@@ -0,0 +1,28 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import DataTile from "./DataTile.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/DataTile",
+		component: DataTile,
+		tags: ["autodocs"],
+		argTypes: {
+			mode: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Big number"
+	args={{
+		title: "Consumer Price Index (CPI)",
+		value: "up 2.5%",
+		caption: "in 12 months to December 2024",
+		source: "Source: ONS"
+	}}
+/>

package/dist/datavis/DataTile/DataTile.stories.svelte.d.ts

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

package/dist/datavis/DataTile/DataTile.svelte

@@ -0,0 +1,51 @@
+<script>
+	import Card from "../../layout/Card/Card.svelte";
+
+	/**
+	 * Title of card
+	 * @type {string}
+	 */
+	export let title = "";
+	/**
+	 * Optional: URL link for card title
+	 * @type {string}
+	 */
+	export let href = "";
+	/**
+	 * Big number (expects a pre-formatted text string)
+	 * @type {string|number}
+	 */
+	export let value = "";
+	/**
+	 * Mode for the data tile
+	 * @type {"number"|"sparkline"|"bar"}
+	 */
+	export let mode = "number";
+	/**
+	 * Text caption describing the number
+	 * @type {string}
+	 */
+	export let caption = "";
+	/**
+	 * An array of data (required for charts)
+	 * @type {object[]|null}
+	 */
+	export let data = null;
+	/**
+	 * Text describing the source of the data
+	 * @type {string}
+	 */
+	export let source = "";
+</script>
+
+<Card {title} {href} mode="featured">
+	{#if value}
+		<p class="headline-figures__figure ons-u-fs-3xl ons-u-fs-2xl@m">{value}</p>
+	{/if}
+	{#if caption}
+		<p class="headline-figures__supporting-text ons-u-fs-r">{@html caption}</p>
+	{/if}
+	{#if source}
+		<p class="ons-u-fs-s">{source}</p>
+	{/if}
+</Card>

package/dist/datavis/DataTile/DataTile.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  DataTileProps */
+/** @typedef {typeof __propDef.events}  DataTileEvents */
+/** @typedef {typeof __propDef.slots}  DataTileSlots */
+export default class DataTile extends SvelteComponentTyped<{
+    caption?: string | undefined;
+    data?: object[] | null | undefined;
+    source?: string | undefined;
+    title?: string | undefined;
+    href?: string | undefined;
+    mode?: "number" | "sparkline" | "bar" | undefined;
+    value?: string | number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DataTileProps = typeof __propDef.props;
+export type DataTileEvents = typeof __propDef.events;
+export type DataTileSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        caption?: string | undefined;
+        data?: object[] | null | undefined;
+        source?: string | undefined;
+        title?: string | undefined;
+        href?: string | undefined;
+        mode?: "number" | "sparkline" | "bar" | undefined;
+        value?: string | number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/datavis/DataTile/docs/component.md

@@ -0,0 +1,17 @@
+A component for presenting key facts and figures in a tile grid.
+
+Note: This component will be extended to include bar charts and sparklines.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { DataTile } from "@onsvisual/svelte-components";
+</script>
+
+<DataTile
+  title="Consumer Price Index (CPI)",
+  value="up 2.5%",
+  caption="in 12 months to December 2024",
+  source="Source: ONS"
+/>
+```

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export { default as Blockquote } from "./decorators/Blockquote/Blockquote.svelte
 export { default as Divider } from "./decorators/Divider/Divider.svelte";
 export { default as Em } from "./decorators/Em/Em.svelte";
 export { default as Indent } from "./decorators/Indent/Indent.svelte";
+export { default as DataTile } from "./datavis/DataTile/DataTile.svelte";
 export { default as Table } from "./datavis/Table/Table.svelte";
 export { default as AnalyticsBanner, analyticsEvent } from "./layout/AnalyticsBanner/AnalyticsBanner.svelte";
 export { default as Details, default as Twisty } from "./layout/Details/Details.svelte";

package/dist/index.js

@@ -65,4 +65,5 @@ export { default as Em } from "./decorators/Em/Em.svelte";
 export { default as Indent } from "./decorators/Indent/Indent.svelte";
 
 // Data visualisation
+export { default as DataTile } from "./datavis/DataTile/DataTile.svelte";
 export { default as Table } from "./datavis/Table/Table.svelte";

package/dist/inputs/Checkbox/Checkbox.svelte

@@ -9,45 +9,45 @@
 	 */
 	export let id;
 	/**
-	 * Optional: Name of checkbox group
+	 * Label for input
 	 * @type {string}
 	 */
-	export let name = "";
-	/**
-	 * Value for input element (defaults to ID)
-	 * @type {string|object}
-	 */
-	export let value = id;
+	export let label;
 	/**
-	 * Label for input
+	 * Optional: Extended description for element
 	 * @type {string}
 	 */
-	export let label;
+	export let description = "";
 	/**
 	 * Binding for checked state of input
 	 * @type {boolean}
 	 */
 	export let checked = false;
 	/**
-	 * Binding for checked state of input
-	 * @type {object[]|null}
+	 * Option to disable input
+	 * @type {boolean}
 	 */
-	export let group = null;
+	export let disabled = false;
 	/**
-	 * Optional: Extended description for element
+	 * Optional: Define the item as an object in the form {id, label, description?}
+	 * @type {object}
+	 */
+	export let item = { id, label, description, checked, disabled };
+	/**
+	 * Optional: Name of checkbox group
 	 * @type {string}
 	 */
-	export let description = "";
+	export let groupName = "";
+	/**
+	 * Binding for checked state of input
+	 * @type {object[]|null}
+	 */
+	export let group = null;
 	/**
 	 * Set display mode of checkbox
 	 * @type {"default"|"ghost"}
 	 */
 	export let variant = "default";
-	/**
-	 * Option to disable input
-	 * @type {boolean}
-	 */
-	export let disabled = false;
 	/**
 	 * Compact mode (no border)
 	 * @type {boolean}
@@ -64,15 +64,19 @@
 	}
 
 	function updateGroup() {
-		const newGroup = $checkboxes.filter((c) => c.checked).map((c) => c.id);
-		if (newGroup.join() !== group.join()) group = newGroup;
+		const groupIndex = {};
+		for (const g of group) groupIndex[g.id] = g;
+		const newGroupIds = $checkboxes.filter((c) => c.checked).map((c) => c?.id);
+		if (newGroupIds.length !== group.length)
+			group = newGroupIds.map((id) => groupIndex[id] || item);
 	}
 
 	function doChange(e) {
+		checked = item.checked;
 		if (Array.isArray(group) && Array.isArray($checkboxes)) {
 			updateGroup();
 		}
-		dispatch("change", { id, checked, group, e });
+		dispatch("change", { item, e });
 	}
 
 	onMount(() => {
@@ -99,38 +103,38 @@
 	<span class="ons-checkbox" class:ons-checkbox--no-border={compact}>
 		<input
 			type="checkbox"
-			{id}
-			{name}
-			{value}
-			bind:checked
+			id={item.id}
+			name={groupName}
+			value={item}
+			bind:checked={item.checked}
 			class="ons-checkbox__input ons-js-checkbox"
-			{disabled}
-			aria-disabled={disabled}
+			disabled={item.disabled}
+			aria-disabled={item.disabled}
 			on:change={doChange}
 			bind:this={el}
 		/>
 		<label
 			class="ons-checkbox__label"
-			class:ons-label--with-description={description}
-			for={id}
-			id="{id}-label"
-			aria-describedby={description ? `${id}-label-description-hint` : null}
+			class:ons-label--with-description={item.description}
+			for={item.id}
+			id="{item.id}-label"
+			aria-describedby={item.description ? `${item.id}-label-description-hint` : null}
 		>
-			{label}
-			{#if description}
+			{item.label}
+			{#if item.description}
 				<span class="ons-label__aria-hidden-description" aria-hidden="true"
 					><span class="ons-label__description ons-radio__label--with-description">
-						{description}
+						{item.description}
 					</span></span
 				>
 			{/if}
 		</label>
-		{#if description}
+		{#if item.description}
 			<span
 				class="ons-label__visually-hidden-description ons-u-vh"
-				id="{id}-label-description-hint"
+				id="{item.id}-label-description-hint"
 			>
-				{description}
+				{item.description}
 			</span>
 		{/if}
 	</span>

package/dist/inputs/Checkbox/Checkbox.svelte.d.ts

@@ -4,14 +4,14 @@
 export default class Checkbox extends SvelteComponentTyped<{
     id: string;
     label: string;
-    name?: string | undefined;
     group?: object[] | null | undefined;
     compact?: boolean | undefined;
-    value?: string | object | undefined;
     variant?: "default" | "ghost" | undefined;
     disabled?: boolean | undefined;
-    checked?: boolean | undefined;
     description?: string | undefined;
+    checked?: boolean | undefined;
+    item?: object | undefined;
+    groupName?: string | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -26,14 +26,14 @@ declare const __propDef: {
     props: {
         id: string;
         label: string;
-        name?: string | undefined;
         group?: object[] | null | undefined;
         compact?: boolean | undefined;
-        value?: string | object | undefined;
         variant?: "default" | "ghost" | undefined;
         disabled?: boolean | undefined;
-        checked?: boolean | undefined;
         description?: string | undefined;
+        checked?: boolean | undefined;
+        item?: object | undefined;
+        groupName?: string | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/dist/inputs/Checkboxes/Checkboxes.stories.svelte

@@ -21,22 +21,14 @@
 	];
 </script>
 
-{#snippet template(args)}
-	<div style:padding="12px">
-		<Checkboxes {...args} />
-	</div>
-{/snippet}
+<Story name="Default" args={{ label: "Select items", items }} />
 
-<Story name="Default" args={{ label: "Select items", items }} {template} />
-
-<Story name="Compact without label" args={{ items, compact: true }} {template} />
+<Story name="Compact without label" args={{ items, compact: true }} />
 
 <Story name="Individually defined checkboxes" asChild parameters={withStoryDocs(exampleDocs)}>
-	<div style:padding="12px">
-		<Checkboxes label="Select items">
-			<Checkbox id="ice-cream" label="Ice cream" />
-			<Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" />
-			<Checkbox id="disabled" label="Disabled option" disabled />
-		</Checkboxes>
-	</div>
+	<Checkboxes label="Select items">
+		<Checkbox id="ice-cream" label="Ice cream" />
+		<Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" />
+		<Checkbox id="disabled" label="Disabled option" disabled />
+	</Checkboxes>
 </Story>

package/dist/inputs/Checkboxes/Checkboxes.svelte

@@ -4,7 +4,17 @@
 	import Checkbox from "../Checkbox/Checkbox.svelte";
 
 	/**
-	 * Label for grouped inputs
+	 * Title/legend for parent <fieldset>
+	 * @type {string}
+	 */
+	export let title = "";
+	/**
+	 * Visually hide the title/legend
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
+	/**
+	 * Descriptive "how to" label for inputs
 	 * @type {string}
 	 */
 	export let label = "";
@@ -25,14 +35,23 @@
 	setContext("checkboxes", checkboxes);
 </script>
 
-{#if label}
-	<p class="ons-checkboxes__label">{label}</p>
-{/if}
-<div class="ons-checkboxes__items">
-	<slot />
-	{#if Array.isArray(items)}
-		{#each items as item}
-			<Checkbox {...item} bind:group={value} {compact} on:change />
-		{/each}
+<fieldset class="ons-fieldset">
+	{#if title}
+		<legend class="ons-fieldset__legend ons-u-mb-no">
+			<span class="ons-fieldset__legend-title ons-u-pb-no" class:ons-u-vh={hideTitle}>{title}</span>
+		</legend>
 	{/if}
-</div>
+	<div class="ons-input-items">
+		{#if label}
+			<p class="ons-checkboxes__label">{label}</p>
+		{/if}
+		<div class="ons-checkboxes__items">
+			<slot />
+			{#if Array.isArray(items)}
+				{#each items as item}
+					<Checkbox {item} bind:group={value} {compact} on:change />
+				{/each}
+			{/if}
+		</div>
+	</div>
+</fieldset>

package/dist/inputs/Checkboxes/Checkboxes.svelte.d.ts

@@ -3,7 +3,9 @@
 /** @typedef {typeof __propDef.slots}  CheckboxesSlots */
 export default class Checkboxes extends SvelteComponentTyped<{
     label?: string | undefined;
+    title?: string | undefined;
     compact?: boolean | undefined;
+    hideTitle?: boolean | undefined;
     items?: object[] | null | undefined;
     value?: object[] | undefined;
 }, {
@@ -21,7 +23,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         label?: string | undefined;
+        title?: string | undefined;
         compact?: boolean | undefined;
+        hideTitle?: boolean | undefined;
         items?: object[] | null | undefined;
         value?: object[] | undefined;
     };

package/dist/inputs/Checkboxes/docs/component.md

@@ -1,6 +1,6 @@
 A component for defining a group of [checkbox](/docs/inputs-checkbox--docs) elements, whose checked values can be bound to Svelte variables, or grouped in an array.
 
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes).
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes). (Note: In some use cases, it may be preferable to use raw HTML `<input type="checkbox">` components and style these using CSS.)
 
 <!-- prettier-ignore -->
 ```html

package/dist/inputs/Radios/Radio.svelte

@@ -7,27 +7,32 @@
 	 * Unique ID input
 	 * @type {string}
 	 */
-	export let id;
+	export let id = "";
 	/**
-	 * ID for radio group (required)
+	 * Label for input
 	 * @type {string}
 	 */
-	export let groupId;
+	export let label = "";
 	/**
-	 * Label for input
+	 * Optional: Extended description for element
 	 * @type {string}
 	 */
-	export let label;
+	export let description = "";
 	/**
-	 * Binding for ID of selected option
-	 * @type {string|null}
+	 * Optional: Define the item as an object in the form {id, label, description?}
+	 * @type {object}
 	 */
-	export let value = null;
+	export let item = { id, label, description };
 	/**
-	 * Optional: Extended description for element
+	 * ID for radio group (required)
 	 * @type {string}
 	 */
-	export let description = "";
+	export let groupId;
+	/**
+	 * Binding selected option
+	 * @type {object|null}
+	 */
+	export let value = null;
 	/**
 	 * Compact mode (no border)
 	 * @type {boolean}
@@ -39,35 +44,39 @@
 	<span class="ons-radio" class:ons-radio--no-border={compact}>
 		<input
 			type="radio"
-			{id}
-			bind:group={value}
-			value={id}
+			id={item.id}
+			value={item}
 			name={groupId}
 			class="ons-radio__input ons-js-radio"
-			on:change={(e) => dispatch("change", e)}
+			on:change={(e) => {
+				if (e?.target?.checked) {
+					value = item;
+					dispatch("change", { value, e });
+				}
+			}}
 		/>
 		<label
 			class="ons-radio__label"
 			class:ons-label--with-description={description}
-			for={id}
-			id="{id}-label"
-			aria-describedby={description ? `${id}-label-description-hint` : null}
+			for={item.id}
+			id="{item.id}-label"
+			aria-describedby={item.description ? `${item.id}-label-description-hint` : null}
 		>
-			{label}
-			{#if description}
+			{item.label}
+			{#if item.description}
 				<span class="ons-label__aria-hidden-description" aria-hidden="true"
 					><span class="ons-label__description ons-radio__label--with-description">
-						{description}
+						{item.description}
 					</span></span
 				>
 			{/if}
 		</label>
-		{#if description}
+		{#if item.description}
 			<span
 				class="ons-label__visually-hidden-description ons-u-vh"
 				id="{id}-label-description-hint"
 			>
-				{description}
+				{item.description}
 			</span>
 		{/if}
 	</span>

package/dist/inputs/Radios/Radio.svelte.d.ts

@@ -2,12 +2,13 @@
 /** @typedef {typeof __propDef.events}  RadioEvents */
 /** @typedef {typeof __propDef.slots}  RadioSlots */
 export default class Radio extends SvelteComponentTyped<{
-    id: string;
-    label: string;
     groupId: string;
+    id?: string | undefined;
+    label?: string | undefined;
     compact?: boolean | undefined;
-    value?: string | null | undefined;
+    value?: object | null | undefined;
     description?: string | undefined;
+    item?: object | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -20,12 +21,13 @@ export type RadioSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id: string;
-        label: string;
         groupId: string;
+        id?: string | undefined;
+        label?: string | undefined;
         compact?: boolean | undefined;
-        value?: string | null | undefined;
+        value?: object | null | undefined;
         description?: string | undefined;
+        item?: object | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/dist/inputs/Radios/Radios.svelte

@@ -1,19 +1,29 @@
 <script>
 	import Radio from "./Radio.svelte";
 
+	/**
+	 * Title/legend for parent <fieldset>
+	 * @type {string}
+	 */
+	export let title = "";
+	/**
+	 * Visually hide the title/legend
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
 	/**
 	 * Unique ID for radio group (required)
 	 * @type {string}
 	 */
 	export let id = "name";
 	/**
-	 * Label for grouped inputs
+	 * Descriptive "how to" label for inputs
 	 * @type {string}
 	 */
 	export let label = "";
 	/**
 	 * Binding for ID of selected option
-	 * @type {string|null}
+	 * @type {object|null}
 	 */
 	export let value = null;
 	/** Optional: Define the radios as an array of {id, label, description?}
@@ -27,20 +37,21 @@
 	export let compact = false;
 </script>
 
-{#if label}
-	<p class="ons-radios__label">{label}</p>
-{/if}
-<div class="ons-radios__items">
-	<slot />
-	{#each items as item}
-		<Radio
-			id={item.id}
-			label={item.label}
-			description={item.description}
-			groupId={id}
-			{compact}
-			bind:value
-			on:change
-		/>
-	{/each}
-</div>
+<fieldset class="ons-fieldset">
+	{#if title}
+		<legend class="ons-fieldset__legend ons-u-mb-no">
+			<span class="ons-fieldset__legend-title ons-u-pb-no" class:ons-u-vh={hideTitle}>{title}</span>
+		</legend>
+	{/if}
+	<div class="ons-input-items">
+		{#if label}
+			<p class="ons-radios__label">{label}</p>
+		{/if}
+		<div class="ons-radios__items">
+			<slot />
+			{#each items as item}
+				<Radio {item} groupId={id} {compact} bind:value on:change />
+			{/each}
+		</div>
+	</div>
+</fieldset>

package/dist/inputs/Radios/Radios.svelte.d.ts

@@ -4,9 +4,11 @@
 export default class Radios extends SvelteComponentTyped<{
     id?: string | undefined;
     label?: string | undefined;
+    title?: string | undefined;
     compact?: boolean | undefined;
+    hideTitle?: boolean | undefined;
     items?: object[] | undefined;
-    value?: string | null | undefined;
+    value?: object | null | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -23,9 +25,11 @@ declare const __propDef: {
     props: {
         id?: string | undefined;
         label?: string | undefined;
+        title?: string | undefined;
         compact?: boolean | undefined;
+        hideTitle?: boolean | undefined;
         items?: object[] | undefined;
-        value?: string | null | undefined;
+        value?: object | null | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/dist/inputs/Radios/docs/component.md

@@ -1,6 +1,6 @@
 A component for defining a group of radio inputs, where the selected item id can be bound to a Svelte variable.
 
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/radios).
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/radios). (Note: In some use cases, it may be preferable to use raw HTML `<input type="radio">` components and style these using CSS.)
 
 <!-- prettier-ignore -->
 ```html
@@ -17,7 +17,7 @@ Based on [this ONS Design System component](https://service-manual.ons.gov.uk/de
     { id: "mobile", label: "Caravan or other mobile or temporary structure" },
   ];
 
-  let selected; // A binding for the selected item ID
+  let selected; // A binding for the selected item
 </script>
 
 <Radios {items} bind:value={selected} label="Select one">

package/dist/intro.mdx

@@ -47,14 +47,21 @@ npm install @onsvisual/svelte-components --save-dev
 
 ## Using the components
 
-Checkout the [guides](?path=/docs/guides-using-these-docs--page), or dive straight into the docs to start using components.
+When using the components, you need to import both the desired component and the global CSS styles. In a SvelteKit project it is best to import the CSS in a top-level **+layout.svelte** file in your **src/routes** folder, which will apply it to all pages/components in the project.
 
 {/* prettier-ignore */}
 ```html
+<!-- +layout.svelte -->
 <script>
   import "@onsvisual/svelte-components/css/main.css";
+</script>
+
+<slot/>
+
+<!-- +page.svelte / Component.svelte -->
+<script>
   import { Section } from "@onsvisual/svelte-components";
 </script>
 
-<Section title="Hello world!">This is my first ONS Svelte component.</Section>
+<Section title="Hello world!">I am using an ONS Svelte component.</Section>
 ```

package/dist/layout/Breadcrumb/Breadcrumb.svelte

@@ -16,9 +16,14 @@
 	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
 	 */
 	export let width = "wide";
+	/**
+	 * Overrides the base theme background (accepts any valid CSS background value)
+	 * @type {string|null}
+	 */
+	export let background = null;
 </script>
 
-<Container {width}>
+<Container {width} {background}>
 	<nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
 		<ol class="ons-breadcrumbs__items ons-u-fs-s">
 			{#each backHref ? [{ label: "Back", href: backHref }] : links as link}

package/dist/layout/Breadcrumb/Breadcrumb.svelte.d.ts

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  BreadcrumbSlots */
 export default class Breadcrumb extends SvelteComponentTyped<{
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+    background?: string | null | undefined;
     links?: object[] | undefined;
     backHref?: string | undefined;
 }, {
@@ -16,6 +17,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+        background?: string | null | undefined;
         links?: object[] | undefined;
         backHref?: string | undefined;
     };

package/dist/layout/Card/Card.stories.svelte

@@ -27,7 +27,7 @@
 
 <Story name="Cards with links" args={{ href: "#0" }} {template} />
 
-<Story name="Featured cards" args={{ mode: "featured" }} {template} />
+<Story name="Featured cards with baseline" args={{ mode: "featured", baseline: true }} {template} />
 
 <Story
 	name="Featured cards with image"

package/dist/layout/Card/Card.svelte

@@ -31,6 +31,11 @@
 	 * @type {"default"|"featured"}
 	 */
 	export let mode = "default";
+	/**
+	 * Include a border at the bottom of the card
+	 * @type {boolean}
+	 */
+	export let baseline = false;
 	/**
 	 * Optional: URL for title/image link
 	 * @type {string}
@@ -58,9 +63,10 @@
 		class="ons-card ons-u-mb-no {cls}"
 		class:ons-card--feature={mode === "featured"}
 		class:ons-u-p-l={mode === "featured"}
+		class:ons-card--baseline={baseline}
 	>
 		{#if href}
-			<a href="#0" class="ons-card__link">
+			<a {href} class="ons-card__link">
 				<slot name="image">
 					{#if image}
 						<img
@@ -117,4 +123,7 @@
 	.ons-card > :global(p:last-of-type) {
 		margin-bottom: 0;
 	}
+	.ons-card--baseline {
+		border-bottom: 2px solid var(--ons-color-borders-light);
+	}
 </style>

package/dist/layout/Card/Card.svelte.d.ts

@@ -11,6 +11,7 @@ export default class Card extends SvelteComponentTyped<{
     colspan?: number | undefined;
     hideTitle?: boolean | undefined;
     mode?: "default" | "featured" | undefined;
+    baseline?: boolean | undefined;
     imageAlt?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -35,6 +36,7 @@ declare const __propDef: {
         colspan?: number | undefined;
         hideTitle?: boolean | undefined;
         mode?: "default" | "featured" | undefined;
+        baseline?: boolean | undefined;
         imageAlt?: string | undefined;
     };
     events: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.0-next.3",
+	"version": "1.0.0-next.5",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",