feat: add a createKey utility

src/lib/index.ts

@@ -23,3 +23,4 @@ export * from './interactions/Press/press.js'
 export * from './interactions/TypeAhead/typeAhead.js'
 export * from './stores/activeElement.js'
 export * from './stores/interactionMode.js'
+export * from './utilities/key.js'

src/lib/utilities/key.ts

@@ -0,0 +1,7 @@
+/** Generates a random key for the components that need one. */
+export const createKey = () => {
+  return (
+    Math.random().toString(36).substring(2, 15) +
+    Math.random().toString(36).substring(2, 15)
+  )
+}

src/routes/(docs)/component/accordion/example/AccordionItem.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import type { Accordion } from '$lib'
+  import { createKey, type Accordion } from '$lib'
   import { getContext } from 'svelte'
 
   export let heading: string
   export let disabled: boolean = false
   export let open: boolean = false
 
   // Generate a random key for this accordion item
-  const key = Math.random().toString(36).substring(7)
+  const key = createKey()
 
   const { triggerAttrs, contentAttrs, expanded, expand, disable } =
     getContext<Accordion>('accordion')

src/routes/(docs)/component/menu/example/MenuItem.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
-  import { createPopover, useHover, useFocusWithin, type Menu } from '$lib'
+  import {
+    createKey,
+    createPopover,
+    useHover,
+    useFocusWithin,
+    type Menu,
+  } from '$lib'
   import { getContext, setContext, tick } from 'svelte'
   import { ChevronRight } from 'lucide-svelte'
 
   export let href: string
 
   // Generate a random key for this menu item
-  const key = Math.random().toString(36).substring(7)
+  const key = createKey()
 
   // Check if this menu item has a submenu
   const hasSubmenu = $$slots.submenu !== undefined

src/routes/(docs)/component/toolbar/example/Button.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
-  import type { Toolbar } from '$lib'
+  import { createKey, type Toolbar } from '$lib'
   import { getContext } from 'svelte'
 
   // Generate a unique key for this item
-  const key = Math.random().toString(36).substr(2, 9)
+  const key = createKey()
 
   const { itemAttrs } = getContext<Toolbar>('toolbar')
 </script>
 
 <button
   {...$itemAttrs(key)}
-  class="rounded p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800
-"
+  class="rounded p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800"
   on:click
   {...$$restProps}
 >