Merge 681f270184 into da00abe116

documentation/docs/01-introduction/01-overview.md

@@ -1,5 +1,6 @@
 ---
 title: Overview
+use_cases: "always: understanding Svelte fundamentals, component-based architecture, reactive UI framework basics"
 ---
 
 Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript...

documentation/docs/01-introduction/02-getting-started.md

@@ -1,5 +1,6 @@
 ---
 title: Getting started
+use_cases: "always: project setup, creating new Svelte apps, configuring build tools, initial development environment"
 ---
 
 We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/). Create a new project with:

documentation/docs/01-introduction/03-svelte-files.md

@@ -1,5 +1,6 @@
 ---
 title: .svelte files
+use_cases: "always: component structure, organizing HTML/CSS/JavaScript, single-file components, component templates"
 ---
 
 Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.

documentation/docs/01-introduction/04-svelte-js-files.md

@@ -1,5 +1,6 @@
 ---
 title: .svelte.js and .svelte.ts files
+use_cases: "reusable reactive logic, shared state modules, composable reactive utilities, reactive helper functions"
 ---
 
 Besides `.svelte` files, Svelte also operates on `.svelte.js` and `.svelte.ts` files.

documentation/docs/02-runes/01-what-are-runes.md

@@ -1,5 +1,6 @@
 ---
 title: What are runes?
+use_cases: "always: understanding Svelte 5 reactivity, reactive primitives, modern Svelte syntax"
 ---
 
 > [!NOTE] **rune** /ruːn/ _noun_

documentation/docs/02-runes/02-$state.md

@@ -1,5 +1,6 @@
 ---
 title: $state
+use_cases: "always: reactive variables, component state management, form inputs, counters, toggles, data models"
 ---
 
 The `$state` rune allows you to create _reactive state_, which means that your UI _reacts_ when it changes.

documentation/docs/02-runes/03-$derived.md

@@ -1,5 +1,6 @@
 ---
 title: $derived
+use_cases: "computed values, calculated properties, derived state, reactive expressions, data transformations"
 ---
 
 Derived state is declared with the `$derived` rune:

documentation/docs/02-runes/04-$effect.md

@@ -1,5 +1,6 @@
 ---
 title: $effect
+use_cases: "side effects, API calls, DOM manipulation, third-party library integration, analytics, canvas drawing, websockets"
 ---
 
 Effects are functions that run when state updates, and can be used for things like calling third-party libraries, drawing on `<canvas>` elements, or making network requests. They only run in the browser, not during server-side rendering.

documentation/docs/02-runes/05-$props.md

@@ -1,5 +1,6 @@
 ---
 title: $props
+use_cases: "always: component inputs, parent-child communication, prop validation, default values, component APIs"
 ---
 
 The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components just like you pass attributes to elements:

documentation/docs/02-runes/06-$bindable.md

@@ -1,5 +1,6 @@
 ---
 title: $bindable
+use_cases: "two-way binding, form components, controlled inputs, synchronized state, custom input components"
 ---
 
 Ordinarily, props go one way, from parent to child. This makes it easy to understand how data flows around your app.

documentation/docs/02-runes/07-$inspect.md

@@ -1,5 +1,6 @@
 ---
 title: $inspect
+use_cases: "development only: debugging reactive state, logging state changes, development tools"
 ---
 
 > [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.

documentation/docs/02-runes/08-$host.md

@@ -1,5 +1,6 @@
 ---
 title: $host
+use_cases: "web components, custom elements, dispatching custom events, component libraries"
 ---
 
 When compiling a component as a [custom element](custom-elements), the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):

documentation/docs/03-template-syntax/01-basic-markup.md

@@ -1,5 +1,6 @@
 ---
 title: Basic markup
+use_cases: "always: HTML templates, component structure, attributes, events, text interpolation"
 ---
 
 Markup inside a Svelte component can be thought of as HTML++.

documentation/docs/03-template-syntax/02-if.md

@@ -1,5 +1,6 @@
 ---
 title: {#if ...}
+use_cases: "conditional rendering, showing/hiding elements, user permissions, feature flags, loading states"
 ---
 
 ```svelte

documentation/docs/03-template-syntax/03-each.md

@@ -1,5 +1,6 @@
 ---
 title: {#each ...}
+use_cases: "lists, arrays, iterations, product listings, user lists, data tables, galleries, menus"
 ---
 
 ```svelte

documentation/docs/03-template-syntax/04-key.md

@@ -1,5 +1,6 @@
 ---
 title: {#key ...}
+use_cases: "forcing re-renders, resetting component state, animations on value change"
 ---
 
 ```svelte

documentation/docs/03-template-syntax/05-await.md

@@ -1,5 +1,6 @@
 ---
 title: {#await ...}
+use_cases: "async data fetching, loading states, error handling, API calls, promises"
 ---
 
 ```svelte

documentation/docs/03-template-syntax/06-snippet.md

@@ -1,5 +1,6 @@
 ---
 title: {#snippet ...}
+use_cases: "reusable markup, component composition, render props, slot alternatives, template patterns"
 ---
 
 ```svelte

documentation/docs/03-template-syntax/07-@render.md

@@ -1,5 +1,6 @@
 ---
 title: {@render ...}
+use_cases: "rendering snippets, dynamic content, component composition"
 ---
 
 To render a [snippet](snippet), use a `{@render ...}` tag.

documentation/docs/03-template-syntax/08-@html.md

@@ -1,5 +1,6 @@
 ---
 title: {@html ...}
+use_cases: "raw HTML rendering, CMS content, markdown rendering, rich text, third-party HTML"
 ---
 
 To inject raw HTML into your component, use the `{@html ...}` tag:

documentation/docs/03-template-syntax/09-@attach.md

@@ -1,5 +1,6 @@
 ---
 title: {@attach ...}
+use_cases: "DOM manipulation, third-party libraries, tooltips, popovers, advanced interactions"
 ---
 
 Attachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($state) read inside the function updates.

documentation/docs/03-template-syntax/10-@const.md

@@ -1,5 +1,6 @@
 ---
 title: {@const ...}
+use_cases: "template calculations, local variables in loops, derived values in blocks"
 ---
 
 The `{@const ...}` tag defines a local constant.

documentation/docs/03-template-syntax/11-@debug.md

@@ -1,5 +1,6 @@
 ---
 title: {@debug ...}
+use_cases: "development only: debugging templates, inspecting values, troubleshooting"
 ---
 
 The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.

documentation/docs/03-template-syntax/12-bind.md

@@ -1,5 +1,6 @@
 ---
 title: bind:
+use_cases: "forms, inputs, two-way binding, checkboxes, selects, textareas, media elements, dimensions"
 ---
 
 Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent.

documentation/docs/03-template-syntax/13-use.md

@@ -1,5 +1,6 @@
 ---
 title: use:
+use_cases: "third-party integrations, DOM libraries, custom directives, legacy code integration"
 ---
 
 > [!NOTE]

documentation/docs/03-template-syntax/14-transition.md

@@ -1,5 +1,6 @@
 ---
 title: transition:
+use_cases: "animations, page transitions, element enter/leave effects, smooth UI changes"
 ---
 
 A _transition_ is triggered by an element entering or leaving the DOM as a result of a state change.

documentation/docs/03-template-syntax/15-in-and-out.md

@@ -1,5 +1,6 @@
 ---
 title: in: and out:
+use_cases: "asymmetric animations, different enter/exit effects, one-way transitions"
 ---
 
 The `in:` and `out:` directives are identical to [`transition:`](transition), except that the resulting transitions are not bidirectional — an `in` transition will continue to 'play' alongside the `out` transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.

documentation/docs/03-template-syntax/16-animate.md

@@ -1,5 +1,6 @@
 ---
 title: animate:
+use_cases: "list reordering animations, drag and drop, sortable lists, smooth transitions"
 ---
 
 An animation is triggered when the contents of a [keyed each block](each#Keyed-each-blocks) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.

documentation/docs/03-template-syntax/17-style.md

@@ -1,5 +1,6 @@
 ---
 title: style:
+use_cases: "dynamic styles, inline CSS, responsive design, theming, style calculations"
 ---
 
 The `style:` directive provides a shorthand for setting multiple styles on an element.

documentation/docs/03-template-syntax/18-class.md

@@ -1,5 +1,6 @@
 ---
 title: class
+use_cases: "dynamic CSS classes, conditional styling, state-based styles, utility classes"
 ---
 
 There are two ways to set classes on elements: the `class` attribute, and the `class:` directive.

documentation/docs/03-template-syntax/19-await-expressions.md

@@ -1,5 +1,6 @@
 ---
 title: await
+use_cases: "async components, SSR with async data, synchronized UI updates, data fetching"
 ---
 
 As of Svelte 5.36, you can use the `await` keyword inside your components in three places where it was previously unavailable:

documentation/docs/04-styling/01-scoped-styles.md

@@ -1,5 +1,6 @@
 ---
 title: Scoped styles
+use_cases: "always: component-specific styles, CSS encapsulation, preventing style conflicts"
 ---
 
 Svelte components can include a `<style>` element containing CSS that belongs to the component. This CSS is _scoped_ by default, meaning that styles will not apply to any elements on the page outside the component in question.

documentation/docs/04-styling/02-global-styles.md

@@ -1,5 +1,6 @@
 ---
 title: Global styles
+use_cases: "app-wide styles, CSS resets, typography, third-party CSS integration"
 ---
 
 ## :global(...)

documentation/docs/04-styling/03-custom-properties.md

@@ -1,5 +1,6 @@
 ---
 title: Custom properties
+use_cases: "theming, design tokens, dynamic CSS variables, component customization"
 ---
 
 You can pass CSS custom properties — both static and dynamic — to components:

documentation/docs/04-styling/04-nested-style-elements.md

@@ -1,5 +1,6 @@
 ---
 title: Nested <style> elements
+use_cases: "dynamic runtime styles, conditional CSS, user-generated styles"
 ---
 
 There can only be one top-level `<style>` tag per component.

documentation/docs/05-special-elements/01-svelte-boundary.md

@@ -1,5 +1,6 @@
 ---
 title: <svelte:boundary>
+use_cases: "error boundaries, async loading states, error handling, resilient UIs"
 ---
 
 ```svelte

documentation/docs/05-special-elements/02-svelte-window.md

@@ -1,5 +1,6 @@
 ---
 title: <svelte:window>
+use_cases: "window events, scroll handling, keyboard shortcuts, resize detection, online/offline"
 ---
 
 ```svelte

documentation/docs/05-special-elements/03-svelte-document.md

@@ -1,5 +1,6 @@
 ---
 title: <svelte:document>
+use_cases: "document events, visibility changes, fullscreen handling, global clicks"
 ---
 
 ```svelte

documentation/docs/05-special-elements/04-svelte-body.md

@@ -1,5 +1,6 @@
 ---
 title: <svelte:body>
+use_cases: "body events, mouse enter/leave, global interactions, body classes"
 ---
 
 ```svelte

documentation/docs/05-special-elements/05-svelte-head.md

@@ -1,5 +1,6 @@
 ---
 title: <svelte:head>
+use_cases: "SEO, meta tags, page titles, OpenGraph, structured data, external scripts"
 ---
 
 ```svelte

documentation/docs/05-special-elements/06-svelte-element.md

@@ -1,5 +1,6 @@
 ---
 title: <svelte:element>
+use_cases: "dynamic HTML elements, CMS rendering, configurable components, polymorphic components"
 ---
 
 ```svelte

documentation/docs/05-special-elements/07-svelte-options.md

@@ -1,5 +1,6 @@
 ---
 title: <svelte:options>
+use_cases: "component configuration, custom elements setup, compiler options, namespace settings"
 ---
 
 ```svelte

documentation/docs/06-runtime/01-stores.md

@@ -1,5 +1,6 @@
 ---
 title: Stores
+use_cases: "reactive state management, cross-component state, async data streams, RxJS patterns"
 ---
 
 <!-- - how to use

documentation/docs/06-runtime/02-context.md

@@ -1,5 +1,6 @@
 ---
 title: Context
+use_cases: "component communication, dependency injection, avoiding prop drilling, theme providers"
 ---
 
 Context allows components to access values owned by parent components without passing them down as props (potentially through many layers of intermediate components, known as 'prop-drilling'). The parent component sets context with `setContext(key, value)`...

documentation/docs/06-runtime/03-lifecycle-hooks.md

@@ -1,5 +1,6 @@
 ---
 title: Lifecycle hooks
+use_cases: "initialization logic, cleanup, DOM access, third-party library setup"
 ---
 
 <!-- - onMount/onDestroy

documentation/docs/06-runtime/04-imperative-component-api.md

@@ -1,5 +1,6 @@
 ---
 title: Imperative component API
+use_cases: "programmatic component control, testing, framework integration, dynamic component creation"
 ---
 
 <!-- better title needed?

documentation/docs/07-misc/02-testing.md

@@ -1,5 +1,6 @@
 ---
 title: Testing
+use_cases: "unit testing, integration testing, E2E testing, test-driven development, CI/CD"
 ---
 
 Testing helps you write and maintain your code and guard against regressions. Testing frameworks help you with that, allowing you to describe assertions or expectations about how your code should behave. Svelte is unopinionated about which testing framework you use — you can write unit tests, integration tests, and end-to-end tests using solutions like [Vitest](https://vitest.dev/), [Jasmine](https://jasmine.github.io/), [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/).

documentation/docs/07-misc/03-typescript.md

@@ -1,5 +1,6 @@
 ---
 title: TypeScript
+use_cases: "type safety, IDE support, component APIs, prop validation, large applications"
 ---
 
 <!-- - [basically what we have today](https://svelte.dev/docs/typescript)

documentation/docs/07-misc/04-custom-elements.md

@@ -1,5 +1,6 @@
 ---
 title: Custom elements
+use_cases: "web components, framework-agnostic components, micro-frontends, design systems"
 ---
 
 <!-- - [basically what we have today](https://svelte.dev/docs/custom-elements-api) -->

documentation/docs/07-misc/06-v4-migration-guide.md

@@ -1,5 +1,6 @@
 ---
 title: Svelte 4 migration guide
+use_cases: "upgrading from Svelte 3, migration, breaking changes, version updates"
 ---
 
 This migration guide provides an overview of how to migrate from Svelte version 3 to 4. See the linked PRs for more details about each change. Use the migration script to migrate some of these automatically: `npx svelte-migrate@latest svelte-4`

documentation/docs/07-misc/99-faq.md

@@ -1,5 +1,6 @@
 ---
 title: Frequently asked questions
+use_cases: "troubleshooting, best practices, common questions, learning resources"
 ---
 
 ## I'm new to Svelte. Where should I start?

documentation/docs/98-reference/20-svelte.md

@@ -1,5 +1,6 @@
 ---
 title: svelte
+use_cases: "always: main API reference, core functions, component utilities"
 ---
 
 > MODULE: svelte

documentation/docs/98-reference/21-svelte-action.md

@@ -1,5 +1,6 @@
 ---
 title: svelte/action
+use_cases: "legacy actions, DOM manipulation, typing actions"
 ---
 
 This module provides types for [actions](use), which have been superseded by [attachments](@attach).

documentation/docs/98-reference/21-svelte-animate.md

@@ -1,5 +1,6 @@
 ---
 title: svelte/animate
+use_cases: "flip animations, list transitions, keyed blocks"
 ---
 
 > MODULE: svelte/animate

documentation/docs/98-reference/21-svelte-attachments.md

@@ -1,5 +1,6 @@
 ---
 title: svelte/attachments
+use_cases: "DOM manipulation, third-party libraries, modern alternative to actions"
 ---
 
 > MODULE: svelte/attachments

documentation/docs/98-reference/21-svelte-compiler.md

@@ -1,5 +1,6 @@
 ---
 title: svelte/compiler
+use_cases: "build tools, preprocessors, custom compilation, bundler plugins"
 ---
 
 > MODULE: svelte/compiler

documentation/docs/98-reference/21-svelte-easing.md

@@ -1,5 +1,6 @@
 ---
 title: svelte/easing
+use_cases: "animation curves, transition timing, smooth animations"
 ---
 
 > MODULE: svelte/easing

documentation/docs/98-reference/21-svelte-events.md

@@ -1,5 +1,6 @@
 ---
 title: svelte/events
+use_cases: "event handling, event delegation, custom events"
 ---
 
 > MODULE: svelte/events

documentation/docs/98-reference/21-svelte-legacy.md

@@ -1,5 +1,6 @@
 ---
 title: svelte/legacy
+use_cases: "migration helpers, backwards compatibility, gradual migration"
 ---
 
 This module provides various functions for use during the migration, since some features can't be replaced one to one with new features. All imports are marked as deprecated and should be migrated away from over time.

documentation/docs/98-reference/21-svelte-motion.md

@@ -1,5 +1,6 @@
 ---
 title: svelte/motion
+use_cases: "spring animations, tweened values, physics-based animations"
 ---
 
 > MODULE: svelte/motion

documentation/docs/98-reference/21-svelte-reactivity-window.md

@@ -1,5 +1,6 @@
 ---
 title: svelte/reactivity/window
+use_cases: "window properties, reactive viewport dimensions, scroll position"
 ---
 
 This module exports reactive versions of various `window` values, each of which has a reactive `current` property that you can reference in reactive contexts (templates, [deriveds]($derived) and [effects]($effect)) without using [`<svelte:window>`](svelte-window) bindings or manually creating your own event listeners.

documentation/docs/98-reference/21-svelte-reactivity.md

@@ -1,5 +1,6 @@
 ---
 title: svelte/reactivity
+use_cases: "reactive collections, Map/Set alternatives, reactive URLs, reactive utilities"
 ---
 
 Svelte provides reactive versions of various built-ins like [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) that can be used just like their native counterparts, as well as a handful of additional utilities for handling reactivity.

documentation/docs/98-reference/21-svelte-server.md

@@ -1,5 +1,6 @@
 ---
 title: svelte/server
+use_cases: "SSR, server-side rendering, static generation"
 ---
 
 > MODULE: svelte/server

documentation/docs/98-reference/21-svelte-store.md

@@ -1,5 +1,6 @@
 ---
 title: svelte/store
+use_cases: "writable stores, readable stores, derived stores, store contract"
 ---
 
 > MODULE: svelte/store

documentation/docs/98-reference/21-svelte-transition.md

@@ -1,5 +1,6 @@
 ---
 title: svelte/transition
+use_cases: "fade, fly, slide, scale, draw transitions, crossfade"
 ---
 
 > MODULE: svelte/transition

documentation/docs/98-reference/30-compiler-errors.md

@@ -1,5 +1,6 @@
 ---
 title: 'Compiler errors'
+use_cases: "error reference, debugging, troubleshooting compilation"
 ---
 
 @include .generated/compile-errors.md

documentation/docs/98-reference/30-compiler-warnings.md

@@ -1,5 +1,6 @@
 ---
 title: 'Compiler warnings'
+use_cases: "warning reference, best practices, code quality"
 ---
 
 Svelte warns you at compile time if it catches potential mistakes, such as writing inaccessible markup.

documentation/docs/98-reference/30-runtime-errors.md

@@ -1,5 +1,6 @@
 ---
 title: 'Runtime errors'
+use_cases: "error reference, debugging runtime issues, troubleshooting"
 ---
 
 ## Client errors

documentation/docs/98-reference/30-runtime-warnings.md

@@ -1,5 +1,6 @@
 ---
 title: 'Runtime warnings'
+use_cases: "warning reference, performance optimization, best practices"
 ---
 
 ## Client warnings

documentation/docs/98-reference/index.md

@@ -1,3 +1,4 @@
 ---
 title: Reference
+use_cases: "API reference, module documentation, error reference"
 ---

documentation/docs/99-legacy/00-legacy-overview.md

@@ -1,5 +1,6 @@
 ---
 title: Overview
+use_cases: "Svelte 3/4 documentation, legacy syntax, migration reference"
 ---
 
 Svelte 5 introduced some significant changes to Svelte's API, including [runes](what-are-runes), [snippets](snippet) and event attributes. As a result, some Svelte 3/4 features are deprecated (though supported for now, unless otherwise specified) and will eventually be removed. We recommend that you incrementally [migrate your existing code](v5-migration-guide).

documentation/docs/99-legacy/01-legacy-let.md

@@ -1,5 +1,6 @@
 ---
 title: Reactive let/var declarations
+use_cases: "legacy: reactive variables, Svelte 3/4 state"
 ---
 
 In runes mode, reactive state is explicitly declared with the [`$state` rune]($state).

documentation/docs/99-legacy/02-legacy-reactive-assignments.md

@@ -1,5 +1,6 @@
 ---
 title: Reactive $: statements
+use_cases: "legacy: reactive statements, derived values, side effects"
 ---
 
 In runes mode, reactions to state updates are handled with the [`$derived`]($derived) and [`$effect`]($effect) runes.

documentation/docs/99-legacy/03-legacy-export-let.md

@@ -1,5 +1,6 @@
 ---
 title: export let
+use_cases: "legacy: component props, Svelte 3/4 props"
 ---
 
 In runes mode, [component props](basic-markup#Component-props) are declared with the [`$props`]($props) rune, allowing parent components to pass in data.

documentation/docs/99-legacy/04-legacy-$$props-and-$$restProps.md

@@ -1,5 +1,6 @@
 ---
-title: $$props and $$restProps
+title: $props and $restProps
+use_cases: "legacy: spread props, rest props, prop forwarding"
 ---
 
 In runes mode, getting an object containing all the props that were passed in is easy, using the [`$props`]($props) rune.

documentation/docs/99-legacy/10-legacy-on.md

@@ -1,5 +1,6 @@
 ---
 title: on:
+use_cases: "legacy: event handling, event modifiers, component events"
 ---
 
 In runes mode, event handlers are just like any other attribute or prop.

documentation/docs/99-legacy/20-legacy-slots.md

@@ -1,5 +1,6 @@
 ---
 title: <slot>
+use_cases: "legacy: content projection, component composition, slot props"
 ---
 
 In Svelte 5, content can be passed to components in the form of [snippets](snippet) and rendered using [render tags](@render).

documentation/docs/99-legacy/21-legacy-$$slots.md

@@ -1,5 +1,6 @@
 ---
-title: $$slots
+title: $slots
+use_cases: "legacy: slot detection, conditional slots"
 ---
 
 In runes mode, we know which [snippets](snippet) were provided to a component, as they're just normal props.

documentation/docs/99-legacy/22-legacy-svelte-fragment.md

@@ -1,5 +1,6 @@
 ---
 title: <svelte:fragment>
+use_cases: "legacy: wrapper-free slots, multiple slot elements"
 ---
 
 The `<svelte:fragment>` element allows you to place content in a [named slot](legacy-slots) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.

documentation/docs/99-legacy/30-legacy-svelte-component.md

@@ -1,5 +1,6 @@
 ---
 title: <svelte:component>
+use_cases: "legacy: dynamic components, component switching"
 ---
 
 In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes. See the [Svelte 5 migration guide](/docs/svelte/v5-migration-guide#svelte:component-is-no-longer-necessary) for an example.

documentation/docs/99-legacy/31-legacy-svelte-self.md

@@ -1,5 +1,6 @@
 ---
 title: <svelte:self>
+use_cases: "legacy: recursive components, self-referencing"
 ---
 
 The `<svelte:self>` element allows a component to include itself, recursively.

documentation/docs/99-legacy/40-legacy-component-api.md

@@ -1,5 +1,6 @@
 ---
 title: Imperative component API
+use_cases: "legacy: Svelte 3/4 component API, programmatic component control"
 ---
 
 In Svelte 3 and 4, the API for interacting with a component is different than in Svelte 5. Note that this page does _not_ apply to legacy mode components in a Svelte 5 application.