@onsvisual/svelte-components 1.0.0-next.4 → 1.0.0-next.6

package/dist/inputs/ErrorPanel/ErrorPanel.svelte

@@ -4,9 +4,14 @@
 	 * @type {string}
 	 */
 	export let message = "";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<div class="ons-panel ons-panel--error ons-panel--no-title" id="number-of-employees-error">
+<div class="ons-panel ons-panel--error ons-panel--no-title {cls}" id="number-of-employees-error">
 	<span class="ons-panel__assistive-text ons-u-vh">Error: </span>
 	<div class="ons-panel__body">
 		{#if message}

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

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ErrorPanelEvents */
 /** @typedef {typeof __propDef.slots}  ErrorPanelSlots */
 export default class ErrorPanel extends SvelteComponentTyped<{
+    cls?: string | undefined;
     message?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -15,6 +16,7 @@ export type ErrorPanelSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         message?: string | undefined;
     };
     events: {

package/dist/inputs/ErrorSummary/ErrorSummary.svelte

@@ -11,9 +11,14 @@
 	 * @type {object[]}
 	 */
 	export let items = [];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error">
+<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error {cls}">
 	<div class="ons-panel__header">
 		<h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">{title}</h2>
 	</div>

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

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ErrorSummaryEvents */
 /** @typedef {typeof __propDef.slots}  ErrorSummarySlots */
 export default class ErrorSummary extends SvelteComponentTyped<{
+    cls?: string | undefined;
     title?: string | undefined;
     items?: object[] | undefined;
 }, {
@@ -16,6 +17,7 @@ export type ErrorSummarySlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         title?: string | undefined;
         items?: object[] | undefined;
     };

package/dist/inputs/Input/Input.svelte

@@ -68,9 +68,14 @@
 	 * @type {boolean}
 	 */
 	export let error = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<div class="ons-field">
+<div class="ons-field {cls}">
 	{#if label}
 		<label
 			class="ons-label"

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

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  InputEvents */
 /** @typedef {typeof __propDef.slots}  InputSlots */
 export default class Input extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     width?: number | undefined;
     label?: string | undefined;
@@ -27,6 +28,7 @@ export type InputSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         width?: number | undefined;
         label?: string | undefined;

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?}
@@ -25,22 +35,28 @@
 	 * @type {boolean}
 	 */
 	export let compact = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </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 {cls}">
+	{#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

@@ -2,11 +2,14 @@
 /** @typedef {typeof __propDef.events}  RadiosEvents */
 /** @typedef {typeof __propDef.slots}  RadiosSlots */
 export default class Radios extends SvelteComponentTyped<{
+    cls?: string | undefined;
     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>;
 } & {
@@ -21,11 +24,14 @@ export type RadiosSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         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/inputs/Select/Select.svelte

@@ -108,6 +108,11 @@
 		hideMenu = false;
 		dispatch("clear", value);
 	}
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	function inputValueTemplate(result) {
 		return result && result[labelKey];
@@ -183,7 +188,7 @@
 	<script src={scriptUrl} on:load={handleScriptLoad}></script>
 </svelte:head>
 
-<div class="ons-field">
+<div class="ons-field {cls}">
 	{#if label}<label for={id} class="ons-label" class:ons-u-vh={hideLabel}>{label}</label>{/if}
 	<div class="ons-autocomplete-wrapper">
 		{#if scriptLoaded}

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

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  SelectEvents */
 /** @typedef {typeof __propDef.slots}  SelectSlots */
 export default class Select extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     label?: string | undefined;
     mode?: "default" | "search" | undefined;
@@ -31,6 +32,7 @@ export type SelectSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         label?: string | undefined;
         mode?: "default" | "search" | undefined;

package/dist/inputs/Textarea/Textarea.svelte

@@ -43,11 +43,16 @@
 	 * @type {number}
 	 */
 	export let width = 30;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	$: remaining = charLimit && value.length ? charLimit - value.length : charLimit || null;
 </script>
 
-<div class="ons-field">
+<div class="ons-field {cls}">
 	{#if label}
 		<label
 			class="ons-label ons-label--with-description"

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

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  TextareaEvents */
 /** @typedef {typeof __propDef.slots}  TextareaSlots */
 export default class Textarea extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     width?: number | undefined;
     label?: string | undefined;
@@ -20,6 +21,7 @@ export type TextareaSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         width?: number | undefined;
         label?: string | undefined;

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/Accordion/Accordion.svelte

@@ -10,7 +10,7 @@
 	 */
 	export let id = slugify();
 	/**
-	 * Optional: Set a CSS class for the component
+	 * Optional: Set an additional CSS class for the component
 	 * @type {string}
 	 */
 	export let cls = "";

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

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  AccordionEvents */
 /** @typedef {typeof __propDef.slots}  AccordionSlots */
 export default class Accordion extends SvelteComponentTyped<{
-    id?: string | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     showToggle?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ export type AccordionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         showToggle?: boolean | undefined;
     };
     events: {

package/dist/layout/Breadcrumb/Breadcrumb.svelte

@@ -16,9 +16,19 @@
 	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
 	 */
 	export let width = "wide";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
+	/**
+	 * Overrides the base theme background (accepts any valid CSS background value)
+	 * @type {string|null}
+	 */
+	export let background = null;
 </script>
 
-<Container {width}>
+<Container {width} {background} {cls}>
 	<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

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

package/dist/layout/Card/Card.svelte

@@ -7,7 +7,7 @@
 	 */
 	export let id = "";
 	/**
-	 * Optional: Set a CSS class for the section
+	 * Optional: Set an additional CSS class for the section
 	 * @type {string}
 	 */
 	export let cls = "";

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

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  CardEvents */
 /** @typedef {typeof __propDef.slots}  CardSlots */
 export default class Card extends SvelteComponentTyped<{
-    id?: string | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     title?: string | undefined;
     image?: string | undefined;
     headingTag?: "h2" | "h3" | undefined;
@@ -27,8 +27,8 @@ export type CardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         title?: string | undefined;
         image?: string | undefined;
         headingTag?: "h2" | "h3" | undefined;

package/dist/layout/Contents/Contents.svelte

@@ -19,9 +19,14 @@
 	 * @type {string}
 	 */
 	export let skipHref = "";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<aside class="ons-table-of-contents-container" role="complementary">
+<aside class="ons-table-of-contents-container {cls}" role="complementary">
 	{#if skipHref}
 		<a class="ons-skip-to-content" href="#0">Skip to guide content</a>
 	{/if}

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

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ContentsEvents */
 /** @typedef {typeof __propDef.slots}  ContentsSlots */
 export default class Contents extends SvelteComponentTyped<{
+    cls?: string | undefined;
     title?: string | undefined;
     links?: object[] | undefined;
     hideTitle?: boolean | undefined;
@@ -16,6 +17,7 @@ export type ContentsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         title?: string | undefined;
         links?: object[] | undefined;
         hideTitle?: boolean | undefined;

package/dist/layout/DescriptionList/DescriptionList.svelte

@@ -14,10 +14,15 @@
 	 * @type {"default"|"inline"}
 	 */
 	export let mode = "default";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
 <dl
-	class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-mb-no {mode ===
+	class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-mb-no {cls} {mode ===
 	'inline'
 		? 'ons-u-mt-s ons-u-mt-l@l'
 		: 'ons-u-cf'}"

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

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  DescriptionListEvents */
 /** @typedef {typeof __propDef.slots}  DescriptionListSlots */
 export default class DescriptionList extends SvelteComponentTyped<{
+    cls?: string | undefined;
     title?: string | undefined;
     mode?: "default" | "inline" | undefined;
     items?: object[] | undefined;
@@ -15,6 +16,7 @@ export type DescriptionListSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         title?: string | undefined;
         mode?: "default" | "inline" | undefined;
         items?: object[] | undefined;

package/dist/layout/Details/Details.svelte

@@ -18,6 +18,11 @@
 	 * @type {boolean}
 	 */
 	export let open = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	function doToggle(e) {
 		dispatch("toggle", { open: e.newState === "open", e });
@@ -25,7 +30,7 @@
 </script>
 
 <details
-	class="ons-details ons-js-details ons-details--initialised"
+	class="ons-details ons-js-details ons-details--initialised {cls}"
 	class:ons-details--open={open}
 	bind:open
 	on:toggle={doToggle}

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

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  DetailsEvents */
 /** @typedef {typeof __propDef.slots}  DetailsSlots */
 export default class Details extends SvelteComponentTyped<{
+    cls?: string | undefined;
     title?: string | undefined;
     open?: boolean | undefined;
     headingTag?: "h2" | "h3" | undefined;
@@ -19,6 +20,7 @@ export type DetailsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         title?: string | undefined;
         open?: boolean | undefined;
         headingTag?: "h2" | "h3" | undefined;