docs(next): Fix input-otp usage example + update migration docs with …

…sidebar colors (#1611)
huntabyte · Jan 11, 2025 · aa0a647 · aa0a647
1 parent 8deb4d0
commit aa0a647
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/sites/docs/src/content/components/form.md b/sites/docs/src/content/components/form.md
@@ -120,7 +120,8 @@ For this example, we'll be passing the `form` returned from the load function as
   } from "sveltekit-superforms";
   import { zodClient } from "sveltekit-superforms/adapters";
 
-  let { data }: { data: { form: SuperValidated<Infer<FormSchema>> } } = $props();
+  let { data }: { data: { form: SuperValidated<Infer<FormSchema>> } } =
+    $props();
 
   const form = superForm(data.form, {
     validators: zodClient(formSchema),
@@ -143,6 +144,7 @@ For this example, we'll be passing the `form` returned from the load function as
   <Form.Button>Submit</Form.Button>
 </form>
 ```
+
 The `name`, `id`, and all accessibility attributes are applied to the input by spreading the `attrs` object from the `Form.Control` component. The `Form.Label` will automatically be associated with the input using the `for` attribute, so you don't have to worry about that.
 
 ### Create a page component that uses the form
@@ -212,4 +214,3 @@ See the following links for more examples on how to use the other `Form` compone
 - [Select](/docs/components/select#form)
 - [Switch](/docs/components/switch#form)
 - [Textarea](/docs/components/textarea#form)
-
diff --git a/sites/docs/src/content/components/input-otp.md b/sites/docs/src/content/components/input-otp.md
@@ -57,7 +57,7 @@ Install `bits-ui`:
     </InputOTP.Group>
     <InputOTP.Separator />
     <InputOTP.Group>
-      {#each cells.slice(0, 3) as cell}
+      {#each cells.slice(3, 6) as cell}
         <InputOTP.Slot {cell} />
       {/each}
     </InputOTP.Group>

diff --git a/sites/docs/src/content/migration/svelte-5/index.md b/sites/docs/src/content/migration/svelte-5/index.md
@@ -57,9 +57,9 @@ Add `tailwindcss-animate`.
 
 <PMInstall command="tailwindcss-animate"/>
 
-Add `tailwindcss-animate` plugin and animations config.
+Add `tailwindcss-animate` plugin, sidebar colors, and animations config.
 
-```json {2} {22-43}
+```json {2} {15-24} {32-50} {53}
 import type { Config } from 'tailwindcss';
 import tailwindcssAnimate from 'tailwindcss-animate';
 
@@ -74,6 +74,16 @@ const config: Config = {
 		extend: {
 			colors: {
 				// unchanged ...
+				sidebar: {
+					DEFAULT: "hsl(var(--sidebar-background))",
+					foreground: "hsl(var(--sidebar-foreground))",
+					primary: "hsl(var(--sidebar-primary))",
+					"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+					accent: "hsl(var(--sidebar-accent))",
+					"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+					border: "hsl(var(--sidebar-border))",
+					ring: "hsl(var(--sidebar-ring))",
+        		},
 			},
 			borderRadius: {
 				// unchanged ...