@onsvisual/svelte-components 0.1.104 → 1.0.0-next.1

package/dist/index.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 // Wrappers
 export { default as Container } from "./wrappers/Container/Container.svelte";
 export { default as Embed } from "./wrappers/Embed/Embed.svelte";
@@ -11,18 +13,23 @@ export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
 export { default as AccordionItem } from "./layout/Accordion/AccordionItem.svelte";
 export { default as AnalyticsBanner } from "./layout/AnalyticsBanner/AnalyticsBanner.svelte";
 export { analyticsEvent } from "./layout/AnalyticsBanner/AnalyticsBanner.svelte";
-export { default as Backlink } from "./layout/Backlink/Backlink.svelte";
+export { default as BackLink } from "./layout/BackLink/BackLink.svelte";
 export { default as Breadcrumb } from "./layout/Breadcrumb/Breadcrumb.svelte";
-export { default as Cards } from "./layout/Cards/Cards.svelte";
-export { default as Card } from "./layout/Cards/Card.svelte";
+export { default as Card } from "./layout/Card/Card.svelte";
 export { default as Contents } from "./layout/Contents/Contents.svelte";
+export { default as DescriptionList } from "./layout/DescriptionList/DescriptionList.svelte";
+export { default as Details } from "./layout/Details/Details.svelte";
+export { default as Twisty } from "./layout/Details/Details.svelte"; // Alias for Details
 export { default as ErrorPage } from "./layout/ErrorPage/ErrorPage.svelte";
 export { default as Footer } from "./layout/Footer/Footer.svelte";
 export { default as Grid } from "./layout/Grid/Grid.svelte";
+export { default as GridCell } from "./layout/Grid/GridCell.svelte";
 export { default as Header } from "./layout/Header/Header.svelte";
 export { default as Hero } from "./layout/Hero/Hero.svelte";
+export { default as Titleblock } from "./layout/Hero/Hero.svelte"; // Alias for Hero
 export { default as Highlight } from "./layout/Highlight/Highlight.svelte";
 export { default as List } from "./layout/List/List.svelte";
+export { default as Li } from "./layout/List/Li.svelte";
 export { default as NavSection } from "./layout/NavSections/NavSection.svelte";
 export { default as NavSections } from "./layout/NavSections/NavSections.svelte";
 export { default as Notice } from "./layout/Notice/Notice.svelte";
@@ -31,17 +38,13 @@ export { default as RelatedContent } from "./layout/RelatedContent/RelatedConten
 export { default as Scroller } from "./layout/Scroller/Scroller.svelte";
 export { default as ScrollerSection } from "./layout/Scroller/ScrollerSection.svelte";
 export { default as Section } from "./layout/Section/Section.svelte";
-export { default as SkipLink } from "./layout/SkipLink/SkipLink.svelte";
 export { default as ShareButtons } from "./layout/ShareButtons/ShareButtons.svelte";
+export { default as SkipLink } from "./layout/SkipLink/SkipLink.svelte";
 export { default as Summary } from "./layout/Summary/Summary.svelte";
-export { default as Survey } from "./layout/Survey/Survey.svelte";
 export { default as Tabs } from "./layout/Tabs/Tabs.svelte";
 export { default as Tab } from "./layout/Tabs/Tab.svelte";
-export { default as Titleblock } from "./layout/Titleblock/Titleblock.svelte";
-export { default as Twisty } from "./layout/Twisty/Twisty.svelte";
 
 // Inputs
-export { default as AccessibleSelect } from "./inputs/AccessibleSelect/AccessibleSelect.svelte";
 export { default as Button } from "./inputs/Button/Button.svelte";
 export { default as Checkbox } from "./inputs/Checkbox/Checkbox.svelte";
 export { default as Checkboxes } from "./inputs/Checkboxes/Checkboxes.svelte";
@@ -52,12 +55,14 @@ export { default as Input } from "./inputs/Input/Input.svelte";
 export { default as Radio } from "./inputs/Radios/Radio.svelte";
 export { default as Radios } from "./inputs/Radios/Radios.svelte";
 export { default as Select } from "./inputs/Select/Select.svelte";
+export { default as AccessibleSelect } from "./inputs/Select/Select.svelte"; // Alias for Select
 export { default as Textarea } from "./inputs/Textarea/Textarea.svelte";
 
 // Decorators
 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";
 
 // Data visualisation
 export { default as Table } from "./datavis/Table/Table.svelte";

package/dist/inputs/Button/Button.stories.svelte

@@ -0,0 +1,65 @@
+<script module>
+	// @ts-ignore
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Button from "./Button.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Button",
+		component: Button,
+		tags: ["autodocs"],
+		argTypes: {
+			type: {
+				options: ["button", "submit", "reset"],
+				control: { type: "select" }
+			},
+			variant: {
+				options: ["primary", "secondary", "ghost"],
+				control: { type: "select" }
+			},
+			icon: {
+				options: ["", "arrow", "search", "download", "tick", "print", "externalLink"],
+				control: { type: "select" }
+			},
+			iconPosition: {
+				options: ["before", "after"],
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div
+		style:padding="12px"
+		style:background={args?.variant === "ghost" ? "var(--ons-color-ocean-blue)" : null}
+	>
+		<Button {...args}>{args.text}</Button>
+	</div>
+{/snippet}
+
+<Story name="Default" args={{ text: "Primary button" }} {template} />
+
+<Story name="Link" args={{ text: "Button-styled link", href: "#" }} {template} />
+
+<Story name="Secondary" args={{ text: "Secondary button", variant: "secondary" }} {template} />
+
+<Story name="Ghost" args={{ text: "Ghost button", variant: "ghost" }} {template} />
+
+<Story name="Small" args={{ text: "Small button", small: true }} {template} />
+
+<Story name="Icon before" args={{ text: "Download", icon: "download" }} {template} />
+
+<Story
+	name="Icon after"
+	args={{ text: "Continue", icon: "arrow", iconPosition: "after" }}
+	{template}
+/>
+
+<Story
+	name="Icon only, hidden text"
+	args={{ text: "Search", icon: "search", hideLabel: true }}
+	{template}
+/>

package/dist/inputs/Button/Button.stories.svelte.d.ts

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

package/dist/inputs/Button/Button.svelte

@@ -1,121 +1,121 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-  import Icon from "./Icon.svelte";
+	import { createEventDispatcher } from "svelte";
+	import Icon from "./Icon.svelte";
 
-  const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-  /**
-   * Type of button
-   * @type {"button"|"sumbit"|"reset"}
-   */
-  export let type = "button";
-  /**
-   * Style variant of button
-   * @type {"primary"|"secondary"|"ghost"}
-   */
-  export let variant = "primary";
-  /**
-   * Href of button (renders button as a link)
-   * @type {string}
-   */
-  export let href = "";
-  /**
-   * Make button smaller
-   * @type {boolean}
-   */
-  export let small = false;
-  /**
-   * Icon on button, eg. "arrow", "search"
-   * @type {string}
-   */
-  export let icon = "";
-  /**
-   * Position of icon
-   * @type {"before"|"after"}
-   */
-  export let iconPosition = "before";
-  /**
-   * Show button as disabled
-   * @type {boolean}
-   */
-  export let disabled = false;
-  /**
-   * Visually hide the button text (for icon-only buttons)
-   * @type {boolean}
-   */
-  export let hideLabel = false;
-  /**
-   * aria label for button
-   * @type {string}
-   */
-  export let arialabel = "";
-  /**
-   * filename if link is used for a file download
-   * @type {string|null}
-   */
-  export let download = null;
+	/**
+	 * Type of button
+	 * @type {"button"|"sumbit"|"reset"}
+	 */
+	export let type = "button";
+	/**
+	 * Style variant of button
+	 * @type {"primary"|"secondary"|"ghost"}
+	 */
+	export let variant = "primary";
+	/**
+	 * Href of button (renders button as a link)
+	 * @type {string}
+	 */
+	export let href = "";
+	/**
+	 * Make button smaller
+	 * @type {boolean}
+	 */
+	export let small = false;
+	/**
+	 * Icon on button, eg. "arrow", "search"
+	 * @type {string}
+	 */
+	export let icon = "";
+	/**
+	 * Position of icon
+	 * @type {"before"|"after"}
+	 */
+	export let iconPosition = "before";
+	/**
+	 * Show button as disabled
+	 * @type {boolean}
+	 */
+	export let disabled = false;
+	/**
+	 * Visually hide the button text (for icon-only buttons)
+	 * @type {boolean}
+	 */
+	export let hideLabel = false;
+	/**
+	 * aria label for button
+	 * @type {string}
+	 */
+	export let arialabel = "";
+	/**
+	 * filename if link is used for a file download
+	 * @type {string}
+	 */
+	export let download = "";
 </script>
 
 {#if href}
-  <a
-    href="{!disabled ? href : null}"
-    role="button"
-    download="{download}"
-    class="ons-btn ons-btn--link ons-js-submit-btn"
-    class:ons-btn--small="{small}"
-    class:ons-btn--secondary="{variant === 'secondary'}"
-    class:ons-btn--ghost="{variant === 'ghost'}"
-    class:ons-btn--disabled="{disabled}"
-    disabled="{disabled}"
-    on:click="{(e) => dispatch('click', e)}"
-    aria-label="{arialabel}"
-  >
-    <span class="ons-btn__inner">
-      {#if iconPosition === "before"}
-        <slot name="icon">
-          {#if icon}
-            <Icon type="{icon}" marginRight="{!hideLabel}" />
-          {/if}
-        </slot>
-      {/if}
-      <span class="ons-btn__text" class:ons-u-vh="{hideLabel}"><slot /></span>
-      {#if iconPosition === "after"}
-        <slot name="icon">
-          {#if icon}
-            <Icon type="{icon}" marginLeft="{!hideLabel}" />
-          {/if}
-        </slot>
-      {/if}
-    </span>
-  </a>
+	<a
+		href={!disabled ? href : null}
+		role="button"
+		{download}
+		class="ons-btn ons-btn--link ons-js-submit-btn"
+		class:ons-btn--small={small}
+		class:ons-btn--secondary={variant === "secondary"}
+		class:ons-btn--ghost={variant === "ghost"}
+		class:ons-btn--disabled={disabled}
+		{disabled}
+		on:click={(e) => dispatch("click", e)}
+		aria-label={arialabel}
+	>
+		<span class="ons-btn__inner">
+			{#if iconPosition === "before"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginRight={!hideLabel} />
+					{/if}
+				</slot>
+			{/if}
+			<span class="ons-btn__text" class:ons-u-vh={hideLabel}><slot /></span>
+			{#if iconPosition === "after"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginLeft={!hideLabel} />
+					{/if}
+				</slot>
+			{/if}
+		</span>
+	</a>
 {:else}
-  <button
-    type="{type}"
-    class="ons-btn"
-    class:ons-btn--small="{small}"
-    class:ons-btn--secondary="{variant === 'secondary'}"
-    class:ons-btn--ghost="{variant === 'ghost'}"
-    class:ons-btn--disabled="{disabled}"
-    disabled="{disabled}"
-    on:click="{(e) => dispatch('click', e)}"
-    aria-label="{arialabel}"
-  >
-    <span class="ons-btn__inner">
-      {#if iconPosition === "before"}
-        <slot name="icon">
-          {#if icon}
-            <Icon type="{icon}" marginRight="{!hideLabel}" />
-          {/if}
-        </slot>
-      {/if}
-      <span class="ons-btn__text" class:ons-u-vh="{hideLabel}"><slot /></span>
-      {#if iconPosition === "after"}
-        <slot name="icon">
-          {#if icon}
-            <Icon type="{icon}" marginLeft="{!hideLabel}" />
-          {/if}
-        </slot>
-      {/if}
-    </span>
-  </button>
+	<button
+		{type}
+		class="ons-btn"
+		class:ons-btn--small={small}
+		class:ons-btn--secondary={variant === "secondary"}
+		class:ons-btn--ghost={variant === "ghost"}
+		class:ons-btn--disabled={disabled}
+		{disabled}
+		on:click={(e) => dispatch("click", e)}
+		aria-label={arialabel}
+	>
+		<span class="ons-btn__inner">
+			{#if iconPosition === "before"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginRight={!hideLabel} />
+					{/if}
+				</slot>
+			{/if}
+			<span class="ons-btn__text" class:ons-u-vh={hideLabel}><slot /></span>
+			{#if iconPosition === "after"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginLeft={!hideLabel} />
+					{/if}
+				</slot>
+			{/if}
+		</span>
+	</button>
 {/if}

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

@@ -0,0 +1,51 @@
+/** @typedef {typeof __propDef.props}  ButtonProps */
+/** @typedef {typeof __propDef.events}  ButtonEvents */
+/** @typedef {typeof __propDef.slots}  ButtonSlots */
+export default class Button extends SvelteComponentTyped<{
+    small?: boolean | undefined;
+    href?: string | undefined;
+    type?: "button" | "reset" | "sumbit" | undefined;
+    variant?: "secondary" | "primary" | "ghost" | undefined;
+    icon?: string | undefined;
+    iconPosition?: "before" | "after" | undefined;
+    disabled?: boolean | undefined;
+    hideLabel?: boolean | undefined;
+    arialabel?: string | undefined;
+    download?: string | undefined;
+}, {
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    default: {};
+}> {
+}
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        small?: boolean | undefined;
+        href?: string | undefined;
+        type?: "button" | "reset" | "sumbit" | undefined;
+        variant?: "secondary" | "primary" | "ghost" | undefined;
+        icon?: string | undefined;
+        iconPosition?: "before" | "after" | undefined;
+        disabled?: boolean | undefined;
+        hideLabel?: boolean | undefined;
+        arialabel?: string | undefined;
+        download?: string | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+    };
+};
+export {};

package/dist/inputs/Button/Icon.svelte

@@ -1,50 +1,50 @@
 <script>
-  export let type = "arrow";
-  export let marginLeft = false;
-  export let marginRight = false;
+	export let type = "arrow";
+	export let marginLeft = false;
+	export let marginRight = false;
 
-  const paths = {
-    arrow: {
-      d: "m10 .2-.9.9c-.1.1-.1.4 0 .5l4 4H.6c-.2 0-.4.2-.4.4v1.2c0 .2.2.4.4.4h12.5l-3.9 3.7c-.2.2-.2.4 0 .6l.8.9c.2.2.4.2.6 0L16.8 7c.2-.2.2-.4 0-.6L10.7.3c-.3-.2-.5-.2-.7-.1z",
-      viewBox: "0 0 17 13",
-    },
-    externalLink: {
-      d: "M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z",
-      viewBox: "2 2 12 12",
-    },
-    signout: {
-      d: "M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z",
-      viewBox: "0 0 12 12",
-    },
-    print: {
-      d: "M17 4H3C1.3 4 0 5.2 0 6.8v5.5h4V16h12v-3.7h4V6.8C20 5.2 18.7 4 17 4zm-3 10H6V9h8v5zm3-6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-1-8H4v3h12V0z",
-      viewBox: "0 0 20 16",
-    },
-    download: {
-      d: "M5.6 9a.48.48 0 0 0 .7 0l3-3.2a.48.48 0 0 0 0-.7C9.3 5 9.2 5 9 5H7.5V.5A.47.47 0 0 0 7 0H5a.47.47 0 0 0-.5.5V5H3a.47.47 0 0 0-.5.5.37.37 0 0 0 .1.3Z M11.5 9H11a.47.47 0 0 0-.5.5v1h-9v-1A.47.47 0 0 0 1 9H.5a.47.47 0 0 0-.5.5v2a.47.47 0 0 0 .5.5h11a.47.47 0 0 0 .5-.5v-2a.47.47 0 0 0-.5-.5Z",
-      viewBox: "0 0 12 12",
-    },
-    tick: {
-      d: "M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z",
-      viewBox: "1.5 3 13 10",
-    },
-    search: {
-      d: "M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z",
-      viewBox: "0 0 12 12",
-    },
-  };
+	const paths = {
+		arrow: {
+			d: "m10 .2-.9.9c-.1.1-.1.4 0 .5l4 4H.6c-.2 0-.4.2-.4.4v1.2c0 .2.2.4.4.4h12.5l-3.9 3.7c-.2.2-.2.4 0 .6l.8.9c.2.2.4.2.6 0L16.8 7c.2-.2.2-.4 0-.6L10.7.3c-.3-.2-.5-.2-.7-.1z",
+			viewBox: "0 0 17 13"
+		},
+		externalLink: {
+			d: "M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z",
+			viewBox: "2 2 12 12"
+		},
+		signout: {
+			d: "M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z",
+			viewBox: "0 0 12 12"
+		},
+		print: {
+			d: "M17 4H3C1.3 4 0 5.2 0 6.8v5.5h4V16h12v-3.7h4V6.8C20 5.2 18.7 4 17 4zm-3 10H6V9h8v5zm3-6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-1-8H4v3h12V0z",
+			viewBox: "0 0 20 16"
+		},
+		download: {
+			d: "M5.6 9a.48.48 0 0 0 .7 0l3-3.2a.48.48 0 0 0 0-.7C9.3 5 9.2 5 9 5H7.5V.5A.47.47 0 0 0 7 0H5a.47.47 0 0 0-.5.5V5H3a.47.47 0 0 0-.5.5.37.37 0 0 0 .1.3Z M11.5 9H11a.47.47 0 0 0-.5.5v1h-9v-1A.47.47 0 0 0 1 9H.5a.47.47 0 0 0-.5.5v2a.47.47 0 0 0 .5.5h11a.47.47 0 0 0 .5-.5v-2a.47.47 0 0 0-.5-.5Z",
+			viewBox: "0 0 12 12"
+		},
+		tick: {
+			d: "M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z",
+			viewBox: "1.5 3 13 10"
+		},
+		search: {
+			d: "M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z",
+			viewBox: "0 0 12 12"
+		}
+	};
 </script>
 
 {#if paths[type]}
-  <svg
-    class="ons-svg-icon"
-    class:ons-u-ml-xs="{marginLeft}"
-    class:ons-u-mr-xs="{marginRight}"
-    viewBox="{paths[type].viewBox}"
-    xmlns="http://www.w3.org/2000/svg"
-    focusable="false"
-    fill="currentColor"
-  >
-    <path d="{paths[type].d}"></path>
-  </svg>
+	<svg
+		class="ons-icon"
+		class:ons-u-ml-2xs={marginLeft}
+		class:ons-u-mr-2xs={marginRight}
+		viewBox={paths[type].viewBox}
+		xmlns="http://www.w3.org/2000/svg"
+		focusable="false"
+		fill="currentColor"
+	>
+		<path d={paths[type].d}></path>
+	</svg>
 {/if}

package/dist/{@types/inputs → inputs}/Button/Icon.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  IconEvents */
 /** @typedef {typeof __propDef.slots}  IconSlots */
 export default class Icon extends SvelteComponentTyped<{
-    type?: string;
-    marginLeft?: boolean;
-    marginRight?: boolean;
+    type?: string | undefined;
+    marginLeft?: boolean | undefined;
+    marginRight?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -15,9 +15,9 @@ export type IconSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        type?: string;
-        marginLeft?: boolean;
-        marginRight?: boolean;
+        type?: string | undefined;
+        marginLeft?: boolean | undefined;
+        marginRight?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,17 @@
+A button/link component that can be styled in various ways. It will render as an `<a>` link if it has an `href` property defined.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Button } from "@onsvisual/svelte-components";
+
+  // Define your own function on click
+  const handleClick = (e) => console.log(e);
+</script>
+
+<!-- Standard button with on:click function -->
+<Button on:click="{handleClick}">Button text</Button>
+
+<!-- Button-styled link with href -->
+<Button href="#">Link text</Button>
+```

package/dist/inputs/Checkbox/Checkbox.stories.svelte

@@ -0,0 +1,34 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Checkbox from "./Checkbox.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Checkbox",
+		component: Checkbox,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div
+		style:padding="12px"
+		style:background={args?.variant === "ghost" ? "var(--ons-color-ocean-blue)" : null}
+		style:color={args?.variant === "ghost" ? "white" : null}
+	>
+		<Checkbox {...args} />
+	</div>
+{/snippet}
+
+<Story name="Default" args={{ id: "checkbox1", label: "Select this" }} {template} />
+
+<Story name="Compact" args={{ id: "checkbox2", label: "Select this", compact: true }} {template} />
+
+<Story
+	name="Ghost checkbox"
+	args={{ id: "checkbox3", label: "Select this", variant: "ghost" }}
+	{template}
+/>

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

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