refactor: ⬆️ updated all stories & packages

README.md

@@ -13,4 +13,8 @@ A growing collection of all my reusable Svelte components and SVGs.
 ### From Web Components
 - Standard radio button with custom animation
 - Completely custom radio buttons
-- Toggle switch (as checkbox if possible)
+- Toggle switch (as checkbox if possible)
+
+## TODO
+- Look into the issues with the color input component not going away when clicking outside or going away when clicking on the color input
+- Look into the accessibility options for the color input & color picker components (arrow key controls etc)

package.json

@@ -10,15 +10,15 @@
 		"preview": "histoire preview"
 	},
 	"devDependencies": {
-		"histoire": "^0.16.2",
-		"@histoire/plugin-svelte": "^0.16.1",
-		"@sveltejs/vite-plugin-svelte": "^2.4.1",
-		"@tsconfig/svelte": "^4.0.1",
-		"sass": "^1.63.4",
-		"svelte": "^3.59.1",
-		"svelte-check": "^3.4.3",
-		"tslib": "^2.5.3",
-		"typescript": "^5.1.3",
-		"vite": "^4.3.9"
+		"histoire": "^0.17.17",
+		"@histoire/plugin-svelte": "^0.17.17",
+		"@sveltejs/vite-plugin-svelte": "^3.1.0",
+		"@tsconfig/svelte": "^5.0.4",
+		"sass": "^1.74.1",
+		"svelte": "^4.2.13",
+		"svelte-check": "^3.6.9",
+		"tslib": "^2.6.2",
+		"typescript": "^5.4.5",
+		"vite": "^5.2.8"
 	}
 }

src/components/Burger Menus/Circle.svelte

@@ -4,6 +4,7 @@
 </script>
 
 <svg
+	role="button"
 	tabindex="-1"
 	viewBox="0 0 100 100"
 	on:click={() => (open = !open)}

src/components/Burger Menus/Cross.svelte

@@ -1,14 +1,26 @@
+<script context="module">
+	export const DIRECTION = {
+		LEFT: 0,
+		UP: 90,
+		RIGHT: 180,
+		DOWN: 270,
+	};
+</script>
+
 <script lang="ts">
 	export let open = false;
 	export let speed = 0.5;
+	export let direction = DIRECTION.LEFT;
 </script>
 
 <svg
+	role="button"
 	tabindex="-1"
 	viewBox="0 0 100 100"
 	on:click={() => (open = !open)}
 	on:keypress={() => (open = !open)}
 	style:--speed="{speed}s"
+	style:--direction="{direction}deg"
 >
 	<path class:open />
 </svg>
@@ -18,6 +30,7 @@
 		cursor: pointer;
 		fill: none;
 		outline: transparent;
+		transform: rotate(var(--direction));
 	}
 	path {
 		stroke-linecap: round;

src/components/Burger Menus/FoldIn.svelte

@@ -4,6 +4,7 @@
 </script>
 
 <svg
+	role="button"
 	tabindex="-1"
 	viewBox="0 0 100 100"
 	on:click={() => (open = !open)}

src/components/Burger Menus/Merge.svelte

@@ -4,6 +4,7 @@
 </script>
 
 <svg
+	role="button"
 	tabindex="-1"
 	viewBox="0 0 100 100"
 	on:click={() => (open = !open)}

src/components/Burger Menus/MergeCross.svelte

@@ -4,6 +4,7 @@
 </script>
 
 <svg
+	role="button"
 	tabindex="-1"
 	viewBox="0 0 100 100"
 	on:click={() => (open = !open)}
@@ -23,7 +24,9 @@
 		rx: 8px;
 		fill: currentcolor;
 		transform-origin: center;
-		transition: y var(--speed) var(--speed), rotate var(--speed);
+		transition:
+			y var(--speed) var(--speed),
+			rotate var(--speed);
 	}
 	.b {
 		transition: opacity 0s var(--speed);
@@ -32,7 +35,9 @@
 		svg.open {
 			.a,
 			.c {
-				transition: y var(--speed), rotate var(--speed) var(--speed);
+				transition:
+					y var(--speed),
+					rotate var(--speed) var(--speed);
 				y: 42px;
 			}
 			.a {

src/components/Burger Menus/index.ts

@@ -1,13 +1,5 @@
-import Circle from "./Circle.svelte";
-import Cross from "./Cross.svelte";
-import FoldIn from "./FoldIn.svelte";
-import Merge from "./Merge.svelte";
-import MergeCross from "./MergeCross.svelte";
-
-export default {
-	Circle,
-	Cross,
-	FoldIn,
-	Merge,
-	MergeCross,
-};
+export { default as Circle } from "./Circle.svelte";
+export { default as Cross } from "./Cross.svelte";
+export { default as FoldIn } from "./FoldIn.svelte";
+export { default as Merge } from "./Merge.svelte";
+export { default as MergeCross } from "./MergeCross.svelte";

src/components/ColorInput.svelte

@@ -7,20 +7,24 @@
 	let element: HTMLSpanElement;
 
 	$: value = value.startsWith("#") ? value : `#${value}`;
+	function toggle() {
+		open = !open;
+	}
 </script>
 
 <span
+	role="button"
 	bind:this={element}
 	class="container"
 	style:--color={value}
 	tabindex="-1"
-	on:click|self={() => (open = !open)}
+	on:click|self={toggle}
 	on:keydown|self={(e) => e.key === "Escape" && (open = false)}
 	on:blur={() => (open = false)}
 >
 	{title}
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<span class="input" on:click|self={() => (open = !open)}>
+	<span role="button" tabindex="-1" class="input" on:click|self={toggle}>
 		{#if open}
 			<div class="modal">
 				<ColorPicker bind:value />

src/components/ColorPicker/Slider.svelte

@@ -26,6 +26,9 @@
 
 <svelte:window on:mouseup={selectEnd} on:mousemove={selectMove} />
 <div
+	role="slider"
+	aria-valuenow={value}
+	tabindex="0"
 	class="slider"
 	class:checker
 	style:--bg={bg}

src/components/ColorPicker/TwoDSelect.svelte

@@ -28,7 +28,10 @@
 
 <svelte:window on:mouseup={selectEnd} on:mousemove={selectMove} />
 
+<!-- svelte-ignore a11y-role-has-required-aria-props -->
 <div
+	role="slider"
+	tabindex="-1"
 	class="select-wb"
 	style:--hue={h}
 	style:--saturation="{x}%"

src/components/Experiment.svelte

@@ -14,18 +14,25 @@
 
 <style lang="scss">
 	section {
-		width: 500px;
-		height: 500px;
+		width: 380px;
+		height: 380px;
+		display: grid;
+		place-items: center;
 	}
 	.rotate {
 		display: grid;
 		grid-template: 1fr / 1fr;
 		place-items: center;
-		width: 100%;
-		height: 100%;
+		width: 90%;
+		height: 90%;
+		border-radius: 50%;
+		background-color: #00808080;
 		animation: rotate 10s linear infinite;
 		&:hover {
 			animation-play-state: paused;
+			div::before {
+				animation-play-state: paused;
+			}
 		}
 	}
 	div {
@@ -34,14 +41,6 @@
 		border-radius: 50%;
 		position: relative;
 		transform-origin: center;
-		&::before {
-			content: "a";
-			position: absolute;
-			inset: 0;
-			display: grid;
-			place-items: center;
-			animation: rotate 10s linear reverse infinite;
-		}
 	}
 	.circle {
 		--offset: 150px;
@@ -52,6 +51,22 @@
 			calc(cos(var(--angle)) * var(--offset)),
 			calc(sin(var(--angle)) * var(--offset))
 		);
+		&::before {
+			content: "a";
+			position: absolute;
+			inset: 0;
+			display: grid;
+			border-radius: inherit;
+			background-color: inherit;
+			place-items: center;
+			transition: scale 0.3s;
+			animation: rotate 10s linear reverse infinite;
+		}
+		&:hover {
+			&::before {
+				scale: 1.5;
+			}
+		}
 	}
 	.center {
 		width: 100px;

src/components/FlipCard.svelte

@@ -1,15 +1,9 @@
 <script lang="ts">
-	/**
-	 * Whether the card is flipped or not.
-	 */
+	/** Whether the card is flipped or not. */
 	export let flipped: boolean;
-	/**
-	 * The axis to flip the card across.
-	 */
+	/** The axis to flip the card across. */
 	export let axis: "x" | "y" = "x";
-	/**
-	 * The speed of the flip animation in seconds.
-	 */
+	/** The speed of the flip animation in seconds. */
 	export let speed = 2;
 </script>
 

src/components/Glitch.svelte

@@ -4,7 +4,7 @@
 	export let flash_duration = 30;
 	$: display = text;
 	const ALPHABET = "abcdefghijklmnopqrstuvwxyz";
-	let interval: NodeJS.Timer;
+	let interval: NodeJS.Timeout;
 
 	function onMouseover() {
 		let iterations = 0;
@@ -31,6 +31,7 @@
 	}
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <span on:mouseover={onMouseover} on:focus={onMouseover}>{display}</span>
 
 <style>

src/components/MouseAuraCards.svelte/Container.svelte

@@ -12,7 +12,7 @@
 	}
 </script>
 
-<div class="container" bind:this={container} on:mousemove={onMouseMove}>
+<div class="container" bind:this={container} on:mousemove={onMouseMove} role="region">
 	<slot />
 </div>
 

src/components/Pause/Morph.svelte

@@ -4,6 +4,7 @@
 
 <svg
 	viewBox="0 0 64 64"
+	role="button"
 	class:paused
 	tabindex="-1"
 	on:click={() => (paused = !paused)}

src/components/Pause/Rotate.svelte

@@ -4,6 +4,7 @@
 
 <svg
 	viewBox="0 0 64 64"
+	role="button"
 	class:paused
 	tabindex="-1"
 	on:click={() => (paused = !paused)}

src/components/PaymentForm.svelte/PaymentForm.svelte

@@ -48,7 +48,7 @@
 		num: number | string,
 		sections: number = 3,
 		minChars: number = 0,
-		fillChar: string = "-"
+		fillChar: string = "-",
 	): string {
 		const result = [];
 		let str = num.toString();
@@ -169,14 +169,14 @@
 											validateMonth(month),
 											Infinity,
 											2,
-											"•"
+											"•",
 										)}</span
 									>/<span class="year"
 										>{formatNumber(
 											year.slice(-2, year.length),
 											Infinity,
 											2,
-											"•"
+											"•",
 										)}</span
 									>
 								</span>
@@ -317,7 +317,7 @@
 	}
 	.card-number {
 		text-align: center;
-		font-size: 26px;
+		font-size: 23px;
 		letter-spacing: 2px;
 	}
 	.back,
@@ -370,6 +370,7 @@
 	.expiry {
 		display: flex;
 		gap: 10px;
+		align-self: flex-start;
 	}
 	.valid-thru {
 		font-size: 9px;

src/components/Seven Segment/Seg.svelte

@@ -3,20 +3,6 @@
 	export let point = false;
 </script>
 
-<!-- <svg viewBox="0 0 23 32" {height} xmlns="http://www.w3.org/2000/svg">
-	<defs>
-		<path id="h" d="m0 2 l2-2h8l2 2l-2 2H2z" />
-		<path id="v" d="m2 0l2 2v8l-2 2l-2-2v-8z" />
-	</defs>
-	<use class:hidden={value[0]} xlink:href="#h" x="4" y="0" />
-	<use class:hidden={value[1]} xlink:href="#v" x="16" y="3" />
-	<use class:hidden={value[2]} xlink:href="#v" x="16" y="17" />
-	<use class:hidden={value[3]} xlink:href="#h" x="4" y="28" />
-	<use class:hidden={value[4]} xlink:href="#v" x="0" y="17" />
-	<use class:hidden={value[5]} xlink:href="#v" x="0" y="3" />
-	<use class:hidden={value[6]} xlink:href="#h" x="4" y="14" />
-	<circle class:hidden={!point} cx="21.5" cy="30.5" r="1.5" />
-</svg> -->
 <svg viewBox="0 0 19 28" xmlns="http://www.w3.org/2000/svg">
 	<defs>
 		<path id="h" d="m0 2 l2-2h8l2 2l-2 2H2z" />

src/components/Theme Toggles/Rise.svelte

@@ -7,6 +7,7 @@
 
 <svg
 	viewBox="0 0 48 48"
+	role="button"
 	class:light
 	tabindex="-1"
 	on:click={() => (light = !light)}