@onsvisual/svelte-components 1.0.36 → 1.0.38

package/dist/inputs/Toolbar/ToolbarButton.svelte

@@ -1,184 +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>
+<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/ToolbarDivider.svelte

@@ -1,29 +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>
+<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/ToolbarIcon.svelte

@@ -1,106 +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>
+<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>