SettingsModal

navigation is the sidebar's sections, passed straight through to Navigation — so type: 'label' headings and nested children work exactly as they do there. Each section renders through a slot named after its value.

modelValue is the value of the section currently showing — bind it with v-model and the open section becomes readable and writable from outside the dialog, which is how a “Manage billing” button elsewhere can open settings on the right panel. Note there are two independent models here: this one for the section, and v-model:open for the dialog itself.

defaultValue is the section that opens first when you don't bind v-model.

open is whether the dialog itself is showing — separate from modelValue, which is the section inside it. Bind it with v-model:open so the close button and the backdrop can shut the dialog on their own; pass it one way only when you're taking over closing entirely.

defaultOpen opens the dialog as soon as it mounts, with no state of your own. Gate the mount rather than the flag — a settings dialog that appears on every render is a page nobody can use — which is what the v-if below does.

title is the label above the sidebar, “Settings” by default. Name the thing being configured when the dialog isn't about the reader — “Workspace”, “Project” — and pass an empty string to drop the label entirely, which the sidebar-header slot also does by replacing it.

color is the accent on the selected sidebar row, passed straight through to the inner Navigation. Neutral is the default and usually right — settings are a place people visit deliberately, so the sidebar doesn't need to compete with the panel.

variant is how the sidebar's rows are drawn — ghost by default, so only the selected row carries any fill. subtle, soft and solid give the selection progressively more weight, which helps when the sidebar is long enough that the reader loses track of where they are.

size is the panel's width — md, lg or xl, the default. The range starts higher than Modal's because the sidebar needs its own room; the sidebar keeps its width at every size, so the panel takes the difference.

fullscreen grows the panel to fill the viewport instead of sizing it from size, the way Discord's settings do.

dismissible is whether Escape and a click on the backdrop close the dialog, and it's on by default. Turn it off while there are unsaved changes — a settings dialog is exactly where a stray Escape costs someone their work — and give them a deliberate way out in the footer slot instead.

closeButton shows the × in the panel's header, and is on by default. It's independent of dismissible: dropping the button while leaving Escape and the backdrop alone still lets people out, and dropping both is what makes a dialog closable only through your own control.

Everything the sidebar understands at once — type: 'label' group headings, badge counts, nested children, and a default slot catching the sections that have no panel of their own yet.