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

package/dist/decorators/Blockquote/Blockquote.svelte

@@ -1,27 +1,27 @@
 <script>
-  /**
-   * (Optional) attribution for the quote. If you leave this blank, you will just get an indented text block.
-   * @type {string}
-   */
-  export let attribution = "";
+	/**
+	 * Attribution for the quote.
+	 * @type {string}
+	 */
+	export let attribution = "";
 </script>
 
 <blockquote class="ons-quote">
-  {#if attribution}
-    <svg
-      class="ons-svg-icon"
-      viewBox="0 0 14 10"
-      xmlns="http://www.w3.org/2000/svg"
-      focusable="false"
-      fill="currentColor"
-    >
-      <path
-        d="M13.44.77h-3l-2 4v6h6v-6h-3l2-4zm-8 0h-3l-2 4v6h6v-6h-3l2-4z"
-        transform="translate(-0.44 -0.77)"></path>
-    </svg>
-    <span class="ons-quote__text ons-u-fs-l"><slot /></span>
-    <span class="ons-quote__ref">&mdash; {attribution}</span>
-  {:else}
-    <span class="ons-quote__text ons-u-fs-l"><slot /></span>
-  {/if}
+	<svg
+		class="ons-icon"
+		viewBox="0 0 14 10"
+		xmlns="http://www.w3.org/2000/svg"
+		focusable="false"
+		fill="currentColor"
+		role="img"
+		title="ons-icon-quote"
+	>
+		<path
+			d="M13.44.77h-3l-2 4v6h6v-6h-3l2-4zm-8 0h-3l-2 4v6h6v-6h-3l2-4z"
+			transform="translate(-0.44 -0.77)"
+		/>
+	</svg><span class="ons-quote__text ons-u-fs-l"><slot /></span>
+	{#if attribution}
+		<span class="ons-quote__ref">&mdash; {attribution}</span>
+	{/if}
 </blockquote>

package/dist/{@types/decorators → decorators}/Blockquote/Blockquote.svelte.d.ts

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

package/dist/decorators/Blockquote/docs/component.md

@@ -0,0 +1,10 @@
+A component to highlight a pull quote on a page, with optional attribution.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Blockquote } from "@onsvisual/svelte-components";
+</script>
+
+<Blockquote attribution="A. Person">Some quoted text.</Blockquote>
+```

package/dist/decorators/Divider/Divider.stories.svelte

@@ -0,0 +1,29 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Divider from "./Divider.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Decorators/Divider",
+		component: Divider,
+		tags: ["autodocs"],
+		argTypes: {
+			hr: {
+				control: { type: "select" }
+			},
+			width: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story name="Default" args={{}} />
+
+<Story name="Light mode" args={{ mode: "light" }} />
+
+<Story name="Narrow divider" args={{ hr: "narrow" }} />
+
+<Story name="Invisible divider" args={{ hr: null }} />

package/dist/decorators/Divider/Divider.stories.svelte.d.ts

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

package/dist/decorators/Divider/Divider.svelte

@@ -1,66 +1,47 @@
 <script>
-  import Container from "../../wrappers/Container/Container.svelte";
+	import Container from "../../wrappers/Container/Container.svelte";
 
-  /**
-   * (Optional) Include a horizontal rule
-   * @type {"narrow"|"full"|null}
-   */
-  export let hr = "narrow";
-  /**
-   * Sets the width of the container
-   * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
-   */
-  export let width = "wide";
-  /**
-   * Sets a predefined theme
-   * @type {"light"|"dark"|"lightblue"}
-   */
-  export let theme = null;
-  /**
-   * Define additional props to override the base theme
-   * @type {object}
-   */
-  export let themeOverrides = null;
-  /**
-   * Allows client imported CSS for embeddable content
-   * @type {boolean}
-   */
-  export let allowClientOverrides = false;
-  /**
-   * Optional margin above section
-   * @type {boolean}
-   */
-  export let marginTop = false;
-  /**
-   * Optional margin below section
-   * @type {boolean}
-   */
-  export let marginBottom = true;
+	/**
+	 * Optional: Include a horizontal rule
+	 * @type {"narrow"|"full"|null}
+	 */
+	export let hr = "full";
+	/**
+	 * Sets the width of the container
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "wide";
+	/**
+	 * Sets the mode/colour of the line
+	 * @type {"dark"|"light"}
+	 */
+	export let mode = "dark";
+	/**
+	 * Optional margin above section
+	 * @type {boolean}
+	 */
+	export let marginTop = !!hr;
+	/**
+	 * Optional margin below section
+	 * @type {boolean}
+	 */
+	export let marginBottom = true;
 </script>
 
-<Container
-  theme="{theme}"
-  themeOverrides="{themeOverrides}"
-  allowClientOverrides="{allowClientOverrides}"
-  width="{width}"
-  marginTop="{marginTop}"
-  marginBottom="{marginBottom}"
->
-  <hr class:hr-full="{hr === 'full'}" class:hr-narrow="{hr === 'narrow'}" />
+<Container {width} {marginTop} {marginBottom}>
+	<hr
+		class="ons-u-mt-no"
+		class:ons-u-vh={!hr}
+		class:ons-svelte-hr-narrow={hr === "narrow"}
+		class:ons-svelte-hr-light={hr && mode === "light"}
+	/>
 </Container>
 
 <style>
-  hr {
-    border: none;
-    margin: -10px 0 0;
-  }
-  hr.hr-full,
-  hr.hr-narrow {
-    border-top: 2px solid var(--muted, #777);
-  }
-  hr.hr-full {
-    width: 100%;
-  }
-  hr.hr-narrow {
-    width: 75px;
-  }</style>
+	.ons-svelte-hr-narrow {
+		width: 75px;
+	}
+	.ons-svelte-hr-light {
+		border-color: var(--ons-color-borders-light);
+	}
+</style>

package/dist/{@types/decorators → decorators}/Divider/Divider.svelte.d.ts

@@ -2,13 +2,11 @@
 /** @typedef {typeof __propDef.events}  DividerEvents */
 /** @typedef {typeof __propDef.slots}  DividerSlots */
 export default class Divider extends SvelteComponentTyped<{
-    theme?: "light" | "dark" | "lightblue";
-    allowClientOverrides?: boolean;
-    width?: "narrow" | "medium" | "wide" | "wider" | "full";
-    marginTop?: boolean;
-    marginBottom?: boolean;
-    themeOverrides?: any;
-    hr?: "narrow" | "full";
+    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+    marginTop?: boolean | undefined;
+    marginBottom?: boolean | undefined;
+    hr?: "narrow" | "full" | null | undefined;
+    mode?: "light" | "dark" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -19,13 +17,11 @@ export type DividerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark" | "lightblue";
-        allowClientOverrides?: boolean;
-        width?: "narrow" | "medium" | "wide" | "wider" | "full";
-        marginTop?: boolean;
-        marginBottom?: boolean;
-        themeOverrides?: object;
-        hr?: "narrow" | "full" | null;
+        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+        marginTop?: boolean | undefined;
+        marginBottom?: boolean | undefined;
+        hr?: "narrow" | "full" | null | undefined;
+        mode?: "light" | "dark" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/decorators/Divider/docs/component.md

@@ -0,0 +1,12 @@
+A component to draw a divider between blocks of contnet.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Divider } from "@onsvisual/svelte-components";
+</script>
+
+<!-- Some content blocks -->
+<Divider />
+<!-- More content blocks -->
+```

package/dist/decorators/Em/Em.stories.svelte

@@ -0,0 +1,30 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Em from "./Em.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Decorators/Em",
+		component: Em,
+		tags: ["autodocs"],
+		argTypes: {
+			color: {
+				control: { type: "color" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Em {...args}>{args.text}</Em>
+{/snippet}
+
+<Story name="Mark mode" args={{ text: "Text on grey background" }} {template} />
+
+<Story
+	name="Badge mode"
+	args={{ text: "Text on badge", color: "navy", mode: "badge" }}
+	{template}
+/>

package/dist/{@types/decorators/Em/Em.svelte.d.ts → decorators/Em/Em.stories.svelte.d.ts}

@@ -2,13 +2,10 @@
 /** @typedef {typeof __propDef.events}  EmEvents */
 /** @typedef {typeof __propDef.slots}  EmSlots */
 export default class Em extends SvelteComponentTyped<{
-    color?: string;
-    nowrap?: boolean;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+}, {}> {
 }
 export type EmProps = typeof __propDef.props;
 export type EmEvents = typeof __propDef.events;
@@ -16,14 +13,11 @@ export type EmSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        color?: string;
-        nowrap?: boolean;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export {};

package/dist/decorators/Em/Em.svelte

@@ -1,35 +1,52 @@
 <script>
-  import { contrastColor } from "../../js/utils";
+	import { contrastColor } from "../../js/utils";
 
-  /**
-   * Any valid CSS colour
-   * @type {string}
-   */
-  export let color = "lightgrey";
-  /**
-   * Don't break text across lines
-   * @type {boolean}
-   */
-  export let nowrap = true;
+	/**
+	 * Any valid CSS colour
+	 * @type {string}
+	 */
+	export let color = "lightgrey";
+	/**
+	 * Any valid CSS colour (CSS variables will not be parsed)
+	 * @type {"default"|"badge"}
+	 */
+	export let mode = "default";
+	/**
+	 * Override the font size of the surrounding text
+	 * @type {string}
+	 */
+	export let fontSize = "";
+	/**
+	 * Don't break text across lines
+	 * @type {boolean}
+	 */
+	export let nowrap = true;
 
-  $: text = contrastColor(color);
+	$: text = contrastColor(color);
 </script>
 
 <mark
-  class="em"
-  class:nowrap="{nowrap}"
-  style:background-color="{color}"
-  style:color="{text}"
-  role="presentation"
+	class:ons-svelte-mark={mode === "default"}
+	class:ons-svelte-badge={mode === "badge"}
+	class:ons-u-nowrap={nowrap}
+	style:background-color={color}
+	style:color={text}
+	style:font-size={fontSize}
+	role="presentation"
 >
-  <slot />
+	<slot />
 </mark>
 
 <style>
-  .em {
-    padding: 1px 4px 1px 4px;
-    font-weight: bold;
-  }
-  .nowrap {
-    white-space: nowrap;
-  }</style>
+	.ons-svelte-mark {
+		padding: 1px 4px 1px 4px;
+	}
+	.ons-svelte-badge {
+		display: inline-block;
+		line-height: 1;
+		padding: 6px 8px;
+		border-radius: 4px;
+		box-shadow: none;
+		transform: translateY(-4px);
+	}
+</style>

package/dist/decorators/Em/Em.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  EmProps */
+/** @typedef {typeof __propDef.events}  EmEvents */
+/** @typedef {typeof __propDef.slots}  EmSlots */
+export default class Em extends SvelteComponentTyped<{
+    mode?: "default" | "badge" | undefined;
+    color?: string | undefined;
+    fontSize?: string | undefined;
+    nowrap?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type EmProps = typeof __propDef.props;
+export type EmEvents = typeof __propDef.events;
+export type EmSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        mode?: "default" | "badge" | undefined;
+        color?: string | undefined;
+        fontSize?: string | undefined;
+        nowrap?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/decorators/Em/docs/component.md

@@ -0,0 +1,12 @@
+A component to visually highlight text. Can be used for inline text or to provide a "badge".
+
+Consists of a `<mark>` element with a custom background color, where the highlighted text will automatically appear black or white to maximise contrast.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Em } from "@onsvisual/svelte-components";
+</script>
+
+<Em color="steelblue">Highlighted text</Em>
+```

package/dist/decorators/Indent/Indent.stories.svelte

@@ -0,0 +1,22 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Indent from "./Indent.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Decorators/Indent",
+		component: Indent,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Indent {...args}>
+		<p>An indented paragraph of text.</p>
+	</Indent>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />

package/dist/decorators/Indent/Indent.stories.svelte.d.ts

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

package/dist/decorators/Indent/Indent.svelte

@@ -0,0 +1,3 @@
+<div class="ons-text-indent">
+	<slot />
+</div>

package/dist/decorators/Indent/Indent.svelte.d.ts

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

package/dist/decorators/Indent/docs/component.md

@@ -0,0 +1,10 @@
+An indented block of text.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Indent } from "@onsvisual/svelte-components";
+</script>
+
+<Indent>{indented_text}</Indent>
+```

package/dist/{@types/index.d.ts → index.d.ts}

@@ -6,18 +6,19 @@ export { default as Observe } from "./wrappers/Observe/Observe.svelte";
 export { default as Theme } from "./wrappers/Theme/Theme.svelte";
 export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
 export { default as AccordionItem } from "./layout/Accordion/AccordionItem.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 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 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";
@@ -26,15 +27,11 @@ 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";
-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";
@@ -44,10 +41,13 @@ export { default as ErrorSummary } from "./inputs/ErrorSummary/ErrorSummary.svel
 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 Textarea } from "./inputs/Textarea/Textarea.svelte";
 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 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";
+export { default as Hero, default as Titleblock } from "./layout/Hero/Hero.svelte";
+export { default as Select, default as AccessibleSelect } from "./inputs/Select/Select.svelte";