@onsvisual/svelte-components 1.0.25 → 1.0.28

package/dist/inputs/Toolbar/ToolControls.svelte.d.ts

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

package/dist/inputs/Toolbar/Toolbar.stories.svelte

@@ -0,0 +1,148 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import ToolbarsContainer from "./ToolbarsContainer.svelte";
+	import Toolbar from "./Toolbar.svelte";
+	import ToolbarButton from "./ToolbarButton.svelte";
+	import ToolbarDivider from "./ToolbarDivider.svelte";
+	import movepanimg from "./img/movepan.png";
+	import Button from "../Button/Button.svelte";
+	import ToolControls from "./ToolControls.svelte";
+	import ToolControl from "./ToolControl.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	let container;
+
+	const toolbarContent = [
+		{
+			type: "button",
+			id: "move",
+			icon: "move",
+			label: "Move and Pan",
+			helpContent: `<h3>Move and pan</h3><p>Left-click anywhere on the map and hold the button down while dragging the mouse to move the map in the desired direction.</p><img src='${movepanimg}' alt='Move and pan' />`
+		},
+		{
+			type: "button",
+			id: "polygon",
+			icon: "polygon",
+			label: "Draw a polygon",
+			helpContent:
+				"<h3>Draw a polygon</h3><p>Left-click to add a point to the polygon. Double-click to finish drawing.</p>",
+			hasAriaControls: true
+		},
+		{
+			type: "button",
+			id: "circle",
+			icon: "radius",
+			label: "Draw a circle",
+			helpContent:
+				"<h3>Draw a circle</h3><p>Left-click anywhere on the map and hold the button down while dragging the mouse to move the map in the desired direction.</p>"
+		},
+		{
+			type: "divider"
+		},
+		{
+			type: "button",
+			id: "zoomin",
+			icon: "zoomin",
+			label: "Zoom in",
+			helpContent:
+				"<h3>Zoom in</h3><p>Left-click anywhere on the map and hold the button down while dragging the mouse to move the map in the desired direction.</p>"
+		},
+		{
+			type: "button",
+			id: "zoomout",
+			icon: "zoomout",
+			label: "Zoom out",
+			helpContent:
+				"<h3>Zoom out</h3><p>Left-click anywhere on the map and hold the button down while dragging the mouse to move the map in the desired direction.</p>"
+		},
+		{
+			type: "divider"
+		},
+		{
+			type: "button",
+			id: "undo",
+			icon: "undo",
+			label: "Undo last step",
+			helpContent:
+				"<h3>Undo last step</h3><p>Left-click anywhere on the map and hold the button down while dragging the mouse to move the map in the desired direction.</p>"
+		},
+		{
+			type: "button",
+			id: "redo",
+			icon: "redo",
+			label: "Redo last step",
+			helpContent:
+				"<h3>Redo last step</h3><p>Left-click anywhere on the map and hold the button down while dragging the mouse to move the map in the desired direction.</p>",
+			disabled: true
+		},
+		{
+			type: "divider"
+		},
+		{
+			type: "button",
+			id: "search",
+			icon: "search",
+			label: "Search for an area",
+			helpContent: "<h3>Search</h3><p>Search for an area by name or postcode.</p>"
+		}
+	];
+
+	const { Story } = defineMeta({
+		title: "Inputs/Toolbar",
+		component: ToolbarsContainer,
+		tags: ["autodocs"],
+		argTypes: {
+			orientation: {
+				options: ["horizontal", "vertical"],
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<ToolbarsContainer bind:this={container}>
+		<Toolbar orientation={args.orientation} ariaLabel={args.ariaLabel}>
+			{#each toolbarContent as { type, id, icon, label, helpContent, disabled, hasAriaControls }}
+				{#if type === "button"}
+					<ToolbarButton {id} {icon} {label} {disabled} {hasAriaControls}>
+						{@html helpContent}
+					</ToolbarButton>
+				{:else}
+					<ToolbarDivider />
+				{/if}
+			{/each}
+			<ToolControls slot="controls">
+				<ToolControl id="polygon">
+					<p>
+						Click or tap an area on the map to add a node to the shape. To apply a shape, close it
+						by clicking or tapping on the starting node.
+					</p>
+					<Button variant="secondary" disabled>Clear shape</Button>
+					<Button variant="primary">Apply shape</Button>
+				</ToolControl>
+			</ToolControls>
+		</Toolbar>
+		<Toolbar orientation={args.orientation}>
+			<ToolbarButton id="download" icon="download" label="Download area" />
+			<ToolbarButton id="upload" icon="upload" label="Upload a geometry" />
+			<ToolbarDivider />
+			<ToolbarButton id="help" icon="help" label="Help" on:click={container.resetHelp} />
+			<ToolbarDivider />
+			<ToolbarButton id="getstarted" custom label="Get started">
+				<div slot="custom">
+					<Button disabled small>Build profile</Button>
+				</div>
+			</ToolbarButton>
+		</Toolbar>
+	</ToolbarsContainer>
+{/snippet}
+
+{#snippet transient(args)}{/snippet}
+
+<Story name="Default" args={{ ariaLabel: "Toolbar" }} {template} />
+
+<Story name="Vertical" args={{ orientation: "vertical" }} {template} />

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

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

package/dist/inputs/Toolbar/Toolbar.svelte

@@ -0,0 +1,70 @@
+<script>
+	import { getContext, setContext } from "svelte";
+	import { writable } from "svelte/store";
+
+	/**
+	 * @typedef {object} ToolbarProps
+	 * @property {string | null} [classes=null] - Additional classes for the button
+	 * @property {string | null} [ariaLabel=null] - aria label for button
+	 * @property {'horizontal' | 'vertical'} [orientation='horizontal'] - Orientation of the toolbar
+	 */
+
+	/** @type {ToolbarProps} */
+	let { classes = null, ariaLabel = null, orientation = "horizontal" } = $props();
+
+	// Set context for child components
+	const orientationStore = writable(orientation);
+	setContext("orientation", orientationStore);
+
+	$effect(() => {
+		orientationStore.set(orientation);
+	});
+
+	// Get the showHelpModals state from context
+	const showHelpModals = getContext("showHelpModals");
+	const showHelp = $derived(showHelpModals);
+</script>
+
+<!-- Toolbar container -->
+<div
+	role="toolbar"
+	aria-label={ariaLabel}
+	class={`toolbar ${orientation === "vertical" ? "" : "flex-col"} ${classes}`}
+>
+	<!-- slot for helpModal -->
+	<div class={`grid--flex ${orientation === "vertical" ? "flex-col" : ""}`}>
+		<slot />
+	</div>
+
+	{#if !$showHelp}
+		<slot name="controls" />
+	{/if}
+</div>
+
+<style>
+	.grid--flex {
+		display: flex;
+		gap: 4px;
+	}
+
+	.toolbar {
+		display: flex;
+		align-items: center;
+		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
+		border-radius: 8px;
+		padding: 8px;
+		justify-content: flex-start;
+		align-content: flex-start;
+		flex-wrap: nowrap;
+		width: auto;
+		max-width: fit-content;
+		height: 100%;
+		margin: 8px;
+		background: white;
+		pointer-events: all;
+	}
+
+	.flex-col {
+		flex-direction: column;
+	}
+</style>

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

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  ToolbarProps */
+/** @typedef {typeof __propDef.events}  ToolbarEvents */
+/** @typedef {typeof __propDef.slots}  ToolbarSlots */
+export default class Toolbar extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    controls: {};
+}> {
+}
+export type ToolbarProps = typeof __propDef.props;
+export type ToolbarEvents = typeof __propDef.events;
+export type ToolbarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        controls: {};
+    };
+};
+export {};

package/dist/inputs/Toolbar/ToolbarButton.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { onMount, onDestroy, createEventDispatcher, getContext } from "svelte";
+	import Icon from "./ToolbarIcon.svelte";
+	import HelpModal from "./HelpModal.svelte";
+	import { nanoid } from "nanoid";
+
+	// Props for the ToolbarButton
+	let {
+		id = nanoid(6),
+		icon = "",
+		label = "",
+		disabled = false,
+		classes = "",
+		helpText = null,
+		selected = false,
+		custom = false,
+		hasAriaControls = false,
+		sticky = false,
+		transient = false,
+		disableHelp = false
+	}: {
+		id?: string;
+		icon?: string;
+		label?: string;
+		disabled?: boolean;
+		classes?: string;
+		helpText?: string | null;
+		selected?: boolean;
+		custom?: boolean;
+		hasAriaControls?: boolean;
+		sticky?: boolean;
+		transient?: boolean;
+		disableHelp?: boolean;
+	} = $props();
+
+	const dispatch = createEventDispatcher();
+
+	let buttonElement: HTMLElement;
+
+	// Get activeModalId store from context
+	const activeModalId = getContext("activeModalId");
+	const currentActiveId = $derived(activeModalId);
+	const isActive = $derived($currentActiveId === id);
+
+	// Retrieve button registry from context
+	const { register, unregister } = getContext("buttonIds");
+
+	// Register button on mount
+	onMount(() => {
+		register(id);
+	});
+
+	// Unregister button on destroy
+	onDestroy(() => {
+		unregister(id);
+	});
+
+	// Subscribe to the store to determine if this modal is active
+	function handleClick() {
+		if (!disabled) {
+			if (transient) {
+				// If it's a transient button, just trigger the action and return
+				dispatch("click");
+				return;
+			}
+
+			dispatch("click");
+			if ($activeModalId === id && sticky) {
+				// If it's already active and sticky, keep it selected
+				return;
+			}
+			activeModalId.set(isActive ? null : id); // Toggle the modal
+		}
+	}
+</script>
+
+<div class="toolbar-button-wrapper">
+	{#if custom}
+		<div on:click={handleClick} bind:this={buttonElement}>
+			<slot name="custom" />
+		</div>
+	{:else}
+		<button
+			type="button"
+			aria-label={label}
+			class={`toolbar-button ${disabled ? "disabled" : ""} ${
+				isActive && !transient ? "selected" : ""
+			} ${classes}`}
+			on:click={handleClick}
+			{disabled}
+			bind:this={buttonElement}
+			id={`button-${id}`}
+			aria-controls={hasAriaControls ? `panel-${id}` : undefined}
+		>
+			{#if icon}
+				<Icon type={icon} selected={!transient ? (isActive ? true : false) : false} {disabled} />
+			{:else}
+				{label}
+			{/if}
+		</button>
+	{/if}
+
+	{#if isActive}
+		{#if helpText && !disableHelp}
+			<HelpModal triggerElement={buttonElement} onClose={() => activeModalId.set(null)}>
+				<p>{helpText}</p>
+			</HelpModal>
+		{:else if !helpText && !disableHelp}
+			<HelpModal triggerElement={buttonElement} onClose={() => activeModalId.set(null)}>
+				<slot />
+			</HelpModal>
+		{/if}
+	{/if}
+</div>
+
+<!-- 
+
+/* /* Slightly darker gray when clicked */
+
+/* 
+button:active {
+  background-color: #d6d6d6; 
+}
+
+button.active {
+  background-color: #ddd; /* Selected button background */
+  border: 2px solid #333; /* Active button border */
+}
+
+button:hover:active {
+  background-color: #ccc; /* Slightly more contrast when active */
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: #f2f2f2;
+  border: 1px solid #ddd;
+}
+
+button:hover:disabled {
+  background-color: #f2f2f2; /* Keep it the same so disabled buttons don’t change on hover */
+  border: 1px solid #ddd;
+} */
+ -->
+
+<style>
+	.toolbar-button-wrapper {
+		position: relative;
+	}
+	.toolbar-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.5rem;
+		background: none;
+		border: none;
+		cursor: pointer;
+		flex-shrink: 0;
+		flex-grow: 0;
+	}
+
+	.toolbar-button.disabled {
+		/* opacity: 0.5; */
+		cursor: not-allowed;
+	}
+
+	.selected {
+		background: #e9eff4;
+		border-radius: 8px;
+	}
+
+	button:hover {
+		background-color: #f5f5f6;
+		border-radius: 8px;
+	}
+
+	button:focus {
+		outline: 2px solid #fbc900;
+		outline-offset: 2px;
+		box-shadow: 0 0 2px 2px #222222;
+		border-radius: 8px;
+	}
+</style>

package/dist/inputs/Toolbar/ToolbarButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        custom: {};
+        default: {};
+    };
+};
+export type ToolbarButtonProps = typeof __propDef.props;
+export type ToolbarButtonEvents = typeof __propDef.events;
+export type ToolbarButtonSlots = typeof __propDef.slots;
+export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
+}
+export {};

package/dist/inputs/Toolbar/ToolbarDivider.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { getContext } from "svelte";
+
+	let { classes = "" }: { classes?: string } = $props();
+
+	// Get the orientation store from context
+	const orientationStore = getContext("orientation");
+
+	// Subscribe to the store to get its value
+	const orientation = $derived(orientationStore);
+</script>
+
+<div class={`toolbar-divider ${$orientation} ${classes}`} aria-hidden="true"></div>
+
+<style>
+	.toolbar-divider {
+		background-color: #ccc;
+	}
+
+	.toolbar-divider.horizontal {
+		width: 1px;
+	}
+
+	.toolbar-divider.vertical {
+		width: 100%;
+		height: 1px;
+		margin: 0.5rem 0;
+	}
+</style>

package/dist/inputs/Toolbar/ToolbarDivider.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToolbarDividerProps = typeof __propDef.props;
+export type ToolbarDividerEvents = typeof __propDef.events;
+export type ToolbarDividerSlots = typeof __propDef.slots;
+export default class ToolbarDivider extends SvelteComponentTyped<ToolbarDividerProps, ToolbarDividerEvents, ToolbarDividerSlots> {
+}
+export {};

package/dist/inputs/Toolbar/ToolbarIcon.svelte

@@ -0,0 +1,106 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [type]
+	 * @property {boolean} [marginLeft]
+	 * @property {boolean} [marginRight]
+	 * @property {boolean} [selected]
+	 * @property {boolean} [disabled]
+	 */
+
+	/** @type {Props} */
+	let {
+		type = "move",
+		marginLeft = false,
+		marginRight = false,
+		selected = false,
+		disabled = false
+	} = $props();
+
+	const paths = {
+		move: {
+			selected: "M29 16L16 29L3 16L16 3L29 16Z",
+			d: "M11.293 7.707a1 1 0 0 1 0-1.415l4-4a1 1 0 0 1 1.415 0l4 4a1 1 0 0 1-1.415 1.415L17 5.414V12a1 1 0 0 1-2 0V5.414l-2.293 2.293a1 1 0 0 1-1.415 0m8 16.586L17 26.586V20a1 1 0 0 0-2 0v6.586l-2.293-2.293a1 1 0 1 0-1.415 1.415l4 4a1 1 0 0 0 1.415 0l4-4a1 1 0 0 0-1.415-1.415m10.415-9-4-4a1 1 0 1 0-1.415 1.415L26.586 15H20a1 1 0 0 0 0 2h6.586l-2.293 2.293a1 1 0 1 0 1.415 1.415l4-4a1 1 0 0 0 0-1.415M5.413 17H12a1 1 0 0 0 0-2H5.414l2.293-2.293a1 1 0 1 0-1.415-1.415l-4 4a1 1 0 0 0 0 1.415l4 4a1 1 0 0 0 1.415-1.415z"
+		},
+		polygon: {
+			selected: "M17.5 24L7.5 17V12.5L12.5 8.5L16 9L17.5 7.5L22.5 8.5L25 12.5L21 23L17.5 24Z",
+			d: "M28.83 6.17a4 4 0 0 0-6.302.845L19 6.053a4 4 0 1 0-7.549 1.793L7.21 11.665a4.01 4.01 0 0 0-5.039.506 4 4 0 0 0 5.361 5.927l8.75 6.42a4 4 0 1 0 5.947-1.837l3.423-9.699q.172.015.345.016a4 4 0 0 0 2.829-6.828zM13.58 4.584a2 2 0 1 1-.433 2.18 2 2 0 0 1 .438-2.18zm-10 11.831a2 2 0 1 1 2.826-2.83 2 2 0 0 1-2.826 2.83m17.831 11a2 2 0 1 1-2.829-2.828 2 2 0 0 1 2.83 2.828m-1.069-5.398a4 4 0 0 0-2.874.886l-8.75-6.42a4.02 4.02 0 0 0-.168-3.332l4.244-3.818a4 4 0 0 0 5.683-1.352L22 8.945a4 4 0 0 0 1.765 3.375zm7.07-11.604a2 2 0 1 1-2.825-2.828 2 2 0 1 1 2.83 2.829z"
+		},
+		radius: {},
+		erase: {
+			d: "M28.125 10.05 22.95 4.875a3 3 0 0 0-4.242 0L3.874 19.708a3 3 0 0 0 0 4.242l3.758 3.758a1 1 0 0 0 .71.292H27a1 1 0 1 0 0-2H16.413l11.712-11.707a3 3 0 0 0 0-4.243M13.585 26H8.756l-3.465-3.465a1 1 0 0 1 0-1.414L12 14.414 18.586 21zM26.71 12.875 20 19.586 13.414 13l6.711-6.707a1 1 0 0 1 1.415 0l5.172 5.172a1 1 0 0 1 0 1.414z"
+		},
+		zoomin: {
+			selected: "M24 14a10 10 0 1 1-20 0 10 10 0 0 1 20 0",
+			d: "M19 14a1 1 0 0 1-1 1h-3v3a1 1 0 0 1-2 0v-3h-3a1 1 0 0 1 0-2h3v-3a1 1 0 0 1 2 0v3h3a1 1 0 0 1 1 1m9.708 14.708a1 1 0 0 1-1.415 0l-6.258-6.26a11.014 11.014 0 1 1 1.414-1.413l6.258 6.258a1 1 0 0 1 0 1.415M14 23a9 9 0 1 0-9-9 9.01 9.01 0 0 0 9 9"
+		},
+		zoomout: {
+			selected: "M24 14a10 10 0 1 1-20 0 10 10 0 0 1 20 0",
+			d: "M19 14a1 1 0 0 1-1 1h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 1 1m9.708 14.708a1 1 0 0 1-1.415 0l-6.258-6.26a11.014 11.014 0 1 1 1.414-1.413l6.258 6.258a1 1 0 0 1 0 1.415M14 23a9 9 0 1 0-9-9 9.01 9.01 0 0 0 9 9"
+		},
+		undo: {
+			selected: "M10 5V17L4 11L10 5Z",
+			d: "M29 18a8.01 8.01 0 0 1-8 8H10a1 1 0 1 1 0-2h11a6 6 0 1 0 0-12H6.414l4.294 4.293a1 1 0 0 1-1.416 1.415l-6-6a1 1 0 0 1 0-1.415l6-6a1 1 0 0 1 1.415 1.415L6.414 10H21a8.01 8.01 0 0 1 8 8"
+		},
+		redo: {
+			selected: "M28 11L22 17V5L28 11Z",
+			d: "M21.293 16.293 25.586 12H11a6 6 0 1 0 0 12h11a1 1 0 0 1 0 2H11a8 8 0 1 1 0-16h14.586l-4.293-4.292a1.001 1.001 0 0 1 1.415-1.415l6 6a1 1 0 0 1 0 1.415l-6 6a1 1 0 1 1-1.415-1.415"
+		},
+		search: {
+			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"
+		},
+		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"
+		},
+		upload: {
+			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 0M11.708 9.707 15 6.414V18a1 1 0 0 0 2 0V6.414l3.293 3.293a1 1 0 1 0 1.415-1.415l-5-5a1 1 0 0 0-1.415 0l-5 5a1 1 0 0 0 1.415 1.415"
+		},
+		help: {
+			selected: "M28 16a12 12 0 1 1-23.999 0A12 12 0 0 1 28 16",
+			d: "M17.5 22.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0M16 9c-2.758 0-5 2.019-5 4.5v.5a1 1 0 0 0 2 0v-.5c0-1.375 1.346-2.5 3-2.5s3 1.125 3 2.5-1.346 2.5-3 2.5a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-.09c2.28-.419 4-2.238 4-4.41 0-2.481-2.242-4.5-5-4.5m13 7A13 13 0 1 1 16 3a13.014 13.014 0 0 1 13 13m-2 0a11 11 0 1 0-11 11 11.01 11.01 0 0 0 11-11"
+		},
+		bin: {
+			selected: "M25 7v19a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7z",
+			d: "M27 6h-5V5a3 3 0 0 0-3-3h-6a3 3 0 0 0-3 3v1H5a1 1 0 0 0 0 2h1v18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h1a1 1 0 1 0 0-2M12 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v1h-8zm12 21H8V8h16zM14 13v8a1 1 0 0 1-2 0v-8a1 1 0 0 1 2 0m6 0v8a1 1 0 0 1-2 0v-8a1 1 0 0 1 2 0"
+		}
+	};
+</script>
+
+{#if paths[type]}
+	<svg
+		class="ons-svg-icon ons-svg-icon--m"
+		class:ons-u-ml-xs={marginLeft}
+		class:ons-u-mr-xs={marginRight}
+		class:selected
+		viewBox="0 0 32 32"
+		xmlns="http://www.w3.org/2000/svg"
+		focusable="false"
+		fill={selected ? "#206095" : disabled ? "#BCBCBD" : "currentColor"}
+	>
+		{#if selected}
+			<path opacity="0.2" d={paths[type].selected}></path>
+		{/if}
+		{#if type != "radius"}
+			<path d={paths[type].d}></path>
+		{:else if type == "radius"}
+			<circle
+				cx="16"
+				cy="16"
+				r="12"
+				stroke="currentColor"
+				stroke-width="2"
+				fill={selected ? "#206095" : "none"}
+				fill-opacity={selected ? "0.2" : "0"}
+			></circle>
+		{/if}
+	</svg>
+{/if}
+
+<style>
+	.selected {
+		fill: #206095;
+	}
+</style>

package/dist/inputs/Toolbar/ToolbarIcon.svelte.d.ts

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