Skip to content

Commit aa0a647

Browse files
authored
docs(next): Fix input-otp usage example + update migration docs with sidebar colors (#1611)
1 parent 8deb4d0 commit aa0a647

File tree

3 files changed

+16
-5
lines changed

3 files changed

+16
-5
lines changed

sites/docs/src/content/components/form.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,8 @@ For this example, we'll be passing the `form` returned from the load function as
120120
} from "sveltekit-superforms";
121121
import { zodClient } from "sveltekit-superforms/adapters";
122122
123-
let { data }: { data: { form: SuperValidated<Infer<FormSchema>> } } = $props();
123+
let { data }: { data: { form: SuperValidated<Infer<FormSchema>> } } =
124+
$props();
124125
125126
const form = superForm(data.form, {
126127
validators: zodClient(formSchema),
@@ -143,6 +144,7 @@ For this example, we'll be passing the `form` returned from the load function as
143144
<Form.Button>Submit</Form.Button>
144145
</form>
145146
```
147+
146148
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.
147149

148150
### 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
212214
- [Select](/docs/components/select#form)
213215
- [Switch](/docs/components/switch#form)
214216
- [Textarea](/docs/components/textarea#form)
215-

sites/docs/src/content/components/input-otp.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ Install `bits-ui`:
5757
</InputOTP.Group>
5858
<InputOTP.Separator />
5959
<InputOTP.Group>
60-
{#each cells.slice(0, 3) as cell}
60+
{#each cells.slice(3, 6) as cell}
6161
<InputOTP.Slot {cell} />
6262
{/each}
6363
</InputOTP.Group>

sites/docs/src/content/migration/svelte-5/index.md

+12-2
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,9 @@ Add `tailwindcss-animate`.
5757

5858
<PMInstall command="tailwindcss-animate"/>
5959

60-
Add `tailwindcss-animate` plugin and animations config.
60+
Add `tailwindcss-animate` plugin, sidebar colors, and animations config.
6161

62-
```json {2} {22-43}
62+
```json {2} {15-24} {32-50} {53}
6363
import type { Config } from 'tailwindcss';
6464
import tailwindcssAnimate from 'tailwindcss-animate';
6565

@@ -74,6 +74,16 @@ const config: Config = {
7474
extend: {
7575
colors: {
7676
// unchanged ...
77+
sidebar: {
78+
DEFAULT: "hsl(var(--sidebar-background))",
79+
foreground: "hsl(var(--sidebar-foreground))",
80+
primary: "hsl(var(--sidebar-primary))",
81+
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
82+
accent: "hsl(var(--sidebar-accent))",
83+
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
84+
border: "hsl(var(--sidebar-border))",
85+
ring: "hsl(var(--sidebar-ring))",
86+
},
7787
},
7888
borderRadius: {
7989
// unchanged ...

0 commit comments

Comments
 (0)